---
name: "Minimalistic"
slug: "minimalistic"
schema: "freedesignmd/v2"
description: "Apple-like minimal design system for landing pages and product UI: monochrome chrome, one blue accent, medium-weight type, generous whitespace, and Liquid Glass reserved for navigation and controls."
source: "https://freedesignmd.com/system/minimalistic"
repository: "https://github.com/tammo1007/ui-design-minimal"
author: { name: "Tammo Elsner", url: "https://www.linkedin.com/in/tammo-elsner-682998186/" }
aesthetic: "minimal"
industry: "saas"
default_mode: "light"
fonts:
  display: "Inter"
  body: "Inter"
  mono: "JetBrains Mono"
  google_fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
colors:
  light:
    background: "#ffffff"
    foreground: "#1d1d1f"
    card: "#ffffff"
    cardForeground: "#1d1d1f"
    muted: "#f5f5f7"
    mutedForeground: "#6e6e73"
    primary: "#1d1d1f"
    primaryForeground: "#ffffff"
    secondary: "#f5f5f7"
    secondaryForeground: "#1d1d1f"
    accent: "#e8f1ff"
    accentForeground: "#0b57d0"
    border: "rgba(0,0,0,0.08)"
    input: "rgba(0,0,0,0.14)"
    ring: "#1e6ef4"
    destructive: "#e9152d"
    destructiveForeground: "#ffffff"
    success: "#008932"
    successForeground: "#ffffff"
    warning: "#c55300"
    warningForeground: "#ffffff"
  dark:
    background: "#000000"
    foreground: "#f5f5f7"
    card: "#1c1c1e"
    cardForeground: "#f5f5f7"
    muted: "#121214"
    mutedForeground: "#a1a1a6"
    primary: "#f5f5f7"
    primaryForeground: "#000000"
    secondary: "#2c2c2e"
    secondaryForeground: "#f5f5f7"
    accent: "#0a2a4f"
    accentForeground: "#5cb8ff"
    border: "rgba(255,255,255,0.1)"
    input: "rgba(255,255,255,0.17)"
    ring: "#5cb8ff"
    destructive: "#ff6165"
    destructiveForeground: "#1a0204"
    success: "#4ad968"
    successForeground: "#03160a"
    warning: "#ffa056"
    warningForeground: "#1f0e00"
chart:
  light: ["#0088ff", "#ff8d28", "#00c3d0", "#cb30e0", "#34c759"]
  dark: ["#0091ff", "#ff9230", "#00d2e0", "#db34f2", "#30d158"]
type:
  display: { font: display, size: 72, size_mobile: 40, leading: 1.04, weight: 500, tracking: "-0.035em" }
  h1: { font: display, size: 52, size_mobile: 35, leading: 1.06, weight: 500, tracking: "-0.03em" }
  h2: { font: display, size: 40, size_mobile: 32, leading: 1.1, weight: 500, tracking: "-0.025em" }
  h3: { font: display, size: 26, size_mobile: 26, leading: 1.2, weight: 500, tracking: "-0.018em" }
  body: { font: body, size: 17, size_mobile: 17, leading: 1.53, weight: 400, tracking: "-0.01em" }
  small: { font: body, size: 15, size_mobile: 15, leading: 1.47, weight: 400, tracking: "-0.006em" }
  label: { font: body, size: 14, size_mobile: 14, leading: 1.3, weight: 500, tracking: "0em" }
  mono: { font: mono, size: 13, size_mobile: 13, leading: 1.55, weight: 400, tracking: "0em" }
spacing: [4, 8, 12, 16, 20, 24, 32, 40, 56, 64, 88, 144]
radius: { sm: "10px", md: "16px", lg: "24px", xl: "28px", full: "9999px" }
shadow:
  light:
    sm: "0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.08)"
    md: "0 2px 4px rgba(0,0,0,0.03), 0 12px 32px -8px rgba(0,0,0,0.1)"
    lg: "0 4px 8px rgba(0,0,0,0.04), 0 32px 64px -16px rgba(0,0,0,0.2)"
  dark:
    sm: "0 0 0 1px rgba(255,255,255,0.1)"
    md: "0 12px 32px -8px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08)"
    lg: "0 32px 64px -16px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.1)"
motion:
  duration_ms: { instant: 120, fast: 200, base: 320, slow: 600 }
  easing: { standard: "cubic-bezier(0.65, 0, 0.35, 1)", out: "cubic-bezier(0.22, 1, 0.36, 1)", in: "cubic-bezier(0.55, 0, 0.8, 0.4)" }
  reveal: { distance_px: 28, stagger_ms: 80 }
layout: { max_width: 1280, columns: 12, gutter: 24, section_y: 144, section_y_mobile: 88, measure: "60ch" }
extras:
  accent-fill: { light: "#1e6ef4", dark: "#0a64e6" }
  glass: { light: "rgba(255,255,255,0.72)", dark: "rgba(40,40,44,0.55)" }
  glass-thick: { light: "rgba(255,255,255,0.86)", dark: "rgba(30,30,33,0.86)" }
  glass-clear: { light: "rgba(255,255,255,0.16)", dark: "rgba(255,255,255,0.08)" }
  glass-rim: { light: "rgba(255,255,255,0.9)", dark: "rgba(255,255,255,0.18)" }
