Minimalistic design system template

1---
2name: "Minimalistic"
3slug: "minimalistic"
4schema: "freedesignmd/v2"
5description: "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."
6source: "https://freedesignmd.com/system/minimalistic"
7repository: "https://github.com/tammo1007/ui-design-minimal"
8author: { name: "Tammo Elsner", url: "https://www.linkedin.com/in/tammo-elsner-682998186/" }
9aesthetic: "minimal"
10industry: "saas"
11default_mode: "light"
12fonts:
13  display: "Inter"
14  body: "Inter"
15  mono: "JetBrains Mono"
16  google_fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
17colors:
18  light:
19    background: "#ffffff"
20    foreground: "#1d1d1f"
21    card: "#ffffff"
22    cardForeground: "#1d1d1f"
23    muted: "#f5f5f7"
24    mutedForeground: "#6e6e73"
25    primary: "#1d1d1f"
26    primaryForeground: "#ffffff"
27    secondary: "#f5f5f7"
28    secondaryForeground: "#1d1d1f"
29    accent: "#e8f1ff"
30    accentForeground: "#0b57d0"
31    border: "rgba(0,0,0,0.08)"
32    input: "rgba(0,0,0,0.14)"
33    ring: "#1e6ef4"
34    destructive: "#e9152d"
35    destructiveForeground: "#ffffff"
36    success: "#008932"
37    successForeground: "#ffffff"
38    warning: "#c55300"
39    warningForeground: "#ffffff"
40  dark:
41    background: "#000000"
42    foreground: "#f5f5f7"
43    card: "#1c1c1e"
44    cardForeground: "#f5f5f7"
45    muted: "#121214"
46    mutedForeground: "#a1a1a6"
47    primary: "#f5f5f7"
48    primaryForeground: "#000000"
49    secondary: "#2c2c2e"
50    secondaryForeground: "#f5f5f7"
51    accent: "#0a2a4f"
52    accentForeground: "#5cb8ff"
53    border: "rgba(255,255,255,0.1)"
54    input: "rgba(255,255,255,0.17)"
55    ring: "#5cb8ff"
56    destructive: "#ff6165"
57    destructiveForeground: "#1a0204"
58    success: "#4ad968"
59    successForeground: "#03160a"
60    warning: "#ffa056"
61    warningForeground: "#1f0e00"
62chart:
63  light: ["#0088ff", "#ff8d28", "#00c3d0", "#cb30e0", "#34c759"]
64  dark: ["#0091ff", "#ff9230", "#00d2e0", "#db34f2", "#30d158"]
65type:
66  display: { font: display, size: 72, size_mobile: 40, leading: 1.04, weight: 500, tracking: "-0.035em" }
67  h1: { font: display, size: 52, size_mobile: 35, leading: 1.06, weight: 500, tracking: "-0.03em" }
68  h2: { font: display, size: 40, size_mobile: 32, leading: 1.1, weight: 500, tracking: "-0.025em" }
69  h3: { font: display, size: 26, size_mobile: 26, leading: 1.2, weight: 500, tracking: "-0.018em" }
70  body: { font: body, size: 17, size_mobile: 17, leading: 1.53, weight: 400, tracking: "-0.01em" }
71  small: { font: body, size: 15, size_mobile: 15, leading: 1.47, weight: 400, tracking: "-0.006em" }
72  label: { font: body, size: 14, size_mobile: 14, leading: 1.3, weight: 500, tracking: "0em" }
73  mono: { font: mono, size: 13, size_mobile: 13, leading: 1.55, weight: 400, tracking: "0em" }
74spacing: [4, 8, 12, 16, 20, 24, 32, 40, 56, 64, 88, 144]
75radius: { sm: "10px", md: "16px", lg: "24px", xl: "28px", full: "9999px" }
76shadow:
77  light:
78    sm: "0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.08)"
79    md: "0 2px 4px rgba(0,0,0,0.03), 0 12px 32px -8px rgba(0,0,0,0.1)"
80    lg: "0 4px 8px rgba(0,0,0,0.04), 0 32px 64px -16px rgba(0,0,0,0.2)"
81  dark:
82    sm: "0 0 0 1px rgba(255,255,255,0.1)"
83    md: "0 12px 32px -8px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08)"
84    lg: "0 32px 64px -16px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.1)"
85motion:
86  duration_ms: { instant: 120, fast: 200, base: 320, slow: 600 }
87  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)" }
88  reveal: { distance_px: 28, stagger_ms: 80 }
89layout: { max_width: 1280, columns: 12, gutter: 24, section_y: 144, section_y_mobile: 88, measure: "60ch" }
90extras:
91  accent-fill: { light: "#1e6ef4", dark: "#0a64e6" }
92  glass: { light: "rgba(255,255,255,0.72)", dark: "rgba(40,40,44,0.55)" }
93  glass-thick: { light: "rgba(255,255,255,0.86)", dark: "rgba(30,30,33,0.86)" }
94  glass-clear: { light: "rgba(255,255,255,0.16)", dark: "rgba(255,255,255,0.08)" }
95  glass-rim: { light: "rgba(255,255,255,0.9)", dark: "rgba(255,255,255,0.18)" }
96---
97 
98# Minimalistic, DESIGN.md
99 
100> 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.
101 
102**Full system on GitHub:** https://github.com/tammo1007/ui-design-minimal · by [Tammo Elsner](https://www.linkedin.com/in/tammo-elsner-682998186/)
103 
104This 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.
105 
106## How to use this file
107 
1081. 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.
1092. **Claude Code:** add `Before any UI work, read @DESIGN.md and use only its tokens and component recipes.` to `CLAUDE.md`.
1103. **Cursor:** create `.cursor/rules/design.mdc` with `alwaysApply: true` and the line `Follow @DESIGN.md for every color, font, radius, shadow, spacing and duration.`
1114. **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.
1125. 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.
113 
114## 1. Overview & personality
115 
116Minimalistic 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.
117 
118**At a glance**
119 
120- Aesthetic: Minimal · Industry: SaaS · Default mode: light
121- Type: Inter (display) · Inter (body) · JetBrains Mono (mono)
122- Brand color (`primary`): `#1d1d1f` light · `#f5f5f7` dark, on primary, text is `#ffffff` / `#000000`
123- Corners: 10px / 16px / 24px / 28px · Container 1280px · Base motion 320ms
124 
125**Signature moves**
126 
127- Glass only on controls: nav, toolbar groups, floating sidebar, tab bar, segmented controls; content stays solid
128- Two-tone headers: `Every primitive.` in ink, `Ready before you ask.` in ink-2, same size, both end with a period
129- Two type scales: 17px body for websites, 14px body and 32px controls inside dashboards
130- Floating glass sidebar 8px off the window edge, r 20, items r 10 (concentric)
131- One horizontal card rail on every landing page, drag with momentum, 4:5 cards with product UI rebuilt in HTML
132- Pinned scroll showpieces: media that expands to full bleed, stacking cards, a word you zoom through
133 
134## 2. Color
135 
136Roles 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.
137 
138### Light mode (`:root`)
139 
140| Role | CSS variable | Value | Contrast | Usage |
141|---|---|---|---|---|
142| `background` | `--background` | `#ffffff` |  | Page canvas |
143| `foreground` | `--foreground` | `#1d1d1f` | 16.83:1 on background | Body text and headings on background |
144| `card` | `--card` | `#ffffff` |  | Cards, panels, popovers |
145| `cardForeground` | `--card-foreground` | `#1d1d1f` | 16.83:1 on card | Text on card |
146| `muted` | `--muted` | `#f5f5f7` |  | Subtle fills: table headers, code, skeletons |
147| `mutedForeground` | `--muted-foreground` | `#6e6e73` | 4.66:1 on muted | Secondary text, captions, placeholders |
148| `primary` | `--primary` | `#1d1d1f` |  | Ink, not blue: the prominent button on marketing pages is black (white in dark mode). The blue accent is reserved. |
149| `primaryForeground` | `--primary-foreground` | `#ffffff` | 16.83:1 on primary | Text and icons on primary |
150| `secondary` | `--secondary` | `#f5f5f7` |  | Secondary buttons and quiet fills |
151| `secondaryForeground` | `--secondary-foreground` | `#1d1d1f` | 15.46:1 on secondary | Text on secondary |
152| `accent` | `--accent` | `#e8f1ff` |  | Selection tint and active states. The filled blue button (`accent-fill` #1E6EF4) is the one prominent action inside apps. |
153| `accentForeground` | `--accent-foreground` | `#0b57d0` | 5.61:1 on accent | Text on accent |
154| `border` | `--border` | `rgba(0,0,0,0.08)` |  | Dividers and card outlines |
155| `input` | `--input` | `rgba(0,0,0,0.14)` |  | Input borders |
156| `ring` | `--ring` | `#1e6ef4` |  | Focus ring and links use the strong blue (#1E6EF4, 4.9:1). The light system blue #0088FF is for fills only. |
157| `destructive` | `--destructive` | `#e9152d` |  | Errors and destructive actions |
158| `destructiveForeground` | `--destructive-foreground` | `#ffffff` | 4.56:1 on destructive | Text on destructive |
159| `success` | `--success` | `#008932` |  | Positive status |
160| `successForeground` | `--success-foreground` | `#ffffff` | 4.54:1 on success | Text on success |
161| `warning` | `--warning` | `#c55300` |  | Caution status |
162| `warningForeground` | `--warning-foreground` | `#ffffff` | 4.55:1 on warning | Text on warning |
163| `chart-1…5` | `--chart-1…5` | `#0088ff` `#ff8d28` `#00c3d0` `#cb30e0` `#34c759` | | Data series, in this order |
164 
165### Dark mode (`.dark`)
166 
167| Role | CSS variable | Value | Contrast | Usage |
168|---|---|---|---|---|
169| `background` | `--background` | `#000000` |  | Page canvas |
170| `foreground` | `--foreground` | `#f5f5f7` | 19.29:1 on background | Body text and headings on background |
171| `card` | `--card` | `#1c1c1e` |  | Cards, panels, popovers |
172| `cardForeground` | `--card-foreground` | `#f5f5f7` | 15.63:1 on card | Text on card |
173| `muted` | `--muted` | `#121214` |  | Subtle fills: table headers, code, skeletons |
174| `mutedForeground` | `--muted-foreground` | `#a1a1a6` | 7.27:1 on muted | Secondary text, captions, placeholders |
175| `primary` | `--primary` | `#f5f5f7` |  | Ink, not blue: the prominent button on marketing pages is black (white in dark mode). The blue accent is reserved. |
176| `primaryForeground` | `--primary-foreground` | `#000000` | 19.29:1 on primary | Text and icons on primary |
177| `secondary` | `--secondary` | `#2c2c2e` |  | Secondary buttons and quiet fills |
178| `secondaryForeground` | `--secondary-foreground` | `#f5f5f7` | 12.80:1 on secondary | Text on secondary |
179| `accent` | `--accent` | `#0a2a4f` |  | Selection tint and active states. The filled blue button (`accent-fill` #1E6EF4) is the one prominent action inside apps. |
180| `accentForeground` | `--accent-foreground` | `#5cb8ff` | 6.70:1 on accent | Text on accent |
181| `border` | `--border` | `rgba(255,255,255,0.1)` |  | Dividers and card outlines |
182| `input` | `--input` | `rgba(255,255,255,0.17)` |  | Input borders |
183| `ring` | `--ring` | `#5cb8ff` |  | Focus ring and links use the strong blue (#1E6EF4, 4.9:1). The light system blue #0088FF is for fills only. |
184| `destructive` | `--destructive` | `#ff6165` |  | Errors and destructive actions |
185| `destructiveForeground` | `--destructive-foreground` | `#1a0204` | 6.78:1 on destructive | Text on destructive |
186| `success` | `--success` | `#4ad968` |  | Positive status |
187| `successForeground` | `--success-foreground` | `#03160a` | 10.17:1 on success | Text on success |
188| `warning` | `--warning` | `#ffa056` |  | Caution status |
189| `warningForeground` | `--warning-foreground` | `#1f0e00` | 9.29:1 on warning | Text on warning |
190| `chart-1…5` | `--chart-1…5` | `#0091ff` `#ff9230` `#00d2e0` `#db34f2` `#30d158` | | Data series, in this order |
191 
192### System extras
193 
194| Variable | Light | Dark | Usage |
195|---|---|---|---|
196| `--accent-fill` | `#1e6ef4` | `#0a64e6` | The one prominent action in product UI (Save, Create, Done), checked checkboxes, highlighted menu items. White label. |
197| `--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%). |
198| `--glass-thick` | `rgba(255,255,255,0.86)` | `rgba(30,30,33,0.86)` | Menus, sheets, the floating sidebar, toasts. |
199| `--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. |
200| `--glass-rim` | `rgba(255,255,255,0.9)` | `rgba(255,255,255,0.18)` | inset 0 1px 0 specular highlight on every glass element. |
201 
202## 3. Typography
203 
204Load fonts with:
205 
206```html
207<link rel="preconnect" href="https://fonts.googleapis.com" />
208<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
209<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" />
210```
211 
212| Role | Font | Size (390px → 1440px) | Line height | Weight | Tracking | Style | Class |
213|---|---|---|---|---|---|---|---|
214| `display` | Inter | 40px → 72px | 1.04 | 500 | -0.035em | – | `.type-display` |
215| `h1` | Inter | 35px → 52px | 1.06 | 500 | -0.03em | – | `.type-h1` |
216| `h2` | Inter | 32px → 40px | 1.1 | 500 | -0.025em | – | `.type-h2` |
217| `h3` | Inter | 26px | 1.2 | 500 | -0.018em | – | `.type-h3` |
218| `body` | Inter | 17px | 1.53 | 400 | -0.01em | – | `.type-body` |
219| `small` | Inter | 15px | 1.47 | 400 | -0.006em | – | `.type-small` |
220| `label` | Inter | 14px | 1.3 | 500 | 0em | – | `.type-label` |
221| `mono` | JetBrains Mono | 13px | 1.55 | 400 | 0em | – | `.type-mono` |
222 
223- `h1`–`h3` elements map to the roles of the same name; `display` is for one hero headline per page.
224- Fluid sizes use `clamp()` between the two values (see `--type-*-size` in tokens.css).
225- Only the weights in this table are loaded; never use other weights.
226 
227## 4. Spacing & layout
228 
229Spacing is a 4px scale. Use these steps only (`--space-N` = N × 4px):
230 
231| 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` |
232|---|---|---|---|---|---|---|---|---|---|---|---|---|
233| px | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 56 | 64 | 88 | 144 |
234 
235- Container: max 1280px, 24px side gutters (`.container`).
236- Grid: 12 columns, 24px gap.
237- Sections: 144px vertical padding on desktop, 88px on mobile (`.section`).
238- Long text: max 60ch per line (`.prose`).
239- Section headers are left-aligned two-tone statements; center only the hero variant and the final CTA.
240- Dashboards: floating glass sidebar 248px (64 collapsed), 52px toolbar, 24px content padding, 16px gaps, 20px card padding, 44px table rows.
241- Max 3 pinned scroll sections per page, never first, never back to back.
242- Max 2 dark sections on a light page, never first, never adjacent; the dark theme also works page-wide.
243 
244## 5. Shape & elevation
245 
246| Radius | Value | Use |
247|---|---|---|
248| `--radius-sm` | 10px | badges, checkboxes, small chips |
249| `--radius-md` | 16px | buttons, inputs, tabs (= shadcn `--radius`) |
250| `--radius-lg` | 24px | cards, panels, menus |
251| `--radius-xl` | 28px | dialogs, hero media, large surfaces |
252| `--radius-full` | 9999px | avatars, pills, toggles |
253 
254| Shadow | Mode | Value |
255|---|---|---|
256| `--shadow-sm` | light | `0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.08)` |
257| `--shadow-md` | light | `0 2px 4px rgba(0,0,0,0.03), 0 12px 32px -8px rgba(0,0,0,0.1)` |
258| `--shadow-lg` | light | `0 4px 8px rgba(0,0,0,0.04), 0 32px 64px -16px rgba(0,0,0,0.2)` |
259| `--shadow-sm` | dark | `0 0 0 1px rgba(255,255,255,0.1)` |
260| `--shadow-md` | dark | `0 12px 32px -8px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08)` |
261| `--shadow-lg` | dark | `0 32px 64px -16px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.1)` |
262 
263`sm` = resting card · `md` = hover / raised · `lg` = dialogs and popovers. Nothing else casts a shadow.
264 
265## 6. Motion
266 
267**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.
268 
269| Token | Value | Use |
270|---|---|---|
271| `--duration-instant` | 120ms | press feedback, toggles |
272| `--duration-fast` | 200ms | hover, focus, color changes |
273| `--duration-base` | 320ms | menus, tabs, popovers, cards lifting |
274| `--duration-slow` | 600ms | dialogs and scroll reveals |
275| `--ease-standard` | `cubic-bezier(0.65, 0, 0.35, 1)` | state changes |
276| `--ease-out` | `cubic-bezier(0.22, 1, 0.36, 1)` | entrances and reveals |
277| `--ease-in` | `cubic-bezier(0.55, 0, 0.8, 0.4)` | exits |
278 
279- Scroll reveal (`.reveal` → `.reveal.is-in` via IntersectionObserver): rise 28px and fade over `--duration-slow` with `--ease-out`; siblings stagger by 80ms (`--reveal-index`).
280- Use no durations other than the four above.
281- `prefers-reduced-motion: reduce` → no transforms, reveals show immediately (included in tokens.css).
282 
283## 7. Components
284 
285Every 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.
286 
287### Button
288 
289```html
290<button class="btn btn-primary">Save</button>  <!-- btn-secondary · btn-outline · btn-ghost -->
291```
292 
293```css
294.btn {
295  display: inline-flex;
296  align-items: center;
297  justify-content: center;
298  gap: 8px;
299  height: 44px;
300  padding: 0 20px;
301  font-family: var(--font-sans);
302  font-size: 15px;
303  font-weight: 500;
304  letter-spacing: -0.006em;
305  border-radius: var(--radius-full);
306  border: 1px solid transparent;
307  white-space: nowrap;
308  cursor: pointer;
309  text-decoration: none;
310  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);
311}
312.btn-primary {
313  background: var(--primary);
314  color: var(--primary-foreground);
315}
316.btn-primary:hover:not(:disabled) {
317  background: color-mix(in oklab, var(--primary) 80%, transparent);
318}
319.btn-primary:active:not(:disabled) {
320  transform: scale(0.97);
321}
322.btn-secondary {
323  background: transparent;
324  color: var(--foreground);
325  box-shadow: inset 0 0 0 1px var(--input);
326}
327.btn-secondary:hover:not(:disabled) {
328  background: color-mix(in oklab, var(--foreground) 4%, transparent);
329}
330.btn-secondary:active:not(:disabled) {
331  transform: scale(0.97);
332}
333.btn-outline {
334  background: var(--accent-fill);
335  color: white;
336}
337.btn-outline:hover:not(:disabled) {
338  background: color-mix(in oklab, var(--accent-fill) 90%, black);
339}
340.btn-outline:active:not(:disabled) {
341  transform: scale(0.97);
342}
343.btn-ghost {
344  background: transparent;
345  color: var(--foreground);
346}
347.btn-ghost:hover:not(:disabled) {
348  background: color-mix(in oklab, var(--foreground) 5%, transparent);
349}
350.btn-ghost:active:not(:disabled) {
351  transform: scale(0.97);
352}
353.btn:focus-visible {
354  outline: 2px solid var(--ring);
355  outline-offset: 2px;
356}
357.btn:disabled, .btn[aria-disabled="true"] {
358  opacity: 0.4;
359  cursor: not-allowed;
360}
361```
362 
363### Input
364 
365```html
366<input class="input" placeholder="you@company.com" />  <!-- aria-invalid="true" for errors -->
367```
368 
369```css
370.input {
371  display: block;
372  width: 100%;
373  height: 48px;
374  padding: 0 16px;
375  font-family: var(--font-sans);
376  font-size: 17px;
377  color: var(--foreground);
378  background: var(--card);
379  border: 1px solid var(--input);
380  border-radius: var(--radius-sm);
381  outline: none;
382  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);
383}
384.input::placeholder {
385  color: var(--muted-foreground);
386  opacity: 1;
387}
388.input:hover:not(:disabled):not(:focus) {
389  border-color: color-mix(in oklab, var(--foreground) 28%, transparent);
390}
391.input:focus, .input:focus-visible {
392  border-color: var(--ring);
393  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 18%, transparent);
394}
395.input[aria-invalid="true"] {
396  border-color: var(--destructive);
397  box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 22%, transparent);
398}
399.input:disabled {
400  opacity: 0.5;
401  cursor: not-allowed;
402  background: var(--muted);
403}
404```
405 
406### Card
407 
408```html
409<article class="card">…</article>  <!-- add card-interactive when the whole card is a link -->
410```
411 
412```css
413.card {
414  background: var(--muted);
415  color: var(--card-foreground);
416  border: 1px solid transparent;
417  border-radius: var(--radius-lg);
418  box-shadow: none;
419  padding: 40px;
420  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);
421}
422.card-interactive:hover {
423  background: color-mix(in oklab, var(--muted) 92%, var(--foreground));
424}
425```
426 
427### Badge
428 
429```html
430<span class="badge badge-soft" data-tone="success">Paid</span>  <!-- badge-solid · badge-outline; tones: primary (default) · success · warning · destructive -->
431```
432 
433```css
434.badge {
435  --tone: var(--primary);
436  --tone-foreground: var(--primary-foreground);
437  display: inline-flex;
438  align-items: center;
439  gap: 6px;
440  height: 20px;
441  padding: 0 8px;
442  border-radius: var(--radius-full);
443  font-family: var(--font-sans);
444  font-size: 11px;
445  font-weight: 500;
446  letter-spacing: 0em;
447  line-height: 1;
448  white-space: nowrap;
449}
450.badge[data-tone="success"] {
451  --tone: var(--success);
452  --tone-foreground: var(--success-foreground);
453}
454.badge[data-tone="warning"] {
455  --tone: var(--warning);
456  --tone-foreground: var(--warning-foreground);
457}
458.badge[data-tone="destructive"] {
459  --tone: var(--destructive);
460  --tone-foreground: var(--destructive-foreground);
461}
462.badge-solid {
463  background: var(--tone);
464  color: var(--tone-foreground);
465  border: 1px solid var(--tone);
466}
467.badge-soft {
468  background: color-mix(in oklab, var(--tone) 12%, var(--card));
469  color: var(--foreground);
470  border: 1px solid color-mix(in oklab, var(--tone) 28%, transparent);
471}
472.badge-outline {
473  background: transparent;
474  color: var(--foreground);
475  border: 1px solid var(--border);
476}
477```
478 
479### Navigation bar
480 
481```html
482<nav class="nav"><a class="nav-link" aria-current="page">Home</a><a class="nav-link">Docs</a></nav>
483```
484 
485```css
486.nav {
487  display: flex;
488  align-items: center;
489  gap: 4px;
490  height: 64px;
491  padding: 0 24px;
492  background: var(--glass);
493  backdrop-filter: blur(24px) saturate(160%);
494  -webkit-backdrop-filter: blur(24px) saturate(160%);
495  border-bottom: 1px solid var(--border);
496}
497.nav-link {
498  padding: 6px 12px;
499  border-radius: var(--radius-sm);
500  font-family: var(--font-sans);
501  font-size: 15px;
502  font-weight: 400;
503  letter-spacing: 0em;
504  color: var(--muted-foreground);
505  text-decoration: none;
506  transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
507}
508.nav-link:hover {
509  color: var(--foreground);
510  background: var(--muted);
511}
512.nav-link[aria-current="page"] {
513  color: var(--foreground);
514  background: var(--accent);
515}
516```
517 
518### Tabs
519 
520```html
521<div class="tabs" role="tablist"><button class="tab" role="tab" aria-selected="true">Overview</button>…</div>
522```
523 
524```css
525.tabs {
526  display: inline-flex;
527  gap: 4px;
528  padding: 4px;
529  background: var(--muted);
530  border-radius: var(--radius-full);
531}
532.tab {
533  height: 36px;
534  padding: 0 16px;
535  border: 0;
536  border-radius: var(--radius-full);
537  background: transparent;
538  color: var(--muted-foreground);
539  cursor: pointer;
540  font-family: var(--font-sans);
541  font-size: 14px;
542  font-weight: 500;
543  letter-spacing: 0em;
544  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);
545}
546.tab:hover:not([aria-selected="true"]) {
547  color: var(--foreground);
548}
549.tab[aria-selected="true"] {
550  background: var(--card);
551  color: var(--foreground);
552  box-shadow: var(--shadow-sm);
553}
554```
555 
556### Table
557 
558```html
559<table class="table"><thead><tr><th>…</th></tr></thead><tbody><tr><td>…</td></tr></tbody></table>
560```
561 
562```css
563.table {
564  width: 100%;
565  border-collapse: collapse;
566  font-size: 14px;
567  font-variant-numeric: tabular-nums;
568}
569.table th {
570  text-align: left;
571  height: 40px;
572  padding: 0 16px;
573  font-family: var(--font-sans);
574  font-size: 12px;
575  font-weight: 500;
576  background: var(--muted);
577  color: var(--muted-foreground);
578  border-bottom: 1px solid var(--border);
579}
580.table td {
581  height: 44px;
582  padding: 0 16px;
583  border-bottom: 1px solid var(--border);
584  color: var(--foreground);
585  transition: background-color var(--duration-fast) var(--ease-standard);
586}
587.table tbody tr:hover td {
588  background: var(--accent);
589  color: var(--accent-foreground);
590}
591```
592 
593### Dialog / modal
594 
595```html
596<div class="dialog-overlay"><div class="dialog" role="dialog" aria-modal="true">…</div></div>
597```
598 
599```css
600.dialog-overlay {
601  position: fixed;
602  inset: 0;
603  background: rgba(0,0,0,0.32);
604  display: grid;
605  place-items: center;
606  padding: 24px;
607}
608.dialog {
609  width: min(448px, 100%);
610  background: var(--card);
611  color: var(--card-foreground);
612  border: 1px solid var(--border);
613  border-radius: var(--radius-xl);
614  box-shadow: var(--shadow-lg);
615  padding: 24px;
616}
617```
618 
619### Text link
620 
621```html
622<a class="link" href="…">Read more</a>
623```
624 
625```css
626.link {
627  color: var(--ring);
628  text-decoration: underline;
629  text-decoration-color: transparent;
630  text-decoration-thickness: 1px;
631  text-underline-offset: 4px;
632  transition: color var(--duration-fast) var(--ease-standard), text-decoration-color var(--duration-fast) var(--ease-standard);
633}
634.link:hover {
635  text-decoration-color: currentColor;
636}
637```
638 
639## 8. Imagery & iconography
640 
641**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.
642 
643**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.
644 
645## 9. Do / Don't
646 
647**Do**
648 
649- Use glass only for navigation and controls; keep cards, tables, pricing and forms solid
650- Keep chrome black, white and grey and let the blue accent mark one prominent action per view
651- Write section headers as two-tone, left-aligned statements that end with periods
652- Use the product scale (14px body, 32px controls, 44px rows) inside dashboards and the marketing scale on websites
653- Put one horizontal card rail on every landing page
654- Check light, dark and increased contrast; status always carries a word, never color alone
655 
656**Don't**
657 
658- Don't put glass on cards, grids or behind body text, and never stack glass on glass
659- Don't use bold (700+) headings, ALL CAPS headers, gradient text or colored eyebrows
660- Don't use the light system blue #0088FF for small text; text and links use #1E6EF4
661- Don't mix marketing and product type sizes on one surface
662- Don't use more than 3 pinned scroll sections or animate width, height or blur
663- Don't ship SF Pro font files; Apple devices render SF Pro as the system font
664 
665## 10. tokens.css
666 
667Drop-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.
668 
669```css
670/* Minimalistic, tokens.css
671 * https://freedesignmd.com/system/minimalistic
672 * shadcn/ui-compatible variables. Light on :root, dark on .dark.
673 * Default mode: light.
674 */
675@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");
676 
677:root {
678  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", ui-sans-serif, system-ui, -apple-system, sans-serif;
679  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", ui-sans-serif, system-ui, -apple-system, sans-serif;
680  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
681  --type-display-size: clamp(40px, 28.11px + 3.048vw, 72px);
682  --type-display-leading: 1.04;
683  --type-display-weight: 500;
684  --type-display-tracking: -0.035em;
685  --type-h1-size: clamp(35px, 28.69px + 1.619vw, 52px);
686  --type-h1-leading: 1.06;
687  --type-h1-weight: 500;
688  --type-h1-tracking: -0.03em;
689  --type-h2-size: clamp(32px, 29.03px + 0.762vw, 40px);
690  --type-h2-leading: 1.1;
691  --type-h2-weight: 500;
692  --type-h2-tracking: -0.025em;
693  --type-h3-size: 26px;
694  --type-h3-leading: 1.2;
695  --type-h3-weight: 500;
696  --type-h3-tracking: -0.018em;
697  --type-body-size: 17px;
698  --type-body-leading: 1.53;
699  --type-body-weight: 400;
700  --type-body-tracking: -0.01em;
701  --type-small-size: 15px;
702  --type-small-leading: 1.47;
703  --type-small-weight: 400;
704  --type-small-tracking: -0.006em;
705  --type-label-size: 14px;
706  --type-label-leading: 1.3;
707  --type-label-weight: 500;
708  --type-label-tracking: 0em;
709  --type-mono-size: 13px;
710  --type-mono-leading: 1.55;
711  --type-mono-weight: 400;
712  --type-mono-tracking: 0em;
713  --space-1: 4px;
714  --space-2: 8px;
715  --space-3: 12px;
716  --space-4: 16px;
717  --space-5: 20px;
718  --space-6: 24px;
719  --space-8: 32px;
720  --space-10: 40px;
721  --space-14: 56px;
722  --space-16: 64px;
723  --space-22: 88px;
724  --space-36: 144px;
725  --radius: 16px;
726  --radius-sm: 10px;
727  --radius-md: 16px;
728  --radius-lg: 24px;
729  --radius-xl: 28px;
730  --radius-full: 9999px;
731  --duration-instant: 120ms;
732  --duration-fast: 200ms;
733  --duration-base: 320ms;
734  --duration-slow: 600ms;
735  --ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
736  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
737  --ease-in: cubic-bezier(0.55, 0, 0.8, 0.4);
738  --reveal-distance: 28px;
739  --reveal-stagger: 80ms;
740  --container-max: 1280px;
741  --gutter: 24px;
742  --section-y: 144px;
743  --section-y-mobile: 88px;
744  --measure: 60ch;
745  --background: #ffffff;
746  --foreground: #1d1d1f;
747  --card: #ffffff;
748  --card-foreground: #1d1d1f;
749  --muted: #f5f5f7;
750  --muted-foreground: #6e6e73;
751  --primary: #1d1d1f;
752  --primary-foreground: #ffffff;
753  --secondary: #f5f5f7;
754  --secondary-foreground: #1d1d1f;
755  --accent: #e8f1ff;
756  --accent-foreground: #0b57d0;
757  --border: rgba(0,0,0,0.08);
758  --input: rgba(0,0,0,0.14);
759  --ring: #1e6ef4;
760  --destructive: #e9152d;
761  --destructive-foreground: #ffffff;
762  --success: #008932;
763  --success-foreground: #ffffff;
764  --warning: #c55300;
765  --warning-foreground: #ffffff;
766  --chart-1: #0088ff;
767  --chart-2: #ff8d28;
768  --chart-3: #00c3d0;
769  --chart-4: #cb30e0;
770  --chart-5: #34c759;
771  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.08);
772  --shadow-md: 0 2px 4px rgba(0,0,0,0.03), 0 12px 32px -8px rgba(0,0,0,0.1);
773  --shadow-lg: 0 4px 8px rgba(0,0,0,0.04), 0 32px 64px -16px rgba(0,0,0,0.2);
774  --accent-fill: #1e6ef4;
775  --glass: rgba(255,255,255,0.72);
776  --glass-thick: rgba(255,255,255,0.86);
777  --glass-clear: rgba(255,255,255,0.16);
778  --glass-rim: rgba(255,255,255,0.9);
779}
780 
781.dark {
782  --background: #000000;
783  --foreground: #f5f5f7;
784  --card: #1c1c1e;
785  --card-foreground: #f5f5f7;
786  --muted: #121214;
787  --muted-foreground: #a1a1a6;
788  --primary: #f5f5f7;
789  --primary-foreground: #000000;
790  --secondary: #2c2c2e;
791  --secondary-foreground: #f5f5f7;
792  --accent: #0a2a4f;
793  --accent-foreground: #5cb8ff;
794  --border: rgba(255,255,255,0.1);
795  --input: rgba(255,255,255,0.17);
796  --ring: #5cb8ff;
797  --destructive: #ff6165;
798  --destructive-foreground: #1a0204;
799  --success: #4ad968;
800  --success-foreground: #03160a;
801  --warning: #ffa056;
802  --warning-foreground: #1f0e00;
803  --chart-1: #0091ff;
804  --chart-2: #ff9230;
805  --chart-3: #00d2e0;
806  --chart-4: #db34f2;
807  --chart-5: #30d158;
808  --shadow-sm: 0 0 0 1px rgba(255,255,255,0.1);
809  --shadow-md: 0 12px 32px -8px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08);
810  --shadow-lg: 0 32px 64px -16px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.1);
811  --accent-fill: #0a64e6;
812  --glass: rgba(40,40,44,0.55);
813  --glass-thick: rgba(30,30,33,0.86);
814  --glass-clear: rgba(255,255,255,0.08);
815  --glass-rim: rgba(255,255,255,0.18);
816}
817 
818/* Tailwind v4: utilities like bg-primary, text-muted-foreground, font-heading, text-display, rounded-ui-lg, shadow-ui-md */
819@theme inline {
820  --color-background: var(--background);
821  --color-foreground: var(--foreground);
822  --color-card: var(--card);
823  --color-card-foreground: var(--card-foreground);
824  --color-muted: var(--muted);
825  --color-muted-foreground: var(--muted-foreground);
826  --color-primary: var(--primary);
827  --color-primary-foreground: var(--primary-foreground);
828  --color-secondary: var(--secondary);
829  --color-secondary-foreground: var(--secondary-foreground);
830  --color-accent: var(--accent);
831  --color-accent-foreground: var(--accent-foreground);
832  --color-border: var(--border);
833  --color-input: var(--input);
834  --color-ring: var(--ring);
835  --color-destructive: var(--destructive);
836  --color-destructive-foreground: var(--destructive-foreground);
837  --color-success: var(--success);
838  --color-success-foreground: var(--success-foreground);
839  --color-warning: var(--warning);
840  --color-warning-foreground: var(--warning-foreground);
841  --color-chart-1: var(--chart-1);
842  --color-chart-2: var(--chart-2);
843  --color-chart-3: var(--chart-3);
844  --color-chart-4: var(--chart-4);
845  --color-chart-5: var(--chart-5);
846  --font-heading: var(--font-display);
847  --font-body: var(--font-sans);
848  --font-code: var(--font-mono);
849  --radius-ui-sm: var(--radius-sm);
850  --radius-ui-md: var(--radius-md);
851  --radius-ui-lg: var(--radius-lg);
852  --radius-ui-xl: var(--radius-xl);
853  --text-display: var(--type-display-size);
854  --text-display--line-height: var(--type-display-leading);
855  --text-display--letter-spacing: var(--type-display-tracking);
856  --text-display--font-weight: var(--type-display-weight);
857  --text-h1: var(--type-h1-size);
858  --text-h1--line-height: var(--type-h1-leading);
859  --text-h1--letter-spacing: var(--type-h1-tracking);
860  --text-h1--font-weight: var(--type-h1-weight);
861  --text-h2: var(--type-h2-size);
862  --text-h2--line-height: var(--type-h2-leading);
863  --text-h2--letter-spacing: var(--type-h2-tracking);
864  --text-h2--font-weight: var(--type-h2-weight);
865  --text-h3: var(--type-h3-size);
866  --text-h3--line-height: var(--type-h3-leading);
867  --text-h3--letter-spacing: var(--type-h3-tracking);
868  --text-h3--font-weight: var(--type-h3-weight);
869  --text-body: var(--type-body-size);
870  --text-body--line-height: var(--type-body-leading);
871  --text-body--letter-spacing: var(--type-body-tracking);
872  --text-body--font-weight: var(--type-body-weight);
873  --text-small: var(--type-small-size);
874  --text-small--line-height: var(--type-small-leading);
875  --text-small--letter-spacing: var(--type-small-tracking);
876  --text-small--font-weight: var(--type-small-weight);
877  --text-label: var(--type-label-size);
878  --text-label--line-height: var(--type-label-leading);
879  --text-label--letter-spacing: var(--type-label-tracking);
880  --text-label--font-weight: var(--type-label-weight);
881  --text-mono: var(--type-mono-size);
882  --text-mono--line-height: var(--type-mono-leading);
883  --text-mono--letter-spacing: var(--type-mono-tracking);
884  --text-mono--font-weight: var(--type-mono-weight);
885  --shadow-ui-sm: var(--shadow-sm);
886  --shadow-ui-md: var(--shadow-md);
887  --shadow-ui-lg: var(--shadow-lg);
888}
889 
890@layer base {
891  body {
892    background: var(--background);
893    color: var(--foreground);
894    font-family: var(--font-sans);
895    font-size: var(--type-body-size);
896    line-height: var(--type-body-leading);
897    font-weight: var(--type-body-weight);
898    letter-spacing: var(--type-body-tracking);
899    -webkit-font-smoothing: antialiased;
900  }
901  .type-display {
902    font-family: var(--font-display);
903    font-size: var(--type-display-size);
904    line-height: var(--type-display-leading);
905    font-weight: var(--type-display-weight);
906    letter-spacing: var(--type-display-tracking);
907  }
908  .type-h1 {
909    font-family: var(--font-display);
910    font-size: var(--type-h1-size);
911    line-height: var(--type-h1-leading);
912    font-weight: var(--type-h1-weight);
913    letter-spacing: var(--type-h1-tracking);
914  }
915  .type-h2 {
916    font-family: var(--font-display);
917    font-size: var(--type-h2-size);
918    line-height: var(--type-h2-leading);
919    font-weight: var(--type-h2-weight);
920    letter-spacing: var(--type-h2-tracking);
921  }
922  .type-h3 {
923    font-family: var(--font-display);
924    font-size: var(--type-h3-size);
925    line-height: var(--type-h3-leading);
926    font-weight: var(--type-h3-weight);
927    letter-spacing: var(--type-h3-tracking);
928  }
929  .type-body {
930    font-family: var(--font-sans);
931    font-size: var(--type-body-size);
932    line-height: var(--type-body-leading);
933    font-weight: var(--type-body-weight);
934    letter-spacing: var(--type-body-tracking);
935  }
936  .type-small {
937    font-family: var(--font-sans);
938    font-size: var(--type-small-size);
939    line-height: var(--type-small-leading);
940    font-weight: var(--type-small-weight);
941    letter-spacing: var(--type-small-tracking);
942  }
943  .type-label {
944    font-family: var(--font-sans);
945    font-size: var(--type-label-size);
946    line-height: var(--type-label-leading);
947    font-weight: var(--type-label-weight);
948    letter-spacing: var(--type-label-tracking);
949  }
950  .type-mono {
951    font-family: var(--font-mono);
952    font-size: var(--type-mono-size);
953    line-height: var(--type-mono-leading);
954    font-weight: var(--type-mono-weight);
955    letter-spacing: var(--type-mono-tracking);
956  }
957  h1 {
958    font-family: var(--font-display);
959    font-size: var(--type-h1-size);
960    line-height: var(--type-h1-leading);
961    font-weight: var(--type-h1-weight);
962    letter-spacing: var(--type-h1-tracking);
963  }
964  h2 {
965    font-family: var(--font-display);
966    font-size: var(--type-h2-size);
967    line-height: var(--type-h2-leading);
968    font-weight: var(--type-h2-weight);
969    letter-spacing: var(--type-h2-tracking);
970  }
971  h3 {
972    font-family: var(--font-display);
973    font-size: var(--type-h3-size);
974    line-height: var(--type-h3-leading);
975    font-weight: var(--type-h3-weight);
976    letter-spacing: var(--type-h3-tracking);
977  }
978  code, kbd, samp, pre {
979    font-family: var(--font-mono);
980  }
981  ::selection {
982    background: var(--primary);
983    color: var(--primary-foreground);
984  }
985  .container {
986    width: 100%;
987    max-width: var(--container-max);
988    margin-inline: auto;
989    padding-inline: var(--gutter);
990  }
991  .section {
992    padding-block: var(--section-y);
993  }
994  .prose {
995    max-width: var(--measure);
996  }
997  .reveal {
998    opacity: 0;
999    transform: translateY(var(--reveal-distance));
1000    transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
1001    transition-delay: calc(var(--reveal-index, 0) * var(--reveal-stagger));
1002  }
1003  .reveal.is-in {
1004    opacity: 1;
1005    transform: none;
1006  }
1007  @media (prefers-reduced-motion: reduce) {
1008    .reveal { opacity: 1; transform: none; transition: none; }
1009    *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; }
1010  }
1011}
1012```
1013 
1014Tailwind v3:
1015 
1016```js
1017// tailwind.config.js, Tailwind v3 (v4 users: the @theme block in tokens.css does this)
1018module.exports = {
1019  darkMode: "class",
1020  theme: {
1021    extend: {
1022      colors: {
1023        "background": "var(--background)",
1024        "foreground": "var(--foreground)",
1025        "card": { DEFAULT: "var(--card)", foreground: "var(--card-foreground)" },
1026        "muted": { DEFAULT: "var(--muted)", foreground: "var(--muted-foreground)" },
1027        "primary": { DEFAULT: "var(--primary)", foreground: "var(--primary-foreground)" },
1028        "secondary": { DEFAULT: "var(--secondary)", foreground: "var(--secondary-foreground)" },
1029        "accent": { DEFAULT: "var(--accent)", foreground: "var(--accent-foreground)" },
1030        "border": "var(--border)",
1031        "input": "var(--input)",
1032        "ring": "var(--ring)",
1033        "destructive": { DEFAULT: "var(--destructive)", foreground: "var(--destructive-foreground)" },
1034        "success": { DEFAULT: "var(--success)", foreground: "var(--success-foreground)" },
1035        "warning": { DEFAULT: "var(--warning)", foreground: "var(--warning-foreground)" },
1036        chart: { 1: "var(--chart-1)", 2: "var(--chart-2)", 3: "var(--chart-3)", 4: "var(--chart-4)", 5: "var(--chart-5)" },
1037      },
1038      fontFamily: { heading: ["var(--font-display)"], body: ["var(--font-sans)"], code: ["var(--font-mono)"] },
1039      borderRadius: { "ui-sm": "var(--radius-sm)", "ui-md": "var(--radius-md)", "ui-lg": "var(--radius-lg)", "ui-xl": "var(--radius-xl)" },
1040      boxShadow: { "ui-sm": "var(--shadow-sm)", "ui-md": "var(--shadow-md)", "ui-lg": "var(--shadow-lg)" },
1041      transitionDuration: { instant: "var(--duration-instant)", fast: "var(--duration-fast)", base: "var(--duration-base)", slow: "var(--duration-slow)" },
1042      transitionTimingFunction: { standard: "var(--ease-standard)", out: "var(--ease-out)", in: "var(--ease-in)" },
1043      maxWidth: { container: "var(--container-max)", measure: "var(--measure)" },
1044    },
1045  },
1046};
1047```
1048 
1049Dependencies: `@heroicons/react`, `motion`, `lenis`