Clean ui design

Clean UI Design

A compact, opinionated system for calm, high-craft product UI. The philosophy in one line: neutral-first, restrained color, obsessive spacing, thin icons, big bold numbers, and surfaces separated by fine shadows instead of borders.

Simple systems make polished products.

When in doubt: remove color, drop borders for a soft shadow, tighten the type, add space.

Runnable references live in examples/ (open the .html files in a browser; previews in examples/screenshots/).

---

Typography

• Font family: Inter or SF Pro (Geist / Söhne also fine; shadcn default works). Headlines may optionally use a serif for an editorial feel.
• Weights: regular (400) and medium (500) only. Semibold (600) rare; bold/black basically never — except large hero numbers.
• Letter spacing: slight negative tracking, -0.15px default (tighten to -0.31px for a denser look). Apply globally (~tracking-tight on headings).
• Type scale (px): keep it tiny. Base 13–14px.
  • Minimal ramp: 12 / 13 / 14 / 24
  • Full ramp: 12 / 13 / 14 / 16 / 18 / 24
  • 12–13px = meta/labels · 14px = body · 24px = biggest text
• Text hierarchy = 3 grays: light mode strong #292929 → default #5D5D5D → subtle #7F7F7F–#9E9E9E; dark mode text #E5E5E5, subtle #A1A1A1.
• Hero metrics (exception): big numbers (28–56px, bold) with the unit/label small and muted beside them.
• Sans + mono combo: sans for primary text, monospace for secondary (axis labels, meta, table sub-values, deltas).
• Use font-variant-numeric: tabular-nums for aligned figures.

---

Color

Neutral-first: foundation is a neutral gray ramp (Tailwind zinc/neutral), with one accent per screen (Sky blue and Orange are go-to accents). Green/red are reserved for status and deltas.

Semantic tokens — name by role and tier: {role}-{tier} (base · subtle · soft · inactive · strong).

Primary (Sky): base #0EA5E9 · subtle #F0F9FF · soft #E0F2FE · darker #075985 · dark #082F49 Neutrals (zinc): base #FFFFFF · subtle #FAFAFA · soft #F4F4F5 · inactive #D4D4D8 · strong #09090B Status: success #22C55E · error #EF4444 · info #3B82F6 · warning #F97316

Ready-made palettes (pick one):

• Light — grays (most versatile): text #292929/#5D5D5D/#7F7F7F–#9E9E9E; page #FFFFFF(or #FBFBFC); surface #FCFCFC; bg-selected #F5F5F5; divider #F2F2F2; accent Sky #0EA5E9 (+ Orange #F97316).
• Light — cool/neutral: page #F6F8FA; menu #EFF2F6; divider #EBECF0; text #434356; subtle #838693.
• Dark: page #1C1C1C (or #171717); surface #262626 (or #1F1F1F); text #E5E5E5; subtle #A1A1A1.

Rules: ~90% neutral; color only for primary actions, status, one data highlight. One accent per screen (in charts, highlight ONE series in the accent, tint the rest). Green = positive delta, red = negative/limit, tiny and inline. Keep the tiered structure even if you swap the primary hue per brand.

---

Spacing & radius