---

# Minimalistic, DESIGN.md

> Apple-like minimal design system for landing pages and product UI: monochrome chrome, one blue accent, medium-weight type, generous whitespace, and Liquid Glass reserved for navigation and controls.

**Full system on GitHub:** https://github.com/tammo1007/ui-design-minimal · by [Tammo Elsner](https://www.linkedin.com/in/tammo-elsner-682998186/)

This page is the token summary. Install the full system (48 React components, the product scale for dashboards, scroll showpieces, DESIGN.md, AGENTS.md, audit) with: npx skills add tammo1007/ui-design-minimal, then node .claude/skills/ui-design-minimal/scripts/install.mjs. Or download everything as a ZIP from the repo; all folders are needed.

## How to use this file

1. Save this file as `DESIGN.md` in the project root and paste the `tokens.css` block (section 10) into your global stylesheet, or import `https://freedesignmd.com/system/minimalistic.css`, which also contains every component class.
2. **Claude Code:** add `Before any UI work, read @DESIGN.md and use only its tokens and component recipes.` to `CLAUDE.md`.
3. **Cursor:** create `.cursor/rules/design.mdc` with `alwaysApply: true` and the line `Follow @DESIGN.md for every color, font, radius, shadow, spacing and duration.`
4. **Lovable:** paste section 10 into `src/index.css` and add this file to Project Knowledge; ask for changes by role name (`primary`, `muted-foreground`), never by hex.
5. Default mode is **light**: dark mode is `class="dark"` on `<html>` (both modes are fully specified). Use semantic names only (`bg-primary`, `text-muted-foreground`, `.btn-primary`, `var(--radius-lg)`); if a value is not in this file, it does not belong in the UI.

## 1. Overview & personality

Minimalistic is quiet confidence in Apple's current language. The interface is black, white and grey (`#1d1d1f` ink on `#ffffff`, `#f5f5f7` for alternate sections) with exactly one accent, Apple system blue, used for the one prominent action, selection, focus and the first chart series. Liquid Glass is a functional layer: the nav, toolbar groups, the floating sidebar, the tab bar, segmented controls, menus and sheets are frosted glass (white 72 %, 24px blur, 180 % saturation, a 1px specular rim) while every card, table and form stays solid. Headings are medium weight (500 on marketing pages, 600 in product UI), never bold, and section headers are two-tone statements: the first line in ink, the continuation in grey. Corners are concentric and controls are capsules.

**At a glance**

- Aesthetic: Minimal · Industry: SaaS · Default mode: light
- Type: Inter (display) · Inter (body) · JetBrains Mono (mono)
- Brand color (`primary`): `#1d1d1f` light · `#f5f5f7` dark, on primary, text is `#ffffff` / `#000000`
- Corners: 10px / 16px / 24px / 28px · Container 1280px · Base motion 320ms

**Signature moves**

- Glass only on controls: nav, toolbar groups, floating sidebar, tab bar, segmented controls; content stays solid
- Two-tone headers: `Every primitive.` in ink, `Ready before you ask.` in ink-2, same size, both end with a period
- Two type scales: 17px body for websites, 14px body and 32px controls inside dashboards
- Floating glass sidebar 8px off the window edge, r 20, items r 10 (concentric)
- One horizontal card rail on every landing page, drag with momentum, 4:5 cards with product UI rebuilt in HTML
- Pinned scroll showpieces: media that expands to full bleed, stacking cards, a word you zoom through

## 2. Color

Roles follow shadcn/ui naming, so `primary` is always the brand / main-action color and `foreground` is always body text. Every text pair below is WCAG AA (≥ 4.5:1) in both modes.

### Light mode (`:root`)

