UI Craft — Minimal

Knobs (locked)

• CRAFT_LEVEL = 8 — minimal aesthetics only work when executed precisely; Polish Pass is mandatory.
• MOTION_INTENSITY = 3 — hover + modal enter/exit only. No scroll reveals, no page transitions, no stagger.
• VISUAL_DENSITY = 2 — whitespace-heavy, 1-2 items per row, generous gutters.

Style anchors

• Black or near-black type on white or near-white canvas. Monochrome + ONE accent.
• Inter / Geist for body — never a display font.
• Section padding 120-200px vertical, 40-80px gutters.
• Hairline borders

  1px solid oklch(92% 0.005 250)

  in place of shadows.
• Typography is the hierarchy. No decorative gradients, patterns, or glass.
• Single-column hero default. Asymmetry via one supporting element, not layout tricks.
• Motion is punctuation, not spectacle.
• Every pixel deliberate. When in doubt, cut it.

Base rules (inherited)

../ui-craft/SKILL.md

Style-specific overrides

• Body: Inter or Geist, 400 weight. UI emphasis: 500. Never 600/700 in body copy.

• system-ui, -apple-system

  as fallback stack.
• Headings:

  tracking-tight

  /

  -0.02em

  above 24px, 500 or 600 max.

• text-wrap: balance

  on headings,

  text-wrap: pretty

  on paragraphs.
• No display serifs. No geometric display sans. No mixing two sans families.

• Surface:

  oklch(99% 0 0)

  (light) /

  oklch(14% 0.005 250)

  (dark).
• Text:

  oklch(18% 0.01 250)

  primary,

  oklch(46% 0.01 250)

  secondary.
• Accent reserved for: primary CTA, active nav item, one key metric. That is it.
• Borders:

  oklch(92% 0.005 250)

  light /

  oklch(24% 0.008 250)

  dark. No colored borders.

• Section vertical:

  py-24 md:py-32 lg:py-40

  (96 / 128 / 160px) minimum; 200px for hero on large screens.
• Container:

  max-w-5xl

  typical;

  max-w-3xl

  for reading content.
• One accent placement per viewport preferred; two max.
• No card grids with more than 2 columns on desktop.

• Default chrome = 1px hairline border, no shadow.
• Elevation only for floating UI (menus, toasts, modals) — single soft ambient shadow, not layered.
• Radius: 6px inputs, 8px cards, 12px modals. Keep the scale narrow.

• Allowed: hover (opacity / border color, 120-150ms), modal + dialog enter/exit (180-220ms ease-out), focus ring.
• Forbidden at this intensity: scroll-triggered reveals, stagger, page transitions, parallax, magnetic cursor, entrance choreography.
• Any animation must honor

  prefers-reduced-motion

  .

• Hero: left-aligned or centered headline, ONE supporting element (social proof line, screenshot, single chip). No floating badges, orbs, blobs.
• Features: stacked rows with a single real visual each. No 3-up uniform icon grids even when tempting.
• Nav: text-only links, current state = accent underline or weight 500. No pill backgrounds.

Reference files to read first

../ui-craft/references/

• layout.md

  — spacing, hierarchy, composition

• typography.md

  — scale, readability, weight

• color.md

  — monochrome scales, OKLCH, dark mode

• accessibility.md

  — focus, contrast, keyboard

dashboard.md

stack.md

sound.md

Anti-patterns for THIS style

• Multiple accent colors. One accent, period.
• Display serifs, geometric display sans, or mixing two sans families.
• Decorative gradients, mesh backgrounds, noise overlays, glass panels.
• Scroll-triggered reveals, stagger, page transitions — even "subtle" ones.
• Uniform 3-column icon-heading-text feature grids.
• Colored shadows or glows as affordances.
• Dense layouts. If density feels right, this is the wrong variant — switch to

  ui-craft-dense-dashboard

  .
• Pill backgrounds on nav links or buttons by default; prefer text + underline.
• Section padding under 96px on desktop.