• 8px grid. Nav rows ~8px padding, cards ~16px. Common 8 / 12 / 16 / 20 / 24. Never cramped.
• Radius: 6–16px only (commonly 6/8/12; up to 16 for big cards). Pills for toggles + primary CTAs.
• Two-surface backgrounds. Page one near-white, cards a second (#FFFFFF + #FCFCFC, or #F6F8FA + white). This tiny contrast is what makes the shadow-as-border read.
• Nested cards: outer radius larger than inner (inner ≈ outer − padding).

---

Shadows — "shadow as a border" (the signature move)

Separate surfaces with a soft shadow, not a border line. Cards float on a slightly-tinted page; often there is no visible border at all.

• Never pair a hard border AND a shadow. Pick shadow. (Hairline borders OK only for dividers/tables.)
• Shadows are fine and tight, never wide. No big ambient blur. Think a crisp 1px ring + a 1–2px micro-drop: the ring acts as the border, the drop gives a whisper of lift. Very low opacity.
• Elevation scales by opacity + tiny offset, NOT blur radius. Popovers get a slightly bigger drop, still tight.
• Same treatment on chips, inputs, dropdowns, and the active nav item.

Recipes (light, white surfaces on #FBFBFC/#FCFCFC):

/* chips / inputs / nav items */       box-shadow: 0 0 0 1px rgba(17,17,17,.04), 0 1px 1px rgba(17,17,17,.04);
/* cards / panels (borderless) */      box-shadow: 0 0 0 1px rgba(17,17,17,.04), 0 1px 2px rgba(17,17,17,.05);
/* popovers / menus / modals */        box-shadow: 0 0 0 1px rgba(17,17,17,.05), 0 2px 6px -2px rgba(17,17,17,.12);

Tailwind: avoid default shadow/shadow-md/shadow-lg (too wide). Use a custom tight token and drop border: shadow-[0_0_0_1px_rgba(17,17,17,.04),0_1px_2px_rgba(17,17,17,.05)]. Dark mode: shadows barely show — separate surfaces with lightness steps (#1C1C1C → #262626) plus an inset 0 0 0 1px rgba(255,255,255,.04) hairline ring.

---

Iconography

• One outline icon family (Lucide / Untitled UI / Iconoir). Never mix filled + outline.
• Thin stroke (~1.2). Contextual sizing: 14px nav / 16px default / 20px cards. Monochrome; accent only when active.
• Feature/metric cards often place the icon in a rounded-square tinted container (soft bg) as an anchor.

---

Component patterns

• App shell / sidebar: account/workspace switcher card → search field with ⌘K hint → grouped nav under muted uppercase labels. Active item = subtly elevated card (fine shadow); others muted. Optional count badges.
• Metric card: muted label (+ tiny icon) → big bold value → small green/red delta → optional mini bar chart. Borderless, fine shadow.
• Charts: minimal axes, muted gridlines, thin rounded bars; highlight ONE bar in the accent, tint the rest; dashed goal line.
• Tables: muted column headers (+ tiny icon), avatar + primary + secondary meta rows, soft hover, hairline dividers, roomy.
• Segmented toggle: pill group; active = solid fill (ink light / white dark), inactive = transparent muted.
• Buttons: primary solid ink or accent, white text, medium weight; secondary soft-bg or fine-shadow ghost; mobile primary CTA = full-width pill near bottom (icon + label).
• Mobile (iOS feel): status-bar mock, home indicator, large rounded sheets, big hero number + muted unit, segmented pills, colored progress tracks, bottom full-width pill CTA, page dots.
• Editorial hero (serif mode): full-bleed hero, serif display headline with one accent-colored word, sans subtext, full-width pill CTA, segmented progress dots.

---

Implementation defaults (React + Tailwind + shadcn/ui)

• Start from shadcn/ui + Tailwind. Neutral = zinc/neutral. Primary = sky; secondary accent = orange.
• Font Inter/SF Pro; slight negative tracking (-0.15px). Weights font-normal/font-medium. Body text-sm (14px) or text-[13px]; hero numbers text-3xl…text-5xl font-medium.
• Radius rounded-md/rounded-lg/rounded-xl (rounded-2xl big cards), rounded-full pills.
• Shadow as border, not border: two-surface bg, drop border, add shadow-[0_0_0_1px_rgba(17,17,17,.04),0_1px_2px_rgba(17,17,17,.05)].
• Icons: Lucide strokeWidth={1.2}, size-3.5 (nav) / size-5 (cards).
• Layout gap-4/gap-6, p-2 nav rows, p-4 cards; 8px rhythm. Charts: muted palette + single accent series.
• Ship light + dark; dark = #1C1C1C base, #262626 surfaces, text #E5E5E5 / subtle #A1A1A1.

Ship checklist

1. Mostly neutral with only one accent?
2. Surfaces separated by a fine shadow, not border color? No border + shadow combos? No wide blur?
3. Only regular + medium weights? Base 13–14px? Few sizes (12/13/14/24)? Negative letter-spacing?
4. Icons thin (~1.2), 14px nav / 20px cards, single family?
5. Key numbers dominate (big + medium/bold, units muted)?
6. Radius within 6–16px? 8px spacing? Two-surface background so shadows read?
7. Active states = elevated (shadow) card / solid pill, not loud color?

If yes to all → clean and polished. If not → remove color, drop borders for soft shadows, tighten type, add space.