| Role | CSS variable | Value | Contrast | Usage |
|---|---|---|---|---|
| `background` | `--background` | `#ffffff` |  | Page canvas |
| `foreground` | `--foreground` | `#1d1d1f` | 16.83:1 on background | Body text and headings on background |
| `card` | `--card` | `#ffffff` |  | Cards, panels, popovers |
| `cardForeground` | `--card-foreground` | `#1d1d1f` | 16.83:1 on card | Text on card |
| `muted` | `--muted` | `#f5f5f7` |  | Subtle fills: table headers, code, skeletons |
| `mutedForeground` | `--muted-foreground` | `#6e6e73` | 4.66:1 on muted | Secondary text, captions, placeholders |
| `primary` | `--primary` | `#1d1d1f` |  | Ink, not blue: the prominent button on marketing pages is black (white in dark mode). The blue accent is reserved. |
| `primaryForeground` | `--primary-foreground` | `#ffffff` | 16.83:1 on primary | Text and icons on primary |
| `secondary` | `--secondary` | `#f5f5f7` |  | Secondary buttons and quiet fills |
| `secondaryForeground` | `--secondary-foreground` | `#1d1d1f` | 15.46:1 on secondary | Text on secondary |
| `accent` | `--accent` | `#e8f1ff` |  | Selection tint and active states. The filled blue button (`accent-fill` #1E6EF4) is the one prominent action inside apps. |
| `accentForeground` | `--accent-foreground` | `#0b57d0` | 5.61:1 on accent | Text on accent |
| `border` | `--border` | `rgba(0,0,0,0.08)` |  | Dividers and card outlines |
| `input` | `--input` | `rgba(0,0,0,0.14)` |  | Input borders |
| `ring` | `--ring` | `#1e6ef4` |  | Focus ring and links use the strong blue (#1E6EF4, 4.9:1). The light system blue #0088FF is for fills only. |
| `destructive` | `--destructive` | `#e9152d` |  | Errors and destructive actions |
| `destructiveForeground` | `--destructive-foreground` | `#ffffff` | 4.56:1 on destructive | Text on destructive |
| `success` | `--success` | `#008932` |  | Positive status |
| `successForeground` | `--success-foreground` | `#ffffff` | 4.54:1 on success | Text on success |
| `warning` | `--warning` | `#c55300` |  | Caution status |
| `warningForeground` | `--warning-foreground` | `#ffffff` | 4.55:1 on warning | Text on warning |
| `chart-1…5` | `--chart-1…5` | `#0088ff` `#ff8d28` `#00c3d0` `#cb30e0` `#34c759` | | Data series, in this order |

### Dark mode (`.dark`)

| Role | CSS variable | Value | Contrast | Usage |
|---|---|---|---|---|
| `background` | `--background` | `#000000` |  | Page canvas |
| `foreground` | `--foreground` | `#f5f5f7` | 19.29:1 on background | Body text and headings on background |
| `card` | `--card` | `#1c1c1e` |  | Cards, panels, popovers |
| `cardForeground` | `--card-foreground` | `#f5f5f7` | 15.63:1 on card | Text on card |
| `muted` | `--muted` | `#121214` |  | Subtle fills: table headers, code, skeletons |
| `mutedForeground` | `--muted-foreground` | `#a1a1a6` | 7.27:1 on muted | Secondary text, captions, placeholders |
| `primary` | `--primary` | `#f5f5f7` |  | Ink, not blue: the prominent button on marketing pages is black (white in dark mode). The blue accent is reserved. |
| `primaryForeground` | `--primary-foreground` | `#000000` | 19.29:1 on primary | Text and icons on primary |
| `secondary` | `--secondary` | `#2c2c2e` |  | Secondary buttons and quiet fills |
| `secondaryForeground` | `--secondary-foreground` | `#f5f5f7` | 12.80:1 on secondary | Text on secondary |
| `accent` | `--accent` | `#0a2a4f` |  | Selection tint and active states. The filled blue button (`accent-fill` #1E6EF4) is the one prominent action inside apps. |
| `accentForeground` | `--accent-foreground` | `#5cb8ff` | 6.70:1 on accent | Text on accent |
| `border` | `--border` | `rgba(255,255,255,0.1)` |  | Dividers and card outlines |
| `input` | `--input` | `rgba(255,255,255,0.17)` |  | Input borders |
| `ring` | `--ring` | `#5cb8ff` |  | Focus ring and links use the strong blue (#1E6EF4, 4.9:1). The light system blue #0088FF is for fills only. |
| `destructive` | `--destructive` | `#ff6165` |  | Errors and destructive actions |
| `destructiveForeground` | `--destructive-foreground` | `#1a0204` | 6.78:1 on destructive | Text on destructive |
| `success` | `--success` | `#4ad968` |  | Positive status |
| `successForeground` | `--success-foreground` | `#03160a` | 10.17:1 on success | Text on success |
| `warning` | `--warning` | `#ffa056` |  | Caution status |
| `warningForeground` | `--warning-foreground` | `#1f0e00` | 9.29:1 on warning | Text on warning |
| `chart-1…5` | `--chart-1…5` | `#0091ff` `#ff9230` `#00d2e0` `#db34f2` `#30d158` | | Data series, in this order |

### System extras

| Variable | Light | Dark | Usage |
|---|---|---|---|
| `--accent-fill` | `#1e6ef4` | `#0a64e6` | The one prominent action in product UI (Save, Create, Done), checked checkboxes, highlighted menu items. White label. |
| `--glass` | `rgba(255,255,255,0.72)` | `rgba(40,40,44,0.55)` | Regular Liquid Glass for nav, toolbar groups, tab bar, segmented controls. Pair with blur(24px) saturate(180%). |
| `--glass-thick` | `rgba(255,255,255,0.86)` | `rgba(30,30,33,0.86)` | Menus, sheets, the floating sidebar, toasts. |
| `--glass-clear` | `rgba(255,255,255,0.16)` | `rgba(255,255,255,0.08)` | Only for controls over photos and video; add rgba(0,0,0,0.35) when the media is bright. |
| `--glass-rim` | `rgba(255,255,255,0.9)` | `rgba(255,255,255,0.18)` | inset 0 1px 0 specular highlight on every glass element. |

## 3. Typography

Load fonts with:

```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" />
```

| Role | Font | Size (390px → 1440px) | Line height | Weight | Tracking | Style | Class |
|---|---|---|---|---|---|---|---|
| `display` | Inter | 40px → 72px | 1.04 | 500 | -0.035em | – | `.type-display` |
| `h1` | Inter | 35px → 52px | 1.06 | 500 | -0.03em | – | `.type-h1` |
| `h2` | Inter | 32px → 40px | 1.1 | 500 | -0.025em | – | `.type-h2` |
| `h3` | Inter | 26px | 1.2 | 500 | -0.018em | – | `.type-h3` |
| `body` | Inter | 17px | 1.53 | 400 | -0.01em | – | `.type-body` |
| `small` | Inter | 15px | 1.47 | 400 | -0.006em | – | `.type-small` |
| `label` | Inter | 14px | 1.3 | 500 | 0em | – | `.type-label` |
| `mono` | JetBrains Mono | 13px | 1.55 | 400 | 0em | – | `.type-mono` |

- `h1`–`h3` elements map to the roles of the same name; `display` is for one hero headline per page.
- Fluid sizes use `clamp()` between the two values (see `--type-*-size` in tokens.css).
- Only the weights in this table are loaded; never use other weights.

## 4. Spacing & layout

Spacing is a 4px scale. Use these steps only (`--space-N` = N × 4px):

| Token | `--space-1` | `--space-2` | `--space-3` | `--space-4` | `--space-5` | `--space-6` | `--space-8` | `--space-10` | `--space-14` | `--space-16` | `--space-22` | `--space-36` |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| px | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 56 | 64 | 88 | 144 |

- Container: max 1280px, 24px side gutters (`.container`).
- Grid: 12 columns, 24px gap.
- Sections: 144px vertical padding on desktop, 88px on mobile (`.section`).
- Long text: max 60ch per line (`.prose`).
- Section headers are left-aligned two-tone statements; center only the hero variant and the final CTA.
- Dashboards: floating glass sidebar 248px (64 collapsed), 52px toolbar, 24px content padding, 16px gaps, 20px card padding, 44px table rows.
- Max 3 pinned scroll sections per page, never first, never back to back.
- Max 2 dark sections on a light page, never first, never adjacent; the dark theme also works page-wide.

## 5. Shape & elevation

| Radius | Value | Use |
|---|---|---|
| `--radius-sm` | 10px | badges, checkboxes, small chips |
| `--radius-md` | 16px | buttons, inputs, tabs (= shadcn `--radius`) |
| `--radius-lg` | 24px | cards, panels, menus |
| `--radius-xl` | 28px | dialogs, hero media, large surfaces |
| `--radius-full` | 9999px | avatars, pills, toggles |

| Shadow | Mode | Value |
|---|---|---|
| `--shadow-sm` | light | `0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.08)` |
| `--shadow-md` | light | `0 2px 4px rgba(0,0,0,0.03), 0 12px 32px -8px rgba(0,0,0,0.1)` |
| `--shadow-lg` | light | `0 4px 8px rgba(0,0,0,0.04), 0 32px 64px -16px rgba(0,0,0,0.2)` |
| `--shadow-sm` | dark | `0 0 0 1px rgba(255,255,255,0.1)` |
| `--shadow-md` | dark | `0 12px 32px -8px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08)` |
| `--shadow-lg` | dark | `0 32px 64px -16px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.1)` |

`sm` = resting card · `md` = hover / raised · `lg` = dialogs and popovers. Nothing else casts a shadow.

## 6. Motion

**Glass morph.** Controls press to 0.97 on a damped spring, menus grow out of their button, the nav pill rides up and morphs into the bar. Scroll showpieces pin the page: media expands to full bleed, cards stack and dim, a giant word scales 14x as you fly through it. Only transform and opacity move; reduced motion shows calm static layouts.

| Token | Value | Use |
|---|---|---|
| `--duration-instant` | 120ms | press feedback, toggles |
| `--duration-fast` | 200ms | hover, focus, color changes |
| `--duration-base` | 320ms | menus, tabs, popovers, cards lifting |
| `--duration-slow` | 600ms | dialogs and scroll reveals |
| `--ease-standard` | `cubic-bezier(0.65, 0, 0.35, 1)` | state changes |
| `--ease-out` | `cubic-bezier(0.22, 1, 0.36, 1)` | entrances and reveals |
| `--ease-in` | `cubic-bezier(0.55, 0, 0.8, 0.4)` | exits |

- Scroll reveal (`.reveal` → `.reveal.is-in` via IntersectionObserver): rise 28px and fade over `--duration-slow` with `--ease-out`; siblings stagger by 80ms (`--reveal-index`).
- Use no durations other than the four above.
- `prefers-reduced-motion: reduce` → no transforms, reveals show immediately (included in tokens.css).

## 7. Components

Every component reads only variables from section 10, so light and dark mode work with no extra code. These are the exact rules (also in `https://freedesignmd.com/system/minimalistic.css`). In React/shadcn projects, put the same declarations on the matching shadcn component variants.

### Button

```html
<button class="btn btn-primary">Save</button>  <!-- btn-secondary · btn-outline · btn-ghost -->
```

```css
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.006em;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
}
.btn-primary:hover:not(:disabled) {
  background: color-mix(in oklab, var(--primary) 80%, transparent);
}
.btn-primary:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-secondary {
  background: transparent;
  color: var(--foreground);
  box-shadow: inset 0 0 0 1px var(--input);
}
.btn-secondary:hover:not(:disabled) {
  background: color-mix(in oklab, var(--foreground) 4%, transparent);
}
.btn-secondary:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-outline {
  background: var(--accent-fill);
  color: white;
}
.btn-outline:hover:not(:disabled) {
  background: color-mix(in oklab, var(--accent-fill) 90%, black);
}
.btn-outline:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-ghost {
  background: transparent;
  color: var(--foreground);
}
.btn-ghost:hover:not(:disabled) {
  background: color-mix(in oklab, var(--foreground) 5%, transparent);
}
.btn-ghost:active:not(:disabled) {
  transform: scale(0.97);
}
.btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}
```

### Input

```html
<input class="input" placeholder="you@company.com" />  <!-- aria-invalid="true" for errors -->
```

```css
.input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  font-family: var(--font-sans);
  font-size: 17px;
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.input::placeholder {
  color: var(--muted-foreground);
  opacity: 1;
}
.input:hover:not(:disabled):not(:focus) {
  border-color: color-mix(in oklab, var(--foreground) 28%, transparent);
}
.input:focus, .input:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 18%, transparent);
}
.input[aria-invalid="true"] {
  border-color: var(--destructive);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 22%, transparent);
}
.input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--muted);
}
```

### Card

```html
<article class="card">…</article>  <!-- add card-interactive when the whole card is a link -->
```

```css
.card {
  background: var(--muted);
  color: var(--card-foreground);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: 40px;
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out);
}
.card-interactive:hover {
  background: color-mix(in oklab, var(--muted) 92%, var(--foreground));
}
```

### Badge

```html
<span class="badge badge-soft" data-tone="success">Paid</span>  <!-- badge-solid · badge-outline; tones: primary (default) · success · warning · destructive -->
```

```css
.badge {
  --tone: var(--primary);
  --tone-foreground: var(--primary-foreground);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0em;
  line-height: 1;
  white-space: nowrap;
}
.badge[data-tone="success"] {
  --tone: var(--success);
  --tone-foreground: var(--success-foreground);
}
.badge[data-tone="warning"] {
  --tone: var(--warning);
  --tone-foreground: var(--warning-foreground);
}
.badge[data-tone="destructive"] {
  --tone: var(--destructive);
  --tone-foreground: var(--destructive-foreground);
}
.badge-solid {
  background: var(--tone);
  color: var(--tone-foreground);
  border: 1px solid var(--tone);
}
.badge-soft {
  background: color-mix(in oklab, var(--tone) 12%, var(--card));
  color: var(--foreground);
  border: 1px solid color-mix(in oklab, var(--tone) 28%, transparent);
}
.badge-outline {
  background: transparent;
  color: var(--foreground);
  border: 1px solid var(--border);
}
```

### Navigation bar

```html
<nav class="nav"><a class="nav-link" aria-current="page">Home</a><a class="nav-link">Docs</a></nav>
```

```css
.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 64px;
  padding: 0 24px;
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid var(--border);
}
.nav-link {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0em;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.nav-link:hover {
  color: var(--foreground);
  background: var(--muted);
}
.nav-link[aria-current="page"] {
  color: var(--foreground);
  background: var(--accent);
}
```

### Tabs

```html
<div class="tabs" role="tablist"><button class="tab" role="tab" aria-selected="true">Overview</button>…</div>
```

```css
.tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--muted);
  border-radius: var(--radius-full);
}
.tab {
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0em;
  transition: color var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.tab:hover:not([aria-selected="true"]) {
  color: var(--foreground);
}
.tab[aria-selected="true"] {
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
}
```

### Table

```html
<table class="table"><thead><tr><th>…</th></tr></thead><tbody><tr><td>…</td></tr></tbody></table>
```

```css
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.table th {
  text-align: left;
  height: 40px;
  padding: 0 16px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  background: var(--muted);
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
}
.table td {
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  color: var(--foreground);
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.table tbody tr:hover td {
  background: var(--accent);
  color: var(--accent-foreground);
}
```

### Dialog / modal

```html
<div class="dialog-overlay"><div class="dialog" role="dialog" aria-modal="true">…</div></div>
```

```css
.dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.32);
  display: grid;
  place-items: center;
  padding: 24px;
}
.dialog {
  width: min(448px, 100%);
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 24px;
}
```

### Text link

```html
<a class="link" href="…">Read more</a>
```

```css
.link {
  color: var(--ring);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--duration-fast) var(--ease-standard), text-decoration-color var(--duration-fast) var(--ease-standard);
}
.link:hover {
  text-decoration-color: currentColor;
}
```

## 8. Imagery & iconography

**Imagery.** Product first: real product UI rebuilt in HTML from the system's own components (never screenshot crops), phones and windows placed at native size in a device stage, and rich colorful wallpapers only where clear glass floats over media. No stock photos of people at laptops, no saturated gradients behind text.

**Icons.** Heroicons v2 outline only, at 16, 20 and 24px with a thin 1.35 stroke (1.5 at 16px), colored ink or ink-2. Toolbar icons have no circles around them. Never emoji, never AI sparkle icons, never icons inside colored blobs. Every icon-only control has an aria-label.

## 9. Do / Don't

**Do**

- Use glass only for navigation and controls; keep cards, tables, pricing and forms solid
- Keep chrome black, white and grey and let the blue accent mark one prominent action per view
- Write section headers as two-tone, left-aligned statements that end with periods
- Use the product scale (14px body, 32px controls, 44px rows) inside dashboards and the marketing scale on websites
- Put one horizontal card rail on every landing page
- Check light, dark and increased contrast; status always carries a word, never color alone

**Don't**

- Don't put glass on cards, grids or behind body text, and never stack glass on glass
- Don't use bold (700+) headings, ALL CAPS headers, gradient text or colored eyebrows
- Don't use the light system blue #0088FF for small text; text and links use #1E6EF4
- Don't mix marketing and product type sizes on one surface
- Don't use more than 3 pinned scroll sections or animate width, height or blur
- Don't ship SF Pro font files; Apple devices render SF Pro as the system font

## 10. tokens.css

Drop-in, shadcn/ui-compatible. Works with Tailwind v4 as-is (the `@theme inline` block creates `bg-primary`, `text-muted-foreground`, `font-heading`, `text-display`, `rounded-ui-lg`, `shadow-ui-md`…). Plain CSS projects can ignore the `@theme` block.

```css
/* Minimalistic, tokens.css
 * https://freedesignmd.com/system/minimalistic
 * shadcn/ui-compatible variables. Light on :root, dark on .dark.
 * Default mode: light.
 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --type-display-size: clamp(40px, 28.11px + 3.048vw, 72px);
  --type-display-leading: 1.04;
  --type-display-weight: 500;
  --type-display-tracking: -0.035em;
  --type-h1-size: clamp(35px, 28.69px + 1.619vw, 52px);
  --type-h1-leading: 1.06;
  --type-h1-weight: 500;
  --type-h1-tracking: -0.03em;
  --type-h2-size: clamp(32px, 29.03px + 0.762vw, 40px);
  --type-h2-leading: 1.1;
  --type-h2-weight: 500;
  --type-h2-tracking: -0.025em;
  --type-h3-size: 26px;
  --type-h3-leading: 1.2;
  --type-h3-weight: 500;
  --type-h3-tracking: -0.018em;
  --type-body-size: 17px;
  --type-body-leading: 1.53;
  --type-body-weight: 400;
  --type-body-tracking: -0.01em;
  --type-small-size: 15px;
  --type-small-leading: 1.47;
  --type-small-weight: 400;
  --type-small-tracking: -0.006em;
  --type-label-size: 14px;
  --type-label-leading: 1.3;
  --type-label-weight: 500;
  --type-label-tracking: 0em;
  --type-mono-size: 13px;
  --type-mono-leading: 1.55;
  --type-mono-weight: 400;
  --type-mono-tracking: 0em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-14: 56px;
  --space-16: 64px;
  --space-22: 88px;
  --space-36: 144px;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  --duration-instant: 120ms;
  --duration-fast: 200ms;
  --duration-base: 320ms;
  --duration-slow: 600ms;
  --ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 0.8, 0.4);
  --reveal-distance: 28px;
  --reveal-stagger: 80ms;
  --container-max: 1280px;
  --gutter: 24px;
  --section-y: 144px;
  --section-y-mobile: 88px;
  --measure: 60ch;
  --background: #ffffff;
  --foreground: #1d1d1f;
  --card: #ffffff;
  --card-foreground: #1d1d1f;
  --muted: #f5f5f7;
  --muted-foreground: #6e6e73;
  --primary: #1d1d1f;
  --primary-foreground: #ffffff;
  --secondary: #f5f5f7;
  --secondary-foreground: #1d1d1f;
  --accent: #e8f1ff;
  --accent-foreground: #0b57d0;
  --border: rgba(0,0,0,0.08);
  --input: rgba(0,0,0,0.14);
  --ring: #1e6ef4;
  --destructive: #e9152d;
  --destructive-foreground: #ffffff;
  --success: #008932;
  --success-foreground: #ffffff;
  --warning: #c55300;
  --warning-foreground: #ffffff;
  --chart-1: #0088ff;
  --chart-2: #ff8d28;
  --chart-3: #00c3d0;
  --chart-4: #cb30e0;
  --chart-5: #34c759;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.08);
  --shadow-md: 0 2px 4px rgba(0,0,0,0.03), 0 12px 32px -8px rgba(0,0,0,0.1);
  --shadow-lg: 0 4px 8px rgba(0,0,0,0.04), 0 32px 64px -16px rgba(0,0,0,0.2);
  --accent-fill: #1e6ef4;
  --glass: rgba(255,255,255,0.72);
  --glass-thick: rgba(255,255,255,0.86);
  --glass-clear: rgba(255,255,255,0.16);
  --glass-rim: rgba(255,255,255,0.9);
}

.dark {
  --background: #000000;
  --foreground: #f5f5f7;
  --card: #1c1c1e;
  --card-foreground: #f5f5f7;
  --muted: #121214;
  --muted-foreground: #a1a1a6;
  --primary: #f5f5f7;
  --primary-foreground: #000000;
  --secondary: #2c2c2e;
  --secondary-foreground: #f5f5f7;
  --accent: #0a2a4f;
  --accent-foreground: #5cb8ff;
  --border: rgba(255,255,255,0.1);
  --input: rgba(255,255,255,0.17);
  --ring: #5cb8ff;
  --destructive: #ff6165;
  --destructive-foreground: #1a0204;
  --success: #4ad968;
  --success-foreground: #03160a;
  --warning: #ffa056;
  --warning-foreground: #1f0e00;
  --chart-1: #0091ff;
  --chart-2: #ff9230;
  --chart-3: #00d2e0;
  --chart-4: #db34f2;
  --chart-5: #30d158;
  --shadow-sm: 0 0 0 1px rgba(255,255,255,0.1);
  --shadow-md: 0 12px 32px -8px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08);
  --shadow-lg: 0 32px 64px -16px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.1);
  --accent-fill: #0a64e6;
  --glass: rgba(40,40,44,0.55);
  --glass-thick: rgba(30,30,33,0.86);
  --glass-clear: rgba(255,255,255,0.08);
  --glass-rim: rgba(255,255,255,0.18);
}

/* Tailwind v4: utilities like bg-primary, text-muted-foreground, font-heading, text-display, rounded-ui-lg, shadow-ui-md */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --font-heading: var(--font-display);
  --font-body: var(--font-sans);
  --font-code: var(--font-mono);
  --radius-ui-sm: var(--radius-sm);
  --radius-ui-md: var(--radius-md);
  --radius-ui-lg: var(--radius-lg);
  --radius-ui-xl: var(--radius-xl);
  --text-display: var(--type-display-size);
  --text-display--line-height: var(--type-display-leading);
  --text-display--letter-spacing: var(--type-display-tracking);
  --text-display--font-weight: var(--type-display-weight);
  --text-h1: var(--type-h1-size);
  --text-h1--line-height: var(--type-h1-leading);
  --text-h1--letter-spacing: var(--type-h1-tracking);
  --text-h1--font-weight: var(--type-h1-weight);
  --text-h2: var(--type-h2-size);
  --text-h2--line-height: var(--type-h2-leading);
  --text-h2--letter-spacing: var(--type-h2-tracking);
  --text-h2--font-weight: var(--type-h2-weight);
  --text-h3: var(--type-h3-size);
  --text-h3--line-height: var(--type-h3-leading);
  --text-h3--letter-spacing: var(--type-h3-tracking);
  --text-h3--font-weight: var(--type-h3-weight);
  --text-body: var(--type-body-size);
  --text-body--line-height: var(--type-body-leading);
  --text-body--letter-spacing: var(--type-body-tracking);
  --text-body--font-weight: var(--type-body-weight);
  --text-small: var(--type-small-size);
  --text-small--line-height: var(--type-small-leading);
  --text-small--letter-spacing: var(--type-small-tracking);
  --text-small--font-weight: var(--type-small-weight);
  --text-label: var(--type-label-size);
  --text-label--line-height: var(--type-label-leading);
  --text-label--letter-spacing: var(--type-label-tracking);
  --text-label--font-weight: var(--type-label-weight);
  --text-mono: var(--type-mono-size);
  --text-mono--line-height: var(--type-mono-leading);
  --text-mono--letter-spacing: var(--type-mono-tracking);
  --text-mono--font-weight: var(--type-mono-weight);
  --shadow-ui-sm: var(--shadow-sm);
  --shadow-ui-md: var(--shadow-md);
  --shadow-ui-lg: var(--shadow-lg);
}

@layer base {
  body {
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: var(--type-body-size);
    line-height: var(--type-body-leading);
    font-weight: var(--type-body-weight);
    letter-spacing: var(--type-body-tracking);
    -webkit-font-smoothing: antialiased;
  }
  .type-display {
    font-family: var(--font-display);
    font-size: var(--type-display-size);
    line-height: var(--type-display-leading);
    font-weight: var(--type-display-weight);
    letter-spacing: var(--type-display-tracking);
  }
  .type-h1 {
    font-family: var(--font-display);
    font-size: var(--type-h1-size);
    line-height: var(--type-h1-leading);
    font-weight: var(--type-h1-weight);
    letter-spacing: var(--type-h1-tracking);
  }
  .type-h2 {
    font-family: var(--font-display);
    font-size: var(--type-h2-size);
    line-height: var(--type-h2-leading);
    font-weight: var(--type-h2-weight);
    letter-spacing: var(--type-h2-tracking);
  }
  .type-h3 {
    font-family: var(--font-display);
    font-size: var(--type-h3-size);
    line-height: var(--type-h3-leading);
    font-weight: var(--type-h3-weight);
    letter-spacing: var(--type-h3-tracking);
  }
  .type-body {
    font-family: var(--font-sans);
    font-size: var(--type-body-size);
    line-height: var(--type-body-leading);
    font-weight: var(--type-body-weight);
    letter-spacing: var(--type-body-tracking);
  }
  .type-small {
    font-family: var(--font-sans);
    font-size: var(--type-small-size);
    line-height: var(--type-small-leading);
    font-weight: var(--type-small-weight);
    letter-spacing: var(--type-small-tracking);
  }
  .type-label {
    font-family: var(--font-sans);
    font-size: var(--type-label-size);
    line-height: var(--type-label-leading);
    font-weight: var(--type-label-weight);
    letter-spacing: var(--type-label-tracking);
  }
  .type-mono {
    font-family: var(--font-mono);
    font-size: var(--type-mono-size);
    line-height: var(--type-mono-leading);
    font-weight: var(--type-mono-weight);
    letter-spacing: var(--type-mono-tracking);
  }
  h1 {
    font-family: var(--font-display);
    font-size: var(--type-h1-size);
    line-height: var(--type-h1-leading);
    font-weight: var(--type-h1-weight);
    letter-spacing: var(--type-h1-tracking);
  }
  h2 {
    font-family: var(--font-display);
    font-size: var(--type-h2-size);
    line-height: var(--type-h2-leading);
    font-weight: var(--type-h2-weight);
    letter-spacing: var(--type-h2-tracking);
  }
  h3 {
    font-family: var(--font-display);
    font-size: var(--type-h3-size);
    line-height: var(--type-h3-leading);
    font-weight: var(--type-h3-weight);
    letter-spacing: var(--type-h3-tracking);
  }
  code, kbd, samp, pre {
    font-family: var(--font-mono);
  }
  ::selection {
    background: var(--primary);
    color: var(--primary-foreground);
  }
  .container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .section {
    padding-block: var(--section-y);
  }
  .prose {
    max-width: var(--measure);
  }
  .reveal {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
    transition-delay: calc(var(--reveal-index, 0) * var(--reveal-stagger));
  }
  .reveal.is-in {
    opacity: 1;
    transform: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; }
  }
}
```

Tailwind v3:

```js
// tailwind.config.js, Tailwind v3 (v4 users: the @theme block in tokens.css does this)
module.exports = {
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        "background": "var(--background)",
        "foreground": "var(--foreground)",
        "card": { DEFAULT: "var(--card)", foreground: "var(--card-foreground)" },
        "muted": { DEFAULT: "var(--muted)", foreground: "var(--muted-foreground)" },
        "primary": { DEFAULT: "var(--primary)", foreground: "var(--primary-foreground)" },
        "secondary": { DEFAULT: "var(--secondary)", foreground: "var(--secondary-foreground)" },
        "accent": { DEFAULT: "var(--accent)", foreground: "var(--accent-foreground)" },
        "border": "var(--border)",
        "input": "var(--input)",
        "ring": "var(--ring)",
        "destructive": { DEFAULT: "var(--destructive)", foreground: "var(--destructive-foreground)" },
        "success": { DEFAULT: "var(--success)", foreground: "var(--success-foreground)" },
        "warning": { DEFAULT: "var(--warning)", foreground: "var(--warning-foreground)" },
        chart: { 1: "var(--chart-1)", 2: "var(--chart-2)", 3: "var(--chart-3)", 4: "var(--chart-4)", 5: "var(--chart-5)" },
      },
      fontFamily: { heading: ["var(--font-display)"], body: ["var(--font-sans)"], code: ["var(--font-mono)"] },
      borderRadius: { "ui-sm": "var(--radius-sm)", "ui-md": "var(--radius-md)", "ui-lg": "var(--radius-lg)", "ui-xl": "var(--radius-xl)" },
      boxShadow: { "ui-sm": "var(--shadow-sm)", "ui-md": "var(--shadow-md)", "ui-lg": "var(--shadow-lg)" },
      transitionDuration: { instant: "var(--duration-instant)", fast: "var(--duration-fast)", base: "var(--duration-base)", slow: "var(--duration-slow)" },
      transitionTimingFunction: { standard: "var(--ease-standard)", out: "var(--ease-out)", in: "var(--ease-in)" },
      maxWidth: { container: "var(--container-max)", measure: "var(--measure)" },
    },
  },
};
```

Dependencies: `@heroicons/react`, `motion`, `lenis`