Design System · v1.5 · Brutally Minimal
Fast & gets out of the way.
The shared visual language for every Koni Studio surface.
§01 · Logo & brand
A single geometric letterform cut from negative space.
Sharp diagonals. No curves. No gradient. No glow. The mark inherits currentColor and ships at three sizes: size-5 in chrome, size-12 in hero contexts, never below size-4 — the diagonal cut starts to look like noise.
Favicon system
Three SVGs · one mark
Dark fill behind the lime K so it stays readable on light browser tabs. app/icon.svg auto-detected by Next 15; apple-touch wired explicitly via metadata.icons.
§02 · Direction
Brutally Minimal. Type and whitespace do all the work.
Zero decoration. No background gradients, no decorative blobs, no patterns, no grain noise. Product screenshots are the decoration. Mood: someone who values speed looks at this and feels "this is for me, this is fast, this is honest."
Aesthetic peers
Linear · Vercel · PostHog
Developer-tool precision. Monochrome discipline. Geist-grade typesetting.
Not
Glean · Looker · Tableau
Corporate dashboards. Stock-hero marketing. Bubble-pill SaaS. Reject in review.
§03 · Color · Hex literals in globals.css
Restrained. Dark default + monochrome neutrals + one distinctive accent.
The accent is rare and meaningful — reserved for primary action, active state, confidence indicator. v0.14.3 switched off OKLCH because perceptual lightness drift rendered surfaces 30–40% lighter than intent. Canonical values are hex.
Surfaces · neutrals
Semantic · status
§3 · Rationale
Why lime, and not blue or purple.
Every AI tool defaults to blue ("trust") or violet gradients (Cursor / Claude / OpenAI). Lime signals terminal/CRT energy and builder DNA — and it differentiates Koni in a sea of indistinguishable AI dashboards.
§04 · Typography · Geist + JetBrains Mono
Free, modern, hinted. Builder-recognizable.
Geist for product surfaces, sans + mono variants share the same metrics. JetBrains Mono for SQL and code blocks — ligatures off, optimized for line-by-line reading.
-- filter to merged PRs from this week, grouped by author SELECT author, COUNT(*) AS prs, DATE_TRUNC('week', merged_at) AS week FROM pull_requests WHERE state = 'merged' AND merged_at >= NOW() - '7 days'::interval GROUP BY author, week ORDER BY prs DESC LIMIT 100;
§05 · Spacing & radius
Base unit 4px. Sharp 2–6px corners. Pill radius only for tags.
Density: tighter than Vercel marketing, looser than Linear's project board. The product values decisive feel over friendly rounding — bubble radii on cards or CTAs are forbidden in review.
Spacing scale
Radius scale
§06 · Motion · Minimal-functional
Motion is paid for by a real user action.
No entrance animations on the landing. No scroll-driven fade-ins. No decorative motion ever. State changes, hover, focus, loading — those are the only beats. Hover any demo below to see it.
Hover · focus · button press
100ms ease-out. Color and background only. Never scale or shadow.
Focus ring · input
1px lime ring at 40% opacity. Precise — not the heavy 3px glow shadcn ships by default.
Skeleton loader · subtle pulse
Opacity pulse. No shimmer-gradient — that reads AI-slop and is rejected in review.
NavProgressBar · in-app navigation
1px lime segment slides during page transitions. Solid lime, no glow. Mounts above swapping content.
§07 · Components · shadcn/ui · we own the source
Radix primitives + Tailwind + cva. Patched away from shadcn 4.6 defaults.
We patched Badge's rounded-4xl bubble, Card's decorative ring, and Input's muddy 30%-opacity gray. Every primitive below ships with the variants the Koni system actually uses.
Connection · GitHub
koni-studio / koni-erp
Synced 4 minutes ago · 1,204 commits · 24 branches.
| Repo | Author | Status | PRs | Merged | Cycle (d) |
|---|---|---|---|---|---|
| koni-erp | linh.tran | ready | 128 | 119 | 2.4 |
| senti-web | minh.le | syncing | 84 | 76 | 3.1 |
| subwallet | hung.pham | ready | 209 | 198 | 1.9 |
| koni-finance | thu.nguyen | failed | 12 | 0 | — |
| koni-site | an.do | queued | 36 | 29 | 4.0 |
§08 · Shipped UI patterns
Encode the conventions once. Reach for the pattern, not the riff.
A single <PageHeader/> for every page. A single row shape for every settings list. The lime stripe lives on the row wrapper, never the handle. Three pages drifting in three directions = users have to relearn a layout they already know.
§11.1 · <PageHeader>
Connections
Data sources
Connect GitHub and Linear via OAuth. Sync runs every 6 hours. Cached queries return in under 10ms on warm paths.
§11.8 · §11.10 · List row · active stripe on the wrapper
§09 · Anti-slop · REJECT in review
If a PR introduces any of these, flag it.
These aren't preferences. They're the patterns that take Koni out of "developer-tool precision" and into "another AI dashboard." Caught at review, not at design.
§10 · Decisions log
The why behind every canonical choice.
Versioned in DESIGN.md. The system's character — fast, terse, honest, gets out of the way — holds across every surface, whoever the end user is.