# freedesignmd.com — full corpus Every DESIGN.md and PATTERN.md inlined for direct LLM ingestion. Source: https://www.freedesignmd.com --- # SYSTEM: Linear Orbit Source: https://www.freedesignmd.com/system/linear-orbit --- name: "Linear Orbit" description: "Hairline-thin product workspace. Cool off-white surfaces, Inter Display with tight tracking, a single indigo accent, every divider 1px at 6% ink. Engineered calm." tags: [developer, minimal, premium, saas, modern] colors: primary: "#0e1116" secondary: "#5a6273" tertiary: "#0e1116" neutral: "#f5f6f8" surface: "#ffffff" typography: display: "Inter Display" body: Inter mono: "JetBrains Mono" scale: hero: "3.25rem / 1.04 / 600 / -0.045em" h1: "2.25rem / 1.12 / 600 / -0.035em" h2: "1.5rem / 1.25 / 600 / -0.025em" body: "0.9375rem / 1.55 / 400 / -0.005em" radius: sm: 5px md: 8px lg: 10px pill: 9999px shadows: card: "rgba(14,17,22,0.06) 0 0 0 1px, rgba(14,17,22,0.03) 0 1px 2px" button: "rgba(94,106,210,0.18) 0 1px 0 inset" borders: card: "1px solid rgba(14,17,22,0.06)" divider: rgba(14,17,22,0.06) buttons: primary: background: #5e6ad2 color: #ffffff border: none shape: rounded padding: 7px 14px font: 500 / 0.8125rem shadow: rgba(94,106,210,0.18) 0 1px 0 inset, rgba(0,0,0,0.04) 0 1px 1px secondary: background: #ffffff color: #0e1116 border: 1px solid rgba(14,17,22,0.08) shape: rounded padding: 7px 14px font: 500 / 0.8125rem outline: background: transparent color: #0e1116 border: 1px solid rgba(14,17,22,0.10) shape: rounded padding: 7px 14px font: 500 / 0.8125rem ghost: background: transparent color: #5a6273 border: none shape: rounded padding: 7px 12px font: 500 / 0.8125rem charts: variant: "thin-bars" stroke_width: 1.25 fill_opacity: 0.05 gridlines: true bar_gap: 10px highlight: single dot_marker: true fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Linear Orbit ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Linear Orbit** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#5e6ad2`, text `#ffffff`, padding `7px 14px`, weight `500`, shadow `rgba(94,106,210,0.18) 0 1px 0 inset, rgba(0,0,0,0.04) 0 1px 1px`. - **Secondary** — rounded shape, bg `#ffffff`, text `#0e1116`, border `1px solid rgba(14,17,22,0.08)`, padding `7px 14px`, weight `500`. - **Outline** — rounded shape, text `#0e1116`, border `1px solid rgba(14,17,22,0.10)`, padding `7px 14px`, weight `500`. - **Ghost** — rounded shape, text `#5a6273`, padding `7px 12px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#ffffff` - Border: `1px solid rgba(14,17,22,0.06)` - Shadow: `rgba(14,17,22,0.06) 0 0 0 1px, rgba(14,17,22,0.03) 0 1px 2px` - Radius: `radius.lg` (`10px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `thin-bars` - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Inter Display`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Linear Orbit is the workspace UI distilled. The page is a cool off-white that reads as paper under daylight, never warm, never blue-tinted. Type runs at Inter with -0.045em tracking at hero scale — compressed, engineered, technical without being cold. The single accent is an indigo `#5e6ad2` reserved for the primary CTA, the active tab underline, and the focused chart series. Every other interactive surface lives in pure greyscale. The signature move is restraint at the divider level: 1px hairlines at `rgba(14,17,22,0.06)` carry the entire structure. No card shadows, no fills, no chrome — the grid is the chrome. **Signature moves** - Inter Display at hero with -0.045em tracking — text feels engineered, not decorative - 6% ink hairlines as the only divider — never a solid grey, never a fill - Indigo `#5e6ad2` as the *only* color in the entire system - Buttons sit on a 1px inset highlight, never a drop shadow - Underline tabs with the indigo accent, never pills, never boxed - Mono used exclusively for status labels and inline metrics ## 2. Palette ### Core - **Ink** `#0e1116` — text, headings, dark surface - **Surface** `#ffffff` — cards, modals - **Page** `#f5f6f8` — cool off-white background - **Hairline** `rgba(14,17,22,0.06)` — every divider, every card edge ### Accent - **Indigo** `#5e6ad2` — primary CTA, active tab, highlighted chart - **Indigo Soft** `rgba(94,106,210,0.10)` — focus ring, hovered tab background ### Neutrals - 700 `#3a4150` · 500 `#5a6273` · 400 `#7a818f` · 200 `#e6e8ec` ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Inter Display | 52px | 600 | 1.04 | -0.045em | | H1 | Inter Display | 36px | 600 | 1.12 | -0.035em | | H2 | Inter | 24px | 600 | 1.25 | -0.025em | | Body | Inter | 15px | 400 | 1.55 | -0.005em | | UI | Inter | 13px | 500 | 1.4 | 0 | | Mono / Status | JetBrains Mono | 12px | 500 | 1.0 | 0.04em uppercase | Three weights only: 400 / 500 / 600. Negative tracking is mandatory above 20px. ## 4. Buttons ### Primary (Indigo) ```css background: #5e6ad2; color: #ffffff; padding: 7px 14px; border-radius: 6px; box-shadow: rgba(94,106,210,0.18) 0 1px 0 inset, rgba(0,0,0,0.04) 0 1px 1px; ``` ### Secondary (Hairline) - White surface, 1px hairline at 8% ink, ink-700 text - Same padding as primary — the bar height never breaks ### Ghost - Transparent, 500-weight, no border. Hover: 4% ink wash. ## 5. Cards - Background `#ffffff` - 1px hairline at 6% ink, NO drop shadow - Radius 8px (10px for featured) - Internal padding 20px / 28px - Hover: hairline darkens to 10% ink — that is the only state change ## 6. Charts Thin precise bars at 6px width with 10px gap. Single bar highlighted in indigo, others in 8% ink. Line charts at 1.25px stroke, 5% fill, dot marker at the live value. Dashed gridlines at 4% ink. Reads like an engineering dashboard, not marketing. ## 7. Tabs Underline only. Active tab carries a 1.5px indigo bar at the bottom edge; inactive tabs are 500-weight ink-500. No pill tabs, no boxed tabs, ever. ## 8. Spacing - Base 4px - Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64` - Section padding: 64px desktop, 32px mobile ## 9. Do's & don'ts ✅ **Do** - Use the indigo accent exactly once per screen — primary CTA OR active tab, not both - Hold every divider to 6% ink — the discipline IS the design - Use JetBrains Mono only for metrics, status, and inline code - Keep type tracking negative at every size above 20px ❌ **Don't** - Add a second accent color — indigo is alone, by design - Use drop shadows on cards — hairlines only - Use pill buttons — every button is 6px radius - Mix Inter weights beyond 400/500/600 --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#0e1116` | | secondary | `#5a6273` | | tertiary | `#0e1116` | | neutral | `#f5f6f8` | | surface | `#ffffff` | ### Typography - **Display:** Inter Display - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 3.25rem / 1.04 / 600 / -0.045em | | H1 | 2.25rem / 1.12 / 600 / -0.035em | | H2 | 1.5rem / 1.25 / 600 / -0.025em | | Body | 0.9375rem / 1.55 / 400 / -0.005em | ### Radius - sm: `5px` - md: `8px` - lg: `10px` - pill: `9999px` ### Shadows - **card:** `rgba(14,17,22,0.06) 0 0 0 1px, rgba(14,17,22,0.03) 0 1px 2px` - **button:** `rgba(94,106,210,0.18) 0 1px 0 inset` ### Borders - **card:** `1px solid rgba(14,17,22,0.06)` - **divider:** `rgba(14,17,22,0.06)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#5e6ad2` | | color | `#ffffff` | | border | `none` | | padding | `7px 14px` | | fontWeight | `500` | | fontSize | `0.8125rem` | | shadow | `rgba(94,106,210,0.18) 0 1px 0 inset, rgba(0,0,0,0.04) 0 1px 1px` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#ffffff` | | color | `#0e1116` | | border | `1px solid rgba(14,17,22,0.08)` | | padding | `7px 14px` | | fontWeight | `500` | | fontSize | `0.8125rem` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#0e1116` | | border | `1px solid rgba(14,17,22,0.10)` | | padding | `7px 14px` | | fontWeight | `500` | | fontSize | `0.8125rem` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#5a6273` | | border | `none` | | padding | `7px 12px` | | fontWeight | `500` | | fontSize | `0.8125rem` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1.25` | | fillOpacity | `0.05` | | gridlines | `true` | | barGap | `10px` | | highlight | `single` | | dotMarker | `true` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 4px 12px -2px rgba(15,23,42,0.18)`, filter: `brightness(0.97)` - **focus** — outline: `2px solid rgba(14, 17, 22, 0.5)`, outline-offset: `2px` - **active** — shadow: `0 1px 2px rgba(15,23,42,0.1)`, transform: `scale(0.98)` - **disabled** — opacity: `0.4`, filter: `saturate(0.5)` - **loading** — opacity: `0.7` - **selected** — bg: `#0e1116`, color: `#ffffff` #### Input - **hover** — border: `1px solid rgba(14, 17, 22, 0.5)` - **focus** — border: `1.5px solid #0e1116`, shadow: `0 0 0 4px rgba(14, 17, 22, 0.15)` - **disabled** — bg: `rgba(14, 17, 22, 0.04)`, opacity: `0.4` - **error** — border: `1.5px solid #DC2626`, shadow: `0 0 0 4px rgba(220,38,38,0.15)` #### Card - **hover** — shadow: `0 12px 28px -12px rgba(15,23,42,0.18)`, transform: `translateY(-2px)` - **selected** — bg: `rgba(14, 17, 22, 0.04)`, border: `1.5px solid #0e1116` - **dragging** — shadow: `0 20px 48px -16px rgba(15,23,42,0.3)`, transform: `scale(1.02) rotate(-0.5deg)`, opacity: `0.9` #### Tab - **hover** — bg: `rgba(14, 17, 22, 0.06)`, color: `#0e1116` - **focus** — outline: `2px solid rgba(14, 17, 22, 0.5)`, outline-offset: `2px` - **selected** — color: `#0e1116`, border: `0 0 2px 0 solid #0e1116` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Quiet ease.** 240 ms ease-out for all standard transitions. Reliable, invisible — motion stays out of the way. ```css transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `160ms` | | duration.base | `240ms` | | duration.slow | `380ms` | | easing.standard | `cubic-bezier(0.4, 0, 0.2, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.34, 1.4, 0.64, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — hairline border separates. | | level1 | `0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04)` | List rows, resting cards. | | level2 | `0 4px 12px -2px rgba(15,23,42,0.1), 0 2px 6px rgba(15,23,42,0.06)` | Hover cards, popover. | | level3 | `0 12px 32px -8px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.08)` | Sheets, side panels. | | level4 | `0 28px 64px -16px rgba(15,23,42,0.28), 0 8px 24px rgba(15,23,42,0.12)` | Modals — scrim required. | ### Content - **measure:** `68ch` (max line length for body prose) - **paragraph spacing:** `1.2em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#0e1116`, underline `hover` - **blockquote:** border `3px solid rgba(14, 17, 22, 0.6)`, padding `0.5em 0 0.5em 1.25em` - **code:** background `rgba(14, 17, 22, 0.06)`, color `#0e1116` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 18.91:1 | AA | AAA | — | | Body text on canvas | 17.49:1 | AA | AAA | — | | Muted text on surface | 6.12:1 | AA | AA | — | | Accent on surface | 18.91:1 | AA-Large | AAA | — | | Accent on canvas | 17.49:1 | AA-Large | AAA | — | --- # SYSTEM: Devshell Mono Source: https://www.freedesignmd.com/system/devshell-mono --- name: "Devshell Mono" description: "A developer console as a brand. Warm off-white, JetBrains Mono everywhere, a single cyan caret as the only accent. Every divider, label, and CTA aligns to a 4px mono baseline grid. Built to look like a terminal that's been art-directed." tags: [developer, minimal, modern, saas, premium] colors: primary: "#161514" secondary: "#6b6862" tertiary: "#161514" neutral: "#f6f3ee" surface: "#fbf8f3" typography: display: "JetBrains Mono" body: "JetBrains Mono" mono: "JetBrains Mono" scale: hero: "2.75rem / 1.15 / 500 / -0.02em" h1: "2rem / 1.2 / 500 / -0.015em" h2: "1.375rem / 1.3 / 500 / -0.01em" body: "0.9375rem / 1.6 / 400 / 0" radius: sm: 2px md: 4px lg: 6px pill: 9999px shadows: card: "rgba(22,21,20,0.05) 0 0 0 1px" button: none borders: card: "1px solid rgba(22,21,20,0.08)" divider: rgba(22,21,20,0.08) buttons: primary: background: #161514 color: #fbf8f3 border: none shape: sharp padding: 9px 16px font: 500 / 0.8125rem secondary: background: transparent color: #161514 border: 1px solid rgba(22,21,20,0.18) shape: sharp padding: 9px 16px font: 500 / 0.8125rem outline: background: transparent color: #0e8f9c border: 1px solid #0e8f9c shape: sharp padding: 9px 16px font: 500 / 0.8125rem ghost: background: transparent color: #6b6862 border: none shape: sharp padding: 9px 12px font: 500 / 0.8125rem charts: variant: "thin-bars" stroke_width: 1.25 fill_opacity: 0.05 gridlines: true bar_gap: 8px highlight: single dot_marker: false fonts_url: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" dependencies: ["lucide-react"] --- # Devshell Mono ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Devshell Mono** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#161514`, text `#fbf8f3`, padding `9px 16px`, weight `500`. - **Secondary** — sharp shape, text `#161514`, border `1px solid rgba(22,21,20,0.18)`, padding `9px 16px`, weight `500`. - **Outline** — sharp shape, text `#0e8f9c`, border `1px solid #0e8f9c`, padding `9px 16px`, weight `500`. - **Ghost** — sharp shape, text `#6b6862`, padding `9px 12px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#fbf8f3` - Border: `1px solid rgba(22,21,20,0.08)` - Shadow: `rgba(22,21,20,0.05) 0 0 0 1px` - Radius: `radius.lg` (`6px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `thin-bars` - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`JetBrains Mono`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`JetBrains Mono`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Devshell Mono is a developer console treated as a brand. Everything — from the hero to the body to the navigation — runs in JetBrains Mono. The page is a warm off-white `#fbf8f3` (paper, not screen), text is near-black `#161514`, and the only accent is a deep cyan `#0e8f9c` that appears as a blinking caret in the hero, as the active tab marker, and as the outline color on secondary CTAs. Nothing else is colored. The discipline is the 4px mono baseline: every line of text, every divider, every padding value snaps to a 4px grid. Cards have no shadow — only a 1px hairline at 8% ink. The result reads like a terminal that someone with a typography degree has been allowed to redesign. **Signature moves** - Mono everywhere — display, body, UI, all JetBrains Mono - Warm paper background `#fbf8f3`, never cool grey, never pure white - Cyan `#0e8f9c` caret in the hero — a blinking `▍` is part of the brand - Sharp 2-4px radius on every surface — no pills except for status badges - Hairlines at 8% ink as the only divider, no shadow, no fill ## 2. Palette ### Core - **Ink** `#161514` — text, headings, primary CTA fill - **Paper** `#fbf8f3` — page, modals - **Paper Lift** `#f6f3ee` — secondary surfaces - **Hairline** `rgba(22,21,20,0.08)` — every divider, every card edge ### Accent - **Cyan** `#0e8f9c` — caret, active tab, outline CTA - **Cyan Soft** `rgba(14,143,156,0.10)` — focus ring, hovered tab background ### Semantic (mono labels only) - Success `#3a8c5c` · Warn `#b88a2a` · Error `#c4493a` - Used only as the dot prefix on status badges, never as fill ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | JetBrains Mono | 44px | 500 | 1.15 | -0.02em | | H1 | JetBrains Mono | 32px | 500 | 1.2 | -0.015em | | H2 | JetBrains Mono | 22px | 500 | 1.3 | -0.01em | | Body | JetBrains Mono | 15px | 400 | 1.6 | 0 | | UI / Label | JetBrains Mono | 12px | 500 | 1.0 | 0.04em | | Comment | JetBrains Mono | 13px | 400 | 1.5 | 0 italic | Three weights only: 400 / 500 / 700. Italics are reserved for inline "comments" — meta text rendered as if it were a code comment (`// since 2024`). Negative tracking compresses headlines so the mono doesn't read as flabby. ## 4. Buttons ### Primary (Ink) ```css background: #161514; color: #fbf8f3; padding: 9px 16px; border-radius: 2px; font-family: "JetBrains Mono"; font-weight: 500; ``` ### Secondary (Hairline) - Transparent, 1px ink hairline at 18%, ink text - Same padding as primary ### Outline (Cyan) - Transparent, 1px cyan border, cyan text — for "View source" / "Open in shell" actions ### Ghost - Transparent, mono 500, ink-secondary color. Hover: 4% ink wash. ## 5. Cards - Background `#fbf8f3` (or `#f6f3ee` for elevated) - 1px hairline at 8% ink, no shadow - Radius 4px (6px for featured) - Internal padding 16px / 24px — always a multiple of 4px - Optional: a 1px ink top border to mark "shell output" cards ## 6. Charts Thin precise bars (4px wide, 8px gap). One bar in cyan, the rest in 18% ink. Dashed gridlines at 6% ink. Y-axis labels in mono uppercase 12px. Line charts run at 1.25px in cyan with a 5% fill — no dot markers, the line ends in a small cyan caret `▍` instead. The chart is shell output dressed up. ## 7. Tabs Underline 1.5px in cyan for the active state. Inactive tabs are mono 500 at ink-secondary. Tab labels are lowercase — `overview`, `logs`, `settings` — never title-case, reinforcing the shell command feel. ## 8. Spacing - Base 4px (matches the mono baseline) - Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64` - Section padding: 64px desktop, 32px mobile ## 9. Do's & don'ts ✅ **Do** - Use mono everywhere — proportional sans is forbidden in this system - Keep the warm paper background — cool grey breaks the shell-on-paper feel - Use the cyan caret in the hero — the blinking `▍` IS the brand mark - Lowercase all tab labels and code-style metadata ❌ **Don't** - Use any sans-serif for body or display — mono is total - Add a second accent — cyan is alone, status colors only as 8px dots - Use radius above 6px — pill is reserved for status badges - Use shadows — hairlines only, always --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#161514` | | secondary | `#6b6862` | | tertiary | `#161514` | | neutral | `#f6f3ee` | | surface | `#fbf8f3` | ### Typography - **Display:** JetBrains Mono - **Body:** JetBrains Mono - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 2.75rem / 1.15 / 500 / -0.02em | | H1 | 2rem / 1.2 / 500 / -0.015em | | H2 | 1.375rem / 1.3 / 500 / -0.01em | | Body | 0.9375rem / 1.6 / 400 / 0 | ### Radius - sm: `2px` - md: `4px` - lg: `6px` - pill: `9999px` ### Shadows - **card:** `rgba(22,21,20,0.05) 0 0 0 1px` - **button:** `none` ### Borders - **card:** `1px solid rgba(22,21,20,0.08)` - **divider:** `rgba(22,21,20,0.08)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#161514` | | color | `#fbf8f3` | | border | `none` | | padding | `9px 16px` | | fontWeight | `500` | | fontSize | `0.8125rem` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#161514` | | border | `1px solid rgba(22,21,20,0.18)` | | padding | `9px 16px` | | fontWeight | `500` | | fontSize | `0.8125rem` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#0e8f9c` | | border | `1px solid #0e8f9c` | | padding | `9px 16px` | | fontWeight | `500` | | fontSize | `0.8125rem` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#6b6862` | | border | `none` | | padding | `9px 12px` | | fontWeight | `500` | | fontSize | `0.8125rem` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1.25` | | fillOpacity | `0.05` | | gridlines | `true` | | barGap | `8px` | | highlight | `single` | | dotMarker | `false` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(22, 21, 20, 0.15)`, color: `#161514`, border: `1px solid #161514` - **focus** — outline: `1px dashed #161514`, outline-offset: `2px` - **active** — bg: `#161514`, color: `#fbf8f3` - **disabled** — opacity: `0.35` - **loading** — opacity: `0.6` - **selected** — bg: `#161514`, color: `#fbf8f3` #### Input - **hover** — border: `1px solid rgba(22, 21, 20, 0.5)` - **focus** — bg: `rgba(22, 21, 20, 0.05)`, border: `1px solid #161514` - **disabled** — opacity: `0.35` - **error** — bg: `rgba(239,68,68,0.05)`, border: `1px solid #EF4444` #### Card - **hover** — border: `1px solid #161514` - **selected** — bg: `rgba(22, 21, 20, 0.05)`, border: `1px solid #161514` - **dragging** — opacity: `0.7` #### Tab - **hover** — color: `#161514` - **focus** — outline: `1px dashed #161514`, outline-offset: `1px` - **selected** — bg: `rgba(22, 21, 20, 0.1)`, color: `#161514` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Cursor blink.** Discrete, often stepped transitions. Like a terminal cursor: on or off. Response under 120 ms. ```css transition: all 120ms linear; ``` | Token | Value | |-------|-------| | duration.instant | `0ms` | | duration.fast | `60ms` | | duration.base | `120ms` | | duration.slow | `200ms` | | easing.standard | `linear` | | easing.decelerate | `linear` | | easing.accelerate | `linear` | | easing.spring | `steps(2, end)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the stroke carries the hierarchy. | | level1 | `none` | Border tone lifts the surface. | | level2 | `0 0 0 1px rgba(22, 21, 20, 0.5)` | Ring outline — popover. | | level3 | `0 0 0 1px #161514, 0 12px 32px -16px rgba(22, 21, 20, 0.4)` | Sheet with accent ring + glow. | | level4 | `0 0 0 1px #161514, 0 24px 64px -20px rgba(22, 21, 20, 0.5)` | Modal with accent ring + glow. | ### Content - **measure:** `78ch` (max line length for body prose) - **paragraph spacing:** `1em` - **list indent:** `1.25em` - **list gap:** `0.35em` - **link:** color `#161514`, underline `always` - **blockquote:** border `1px solid rgba(22, 21, 20, 0.5)`, padding `0.7em 1em` - **code:** background `rgba(22, 21, 20, 0.12)`, color `#161514` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 17.22:1 | AA | AAA | — | | Body text on canvas | 16.48:1 | AA | AAA | — | | Muted text on surface | 5.24:1 | AA | AA | — | | Accent on surface | 17.22:1 | AA-Large | AAA | — | | Accent on canvas | 16.48:1 | AA-Large | AAA | — | --- # SYSTEM: Vinyl Noir Source: https://www.freedesignmd.com/system/vinyl-noir --- name: "Vinyl Noir" description: "A music platform that sounds like late-night radio looks. Deep charcoal surfaces with a faint vertical warmth, Instrument Serif italic for album titles, Inter for everything else, a single burnt-amber accent reserved for the now-playing state. Built for music streaming, label sites, and audio products that want warmth in the dark without leaning on neon." tags: [music, dark, editorial, premium, modern] colors: primary: "#ece6dc" secondary: "#8a8278" tertiary: "#d97a2c" neutral: "#1c1815" surface: "#15110e" typography: display: "Instrument Serif" body: Inter mono: "JetBrains Mono" scale: hero: "6rem / 0.96 / 400 / -0.025em" h1: "3.5rem / 1.04 / 400 / -0.02em" h2: "1.875rem / 1.18 / 400 / -0.012em" body: "1rem / 1.6 / 400 / -0.005em" radius: sm: 3px md: 6px lg: 10px pill: 9999px shadows: card: "rgba(0,0,0,0.4) 0 1px 0 inset, rgba(0,0,0,0.5) 0 8px 24px -12px" button: "rgba(0,0,0,0.3) 0 1px 2px" borders: card: "1px solid rgba(236,230,220,0.08)" divider: rgba(236,230,220,0.10) buttons: primary: background: #ece6dc color: #15110e border: none shape: pill padding: 11px 22px font: 600 / 0.8125rem secondary: background: #262220 color: #ece6dc border: 1px solid rgba(236,230,220,0.10) shape: pill padding: 11px 22px font: 500 / 0.8125rem outline: background: transparent color: #ece6dc border: 1px solid rgba(236,230,220,0.18) shape: pill padding: 11px 22px font: 500 / 0.8125rem ghost: background: transparent color: #8a8278 border: none shape: pill padding: 11px 16px font: 500 / 0.8125rem charts: variant: "thin-bars" stroke_width: 1.5 fill_opacity: 0.1 gridlines: false bar_gap: 6px highlight: single dot_marker: true fonts_url: "https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@0,400;1,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Vinyl Noir ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Vinyl Noir** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — pill shape, bg `#ece6dc`, text `#15110e`, padding `11px 22px`, weight `600`. - **Secondary** — pill shape, bg `#262220`, text `#ece6dc`, border `1px solid rgba(236,230,220,0.10)`, padding `11px 22px`, weight `500`. - **Outline** — pill shape, text `#ece6dc`, border `1px solid rgba(236,230,220,0.18)`, padding `11px 22px`, weight `500`. - **Ghost** — pill shape, text `#8a8278`, padding `11px 16px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#15110e` - Border: `1px solid rgba(236,230,220,0.08)` - Shadow: `rgba(0,0,0,0.4) 0 1px 0 inset, rgba(0,0,0,0.5) 0 8px 24px -12px` - Radius: `radius.lg` (`10px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `thin-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Instrument Serif`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Vinyl Noir is a music platform that sounds like late-night radio looks. The page surface is deep warm charcoal `#15110e` — never pure black, never grey, with a faint warmth pulled from sepia rather than blue. Album titles run in Instrument Serif italic at 96px, weight 400 — the high-contrast italic glyphs giving each title the gestural sweep of a handwritten label. Body sits in Inter at 16px, bone-warm `#ece6dc`. The single accent is burnt amber `#d97a2c` that appears only as the now-playing waveform, the active track row's left border, and the play button when a track is queued. The discipline is in the warm dark: charcoal-sepia, not black; bone-warm light text, not pure white; burnt amber, not neon orange. Italic display, upright body — the typographic split mirrors the difference between a song title and a description. **Signature moves** - Instrument Serif italic 400 at 96px for album titles — high-contrast italic IS the brand - Warm charcoal-sepia surface `#15110e` — never pure black, never cool grey - Burnt amber `#d97a2c` only on now-playing waveform + active track row border + queued play button - Bone-warm text `#ece6dc` — never pure white, never grey - Pill-shape buttons (record-label badge voice) on the dark stage ## 2. Palette ### Surfaces - **Stage** `#15110e` — page background (warm charcoal-sepia) - **Stage Lift** `#1c1815` — section bands, primary card - **Card** `#262220` — secondary surfaces, secondary button - **Hairline** `rgba(236,230,220,0.08)` — every divider ### Ink (light on dark) - **Bone Warm** `#ece6dc` — text, headings (warm ivory, never white) - **Bone 50** `#8a8278` — secondary text, ghost buttons ### Accent - **Amber** `#d97a2c` — now-playing waveform, active track row left border, queued play button - **Amber Soft** `rgba(217,122,44,0.14)` — focus ring, hovered track row background ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Album Title (Hero) | Instrument Serif (italic) | 96px | 400 | 0.96 | -0.025em | | H1 | Instrument Serif | 56px | 400 | 1.04 | -0.02em | | H2 | Instrument Serif (italic) | 30px | 400 | 1.18 | -0.012em | | Body | Inter | 16px | 400 | 1.6 | -0.005em | | UI / Button | Inter | 13px | 600 | 1.4 | 0 | | Track Time / Mono | JetBrains Mono | 12px | 500 | 1.0 | 0 tabular-nums | | Label | JetBrains Mono | 10px | 500 | 1.0 | 0.10em uppercase | Instrument Serif appears at 400 only — the high-contrast strokes earn drama from scale. Italic for album titles and pull quotes; upright for everything else display. ## 4. Buttons ### Primary (Bone Warm Pill) ```css background: #ece6dc; color: #15110e; padding: 11px 22px; border-radius: 9999px; font-weight: 600; box-shadow: rgba(0,0,0,0.3) 0 1px 2px; ``` The bone-warm fill on charcoal reads as a vinyl-label sticker. Inverted from the usual dark-mode dark-button move. ### Secondary (Card Pill) - `#262220` background, 1px hairline at 10% bone, bone text — same pill shape ### Outline & Ghost - Outline: transparent, 1px hairline at 18% bone - Ghost: no border, bone-50, hover lifts to bone-warm ## 5. Cards ```css background: #1c1815; border: 1px solid rgba(236,230,220,0.08); border-radius: 10px; box-shadow: rgba(0,0,0,0.4) 0 1px 0 inset, rgba(0,0,0,0.5) 0 8px 24px -12px; ``` The 1px black inset highlight at the top is the dark catch-light — without it the card reads as flat brown. The 24px ambient shadow gives the card a stage-lit float. The currently-playing track row gets a 2px amber left border — the only place amber appears as a card edge. ## 6. Charts Thin precise bars (3px wide, 6px gap) — used as the now-playing waveform. The active bar (current playhead) is amber, others in 22% bone-warm. Line charts at 1.5px bone-warm with a 10% amber fill, ending in an amber dot marker. NO gridlines. Y-axis labels in JetBrains Mono uppercase 10px. ## 7. Tabs Underline 1.5px in amber for the active state. Inactive tabs are bone-50 in Inter 500. Hover = amber-soft background wash. ## 8. Spacing - Base 4px - Scale: `4, 8, 12, 16, 24, 32, 48, 64, 96, 128` - Section padding: 96px desktop, 48px mobile ## 9. Do's & don'ts ✅ **Do** - Use Instrument Serif italic 400 at 96px for album titles — italic IS the handwritten-label voice - Hold the warm charcoal-sepia surface `#15110e` — pure black reads as terminal, cool grey kills the warmth - Reserve amber for now-playing waveform + active track left border + queued play button - Use bone-warm text `#ece6dc` — pure white kills the radio-warm atmosphere ❌ **Don't** - Use neon orange — burnt amber `#d97a2c` is muted vinyl-label warmth, not safety cone - Use Instrument Serif at any other weight — 400 only, italic for album titles - Add a second accent — amber alone, on three specific surfaces - Use sharp 0px corners — soft 6-10px is the record-sleeve voice --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#ece6dc` | | secondary | `#8a8278` | | tertiary | `#d97a2c` | | neutral | `#1c1815` | | surface | `#15110e` | ### Typography - **Display:** Instrument Serif - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 6rem / 0.96 / 400 / -0.025em | | H1 | 3.5rem / 1.04 / 400 / -0.02em | | H2 | 1.875rem / 1.18 / 400 / -0.012em | | Body | 1rem / 1.6 / 400 / -0.005em | ### Radius - sm: `3px` - md: `6px` - lg: `10px` - pill: `9999px` ### Shadows - **card:** `rgba(0,0,0,0.4) 0 1px 0 inset, rgba(0,0,0,0.5) 0 8px 24px -12px` - **button:** `rgba(0,0,0,0.3) 0 1px 2px` ### Borders - **card:** `1px solid rgba(236,230,220,0.08)` - **divider:** `rgba(236,230,220,0.10)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `pill` | | background | `#ece6dc` | | color | `#15110e` | | border | `none` | | padding | `11px 22px` | | fontWeight | `600` | | fontSize | `0.8125rem` | #### Secondary | Property | Value | |----------|-------| | shape | `pill` | | background | `#262220` | | color | `#ece6dc` | | border | `1px solid rgba(236,230,220,0.10)` | | padding | `11px 22px` | | fontWeight | `500` | | fontSize | `0.8125rem` | #### Outline | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#ece6dc` | | border | `1px solid rgba(236,230,220,0.18)` | | padding | `11px 22px` | | fontWeight | `500` | | fontSize | `0.8125rem` | #### Ghost | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#8a8278` | | border | `none` | | padding | `11px 16px` | | fontWeight | `500` | | fontSize | `0.8125rem` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1.5` | | fillOpacity | `0.1` | | gridlines | `false` | | barGap | `6px` | | highlight | `single` | | dotMarker | `true` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(217, 122, 44, 0.92)`, shadow: `0 4px 20px -8px rgba(217, 122, 44, 0.4)` - **focus** — outline: `1.5px solid #d97a2c`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#ece6dc`, color: `#15110e` #### Input - **hover** — border: `1px solid #ece6dc` - **focus** — border: `1px solid #d97a2c`, shadow: `0 1px 0 0 #d97a2c` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #ece6dc` #### Tab - **hover** — color: `#ece6dc` - **focus** — outline: `1.5px solid #d97a2c`, outline-offset: `3px` - **selected** — color: `#d97a2c`, border: `0 0 2px 0 solid #d97a2c` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#d97a2c`, underline `always` - **blockquote:** border `4px solid #d97a2c`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(236, 230, 220, 0.06)`, color `#ece6dc` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 15.13:1 | AA | AAA | — | | Body text on canvas | 14.21:1 | AA | AAA | — | | Muted text on surface | 4.96:1 | AA | AA | — | | Accent on surface | 6.05:1 | AA-Large | AA | — | | Accent on canvas | 5.69:1 | AA-Large | AA | — | --- # SYSTEM: Prism Glass Source: https://www.freedesignmd.com/system/prism-glass --- name: "Prism Glass" description: "Real glassmorphism without the cliché. A soft tonal backdrop in cool lavender, surfaces that actually blur the layers behind them, hairline edges in 8% ink, and a single periwinkle accent. The depth is restraint, not decoration." tags: [glass, minimal, premium, modern, soft] colors: primary: "#1a1d2c" secondary: "#5a5f73" tertiary: "#1a1d2c" neutral: "#eef0f7" surface: rgba(255,255,255,0.62) typography: display: Manrope body: Manrope mono: "JetBrains Mono" scale: hero: "3.75rem / 1.04 / 700 / -0.035em" h1: "2.5rem / 1.12 / 700 / -0.025em" h2: "1.625rem / 1.25 / 600 / -0.02em" body: "1rem / 1.6 / 400 / -0.005em" radius: sm: 10px md: 16px lg: 22px pill: 9999px shadows: card: "rgba(26,29,44,0.06) 0 1px 0 inset, rgba(26,29,44,0.04) 0 2px 12px -4px, rgba(26,29,44,0.06) 0 0 0 1px" button: "rgba(108,124,255,0.22) 0 6px 18px -6px" borders: card: "1px solid rgba(26,29,44,0.06)" divider: rgba(26,29,44,0.06) buttons: primary: background: #6c7cff color: #ffffff border: none shape: pill padding: 10px 20px font: 600 / 0.875rem shadow: rgba(108,124,255,0.22) 0 6px 18px -6px secondary: background: rgba(255,255,255,0.65) color: #1a1d2c border: 1px solid rgba(26,29,44,0.08) shape: pill padding: 10px 20px font: 600 / 0.875rem outline: background: transparent color: #1a1d2c border: 1px solid rgba(26,29,44,0.14) shape: pill padding: 10px 20px font: 600 / 0.875rem ghost: background: transparent color: #5a5f73 border: none shape: pill padding: 10px 16px font: 600 / 0.875rem charts: variant: "rounded-bars" stroke_width: 1.5 fill_opacity: 0.1 gridlines: false bar_gap: 12px highlight: single dot_marker: true fonts_url: "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Prism Glass ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Prism Glass** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — pill shape, bg `#6c7cff`, text `#ffffff`, padding `10px 20px`, weight `600`, shadow `rgba(108,124,255,0.22) 0 6px 18px -6px`. - **Secondary** — pill shape, bg `rgba(255,255,255,0.65)`, text `#1a1d2c`, border `1px solid rgba(26,29,44,0.08)`, padding `10px 20px`, weight `600`. - **Outline** — pill shape, text `#1a1d2c`, border `1px solid rgba(26,29,44,0.14)`, padding `10px 20px`, weight `600`. - **Ghost** — pill shape, text `#5a5f73`, padding `10px 16px`, weight `600`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `rgba(255,255,255,0.62)` - Border: `1px solid rgba(26,29,44,0.06)` - Shadow: `rgba(26,29,44,0.06) 0 1px 0 inset, rgba(26,29,44,0.04) 0 2px 12px -4px, rgba(26,29,44,0.06) 0 0 0 1px` - Radius: `radius.lg` (`22px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `pill`. Segmented control inside a tinted track. Active tab gets a filled pill in the accent color. #### Charts - Bar/line variant: `rounded-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Manrope`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Manrope`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Prism Glass is glassmorphism done with restraint. The backdrop is a soft tonal mesh — cool lavender shading into pale rose, never harsh, never neon — and surfaces sit on top as translucent panes that genuinely blur the layers behind them. Edges are 1px hairlines at 6% ink, never thick borders. The hero CTA is the single periwinkle moment in the entire system. The discipline is in what's omitted: no second accent, no decorative gradients on the surfaces themselves, no glow halos. Glass earns its drama from the backdrop bleeding through, not from chrome. **Signature moves** - Real `backdrop-filter: blur(28px) saturate(180%)` on every surface — not faked with white at 80% - Soft tonal mesh backdrop (lavender → pale rose), never a 2-color gradient - One periwinkle accent (`#6c7cff`), used only on the primary CTA and active pill tab - Pill shape on every interactive surface — buttons, tabs, badges - Hairline borders at 6% ink — the glass needs an edge to read ## 2. Palette ### Surfaces - **Glass** `rgba(255,255,255,0.62)` over a blurred backdrop — the standard pane - **Glass Strong** `rgba(255,255,255,0.78)` — for modals and the nav - **Glass Subtle** `rgba(255,255,255,0.42)` — for inline chips and inputs ### Backdrop (apply at body level) - `radial-gradient(ellipse 80% 50% at 15% 0%, oklch(0.92 0.08 280 / 0.45), transparent 60%)` - `radial-gradient(ellipse 70% 50% at 85% 10%, oklch(0.92 0.08 340 / 0.32), transparent 60%)` - Base `#eef0f7` ### Ink - **Ink** `#1a1d2c` — text, headings - **Ink 60** `#5a5f73` — secondary text - **Hairline** `rgba(26,29,44,0.06)` — every divider, every glass edge ### Accent - **Periwinkle** `#6c7cff` — primary CTA, active tab - **Periwinkle Soft** `rgba(108,124,255,0.12)` — focus ring ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Manrope | 60px | 700 | 1.04 | -0.035em | | H1 | Manrope | 40px | 700 | 1.12 | -0.025em | | H2 | Manrope | 26px | 600 | 1.25 | -0.02em | | Body | Manrope | 16px | 400 | 1.6 | -0.005em | | UI | Manrope | 13px | 600 | 1.4 | 0 | | Mono / Metric | JetBrains Mono | 12px | 500 | 1.0 | 0.04em uppercase | Manrope across the board — geometric, soft-cornered, calm. Three weights: 400 / 600 / 700. ## 4. Buttons ### Primary (Periwinkle Pill) ```css background: #6c7cff; color: #ffffff; padding: 10px 20px; border-radius: 9999px; box-shadow: rgba(108,124,255,0.22) 0 6px 18px -6px; ``` ### Secondary (Glass Pill) - Glass surface (`rgba(255,255,255,0.65)`), backdrop-blur, 1px hairline at 8% ink - Same pill shape, ink text ### Outline & Ghost - Same pill shape — outline is 1px hairline at 14% ink, ghost has no border at all ## 5. Cards Every card is a glass pane: ```css background: rgba(255,255,255,0.62); backdrop-filter: blur(28px) saturate(180%); border: 1px solid rgba(26,29,44,0.06); box-shadow: rgba(26,29,44,0.06) 0 1px 0 inset, rgba(26,29,44,0.04) 0 2px 12px -4px; border-radius: 22px; ``` The 1px inset highlight at the top is what sells the glass — without it, the pane reads as flat white-over-color. ## 6. Charts Rounded bars (4px corner) with 12px gap. One bar in periwinkle, others in 14% ink. Line charts at 1.5px in periwinkle with a 10% fill underneath, ending in a small dot marker. No gridlines — the glass surface carries the rhythm. ## 7. Tabs Pill tabs. Active = periwinkle background, white text. Inactive = no background, ink-secondary text. Hover = 12% periwinkle wash. ## 8. Spacing - Base 4px - Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 80` - Section padding: 80px desktop, 40px mobile — glass needs negative space to breathe ## 9. Do's & don'ts ✅ **Do** - Use real `backdrop-filter` with both blur AND saturate — saturation is what makes it feel glass, not opacity - Hold the backdrop to soft tonal mesh, never a hard 2-color gradient - Use the periwinkle exactly once per screen — primary CTA OR active tab, not both - Keep the 1px inset highlight on every card — that is the glass ❌ **Don't** - Stack glass on glass — one pane per layer, never nested - Use a second accent color — periwinkle alone - Use sharp corners — every surface is 16-22px or pill - Skip backdrop-filter and fake it with white opacity — the depth disappears --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1a1d2c` | | secondary | `#5a5f73` | | tertiary | `#1a1d2c` | | neutral | `#eef0f7` | | surface | `rgba(255,255,255,0.62)` | ### Typography - **Display:** Manrope - **Body:** Manrope - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 3.75rem / 1.04 / 700 / -0.035em | | H1 | 2.5rem / 1.12 / 700 / -0.025em | | H2 | 1.625rem / 1.25 / 600 / -0.02em | | Body | 1rem / 1.6 / 400 / -0.005em | ### Radius - sm: `10px` - md: `16px` - lg: `22px` - pill: `9999px` ### Shadows - **card:** `rgba(26,29,44,0.06) 0 1px 0 inset, rgba(26,29,44,0.04) 0 2px 12px -4px, rgba(26,29,44,0.06) 0 0 0 1px` - **button:** `rgba(108,124,255,0.22) 0 6px 18px -6px` ### Borders - **card:** `1px solid rgba(26,29,44,0.06)` - **divider:** `rgba(26,29,44,0.06)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `pill` | | background | `#6c7cff` | | color | `#ffffff` | | border | `none` | | padding | `10px 20px` | | fontWeight | `600` | | fontSize | `0.875rem` | | shadow | `rgba(108,124,255,0.22) 0 6px 18px -6px` | #### Secondary | Property | Value | |----------|-------| | shape | `pill` | | background | `rgba(255,255,255,0.65)` | | color | `#1a1d2c` | | border | `1px solid rgba(26,29,44,0.08)` | | padding | `10px 20px` | | fontWeight | `600` | | fontSize | `0.875rem` | #### Outline | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#1a1d2c` | | border | `1px solid rgba(26,29,44,0.14)` | | padding | `10px 20px` | | fontWeight | `600` | | fontSize | `0.875rem` | #### Ghost | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#5a5f73` | | border | `none` | | padding | `10px 16px` | | fontWeight | `600` | | fontSize | `0.875rem` | ### Charts | Property | Value | |----------|-------| | variant | `rounded-bars` | | strokeWidth | `1.5` | | fillOpacity | `0.1` | | gridlines | `false` | | barGap | `12px` | | highlight | `single` | | dotMarker | `true` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 8px 24px -10px rgba(26, 29, 44, 0.35)`, transform: `translateY(-1px)`, filter: `brightness(1.02)` - **focus** — outline: `2px solid rgba(26, 29, 44, 0.4)`, outline-offset: `3px` - **active** — transform: `translateY(0) scale(0.98)` - **disabled** — opacity: `0.4`, filter: `saturate(0.5)` - **loading** — opacity: `0.65` - **selected** — bg: `rgba(26, 29, 44, 0.18)`, color: `#1a1d2c` #### Input - **hover** — bg: `rgba(26, 29, 44, 0.03)`, border: `1px solid rgba(26, 29, 44, 0.4)` - **focus** — border: `1px solid rgba(26, 29, 44, 0.6)`, shadow: `0 0 0 4px rgba(26, 29, 44, 0.12)` - **disabled** — opacity: `0.4` - **error** — border: `1px solid rgba(244,114,182,0.7)`, shadow: `0 0 0 4px rgba(244,114,182,0.15)` #### Card - **hover** — shadow: `0 16px 40px -16px rgba(26, 29, 44, 0.3)`, transform: `translateY(-3px)` - **selected** — bg: `rgba(26, 29, 44, 0.04)`, border: `1px solid rgba(26, 29, 44, 0.5)` - **dragging** — transform: `scale(1.03) rotate(-0.8deg)`, opacity: `0.92` #### Tab - **hover** — bg: `rgba(26, 29, 44, 0.08)`, color: `#1a1d2c` - **focus** — outline: `2px solid rgba(26, 29, 44, 0.4)`, outline-offset: `2px` - **selected** — bg: `rgba(26, 29, 44, 0.16)`, color: `#1a1d2c` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Soft fade.** Long, gentle transitions with a symmetric easing curve. Motion is calming, never intrusive. ```css transition: all 400ms cubic-bezier(0.45, 0.05, 0.55, 0.95); ``` | Token | Value | |-------|-------| | duration.instant | `120ms` | | duration.fast | `240ms` | | duration.base | `400ms` | | duration.slow | `600ms` | | easing.standard | `cubic-bezier(0.45, 0.05, 0.55, 0.95)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.45, 1.4, 0.55, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the tone separates, not the shadow. | | level1 | `0 2px 6px -2px rgba(26, 29, 44, 0.12)` | Soft tinted lift. | | level2 | `0 8px 24px -10px rgba(26, 29, 44, 0.2)` | Floating card — pastel-tinted shadow. | | level3 | `0 16px 48px -16px rgba(26, 29, 44, 0.28)` | Sheet — visible tinted glow. | | level4 | `0 32px 80px -24px rgba(26, 29, 44, 0.4)` | Modal — tinted wash, scrim required. | ### Content - **measure:** `64ch` (max line length for body prose) - **paragraph spacing:** `1.35em` - **list indent:** `1.5em` - **list gap:** `0.6em` - **link:** color `#1a1d2c`, underline `hover` - **blockquote:** border `2px solid rgba(26, 29, 44, 0.5)`, padding `0.9em 1.2em` - **code:** background `rgba(26, 29, 44, 0.1)`, color `#1a1d2c` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 16.72:1 | AA | AAA | — | | Body text on canvas | 14.68:1 | AA | AAA | — | | Muted text on surface | 6.33:1 | AA | AA | — | | Accent on surface | 16.72:1 | AA-Large | AAA | — | | Accent on canvas | 14.68:1 | AA-Large | AAA | — | --- # SYSTEM: Arcade Night Source: https://www.freedesignmd.com/system/arcade-night --- name: "Arcade Night" description: "Esports broadcast in dark mode. Near-black surfaces, sharp display serif paired with a square mono, knife-edge corners, a single high-voltage lime accent. Built for tournaments and launch events." tags: [dark, gaming, event, bold, premium] colors: primary: "#eef0e6" secondary: "#8a8f80" tertiary: "#eef0e6" neutral: "#11120f" surface: "#0a0b08" typography: display: "Big Shoulders Display" body: "JetBrains Mono" mono: "JetBrains Mono" scale: hero: "5.5rem / 0.92 / 800 / -0.02em" h1: "3rem / 1 / 800 / -0.015em" h2: "1.875rem / 1.15 / 700 / -0.01em" body: "0.9375rem / 1.55 / 400 / 0" radius: sm: 0px md: 0px lg: 2px pill: 9999px shadows: card: "rgba(238,240,230,0.06) 0 0 0 1px" button: none borders: card: "1px solid rgba(238,240,230,0.06)" divider: rgba(238,240,230,0.06) buttons: primary: background: #c8ff3a color: #0a0b08 border: none shape: sharp padding: 12px 22px font: 700 / 0.8125rem secondary: background: transparent color: #eef0e6 border: 1px solid rgba(238,240,230,0.18) shape: sharp padding: 12px 22px font: 600 / 0.8125rem outline: background: transparent color: #c8ff3a border: 1px solid #c8ff3a shape: sharp padding: 12px 22px font: 600 / 0.8125rem ghost: background: transparent color: #8a8f80 border: none shape: sharp padding: 12px 18px font: 600 / 0.75rem charts: variant: flat stroke_width: 2 fill_opacity: 0.18 gridlines: false bar_gap: 4px highlight: single dot_marker: false fonts_url: "https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap" dependencies: ["lucide-react"] --- # Arcade Night ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Arcade Night** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#c8ff3a`, text `#0a0b08`, padding `12px 22px`, weight `700`. - **Secondary** — sharp shape, text `#eef0e6`, border `1px solid rgba(238,240,230,0.18)`, padding `12px 22px`, weight `600`. - **Outline** — sharp shape, text `#c8ff3a`, border `1px solid #c8ff3a`, padding `12px 22px`, weight `600`. - **Ghost** — sharp shape, text `#8a8f80`, padding `12px 18px`, weight `600`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#0a0b08` - Border: `1px solid rgba(238,240,230,0.06)` - Shadow: `rgba(238,240,230,0.06) 0 0 0 1px` - Radius: `radius.lg` (`2px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `flat` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Big Shoulders Display`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`JetBrains Mono`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Arcade Night is the broadcast aesthetic of a competitive event — late-night arenas, scoreboard overlays, the moment before a tournament starts. The page is near-black `#0a0b08` (a hair warmer than pure to feel cinematic), text is bone-white, and one electric lime `#c8ff3a` carries every primary action. There are no gradients, no glows, no rounded corners. The system is sharp by design. The display face is a condensed industrial sans (Big Shoulders Display) at heavy weights — built for scorecards and arena banners. Body and labels run in JetBrains Mono with uppercase tracking, reinforcing the broadcast-overlay feel. Cards have no shadow; they sit on hairlines at 6% bone, and the only depth comes from the lime accent. **Signature moves** - Big Shoulders Display 800 at 88px hero — condensed, athletic, uncompromising - One lime accent (`#c8ff3a`), used for primary CTA and active state — never decorated, never tinted - Knife-edge corners (0px radius) on every surface except the small 2px lift on featured cards - Mono body with uppercase 0.10em tracking — every label reads like a broadcast lower-third - Cards as 1px bone-on-black hairlines, no fill, no shadow ## 2. Palette ### Core - **Surface** `#0a0b08` — page background, near-black with a warm cast - **Surface Lift** `#11120f` — modals, elevated cards - **Bone** `#eef0e6` — text, headings (never pure white) - **Bone 60** `rgba(238,240,230,0.6)` — secondary text - **Hairline** `rgba(238,240,230,0.06)` — every divider, every card edge ### Accent - **Volt Lime** `#c8ff3a` — primary CTA, active tab, score highlight - **Volt Lime 12** `rgba(200,255,58,0.12)` — focus ring, hovered tab fill ### Status - **Live Red** `#ff3b3b` — live indicator only, never as decoration ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Big Shoulders Display | 88px | 800 | 0.92 | -0.02em | | H1 | Big Shoulders Display | 48px | 800 | 1.0 | -0.015em | | H2 | Big Shoulders Display | 30px | 700 | 1.15 | -0.01em | | Body | JetBrains Mono | 15px | 400 | 1.55 | 0 | | Label / UI | JetBrains Mono | 12px | 500 | 1.0 | 0.10em uppercase | | Score | Big Shoulders Display | 64px | 800 | 1.0 | -0.02em tabular | Two weights for display: 700 / 800. One weight for body: 400. Labels are always uppercase, always tracked, always mono. ## 4. Buttons ### Primary (Volt) ```css background: #c8ff3a; color: #0a0b08; padding: 12px 22px; border-radius: 0; font-family: "JetBrains Mono"; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; ``` ### Secondary (Bone Outline) - Transparent, 1px bone hairline at 18%, bone text - Same padding, same uppercase mono treatment ### Outline (Volt) - Transparent, 1px lime border, lime text — used only for "Watch live" / "Join queue" ## 5. Cards - Background `#0a0b08` (or `#11120f` for elevated) - 1px hairline at 6% bone - NO radius (or 2px on featured) - NO shadow, ever — the lime accent is the only emphasis allowed ## 6. Charts Flat solid bars with a 4px gap (broadcast scoreboard rhythm). One bar in volt lime, the rest in 18% bone. No gridlines, no dots — labels are mono uppercase along the baseline. Line charts run at 2px in volt lime with an 18% fill underneath. The chart is a scorecard, not a graph. ## 7. Tabs Underline at 2px in volt lime for the active state. Inactive tabs are mono uppercase at 60% bone. No pill tabs. ## 8. Spacing - Base 4px - Scale: `4, 8, 12, 16, 24, 32, 48, 64, 96` - Section padding: 96px desktop, 48px mobile — the dark surface needs air ## 9. Do's & don'ts ✅ **Do** - Use Big Shoulders Display only at 700/800 — anything lighter loses the broadcast weight - Keep every label uppercase mono with 0.10em tracking - Reserve the volt lime for one element per screen - Use sharp 0px radius everywhere except featured cards (2px) ❌ **Don't** - Use any radius above 2px — the system is sharp by design - Use a second accent color — Live Red exists ONLY for live indicators - Use shadows or glows on the lime — flat fill, always - Use a proportional sans for body — mono carries the broadcast feel --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#eef0e6` | | secondary | `#8a8f80` | | tertiary | `#eef0e6` | | neutral | `#11120f` | | surface | `#0a0b08` | ### Typography - **Display:** Big Shoulders Display - **Body:** JetBrains Mono - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 5.5rem / 0.92 / 800 / -0.02em | | H1 | 3rem / 1 / 800 / -0.015em | | H2 | 1.875rem / 1.15 / 700 / -0.01em | | Body | 0.9375rem / 1.55 / 400 / 0 | ### Radius - sm: `0px` - md: `0px` - lg: `2px` - pill: `9999px` ### Shadows - **card:** `rgba(238,240,230,0.06) 0 0 0 1px` - **button:** `none` ### Borders - **card:** `1px solid rgba(238,240,230,0.06)` - **divider:** `rgba(238,240,230,0.06)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#c8ff3a` | | color | `#0a0b08` | | border | `none` | | padding | `12px 22px` | | fontWeight | `700` | | fontSize | `0.8125rem` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#eef0e6` | | border | `1px solid rgba(238,240,230,0.18)` | | padding | `12px 22px` | | fontWeight | `600` | | fontSize | `0.8125rem` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#c8ff3a` | | border | `1px solid #c8ff3a` | | padding | `12px 22px` | | fontWeight | `600` | | fontSize | `0.8125rem` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#8a8f80` | | border | `none` | | padding | `12px 18px` | | fontWeight | `600` | | fontSize | `0.75rem` | ### Charts | Property | Value | |----------|-------| | variant | `flat` | | strokeWidth | `2` | | fillOpacity | `0.18` | | gridlines | `false` | | barGap | `4px` | | highlight | `single` | | dotMarker | `false` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `4px 6px 0 0 #eef0e6`, transform: `translateY(-2px) rotate(-1deg)` - **focus** — outline: `3px solid #eef0e6`, outline-offset: `3px` - **active** — shadow: `1px 2px 0 0 #eef0e6`, transform: `translateY(1px) scale(0.96)` - **disabled** — opacity: `0.4` - **loading** — opacity: `0.7` - **selected** — bg: `#eef0e6`, color: `#eef0e6`, transform: `rotate(-2deg)` #### Input - **hover** — border: `2px solid #eef0e6` - **focus** — border: `2px solid #eef0e6`, shadow: `3px 3px 0 0 #eef0e6` - **disabled** — opacity: `0.4` - **error** — border: `2px solid #EF4444`, shadow: `3px 3px 0 0 #EF4444` #### Card - **hover** — shadow: `6px 8px 0 0 #eef0e6`, transform: `translateY(-4px) rotate(-1deg)` - **selected** — border: `2px solid #eef0e6`, transform: `rotate(-1deg)` - **dragging** — transform: `rotate(-3deg) scale(1.05)`, opacity: `0.85` #### Tab - **hover** — color: `#eef0e6`, transform: `translateY(-1px)` - **focus** — outline: `3px solid #eef0e6`, outline-offset: `2px` - **selected** — bg: `#eef0e6`, color: `#eef0e6`, transform: `rotate(-1deg)` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Bounce.** Exaggerated spring easing with a slight rotational tilt. Every interaction feels physical and playful. ```css transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1); ``` | Token | Value | |-------|-------| | duration.instant | `100ms` | | duration.fast | `200ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.34, 1.56, 0.64, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 2, 0.4, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the tone separates. | | level1 | `2px 3px 0 0 #eef0e6` | Hard offset, slight shift. | | level2 | `4px 6px 0 0 #eef0e6` | Cards — visible offset. | | level3 | `6px 8px 0 0 #eef0e6` | Dialog — strong offset. | | level4 | `8px 12px 0 0 #eef0e6` | Modal — maximum offset, scrim required. | ### Content - **measure:** `62ch` (max line length for body prose) - **paragraph spacing:** `1.25em` - **list indent:** `1.5em` - **list gap:** `0.55em` - **link:** color `#eef0e6`, underline `always` - **blockquote:** border `3px solid #eef0e6`, padding `0.8em 1.2em` - **code:** background `#eef0e6`, color `#eef0e6` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 17.14:1 | AA | AAA | — | | Body text on canvas | 16.33:1 | AA | AAA | — | | Muted text on surface | 5.94:1 | AA | AA | — | | Accent on surface | 17.14:1 | AA-Large | AAA | — | | Accent on canvas | 16.33:1 | AA-Large | AAA | — | --- # SYSTEM: Maison Vox Source: https://www.freedesignmd.com/system/maison-vox --- name: "Maison Vox" description: "Design-agency editorial in print mode. Oversized DM Serif Display headlines that nearly touch the gutter, asymmetric two-column body in Inter, a single tomato accent that lives only in the first letter of the H1 and the period of the CTA. Built for studio sites and case studies." tags: [editorial, agency, minimal, premium, modern] colors: primary: "#101010" secondary: "#5a5a5a" tertiary: "#101010" neutral: "#f3efe7" surface: "#fbf8f1" typography: display: "DM Serif Display" body: Inter mono: "JetBrains Mono" scale: hero: "7rem / 0.94 / 400 / -0.045em" h1: "4rem / 1 / 400 / -0.035em" h2: "2rem / 1.15 / 400 / -0.02em" body: "1.0625rem / 1.65 / 400 / -0.005em" radius: sm: 0px md: 0px lg: 0px pill: 9999px shadows: card: none button: none borders: card: "1px solid rgba(16,16,16,0.10)" divider: rgba(16,16,16,0.14) buttons: primary: background: #101010 color: #fbf8f1 border: none shape: sharp padding: 14px 26px font: 500 / 0.875rem secondary: background: transparent color: #101010 border: 1px solid #101010 shape: sharp padding: 14px 26px font: 500 / 0.875rem outline: background: transparent color: #101010 border: 1px solid rgba(16,16,16,0.18) shape: sharp padding: 14px 26px font: 500 / 0.875rem ghost: background: transparent color: #5a5a5a border: none shape: sharp padding: 14px 18px font: 500 / 0.875rem charts: variant: "thin-bars" stroke_width: 1 fill_opacity: 0 gridlines: false bar_gap: 16px highlight: single dot_marker: false fonts_url: "https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Maison Vox ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Maison Vox** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#101010`, text `#fbf8f1`, padding `14px 26px`, weight `500`. - **Secondary** — sharp shape, text `#101010`, border `1px solid #101010`, padding `14px 26px`, weight `500`. - **Outline** — sharp shape, text `#101010`, border `1px solid rgba(16,16,16,0.18)`, padding `14px 26px`, weight `500`. - **Ghost** — sharp shape, text `#5a5a5a`, padding `14px 18px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#fbf8f1` - Border: `1px solid rgba(16,16,16,0.10)` - Shadow: `none` - Radius: `radius.lg` (`0px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `thin-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`DM Serif Display`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Maison Vox is the visual language of a small design studio that publishes a print quarterly on the side. Headlines run in DM Serif Display at 112px — nearly touching the gutter — with negative tracking that compresses them into editorial bricks. Body sits in Inter at 17px on a 1.65 leading, set in two asymmetric columns. The page is warm bone `#fbf8f1`, never white, and the only color in the entire system is a single tomato `#e0432a` that appears as the first letter of the H1 and as the period after the CTA label. That's it. The discipline is in the gestures: oversized type as the only ornament, sharp 0px radius everywhere, and a single colored character as the brand mark. **Signature moves** - DM Serif Display at 112px hero, 400 weight, -0.045em tracking — print-quarterly scale - Tomato `#e0432a` used only on the first letter of the headline AND the period after the CTA — never as a fill - Sharp 0px radius on every surface — buttons, cards, inputs - Asymmetric two-column body (8/4 split) — the column rhythm IS the layout - Italic display variant for pull quotes, never for emphasis in body ## 2. Palette ### Core - **Ink** `#101010` — text, headings, button fill - **Bone** `#fbf8f1` — page background (warm, not white) - **Bone Lift** `#f3efe7` — secondary surfaces - **Hairline** `rgba(16,16,16,0.10)` — section dividers ### Accent - **Tomato** `#e0432a` — first letter of H1, period after CTA, marginalia number - That is the entire color system. There is no second accent. ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | DM Serif Display | 112px | 400 | 0.94 | -0.045em | | H1 | DM Serif Display | 64px | 400 | 1.0 | -0.035em | | H2 | DM Serif Display | 32px | 400 | 1.15 | -0.02em | | H3 | Inter | 20px | 600 | 1.3 | -0.015em | | Body | Inter | 17px | 400 | 1.65 | -0.005em | | Caption | Inter | 13px | 500 | 1.4 | 0 | | Marginalia | JetBrains Mono | 11px | 500 | 1.0 | 0.12em uppercase | DM Serif Display only at 400 — there is no other weight. Inter carries weight (400/500/600) for body and UI. Mono is reserved for marginalia (page numbers, footnotes, dateline). ## 4. Buttons ### Primary (Ink Slab) ```css background: #101010; color: #fbf8f1; padding: 14px 26px; border-radius: 0; font-family: "Inter"; font-weight: 500; ``` The button label always ends with a tomato period: `View case study` followed by a `#e0432a` colored `.` ### Secondary (Ink Outline) - Transparent, 1px solid ink, ink text - Same sharp shape, same padding ### Ghost - Inter 500, ink-secondary, no border. Hover: underline. ## 5. Cards - Background `#fbf8f1` (or `#f3efe7` for elevated) - 1px hairline at 10% ink, NO shadow, NO radius - Internal padding 32px / 48px - Featured cards add a single 1px ink top border — that is the only chrome ## 6. Charts Thin precise bars (3px wide, 16px gap). One bar in tomato, others in 18% ink. NO gridlines, NO axis lines — labels float in mono uppercase along the baseline. Line charts run at 1px ink with no fill. The chart is a footnote, not a feature. ## 7. Tabs Underline 1px in ink for the active state. Inactive tabs are Inter 500 ink-secondary. The active label is set in DM Serif Display italic — that's the rhythm change, not a color shift. ## 8. Spacing - Base 8px - Scale: `8, 16, 24, 32, 48, 64, 96, 128` - Section padding: 128px desktop, 64px mobile — editorial needs the air ## 9. Do's & don'ts ✅ **Do** - Use DM Serif Display only at 400 weight — anything heavier reads as decorative, not editorial - Reserve the tomato for the first letter and the period — those two gestures are the brand - Hold the asymmetric 8/4 column split for body — symmetric two-column reads as a blog - Use sharp 0px radius on everything — print rules ❌ **Don't** - Use a second accent color — tomato alone, on two specific characters - Use any radius — pills are reserved for status badges only - Use serif body — Inter carries the body, DM Serif Display carries the display - Use weight on DM Serif — there is only 400 --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#101010` | | secondary | `#5a5a5a` | | tertiary | `#101010` | | neutral | `#f3efe7` | | surface | `#fbf8f1` | ### Typography - **Display:** DM Serif Display - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 7rem / 0.94 / 400 / -0.045em | | H1 | 4rem / 1 / 400 / -0.035em | | H2 | 2rem / 1.15 / 400 / -0.02em | | Body | 1.0625rem / 1.65 / 400 / -0.005em | ### Radius - sm: `0px` - md: `0px` - lg: `0px` - pill: `9999px` ### Shadows - **card:** `none` - **button:** `none` ### Borders - **card:** `1px solid rgba(16,16,16,0.10)` - **divider:** `rgba(16,16,16,0.14)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#101010` | | color | `#fbf8f1` | | border | `none` | | padding | `14px 26px` | | fontWeight | `500` | | fontSize | `0.875rem` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#101010` | | border | `1px solid #101010` | | padding | `14px 26px` | | fontWeight | `500` | | fontSize | `0.875rem` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#101010` | | border | `1px solid rgba(16,16,16,0.18)` | | padding | `14px 26px` | | fontWeight | `500` | | fontSize | `0.875rem` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#5a5a5a` | | border | `none` | | padding | `14px 18px` | | fontWeight | `500` | | fontSize | `0.875rem` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1` | | fillOpacity | `0` | | gridlines | `false` | | barGap | `16px` | | highlight | `single` | | dotMarker | `false` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(16, 16, 16, 0.92)`, shadow: `0 4px 20px -8px rgba(16, 16, 16, 0.4)` - **focus** — outline: `1.5px solid #101010`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#101010`, color: `#fbf8f1` #### Input - **hover** — border: `1px solid #101010` - **focus** — border: `1px solid #101010`, shadow: `0 1px 0 0 #101010` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #101010` #### Tab - **hover** — color: `#101010` - **focus** — outline: `1.5px solid #101010`, outline-offset: `3px` - **selected** — color: `#101010`, border: `0 0 2px 0 solid #101010` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#101010`, underline `always` - **blockquote:** border `4px solid #101010`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(16, 16, 16, 0.06)`, color `#101010` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 17.94:1 | AA | AAA | — | | Body text on canvas | 16.59:1 | AA | AAA | — | | Muted text on surface | 6.5:1 | AA | AA | — | | Accent on surface | 17.94:1 | AA-Large | AAA | — | | Accent on canvas | 16.59:1 | AA-Large | AAA | — | --- # SYSTEM: Titanium Deck Source: https://www.freedesignmd.com/system/titanium-deck --- name: "Titanium Deck" description: "Brushed metal as a quiet design system. Cool grey surfaces with a faint vertical machined gradient, Space Grotesk display, IBM Plex Mono for technical labels, a single warm amber accent that reads like a status LED. Built for hardware companies and infrastructure dashboards." tags: [metallic, premium, modern, saas, developer] colors: primary: "#1c1f24" secondary: "#6c727a" tertiary: "#1c1f24" neutral: "#e7e9ec" surface: "#f1f2f4" typography: display: "Space Grotesk" body: "Space Grotesk" mono: "IBM Plex Mono" scale: hero: "3.5rem / 1.04 / 600 / -0.03em" h1: "2.25rem / 1.15 / 600 / -0.025em" h2: "1.5rem / 1.3 / 600 / -0.015em" body: "0.9375rem / 1.55 / 400 / 0" radius: sm: 3px md: 5px lg: 8px pill: 9999px shadows: card: "rgba(255,255,255,0.7) 0 1px 0 inset, rgba(28,31,36,0.06) 0 0 0 1px, rgba(28,31,36,0.04) 0 1px 2px" button: "rgba(255,255,255,0.10) 0 1px 0 inset, rgba(0,0,0,0.18) 0 1px 2px" borders: card: "1px solid rgba(28,31,36,0.06)" divider: rgba(28,31,36,0.10) buttons: primary: background: #1c1f24 color: #f1f2f4 border: 1px solid rgba(0,0,0,0.4) shape: rounded padding: 9px 18px font: 600 / 0.8125rem shadow: rgba(255,255,255,0.10) 0 1px 0 inset, rgba(0,0,0,0.18) 0 1px 2px secondary: background: linear-gradient(180deg, #f6f7f8, #e2e4e8) color: #1c1f24 border: 1px solid rgba(28,31,36,0.18) shape: rounded padding: 9px 18px font: 600 / 0.8125rem shadow: rgba(255,255,255,0.6) 0 1px 0 inset outline: background: transparent color: #1c1f24 border: 1px solid rgba(28,31,36,0.22) shape: rounded padding: 9px 18px font: 600 / 0.8125rem ghost: background: transparent color: #6c727a border: none shape: rounded padding: 9px 14px font: 600 / 0.8125rem charts: variant: "thin-bars" stroke_width: 1.5 fill_opacity: 0.06 gridlines: true bar_gap: 10px highlight: single dot_marker: true fonts_url: "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" dependencies: ["lucide-react"] --- # Titanium Deck ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Titanium Deck** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#1c1f24`, text `#f1f2f4`, border `1px solid rgba(0,0,0,0.4)`, padding `9px 18px`, weight `600`, shadow `rgba(255,255,255,0.10) 0 1px 0 inset, rgba(0,0,0,0.18) 0 1px 2px`. - **Secondary** — rounded shape, bg `linear-gradient(180deg, #f6f7f8, #e2e4e8)`, text `#1c1f24`, border `1px solid rgba(28,31,36,0.18)`, padding `9px 18px`, weight `600`, shadow `rgba(255,255,255,0.6) 0 1px 0 inset`. - **Outline** — rounded shape, text `#1c1f24`, border `1px solid rgba(28,31,36,0.22)`, padding `9px 18px`, weight `600`. - **Ghost** — rounded shape, text `#6c727a`, padding `9px 14px`, weight `600`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#f1f2f4` - Border: `1px solid rgba(28,31,36,0.06)` - Shadow: `rgba(255,255,255,0.7) 0 1px 0 inset, rgba(28,31,36,0.06) 0 0 0 1px, rgba(28,31,36,0.04) 0 1px 2px` - Radius: `radius.lg` (`8px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `boxed`. Each tab is a bordered card. Active tab gets the accent border and a subtle fill. #### Charts - Bar/line variant: `thin-bars` - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Space Grotesk`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Space Grotesk`)** — paragraphs, labels, button text, form inputs. - **Mono (`IBM Plex Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Titanium Deck is brushed metal interpreted as restraint. Surfaces sit on a faint vertical gradient (`#f6f7f8` → `#e2e4e8`) that reads as machined aluminum under fluorescent light. Headlines run in Space Grotesk 600, body in the same. Technical labels — IDs, timestamps, sensor readouts — switch to IBM Plex Mono with uppercase tracking. The single accent is a warm amber `#f0a000` that appears as a tiny dot indicator on active modules, like a status LED on a server rack. The discipline is in the micro-detail: every button gets a 1px white inset highlight at the top edge to mimic the way light catches machined steel; every card has the same. There are no decorative gradients beyond the surface itself. **Signature moves** - Vertical machined gradient on every surface — `linear-gradient(180deg, #f6f7f8, #e2e4e8)` — never a hard fill - 1px white inset highlight (`rgba(255,255,255,0.7)`) at the top of every card and button — the catch-light is structural - Amber `#f0a000` used only as a 6px dot status indicator and the chart highlight — never as a fill or text color - IBM Plex Mono with 0.06em uppercase tracking for every technical label - Boxed tabs with the same machined gradient — they read as physical buttons ## 2. Palette ### Surfaces - **Aluminum Light** `linear-gradient(180deg, #f6f7f8, #e2e4e8)` — primary card surface - **Aluminum Mid** `linear-gradient(180deg, #eaecef, #d6d9de)` — pressed/secondary state - **Aluminum Dark** `linear-gradient(180deg, #2a2d33, #1c1f24)` — primary CTA, dark sections - **Page** `#e7e9ec` — cool background, slightly bluer than the cards ### Ink - **Ink** `#1c1f24` — text, headings, primary CTA fill - **Ink 60** `#6c727a` — secondary text, mono labels - **Hairline** `rgba(28,31,36,0.06)` — every card edge ### Accent - **Amber LED** `#f0a000` — status dot, active chart bar - **Amber Soft** `rgba(240,160,0,0.16)` — focus ring, hovered tab background ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Space Grotesk | 56px | 600 | 1.04 | -0.03em | | H1 | Space Grotesk | 36px | 600 | 1.15 | -0.025em | | H2 | Space Grotesk | 24px | 600 | 1.3 | -0.015em | | Body | Space Grotesk | 15px | 400 | 1.55 | 0 | | UI | Space Grotesk | 13px | 500 | 1.4 | 0 | | Label / Mono | IBM Plex Mono | 11px | 500 | 1.0 | 0.06em uppercase | | Sensor Readout | IBM Plex Mono | 24px | 600 | 1.1 | 0 tabular-nums | Three weights for sans: 400 / 500 / 600. Mono is uppercase whenever it appears as a label, mixed-case only inside code blocks. ## 4. Buttons ### Primary (Anodized Dark) ```css background: #1c1f24; color: #f1f2f4; padding: 9px 18px; border-radius: 5px; border: 1px solid rgba(0,0,0,0.4); box-shadow: rgba(255,255,255,0.10) 0 1px 0 inset, rgba(0,0,0,0.18) 0 1px 2px; ``` The 1px inset white highlight is what sells the metal — without it the button reads as flat black. ### Secondary (Aluminum) ```css background: linear-gradient(180deg, #f6f7f8, #e2e4e8); color: #1c1f24; border: 1px solid rgba(28,31,36,0.18); box-shadow: rgba(255,255,255,0.6) 0 1px 0 inset; ``` ### Outline & Ghost - Outline: transparent, 1px ink hairline at 22% - Ghost: transparent, no border, ink-secondary text ## 5. Cards ```css background: linear-gradient(180deg, #f6f7f8, #e2e4e8); border: 1px solid rgba(28,31,36,0.06); border-radius: 8px; box-shadow: rgba(255,255,255,0.7) 0 1px 0 inset, rgba(28,31,36,0.06) 0 0 0 1px, rgba(28,31,36,0.04) 0 1px 2px; ``` The signature is the inset white highlight + a 1px outline shadow — it reads as a physical machined panel, not a flat surface. Active cards get a 6px amber dot in the top-right corner — the only place amber appears as a fill. ## 6. Charts Thin precise bars (4px wide, 10px gap) with dashed gridlines at 6% ink. One bar in amber, others in 22% ink. Line charts run at 1.5px ink with a 6% fill, ending in an amber dot marker. Y-axis labels in IBM Plex Mono uppercase 11px. The chart reads as instrument output, not infographic. ## 7. Tabs Boxed tabs with the aluminum gradient. Active = pressed-in look (gradient flips to `linear-gradient(180deg, #d6d9de, #eaecef)`) with a tiny amber dot at the bottom-right corner. Inactive = standard aluminum surface. Boxed shape (3px radius), tight gap. ## 8. Spacing - Base 4px - Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64` - Section padding: 80px desktop, 40px mobile ## 9. Do's & don'ts ✅ **Do** - Use the vertical machined gradient on every card and button — flat fills break the metal - Keep the 1px white inset highlight on every surface — it's the catch-light, not decoration - Use the amber accent only as a 6px status dot and as the chart highlight — never as text or button fill - Switch to IBM Plex Mono uppercase 0.06em for every technical label ❌ **Don't** - Use bright color fills — the entire system is greyscale + one amber dot - Use sharp 0px corners — the radius is small (3-8px) but never zero, mimicking machined chamfer - Skip the inset highlight to "simplify" — the surface stops reading as metal - Use Space Grotesk at 700 — 600 is the maximum, anything heavier looks plastic --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1c1f24` | | secondary | `#6c727a` | | tertiary | `#1c1f24` | | neutral | `#e7e9ec` | | surface | `#f1f2f4` | ### Typography - **Display:** Space Grotesk - **Body:** Space Grotesk - **Mono:** IBM Plex Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 3.5rem / 1.04 / 600 / -0.03em | | H1 | 2.25rem / 1.15 / 600 / -0.025em | | H2 | 1.5rem / 1.3 / 600 / -0.015em | | Body | 0.9375rem / 1.55 / 400 / 0 | ### Radius - sm: `3px` - md: `5px` - lg: `8px` - pill: `9999px` ### Shadows - **card:** `rgba(255,255,255,0.7) 0 1px 0 inset, rgba(28,31,36,0.06) 0 0 0 1px, rgba(28,31,36,0.04) 0 1px 2px` - **button:** `rgba(255,255,255,0.10) 0 1px 0 inset, rgba(0,0,0,0.18) 0 1px 2px` ### Borders - **card:** `1px solid rgba(28,31,36,0.06)` - **divider:** `rgba(28,31,36,0.10)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#1c1f24` | | color | `#f1f2f4` | | border | `1px solid rgba(0,0,0,0.4)` | | padding | `9px 18px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | shadow | `rgba(255,255,255,0.10) 0 1px 0 inset, rgba(0,0,0,0.18) 0 1px 2px` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `linear-gradient(180deg, #f6f7f8, #e2e4e8)` | | color | `#1c1f24` | | border | `1px solid rgba(28,31,36,0.18)` | | padding | `9px 18px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | shadow | `rgba(255,255,255,0.6) 0 1px 0 inset` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#1c1f24` | | border | `1px solid rgba(28,31,36,0.22)` | | padding | `9px 18px` | | fontWeight | `600` | | fontSize | `0.8125rem` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#6c727a` | | border | `none` | | padding | `9px 14px` | | fontWeight | `600` | | fontSize | `0.8125rem` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1.5` | | fillOpacity | `0.06` | | gridlines | `true` | | barGap | `10px` | | highlight | `single` | | dotMarker | `true` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 0 24px -4px rgba(28, 31, 36, 0.5), 0 8px 24px -8px rgba(0,0,0,0.6)`, filter: `brightness(1.1)` - **focus** — outline: `1.5px solid #1c1f24`, outline-offset: `3px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.92)` - **disabled** — opacity: `0.35`, filter: `saturate(0.4)` - **loading** — opacity: `0.6` - **selected** — bg: `#1c1f24`, color: `#0A0A0A` #### Input - **hover** — border: `1px solid rgba(28, 31, 36, 0.5)` - **focus** — border: `1px solid #1c1f24`, shadow: `0 0 0 3px rgba(28, 31, 36, 0.2)` - **disabled** — opacity: `0.35` - **error** — border: `1px solid #F87171`, shadow: `0 0 0 3px rgba(248,113,113,0.2)` #### Card - **hover** — shadow: `0 16px 40px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(28, 31, 36, 0.18)`, transform: `translateY(-2px)` - **selected** — border: `1px solid #1c1f24`, shadow: `0 0 0 1px #1c1f24` - **dragging** — shadow: `0 24px 60px -16px rgba(0,0,0,0.85)`, transform: `scale(1.02)`, opacity: `0.85` #### Tab - **hover** — color: `#1c1f24` - **focus** — outline: `1.5px solid #1c1f24`, outline-offset: `2px` - **selected** — color: `#1c1f24`, border: `0 0 1.5px 0 solid #1c1f24` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Glide.** Fließende, leicht beschleunigte Übergänge mit Accent-Glow auf hover. Premium-Feeling durch kontrollierte Lichtspiele. ```css transition: all 280ms cubic-bezier(0.32, 0.72, 0, 1); ``` | Token | Value | |-------|-------| | duration.instant | `100ms` | | duration.fast | `180ms` | | duration.base | `280ms` | | duration.slow | `450ms` | | easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.25, 0.55, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — Hairline mit Accent-Hauch. | | level1 | `0 2px 4px rgba(0,0,0,0.45)` | Subtle drop — list items. | | level2 | `0 12px 28px -8px rgba(0,0,0,0.6)` | Popover — vom Canvas gelöst. | | level3 | `0 20px 48px -12px rgba(0,0,0,0.7), 0 0 32px -8px rgba(28, 31, 36, 0.25)` | Sheet — Accent-Halo. | | level4 | `0 40px 96px -16px rgba(0,0,0,0.85), 0 0 64px -12px rgba(28, 31, 36, 0.4)` | Modal — voller Accent-Rim, dramatisch. | ### Content - **measure:** `66ch` (max line length for body prose) - **paragraph spacing:** `1.3em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#1c1f24`, underline `hover` - **blockquote:** border `2px solid #1c1f24`, padding `0.8em 1.2em` - **code:** background `rgba(28, 31, 36, 0.12)`, color `#1c1f24` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 14.75:1 | AA | AAA | — | | Body text on canvas | 13.59:1 | AA | AAA | — | | Muted text on surface | 4.33:1 | AA | AA-Large | `#676d75` → 4.66:1 (AA) | | Accent on surface | 14.75:1 | AA-Large | AAA | — | | Accent on canvas | 13.59:1 | AA-Large | AAA | — | --- # SYSTEM: Linen Press Source: https://www.freedesignmd.com/system/linen-press --- name: "Linen Press" description: "Warm bone minimalism with a serif voice. Fraunces display headlines paired with Inter body, a single cognac accent reserved for active states, and generous hairline-only chrome. The quiet end of editorial — built for studios, journals, and brands that whisper." tags: [editorial, minimal, premium, warm, modern] colors: primary: "#1d1a16" secondary: "#6e6760" tertiary: "#1d1a16" neutral: "#efe9df" surface: "#f7f2e8" typography: display: Fraunces body: Inter mono: "JetBrains Mono" scale: hero: "4.25rem / 1 / 400 / -0.03em" h1: "2.75rem / 1.08 / 400 / -0.025em" h2: "1.75rem / 1.2 / 500 / -0.015em" body: "1.0625rem / 1.65 / 400 / -0.005em" radius: sm: 4px md: 8px lg: 14px pill: 9999px shadows: card: "rgba(29,26,22,0.04) 0 1px 2px" button: none borders: card: "1px solid rgba(29,26,22,0.08)" divider: rgba(29,26,22,0.10) buttons: primary: background: #1d1a16 color: #f7f2e8 border: none shape: rounded padding: 11px 22px font: 500 / 0.875rem secondary: background: #efe9df color: #1d1a16 border: 1px solid rgba(29,26,22,0.10) shape: rounded padding: 11px 22px font: 500 / 0.875rem outline: background: transparent color: #1d1a16 border: 1px solid rgba(29,26,22,0.18) shape: rounded padding: 11px 22px font: 500 / 0.875rem ghost: background: transparent color: #6e6760 border: none shape: rounded padding: 11px 16px font: 500 / 0.875rem charts: variant: "thin-bars" stroke_width: 1.25 fill_opacity: 0.04 gridlines: false bar_gap: 14px highlight: single dot_marker: true fonts_url: "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Linen Press ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Linen Press** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#1d1a16`, text `#f7f2e8`, padding `11px 22px`, weight `500`. - **Secondary** — rounded shape, bg `#efe9df`, text `#1d1a16`, border `1px solid rgba(29,26,22,0.10)`, padding `11px 22px`, weight `500`. - **Outline** — rounded shape, text `#1d1a16`, border `1px solid rgba(29,26,22,0.18)`, padding `11px 22px`, weight `500`. - **Ghost** — rounded shape, text `#6e6760`, padding `11px 16px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#f7f2e8` - Border: `1px solid rgba(29,26,22,0.08)` - Shadow: `rgba(29,26,22,0.04) 0 1px 2px` - Radius: `radius.lg` (`14px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `thin-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Fraunces`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Linen Press is the quiet end of editorial. Headlines run in Fraunces 400 with optical sizing, set on a warm bone surface (`#f7f2e8`) that reads closer to uncoated paper than to white. Body sits in Inter at 17px on a 1.65 leading. Chrome is hairlines at 8% ink — no shadows, no decorative borders, no gradients. The single accent is a cognac `#a35828` that appears only on the active tab underline and the focus ring. Everything else is ink on bone. The discipline is in the restraint: serif display + sans body, one accent on one element, and surfaces that shift only by hairline. **Signature moves** - Fraunces 400 with optical sizing for hero — never bold, never italic in the hero - Warm bone surface `#f7f2e8` — never white, never grey - Single cognac accent `#a35828` reserved for the active tab underline and focus - Hairline-only chrome — no shadows on cards - Underline tabs only — pills feel too playful for this voice ## 2. Palette ### Surfaces - **Bone** `#f7f2e8` — page background - **Bone Lift** `#efe9df` — secondary card surface, secondary button - **Hairline** `rgba(29,26,22,0.08)` — every divider, every card edge ### Ink - **Ink** `#1d1a16` — text, headings, primary CTA fill - **Ink 60** `#6e6760` — secondary text ### Accent - **Cognac** `#a35828` — active tab underline, focus ring, chart highlight - **Cognac Soft** `rgba(163,88,40,0.14)` — hovered tab background ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Fraunces | 68px | 400 | 1.0 | -0.03em | | H1 | Fraunces | 44px | 400 | 1.08 | -0.025em | | H2 | Fraunces | 28px | 500 | 1.2 | -0.015em | | Body | Inter | 17px | 400 | 1.65 | -0.005em | | UI | Inter | 13px | 500 | 1.4 | 0 | | Caption | JetBrains Mono | 11px | 500 | 1.0 | 0.10em uppercase | Fraunces only at 400 / 500 — anything heavier breaks the quiet voice. Inter handles all UI weight. ## 4. Buttons ### Primary (Ink) ```css background: #1d1a16; color: #f7f2e8; padding: 11px 22px; border-radius: 8px; font-weight: 500; ``` ### Secondary (Bone Lift) - Bone-lift surface, 1px hairline at 10% ink, ink text — same shape, same padding ### Outline & Ghost - Outline: transparent, 1px ink hairline at 18% - Ghost: no border, ink-secondary, hover underlines ## 5. Cards ```css background: #f7f2e8; border: 1px solid rgba(29,26,22,0.08); border-radius: 14px; box-shadow: rgba(29,26,22,0.04) 0 1px 2px; ``` That single 1px shadow is the maximum. Featured cards lift to bone-lift surface — no second shadow, no second border. ## 6. Charts Thin precise bars (4px wide, 14px gap). One bar in cognac, others in 16% ink. NO gridlines. Line charts at 1.25px ink with a 4% fill, ending in a cognac dot marker. Y-axis labels in JetBrains Mono uppercase 11px. ## 7. Tabs Underline only. Active = cognac 1.5px underline, ink text. Inactive = ink-secondary, no underline. Hover = cognac-soft background wash. ## 8. Spacing - Base 4px - Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96` - Section padding: 96px desktop, 48px mobile ## 9. Do's & don'ts ✅ **Do** - Use Fraunces 400 for the hero — the optical-sized weight is the voice - Hold the bone surface `#f7f2e8` — white kills the warmth - Reserve cognac for active state + focus + chart highlight only - Keep chrome to hairlines — shadows break the paper feel ❌ **Don't** - Use Fraunces bold or italic in the hero — too theatrical for this register - Add a second accent — cognac alone, on three specific surfaces - Use pill tabs — underline is the only correct treatment - Add card shadows beyond the 1px hairline lift --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1d1a16` | | secondary | `#6e6760` | | tertiary | `#1d1a16` | | neutral | `#efe9df` | | surface | `#f7f2e8` | ### Typography - **Display:** Fraunces - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.25rem / 1 / 400 / -0.03em | | H1 | 2.75rem / 1.08 / 400 / -0.025em | | H2 | 1.75rem / 1.2 / 500 / -0.015em | | Body | 1.0625rem / 1.65 / 400 / -0.005em | ### Radius - sm: `4px` - md: `8px` - lg: `14px` - pill: `9999px` ### Shadows - **card:** `rgba(29,26,22,0.04) 0 1px 2px` - **button:** `none` ### Borders - **card:** `1px solid rgba(29,26,22,0.08)` - **divider:** `rgba(29,26,22,0.10)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#1d1a16` | | color | `#f7f2e8` | | border | `none` | | padding | `11px 22px` | | fontWeight | `500` | | fontSize | `0.875rem` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#efe9df` | | color | `#1d1a16` | | border | `1px solid rgba(29,26,22,0.10)` | | padding | `11px 22px` | | fontWeight | `500` | | fontSize | `0.875rem` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#1d1a16` | | border | `1px solid rgba(29,26,22,0.18)` | | padding | `11px 22px` | | fontWeight | `500` | | fontSize | `0.875rem` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#6e6760` | | border | `none` | | padding | `11px 16px` | | fontWeight | `500` | | fontSize | `0.875rem` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1.25` | | fillOpacity | `0.04` | | gridlines | `false` | | barGap | `14px` | | highlight | `single` | | dotMarker | `true` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(29, 26, 22, 0.92)`, shadow: `0 4px 20px -8px rgba(29, 26, 22, 0.4)` - **focus** — outline: `1.5px solid #1d1a16`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#1d1a16`, color: `#f7f2e8` #### Input - **hover** — border: `1px solid #1d1a16` - **focus** — border: `1px solid #1d1a16`, shadow: `0 1px 0 0 #1d1a16` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #1d1a16` #### Tab - **hover** — color: `#1d1a16` - **focus** — outline: `1.5px solid #1d1a16`, outline-offset: `3px` - **selected** — color: `#1d1a16`, border: `0 0 2px 0 solid #1d1a16` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#1d1a16`, underline `always` - **blockquote:** border `4px solid #1d1a16`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(29, 26, 22, 0.06)`, color `#1d1a16` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 15.53:1 | AA | AAA | — | | Body text on canvas | 14.35:1 | AA | AAA | — | | Muted text on surface | 4.99:1 | AA | AA | — | | Accent on surface | 15.53:1 | AA-Large | AAA | — | | Accent on canvas | 14.35:1 | AA-Large | AAA | — | --- # SYSTEM: Nocturne Stage Source: https://www.freedesignmd.com/system/nocturne-stage --- name: "Nocturne Stage" description: "Live-event design at midnight. Deep ink-blue surfaces, oversized Bricolage Grotesque headlines with negative tracking, a single electric magenta that reads like a stage spotlight on a single name. Built for festivals, concert series, and event platforms that earn their drama from typography, not glow." tags: [dark, event, bold, modern, premium] colors: primary: "#f4f1ec" secondary: "#8a8a9c" tertiary: "#f4f1ec" neutral: "#15151c" surface: "#0c0c12" typography: display: "Bricolage Grotesque" body: Inter mono: "JetBrains Mono" scale: hero: "6.5rem / 0.9 / 800 / -0.045em" h1: "3.75rem / 0.98 / 700 / -0.035em" h2: "1.875rem / 1.15 / 600 / -0.02em" body: "1rem / 1.55 / 400 / -0.005em" radius: sm: 2px md: 4px lg: 6px pill: 9999px shadows: card: "rgba(0,0,0,0.45) 0 1px 0 inset, rgba(0,0,0,0.6) 0 8px 24px -12px" button: "rgba(255,46,126,0.30) 0 8px 24px -12px" borders: card: "1px solid rgba(244,241,236,0.08)" divider: rgba(244,241,236,0.10) buttons: primary: background: #ff2e7e color: #0c0c12 border: none shape: sharp padding: 13px 26px font: 700 / 0.8125rem / 0.06em uppercase: true secondary: background: #1c1c26 color: #f4f1ec border: 1px solid rgba(244,241,236,0.14) shape: sharp padding: 13px 26px font: 600 / 0.8125rem / 0.06em uppercase: true outline: background: transparent color: #f4f1ec border: 1px solid rgba(244,241,236,0.22) shape: sharp padding: 13px 26px font: 600 / 0.8125rem / 0.06em uppercase: true ghost: background: transparent color: #8a8a9c border: none shape: sharp padding: 13px 18px font: 600 / 0.8125rem / 0.06em uppercase: true charts: variant: "thin-bars" stroke_width: 1.5 fill_opacity: 0.1 gridlines: false bar_gap: 8px highlight: single dot_marker: true fonts_url: "https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Nocturne Stage ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Nocturne Stage** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#ff2e7e`, text `#0c0c12`, padding `13px 26px`, weight `700`, uppercased. - **Secondary** — sharp shape, bg `#1c1c26`, text `#f4f1ec`, border `1px solid rgba(244,241,236,0.14)`, padding `13px 26px`, weight `600`, uppercased. - **Outline** — sharp shape, text `#f4f1ec`, border `1px solid rgba(244,241,236,0.22)`, padding `13px 26px`, weight `600`, uppercased. - **Ghost** — sharp shape, text `#8a8a9c`, padding `13px 18px`, weight `600`, uppercased. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#0c0c12` - Border: `1px solid rgba(244,241,236,0.08)` - Shadow: `rgba(0,0,0,0.45) 0 1px 0 inset, rgba(0,0,0,0.6) 0 8px 24px -12px` - Radius: `radius.lg` (`6px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `thin-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Bricolage Grotesque`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Nocturne Stage is what a festival lineup poster looks like at midnight. The page is deep ink-blue `#0c0c12` — colder than black, warmer than navy. Headlines run in Bricolage Grotesque at 104px, weight 800, with -0.045em tracking that compresses the letterforms into a single gestural mass. Body sits in Inter at 16px, ink-secondary so it never competes with the display. The single accent is electric magenta `#ff2e7e` — used only on the headline CTA and as a 1px underline beneath the headlining act. No glow halos, no neon outlines, no purple-pink gradients. The discipline is in the contrast: massive display type doing all the work, magenta used like a spotlight cue on a single name. **Signature moves** - Bricolage Grotesque 800 at 104px hero with optical sizing — the typography IS the poster - Magenta `#ff2e7e` reserved for the primary CTA and a 1px underline under one name per screen - Sharp 0-2px corners — clubs and venues, not soft saas - Buttons in uppercase 0.06em tracking — that's the ticket-stub voice - Deep ink-blue `#0c0c12` background — never pure black, never grey ## 2. Palette ### Surfaces - **Stage Black** `#0c0c12` — page background, deeper than navy - **Stage Lift** `#15151c` — section bands - **Card** `#1c1c26` — secondary surfaces, secondary button - **Hairline** `rgba(244,241,236,0.08)` — every divider ### Ink (light on dark) - **Bone** `#f4f1ec` — text, headings (warm, never pure white) - **Bone 50** `#8a8a9c` — secondary text, ghost buttons ### Accent - **Magenta** `#ff2e7e` — primary CTA, headlining-act underline - **Magenta Soft** `rgba(255,46,126,0.16)` — focus ring, hovered card border ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Bricolage Grotesque | 104px | 800 | 0.9 | -0.045em | | H1 | Bricolage Grotesque | 60px | 700 | 0.98 | -0.035em | | H2 | Bricolage Grotesque | 30px | 600 | 1.15 | -0.02em | | Body | Inter | 16px | 400 | 1.55 | -0.005em | | UI / Button | Inter | 13px | 700 | 1.2 | 0.06em uppercase | | Mono / Date | JetBrains Mono | 11px | 500 | 1.0 | 0.10em uppercase | Bricolage Grotesque does all display work — its variable weight + optical sizing earn the drama without color or glow. ## 4. Buttons ### Primary (Magenta Cue) ```css background: #ff2e7e; color: #0c0c12; padding: 13px 26px; border-radius: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; box-shadow: rgba(255,46,126,0.30) 0 8px 24px -12px; ``` The shadow is magenta-tinted — that's the only "glow" in the entire system, and it's a soft drop shadow, not an outline halo. ### Secondary (Card Surface) - `#1c1c26` background, 1px hairline at 14% bone, bone text — same uppercase voice ### Outline & Ghost - Outline: transparent, 1px hairline at 22% bone - Ghost: no border, bone-50 text, hover lifts to bone ## 5. Cards ```css background: #15151c; border: 1px solid rgba(244,241,236,0.08); border-radius: 6px; box-shadow: rgba(0,0,0,0.45) 0 1px 0 inset, rgba(0,0,0,0.6) 0 8px 24px -12px; ``` The 1px black inset highlight at the top edge is the dark-mode equivalent of the metallic catch-light — it sells depth without adding chrome. Featured cards (the headlining act) get a 1px magenta underline at the bottom — that is the only second use of the accent. ## 6. Charts Thin precise bars (3px wide, 8px gap). One bar in magenta, others in 22% bone. NO gridlines. Line charts at 1.5px bone with a 10% magenta fill, ending in a magenta dot marker. Y-axis labels in JetBrains Mono uppercase 11px. ## 7. Tabs Underline 1.5px in magenta for the active state. Inactive tabs are bone-50 in uppercase 0.06em tracking. Hover = bone text, no underline. ## 8. Spacing - Base 4px - Scale: `4, 8, 12, 16, 24, 32, 48, 64, 96, 128` - Section padding: 128px desktop, 64px mobile — the negative space is part of the stage ## 9. Do's & don'ts ✅ **Do** - Hold Bricolage Grotesque at 800 / -0.045em for the hero — that compression IS the brand - Use deep ink-blue `#0c0c12` — pure black reads as terminal, navy reads as corporate - Reserve magenta for the primary CTA + one headline underline per screen - Keep all UI labels uppercase 0.06em — that's the ticket-stub typography ❌ **Don't** - Add neon glow outlines — magenta is a spotlight, not a tube light - Use a second accent (cyan, lime, etc.) — the page is deep blue + bone + magenta, full stop - Use pill buttons — sharp 4px is the venue voice - Use Bricolage at less than 600 in display — anything lighter loses the gestural mass --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#f4f1ec` | | secondary | `#8a8a9c` | | tertiary | `#f4f1ec` | | neutral | `#15151c` | | surface | `#0c0c12` | ### Typography - **Display:** Bricolage Grotesque - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 6.5rem / 0.9 / 800 / -0.045em | | H1 | 3.75rem / 0.98 / 700 / -0.035em | | H2 | 1.875rem / 1.15 / 600 / -0.02em | | Body | 1rem / 1.55 / 400 / -0.005em | ### Radius - sm: `2px` - md: `4px` - lg: `6px` - pill: `9999px` ### Shadows - **card:** `rgba(0,0,0,0.45) 0 1px 0 inset, rgba(0,0,0,0.6) 0 8px 24px -12px` - **button:** `rgba(255,46,126,0.30) 0 8px 24px -12px` ### Borders - **card:** `1px solid rgba(244,241,236,0.08)` - **divider:** `rgba(244,241,236,0.10)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#ff2e7e` | | color | `#0c0c12` | | border | `none` | | padding | `13px 26px` | | fontWeight | `700` | | fontSize | `0.8125rem` | | tracking | `0.06em` | | uppercase | `true` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#1c1c26` | | color | `#f4f1ec` | | border | `1px solid rgba(244,241,236,0.14)` | | padding | `13px 26px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.06em` | | uppercase | `true` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#f4f1ec` | | border | `1px solid rgba(244,241,236,0.22)` | | padding | `13px 26px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.06em` | | uppercase | `true` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#8a8a9c` | | border | `none` | | padding | `13px 18px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.06em` | | uppercase | `true` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1.5` | | fillOpacity | `0.1` | | gridlines | `false` | | barGap | `8px` | | highlight | `single` | | dotMarker | `true` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 0 24px -4px rgba(244, 241, 236, 0.5), 0 8px 24px -8px rgba(0,0,0,0.6)`, filter: `brightness(1.1)` - **focus** — outline: `1.5px solid #f4f1ec`, outline-offset: `3px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.92)` - **disabled** — opacity: `0.35`, filter: `saturate(0.4)` - **loading** — opacity: `0.6` - **selected** — bg: `#f4f1ec`, color: `#0A0A0A` #### Input - **hover** — border: `1px solid rgba(244, 241, 236, 0.5)` - **focus** — border: `1px solid #f4f1ec`, shadow: `0 0 0 3px rgba(244, 241, 236, 0.2)` - **disabled** — opacity: `0.35` - **error** — border: `1px solid #F87171`, shadow: `0 0 0 3px rgba(248,113,113,0.2)` #### Card - **hover** — shadow: `0 16px 40px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(244, 241, 236, 0.18)`, transform: `translateY(-2px)` - **selected** — border: `1px solid #f4f1ec`, shadow: `0 0 0 1px #f4f1ec` - **dragging** — shadow: `0 24px 60px -16px rgba(0,0,0,0.85)`, transform: `scale(1.02)`, opacity: `0.85` #### Tab - **hover** — color: `#f4f1ec` - **focus** — outline: `1.5px solid #f4f1ec`, outline-offset: `2px` - **selected** — color: `#f4f1ec`, border: `0 0 1.5px 0 solid #f4f1ec` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Glide.** Fließende, leicht beschleunigte Übergänge mit Accent-Glow auf hover. Premium-Feeling durch kontrollierte Lichtspiele. ```css transition: all 280ms cubic-bezier(0.32, 0.72, 0, 1); ``` | Token | Value | |-------|-------| | duration.instant | `100ms` | | duration.fast | `180ms` | | duration.base | `280ms` | | duration.slow | `450ms` | | easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.25, 0.55, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — Hairline mit Accent-Hauch. | | level1 | `0 2px 4px rgba(0,0,0,0.45)` | Subtle drop — list items. | | level2 | `0 12px 28px -8px rgba(0,0,0,0.6)` | Popover — vom Canvas gelöst. | | level3 | `0 20px 48px -12px rgba(0,0,0,0.7), 0 0 32px -8px rgba(244, 241, 236, 0.25)` | Sheet — Accent-Halo. | | level4 | `0 40px 96px -16px rgba(0,0,0,0.85), 0 0 64px -12px rgba(244, 241, 236, 0.4)` | Modal — voller Accent-Rim, dramatisch. | ### Content - **measure:** `66ch` (max line length for body prose) - **paragraph spacing:** `1.3em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#f4f1ec`, underline `hover` - **blockquote:** border `2px solid #f4f1ec`, padding `0.8em 1.2em` - **code:** background `rgba(244, 241, 236, 0.12)`, color `#f4f1ec` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 17.31:1 | AA | AAA | — | | Body text on canvas | 16.13:1 | AA | AAA | — | | Muted text on surface | 5.75:1 | AA | AA | — | | Accent on surface | 17.31:1 | AA-Large | AAA | — | | Accent on canvas | 16.13:1 | AA-Large | AAA | — | --- # SYSTEM: Graphite Shell Source: https://www.freedesignmd.com/system/graphite-shell --- name: "Graphite Shell" description: "A developer tool that finally feels warm. Graphite surfaces (never black, never grey), JetBrains Mono for everything technical, Inter for prose, a single sage-green accent reserved for the active state. Built for CLIs, infra dashboards, and dev portals that want to look serious without looking like a 90s terminal." tags: [developer, dark, minimal, modern, technical] colors: primary: "#e8e6df" secondary: "#8a8780" tertiary: "#e8e6df" neutral: "#1f1e1b" surface: "#161513" typography: display: Inter body: Inter mono: "JetBrains Mono" scale: hero: "3.25rem / 1.06 / 600 / -0.025em" h1: "2.125rem / 1.16 / 600 / -0.02em" h2: "1.4375rem / 1.3 / 600 / -0.012em" body: "0.9375rem / 1.6 / 400 / 0" radius: sm: 3px md: 5px lg: 8px pill: 9999px shadows: card: "rgba(0,0,0,0.35) 0 1px 0 inset, rgba(0,0,0,0.4) 0 1px 2px" button: none borders: card: "1px solid rgba(232,230,223,0.08)" divider: rgba(232,230,223,0.10) buttons: primary: background: #9cb380 color: #161513 border: none shape: rounded padding: 9px 18px font: mono / 600 / 0.8125rem secondary: background: #262420 color: #e8e6df border: 1px solid rgba(232,230,223,0.10) shape: rounded padding: 9px 18px font: mono / 500 / 0.8125rem outline: background: transparent color: #e8e6df border: 1px solid rgba(232,230,223,0.16) shape: rounded padding: 9px 18px font: mono / 500 / 0.8125rem ghost: background: transparent color: #8a8780 border: none shape: rounded padding: 9px 14px font: mono / 500 / 0.8125rem charts: variant: "thin-bars" stroke_width: 1.5 fill_opacity: 0.08 gridlines: true bar_gap: 10px highlight: single dot_marker: true fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" dependencies: ["lucide-react"] --- # Graphite Shell ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Graphite Shell** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#9cb380`, text `#161513`, padding `9px 18px`, weight `600`. - **Secondary** — rounded shape, bg `#262420`, text `#e8e6df`, border `1px solid rgba(232,230,223,0.10)`, padding `9px 18px`, weight `500`. - **Outline** — rounded shape, text `#e8e6df`, border `1px solid rgba(232,230,223,0.16)`, padding `9px 18px`, weight `500`. - **Ghost** — rounded shape, text `#8a8780`, padding `9px 14px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#161513` - Border: `1px solid rgba(232,230,223,0.08)` - Shadow: `rgba(0,0,0,0.35) 0 1px 0 inset, rgba(0,0,0,0.4) 0 1px 2px` - Radius: `radius.lg` (`8px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `boxed`. Each tab is a bordered card. Active tab gets the accent border and a subtle fill. #### Charts - Bar/line variant: `thin-bars` - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Inter`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Graphite Shell is a dev tool that refuses to look like a 90s terminal. Surfaces are warm graphite — `#161513` page, `#1f1e1b` cards, `#262420` lifted — never pure black, never cool grey. JetBrains Mono carries every technical label, button, and metric. Inter takes prose only — descriptions, doc body, marketing copy. The single accent is a muted sage `#9cb380` — the green of an old terminal cursor at 70% saturation, used only on primary CTAs and the active tab indicator. The discipline is in the warmth: graphite over black, sage over neon green, mono on buttons. It feels like a serious CLI built by people who care. **Signature moves** - Warm graphite surfaces `#161513 / #1f1e1b / #262420` — never black, never cool grey - JetBrains Mono on every button label — buttons read as commands - Sage accent `#9cb380` (muted, never neon) — primary CTA + active tab only - Boxed tabs that read like a tmux pane selector - 1px black inset highlight on every card — dark-mode catch-light ## 2. Palette ### Surfaces - **Shell** `#161513` — page background (warm graphite, brown-leaning) - **Pane** `#1f1e1b` — primary card surface - **Pane Lift** `#262420` — secondary button, hovered card - **Hairline** `rgba(232,230,223,0.08)` — every divider ### Ink (light on dark) - **Bone** `#e8e6df` — text, headings (warm, ivory) - **Bone 55** `#8a8780` — secondary text, ghost buttons, mono labels ### Accent - **Sage** `#9cb380` — primary CTA fill, active tab border, chart highlight - **Sage Soft** `rgba(156,179,128,0.14)` — focus ring, hovered tab ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Inter | 52px | 600 | 1.06 | -0.025em | | H1 | Inter | 34px | 600 | 1.16 | -0.02em | | H2 | Inter | 23px | 600 | 1.3 | -0.012em | | Body | Inter | 15px | 400 | 1.6 | 0 | | UI / Button | JetBrains Mono | 13px | 500 | 1.4 | 0 | | Label | JetBrains Mono | 11px | 500 | 1.0 | 0.04em uppercase | | Code | JetBrains Mono | 13px | 400 | 1.55 | 0 | Inter handles ALL display + prose. JetBrains Mono handles every interactive label and every technical readout. The split is strict — never use mono for prose, never use Inter on a button. ## 4. Buttons ### Primary (Sage Cursor) ```css background: #9cb380; color: #161513; padding: 9px 18px; border-radius: 5px; font-family: "JetBrains Mono"; font-weight: 600; ``` Mono on the button label is the entire signature — it reads as if you're invoking a command. ### Secondary (Pane Lift) - `#262420` background, 1px hairline at 10% bone, bone text in mono 500 ### Outline & Ghost - Outline: transparent, 1px hairline at 16% bone - Ghost: no border, bone-55 mono, hover lifts to bone ## 5. Cards ```css background: #1f1e1b; border: 1px solid rgba(232,230,223,0.08); border-radius: 8px; box-shadow: rgba(0,0,0,0.35) 0 1px 0 inset, rgba(0,0,0,0.4) 0 1px 2px; ``` The 1px black inset highlight at the top edge is the dark catch-light — without it the card reads as flat brown. Featured cards add a 2px sage left border — that is the active-pane indicator, borrowed from tmux/zellij. ## 6. Charts Thin precise bars (4px wide, 10px gap) with dashed gridlines at 8% bone. One bar in sage, others in 22% bone. Line charts at 1.5px bone with an 8% sage fill, ending in a sage dot marker. Y-axis labels in JetBrains Mono uppercase 11px. ## 7. Tabs Boxed tabs with 5px radius and 1px hairline at 10% bone. Active = pane-lift background, 1px sage border, sage text in mono 600. Inactive = transparent, bone-55 mono. Reads like a tmux pane selector. ## 8. Spacing - Base 4px - Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 80` - Section padding: 80px desktop, 40px mobile ## 9. Do's & don'ts ✅ **Do** - Hold the warm graphite surfaces — pure black or cool grey kills the warmth - Put JetBrains Mono on every button — that's the command-line voice - Use sage at muted saturation `#9cb380` — never neon green, never terminal-bright - Keep the 1px black inset highlight on every card — dark catch-light ❌ **Don't** - Use pure black `#000` or cool grey — graphite `#161513` is the only correct base - Use bright terminal green (`#00ff00`, etc.) — sage is muted on purpose - Put Inter on buttons — mono carries every interactive label - Add a second accent — sage alone, full stop --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#e8e6df` | | secondary | `#8a8780` | | tertiary | `#e8e6df` | | neutral | `#1f1e1b` | | surface | `#161513` | ### Typography - **Display:** Inter - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 3.25rem / 1.06 / 600 / -0.025em | | H1 | 2.125rem / 1.16 / 600 / -0.02em | | H2 | 1.4375rem / 1.3 / 600 / -0.012em | | Body | 0.9375rem / 1.6 / 400 / 0 | ### Radius - sm: `3px` - md: `5px` - lg: `8px` - pill: `9999px` ### Shadows - **card:** `rgba(0,0,0,0.35) 0 1px 0 inset, rgba(0,0,0,0.4) 0 1px 2px` - **button:** `none` ### Borders - **card:** `1px solid rgba(232,230,223,0.08)` - **divider:** `rgba(232,230,223,0.10)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#9cb380` | | color | `#161513` | | border | `none` | | padding | `9px 18px` | | fontFamily | `mono` | | fontWeight | `600` | | fontSize | `0.8125rem` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#262420` | | color | `#e8e6df` | | border | `1px solid rgba(232,230,223,0.10)` | | padding | `9px 18px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.8125rem` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#e8e6df` | | border | `1px solid rgba(232,230,223,0.16)` | | padding | `9px 18px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.8125rem` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#8a8780` | | border | `none` | | padding | `9px 14px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.8125rem` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1.5` | | fillOpacity | `0.08` | | gridlines | `true` | | barGap | `10px` | | highlight | `single` | | dotMarker | `true` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(232, 230, 223, 0.15)`, color: `#e8e6df`, border: `1px solid #e8e6df` - **focus** — outline: `1px dashed #e8e6df`, outline-offset: `2px` - **active** — bg: `#e8e6df`, color: `#161513` - **disabled** — opacity: `0.35` - **loading** — opacity: `0.6` - **selected** — bg: `#e8e6df`, color: `#161513` #### Input - **hover** — border: `1px solid rgba(232, 230, 223, 0.5)` - **focus** — bg: `rgba(232, 230, 223, 0.05)`, border: `1px solid #e8e6df` - **disabled** — opacity: `0.35` - **error** — bg: `rgba(239,68,68,0.05)`, border: `1px solid #EF4444` #### Card - **hover** — border: `1px solid #e8e6df` - **selected** — bg: `rgba(232, 230, 223, 0.05)`, border: `1px solid #e8e6df` - **dragging** — opacity: `0.7` #### Tab - **hover** — color: `#e8e6df` - **focus** — outline: `1px dashed #e8e6df`, outline-offset: `1px` - **selected** — bg: `rgba(232, 230, 223, 0.1)`, color: `#e8e6df` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Cursor blink.** Discrete, often stepped transitions. Like a terminal cursor: on or off. Response under 120 ms. ```css transition: all 120ms linear; ``` | Token | Value | |-------|-------| | duration.instant | `0ms` | | duration.fast | `60ms` | | duration.base | `120ms` | | duration.slow | `200ms` | | easing.standard | `linear` | | easing.decelerate | `linear` | | easing.accelerate | `linear` | | easing.spring | `steps(2, end)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the stroke carries the hierarchy. | | level1 | `none` | Border tone lifts the surface. | | level2 | `0 0 0 1px rgba(232, 230, 223, 0.5)` | Ring outline — popover. | | level3 | `0 0 0 1px #e8e6df, 0 12px 32px -16px rgba(232, 230, 223, 0.4)` | Sheet with accent ring + glow. | | level4 | `0 0 0 1px #e8e6df, 0 24px 64px -20px rgba(232, 230, 223, 0.5)` | Modal with accent ring + glow. | ### Content - **measure:** `78ch` (max line length for body prose) - **paragraph spacing:** `1em` - **list indent:** `1.25em` - **list gap:** `0.35em` - **link:** color `#e8e6df`, underline `always` - **blockquote:** border `1px solid rgba(232, 230, 223, 0.5)`, padding `0.7em 1em` - **code:** background `rgba(232, 230, 223, 0.12)`, color `#e8e6df` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 14.61:1 | AA | AAA | — | | Body text on canvas | 13.35:1 | AA | AAA | — | | Muted text on surface | 5.09:1 | AA | AA | — | | Accent on surface | 14.61:1 | AA-Large | AAA | — | | Accent on canvas | 13.35:1 | AA-Large | AAA | — | --- # SYSTEM: Helvetic Grid Source: https://www.freedesignmd.com/system/helvetic-grid --- name: "Helvetic Grid" description: "Swiss-poster discipline at web scale. Inter Tight 900 headlines that fill the column, ink on bone, a visible 12-column grid as 1px hairlines, and a single vermillion accent that lives only on the underline of the active nav item. Built for design studios, agencies, and brands that earn authority through restraint." tags: [swiss, minimal, editorial, premium, modern] colors: primary: "#0a0a0a" secondary: "#5a5a5a" tertiary: "#0a0a0a" neutral: "#ece8df" surface: "#f4f0e6" typography: display: "Inter Tight" body: Inter mono: "JetBrains Mono" scale: hero: "7.5rem / 0.88 / 900 / -0.05em" h1: "4.5rem / 0.96 / 800 / -0.04em" h2: "2.25rem / 1.1 / 700 / -0.025em" body: "1rem / 1.55 / 400 / -0.005em" radius: sm: 0px md: 0px lg: 0px pill: 9999px shadows: card: none button: none borders: card: "1px solid rgba(10,10,10,0.14)" divider: rgba(10,10,10,0.14) buttons: primary: background: #0a0a0a color: #f4f0e6 border: none shape: sharp padding: 13px 24px font: 600 / 0.8125rem / 0.04em uppercase: true secondary: background: transparent color: #0a0a0a border: 1px solid #0a0a0a shape: sharp padding: 13px 24px font: 600 / 0.8125rem / 0.04em uppercase: true outline: background: transparent color: #0a0a0a border: 1px solid rgba(10,10,10,0.20) shape: sharp padding: 13px 24px font: 600 / 0.8125rem / 0.04em uppercase: true ghost: background: transparent color: #5a5a5a border: none shape: sharp padding: 13px 18px font: 600 / 0.8125rem / 0.04em uppercase: true charts: variant: "thin-bars" stroke_width: 1 fill_opacity: 0 gridlines: false bar_gap: 12px highlight: single dot_marker: false fonts_url: "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;600;700;800;900&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Helvetic Grid ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Helvetic Grid** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#0a0a0a`, text `#f4f0e6`, padding `13px 24px`, weight `600`, uppercased. - **Secondary** — sharp shape, text `#0a0a0a`, border `1px solid #0a0a0a`, padding `13px 24px`, weight `600`, uppercased. - **Outline** — sharp shape, text `#0a0a0a`, border `1px solid rgba(10,10,10,0.20)`, padding `13px 24px`, weight `600`, uppercased. - **Ghost** — sharp shape, text `#5a5a5a`, padding `13px 18px`, weight `600`, uppercased. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#f4f0e6` - Border: `1px solid rgba(10,10,10,0.14)` - Shadow: `none` - Radius: `radius.lg` (`0px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `thin-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Inter Tight`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Helvetic Grid is Swiss-poster discipline applied at web scale. Headlines run in Inter Tight at 900 weight, 120px, with -0.05em tracking — letterforms compressed into a single block that fills the column. Body sits in Inter at 16px, ink on a warm bone `#f4f0e6` (never white). The 12-column grid is visible as 1px hairlines at 14% ink — not decorative, structural. The single accent is vermillion `#e23420`, used only as a 2px underline beneath the active navigation item. Nothing else gets color. The discipline is in the absence: no shadows, no radii, no decorative chrome. Just type, grid, and one red mark. **Signature moves** - Inter Tight 900 at 120px hero with -0.05em tracking — typography fills the column edge-to-edge - Visible 12-column grid as 1px hairlines at 14% ink — structure is part of the design - Sharp 0px radius everywhere — corners are forbidden - Vermillion `#e23420` only as a 2px underline under the active nav — never as a fill - All UI labels uppercase 0.04em tracking — that's the poster voice ## 2. Palette ### Surfaces - **Bone** `#f4f0e6` — page background (warm, never white) - **Bone Lift** `#ece8df` — secondary surfaces, table headers - **Hairline** `rgba(10,10,10,0.14)` — grid lines, dividers, card edges ### Ink - **Ink** `#0a0a0a` — text, headings, primary CTA fill - **Ink 60** `#5a5a5a` — secondary text ### Accent - **Vermillion** `#e23420` — active nav underline (2px), chart highlight bar - That is the only color in the system. ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Inter Tight | 120px | 900 | 0.88 | -0.05em | | H1 | Inter Tight | 72px | 800 | 0.96 | -0.04em | | H2 | Inter Tight | 36px | 700 | 1.1 | -0.025em | | Body | Inter | 16px | 400 | 1.55 | -0.005em | | UI / Button | Inter | 13px | 600 | 1.4 | 0.04em uppercase | | Caption / Mono | JetBrains Mono | 11px | 500 | 1.0 | 0.10em uppercase | Inter Tight does all display work — its narrow proportions are the poster voice. Inter handles UI and body. Mono is reserved for figure numbers, dates, and column markers. ## 4. Buttons ### Primary (Ink Block) ```css background: #0a0a0a; color: #f4f0e6; padding: 13px 24px; border-radius: 0; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; ``` ### Secondary (Ink Outline) - Transparent, 1px solid ink, ink text — same sharp shape, same uppercase voice ### Outline & Ghost - Outline: transparent, 1px hairline at 20% ink - Ghost: no border, ink-secondary, hover underlines ## 5. Cards ```css background: #f4f0e6; border: 1px solid rgba(10,10,10,0.14); border-radius: 0; box-shadow: none; ``` NO shadows, NO radii, NO inset highlights. Cards are demarcated by 1px hairlines and the grid. Featured cards get a 1px ink top border (3px wide) — that is the only chrome. ## 6. Charts Thin precise bars (3px wide, 12px gap). One bar in vermillion, others in 18% ink. NO gridlines (the column grid does that work). Line charts at 1px ink with no fill. Y-axis labels in JetBrains Mono uppercase 11px set in the left margin. ## 7. Tabs Underline 2px in vermillion for the active state. Inactive tabs are ink-secondary in uppercase 0.04em. Hover = ink text, no underline. Tabs sit on a 1px hairline baseline that runs the full column width. ## 8. Spacing - Base 8px (column-aware) - Scale: `8, 16, 24, 32, 48, 64, 96, 128, 160` - Section padding: 128px desktop, 64px mobile - 12-column grid with 24px gutters — visible at 14% ink ## 9. Do's & don'ts ✅ **Do** - Hold Inter Tight at 900 / -0.05em for the hero — the compression IS the brand - Show the 12-column grid at 14% ink — structure is the design - Use vermillion only as a 2px nav underline + chart highlight — never as a fill - Use sharp 0px radius on everything — corners break the poster ❌ **Don't** - Use a second accent color — vermillion alone, on two specific surfaces - Use any radius — pills are forbidden, even on badges - Add card shadows or inset highlights — flat is the law - Use Inter Tight under 700 weight — anything lighter loses the block --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#0a0a0a` | | secondary | `#5a5a5a` | | tertiary | `#0a0a0a` | | neutral | `#ece8df` | | surface | `#f4f0e6` | ### Typography - **Display:** Inter Tight - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 7.5rem / 0.88 / 900 / -0.05em | | H1 | 4.5rem / 0.96 / 800 / -0.04em | | H2 | 2.25rem / 1.1 / 700 / -0.025em | | Body | 1rem / 1.55 / 400 / -0.005em | ### Radius - sm: `0px` - md: `0px` - lg: `0px` - pill: `9999px` ### Shadows - **card:** `none` - **button:** `none` ### Borders - **card:** `1px solid rgba(10,10,10,0.14)` - **divider:** `rgba(10,10,10,0.14)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#0a0a0a` | | color | `#f4f0e6` | | border | `none` | | padding | `13px 24px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.04em` | | uppercase | `true` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#0a0a0a` | | border | `1px solid #0a0a0a` | | padding | `13px 24px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.04em` | | uppercase | `true` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#0a0a0a` | | border | `1px solid rgba(10,10,10,0.20)` | | padding | `13px 24px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.04em` | | uppercase | `true` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#5a5a5a` | | border | `none` | | padding | `13px 18px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.04em` | | uppercase | `true` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1` | | fillOpacity | `0` | | gridlines | `false` | | barGap | `12px` | | highlight | `single` | | dotMarker | `false` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(10, 10, 10, 0.92)`, shadow: `0 4px 20px -8px rgba(10, 10, 10, 0.4)` - **focus** — outline: `1.5px solid #0a0a0a`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#0a0a0a`, color: `#f4f0e6` #### Input - **hover** — border: `1px solid #0a0a0a` - **focus** — border: `1px solid #0a0a0a`, shadow: `0 1px 0 0 #0a0a0a` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #0a0a0a` #### Tab - **hover** — color: `#0a0a0a` - **focus** — outline: `1.5px solid #0a0a0a`, outline-offset: `3px` - **selected** — color: `#0a0a0a`, border: `0 0 2px 0 solid #0a0a0a` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#0a0a0a`, underline `always` - **blockquote:** border `4px solid #0a0a0a`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(10, 10, 10, 0.06)`, color `#0a0a0a` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 17.4:1 | AA | AAA | — | | Body text on canvas | 16.19:1 | AA | AAA | — | | Muted text on surface | 6.06:1 | AA | AA | — | | Accent on surface | 17.4:1 | AA-Large | AAA | — | | Accent on canvas | 16.19:1 | AA-Large | AAA | — | --- # SYSTEM: Peony Zine Source: https://www.freedesignmd.com/system/peony-zine --- name: "Peony Zine" description: "A printed quarterly that happens to live on the web. Soft blush-bone surfaces, Fraunces 600 italic display headlines, Geist Mono for marginalia, a single deep plum accent on drop caps and pull-quote bars. Built for journals, newsletters, and slow-content brands that want warmth without preciousness." tags: [editorial, soft, warm, minimal, premium] colors: primary: "#2a1f24" secondary: "#7a6b71" tertiary: "#2a1f24" neutral: "#f3e9e6" surface: "#faf2ee" typography: display: Fraunces body: Inter mono: "Geist Mono" scale: hero: "5rem / 0.98 / 600 / -0.03em" h1: "3rem / 1.06 / 600 / -0.025em" h2: "1.875rem / 1.2 / 500 / -0.018em" body: "1.0625rem / 1.7 / 400 / -0.005em" radius: sm: 4px md: 10px lg: 16px pill: 9999px shadows: card: "rgba(42,31,36,0.04) 0 1px 2px" button: none borders: card: "1px solid rgba(42,31,36,0.08)" divider: rgba(42,31,36,0.10) buttons: primary: background: #2a1f24 color: #faf2ee border: none shape: rounded padding: 12px 22px font: 500 / 0.875rem secondary: background: #f3e9e6 color: #2a1f24 border: 1px solid rgba(42,31,36,0.10) shape: rounded padding: 12px 22px font: 500 / 0.875rem outline: background: transparent color: #2a1f24 border: 1px solid rgba(42,31,36,0.18) shape: rounded padding: 12px 22px font: 500 / 0.875rem ghost: background: transparent color: #7a6b71 border: none shape: rounded padding: 12px 16px font: 500 / 0.875rem charts: variant: "thin-bars" stroke_width: 1.25 fill_opacity: 0.06 gridlines: false bar_gap: 14px highlight: single dot_marker: true fonts_url: "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500;1,9..144,600&family=Inter:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Peony Zine ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Peony Zine** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#2a1f24`, text `#faf2ee`, padding `12px 22px`, weight `500`. - **Secondary** — rounded shape, bg `#f3e9e6`, text `#2a1f24`, border `1px solid rgba(42,31,36,0.10)`, padding `12px 22px`, weight `500`. - **Outline** — rounded shape, text `#2a1f24`, border `1px solid rgba(42,31,36,0.18)`, padding `12px 22px`, weight `500`. - **Ghost** — rounded shape, text `#7a6b71`, padding `12px 16px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#faf2ee` - Border: `1px solid rgba(42,31,36,0.08)` - Shadow: `rgba(42,31,36,0.04) 0 1px 2px` - Radius: `radius.lg` (`16px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `thin-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Fraunces`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`Geist Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Peony Zine is a printed quarterly that happens to live on the web. The page surface is soft blush-bone `#faf2ee` — closer to uncoated cream stock than to white. Headlines run in Fraunces 600 italic at 80px, the soft-cornered serif giving the page a hand-set quality without tipping into preciousness. Body sits in Inter at 17px on a generous 1.7 leading. Marginalia, page numbers, and dateline run in Geist Mono uppercase. The single accent is deep plum `#5b2440` — used only on drop caps and the 2px bar to the left of pull quotes. The discipline is in the warmth: blush over white, plum over magenta, italic display over upright bold. **Signature moves** - Fraunces 600 italic for the hero — the soft optical-sized italic IS the voice - Soft blush-bone surface `#faf2ee` (not white, not pink) - Plum accent `#5b2440` only on drop caps + a 2px pull-quote bar — never as a fill - Pull quotes set in Fraunces 500 italic at 28px with a 2px plum left bar - Marginalia in Geist Mono uppercase 0.10em — page numbers, datelines, footnote refs ## 2. Palette ### Surfaces - **Blush Bone** `#faf2ee` — page background (warm cream) - **Blush Lift** `#f3e9e6` — secondary surfaces, secondary button - **Hairline** `rgba(42,31,36,0.08)` — every divider ### Ink - **Ink** `#2a1f24` — text, headings (warm near-black, never grey) - **Ink 50** `#7a6b71` — secondary text, mono marginalia ### Accent - **Plum** `#5b2440` — drop caps, pull-quote bar, chart highlight - **Plum Soft** `rgba(91,36,64,0.12)` — focus ring, hovered tab background ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Fraunces (italic) | 80px | 600 | 0.98 | -0.03em | | H1 | Fraunces | 48px | 600 | 1.06 | -0.025em | | H2 | Fraunces | 30px | 500 | 1.2 | -0.018em | | Pull Quote | Fraunces (italic) | 28px | 500 | 1.3 | -0.015em | | Body | Inter | 17px | 400 | 1.7 | -0.005em | | UI | Inter | 13px | 500 | 1.4 | 0 | | Marginalia | Geist Mono | 11px | 500 | 1.0 | 0.10em uppercase | Fraunces uses optical sizing — at 80px the italic glyphs open up into something almost calligraphic. Hold the italic to display only; body must be upright Inter. ## 4. Buttons ### Primary (Ink Plum) ```css background: #2a1f24; color: #faf2ee; padding: 12px 22px; border-radius: 10px; font-weight: 500; ``` ### Secondary (Blush Lift) - `#f3e9e6` background, 1px hairline at 10% ink, ink text — same shape, same padding ### Outline & Ghost - Outline: transparent, 1px hairline at 18% ink - Ghost: no border, ink-50, hover underlines ## 5. Cards ```css background: #faf2ee; border: 1px solid rgba(42,31,36,0.08); border-radius: 16px; box-shadow: rgba(42,31,36,0.04) 0 1px 2px; ``` The single 1px shadow is the maximum lift. Featured cards swap to blush-lift surface and add a 2px plum left bar — borrowed from the pull-quote treatment. ## 6. Charts Thin precise bars (4px wide, 14px gap). One bar in plum, others in 18% ink. NO gridlines. Line charts at 1.25px ink with a 6% plum fill, ending in a plum dot marker. Y-axis labels in Geist Mono uppercase 11px set in the left margin. ## 7. Tabs Underline 1.5px in plum for the active state. Inactive tabs are ink-50 in Inter 500. Hover = plum-soft background wash. Tabs sit on a 1px hairline baseline. ## 8. Spacing - Base 4px - Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128` - Section padding: 96px desktop, 48px mobile ## 9. Do's & don'ts ✅ **Do** - Use Fraunces italic 600 at 80px for the hero — the optical-sized italic is the brand - Hold the blush-bone surface `#faf2ee` — white kills the warmth, pink reads as gendered - Reserve plum for drop caps + the 2px pull-quote bar + chart highlight - Set marginalia in Geist Mono uppercase 0.10em — that's the printed-page voice ❌ **Don't** - Use Fraunces italic in body — italic is reserved for display + pull quotes - Add a second accent — plum alone, on three specific gestures - Use sharp 0px radius — soft 10-16px is the zine voice (rounded paper, not posters) - Use shadows beyond the 1px lift — the page is paper, not glass --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#2a1f24` | | secondary | `#7a6b71` | | tertiary | `#2a1f24` | | neutral | `#f3e9e6` | | surface | `#faf2ee` | ### Typography - **Display:** Fraunces - **Body:** Inter - **Mono:** Geist Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 5rem / 0.98 / 600 / -0.03em | | H1 | 3rem / 1.06 / 600 / -0.025em | | H2 | 1.875rem / 1.2 / 500 / -0.018em | | Body | 1.0625rem / 1.7 / 400 / -0.005em | ### Radius - sm: `4px` - md: `10px` - lg: `16px` - pill: `9999px` ### Shadows - **card:** `rgba(42,31,36,0.04) 0 1px 2px` - **button:** `none` ### Borders - **card:** `1px solid rgba(42,31,36,0.08)` - **divider:** `rgba(42,31,36,0.10)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#2a1f24` | | color | `#faf2ee` | | border | `none` | | padding | `12px 22px` | | fontWeight | `500` | | fontSize | `0.875rem` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#f3e9e6` | | color | `#2a1f24` | | border | `1px solid rgba(42,31,36,0.10)` | | padding | `12px 22px` | | fontWeight | `500` | | fontSize | `0.875rem` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#2a1f24` | | border | `1px solid rgba(42,31,36,0.18)` | | padding | `12px 22px` | | fontWeight | `500` | | fontSize | `0.875rem` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#7a6b71` | | border | `none` | | padding | `12px 16px` | | fontWeight | `500` | | fontSize | `0.875rem` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1.25` | | fillOpacity | `0.06` | | gridlines | `false` | | barGap | `14px` | | highlight | `single` | | dotMarker | `true` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(42, 31, 36, 0.92)`, shadow: `0 4px 20px -8px rgba(42, 31, 36, 0.4)` - **focus** — outline: `1.5px solid #2a1f24`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#2a1f24`, color: `#faf2ee` #### Input - **hover** — border: `1px solid #2a1f24` - **focus** — border: `1px solid #2a1f24`, shadow: `0 1px 0 0 #2a1f24` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #2a1f24` #### Tab - **hover** — color: `#2a1f24` - **focus** — outline: `1.5px solid #2a1f24`, outline-offset: `3px` - **selected** — color: `#2a1f24`, border: `0 0 2px 0 solid #2a1f24` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#2a1f24`, underline `always` - **blockquote:** border `4px solid #2a1f24`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(42, 31, 36, 0.06)`, color `#2a1f24` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 14.4:1 | AA | AAA | — | | Body text on canvas | 13.34:1 | AA | AAA | — | | Muted text on surface | 4.56:1 | AA | AA | — | | Accent on surface | 14.4:1 | AA-Large | AAA | — | | Accent on canvas | 13.34:1 | AA-Large | AAA | — | --- # SYSTEM: Statute Press Source: https://www.freedesignmd.com/system/statute-press --- name: "Statute Press" description: "A government document made beautiful. Source Serif 4 hero, 3px black borders that read as legal-page rules, IBM Plex Mono for clause numbers and timestamps, a single mustard-stamp accent that lives only on the approval seal and the active filing tab. Built for legal tech, civic, and document-heavy products." tags: [brutalist, editorial, legal, premium, modern] colors: primary: "#0d0d0d" secondary: "#5d5d5d" tertiary: "#0d0d0d" neutral: "#ece6d4" surface: "#f5efde" typography: display: "Source Serif 4" body: Inter mono: "IBM Plex Mono" scale: hero: "5.5rem / 0.98 / 700 / -0.025em" h1: "3.25rem / 1.06 / 700 / -0.02em" h2: "1.875rem / 1.2 / 600 / -0.012em" body: "1.0625rem / 1.65 / 400 / 0" radius: sm: 0px md: 0px lg: 0px pill: 9999px shadows: card: none button: none borders: card: "3px solid #0d0d0d" divider: rgba(13,13,13,0.18) buttons: primary: background: #0d0d0d color: #f5efde border: 3px solid #0d0d0d shape: sharp padding: 11px 22px font: 600 / 0.8125rem / 0.06em uppercase: true secondary: background: #f5efde color: #0d0d0d border: 3px solid #0d0d0d shape: sharp padding: 11px 22px font: 600 / 0.8125rem / 0.06em uppercase: true outline: background: transparent color: #0d0d0d border: 1.5px solid #0d0d0d shape: sharp padding: 11px 22px font: 600 / 0.8125rem / 0.06em uppercase: true ghost: background: transparent color: #5d5d5d border: none shape: sharp padding: 11px 18px font: 600 / 0.8125rem / 0.06em uppercase: true charts: variant: "thin-bars" stroke_width: 1.25 fill_opacity: 0 gridlines: false bar_gap: 12px highlight: single dot_marker: false fonts_url: "https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap" dependencies: ["lucide-react"] --- # Statute Press ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Statute Press** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#0d0d0d`, text `#f5efde`, border `3px solid #0d0d0d`, padding `11px 22px`, weight `600`, uppercased. - **Secondary** — sharp shape, bg `#f5efde`, text `#0d0d0d`, border `3px solid #0d0d0d`, padding `11px 22px`, weight `600`, uppercased. - **Outline** — sharp shape, text `#0d0d0d`, border `1.5px solid #0d0d0d`, padding `11px 22px`, weight `600`, uppercased. - **Ghost** — sharp shape, text `#5d5d5d`, padding `11px 18px`, weight `600`, uppercased. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#f5efde` - Border: `3px solid #0d0d0d` - Shadow: `none` - Radius: `radius.lg` (`0px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `boxed`. Each tab is a bordered card. Active tab gets the accent border and a subtle fill. #### Charts - Bar/line variant: `thin-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Source Serif 4`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`IBM Plex Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Statute Press is a government filing made beautiful. The page surface is parchment `#f5efde` — closer to legal-pad cream than to white. Headlines run in Source Serif 4 at 88px, weight 700, with the optical-sized glyphs holding their authority at scale. Body sits in Inter at 17px on a 1.65 leading. Clause numbers, dockets, timestamps, and footnote references run in IBM Plex Mono uppercase. Cards and primary buttons are bordered with a hard 3px ink rule — the kind of border that reads as a legal-page divider, not as a CSS choice. The single accent is a mustard `#c89a2e` that appears only on the approval-seal badge and the active filing tab — like a rubber stamp on a contract. The discipline is in the institutional restraint: serif display + sans body + mono numerals, hard 3px borders, parchment surface, and one mustard stamp. **Signature moves** - Source Serif 4 700 at 88px hero with optical sizing — institutional gravitas - Hard 3px ink borders on cards and primary buttons — the legal-page rule - Parchment surface `#f5efde` — never white, never grey - Mustard `#c89a2e` only as the approval seal + active filing tab — never as a fill - All UI labels uppercase 0.06em — that's the docket voice - IBM Plex Mono for every clause number, timestamp, and footnote ref ## 2. Palette ### Surfaces - **Parchment** `#f5efde` — page background (warm legal-pad cream) - **Parchment Lift** `#ece6d4` — secondary surfaces, table headers - **Hairline** `rgba(13,13,13,0.18)` — internal dividers - **Hard Rule** `#0d0d0d` — the 3px legal border ### Ink - **Ink** `#0d0d0d` — text, headings, primary CTA fill - **Ink 60** `#5d5d5d` — secondary text ### Accent - **Mustard Stamp** `#c89a2e` — approval seal, active filing tab border - **Mustard Soft** `rgba(200,154,46,0.16)` — focus ring, hovered tab background ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Source Serif 4 | 88px | 700 | 0.98 | -0.025em | | H1 | Source Serif 4 | 52px | 700 | 1.06 | -0.02em | | H2 | Source Serif 4 | 30px | 600 | 1.2 | -0.012em | | Body | Inter | 17px | 400 | 1.65 | 0 | | UI / Button | Inter | 13px | 600 | 1.4 | 0.06em uppercase | | Clause / Mono | IBM Plex Mono | 11px | 500 | 1.0 | 0.08em uppercase | | Filing Number | IBM Plex Mono | 14px | 600 | 1.0 | 0 tabular-nums | Source Serif 4 uses optical sizing — at 88px the glyphs gain serif weight that smaller sizes don't show. Hold serif to display only; body is Inter. ## 4. Buttons ### Primary (Ink Slab with Rule) ```css background: #0d0d0d; color: #f5efde; padding: 11px 22px; border: 3px solid #0d0d0d; border-radius: 0; text-transform: uppercase; letter-spacing: 0.06em; ``` The 3px border on the dark button is invisible on its own background — but it adds 3px of mass that reads as institutional weight. On the secondary it shows as a hard frame. ### Secondary (Parchment with Hard Rule) - Parchment background, 3px solid ink border, ink text — same uppercase voice ### Outline & Ghost - Outline: 1.5px solid ink — for inline secondary actions - Ghost: no border, ink-60, hover underlines ## 5. Cards ```css background: #f5efde; border: 3px solid #0d0d0d; border-radius: 0; box-shadow: none; ``` The 3px hard rule IS the card. No shadows, no inset highlights, no soft fills. Featured cards (the approved filing) get a mustard stamp badge in the top-right corner — that is the only place mustard appears as a fill. ## 6. Charts Thin precise bars (3px wide, 12px gap). One bar in mustard, others in 22% ink. NO gridlines. Line charts at 1.25px ink with no fill. Y-axis labels in IBM Plex Mono uppercase 11px. The chart reads as an exhibit attached to a filing. ## 7. Tabs Boxed tabs with 1.5px ink border and 0px radius. Active = parchment-lift background, 2px mustard top border, ink text in uppercase 0.06em. Inactive = transparent, ink-60 uppercase. Reads like the index tabs on a hanging file folder. ## 8. Spacing - Base 4px - Scale: `4, 8, 12, 16, 24, 32, 48, 64, 96, 128` - Section padding: 128px desktop, 64px mobile ## 9. Do's & don'ts ✅ **Do** - Use Source Serif 4 700 at 88px for the hero — the optical-sized serif IS institutional gravitas - Hold the parchment surface `#f5efde` — white reads as web app, grey reads as ledger - Use the 3px hard rule on cards and primary/secondary buttons — that's the legal-page divider - Reserve mustard for the approval stamp + active filing tab — never as a button or text fill ❌ **Don't** - Use any radius — sharp 0px is institutional - Add card shadows — the 3px border carries all the weight - Use a second accent — mustard alone, on the stamp and the tab - Use Source Serif at lower than 600 — anything lighter loses the serif authority --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#0d0d0d` | | secondary | `#5d5d5d` | | tertiary | `#0d0d0d` | | neutral | `#ece6d4` | | surface | `#f5efde` | ### Typography - **Display:** Source Serif 4 - **Body:** Inter - **Mono:** IBM Plex Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 5.5rem / 0.98 / 700 / -0.025em | | H1 | 3.25rem / 1.06 / 700 / -0.02em | | H2 | 1.875rem / 1.2 / 600 / -0.012em | | Body | 1.0625rem / 1.65 / 400 / 0 | ### Radius - sm: `0px` - md: `0px` - lg: `0px` - pill: `9999px` ### Shadows - **card:** `none` - **button:** `none` ### Borders - **card:** `3px solid #0d0d0d` - **divider:** `rgba(13,13,13,0.18)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#0d0d0d` | | color | `#f5efde` | | border | `3px solid #0d0d0d` | | padding | `11px 22px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.06em` | | uppercase | `true` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#f5efde` | | color | `#0d0d0d` | | border | `3px solid #0d0d0d` | | padding | `11px 22px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.06em` | | uppercase | `true` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#0d0d0d` | | border | `1.5px solid #0d0d0d` | | padding | `11px 22px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.06em` | | uppercase | `true` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#5d5d5d` | | border | `none` | | padding | `11px 18px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.06em` | | uppercase | `true` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1.25` | | fillOpacity | `0` | | gridlines | `false` | | barGap | `12px` | | highlight | `single` | | dotMarker | `false` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `4px 4px 0 0 #0d0d0d`, transform: `translate(-2px, -2px)` - **focus** — outline: `2px solid #0d0d0d`, outline-offset: `3px` - **active** — shadow: `none`, transform: `translate(0, 0)` - **disabled** — opacity: `0.4`, filter: `grayscale(0.4)` - **loading** — opacity: `0.6` - **selected** — bg: `#0d0d0d`, color: `#f5efde` #### Input - **hover** — border: `2px solid #0d0d0d` - **focus** — border: `2px solid #0d0d0d`, shadow: `4px 4px 0 0 #0d0d0d` - **disabled** — bg: `rgba(13, 13, 13, 0.05)`, opacity: `0.4` - **error** — border: `2px solid #B91C1C`, shadow: `4px 4px 0 0 #B91C1C` #### Card - **hover** — shadow: `6px 6px 0 0 #0d0d0d`, transform: `translate(-3px, -3px)` - **selected** — border: `3px solid #0d0d0d` - **dragging** — shadow: `8px 8px 0 0 #0d0d0d`, transform: `rotate(-1deg) scale(1.02)` #### Tab - **hover** — bg: `rgba(13, 13, 13, 0.08)` - **focus** — outline: `2px solid #0d0d0d`, outline-offset: `2px` - **selected** — bg: `#0d0d0d`, color: `#f5efde` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Hard cut.** No animation. Transitions are cuts — the state switches, the eye follows. Brutalism means no softening. ```css transition: none; ``` | Token | Value | |-------|-------| | duration.instant | `0ms` | | duration.fast | `50ms` | | duration.base | `100ms` | | duration.slow | `150ms` | | easing.standard | `linear` | | easing.decelerate | `linear` | | easing.accelerate | `linear` | | easing.spring | `steps(3, end)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the border carries the separation. | | level1 | `2px 2px 0 0 #0d0d0d` | Hard offset 2/2, no blur. | | level2 | `4px 4px 0 0 #0d0d0d` | Hard offset 4/4 — cards. | | level3 | `6px 6px 0 0 #0d0d0d` | Hard offset 6/6 — dialogs. | | level4 | `8px 8px 0 0 #0d0d0d` | Hard offset 8/8 — modals, thicker border. | ### Content - **measure:** `64ch` (max line length for body prose) - **paragraph spacing:** `1.2em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#0d0d0d`, underline `always` - **blockquote:** border `4px solid #0d0d0d`, padding `0.8em 1em` - **code:** background `#0d0d0d`, color `#f5efde` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 16.92:1 | AA | AAA | — | | Body text on canvas | 15.58:1 | AA | AAA | — | | Muted text on surface | 5.73:1 | AA | AA | — | | Accent on surface | 16.92:1 | AA-Large | AAA | — | | Accent on canvas | 15.58:1 | AA-Large | AAA | — | --- # SYSTEM: Ledger Quiet Source: https://www.freedesignmd.com/system/ledger-quiet --- name: "Ledger Quiet" description: "A trading desk that whispers. Off-white surfaces with hairline-only chrome, IBM Plex Sans for prose, IBM Plex Mono with tabular numerals for every figure, a single forest-green accent reserved for positive deltas. Built for fintech dashboards, treasury tools, and any product where the numbers must be the loudest thing on the screen." tags: [fintech, minimal, premium, modern, dashboard] colors: primary: "#0e1116" secondary: "#5b6370" tertiary: "#0e1116" neutral: "#eef0f2" surface: "#f8f9fa" typography: display: "IBM Plex Sans" body: "IBM Plex Sans" mono: "IBM Plex Mono" scale: hero: "3rem / 1.08 / 600 / -0.025em" h1: "2rem / 1.18 / 600 / -0.02em" h2: "1.375rem / 1.3 / 600 / -0.012em" body: "0.9375rem / 1.55 / 400 / 0" radius: sm: 3px md: 5px lg: 7px pill: 9999px shadows: card: "rgba(14,17,22,0.04) 0 1px 2px" button: none borders: card: "1px solid rgba(14,17,22,0.08)" divider: rgba(14,17,22,0.08) buttons: primary: background: #0e1116 color: #f8f9fa border: none shape: rounded padding: 9px 18px font: 500 / 0.8125rem secondary: background: #ffffff color: #0e1116 border: 1px solid rgba(14,17,22,0.14) shape: rounded padding: 9px 18px font: 500 / 0.8125rem outline: background: transparent color: #0e1116 border: 1px solid rgba(14,17,22,0.18) shape: rounded padding: 9px 18px font: 500 / 0.8125rem ghost: background: transparent color: #5b6370 border: none shape: rounded padding: 9px 14px font: 500 / 0.8125rem charts: variant: "thin-bars" stroke_width: 1.25 fill_opacity: 0.05 gridlines: true bar_gap: 8px highlight: single dot_marker: true fonts_url: "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" dependencies: ["lucide-react"] --- # Ledger Quiet ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Ledger Quiet** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#0e1116`, text `#f8f9fa`, padding `9px 18px`, weight `500`. - **Secondary** — rounded shape, bg `#ffffff`, text `#0e1116`, border `1px solid rgba(14,17,22,0.14)`, padding `9px 18px`, weight `500`. - **Outline** — rounded shape, text `#0e1116`, border `1px solid rgba(14,17,22,0.18)`, padding `9px 18px`, weight `500`. - **Ghost** — rounded shape, text `#5b6370`, padding `9px 14px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#f8f9fa` - Border: `1px solid rgba(14,17,22,0.08)` - Shadow: `rgba(14,17,22,0.04) 0 1px 2px` - Radius: `radius.lg` (`7px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `thin-bars` - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`IBM Plex Sans`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`IBM Plex Sans`)** — paragraphs, labels, button text, form inputs. - **Mono (`IBM Plex Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Ledger Quiet is a trading desk that whispers. The page is off-white `#f8f9fa` with cards lifted to pure white — a tonal-shift system where every surface differs by 1-2% lightness. IBM Plex Sans handles prose, IBM Plex Mono handles every figure with tabular numerals so columns of numbers align to the pixel. Chrome is hairlines at 8% ink. The single accent is a deep forest-green `#1f7a4d` that appears only on positive deltas (+2.4%), the active tab underline, and the chart highlight bar. Negative deltas use ink, never red — this system trusts the reader to read the sign. The discipline is in the typographic split: prose in sans, every numeral in mono with tabular alignment. The page reads as a serious P&L, not a marketing dashboard. **Signature moves** - IBM Plex Mono with `font-variant-numeric: tabular-nums` on every figure — columns align perfectly - Forest-green `#1f7a4d` only on positive deltas + active tab underline + chart highlight - Negative deltas in ink (with minus sign), never in red — quiet conviction - Hairline-only chrome at 8% ink — no shadows beyond the 1px lift - Tonal-shift surfaces: `#f8f9fa` page → `#ffffff` card → `#eef0f2` table header ## 2. Palette ### Surfaces - **Page** `#f8f9fa` — primary background (cool off-white) - **Card** `#ffffff` — elevated surface, 1px hairline border - **Header / Bone** `#eef0f2` — table headers, secondary surfaces ### Ink - **Ink** `#0e1116` — text, headings, primary CTA fill, negative deltas - **Ink 60** `#5b6370` — secondary text, mono labels - **Hairline** `rgba(14,17,22,0.08)` — every divider, every card edge ### Accent - **Forest** `#1f7a4d` — positive delta, active tab underline, chart highlight - **Forest Soft** `rgba(31,122,77,0.10)` — focus ring, hovered tab background ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | IBM Plex Sans | 48px | 600 | 1.08 | -0.025em | | H1 | IBM Plex Sans | 32px | 600 | 1.18 | -0.02em | | H2 | IBM Plex Sans | 22px | 600 | 1.3 | -0.012em | | Body | IBM Plex Sans | 15px | 400 | 1.55 | 0 | | UI / Button | IBM Plex Sans | 13px | 500 | 1.4 | 0 | | Figure / KPI | IBM Plex Mono | 28px | 600 | 1.0 | 0 tabular-nums | | Label | IBM Plex Mono | 11px | 500 | 1.0 | 0.06em uppercase | | Delta | IBM Plex Mono | 13px | 500 | 1.0 | 0 tabular-nums | Plex Mono everywhere a number lives — KPIs, deltas, table cells, axis labels. The tabular-nums variant is what makes the system read as professional finance vs. marketing copy. ## 4. Buttons ### Primary (Ink) ```css background: #0e1116; color: #f8f9fa; padding: 9px 18px; border-radius: 5px; font-weight: 500; ``` ### Secondary (Card White) - Pure white, 1px hairline at 14% ink, ink text — same shape, same padding ### Outline & Ghost - Outline: transparent, 1px hairline at 18% ink - Ghost: no border, ink-60, hover lifts to ink ## 5. Cards ```css background: #ffffff; border: 1px solid rgba(14,17,22,0.08); border-radius: 7px; box-shadow: rgba(14,17,22,0.04) 0 1px 2px; ``` The single 1px shadow is the maximum lift. Every card carries a 1px hairline header divider beneath the title — that internal rule is the signature of a trading-pane card. ## 6. Charts Thin precise bars (3px wide, 8px gap) with dashed gridlines at 6% ink. One bar in forest, others in 22% ink. Line charts at 1.25px ink with a 5% forest fill, ending in a forest dot marker. Y-axis labels in IBM Plex Mono uppercase 11px aligned to the right edge. ## 7. Tabs Underline 1.5px in forest for the active state. Inactive tabs are ink-60 in IBM Plex Sans 500. Hover = forest-soft background wash. Tabs sit on a 1px hairline baseline. ## 8. Spacing - Base 4px (KPI-card aware) - Scale: `4, 8, 12, 16, 20, 24, 32, 40, 56, 80` - Section padding: 80px desktop, 32px mobile ## 9. Do's & don'ts ✅ **Do** - Use IBM Plex Mono with tabular-nums on every figure — column alignment IS the brand - Reserve forest for positive deltas + active tab + chart highlight only - Keep negative deltas in ink with a minus sign — never red - Hold tonal-shift surfaces (page → card → header), each step 1-2% lightness ❌ **Don't** - Use red for negative deltas — the system trusts the minus sign - Use a second accent color — forest alone, on three specific surfaces - Add a heavy shadow — 1px lift is the maximum - Use proportional figures for numbers — tabular-nums always --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#0e1116` | | secondary | `#5b6370` | | tertiary | `#0e1116` | | neutral | `#eef0f2` | | surface | `#f8f9fa` | ### Typography - **Display:** IBM Plex Sans - **Body:** IBM Plex Sans - **Mono:** IBM Plex Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 3rem / 1.08 / 600 / -0.025em | | H1 | 2rem / 1.18 / 600 / -0.02em | | H2 | 1.375rem / 1.3 / 600 / -0.012em | | Body | 0.9375rem / 1.55 / 400 / 0 | ### Radius - sm: `3px` - md: `5px` - lg: `7px` - pill: `9999px` ### Shadows - **card:** `rgba(14,17,22,0.04) 0 1px 2px` - **button:** `none` ### Borders - **card:** `1px solid rgba(14,17,22,0.08)` - **divider:** `rgba(14,17,22,0.08)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#0e1116` | | color | `#f8f9fa` | | border | `none` | | padding | `9px 18px` | | fontWeight | `500` | | fontSize | `0.8125rem` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#ffffff` | | color | `#0e1116` | | border | `1px solid rgba(14,17,22,0.14)` | | padding | `9px 18px` | | fontWeight | `500` | | fontSize | `0.8125rem` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#0e1116` | | border | `1px solid rgba(14,17,22,0.18)` | | padding | `9px 18px` | | fontWeight | `500` | | fontSize | `0.8125rem` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#5b6370` | | border | `none` | | padding | `9px 14px` | | fontWeight | `500` | | fontSize | `0.8125rem` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1.25` | | fillOpacity | `0.05` | | gridlines | `true` | | barGap | `8px` | | highlight | `single` | | dotMarker | `true` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(14, 17, 22, 0.92)`, shadow: `0 4px 20px -8px rgba(14, 17, 22, 0.4)` - **focus** — outline: `1.5px solid #0e1116`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#0e1116`, color: `#f8f9fa` #### Input - **hover** — border: `1px solid #0e1116` - **focus** — border: `1px solid #0e1116`, shadow: `0 1px 0 0 #0e1116` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #0e1116` #### Tab - **hover** — color: `#0e1116` - **focus** — outline: `1.5px solid #0e1116`, outline-offset: `3px` - **selected** — color: `#0e1116`, border: `0 0 2px 0 solid #0e1116` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#0e1116`, underline `always` - **blockquote:** border `4px solid #0e1116`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(14, 17, 22, 0.06)`, color `#0e1116` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 17.94:1 | AA | AAA | — | | Body text on canvas | 16.55:1 | AA | AAA | — | | Muted text on surface | 5.75:1 | AA | AA | — | | Accent on surface | 17.94:1 | AA-Large | AAA | — | | Accent on canvas | 16.55:1 | AA-Large | AAA | — | --- # SYSTEM: Atrium Folio Source: https://www.freedesignmd.com/system/atrium-folio --- name: "Atrium Folio" description: "An architecture studio's monograph rendered in HTML. Cormorant Garamond at oversized scale for project titles, Inter for body, concrete-grey surfaces with one warm terracotta accent reserved for the project number. Built for architecture firms, design studios, and portfolio sites where each project deserves its own page." tags: [editorial, portfolio, premium, warm, minimal] colors: primary: "#1c1a17" secondary: "#6b675f" tertiary: "#1c1a17" neutral: "#dcd9d2" surface: "#e9e6df" typography: display: "Cormorant Garamond" body: Inter mono: "JetBrains Mono" scale: hero: "8rem / 0.92 / 400 / -0.04em" h1: "4.5rem / 1 / 400 / -0.03em" h2: "2.125rem / 1.18 / 400 / -0.018em" body: "1.0625rem / 1.7 / 400 / -0.005em" radius: sm: 0px md: 0px lg: 0px pill: 9999px shadows: card: none button: none borders: card: "1px solid rgba(28,26,23,0.10)" divider: rgba(28,26,23,0.14) buttons: primary: background: #1c1a17 color: #e9e6df border: none shape: sharp padding: 12px 24px font: 500 / 0.8125rem / 0.10em uppercase: true secondary: background: transparent color: #1c1a17 border: 1px solid #1c1a17 shape: sharp padding: 12px 24px font: 500 / 0.8125rem / 0.10em uppercase: true outline: background: transparent color: #1c1a17 border: 1px solid rgba(28,26,23,0.18) shape: sharp padding: 12px 24px font: 500 / 0.8125rem / 0.10em uppercase: true ghost: background: transparent color: #6b675f border: none shape: sharp padding: 12px 18px font: 500 / 0.8125rem / 0.10em uppercase: true charts: variant: "thin-bars" stroke_width: 1 fill_opacity: 0 gridlines: false bar_gap: 16px highlight: single dot_marker: false fonts_url: "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Atrium Folio ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Atrium Folio** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#1c1a17`, text `#e9e6df`, padding `12px 24px`, weight `500`, uppercased. - **Secondary** — sharp shape, text `#1c1a17`, border `1px solid #1c1a17`, padding `12px 24px`, weight `500`, uppercased. - **Outline** — sharp shape, text `#1c1a17`, border `1px solid rgba(28,26,23,0.18)`, padding `12px 24px`, weight `500`, uppercased. - **Ghost** — sharp shape, text `#6b675f`, padding `12px 18px`, weight `500`, uppercased. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#e9e6df` - Border: `1px solid rgba(28,26,23,0.10)` - Shadow: `none` - Radius: `radius.lg` (`0px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `thin-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Cormorant Garamond`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Atrium Folio is what an architecture studio's monograph looks like when you scroll it. The page surface is concrete-grey `#e9e6df` — never white, never warm. Project titles run in Cormorant Garamond at 128px, weight 400 — the high-contrast didone proportions earning their drama from sheer scale, never weight. Body sits in Inter at 17px on a 1.7 leading, two-column when there's room. Project numbers, dates, and addresses run in JetBrains Mono with 0.10em uppercase tracking. The single accent is terracotta `#a8533d` that appears only as the colored project number ("№ 04") and as the 1px underline beneath the active project in the index. The discipline is in the proportion: massive serif headlines on concrete, mono marginalia, and one warm earthy accent on two specific gestures. **Signature moves** - Cormorant Garamond at 128px, weight 400 — drama through scale, never weight - Concrete-grey surface `#e9e6df` — never white, never beige - Terracotta `#a8533d` only as the project number ("№ 04") and active project underline - Sharp 0px radius everywhere — architectural precision - All UI labels uppercase 0.10em tracking — wide spacing reads as monograph caption - Two-column body where space allows — print rhythm ## 2. Palette ### Surfaces - **Concrete** `#e9e6df` — page background (warm grey-brown) - **Concrete Lift** `#dcd9d2` — section bands, secondary surfaces - **Hairline** `rgba(28,26,23,0.10)` — every divider ### Ink - **Ink** `#1c1a17` — text, headings, primary CTA fill - **Ink 50** `#6b675f` — secondary text, mono marginalia ### Accent - **Terracotta** `#a8533d` — project number, active project underline, chart highlight bar - That is the only color in the system. ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Cormorant Garamond | 128px | 400 | 0.92 | -0.04em | | H1 | Cormorant Garamond | 72px | 400 | 1.0 | -0.03em | | H2 | Cormorant Garamond | 34px | 400 | 1.18 | -0.018em | | Pull Quote | Cormorant Garamond (italic) | 28px | 400 | 1.3 | -0.012em | | Body | Inter | 17px | 400 | 1.7 | -0.005em | | UI / Button | Inter | 13px | 500 | 1.4 | 0.10em uppercase | | Marginalia | JetBrains Mono | 11px | 500 | 1.0 | 0.10em uppercase | | Project № | JetBrains Mono | 14px | 500 | 1.0 | 0.10em uppercase | Cormorant only at 400 — the high-contrast strokes earn their drama at scale, not weight. Italic is reserved for pull quotes. ## 4. Buttons ### Primary (Ink Slab) ```css background: #1c1a17; color: #e9e6df; padding: 12px 24px; border-radius: 0; text-transform: uppercase; letter-spacing: 0.10em; font-weight: 500; ``` The 0.10em tracking is wider than typical UI — that's the monograph caption voice carried into the button. ### Secondary (Ink Outline) - Transparent, 1px solid ink, ink text — same sharp shape, same wide tracking ### Outline & Ghost - Outline: transparent, 1px hairline at 18% ink - Ghost: no border, ink-50 uppercase, hover underlines ## 5. Cards ```css background: #e9e6df; border: 1px solid rgba(28,26,23,0.10); border-radius: 0; box-shadow: none; ``` NO shadows, NO radii, NO inset highlights. Featured project cards (the current commission) lift to concrete-lift surface and add a terracotta project number in the top-right — that is the only place terracotta appears as a fill. ## 6. Charts Thin precise bars (3px wide, 16px gap). One bar in terracotta, others in 18% ink. NO gridlines. Line charts at 1px ink with no fill. Y-axis labels in JetBrains Mono uppercase 11px. ## 7. Tabs Underline 1px in terracotta for the active state. Inactive tabs are ink-50 in uppercase 0.10em. Hover = ink text, no underline. ## 8. Spacing - Base 8px - Scale: `8, 16, 24, 32, 48, 64, 96, 128, 160, 200` - Section padding: 160px desktop, 80px mobile — the negative space IS the architecture ## 9. Do's & don'ts ✅ **Do** - Use Cormorant Garamond at 400 only — anything heavier breaks the high-contrast didone proportion - Hold the concrete-grey surface — white reads as web app, beige reads as boutique - Reserve terracotta for the project number + active underline + chart highlight - Use 0.10em uppercase tracking on every UI label — that's the monograph caption voice ❌ **Don't** - Use Cormorant at 600+ — bold breaks the high-contrast Didone - Use any radius — sharp 0px is the architectural rule - Use a second accent — terracotta alone, on three specific gestures - Add card shadows — flat is the law of the monograph --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1c1a17` | | secondary | `#6b675f` | | tertiary | `#1c1a17` | | neutral | `#dcd9d2` | | surface | `#e9e6df` | ### Typography - **Display:** Cormorant Garamond - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 8rem / 0.92 / 400 / -0.04em | | H1 | 4.5rem / 1 / 400 / -0.03em | | H2 | 2.125rem / 1.18 / 400 / -0.018em | | Body | 1.0625rem / 1.7 / 400 / -0.005em | ### Radius - sm: `0px` - md: `0px` - lg: `0px` - pill: `9999px` ### Shadows - **card:** `none` - **button:** `none` ### Borders - **card:** `1px solid rgba(28,26,23,0.10)` - **divider:** `rgba(28,26,23,0.14)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#1c1a17` | | color | `#e9e6df` | | border | `none` | | padding | `12px 24px` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.10em` | | uppercase | `true` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#1c1a17` | | border | `1px solid #1c1a17` | | padding | `12px 24px` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.10em` | | uppercase | `true` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#1c1a17` | | border | `1px solid rgba(28,26,23,0.18)` | | padding | `12px 24px` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.10em` | | uppercase | `true` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#6b675f` | | border | `none` | | padding | `12px 18px` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.10em` | | uppercase | `true` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1` | | fillOpacity | `0` | | gridlines | `false` | | barGap | `16px` | | highlight | `single` | | dotMarker | `false` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(28, 26, 23, 0.92)`, shadow: `0 4px 20px -8px rgba(28, 26, 23, 0.4)` - **focus** — outline: `1.5px solid #1c1a17`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#1c1a17`, color: `#e9e6df` #### Input - **hover** — border: `1px solid #1c1a17` - **focus** — border: `1px solid #1c1a17`, shadow: `0 1px 0 0 #1c1a17` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #1c1a17` #### Tab - **hover** — color: `#1c1a17` - **focus** — outline: `1.5px solid #1c1a17`, outline-offset: `3px` - **selected** — color: `#1c1a17`, border: `0 0 2px 0 solid #1c1a17` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#1c1a17`, underline `always` - **blockquote:** border `4px solid #1c1a17`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(28, 26, 23, 0.06)`, color `#1c1a17` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 13.93:1 | AA | AAA | — | | Body text on canvas | 12.32:1 | AA | AAA | — | | Muted text on surface | 4.52:1 | AA | AA | — | | Accent on surface | 13.93:1 | AA-Large | AAA | — | | Accent on canvas | 12.32:1 | AA-Large | AAA | — | --- # SYSTEM: Signal AI Source: https://www.freedesignmd.com/system/signal-ai --- name: "Signal AI" description: "Modern AI product surface without the clichés. Geist sans across the board, Geist Mono for prompts and metrics, very fine off-white surfaces with a 1px white inset highlight, a single muted electric-indigo accent reserved for the assistant's response state. Built for AI-first products that want to feel premium without leaning on rainbow gradients." tags: [ai, saas, minimal, premium, modern] colors: primary: "#0d0f12" secondary: "#646973" tertiary: "#0d0f12" neutral: "#eef0f3" surface: "#f7f8fa" typography: display: Geist body: Geist mono: "Geist Mono" scale: hero: "3.5rem / 1.04 / 600 / -0.035em" h1: "2.25rem / 1.14 / 600 / -0.025em" h2: "1.5rem / 1.3 / 600 / -0.018em" body: "0.9375rem / 1.6 / 400 / -0.005em" radius: sm: 5px md: 8px lg: 12px pill: 9999px shadows: card: "rgba(255,255,255,0.85) 0 1px 0 inset, rgba(13,15,18,0.04) 0 1px 2px, rgba(13,15,18,0.04) 0 0 0 1px" button: "rgba(255,255,255,0.10) 0 1px 0 inset, rgba(13,15,18,0.18) 0 1px 2px" borders: card: "1px solid rgba(13,15,18,0.06)" divider: rgba(13,15,18,0.08) buttons: primary: background: #0d0f12 color: #f7f8fa border: 1px solid rgba(0,0,0,0.4) shape: rounded padding: 9px 18px font: 500 / 0.8125rem shadow: rgba(255,255,255,0.10) 0 1px 0 inset, rgba(13,15,18,0.18) 0 1px 2px secondary: background: #ffffff color: #0d0f12 border: 1px solid rgba(13,15,18,0.10) shape: rounded padding: 9px 18px font: 500 / 0.8125rem shadow: rgba(13,15,18,0.04) 0 1px 2px outline: background: transparent color: #0d0f12 border: 1px solid rgba(13,15,18,0.16) shape: rounded padding: 9px 18px font: 500 / 0.8125rem ghost: background: transparent color: #646973 border: none shape: rounded padding: 9px 14px font: 500 / 0.8125rem charts: variant: line stroke_width: 1.75 fill_opacity: 0.08 gridlines: false bar_gap: 10px highlight: single dot_marker: true fonts_url: "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap" dependencies: ["lucide-react"] --- # Signal AI ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Signal AI** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#0d0f12`, text `#f7f8fa`, border `1px solid rgba(0,0,0,0.4)`, padding `9px 18px`, weight `500`, shadow `rgba(255,255,255,0.10) 0 1px 0 inset, rgba(13,15,18,0.18) 0 1px 2px`. - **Secondary** — rounded shape, bg `#ffffff`, text `#0d0f12`, border `1px solid rgba(13,15,18,0.10)`, padding `9px 18px`, weight `500`, shadow `rgba(13,15,18,0.04) 0 1px 2px`. - **Outline** — rounded shape, text `#0d0f12`, border `1px solid rgba(13,15,18,0.16)`, padding `9px 18px`, weight `500`. - **Ghost** — rounded shape, text `#646973`, padding `9px 14px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#f7f8fa` - Border: `1px solid rgba(13,15,18,0.06)` - Shadow: `rgba(255,255,255,0.85) 0 1px 0 inset, rgba(13,15,18,0.04) 0 1px 2px, rgba(13,15,18,0.04) 0 0 0 1px` - Radius: `radius.lg` (`12px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `pill`. Segmented control inside a tinted track. Active tab gets a filled pill in the accent color. #### Charts - Bar/line variant: `line` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Geist`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Geist`)** — paragraphs, labels, button text, form inputs. - **Mono (`Geist Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Signal AI is a modern AI product surface that refuses the clichés of its category. No rainbow gradient, no purple-pink mesh, no shimmering "thinking" animation. The page is fine off-white `#f7f8fa` with cards lifted to pure white, each card carrying a 1px white inset highlight at its top edge — the catch-light that makes the surface read as physical, not flat. Geist handles every text role; Geist Mono carries prompts, model names, latency metrics, and token counts. The single accent is muted electric-indigo `#5567ff` that appears only when the assistant is responding — the avatar dot, the streaming caret, the active model pill in the dropdown. Idle, the system is greyscale. The discipline is in the absence: no glow, no animation chrome, no second color. The accent earns its meaning by being reserved for one specific state. **Signature moves** - Indigo `#5567ff` only on the assistant-response state — avatar dot, streaming caret, active model pill - 1px white inset highlight on every card and primary button — the physical catch-light - Geist Mono with 0.04em uppercase tracking for every model name, latency, and token count - Pill tabs only in the prompt composer (model selector); section tabs are pill too — consistency - Off-white `#f7f8fa` page → pure white card — the tonal step is the only depth ## 2. Palette ### Surfaces - **Page** `#f7f8fa` — primary background (cool fine off-white) - **Card** `#ffffff` — elevated surface - **Bone** `#eef0f3` — secondary surfaces, code blocks, table headers ### Ink - **Ink** `#0d0f12` — text, headings, primary CTA fill - **Ink 60** `#646973` — secondary text, mono labels - **Hairline** `rgba(13,15,18,0.06)` — every card edge ### Accent - **Indigo** `#5567ff` — assistant-response state (avatar dot, streaming caret, active model pill, focus ring) - **Indigo Soft** `rgba(85,103,255,0.10)` — hovered model pill, focus ring background ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Geist | 56px | 600 | 1.04 | -0.035em | | H1 | Geist | 36px | 600 | 1.14 | -0.025em | | H2 | Geist | 24px | 600 | 1.3 | -0.018em | | Body | Geist | 15px | 400 | 1.6 | -0.005em | | UI / Button | Geist | 13px | 500 | 1.4 | 0 | | Prompt / Code | Geist Mono | 13px | 400 | 1.55 | 0 | | Metric Label | Geist Mono | 11px | 500 | 1.0 | 0.04em uppercase | | Latency / Tokens | Geist Mono | 12px | 500 | 1.0 | 0 tabular-nums | Geist Mono carries the technical voice — anything a model touches (prompt, response chunk, latency in ms, token count, model name) lives in mono. ## 4. Buttons ### Primary (Ink with Inset Highlight) ```css background: #0d0f12; color: #f7f8fa; padding: 9px 18px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.4); box-shadow: rgba(255,255,255,0.10) 0 1px 0 inset, rgba(13,15,18,0.18) 0 1px 2px; ``` The inset white highlight is the entire signature — without it the button reads as flat black. The dark border at 40% black above the inset is what gives the catch-light something to bend over. ### Secondary (Card White) - Pure white, 1px hairline at 10% ink, ink text — small 1px shadow ### Outline & Ghost - Outline: transparent, 1px hairline at 16% ink - Ghost: no border, ink-60, hover lifts to ink ## 5. Cards ```css background: #ffffff; border: 1px solid rgba(13,15,18,0.06); border-radius: 12px; box-shadow: rgba(255,255,255,0.85) 0 1px 0 inset, rgba(13,15,18,0.04) 0 1px 2px, rgba(13,15,18,0.04) 0 0 0 1px; ``` The 1px white inset highlight at the top is the catch-light — it sells the surface as physical glass rather than flat fill. The 1px outline shadow doubles the edge for crispness on retina. The active assistant card adds a 1px indigo top border — that is the only place indigo appears on a card edge. ## 6. Charts Line charts at 1.75px ink with an 8% indigo fill, ending in an indigo dot marker. The line is the primary chart variant — bars are reserved for token-usage breakdowns. NO gridlines. Y-axis labels in Geist Mono uppercase 11px aligned to the right edge. ## 7. Tabs Pill tabs in a tinted track. Active = white background with the same 1px inset highlight as cards, 1px indigo border, indigo text. Inactive = transparent, ink-60. The active pill carries its own catch-light — that's the consistency move. ## 8. Spacing - Base 4px - Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 80` - Section padding: 80px desktop, 40px mobile ## 9. Do's & don'ts ✅ **Do** - Reserve indigo for the assistant-response state — avatar dot, streaming caret, active model pill - Keep the 1px white inset highlight on every card and primary button — that's the physical catch-light - Put every prompt, latency, token count, and model name in Geist Mono - Hold the off-white page → pure white card tonal step ❌ **Don't** - Use a rainbow / purple-pink gradient — the entire category does this; you do not - Add an animated "thinking" shimmer — the indigo caret IS the response state - Use Geist Mono for prose body — mono is reserved for technical strings - Add a second accent color — indigo alone, on the assistant-response state only --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#0d0f12` | | secondary | `#646973` | | tertiary | `#0d0f12` | | neutral | `#eef0f3` | | surface | `#f7f8fa` | ### Typography - **Display:** Geist - **Body:** Geist - **Mono:** Geist Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 3.5rem / 1.04 / 600 / -0.035em | | H1 | 2.25rem / 1.14 / 600 / -0.025em | | H2 | 1.5rem / 1.3 / 600 / -0.018em | | Body | 0.9375rem / 1.6 / 400 / -0.005em | ### Radius - sm: `5px` - md: `8px` - lg: `12px` - pill: `9999px` ### Shadows - **card:** `rgba(255,255,255,0.85) 0 1px 0 inset, rgba(13,15,18,0.04) 0 1px 2px, rgba(13,15,18,0.04) 0 0 0 1px` - **button:** `rgba(255,255,255,0.10) 0 1px 0 inset, rgba(13,15,18,0.18) 0 1px 2px` ### Borders - **card:** `1px solid rgba(13,15,18,0.06)` - **divider:** `rgba(13,15,18,0.08)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#0d0f12` | | color | `#f7f8fa` | | border | `1px solid rgba(0,0,0,0.4)` | | padding | `9px 18px` | | fontWeight | `500` | | fontSize | `0.8125rem` | | shadow | `rgba(255,255,255,0.10) 0 1px 0 inset, rgba(13,15,18,0.18) 0 1px 2px` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#ffffff` | | color | `#0d0f12` | | border | `1px solid rgba(13,15,18,0.10)` | | padding | `9px 18px` | | fontWeight | `500` | | fontSize | `0.8125rem` | | shadow | `rgba(13,15,18,0.04) 0 1px 2px` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#0d0f12` | | border | `1px solid rgba(13,15,18,0.16)` | | padding | `9px 18px` | | fontWeight | `500` | | fontSize | `0.8125rem` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#646973` | | border | `none` | | padding | `9px 14px` | | fontWeight | `500` | | fontSize | `0.8125rem` | ### Charts | Property | Value | |----------|-------| | variant | `line` | | strokeWidth | `1.75` | | fillOpacity | `0.08` | | gridlines | `false` | | barGap | `10px` | | highlight | `single` | | dotMarker | `true` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 0 24px -4px rgba(13, 15, 18, 0.5), 0 8px 24px -8px rgba(0,0,0,0.6)`, filter: `brightness(1.1)` - **focus** — outline: `1.5px solid #0d0f12`, outline-offset: `3px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.92)` - **disabled** — opacity: `0.35`, filter: `saturate(0.4)` - **loading** — opacity: `0.6` - **selected** — bg: `#0d0f12`, color: `#0A0A0A` #### Input - **hover** — border: `1px solid rgba(13, 15, 18, 0.5)` - **focus** — border: `1px solid #0d0f12`, shadow: `0 0 0 3px rgba(13, 15, 18, 0.2)` - **disabled** — opacity: `0.35` - **error** — border: `1px solid #F87171`, shadow: `0 0 0 3px rgba(248,113,113,0.2)` #### Card - **hover** — shadow: `0 16px 40px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(13, 15, 18, 0.18)`, transform: `translateY(-2px)` - **selected** — border: `1px solid #0d0f12`, shadow: `0 0 0 1px #0d0f12` - **dragging** — shadow: `0 24px 60px -16px rgba(0,0,0,0.85)`, transform: `scale(1.02)`, opacity: `0.85` #### Tab - **hover** — color: `#0d0f12` - **focus** — outline: `1.5px solid #0d0f12`, outline-offset: `2px` - **selected** — color: `#0d0f12`, border: `0 0 1.5px 0 solid #0d0f12` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Glide.** Fließende, leicht beschleunigte Übergänge mit Accent-Glow auf hover. Premium-Feeling durch kontrollierte Lichtspiele. ```css transition: all 280ms cubic-bezier(0.32, 0.72, 0, 1); ``` | Token | Value | |-------|-------| | duration.instant | `100ms` | | duration.fast | `180ms` | | duration.base | `280ms` | | duration.slow | `450ms` | | easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.25, 0.55, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — Hairline mit Accent-Hauch. | | level1 | `0 2px 4px rgba(0,0,0,0.45)` | Subtle drop — list items. | | level2 | `0 12px 28px -8px rgba(0,0,0,0.6)` | Popover — vom Canvas gelöst. | | level3 | `0 20px 48px -12px rgba(0,0,0,0.7), 0 0 32px -8px rgba(13, 15, 18, 0.25)` | Sheet — Accent-Halo. | | level4 | `0 40px 96px -16px rgba(0,0,0,0.85), 0 0 64px -12px rgba(13, 15, 18, 0.4)` | Modal — voller Accent-Rim, dramatisch. | ### Content - **measure:** `66ch` (max line length for body prose) - **paragraph spacing:** `1.3em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#0d0f12`, underline `hover` - **blockquote:** border `2px solid #0d0f12`, padding `0.8em 1.2em` - **code:** background `rgba(13, 15, 18, 0.12)`, color `#0d0f12` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 18.06:1 | AA | AAA | — | | Body text on canvas | 16.81:1 | AA | AAA | — | | Muted text on surface | 5.19:1 | AA | AA | — | | Accent on surface | 18.06:1 | AA-Large | AAA | — | | Accent on canvas | 16.81:1 | AA-Large | AAA | — | --- # SYSTEM: Summit Canvas Source: https://www.freedesignmd.com/system/summit-canvas --- name: "Summit Canvas" description: "An expedition brand that earned its weather. Warm sand-canvas surfaces, Inter for prose, Fraunces small-caps for coordinates and elevations, a single deep pine accent on trail markers and the active route. Built for outdoor brands, gear retailers, and travel platforms that want gravitas without the moody-mountain photography cliché." tags: [outdoor, warm, minimal, premium, modern] colors: primary: "#1a1612" secondary: "#736b5e" tertiary: "#1a1612" neutral: "#e6dfd0" surface: "#efe8d8" typography: display: Inter body: Inter mono: "JetBrains Mono" scale: hero: "5rem / 1 / 700 / -0.035em" h1: "3rem / 1.1 / 700 / -0.025em" h2: "1.75rem / 1.22 / 600 / -0.015em" body: "1.0625rem / 1.65 / 400 / -0.005em" radius: sm: 2px md: 4px lg: 6px pill: 9999px shadows: card: "rgba(26,22,18,0.05) 0 1px 2px" button: none borders: card: "1px solid rgba(26,22,18,0.10)" divider: rgba(26,22,18,0.14) buttons: primary: background: #2d4a2b color: #efe8d8 border: none shape: rounded padding: 12px 22px font: 600 / 0.8125rem / 0.06em uppercase: true secondary: background: #e6dfd0 color: #1a1612 border: 1px solid rgba(26,22,18,0.14) shape: rounded padding: 12px 22px font: 600 / 0.8125rem / 0.06em uppercase: true outline: background: transparent color: #1a1612 border: 1px solid rgba(26,22,18,0.22) shape: rounded padding: 12px 22px font: 600 / 0.8125rem / 0.06em uppercase: true ghost: background: transparent color: #736b5e border: none shape: rounded padding: 12px 16px font: 600 / 0.8125rem / 0.06em uppercase: true charts: variant: line stroke_width: 1.5 fill_opacity: 0.06 gridlines: false bar_gap: 12px highlight: single dot_marker: true fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Summit Canvas ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Summit Canvas** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#2d4a2b`, text `#efe8d8`, padding `12px 22px`, weight `600`, uppercased. - **Secondary** — rounded shape, bg `#e6dfd0`, text `#1a1612`, border `1px solid rgba(26,22,18,0.14)`, padding `12px 22px`, weight `600`, uppercased. - **Outline** — rounded shape, text `#1a1612`, border `1px solid rgba(26,22,18,0.22)`, padding `12px 22px`, weight `600`, uppercased. - **Ghost** — rounded shape, text `#736b5e`, padding `12px 16px`, weight `600`, uppercased. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#efe8d8` - Border: `1px solid rgba(26,22,18,0.10)` - Shadow: `rgba(26,22,18,0.05) 0 1px 2px` - Radius: `radius.lg` (`6px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `line` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Inter`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Summit Canvas is an expedition brand that earned its weather. The page surface is warm sand-canvas `#efe8d8` — closer to a field notebook than to a marketing site. Headlines run in Inter at 700 weight, 80px, with -0.035em tracking — disciplined, never decorative. Body sits in Inter at 17px on a 1.65 leading. Coordinates, elevations, and trail names switch to JetBrains Mono in uppercase 0.06em — the topographic-map voice. The single accent is a deep pine `#2d4a2b` that appears only on the primary CTA, the active trail marker, and the chart line for elevation gain. The discipline is in the warmth without preciousness: sand-canvas, not white; pine, not forest; uppercase mono for coordinates, not for headlines. **Signature moves** - Sand-canvas surface `#efe8d8` — never white, never grey - Pine `#2d4a2b` only on primary CTA + active trail marker + elevation chart line - Coordinates always in JetBrains Mono uppercase 0.06em — topographic voice - All UI labels uppercase 0.06em — that's the trail-sign typography - Soft 4-6px corners — gear-tag rounded, not pill ## 2. Palette ### Surfaces - **Canvas** `#efe8d8` — page background (warm sand) - **Canvas Lift** `#e6dfd0` — secondary surfaces, secondary button - **Hairline** `rgba(26,22,18,0.10)` — every divider ### Ink - **Ink** `#1a1612` — text, headings (warm near-black) - **Ink 50** `#736b5e` — secondary text, mono labels ### Accent - **Pine** `#2d4a2b` — primary CTA, active trail marker, elevation chart - **Pine Soft** `rgba(45,74,43,0.12)` — focus ring, hovered tab background ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Inter | 80px | 700 | 1.0 | -0.035em | | H1 | Inter | 48px | 700 | 1.1 | -0.025em | | H2 | Inter | 28px | 600 | 1.22 | -0.015em | | Body | Inter | 17px | 400 | 1.65 | -0.005em | | UI / Button | Inter | 13px | 600 | 1.4 | 0.06em uppercase | | Coordinate / Elevation | JetBrains Mono | 12px | 500 | 1.0 | 0.06em uppercase tabular-nums | | Caption (Coord set) | Fraunces | 14px | 500 | 1.3 | 0 small-caps | Fraunces appears only as small-caps for coordinate set names ("North Cascades · 48°43'N 121°06'W") — that single typographic accent is the editorial voice. ## 4. Buttons ### Primary (Pine) ```css background: #2d4a2b; color: #efe8d8; padding: 12px 22px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; ``` ### Secondary (Canvas Lift) - `#e6dfd0` background, 1px hairline at 14% ink, ink text — same uppercase voice ### Outline & Ghost - Outline: transparent, 1px hairline at 22% ink - Ghost: no border, ink-50 uppercase, hover lifts to ink ## 5. Cards ```css background: #efe8d8; border: 1px solid rgba(26,22,18,0.10); border-radius: 6px; box-shadow: rgba(26,22,18,0.05) 0 1px 2px; ``` The single 1px shadow is the maximum lift. Featured trail cards (the active route) add a 2px pine left border — the trail-marker indicator borrowed from a topographic map. ## 6. Charts Line charts at 1.5px ink with a 6% pine fill, ending in a pine dot marker. The line variant is primary — used for elevation profiles. Bar charts are reserved for daily distance breakdowns. NO gridlines. Y-axis labels in JetBrains Mono uppercase 11px showing elevation in meters. ## 7. Tabs Underline 1.5px in pine for the active state. Inactive tabs are ink-50 in uppercase 0.06em. Hover = pine-soft background wash. ## 8. Spacing - Base 4px - Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96` - Section padding: 96px desktop, 48px mobile ## 9. Do's & don'ts ✅ **Do** - Hold the sand-canvas surface — white reads as gear-store, beige reads as luxury - Use pine `#2d4a2b` only on CTA + active trail + elevation line - Put every coordinate, elevation, distance in JetBrains Mono uppercase 0.06em - Use Fraunces small-caps only for coordinate set names — that's the field-notebook voice ❌ **Don't** - Use moody-mountain stock photography — the typography earns the gravitas - Use a second accent — pine alone, on three specific surfaces - Use sharp 0px or pill corners — soft 4-6px is the gear-tag voice - Use Inter under 600 on buttons — buttons must read as trail signs --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1a1612` | | secondary | `#736b5e` | | tertiary | `#1a1612` | | neutral | `#e6dfd0` | | surface | `#efe8d8` | ### Typography - **Display:** Inter - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 5rem / 1 / 700 / -0.035em | | H1 | 3rem / 1.1 / 700 / -0.025em | | H2 | 1.75rem / 1.22 / 600 / -0.015em | | Body | 1.0625rem / 1.65 / 400 / -0.005em | ### Radius - sm: `2px` - md: `4px` - lg: `6px` - pill: `9999px` ### Shadows - **card:** `rgba(26,22,18,0.05) 0 1px 2px` - **button:** `none` ### Borders - **card:** `1px solid rgba(26,22,18,0.10)` - **divider:** `rgba(26,22,18,0.14)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#2d4a2b` | | color | `#efe8d8` | | border | `none` | | padding | `12px 22px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.06em` | | uppercase | `true` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#e6dfd0` | | color | `#1a1612` | | border | `1px solid rgba(26,22,18,0.14)` | | padding | `12px 22px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.06em` | | uppercase | `true` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#1a1612` | | border | `1px solid rgba(26,22,18,0.22)` | | padding | `12px 22px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.06em` | | uppercase | `true` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#736b5e` | | border | `none` | | padding | `12px 16px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.06em` | | uppercase | `true` | ### Charts | Property | Value | |----------|-------| | variant | `line` | | strokeWidth | `1.5` | | fillOpacity | `0.06` | | gridlines | `false` | | barGap | `12px` | | highlight | `single` | | dotMarker | `true` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 4px 12px -2px rgba(15,23,42,0.18)`, filter: `brightness(0.97)` - **focus** — outline: `2px solid rgba(26, 22, 18, 0.5)`, outline-offset: `2px` - **active** — shadow: `0 1px 2px rgba(15,23,42,0.1)`, transform: `scale(0.98)` - **disabled** — opacity: `0.4`, filter: `saturate(0.5)` - **loading** — opacity: `0.7` - **selected** — bg: `#1a1612`, color: `#efe8d8` #### Input - **hover** — border: `1px solid rgba(26, 22, 18, 0.5)` - **focus** — border: `1.5px solid #1a1612`, shadow: `0 0 0 4px rgba(26, 22, 18, 0.15)` - **disabled** — bg: `rgba(26, 22, 18, 0.04)`, opacity: `0.4` - **error** — border: `1.5px solid #DC2626`, shadow: `0 0 0 4px rgba(220,38,38,0.15)` #### Card - **hover** — shadow: `0 12px 28px -12px rgba(15,23,42,0.18)`, transform: `translateY(-2px)` - **selected** — bg: `rgba(26, 22, 18, 0.04)`, border: `1.5px solid #1a1612` - **dragging** — shadow: `0 20px 48px -16px rgba(15,23,42,0.3)`, transform: `scale(1.02) rotate(-0.5deg)`, opacity: `0.9` #### Tab - **hover** — bg: `rgba(26, 22, 18, 0.06)`, color: `#1a1612` - **focus** — outline: `2px solid rgba(26, 22, 18, 0.5)`, outline-offset: `2px` - **selected** — color: `#1a1612`, border: `0 0 2px 0 solid #1a1612` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Quiet ease.** 240 ms ease-out for all standard transitions. Reliable, invisible — motion stays out of the way. ```css transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `160ms` | | duration.base | `240ms` | | duration.slow | `380ms` | | easing.standard | `cubic-bezier(0.4, 0, 0.2, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.34, 1.4, 0.64, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — hairline border separates. | | level1 | `0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04)` | List rows, resting cards. | | level2 | `0 4px 12px -2px rgba(15,23,42,0.1), 0 2px 6px rgba(15,23,42,0.06)` | Hover cards, popover. | | level3 | `0 12px 32px -8px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.08)` | Sheets, side panels. | | level4 | `0 28px 64px -16px rgba(15,23,42,0.28), 0 8px 24px rgba(15,23,42,0.12)` | Modals — scrim required. | ### Content - **measure:** `68ch` (max line length for body prose) - **paragraph spacing:** `1.2em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#1a1612`, underline `hover` - **blockquote:** border `3px solid rgba(26, 22, 18, 0.6)`, padding `0.5em 0 0.5em 1.25em` - **code:** background `rgba(26, 22, 18, 0.06)`, color `#1a1612` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 14.74:1 | AA | AAA | — | | Body text on canvas | 13.56:1 | AA | AAA | — | | Muted text on surface | 4.31:1 | AA | AA-Large | `#6d6659` → 4.66:1 (AA) | | Accent on surface | 14.74:1 | AA-Large | AAA | — | | Accent on canvas | 13.56:1 | AA-Large | AAA | — | --- # SYSTEM: Clinic Pearl Source: https://www.freedesignmd.com/system/clinic-pearl --- name: "Clinic Pearl" description: "Clinical software that doesn't feel clinical. Cool pearl off-white surfaces with hairline-only chrome, Manrope for prose, IBM Plex Mono with tabular numerals for vital signs and dosages, a single deep teal accent reserved for the active patient pane. Built for healthcare platforms, clinical SaaS, and any product where calm authority matters more than personality." tags: [healthcare, clinical, minimal, premium, saas] colors: primary: "#0e1f2a" secondary: "#5a6770" tertiary: "#0e1f2a" neutral: "#eaeef1" surface: "#f5f7f9" typography: display: Manrope body: Manrope mono: "IBM Plex Mono" scale: hero: "3.25rem / 1.06 / 700 / -0.03em" h1: "2.125rem / 1.16 / 700 / -0.022em" h2: "1.4375rem / 1.3 / 600 / -0.012em" body: "0.9375rem / 1.6 / 400 / -0.005em" radius: sm: 4px md: 8px lg: 12px pill: 9999px shadows: card: "rgba(14,31,42,0.04) 0 1px 2px" button: none borders: card: "1px solid rgba(14,31,42,0.08)" divider: rgba(14,31,42,0.08) buttons: primary: background: #0e1f2a color: #f5f7f9 border: none shape: rounded padding: 10px 20px font: 600 / 0.8125rem secondary: background: #ffffff color: #0e1f2a border: 1px solid rgba(14,31,42,0.12) shape: rounded padding: 10px 20px font: 600 / 0.8125rem outline: background: transparent color: #0e1f2a border: 1px solid rgba(14,31,42,0.18) shape: rounded padding: 10px 20px font: 600 / 0.8125rem ghost: background: transparent color: #5a6770 border: none shape: rounded padding: 10px 16px font: 600 / 0.8125rem charts: variant: line stroke_width: 1.5 fill_opacity: 0.06 gridlines: true bar_gap: 10px highlight: single dot_marker: true fonts_url: "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" dependencies: ["lucide-react"] --- # Clinic Pearl ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Clinic Pearl** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#0e1f2a`, text `#f5f7f9`, padding `10px 20px`, weight `600`. - **Secondary** — rounded shape, bg `#ffffff`, text `#0e1f2a`, border `1px solid rgba(14,31,42,0.12)`, padding `10px 20px`, weight `600`. - **Outline** — rounded shape, text `#0e1f2a`, border `1px solid rgba(14,31,42,0.18)`, padding `10px 20px`, weight `600`. - **Ghost** — rounded shape, text `#5a6770`, padding `10px 16px`, weight `600`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#f5f7f9` - Border: `1px solid rgba(14,31,42,0.08)` - Shadow: `rgba(14,31,42,0.04) 0 1px 2px` - Radius: `radius.lg` (`12px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `line` - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Manrope`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Manrope`)** — paragraphs, labels, button text, form inputs. - **Mono (`IBM Plex Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Clinic Pearl is clinical software that refuses to feel clinical. The page surface is cool pearl off-white `#f5f7f9` with cards lifted to pure white — every surface differing by 1-2% lightness. Manrope handles prose with its calm geometric soft-cornered glyphs. IBM Plex Mono with tabular numerals carries every vital sign, dosage, and timestamp so columns of figures align to the pixel. Chrome is hairlines at 8% ink. The single accent is deep teal `#0a6970` — never bright, never aqua — used only on the active patient pane border, the chart line for the active vital, and the focus ring. The discipline is in the calm authority: cool surfaces, soft Manrope, mono numerals, and one teal accent that reads as "current focus" without ever shouting. **Signature moves** - IBM Plex Mono with `font-variant-numeric: tabular-nums` on every vital, dose, timestamp - Deep teal `#0a6970` only on the active patient pane border + active vital line + focus ring - Pearl off-white `#f5f7f9` page → pure white card — tonal-shift, not shadow-driven - Hairline-only chrome at 8% ink — no shadows beyond the 1px lift - Manrope at 600/700 for headings — soft authority, never bold-stamped ## 2. Palette ### Surfaces - **Pearl** `#f5f7f9` — page background (cool fine off-white) - **Card** `#ffffff` — elevated surface - **Bone** `#eaeef1` — table headers, secondary surfaces ### Ink - **Ink** `#0e1f2a` — text, headings, primary CTA fill (warm-cool near-black, slight blue undertone) - **Ink 50** `#5a6770` — secondary text, mono labels - **Hairline** `rgba(14,31,42,0.08)` — every divider ### Accent - **Teal** `#0a6970` — active patient pane border, active vital line, focus ring - **Teal Soft** `rgba(10,105,112,0.10)` — hovered pane background, focus ring background ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Manrope | 52px | 700 | 1.06 | -0.03em | | H1 | Manrope | 34px | 700 | 1.16 | -0.022em | | H2 | Manrope | 23px | 600 | 1.3 | -0.012em | | Body | Manrope | 15px | 400 | 1.6 | -0.005em | | UI / Button | Manrope | 13px | 600 | 1.4 | 0 | | Vital / KPI | IBM Plex Mono | 28px | 600 | 1.0 | 0 tabular-nums | | Dosage | IBM Plex Mono | 14px | 500 | 1.0 | 0 tabular-nums | | Label | IBM Plex Mono | 11px | 500 | 1.0 | 0.06em uppercase | Plex Mono everywhere a number lives — vitals, dosages, lab values, timestamps. The tabular-nums variant is what makes the system read as serious clinical software vs. consumer health. ## 4. Buttons ### Primary (Ink) ```css background: #0e1f2a; color: #f5f7f9; padding: 10px 20px; border-radius: 8px; font-weight: 600; ``` ### Secondary (Card White) - Pure white, 1px hairline at 12% ink, ink text — same shape, same padding ### Outline & Ghost - Outline: transparent, 1px hairline at 18% ink - Ghost: no border, ink-50, hover lifts to ink ## 5. Cards ```css background: #ffffff; border: 1px solid rgba(14,31,42,0.08); border-radius: 12px; box-shadow: rgba(14,31,42,0.04) 0 1px 2px; ``` The single 1px shadow is the maximum lift. The active patient pane adds a 1px teal top border — that is the only place teal appears as a card edge. ## 6. Charts Line charts at 1.5px ink with a 6% teal fill, ending in a teal dot marker. The line variant is primary — used for vital trends. Dashed gridlines at 6% ink. Y-axis labels in IBM Plex Mono uppercase 11px showing units (mmHg, bpm, mg/dL). ## 7. Tabs Underline 1.5px in teal for the active state. Inactive tabs are ink-50 in Manrope 600. Hover = teal-soft background wash. Tabs sit on a 1px hairline baseline. ## 8. Spacing - Base 4px (chart-row aware) - Scale: `4, 8, 12, 16, 20, 24, 32, 40, 56, 80` - Section padding: 80px desktop, 32px mobile ## 9. Do's & don'ts ✅ **Do** - Use IBM Plex Mono with tabular-nums on every vital, dose, lab value - Reserve teal for the active patient pane + active vital line + focus ring only - Hold the pearl page → white card tonal step — no decorative depth - Keep all card chrome to 1px hairline + 1px shadow ❌ **Don't** - Use bright aqua / cyan — teal at `#0a6970` is muted on purpose, not "clinical bright" - Use red/yellow/green for status without consideration — clinical color carries diagnostic weight - Use a second accent — teal alone, on three specific surfaces - Use proportional figures for clinical data — tabular-nums always --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#0e1f2a` | | secondary | `#5a6770` | | tertiary | `#0e1f2a` | | neutral | `#eaeef1` | | surface | `#f5f7f9` | ### Typography - **Display:** Manrope - **Body:** Manrope - **Mono:** IBM Plex Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 3.25rem / 1.06 / 700 / -0.03em | | H1 | 2.125rem / 1.16 / 700 / -0.022em | | H2 | 1.4375rem / 1.3 / 600 / -0.012em | | Body | 0.9375rem / 1.6 / 400 / -0.005em | ### Radius - sm: `4px` - md: `8px` - lg: `12px` - pill: `9999px` ### Shadows - **card:** `rgba(14,31,42,0.04) 0 1px 2px` - **button:** `none` ### Borders - **card:** `1px solid rgba(14,31,42,0.08)` - **divider:** `rgba(14,31,42,0.08)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#0e1f2a` | | color | `#f5f7f9` | | border | `none` | | padding | `10px 20px` | | fontWeight | `600` | | fontSize | `0.8125rem` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#ffffff` | | color | `#0e1f2a` | | border | `1px solid rgba(14,31,42,0.12)` | | padding | `10px 20px` | | fontWeight | `600` | | fontSize | `0.8125rem` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#0e1f2a` | | border | `1px solid rgba(14,31,42,0.18)` | | padding | `10px 20px` | | fontWeight | `600` | | fontSize | `0.8125rem` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#5a6770` | | border | `none` | | padding | `10px 16px` | | fontWeight | `600` | | fontSize | `0.8125rem` | ### Charts | Property | Value | |----------|-------| | variant | `line` | | strokeWidth | `1.5` | | fillOpacity | `0.06` | | gridlines | `true` | | barGap | `10px` | | highlight | `single` | | dotMarker | `true` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(14, 31, 42, 0.15)`, color: `#0e1f2a`, border: `1px solid #0e1f2a` - **focus** — outline: `1px dashed #0e1f2a`, outline-offset: `2px` - **active** — bg: `#0e1f2a`, color: `#f5f7f9` - **disabled** — opacity: `0.35` - **loading** — opacity: `0.6` - **selected** — bg: `#0e1f2a`, color: `#f5f7f9` #### Input - **hover** — border: `1px solid rgba(14, 31, 42, 0.5)` - **focus** — bg: `rgba(14, 31, 42, 0.05)`, border: `1px solid #0e1f2a` - **disabled** — opacity: `0.35` - **error** — bg: `rgba(239,68,68,0.05)`, border: `1px solid #EF4444` #### Card - **hover** — border: `1px solid #0e1f2a` - **selected** — bg: `rgba(14, 31, 42, 0.05)`, border: `1px solid #0e1f2a` - **dragging** — opacity: `0.7` #### Tab - **hover** — color: `#0e1f2a` - **focus** — outline: `1px dashed #0e1f2a`, outline-offset: `1px` - **selected** — bg: `rgba(14, 31, 42, 0.1)`, color: `#0e1f2a` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Cursor blink.** Discrete, often stepped transitions. Like a terminal cursor: on or off. Response under 120 ms. ```css transition: all 120ms linear; ``` | Token | Value | |-------|-------| | duration.instant | `0ms` | | duration.fast | `60ms` | | duration.base | `120ms` | | duration.slow | `200ms` | | easing.standard | `linear` | | easing.decelerate | `linear` | | easing.accelerate | `linear` | | easing.spring | `steps(2, end)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the stroke carries the hierarchy. | | level1 | `none` | Border tone lifts the surface. | | level2 | `0 0 0 1px rgba(14, 31, 42, 0.5)` | Ring outline — popover. | | level3 | `0 0 0 1px #0e1f2a, 0 12px 32px -16px rgba(14, 31, 42, 0.4)` | Sheet with accent ring + glow. | | level4 | `0 0 0 1px #0e1f2a, 0 24px 64px -20px rgba(14, 31, 42, 0.5)` | Modal with accent ring + glow. | ### Content - **measure:** `78ch` (max line length for body prose) - **paragraph spacing:** `1em` - **list indent:** `1.25em` - **list gap:** `0.35em` - **link:** color `#0e1f2a`, underline `always` - **blockquote:** border `1px solid rgba(14, 31, 42, 0.5)`, padding `0.7em 1em` - **code:** background `rgba(14, 31, 42, 0.12)`, color `#0e1f2a` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 15.67:1 | AA | AAA | — | | Body text on canvas | 14.42:1 | AA | AAA | — | | Muted text on surface | 5.42:1 | AA | AA | — | | Accent on surface | 15.67:1 | AA-Large | AAA | — | | Accent on canvas | 14.42:1 | AA-Large | AAA | — | --- # SYSTEM: Vestige Folio Source: https://www.freedesignmd.com/system/vestige-folio --- name: "Vestige Folio" description: "Fashion editorial that doesn't shout. Off-bone surfaces, Playfair Display 400 for product names at oversized scale, Inter for body and UI, generous negative space, and a single muted oxblood accent reserved for the Add-to-Bag CTA. Built for fashion houses, jewellery brands, and high-end retail that wants the catalogue feel of a glossy quarterly." tags: [editorial, fashion, ecommerce, premium, minimal] colors: primary: "#1a1612" secondary: "#797268" tertiary: "#1a1612" neutral: "#ece6d8" surface: "#f4eee0" typography: display: "Playfair Display" body: Inter mono: "JetBrains Mono" scale: hero: "7rem / 0.94 / 400 / -0.04em" h1: "4rem / 1 / 400 / -0.03em" h2: "1.875rem / 1.2 / 400 / -0.018em" body: "1rem / 1.7 / 400 / -0.005em" radius: sm: 0px md: 0px lg: 0px pill: 9999px shadows: card: none button: none borders: card: "1px solid rgba(26,22,18,0.10)" divider: rgba(26,22,18,0.14) buttons: primary: background: #5a1a22 color: #f4eee0 border: none shape: sharp padding: 14px 28px font: 500 / 0.8125rem / 0.14em uppercase: true secondary: background: transparent color: #1a1612 border: 1px solid #1a1612 shape: sharp padding: 14px 28px font: 500 / 0.8125rem / 0.14em uppercase: true outline: background: transparent color: #1a1612 border: 1px solid rgba(26,22,18,0.18) shape: sharp padding: 14px 28px font: 500 / 0.8125rem / 0.14em uppercase: true ghost: background: transparent color: #797268 border: none shape: sharp padding: 14px 18px font: 500 / 0.8125rem / 0.14em uppercase: true charts: variant: "thin-bars" stroke_width: 1 fill_opacity: 0 gridlines: false bar_gap: 18px highlight: single dot_marker: false fonts_url: "https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Vestige Folio ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Vestige Folio** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#5a1a22`, text `#f4eee0`, padding `14px 28px`, weight `500`, uppercased. - **Secondary** — sharp shape, text `#1a1612`, border `1px solid #1a1612`, padding `14px 28px`, weight `500`, uppercased. - **Outline** — sharp shape, text `#1a1612`, border `1px solid rgba(26,22,18,0.18)`, padding `14px 28px`, weight `500`, uppercased. - **Ghost** — sharp shape, text `#797268`, padding `14px 18px`, weight `500`, uppercased. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#f4eee0` - Border: `1px solid rgba(26,22,18,0.10)` - Shadow: `none` - Radius: `radius.lg` (`0px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `thin-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Playfair Display`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Vestige Folio is the visual language of a glossy fashion quarterly. The page surface is off-bone `#f4eee0` — closer to coated catalogue stock than to white. Product names run in Playfair Display at 112px, weight 400 — the high-contrast didone strokes earning their drama from sheer scale, never weight. Body sits in Inter at 16px on a 1.7 leading. UI labels run in Inter 500 with extreme 0.14em uppercase tracking — the catalogue-caption voice carried into every button. The single accent is muted oxblood `#5a1a22` that appears only on the Add-to-Bag CTA — the singular conversion moment in the entire system gets the singular color. The discipline is in the proportion: massive Playfair on bone, generous negative space, and one oxblood button per page that doesn't apologize for being a button. **Signature moves** - Playfair Display 400 at 112px for product names — drama through scale, never weight - Off-bone catalogue surface `#f4eee0` — never white, never beige - Oxblood `#5a1a22` exclusively on the Add-to-Bag CTA — one conversion, one color - All UI labels uppercase 0.14em tracking — the catalogue caption voice - Sharp 0px radius — print rules - Generous negative space (160px section padding) — the air IS the luxury ## 2. Palette ### Surfaces - **Bone** `#f4eee0` — page background (warm catalogue stock) - **Bone Lift** `#ece6d8` — secondary surfaces, lookbook panels - **Hairline** `rgba(26,22,18,0.10)` — every divider ### Ink - **Ink** `#1a1612` — text, headings, secondary CTA fill - **Ink 50** `#797268` — secondary text, mono captions ### Accent - **Oxblood** `#5a1a22` — Add-to-Bag CTA only - That is the only color in the system. ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Product Name (Hero) | Playfair Display | 112px | 400 | 0.94 | -0.04em | | H1 | Playfair Display | 64px | 400 | 1.0 | -0.03em | | H2 | Playfair Display | 30px | 400 | 1.2 | -0.018em | | Pull Quote | Playfair Display (italic) | 28px | 400 | 1.3 | -0.012em | | Body | Inter | 16px | 400 | 1.7 | -0.005em | | UI / Button | Inter | 13px | 500 | 1.4 | 0.14em uppercase | | Caption / Price | JetBrains Mono | 11px | 500 | 1.0 | 0.10em uppercase tabular-nums | | Price Display | JetBrains Mono | 16px | 500 | 1.0 | 0 tabular-nums | Playfair only at 400 — the high-contrast didone breaks at any heavier weight. Italic reserved for pull quotes from the season's editor letter. ## 4. Buttons ### Primary (Oxblood — Add to Bag only) ```css background: #5a1a22; color: #f4eee0; padding: 14px 28px; border-radius: 0; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500; ``` The 0.14em tracking is wider than typical UI — that is the catalogue caption voice carried into the button. ### Secondary (Ink Outline — every other action) - Transparent, 1px solid ink, ink text — same sharp shape, same wide tracking ### Outline & Ghost - Outline: transparent, 1px hairline at 18% ink - Ghost: no border, ink-50 uppercase, hover underlines ## 5. Cards ```css background: #f4eee0; border: 1px solid rgba(26,22,18,0.10); border-radius: 0; box-shadow: none; ``` NO shadows, NO radii, NO inset highlights. Lookbook cards lift to bone-lift surface and add a 1px ink top border (3px wide) — that is the only chrome. ## 6. Charts Thin precise bars (3px wide, 18px gap). One bar in oxblood, others in 18% ink. NO gridlines. Y-axis labels in JetBrains Mono uppercase 11px. Charts are reserved for sales-by-collection breakdowns — they read as exhibit panels, not infographics. ## 7. Tabs Underline 1px in ink for the active state. Inactive tabs are ink-50 in uppercase 0.14em. Hover = ink text, no underline. The active label is set in Playfair Display italic at the same size — that's the rhythm change. ## 8. Spacing - Base 8px - Scale: `8, 16, 24, 32, 48, 64, 96, 128, 160, 200` - Section padding: 160px desktop, 80px mobile — the air IS the luxury ## 9. Do's & don'ts ✅ **Do** - Use Playfair Display at 400 only — anything heavier breaks the high-contrast didone - Hold the oxblood for Add-to-Bag exclusively — one CTA, one color - Use 0.14em uppercase tracking on every UI label — that's the catalogue voice - Keep generous negative space — section padding 160px desktop is non-negotiable ❌ **Don't** - Use Playfair at 600+ — bold breaks the didone proportion - Use sharp coloured fills on secondary buttons — only oxblood, only Add-to-Bag - Use any radius — sharp 0px is the print rule - Use a second accent — oxblood alone, on the conversion CTA only --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1a1612` | | secondary | `#797268` | | tertiary | `#1a1612` | | neutral | `#ece6d8` | | surface | `#f4eee0` | ### Typography - **Display:** Playfair Display - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 7rem / 0.94 / 400 / -0.04em | | H1 | 4rem / 1 / 400 / -0.03em | | H2 | 1.875rem / 1.2 / 400 / -0.018em | | Body | 1rem / 1.7 / 400 / -0.005em | ### Radius - sm: `0px` - md: `0px` - lg: `0px` - pill: `9999px` ### Shadows - **card:** `none` - **button:** `none` ### Borders - **card:** `1px solid rgba(26,22,18,0.10)` - **divider:** `rgba(26,22,18,0.14)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#5a1a22` | | color | `#f4eee0` | | border | `none` | | padding | `14px 28px` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.14em` | | uppercase | `true` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#1a1612` | | border | `1px solid #1a1612` | | padding | `14px 28px` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.14em` | | uppercase | `true` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#1a1612` | | border | `1px solid rgba(26,22,18,0.18)` | | padding | `14px 28px` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.14em` | | uppercase | `true` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#797268` | | border | `none` | | padding | `14px 18px` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.14em` | | uppercase | `true` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1` | | fillOpacity | `0` | | gridlines | `false` | | barGap | `18px` | | highlight | `single` | | dotMarker | `false` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(26, 22, 18, 0.92)`, shadow: `0 4px 20px -8px rgba(26, 22, 18, 0.4)` - **focus** — outline: `1.5px solid #1a1612`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#1a1612`, color: `#f4eee0` #### Input - **hover** — border: `1px solid #1a1612` - **focus** — border: `1px solid #1a1612`, shadow: `0 1px 0 0 #1a1612` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #1a1612` #### Tab - **hover** — color: `#1a1612` - **focus** — outline: `1.5px solid #1a1612`, outline-offset: `3px` - **selected** — color: `#1a1612`, border: `0 0 2px 0 solid #1a1612` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#1a1612`, underline `always` - **blockquote:** border `4px solid #1a1612`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(26, 22, 18, 0.06)`, color `#1a1612` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 15.55:1 | AA | AAA | — | | Body text on canvas | 14.46:1 | AA | AAA | — | | Muted text on surface | 4.11:1 | AA | AA-Large | `#6e685f` → 4.77:1 (AA) | | Accent on surface | 15.55:1 | AA-Large | AAA | — | | Accent on canvas | 14.46:1 | AA-Large | AAA | — | --- # SYSTEM: Thesis Quarterly Source: https://www.freedesignmd.com/system/thesis-quarterly --- name: "Thesis Quarterly" description: "An academic journal that lives well online. Cream-paper surfaces, Source Serif 4 for body running text, IBM Plex Mono for footnote numerals and citations, a single deep cobalt accent reserved for the active citation link. Built for research publications, scientific journals, and long-form scholarly content." tags: [academic, editorial, minimal, premium, warm] colors: primary: "#1a1814" secondary: "#6e6960" tertiary: "#1a1814" neutral: "#ebe5d4" surface: "#f4eedb" typography: display: "Source Serif 4" body: "Source Serif 4" mono: "IBM Plex Mono" scale: hero: "4.5rem / 1.04 / 600 / -0.025em" h1: "2.75rem / 1.12 / 600 / -0.02em" h2: "1.625rem / 1.3 / 600 / -0.012em" body: "1.125rem / 1.7 / 400 / -0.005em" radius: sm: 2px md: 3px lg: 5px pill: 9999px shadows: card: "rgba(26,24,20,0.04) 0 1px 2px" button: none borders: card: "1px solid rgba(26,24,20,0.10)" divider: rgba(26,24,20,0.14) buttons: primary: background: #1a1814 color: #f4eedb border: none shape: rounded padding: 11px 22px font: 600 / 0.875rem secondary: background: #ebe5d4 color: #1a1814 border: 1px solid rgba(26,24,20,0.14) shape: rounded padding: 11px 22px font: 600 / 0.875rem outline: background: transparent color: #1a1814 border: 1px solid rgba(26,24,20,0.20) shape: rounded padding: 11px 22px font: 600 / 0.875rem ghost: background: transparent color: #6e6960 border: none shape: rounded padding: 11px 16px font: 600 / 0.875rem charts: variant: "thin-bars" stroke_width: 1.25 fill_opacity: 0.06 gridlines: true bar_gap: 12px highlight: single dot_marker: false fonts_url: "https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap" dependencies: ["lucide-react"] --- # Thesis Quarterly ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Thesis Quarterly** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#1a1814`, text `#f4eedb`, padding `11px 22px`, weight `600`. - **Secondary** — rounded shape, bg `#ebe5d4`, text `#1a1814`, border `1px solid rgba(26,24,20,0.14)`, padding `11px 22px`, weight `600`. - **Outline** — rounded shape, text `#1a1814`, border `1px solid rgba(26,24,20,0.20)`, padding `11px 22px`, weight `600`. - **Ghost** — rounded shape, text `#6e6960`, padding `11px 16px`, weight `600`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#f4eedb` - Border: `1px solid rgba(26,24,20,0.10)` - Shadow: `rgba(26,24,20,0.04) 0 1px 2px` - Radius: `radius.lg` (`5px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `thin-bars` - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Source Serif 4`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Source Serif 4`)** — paragraphs, labels, button text, form inputs. - **Mono (`IBM Plex Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Thesis Quarterly is an academic journal that lives well on the web. The page surface is cream paper `#f4eedb` — closer to uncoated journal stock than to white. Body runs in Source Serif 4 at 18px on a 1.7 leading — large enough to be read for an hour, with optical sizing that opens the glyphs at body size and tightens them in display. Footnote numerals, DOIs, citation references, and figure numbers all switch to IBM Plex Mono. The single accent is deep cobalt `#1d3f8a` that appears only on active citation links — the rest of the document is ink on cream. The discipline is in the reading rhythm: serif body at generous size and leading, mono-numbered footnotes in the margin, and one cobalt link colour that earns its meaning by being the only colour. **Signature moves** - Source Serif 4 at 18px / 1.7 leading for body — designed for hour-long reading - IBM Plex Mono for every footnote numeral, DOI, citation reference - Cobalt `#1d3f8a` only on active citation links — the only colour in the system - Marginalia in mono at 11px uppercase — page numbers, footnote refs, dateline - Soft 3-5px corners — the journal-card voice, never sharp, never pill ## 2. Palette ### Surfaces - **Cream** `#f4eedb` — page background (warm uncoated journal stock) - **Cream Lift** `#ebe5d4` — secondary surfaces, table headers, footnote bands - **Hairline** `rgba(26,24,20,0.10)` — every divider ### Ink - **Ink** `#1a1814` — text, headings, primary CTA fill - **Ink 50** `#6e6960` — secondary text, mono marginalia ### Accent - **Cobalt** `#1d3f8a` — active citation link, chart highlight - **Cobalt Soft** `rgba(29,63,138,0.10)` — hovered citation background ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Source Serif 4 | 72px | 600 | 1.04 | -0.025em | | H1 | Source Serif 4 | 44px | 600 | 1.12 | -0.02em | | H2 | Source Serif 4 | 26px | 600 | 1.3 | -0.012em | | Body | Source Serif 4 | 18px | 400 | 1.7 | -0.005em | | Pull Quote | Source Serif 4 (italic) | 22px | 400 | 1.4 | -0.01em | | UI / Button | IBM Plex Mono | 13px | 600 | 1.4 | 0 | | Footnote Numeral | IBM Plex Mono | 11px | 600 | 1.0 | 0 tabular-nums superscript | | Marginalia | IBM Plex Mono | 11px | 500 | 1.0 | 0.08em uppercase | | DOI / Citation | IBM Plex Mono | 12px | 500 | 1.0 | 0 tabular-nums | Source Serif 4 uses optical sizing — at 72px the strokes gain weight, at 18px body they open up for legibility. IBM Plex Mono carries every numbered or technical string. Buttons run in mono — that's the academic-press voice carried into UI. ## 4. Buttons ### Primary (Ink with Mono Label) ```css background: #1a1814; color: #f4eedb; padding: 11px 22px; border-radius: 3px; font-family: "IBM Plex Mono"; font-weight: 600; ``` Mono on the button label is the entire signature — buttons read as filing-card actions ("Read Full Paper", "Cite This Article"). ### Secondary (Cream Lift) - `#ebe5d4` background, 1px hairline at 14% ink, ink text in mono — same shape, same padding ### Outline & Ghost - Outline: transparent, 1px hairline at 20% ink - Ghost: no border, ink-50 mono, hover underlines ## 5. Cards ```css background: #f4eedb; border: 1px solid rgba(26,24,20,0.10); border-radius: 5px; box-shadow: rgba(26,24,20,0.04) 0 1px 2px; ``` The single 1px shadow is the maximum lift. Featured papers (the issue's lead article) lift to cream-lift surface with a 2px ink top border — the lead-article rule. ## 6. Charts Thin precise bars (3px wide, 12px gap) with dashed gridlines at 8% ink. One bar in cobalt, others in 22% ink. Line charts at 1.25px ink with a 6% cobalt fill. Y-axis labels in IBM Plex Mono uppercase 11px set in the left margin. Figure captions in italic Source Serif 4 14px below. ## 7. Tabs Underline 1.5px in cobalt for the active state. Inactive tabs are ink-50 in IBM Plex Mono 500. Hover = cobalt-soft background wash. Tabs sit on a 1px hairline baseline. ## 8. Spacing - Base 4px (column-aware) - Scale: `4, 8, 12, 16, 24, 32, 48, 64, 96, 128` - Section padding: 128px desktop, 64px mobile - Body column max-width: 680px — the optimal reading measure for 18px serif ## 9. Do's & don'ts ✅ **Do** - Use Source Serif 4 at 18px / 1.7 leading for body — that's the hour-long-reading measure - Put every footnote numeral, DOI, figure number in IBM Plex Mono - Reserve cobalt for active citation links + chart highlight only - Hold body column to ~680px — wider columns break the reading rhythm ❌ **Don't** - Use sans-serif body — the entire system is serif body, mono numerals - Use a second accent — cobalt alone, on links and the chart - Use card shadows beyond the 1px lift — paper, not cards - Use sharp 0px corners — soft 3-5px is the journal-card voice --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1a1814` | | secondary | `#6e6960` | | tertiary | `#1a1814` | | neutral | `#ebe5d4` | | surface | `#f4eedb` | ### Typography - **Display:** Source Serif 4 - **Body:** Source Serif 4 - **Mono:** IBM Plex Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.5rem / 1.04 / 600 / -0.025em | | H1 | 2.75rem / 1.12 / 600 / -0.02em | | H2 | 1.625rem / 1.3 / 600 / -0.012em | | Body | 1.125rem / 1.7 / 400 / -0.005em | ### Radius - sm: `2px` - md: `3px` - lg: `5px` - pill: `9999px` ### Shadows - **card:** `rgba(26,24,20,0.04) 0 1px 2px` - **button:** `none` ### Borders - **card:** `1px solid rgba(26,24,20,0.10)` - **divider:** `rgba(26,24,20,0.14)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#1a1814` | | color | `#f4eedb` | | border | `none` | | padding | `11px 22px` | | fontWeight | `600` | | fontSize | `0.875rem` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#ebe5d4` | | color | `#1a1814` | | border | `1px solid rgba(26,24,20,0.14)` | | padding | `11px 22px` | | fontWeight | `600` | | fontSize | `0.875rem` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#1a1814` | | border | `1px solid rgba(26,24,20,0.20)` | | padding | `11px 22px` | | fontWeight | `600` | | fontSize | `0.875rem` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#6e6960` | | border | `none` | | padding | `11px 16px` | | fontWeight | `600` | | fontSize | `0.875rem` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1.25` | | fillOpacity | `0.06` | | gridlines | `true` | | barGap | `12px` | | highlight | `single` | | dotMarker | `false` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(26, 24, 20, 0.92)`, shadow: `0 4px 20px -8px rgba(26, 24, 20, 0.4)` - **focus** — outline: `1.5px solid #1a1814`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#1a1814`, color: `#f4eedb` #### Input - **hover** — border: `1px solid #1a1814` - **focus** — border: `1px solid #1a1814`, shadow: `0 1px 0 0 #1a1814` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #1a1814` #### Tab - **hover** — color: `#1a1814` - **focus** — outline: `1.5px solid #1a1814`, outline-offset: `3px` - **selected** — color: `#1a1814`, border: `0 0 2px 0 solid #1a1814` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#1a1814`, underline `always` - **blockquote:** border `4px solid #1a1814`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(26, 24, 20, 0.06)`, color `#1a1814` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 15.28:1 | AA | AAA | — | | Body text on canvas | 14.09:1 | AA | AAA | — | | Muted text on surface | 4.7:1 | AA | AA | — | | Accent on surface | 15.28:1 | AA-Large | AAA | — | | Accent on canvas | 14.09:1 | AA-Large | AAA | — | --- # SYSTEM: Token Mesh Source: https://www.freedesignmd.com/system/token-mesh --- name: "Token Mesh" description: "Crypto without the neon cliché. Dark slate surfaces, Geist sans for prose and Geist Mono with tabular numerals for every figure, a single cool mint accent reserved for positive deltas. Built for crypto exchanges, DeFi dashboards, and on-chain analytics that want to look serious — no glow, no purple-blue gradient, no rocket emoji." tags: [crypto, fintech, dark, minimal, modern] colors: primary: "#e6e8eb" secondary: "#7d848e" tertiary: "#e6e8eb" neutral: "#1a1d22" surface: "#101216" typography: display: Geist body: Geist mono: "Geist Mono" scale: hero: "3.25rem / 1.06 / 600 / -0.03em" h1: "2.125rem / 1.16 / 600 / -0.022em" h2: "1.4375rem / 1.3 / 600 / -0.012em" body: "0.9375rem / 1.6 / 400 / -0.005em" radius: sm: 4px md: 6px lg: 10px pill: 9999px shadows: card: "rgba(0,0,0,0.35) 0 1px 0 inset, rgba(0,0,0,0.4) 0 1px 2px" button: none borders: card: "1px solid rgba(230,232,235,0.08)" divider: rgba(230,232,235,0.10) buttons: primary: background: #e6e8eb color: #101216 border: none shape: rounded padding: 9px 18px font: 600 / 0.8125rem secondary: background: #1f232a color: #e6e8eb border: 1px solid rgba(230,232,235,0.10) shape: rounded padding: 9px 18px font: 500 / 0.8125rem outline: background: transparent color: #e6e8eb border: 1px solid rgba(230,232,235,0.16) shape: rounded padding: 9px 18px font: 500 / 0.8125rem ghost: background: transparent color: #7d848e border: none shape: rounded padding: 9px 14px font: 500 / 0.8125rem charts: variant: "thin-bars" stroke_width: 1.5 fill_opacity: 0.08 gridlines: true bar_gap: 6px highlight: single dot_marker: true fonts_url: "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap" dependencies: ["lucide-react"] --- # Token Mesh ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Token Mesh** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#e6e8eb`, text `#101216`, padding `9px 18px`, weight `600`. - **Secondary** — rounded shape, bg `#1f232a`, text `#e6e8eb`, border `1px solid rgba(230,232,235,0.10)`, padding `9px 18px`, weight `500`. - **Outline** — rounded shape, text `#e6e8eb`, border `1px solid rgba(230,232,235,0.16)`, padding `9px 18px`, weight `500`. - **Ghost** — rounded shape, text `#7d848e`, padding `9px 14px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#101216` - Border: `1px solid rgba(230,232,235,0.08)` - Shadow: `rgba(0,0,0,0.35) 0 1px 0 inset, rgba(0,0,0,0.4) 0 1px 2px` - Radius: `radius.lg` (`10px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `thin-bars` - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Geist`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Geist`)** — paragraphs, labels, button text, form inputs. - **Mono (`Geist Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Token Mesh is what crypto looks like when you remove the clichés. The page surface is dark slate `#101216` — never pure black, never blue-leaning. Cards lift to `#1a1d22` with a 1px black inset highlight at the top edge — the dark-mode catch-light that sells the surface as physical. Geist handles prose with its calm geometric proportions; Geist Mono with tabular numerals carries every price, percentage, market cap, and address so columns of figures align to the pixel. The single accent is cool mint `#3ad9a8` — used only on positive 24h deltas, the active wallet pane border, and the focus ring. Negative deltas use bone, with the minus sign carrying the meaning. The discipline is in the absence: no glow, no purple-blue gradient, no neon, no rocket emoji. The system trusts the reader to read tabular numerals and signs. **Signature moves** - Geist Mono with `font-variant-numeric: tabular-nums` on every price, percentage, address - Cool mint `#3ad9a8` only on positive deltas + active wallet pane border + focus ring - Negative deltas in bone with minus sign — never in red - Dark slate `#101216` page (never pure black, never blue) → `#1a1d22` card - 1px black inset highlight on every card — dark catch-light ## 2. Palette ### Surfaces - **Slate** `#101216` — page background (cool dark slate) - **Slate Lift** `#1a1d22` — primary card surface - **Pane** `#1f232a` — secondary button, hovered card - **Hairline** `rgba(230,232,235,0.08)` — every divider ### Ink (light on dark) - **Bone** `#e6e8eb` — text, headings, primary CTA fill, negative deltas - **Bone 55** `#7d848e` — secondary text, mono labels ### Accent - **Mint** `#3ad9a8` — positive 24h delta, active wallet pane border, focus ring - **Mint Soft** `rgba(58,217,168,0.12)` — hovered token row background ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Geist | 52px | 600 | 1.06 | -0.03em | | H1 | Geist | 34px | 600 | 1.16 | -0.022em | | H2 | Geist | 23px | 600 | 1.3 | -0.012em | | Body | Geist | 15px | 400 | 1.6 | -0.005em | | UI / Button | Geist | 13px | 500 | 1.4 | 0 | | Price / KPI | Geist Mono | 28px | 600 | 1.0 | 0 tabular-nums | | Delta | Geist Mono | 13px | 500 | 1.0 | 0 tabular-nums | | Label | Geist Mono | 11px | 500 | 1.0 | 0.04em uppercase | | Address / Hash | Geist Mono | 12px | 400 | 1.0 | 0 truncate | Geist Mono everywhere a number or hash lives — prices, deltas, market caps, wallet addresses, transaction hashes. The tabular-nums variant is what makes a token table read as a serious exchange vs. a meme dashboard. ## 4. Buttons ### Primary (Bone Inverted) ```css background: #e6e8eb; color: #101216; padding: 9px 18px; border-radius: 6px; font-weight: 600; ``` Bone-on-slate is the dark-mode equivalent of ink-on-bone — high contrast, no chrome required. ### Secondary (Pane) - `#1f232a` background, 1px hairline at 10% bone, bone text — same shape, same padding ### Outline & Ghost - Outline: transparent, 1px hairline at 16% bone - Ghost: no border, bone-55, hover lifts to bone ## 5. Cards ```css background: #1a1d22; border: 1px solid rgba(230,232,235,0.08); border-radius: 10px; box-shadow: rgba(0,0,0,0.35) 0 1px 0 inset, rgba(0,0,0,0.4) 0 1px 2px; ``` The 1px black inset highlight at the top is the dark catch-light — without it the card reads as flat dark grey. The active wallet pane adds a 1px mint top border — the only place mint appears as a card edge. ## 6. Charts Thin precise bars (3px wide, 6px gap) with dashed gridlines at 8% bone — used for token-volume sparklines. One bar in mint (the latest period if up, bone if down), others in 22% bone. Line charts at 1.5px bone with an 8% mint fill (when net up), ending in a mint dot marker. Y-axis labels in Geist Mono uppercase 11px aligned to the right. ## 7. Tabs Underline 1.5px in mint for the active state. Inactive tabs are bone-55 in Geist 500. Hover = mint-soft background wash. Tabs sit on a 1px hairline baseline. ## 8. Spacing - Base 4px (token-row aware) - Scale: `4, 8, 12, 16, 20, 24, 32, 40, 56, 80` - Section padding: 80px desktop, 32px mobile ## 9. Do's & don'ts ✅ **Do** - Use Geist Mono with tabular-nums on every price, delta, address — column alignment IS the brand - Reserve mint for positive deltas + active wallet pane + focus ring only - Keep negative deltas in bone with a minus sign — never in red - Hold the dark slate `#101216` page → slate-lift card tonal step ❌ **Don't** - Use neon green for positive — cool mint `#3ad9a8` is muted on purpose - Use red for negative — the system trusts the minus sign - Use a purple-blue or pink gradient — the entire category does this; you do not - Add glow halos to active states — 1px mint border is the only edge color --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#e6e8eb` | | secondary | `#7d848e` | | tertiary | `#e6e8eb` | | neutral | `#1a1d22` | | surface | `#101216` | ### Typography - **Display:** Geist - **Body:** Geist - **Mono:** Geist Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 3.25rem / 1.06 / 600 / -0.03em | | H1 | 2.125rem / 1.16 / 600 / -0.022em | | H2 | 1.4375rem / 1.3 / 600 / -0.012em | | Body | 0.9375rem / 1.6 / 400 / -0.005em | ### Radius - sm: `4px` - md: `6px` - lg: `10px` - pill: `9999px` ### Shadows - **card:** `rgba(0,0,0,0.35) 0 1px 0 inset, rgba(0,0,0,0.4) 0 1px 2px` - **button:** `none` ### Borders - **card:** `1px solid rgba(230,232,235,0.08)` - **divider:** `rgba(230,232,235,0.10)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#e6e8eb` | | color | `#101216` | | border | `none` | | padding | `9px 18px` | | fontWeight | `600` | | fontSize | `0.8125rem` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#1f232a` | | color | `#e6e8eb` | | border | `1px solid rgba(230,232,235,0.10)` | | padding | `9px 18px` | | fontWeight | `500` | | fontSize | `0.8125rem` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#e6e8eb` | | border | `1px solid rgba(230,232,235,0.16)` | | padding | `9px 18px` | | fontWeight | `500` | | fontSize | `0.8125rem` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#7d848e` | | border | `none` | | padding | `9px 14px` | | fontWeight | `500` | | fontSize | `0.8125rem` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1.5` | | fillOpacity | `0.08` | | gridlines | `true` | | barGap | `6px` | | highlight | `single` | | dotMarker | `true` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 0 24px -4px rgba(230, 232, 235, 0.5), 0 8px 24px -8px rgba(0,0,0,0.6)`, filter: `brightness(1.1)` - **focus** — outline: `1.5px solid #e6e8eb`, outline-offset: `3px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.92)` - **disabled** — opacity: `0.35`, filter: `saturate(0.4)` - **loading** — opacity: `0.6` - **selected** — bg: `#e6e8eb`, color: `#0A0A0A` #### Input - **hover** — border: `1px solid rgba(230, 232, 235, 0.5)` - **focus** — border: `1px solid #e6e8eb`, shadow: `0 0 0 3px rgba(230, 232, 235, 0.2)` - **disabled** — opacity: `0.35` - **error** — border: `1px solid #F87171`, shadow: `0 0 0 3px rgba(248,113,113,0.2)` #### Card - **hover** — shadow: `0 16px 40px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(230, 232, 235, 0.18)`, transform: `translateY(-2px)` - **selected** — border: `1px solid #e6e8eb`, shadow: `0 0 0 1px #e6e8eb` - **dragging** — shadow: `0 24px 60px -16px rgba(0,0,0,0.85)`, transform: `scale(1.02)`, opacity: `0.85` #### Tab - **hover** — color: `#e6e8eb` - **focus** — outline: `1.5px solid #e6e8eb`, outline-offset: `2px` - **selected** — color: `#e6e8eb`, border: `0 0 1.5px 0 solid #e6e8eb` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Glide.** Fließende, leicht beschleunigte Übergänge mit Accent-Glow auf hover. Premium-Feeling durch kontrollierte Lichtspiele. ```css transition: all 280ms cubic-bezier(0.32, 0.72, 0, 1); ``` | Token | Value | |-------|-------| | duration.instant | `100ms` | | duration.fast | `180ms` | | duration.base | `280ms` | | duration.slow | `450ms` | | easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.25, 0.55, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — Hairline mit Accent-Hauch. | | level1 | `0 2px 4px rgba(0,0,0,0.45)` | Subtle drop — list items. | | level2 | `0 12px 28px -8px rgba(0,0,0,0.6)` | Popover — vom Canvas gelöst. | | level3 | `0 20px 48px -12px rgba(0,0,0,0.7), 0 0 32px -8px rgba(230, 232, 235, 0.25)` | Sheet — Accent-Halo. | | level4 | `0 40px 96px -16px rgba(0,0,0,0.85), 0 0 64px -12px rgba(230, 232, 235, 0.4)` | Modal — voller Accent-Rim, dramatisch. | ### Content - **measure:** `66ch` (max line length for body prose) - **paragraph spacing:** `1.3em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#e6e8eb`, underline `hover` - **blockquote:** border `2px solid #e6e8eb`, padding `0.8em 1.2em` - **code:** background `rgba(230, 232, 235, 0.12)`, color `#e6e8eb` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 15.27:1 | AA | AAA | — | | Body text on canvas | 13.77:1 | AA | AAA | — | | Muted text on surface | 4.97:1 | AA | AA | — | | Accent on surface | 15.27:1 | AA-Large | AAA | — | | Accent on canvas | 13.77:1 | AA-Large | AAA | — | --- # SYSTEM: Hôtel Rivière Source: https://www.freedesignmd.com/system/hotel-riviere --- name: "Hôtel Rivière" description: "A boutique hotel that wears its restraint as luxury. Warm pearl-bone surfaces, Cormorant Infant for room names at oversized scale, Inter for body, a single sage-olive accent reserved for the Reserve CTA. Built for hospitality, restaurant groups, and travel brands that want quiet European elegance over moody hotel-stock photography." tags: [hospitality, editorial, premium, warm, minimal] colors: primary: "#1d1a14" secondary: "#7a7468" tertiary: "#1d1a14" neutral: "#ece5d3" surface: "#f6f0dd" typography: display: "Cormorant Infant" body: Inter mono: "JetBrains Mono" scale: hero: "8rem / 0.92 / 400 / -0.045em" h1: "4.5rem / 1 / 400 / -0.03em" h2: "2rem / 1.18 / 400 / -0.018em" body: "1.0625rem / 1.7 / 400 / -0.005em" radius: sm: 1px md: 2px lg: 3px pill: 9999px shadows: card: none button: none borders: card: "1px solid rgba(29,26,20,0.10)" divider: rgba(29,26,20,0.14) buttons: primary: background: #5a6238 color: #f6f0dd border: none shape: sharp padding: 13px 26px font: 500 / 0.8125rem / 0.16em uppercase: true secondary: background: transparent color: #1d1a14 border: 1px solid #1d1a14 shape: sharp padding: 13px 26px font: 500 / 0.8125rem / 0.16em uppercase: true outline: background: transparent color: #1d1a14 border: 1px solid rgba(29,26,20,0.18) shape: sharp padding: 13px 26px font: 500 / 0.8125rem / 0.16em uppercase: true ghost: background: transparent color: #7a7468 border: none shape: sharp padding: 13px 18px font: 500 / 0.8125rem / 0.16em uppercase: true charts: variant: "thin-bars" stroke_width: 1 fill_opacity: 0 gridlines: false bar_gap: 20px highlight: single dot_marker: false fonts_url: "https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Hôtel Rivière ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Hôtel Rivière** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#5a6238`, text `#f6f0dd`, padding `13px 26px`, weight `500`, uppercased. - **Secondary** — sharp shape, text `#1d1a14`, border `1px solid #1d1a14`, padding `13px 26px`, weight `500`, uppercased. - **Outline** — sharp shape, text `#1d1a14`, border `1px solid rgba(29,26,20,0.18)`, padding `13px 26px`, weight `500`, uppercased. - **Ghost** — sharp shape, text `#7a7468`, padding `13px 18px`, weight `500`, uppercased. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#f6f0dd` - Border: `1px solid rgba(29,26,20,0.10)` - Shadow: `none` - Radius: `radius.lg` (`3px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `thin-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Cormorant Infant`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Hôtel Rivière is a boutique hotel that wears restraint as luxury. The page surface is warm pearl-bone `#f6f0dd` — closer to handmade card stock than to white. Room and suite names run in Cormorant Infant at 128px, weight 400 — the soft-cornered didone glyphs giving every name an inscribed-on-stone permanence without any heaviness. Body sits in Inter at 17px on a 1.7 leading. UI labels run in Inter 500 with extreme 0.16em uppercase tracking — the brass-plaque caption voice. The single accent is sage-olive `#5a6238` that appears only on the Reserve CTA — the singular booking gesture in the entire system gets the singular color. The discipline is in the proportion: massive Cormorant Infant on warm pearl, generous negative space, and one sage-olive button per page that reads as a stamped reservation seal. **Signature moves** - Cormorant Infant 400 at 128px for room/suite names — soft didone, drama through scale - Warm pearl-bone surface `#f6f0dd` — never white, never cream - Sage-olive `#5a6238` exclusively on the Reserve CTA — one booking gesture, one color - All UI labels uppercase 0.16em tracking — the brass-plaque voice - Sharp 1-3px radius — almost zero, brass-plaque precision - Section padding 200px desktop — the air IS the lobby ## 2. Palette ### Surfaces - **Pearl Bone** `#f6f0dd` — page background (warm card stock) - **Pearl Lift** `#ece5d3` — secondary surfaces, gallery panels - **Hairline** `rgba(29,26,20,0.10)` — every divider ### Ink - **Ink** `#1d1a14` — text, headings, secondary CTA fill - **Ink 50** `#7a7468` — secondary text, mono captions ### Accent - **Sage Olive** `#5a6238` — Reserve CTA only - That is the only color in the system. ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Suite Name (Hero) | Cormorant Infant | 128px | 400 | 0.92 | -0.045em | | H1 | Cormorant Infant | 72px | 400 | 1.0 | -0.03em | | H2 | Cormorant Infant | 32px | 400 | 1.18 | -0.018em | | Pull Quote | Cormorant Infant (italic) | 28px | 400 | 1.3 | -0.012em | | Body | Inter | 17px | 400 | 1.7 | -0.005em | | UI / Button | Inter | 13px | 500 | 1.4 | 0.16em uppercase | | Caption / Date | JetBrains Mono | 11px | 500 | 1.0 | 0.10em uppercase | | Room Number | JetBrains Mono | 14px | 500 | 1.0 | 0.04em uppercase tabular-nums | Cormorant Infant only at 400 — the soft-corner didone breaks at any heavier weight. Italic reserved for the chef's signature note and pull quotes. ## 4. Buttons ### Primary (Sage Olive — Reserve only) ```css background: #5a6238; color: #f6f0dd; padding: 13px 26px; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 500; ``` The 0.16em tracking is wider than typical UI — that is the brass-plaque voice carried into the booking gesture. Reads as a stamped reservation seal, not a CTA button. ### Secondary (Ink Outline — every other action) - Transparent, 1px solid ink, ink text — same near-sharp shape, same wide tracking ### Outline & Ghost - Outline: transparent, 1px hairline at 18% ink - Ghost: no border, ink-50 uppercase, hover underlines ## 5. Cards ```css background: #f6f0dd; border: 1px solid rgba(29,26,20,0.10); border-radius: 3px; box-shadow: none; ``` NO shadows, NO inset highlights. Suite cards lift to pearl-lift surface with a 1px ink top border (3px wide) — the only chrome. ## 6. Charts Thin precise bars (3px wide, 20px gap). One bar in sage-olive, others in 18% ink. NO gridlines. Y-axis labels in JetBrains Mono uppercase 11px. Charts are reserved for occupancy-by-month breakdowns and read as gallery exhibits. ## 7. Tabs Underline 1px in ink for the active state. Inactive tabs are ink-50 in uppercase 0.16em. The active label is set in Cormorant Infant italic at the same size — that is the rhythm change, not a color shift. ## 8. Spacing - Base 8px - Scale: `8, 16, 24, 32, 48, 64, 96, 128, 200, 280` - Section padding: 200px desktop, 96px mobile — the air IS the lobby ## 9. Do's & don'ts ✅ **Do** - Use Cormorant Infant at 400 only — anything heavier breaks the soft-didone proportion - Hold the warm pearl-bone surface — white reads as web app, cream reads as wedding stationery - Reserve sage-olive for the Reserve CTA exclusively — one booking, one color - Use 0.16em uppercase tracking on every UI label — that's the brass-plaque voice ❌ **Don't** - Use moody hotel-stock photography — the typography earns the elegance - Use Cormorant Infant at 600+ — bold breaks the soft didone - Use a second accent — sage-olive alone, on the Reserve CTA only - Use any radius beyond 3px — corners must read as brass-plaque, not pill --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1d1a14` | | secondary | `#7a7468` | | tertiary | `#1d1a14` | | neutral | `#ece5d3` | | surface | `#f6f0dd` | ### Typography - **Display:** Cormorant Infant - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 8rem / 0.92 / 400 / -0.045em | | H1 | 4.5rem / 1 / 400 / -0.03em | | H2 | 2rem / 1.18 / 400 / -0.018em | | Body | 1.0625rem / 1.7 / 400 / -0.005em | ### Radius - sm: `1px` - md: `2px` - lg: `3px` - pill: `9999px` ### Shadows - **card:** `none` - **button:** `none` ### Borders - **card:** `1px solid rgba(29,26,20,0.10)` - **divider:** `rgba(29,26,20,0.14)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#5a6238` | | color | `#f6f0dd` | | border | `none` | | padding | `13px 26px` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.16em` | | uppercase | `true` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#1d1a14` | | border | `1px solid #1d1a14` | | padding | `13px 26px` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.16em` | | uppercase | `true` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#1d1a14` | | border | `1px solid rgba(29,26,20,0.18)` | | padding | `13px 26px` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.16em` | | uppercase | `true` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#7a7468` | | border | `none` | | padding | `13px 18px` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.16em` | | uppercase | `true` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1` | | fillOpacity | `0` | | gridlines | `false` | | barGap | `20px` | | highlight | `single` | | dotMarker | `false` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(29, 26, 20, 0.92)`, shadow: `0 4px 20px -8px rgba(29, 26, 20, 0.4)` - **focus** — outline: `1.5px solid #1d1a14`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#1d1a14`, color: `#f6f0dd` #### Input - **hover** — border: `1px solid #1d1a14` - **focus** — border: `1px solid #1d1a14`, shadow: `0 1px 0 0 #1d1a14` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #1d1a14` #### Tab - **hover** — color: `#1d1a14` - **focus** — outline: `1.5px solid #1d1a14`, outline-offset: `3px` - **selected** — color: `#1d1a14`, border: `0 0 2px 0 solid #1d1a14` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#1d1a14`, underline `always` - **blockquote:** border `4px solid #1d1a14`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(29, 26, 20, 0.06)`, color `#1d1a14` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 15.23:1 | AA | AAA | — | | Body text on canvas | 13.81:1 | AA | AAA | — | | Muted text on surface | 4.07:1 | AA | AA-Large | `#6f6a5f` → 4.72:1 (AA) | | Accent on surface | 15.23:1 | AA-Large | AAA | — | | Accent on canvas | 13.81:1 | AA-Large | AAA | — | --- # SYSTEM: Broadcast Pearl Source: https://www.freedesignmd.com/system/broadcast-pearl --- name: "Broadcast Pearl" description: "A podcast platform with the calm of public radio. Soft pearl off-white surfaces, Inter Display 700 for episode titles, Geist Mono for timestamps and chapter marks, a single deep burgundy accent reserved for the now-playing waveform. The light counterpart to a late-night studio — built for podcast networks, audio publishers, and editorial radio brands." tags: [audio, editorial, minimal, premium, modern] colors: primary: "#1c1916" secondary: "#6b665e" tertiary: "#1c1916" neutral: "#ebe7df" surface: "#f6f3ec" typography: display: Inter body: Inter mono: "Geist Mono" scale: hero: "4.5rem / 1.02 / 700 / -0.035em" h1: "2.875rem / 1.1 / 700 / -0.025em" h2: "1.75rem / 1.22 / 600 / -0.015em" body: "1.0625rem / 1.65 / 400 / -0.005em" radius: sm: 4px md: 8px lg: 14px pill: 9999px shadows: card: "rgba(28,25,22,0.04) 0 1px 2px" button: none borders: card: "1px solid rgba(28,25,22,0.08)" divider: rgba(28,25,22,0.10) buttons: primary: background: #1c1916 color: #f6f3ec border: none shape: pill padding: 11px 22px font: 600 / 0.8125rem secondary: background: #ebe7df color: #1c1916 border: 1px solid rgba(28,25,22,0.10) shape: pill padding: 11px 22px font: 600 / 0.8125rem outline: background: transparent color: #1c1916 border: 1px solid rgba(28,25,22,0.18) shape: pill padding: 11px 22px font: 600 / 0.8125rem ghost: background: transparent color: #6b665e border: none shape: pill padding: 11px 16px font: 600 / 0.8125rem charts: variant: "thin-bars" stroke_width: 1.5 fill_opacity: 0.08 gridlines: false bar_gap: 4px highlight: single dot_marker: true fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Broadcast Pearl ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Broadcast Pearl** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — pill shape, bg `#1c1916`, text `#f6f3ec`, padding `11px 22px`, weight `600`. - **Secondary** — pill shape, bg `#ebe7df`, text `#1c1916`, border `1px solid rgba(28,25,22,0.10)`, padding `11px 22px`, weight `600`. - **Outline** — pill shape, text `#1c1916`, border `1px solid rgba(28,25,22,0.18)`, padding `11px 22px`, weight `600`. - **Ghost** — pill shape, text `#6b665e`, padding `11px 16px`, weight `600`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#f6f3ec` - Border: `1px solid rgba(28,25,22,0.08)` - Shadow: `rgba(28,25,22,0.04) 0 1px 2px` - Radius: `radius.lg` (`14px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `thin-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Inter`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`Geist Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Broadcast Pearl is a podcast platform with the calm of public radio. The page surface is soft pearl off-white `#f6f3ec` — closer to a printed program guide than to white. Episode titles run in Inter at 700 weight, 72px, with -0.035em tracking — disciplined and authoritative without ever shouting. Body sits in Inter at 17px on a 1.65 leading. Timestamps, chapter marks, and durations switch to Geist Mono with tabular-nums. The single accent is deep burgundy `#7a1f2e` that appears only on the now-playing waveform, the active episode row left border, and the play-button when an episode is queued. The discipline is in the warm pearl light: never bright white, never cool grey. The burgundy reads as the deep red of a microphone's "ON AIR" light through frosted glass — present, never neon. **Signature moves** - Inter 700 at 72px for episode titles — calm authority, never display-serif drama - Soft pearl off-white `#f6f3ec` — never white, never cream - Burgundy `#7a1f2e` only on now-playing waveform + active episode left border + queued play button - Geist Mono with tabular-nums for every timestamp, chapter mark, duration - Pill buttons (radio-mic-tag voice) on the warm pearl stage ## 2. Palette ### Surfaces - **Pearl** `#f6f3ec` — page background (warm program-guide stock) - **Pearl Lift** `#ebe7df` — secondary surfaces, secondary button - **Hairline** `rgba(28,25,22,0.08)` — every divider ### Ink - **Ink** `#1c1916` — text, headings, primary CTA fill - **Ink 50** `#6b665e` — secondary text, mono labels ### Accent - **Burgundy** `#7a1f2e` — now-playing waveform, active episode left border, queued play button - **Burgundy Soft** `rgba(122,31,46,0.10)` — focus ring, hovered episode row background ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Episode Title (Hero) | Inter | 72px | 700 | 1.02 | -0.035em | | H1 | Inter | 46px | 700 | 1.1 | -0.025em | | H2 | Inter | 28px | 600 | 1.22 | -0.015em | | Body | Inter | 17px | 400 | 1.65 | -0.005em | | UI / Button | Inter | 13px | 600 | 1.4 | 0 | | Timestamp / Duration | Geist Mono | 13px | 500 | 1.0 | 0 tabular-nums | | Chapter Mark | Geist Mono | 12px | 500 | 1.0 | 0 tabular-nums | | Show Label | Geist Mono | 11px | 500 | 1.0 | 0.10em uppercase | Geist Mono carries the audio-time voice — every duration, chapter timestamp, episode runtime. The tabular-nums variant is what makes a podcast queue read as serious editorial vs. a streaming app. ## 4. Buttons ### Primary (Ink Pill) ```css background: #1c1916; color: #f6f3ec; padding: 11px 22px; border-radius: 9999px; font-weight: 600; ``` Pill shape on the warm pearl reads as a radio-mic name tag — the voice of the platform. ### Secondary (Pearl Lift Pill) - `#ebe7df` background, 1px hairline at 10% ink, ink text — same pill shape ### Outline & Ghost - Outline: transparent, 1px hairline at 18% ink - Ghost: no border, ink-50, hover lifts to ink ## 5. Cards ```css background: #f6f3ec; border: 1px solid rgba(28,25,22,0.08); border-radius: 14px; box-shadow: rgba(28,25,22,0.04) 0 1px 2px; ``` The single 1px shadow is the maximum lift. The currently-playing episode row gets a 2px burgundy left border — the only place burgundy appears as a card edge. ## 6. Charts Thin precise bars (3px wide, 4px gap) — used as the now-playing waveform. The active bar (current playhead) is burgundy, others in 22% ink. Line charts at 1.5px ink with an 8% burgundy fill, ending in a burgundy dot marker. NO gridlines. Y-axis labels in Geist Mono uppercase 11px. ## 7. Tabs Underline 1.5px in burgundy for the active state. Inactive tabs are ink-50 in Inter 600. Hover = burgundy-soft background wash. Tabs sit on a 1px hairline baseline. ## 8. Spacing - Base 4px - Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96` - Section padding: 96px desktop, 48px mobile ## 9. Do's & don'ts ✅ **Do** - Use Inter 700 at 72px for episode titles — calm authority, never display-serif drama - Hold the soft pearl off-white — bright white reads as Spotify, cream reads as wedding stationery - Reserve burgundy for now-playing waveform + active episode left border + queued play button - Put every timestamp, chapter mark, duration in Geist Mono with tabular-nums ❌ **Don't** - Use bright red for the now-playing — burgundy `#7a1f2e` is muted "ON AIR" light, not safety cone - Use a second accent — burgundy alone, on three specific surfaces - Use sharp 0px corners — soft 8-14px is the program-guide voice - Use display-serif for episode titles — calm Inter sans is the public-radio register --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1c1916` | | secondary | `#6b665e` | | tertiary | `#1c1916` | | neutral | `#ebe7df` | | surface | `#f6f3ec` | ### Typography - **Display:** Inter - **Body:** Inter - **Mono:** Geist Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.5rem / 1.02 / 700 / -0.035em | | H1 | 2.875rem / 1.1 / 700 / -0.025em | | H2 | 1.75rem / 1.22 / 600 / -0.015em | | Body | 1.0625rem / 1.65 / 400 / -0.005em | ### Radius - sm: `4px` - md: `8px` - lg: `14px` - pill: `9999px` ### Shadows - **card:** `rgba(28,25,22,0.04) 0 1px 2px` - **button:** `none` ### Borders - **card:** `1px solid rgba(28,25,22,0.08)` - **divider:** `rgba(28,25,22,0.10)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `pill` | | background | `#1c1916` | | color | `#f6f3ec` | | border | `none` | | padding | `11px 22px` | | fontWeight | `600` | | fontSize | `0.8125rem` | #### Secondary | Property | Value | |----------|-------| | shape | `pill` | | background | `#ebe7df` | | color | `#1c1916` | | border | `1px solid rgba(28,25,22,0.10)` | | padding | `11px 22px` | | fontWeight | `600` | | fontSize | `0.8125rem` | #### Outline | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#1c1916` | | border | `1px solid rgba(28,25,22,0.18)` | | padding | `11px 22px` | | fontWeight | `600` | | fontSize | `0.8125rem` | #### Ghost | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#6b665e` | | border | `none` | | padding | `11px 16px` | | fontWeight | `600` | | fontSize | `0.8125rem` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1.5` | | fillOpacity | `0.08` | | gridlines | `false` | | barGap | `4px` | | highlight | `single` | | dotMarker | `true` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(28, 25, 22, 0.92)`, shadow: `0 4px 20px -8px rgba(28, 25, 22, 0.4)` - **focus** — outline: `1.5px solid #1c1916`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#1c1916`, color: `#f6f3ec` #### Input - **hover** — border: `1px solid #1c1916` - **focus** — border: `1px solid #1c1916`, shadow: `0 1px 0 0 #1c1916` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #1c1916` #### Tab - **hover** — color: `#1c1916` - **focus** — outline: `1.5px solid #1c1916`, outline-offset: `3px` - **selected** — color: `#1c1916`, border: `0 0 2px 0 solid #1c1916` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#1c1916`, underline `always` - **blockquote:** border `4px solid #1c1916`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(28, 25, 22, 0.06)`, color `#1c1916` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 15.79:1 | AA | AAA | — | | Body text on canvas | 14.19:1 | AA | AAA | — | | Muted text on surface | 5.14:1 | AA | AA | — | | Accent on surface | 15.79:1 | AA-Large | AAA | — | | Accent on canvas | 14.19:1 | AA-Large | AAA | — | --- # SYSTEM: Atlas Admin Source: https://www.freedesignmd.com/system/atlas-admin --- name: "Atlas Admin" description: "An enterprise admin tool that respects density. Cool bone-grey surfaces, Inter for prose and IBM Plex Mono with tabular numerals for every figure, a single steel-blue accent reserved for the active module pane border. Built for B2B internal tools, ops dashboards, and admin consoles where information density is the feature, not the bug." tags: [enterprise, admin, dashboard, minimal, saas] colors: primary: "#0f1419" secondary: "#5a626c" tertiary: "#0f1419" neutral: "#e6e9ed" surface: "#f1f3f6" typography: display: Inter body: Inter mono: "IBM Plex Mono" scale: hero: "2.75rem / 1.08 / 700 / -0.025em" h1: "1.875rem / 1.18 / 600 / -0.018em" h2: "1.25rem / 1.3 / 600 / -0.012em" body: "0.875rem / 1.55 / 400 / 0" radius: sm: 3px md: 5px lg: 7px pill: 9999px shadows: card: "rgba(15,20,25,0.04) 0 1px 2px" button: none borders: card: "1px solid rgba(15,20,25,0.08)" divider: rgba(15,20,25,0.08) buttons: primary: background: #0f1419 color: #f1f3f6 border: none shape: rounded padding: 8px 16px font: 600 / 0.8125rem secondary: background: #ffffff color: #0f1419 border: 1px solid rgba(15,20,25,0.14) shape: rounded padding: 8px 16px font: 500 / 0.8125rem outline: background: transparent color: #0f1419 border: 1px solid rgba(15,20,25,0.18) shape: rounded padding: 8px 16px font: 500 / 0.8125rem ghost: background: transparent color: #5a626c border: none shape: rounded padding: 8px 12px font: 500 / 0.8125rem charts: variant: "thin-bars" stroke_width: 1.25 fill_opacity: 0.05 gridlines: true bar_gap: 6px highlight: single dot_marker: false fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" dependencies: ["lucide-react"] --- # Atlas Admin ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Atlas Admin** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#0f1419`, text `#f1f3f6`, padding `8px 16px`, weight `600`. - **Secondary** — rounded shape, bg `#ffffff`, text `#0f1419`, border `1px solid rgba(15,20,25,0.14)`, padding `8px 16px`, weight `500`. - **Outline** — rounded shape, text `#0f1419`, border `1px solid rgba(15,20,25,0.18)`, padding `8px 16px`, weight `500`. - **Ghost** — rounded shape, text `#5a626c`, padding `8px 12px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#f1f3f6` - Border: `1px solid rgba(15,20,25,0.08)` - Shadow: `rgba(15,20,25,0.04) 0 1px 2px` - Radius: `radius.lg` (`7px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `boxed`. Each tab is a bordered card. Active tab gets the accent border and a subtle fill. #### Charts - Bar/line variant: `thin-bars` - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Inter`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`IBM Plex Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Atlas Admin is an enterprise admin tool that respects density. The page surface is cool bone-grey `#f1f3f6` with cards lifted to pure white — every surface differing by 1-2% lightness. Inter handles prose at the small body size (14px) that admin consoles actually need to fit dense data; IBM Plex Mono with tabular numerals carries every ID, count, percentage, timestamp. Chrome is hairlines at 8% ink. The single accent is muted steel-blue `#3a5a7e` that appears only on the active module pane left border, the active sidebar item, and the focus ring. Status colors (success/warn/error) are reserved for actual status — never for UI accents. The discipline is in the density: 14px body so an ops table actually fits a screen, mono numerals for column alignment, and one steel-blue that reads as "you are here" without ever shouting. **Signature moves** - 14px body in Inter — admin consoles need density, not marketing spacing - IBM Plex Mono with `font-variant-numeric: tabular-nums` on every ID, count, timestamp, percentage - Steel-blue `#3a5a7e` only on active module pane border + active sidebar item + focus ring - Boxed tabs (5px radius, 1px hairline) — the tmux-pane voice for module switching - Cool bone-grey `#f1f3f6` page → pure white card — tonal-shift, no shadow drama ## 2. Palette ### Surfaces - **Bone Grey** `#f1f3f6` — page background (cool fine off-white) - **Card** `#ffffff` — elevated surface, primary card - **Header** `#e6e9ed` — table headers, sidebar background ### Ink - **Ink** `#0f1419` — text, headings, primary CTA fill (cool near-black, slight blue undertone) - **Ink 60** `#5a626c` — secondary text, mono labels - **Hairline** `rgba(15,20,25,0.08)` — every divider, every card edge ### Accent - **Steel** `#3a5a7e` — active module pane border, active sidebar item, focus ring - **Steel Soft** `rgba(58,90,126,0.10)` — hovered sidebar item, focus ring background ### Status (semantic only — never UI accent) - Success `#1f7a4d` · Warn `#b3801f` · Error `#a3331f` — used only on actual status badges ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Inter | 44px | 700 | 1.08 | -0.025em | | H1 / Page Title | Inter | 30px | 600 | 1.18 | -0.018em | | H2 / Section | Inter | 20px | 600 | 1.3 | -0.012em | | Body | Inter | 14px | 400 | 1.55 | 0 | | UI / Button | Inter | 13px | 500 | 1.4 | 0 | | ID / Count / Metric | IBM Plex Mono | 13px | 500 | 1.0 | 0 tabular-nums | | Label | IBM Plex Mono | 11px | 500 | 1.0 | 0.06em uppercase | | Timestamp | IBM Plex Mono | 12px | 500 | 1.0 | 0 tabular-nums | | Big KPI | IBM Plex Mono | 24px | 600 | 1.0 | 0 tabular-nums | The 14px body is deliberately small — admin consoles must fit dense tables. Plex Mono for every numeric or ID string keeps columns pixel-aligned. ## 4. Buttons ### Primary (Ink Compact) ```css background: #0f1419; color: #f1f3f6; padding: 8px 16px; border-radius: 5px; font-weight: 600; ``` The 8px vertical padding is tight on purpose — admin actions live in toolbars and table rows where height matters. ### Secondary (Card White) - Pure white, 1px hairline at 14% ink, ink text — same compact size ### Outline & Ghost - Outline: transparent, 1px hairline at 18% ink - Ghost: no border, ink-60, hover lifts to ink ## 5. Cards ```css background: #ffffff; border: 1px solid rgba(15,20,25,0.08); border-radius: 7px; box-shadow: rgba(15,20,25,0.04) 0 1px 2px; ``` The single 1px shadow is the maximum lift. The active module pane adds a 2px steel left border — the "you are here" indicator, borrowed from a tmux/zellij active pane. ## 6. Charts Thin precise bars (3px wide, 6px gap) with dashed gridlines at 8% ink — used for daily-throughput and queue-depth charts. One bar in steel, others in 22% ink. Line charts at 1.25px ink with a 5% steel fill. Y-axis labels in IBM Plex Mono uppercase 11px aligned to the right. ## 7. Tabs Boxed tabs with 5px radius and 1px hairline at 8% ink. Active = white background, 1px steel border, ink text. Inactive = transparent, ink-60. Reads like a tmux pane selector — module switching, not nav. ## 8. Spacing - Base 4px (table-row aware) - Scale: `4, 8, 12, 16, 20, 24, 32, 40, 56, 80` - Section padding: 56px desktop, 24px mobile — admin density ## 9. Do's & don'ts ✅ **Do** - Use 14px body — admin consoles need density, not marketing spacing - Use IBM Plex Mono with tabular-nums on every ID, count, percentage, timestamp - Reserve steel for active module pane border + active sidebar item + focus ring - Hold status colors (success/warn/error) to actual status badges only — never as UI accent ❌ **Don't** - Use 16px+ body — admin tables become wasteful and require more scroll - Use a second UI accent — steel alone, on three specific surfaces - Use bright color for status — muted versions only (success `#1f7a4d`, never `#22c55e`) - Add card shadows beyond the 1px lift — the cool tonal step is the only depth --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#0f1419` | | secondary | `#5a626c` | | tertiary | `#0f1419` | | neutral | `#e6e9ed` | | surface | `#f1f3f6` | ### Typography - **Display:** Inter - **Body:** Inter - **Mono:** IBM Plex Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 2.75rem / 1.08 / 700 / -0.025em | | H1 | 1.875rem / 1.18 / 600 / -0.018em | | H2 | 1.25rem / 1.3 / 600 / -0.012em | | Body | 0.875rem / 1.55 / 400 / 0 | ### Radius - sm: `3px` - md: `5px` - lg: `7px` - pill: `9999px` ### Shadows - **card:** `rgba(15,20,25,0.04) 0 1px 2px` - **button:** `none` ### Borders - **card:** `1px solid rgba(15,20,25,0.08)` - **divider:** `rgba(15,20,25,0.08)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#0f1419` | | color | `#f1f3f6` | | border | `none` | | padding | `8px 16px` | | fontWeight | `600` | | fontSize | `0.8125rem` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#ffffff` | | color | `#0f1419` | | border | `1px solid rgba(15,20,25,0.14)` | | padding | `8px 16px` | | fontWeight | `500` | | fontSize | `0.8125rem` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#0f1419` | | border | `1px solid rgba(15,20,25,0.18)` | | padding | `8px 16px` | | fontWeight | `500` | | fontSize | `0.8125rem` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#5a626c` | | border | `none` | | padding | `8px 12px` | | fontWeight | `500` | | fontSize | `0.8125rem` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1.25` | | fillOpacity | `0.05` | | gridlines | `true` | | barGap | `6px` | | highlight | `single` | | dotMarker | `false` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 4px 12px -2px rgba(15,23,42,0.18)`, filter: `brightness(0.97)` - **focus** — outline: `2px solid rgba(15, 20, 25, 0.5)`, outline-offset: `2px` - **active** — shadow: `0 1px 2px rgba(15,23,42,0.1)`, transform: `scale(0.98)` - **disabled** — opacity: `0.4`, filter: `saturate(0.5)` - **loading** — opacity: `0.7` - **selected** — bg: `#0f1419`, color: `#f1f3f6` #### Input - **hover** — border: `1px solid rgba(15, 20, 25, 0.5)` - **focus** — border: `1.5px solid #0f1419`, shadow: `0 0 0 4px rgba(15, 20, 25, 0.15)` - **disabled** — bg: `rgba(15, 20, 25, 0.04)`, opacity: `0.4` - **error** — border: `1.5px solid #DC2626`, shadow: `0 0 0 4px rgba(220,38,38,0.15)` #### Card - **hover** — shadow: `0 12px 28px -12px rgba(15,23,42,0.18)`, transform: `translateY(-2px)` - **selected** — bg: `rgba(15, 20, 25, 0.04)`, border: `1.5px solid #0f1419` - **dragging** — shadow: `0 20px 48px -16px rgba(15,23,42,0.3)`, transform: `scale(1.02) rotate(-0.5deg)`, opacity: `0.9` #### Tab - **hover** — bg: `rgba(15, 20, 25, 0.06)`, color: `#0f1419` - **focus** — outline: `2px solid rgba(15, 20, 25, 0.5)`, outline-offset: `2px` - **selected** — color: `#0f1419`, border: `0 0 2px 0 solid #0f1419` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Quiet ease.** 240 ms ease-out for all standard transitions. Reliable, invisible — motion stays out of the way. ```css transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `160ms` | | duration.base | `240ms` | | duration.slow | `380ms` | | easing.standard | `cubic-bezier(0.4, 0, 0.2, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.34, 1.4, 0.64, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — hairline border separates. | | level1 | `0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04)` | List rows, resting cards. | | level2 | `0 4px 12px -2px rgba(15,23,42,0.1), 0 2px 6px rgba(15,23,42,0.06)` | Hover cards, popover. | | level3 | `0 12px 32px -8px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.08)` | Sheets, side panels. | | level4 | `0 28px 64px -16px rgba(15,23,42,0.28), 0 8px 24px rgba(15,23,42,0.12)` | Modals — scrim required. | ### Content - **measure:** `68ch` (max line length for body prose) - **paragraph spacing:** `1.2em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#0f1419`, underline `hover` - **blockquote:** border `3px solid rgba(15, 20, 25, 0.6)`, padding `0.5em 0 0.5em 1.25em` - **code:** background `rgba(15, 20, 25, 0.06)`, color `#0f1419` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 16.65:1 | AA | AAA | — | | Body text on canvas | 15.2:1 | AA | AAA | — | | Muted text on surface | 5.56:1 | AA | AA | — | | Accent on surface | 16.65:1 | AA-Large | AAA | — | | Accent on canvas | 15.2:1 | AA-Large | AAA | — | --- # SYSTEM: Chambers Counsel Source: https://www.freedesignmd.com/system/chambers-counsel --- name: "Chambers Counsel" description: "A law firm that earns trust through restraint. Deep oxford-navy ink on warm parchment, EB Garamond at oversized scale for partner names and case headings, Inter for body, a single muted gold-leaf accent reserved for case-number tags and verified-citation marks. Built for law firms, chambers, advisory practices, and policy institutes where gravitas is the brand." tags: [legal, editorial, premium, warm, serif] colors: primary: "#1a2540" secondary: "#6a6657" tertiary: "#1a2540" neutral: "#e9e2cf" surface: "#f3ecd8" typography: display: "EB Garamond" body: Inter mono: "JetBrains Mono" scale: hero: "7rem / 0.95 / 400 / -0.04em" h1: "4rem / 1.05 / 400 / -0.025em" h2: "1.875rem / 1.22 / 500 / -0.012em" body: "1.0625rem / 1.7 / 400 / -0.005em" radius: sm: 1px md: 2px lg: 3px pill: 9999px shadows: card: none button: none borders: card: "1px solid rgba(26,37,64,0.12)" divider: rgba(26,37,64,0.16) buttons: primary: background: #1a2540 color: #f3ecd8 border: none shape: sharp padding: 13px 26px font: 500 / 0.8125rem / 0.18em uppercase: true secondary: background: transparent color: #1a2540 border: 1px solid #1a2540 shape: sharp padding: 13px 26px font: 500 / 0.8125rem / 0.18em uppercase: true outline: background: transparent color: #1a2540 border: 1px solid rgba(26,37,64,0.20) shape: sharp padding: 13px 26px font: 500 / 0.8125rem / 0.18em uppercase: true ghost: background: transparent color: #6a6657 border: none shape: sharp padding: 13px 18px font: 500 / 0.8125rem / 0.18em uppercase: true charts: variant: "thin-bars" stroke_width: 1 fill_opacity: 0 gridlines: false bar_gap: 18px highlight: single dot_marker: false fonts_url: "https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Chambers Counsel ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Chambers Counsel** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#1a2540`, text `#f3ecd8`, padding `13px 26px`, weight `500`, uppercased. - **Secondary** — sharp shape, text `#1a2540`, border `1px solid #1a2540`, padding `13px 26px`, weight `500`, uppercased. - **Outline** — sharp shape, text `#1a2540`, border `1px solid rgba(26,37,64,0.20)`, padding `13px 26px`, weight `500`, uppercased. - **Ghost** — sharp shape, text `#6a6657`, padding `13px 18px`, weight `500`, uppercased. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#f3ecd8` - Border: `1px solid rgba(26,37,64,0.12)` - Shadow: `none` - Radius: `radius.lg` (`3px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `thin-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`EB Garamond`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Chambers Counsel is a law firm that earns trust through restraint. The page surface is warm parchment `#f3ecd8` — the color of a quality letterhead, never bright white. Partner names and case headings run in EB Garamond at 112px, weight 400 — the calm classical serif giving every name the weight of a court ruling without any heaviness. Body sits in Inter at 17px on a 1.7 leading. UI labels run in Inter 500 with extreme 0.18em uppercase tracking — the engraved-brass-plate caption voice. The single accent is muted gold-leaf `#a08648` that appears only on case-number tags, verified-citation marks, and the footnote dagger — the marks of authority, never decoration. The discipline is in the proportion: massive EB Garamond on warm parchment, generous negative space, and one gold-leaf mark per page that reads as a notarized seal. **Signature moves** - EB Garamond 400 at 112px for partner/case names — calm classical serif, gravitas through scale - Warm parchment surface `#f3ecd8` — never white, never beige - Gold-leaf `#a08648` exclusively on case-number tags + verified citations + footnote daggers - All UI labels uppercase 0.18em tracking — the engraved-brass-plate voice - Sharp 1-3px radius — almost zero, brass-plate precision - Section padding 200px desktop — the air IS the chambers ## 2. Palette ### Surfaces - **Parchment** `#f3ecd8` — page background (warm letterhead) - **Parchment Lift** `#e9e2cf` — secondary surfaces, footer - **Hairline** `rgba(26,37,64,0.12)` — every divider ### Ink - **Oxford Navy** `#1a2540` — text, headings, primary CTA fill - **Ink 50** `#6a6657` — secondary text, mono captions ### Accent - **Gold Leaf** `#a08648` — case-number tags, verified citations, footnote daggers - That is the only color in the system. ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Partner Name (Hero) | EB Garamond | 112px | 400 | 0.95 | -0.04em | | H1 | EB Garamond | 64px | 400 | 1.05 | -0.025em | | H2 | EB Garamond | 30px | 500 | 1.22 | -0.012em | | Pull Quote | EB Garamond (italic) | 26px | 400 | 1.32 | -0.01em | | Body | Inter | 17px | 400 | 1.7 | -0.005em | | UI / Button | Inter | 13px | 500 | 1.4 | 0.18em uppercase | | Caption / Date | JetBrains Mono | 11px | 500 | 1.0 | 0.10em uppercase | | Case Number | JetBrains Mono | 13px | 500 | 1.0 | 0.04em tabular-nums | EB Garamond at 400 only — the classical proportion breaks at any heavier weight. Italic reserved for case quotations and pull quotes. ## 4. Buttons ### Primary (Oxford Navy — Engage Counsel only) ```css background: #1a2540; color: #f3ecd8; padding: 13px 26px; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 500; ``` The 0.18em tracking is wider than typical UI — that is the engraved-brass-plate voice carried into the engagement gesture. Reads as a notarized seal, not a CTA button. ### Secondary (Navy Outline) - Transparent, 1px solid navy, navy text — same near-sharp shape, same wide tracking ### Outline & Ghost - Outline: transparent, 1px hairline at 20% navy - Ghost: no border, ink-50 uppercase, hover underlines ## 5. Cards ```css background: #f3ecd8; border: 1px solid rgba(26,37,64,0.12); border-radius: 3px; box-shadow: none; ``` NO shadows, NO inset highlights. Practice-area cards lift to parchment-lift surface with a 1px navy top border (3px wide) — the only chrome. ## 6. Charts Thin precise bars (3px wide, 18px gap). One bar in gold-leaf, others in 18% navy. NO gridlines. Y-axis labels in JetBrains Mono uppercase 11px. Charts are reserved for case-outcome breakdowns and read as exhibits. ## 7. Tabs Underline 1px in navy for the active state. Inactive tabs are ink-50 in uppercase 0.18em. The active label is set in EB Garamond italic at the same size — that is the rhythm change, not a color shift. ## 8. Spacing - Base 8px - Scale: `8, 16, 24, 32, 48, 64, 96, 128, 200, 280` - Section padding: 200px desktop, 96px mobile — the air IS the chambers ## 9. Do's & don'ts ✅ **Do** - Use EB Garamond at 400 only — anything heavier breaks the classical proportion - Hold the warm parchment surface — white reads as web app, beige reads as old textbook - Reserve gold-leaf for case-number tags + verified citations + footnote daggers exclusively - Use 0.18em uppercase tracking on every UI label — the engraved-brass-plate voice ❌ **Don't** - Use stock photos of pillars or scales of justice — the typography earns the gravitas - Use EB Garamond at 600+ — bold breaks the classical proportion - Use a second accent — gold-leaf alone, on three specific marks - Use any radius beyond 3px — corners must read as brass-plate, not pill --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1a2540` | | secondary | `#6a6657` | | tertiary | `#1a2540` | | neutral | `#e9e2cf` | | surface | `#f3ecd8` | ### Typography - **Display:** EB Garamond - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 7rem / 0.95 / 400 / -0.04em | | H1 | 4rem / 1.05 / 400 / -0.025em | | H2 | 1.875rem / 1.22 / 500 / -0.012em | | Body | 1.0625rem / 1.7 / 400 / -0.005em | ### Radius - sm: `1px` - md: `2px` - lg: `3px` - pill: `9999px` ### Shadows - **card:** `none` - **button:** `none` ### Borders - **card:** `1px solid rgba(26,37,64,0.12)` - **divider:** `rgba(26,37,64,0.16)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#1a2540` | | color | `#f3ecd8` | | border | `none` | | padding | `13px 26px` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.18em` | | uppercase | `true` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#1a2540` | | border | `1px solid #1a2540` | | padding | `13px 26px` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.18em` | | uppercase | `true` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#1a2540` | | border | `1px solid rgba(26,37,64,0.20)` | | padding | `13px 26px` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.18em` | | uppercase | `true` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#6a6657` | | border | `none` | | padding | `13px 18px` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.18em` | | uppercase | `true` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1` | | fillOpacity | `0` | | gridlines | `false` | | barGap | `18px` | | highlight | `single` | | dotMarker | `false` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(26, 37, 64, 0.92)`, shadow: `0 4px 20px -8px rgba(26, 37, 64, 0.4)` - **focus** — outline: `1.5px solid #1a2540`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#1a2540`, color: `#f3ecd8` #### Input - **hover** — border: `1px solid #1a2540` - **focus** — border: `1px solid #1a2540`, shadow: `0 1px 0 0 #1a2540` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #1a2540` #### Tab - **hover** — color: `#1a2540` - **focus** — outline: `1.5px solid #1a2540`, outline-offset: `3px` - **selected** — color: `#1a2540`, border: `0 0 2px 0 solid #1a2540` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#1a2540`, underline `always` - **blockquote:** border `4px solid #1a2540`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(26, 37, 64, 0.06)`, color `#1a2540` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 12.87:1 | AA | AAA | — | | Body text on canvas | 11.75:1 | AA | AAA | — | | Muted text on surface | 4.88:1 | AA | AA | — | | Accent on surface | 12.87:1 | AA-Large | AAA | — | | Accent on canvas | 11.75:1 | AA-Large | AAA | — | --- # SYSTEM: Bureau Data Source: https://www.freedesignmd.com/system/bureau-data --- name: "Bureau Data" description: "A research bureau that publishes data the way a quality newspaper does. Cream-paper surfaces, Source Serif 4 for prose, IBM Plex Sans for UI labels, IBM Plex Mono with tabular-nums for every figure, a single rust accent reserved for footnote daggers and the active data point on charts. Built for data journalism, policy research, think-tanks, and white-papers that need to read as authoritative without ever shouting." tags: [editorial, research, serif, warm, data] colors: primary: "#1f1c17" secondary: "#6e685c" tertiary: "#1f1c17" neutral: "#ece4cd" surface: "#f5eed7" typography: display: "Source Serif 4" body: "Source Serif 4" mono: "IBM Plex Mono" scale: hero: "5.5rem / 1.02 / 600 / -0.025em" h1: "3.25rem / 1.1 / 600 / -0.018em" h2: "1.75rem / 1.28 / 600 / -0.012em" body: "1.125rem / 1.72 / 400 / -0.003em" radius: sm: 2px md: 3px lg: 4px pill: 9999px shadows: card: none button: none borders: card: "1px solid rgba(31,28,23,0.10)" divider: rgba(31,28,23,0.14) buttons: primary: background: #1f1c17 color: #f5eed7 border: none shape: sharp padding: 10px 20px font: 500 / 0.8125rem secondary: background: transparent color: #1f1c17 border: 1px solid rgba(31,28,23,0.20) shape: sharp padding: 10px 20px font: 500 / 0.8125rem outline: background: transparent color: #1f1c17 border: 1px solid rgba(31,28,23,0.16) shape: sharp padding: 10px 20px font: 500 / 0.8125rem ghost: background: transparent color: #6e685c border: none shape: sharp padding: 10px 14px font: 500 / 0.8125rem charts: variant: "thin-bars" stroke_width: 1.25 fill_opacity: 0 gridlines: true bar_gap: 5px highlight: single dot_marker: true fonts_url: "https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap" dependencies: ["lucide-react"] --- # Bureau Data ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Bureau Data** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#1f1c17`, text `#f5eed7`, padding `10px 20px`, weight `500`. - **Secondary** — sharp shape, text `#1f1c17`, border `1px solid rgba(31,28,23,0.20)`, padding `10px 20px`, weight `500`. - **Outline** — sharp shape, text `#1f1c17`, border `1px solid rgba(31,28,23,0.16)`, padding `10px 20px`, weight `500`. - **Ghost** — sharp shape, text `#6e685c`, padding `10px 14px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#f5eed7` - Border: `1px solid rgba(31,28,23,0.10)` - Shadow: `none` - Radius: `radius.lg` (`4px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `thin-bars` - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Source Serif 4`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Source Serif 4`)** — paragraphs, labels, button text, form inputs. - **Mono (`IBM Plex Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Bureau Data publishes research the way a quality newspaper does. The page surface is cream paper `#f5eed7` — the warm tone of a good white paper, never bright. Headlines run in Source Serif 4 at 88px, weight 600, with a tight optical-size variant — text-grade serif that reads as authoritative reporting, not display drama. Body sits in Source Serif 4 at 18px on a 1.72 leading — long-form readable. UI labels switch to IBM Plex Sans for a clean sans counterpoint. Every percentage, count, year, dataset value runs in IBM Plex Mono with tabular-nums — column-aligned to the cell. The single accent is rust `#9c3a1a` that appears only on footnote daggers, the active data point in chart hovers, and the highlighted figure in a sentence — the marks that say "look here, this is the finding." The discipline is in the readability: Source Serif at long-form sizes, generous leading, and the rust used as a single editorial pen-mark per page. **Signature moves** - Source Serif 4 600 at 88px for headlines — text-grade authority, not display drama - 18px body on 1.72 leading — long-form readable, white-paper voice - Cream paper surface `#f5eed7` — warm white-paper, never bright - Rust `#9c3a1a` exclusively on footnote daggers + active chart point + highlighted figure - IBM Plex Mono with tabular-nums on every percentage, count, year, dataset value - Sharp 2-4px radius — the printed-page voice, never pill ## 2. Palette ### Surfaces - **Cream Paper** `#f5eed7` — page background (warm white-paper) - **Cream Lift** `#ece4cd` — secondary surfaces, table headers, sidebar - **Hairline** `rgba(31,28,23,0.14)` — every divider ### Ink - **Ink** `#1f1c17` — text, headings, primary CTA fill (warm near-black) - **Ink 50** `#6e685c` — secondary text, mono labels, captions ### Accent - **Rust** `#9c3a1a` — footnote daggers, active chart hover point, highlighted figure - **Rust Soft** `rgba(156,58,26,0.10)` — chart fill on hovered bar, focus ring ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Headline (Hero) | Source Serif 4 | 88px | 600 | 1.02 | -0.025em | | H1 | Source Serif 4 | 52px | 600 | 1.1 | -0.018em | | H2 | Source Serif 4 | 28px | 600 | 1.28 | -0.012em | | Pull Quote | Source Serif 4 (italic) | 24px | 400 | 1.45 | -0.008em | | Body | Source Serif 4 | 18px | 400 | 1.72 | -0.003em | | UI / Button | IBM Plex Sans | 13px | 500 | 1.4 | 0 | | Figure / Percentage | IBM Plex Mono | 14px | 500 | 1.0 | 0 tabular-nums | | Dataset Value | IBM Plex Mono | 13px | 500 | 1.0 | 0 tabular-nums | | Footnote / Caption | IBM Plex Mono | 11px | 500 | 1.0 | 0.06em uppercase | Source Serif 4 carries everything that is prose; IBM Plex Sans carries everything that is UI; IBM Plex Mono carries everything that is data. The three roles never overlap. ## 4. Buttons ### Primary (Ink Sharp) ```css background: #1f1c17; color: #f5eed7; padding: 10px 20px; border-radius: 3px; font-weight: 500; ``` Sharp 3px corners read as a printed download tag, not a web button. ### Secondary (Outline) - Transparent, 1px hairline at 20% ink, ink text — same sharp shape ### Outline & Ghost - Outline: transparent, 1px hairline at 16% ink - Ghost: no border, ink-50, hover underlines ## 5. Cards ```css background: #f5eed7; border: 1px solid rgba(31,28,23,0.10); border-radius: 4px; box-shadow: none; ``` NO shadows. Datapoint cards lift to cream-lift surface with a 1px ink top border (3px wide) — the only chrome. ## 6. Charts Thin precise bars (4px wide, 5px gap) with dashed gridlines at 14% ink — used for time-series and ranking charts. One bar in rust (the highlighted finding), others in 22% ink. Line charts at 1.25px ink, ending in a rust dot marker. Y-axis labels in IBM Plex Mono uppercase 11px aligned to the right. The chart-source citation runs below in Plex Mono italic — every chart cites its source. ## 7. Tabs Underline 1.5px in ink for the active state. Inactive tabs are ink-50 in IBM Plex Sans 500. Hover lifts to ink. Tabs sit on a 1px hairline baseline. ## 8. Spacing - Base 8px (text-baseline aware) - Scale: `8, 16, 24, 32, 48, 64, 96, 128, 160` - Section padding: 128px desktop, 64px mobile — long-form rhythm ## 9. Do's & don'ts ✅ **Do** - Use Source Serif 4 600 for headlines — text-grade serif at scale, not display drama - Hold the cream paper surface — bright white reads as web app, beige reads as old textbook - Reserve rust for footnote daggers + active chart point + highlighted figure exclusively - Put every percentage, count, year, dataset value in IBM Plex Mono with tabular-nums - Cite every chart source in Plex Mono italic below the chart ❌ **Don't** - Use Source Serif 4 for UI labels — Plex Sans handles UI, Plex Mono handles data - Use rust for buttons, accents, or large surfaces — three editorial surfaces only - Use 16px body — 18px on 1.72 leading is the white-paper readability minimum - Use uppercase tracking on the primary CTA — this is reporting, not a brass plate --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1f1c17` | | secondary | `#6e685c` | | tertiary | `#1f1c17` | | neutral | `#ece4cd` | | surface | `#f5eed7` | ### Typography - **Display:** Source Serif 4 - **Body:** Source Serif 4 - **Mono:** IBM Plex Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 5.5rem / 1.02 / 600 / -0.025em | | H1 | 3.25rem / 1.1 / 600 / -0.018em | | H2 | 1.75rem / 1.28 / 600 / -0.012em | | Body | 1.125rem / 1.72 / 400 / -0.003em | ### Radius - sm: `2px` - md: `3px` - lg: `4px` - pill: `9999px` ### Shadows - **card:** `none` - **button:** `none` ### Borders - **card:** `1px solid rgba(31,28,23,0.10)` - **divider:** `rgba(31,28,23,0.14)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#1f1c17` | | color | `#f5eed7` | | border | `none` | | padding | `10px 20px` | | fontWeight | `500` | | fontSize | `0.8125rem` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#1f1c17` | | border | `1px solid rgba(31,28,23,0.20)` | | padding | `10px 20px` | | fontWeight | `500` | | fontSize | `0.8125rem` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#1f1c17` | | border | `1px solid rgba(31,28,23,0.16)` | | padding | `10px 20px` | | fontWeight | `500` | | fontSize | `0.8125rem` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#6e685c` | | border | `none` | | padding | `10px 14px` | | fontWeight | `500` | | fontSize | `0.8125rem` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1.25` | | fillOpacity | `0` | | gridlines | `true` | | barGap | `5px` | | highlight | `single` | | dotMarker | `true` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(31, 28, 23, 0.92)`, shadow: `0 4px 20px -8px rgba(31, 28, 23, 0.4)` - **focus** — outline: `1.5px solid #1f1c17`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#1f1c17`, color: `#f5eed7` #### Input - **hover** — border: `1px solid #1f1c17` - **focus** — border: `1px solid #1f1c17`, shadow: `0 1px 0 0 #1f1c17` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #1f1c17` #### Tab - **hover** — color: `#1f1c17` - **focus** — outline: `1.5px solid #1f1c17`, outline-offset: `3px` - **selected** — color: `#1f1c17`, border: `0 0 2px 0 solid #1f1c17` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#1f1c17`, underline `always` - **blockquote:** border `4px solid #1f1c17`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(31, 28, 23, 0.06)`, color `#1f1c17` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 14.63:1 | AA | AAA | — | | Body text on canvas | 13.38:1 | AA | AAA | — | | Muted text on surface | 4.76:1 | AA | AA | — | | Accent on surface | 14.63:1 | AA-Large | AAA | — | | Accent on canvas | 13.38:1 | AA-Large | AAA | — | --- # SYSTEM: Atelier Glass Source: https://www.freedesignmd.com/system/atelier-glass --- name: "Atelier Glass" description: "A studio interface built around real glassmorphism — frosted backdrop-blur cards floating over a soft tonal lavender-bone backdrop. Plus Jakarta Sans for UI, Spectral italic for accent display, a single indigo reserved for the active panel ring and the primary CTA. Built for creative studios, design tools, and product surfaces where the glass IS the interface chrome." tags: [glass, modern, premium, minimal, saas] colors: primary: "#1a1830" secondary: "#6b6987" tertiary: "#1a1830" neutral: "#e6e3f0" surface: "#eeeaf5" typography: display: Spectral body: "Plus Jakarta Sans" mono: "JetBrains Mono" scale: hero: "5rem / 1.02 / 500 / -0.035em" h1: "3rem / 1.1 / 600 / -0.025em" h2: "1.625rem / 1.25 / 600 / -0.012em" body: "1.0625rem / 1.62 / 400 / -0.005em" radius: sm: 10px md: 16px lg: 22px pill: 9999px shadows: card: "rgba(26,24,48,0.05) 0 1px 2px, rgba(26,24,48,0.04) 0 8px 24px -8px" button: none borders: card: "1px solid rgba(255,255,255,0.55)" divider: rgba(26,24,48,0.10) buttons: primary: background: #3d3a8a color: #f4f2fb border: none shape: rounded padding: 11px 22px font: 600 / 0.875rem secondary: background: rgba(255,255,255,0.55) color: #1a1830 border: 1px solid rgba(26,24,48,0.10) shape: rounded padding: 11px 22px font: 500 / 0.875rem outline: background: transparent color: #1a1830 border: 1px solid rgba(26,24,48,0.18) shape: rounded padding: 11px 22px font: 500 / 0.875rem ghost: background: transparent color: #6b6987 border: none shape: rounded padding: 11px 16px font: 500 / 0.875rem charts: variant: "thin-bars" stroke_width: 1.5 fill_opacity: 0.1 gridlines: false bar_gap: 5px highlight: single dot_marker: true fonts_url: "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Spectral:ital,wght@0,400;0,500;1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Atelier Glass ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Atelier Glass** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#3d3a8a`, text `#f4f2fb`, padding `11px 22px`, weight `600`. - **Secondary** — rounded shape, bg `rgba(255,255,255,0.55)`, text `#1a1830`, border `1px solid rgba(26,24,48,0.10)`, padding `11px 22px`, weight `500`. - **Outline** — rounded shape, text `#1a1830`, border `1px solid rgba(26,24,48,0.18)`, padding `11px 22px`, weight `500`. - **Ghost** — rounded shape, text `#6b6987`, padding `11px 16px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#eeeaf5` - Border: `1px solid rgba(255,255,255,0.55)` - Shadow: `rgba(26,24,48,0.05) 0 1px 2px, rgba(26,24,48,0.04) 0 8px 24px -8px` - Radius: `radius.lg` (`22px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `pill`. Segmented control inside a tinted track. Active tab gets a filled pill in the accent color. #### Charts - Bar/line variant: `thin-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Spectral`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Plus Jakarta Sans`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Atelier Glass is a studio interface built around real glassmorphism. The page surface is a soft tonal lavender-bone `#eeeaf5` — never white, never grey. Cards are frosted glass: `background: rgba(255,255,255,0.55)`, `backdrop-filter: blur(20px)`, with a 1px white inner border at 55% opacity that picks up the page tint and reads as light bouncing through the pane. Display headlines run in Spectral 500 at 80px with one italic word per headline — the calligraphic accent through frosted glass. Body sits in Plus Jakarta Sans at 17px on a 1.62 leading. The single accent is deep indigo `#3d3a8a` reserved for the primary CTA, the active panel ring, and the focus state — never as a background, never as a fill. The discipline is in the glass behaviour: every elevated surface uses `backdrop-filter: blur(20px) saturate(1.4)` with a 55% white tint — the saturation lift is what makes the lavender bleed through and reads as actual frosted glass, not as a grey overlay. **Signature moves** - Real `backdrop-filter: blur(20px) saturate(1.4)` on every elevated card - Lavender-bone surface `#eeeaf5` — the tint that bleeds through the glass IS the system - Spectral 500 italic accent on one word per headline — the calligraphic moment - Indigo `#3d3a8a` exclusively on primary CTA + active panel ring + focus state - 1px inner border at 55% white on every glass card — the bouncing-light edge ## 2. Palette ### Surfaces - **Lavender Bone** `#eeeaf5` — page background (the tint that bleeds through glass) - **Lavender Lift** `#e6e3f0` — secondary tonal surface, tab rail - **Glass** `rgba(255,255,255,0.55)` — frosted card fill (always with backdrop-blur 20px + saturate 1.4) - **Glass Edge** `rgba(255,255,255,0.55)` — 1px inner border on every glass card ### Ink - **Ink** `#1a1830` — text, headings (deep indigo-black, slight purple undertone) - **Ink 50** `#6b6987` — secondary text, mono labels ### Accent - **Indigo** `#3d3a8a` — primary CTA, active panel ring, focus state - **Indigo Soft** `rgba(61,58,138,0.12)` — focus ring background, hovered state ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Spectral | 80px | 500 | 1.02 | -0.035em | | Hero Italic Word | Spectral (italic) | 80px | 500 | 1.02 | -0.035em | | H1 | Plus Jakarta Sans | 48px | 600 | 1.1 | -0.025em | | H2 | Plus Jakarta Sans | 26px | 600 | 1.25 | -0.012em | | Body | Plus Jakarta Sans | 17px | 400 | 1.62 | -0.005em | | UI / Button | Plus Jakarta Sans | 14px | 600 | 1.4 | 0 | | Caption | JetBrains Mono | 11px | 500 | 1.0 | 0.08em uppercase | | Number | JetBrains Mono | 13px | 500 | 1.0 | 0 tabular-nums | Spectral italic is the signature moment — exactly one word per headline gets the italic. Anything more and the page reads as a wedding invitation. ## 4. Buttons ### Primary (Indigo Rounded) ```css background: #3d3a8a; color: #f4f2fb; padding: 11px 22px; border-radius: 16px; font-weight: 600; ``` The 16px radius matches the glass cards — the button reads as a solid indigo glass tile sitting alongside the frosted ones. ### Secondary (Glass) ```css background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(1.4); border: 1px solid rgba(26,24,48,0.10); ``` The secondary IS a glass tile — same blur, same border, smaller scale. ### Outline & Ghost - Outline: transparent, 1px hairline at 18% ink - Ghost: no border, ink-50, hover lifts to glass ## 5. Cards ```css background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(1.4); border: 1px solid rgba(255,255,255,0.55); border-radius: 22px; box-shadow: rgba(26,24,48,0.05) 0 1px 2px, rgba(26,24,48,0.04) 0 8px 24px -8px; ``` The `saturate(1.4)` is what separates this from generic 2018 glassmorphism — it pulls the lavender tint forward through the glass instead of greying it out. The 1px inner border at 55% white catches the page tint and reads as light bouncing off the front face of the pane. ## 6. Charts Thin precise bars (4px wide, 5px gap). One bar in indigo, others in 22% ink. Line charts at 1.5px ink with a 10% indigo fill, ending in an indigo dot marker. NO gridlines — the glass card itself frames the chart. ## 7. Tabs Pill tabs (9999px radius). Active = indigo-soft background fill, ink text, no border. Inactive = transparent, ink-50. Sits inside a glass rail. ## 8. Spacing - Base 4px - Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96` - Section padding: 96px desktop, 48px mobile ## 9. Do's & don'ts ✅ **Do** - Use real `backdrop-filter: blur(20px) saturate(1.4)` — the saturation lift is non-negotiable - Hold the lavender-bone page surface — the tint that bleeds through the glass IS the system - Reserve indigo for primary CTA + active panel ring + focus state — never as a background - Use Spectral italic on exactly one word per headline — the calligraphic moment ❌ **Don't** - Use white or grey backgrounds — the tint is what makes the glass read as glass - Use `opacity: 0.5` instead of `backdrop-filter` — that is fake glass and reads as fog - Use indigo as a fill or background — three surfaces only - Use Spectral for body — Plus Jakarta Sans handles all prose; Spectral is accent only --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1a1830` | | secondary | `#6b6987` | | tertiary | `#1a1830` | | neutral | `#e6e3f0` | | surface | `#eeeaf5` | ### Typography - **Display:** Spectral - **Body:** Plus Jakarta Sans - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 5rem / 1.02 / 500 / -0.035em | | H1 | 3rem / 1.1 / 600 / -0.025em | | H2 | 1.625rem / 1.25 / 600 / -0.012em | | Body | 1.0625rem / 1.62 / 400 / -0.005em | ### Radius - sm: `10px` - md: `16px` - lg: `22px` - pill: `9999px` ### Shadows - **card:** `rgba(26,24,48,0.05) 0 1px 2px, rgba(26,24,48,0.04) 0 8px 24px -8px` - **button:** `none` ### Borders - **card:** `1px solid rgba(255,255,255,0.55)` - **divider:** `rgba(26,24,48,0.10)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#3d3a8a` | | color | `#f4f2fb` | | border | `none` | | padding | `11px 22px` | | fontWeight | `600` | | fontSize | `0.875rem` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `rgba(255,255,255,0.55)` | | color | `#1a1830` | | border | `1px solid rgba(26,24,48,0.10)` | | padding | `11px 22px` | | fontWeight | `500` | | fontSize | `0.875rem` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#1a1830` | | border | `1px solid rgba(26,24,48,0.18)` | | padding | `11px 22px` | | fontWeight | `500` | | fontSize | `0.875rem` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#6b6987` | | border | `none` | | padding | `11px 16px` | | fontWeight | `500` | | fontSize | `0.875rem` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1.5` | | fillOpacity | `0.1` | | gridlines | `false` | | barGap | `5px` | | highlight | `single` | | dotMarker | `true` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(26, 24, 48, 0.92)`, shadow: `0 4px 20px -8px rgba(26, 24, 48, 0.4)` - **focus** — outline: `1.5px solid #1a1830`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#1a1830`, color: `#eeeaf5` #### Input - **hover** — border: `1px solid #1a1830` - **focus** — border: `1px solid #1a1830`, shadow: `0 1px 0 0 #1a1830` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #1a1830` #### Tab - **hover** — color: `#1a1830` - **focus** — outline: `1.5px solid #1a1830`, outline-offset: `3px` - **selected** — color: `#1a1830`, border: `0 0 2px 0 solid #1a1830` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#1a1830`, underline `always` - **blockquote:** border `4px solid #1a1830`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(26, 24, 48, 0.06)`, color `#1a1830` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 14.56:1 | AA | AAA | — | | Body text on canvas | 13.65:1 | AA | AAA | — | | Muted text on surface | 4.44:1 | AA | AA-Large | `#666581` → 4.73:1 (AA) | | Accent on surface | 14.56:1 | AA-Large | AAA | — | | Accent on canvas | 13.65:1 | AA-Large | AAA | — | --- # SYSTEM: Dawn Quartz Source: https://www.freedesignmd.com/system/dawn-quartz --- name: "Dawn Quartz" description: "A soft tonal gradient that stays in one hue. Quartz-pink shading down to bone-white across the page, Manrope for UI, Fraunces for display, graphite ink, a single muted plum accent reserved for the primary CTA and the active step indicator. Built for early-stage product pages, wellness brands, and onboarding flows that need warmth without sweetness." tags: [gradient, warm, minimal, premium, modern] colors: primary: "#1f1a22" secondary: "#6f6770" tertiary: "#1f1a22" neutral: "#f0e8eb" surface: "#f7eef0" typography: display: Fraunces body: Manrope mono: "JetBrains Mono" scale: hero: "5.5rem / 1 / 400 / -0.035em" h1: "3.25rem / 1.08 / 400 / -0.025em" h2: "1.75rem / 1.22 / 500 / -0.012em" body: "1.0625rem / 1.65 / 400 / -0.005em" radius: sm: 6px md: 12px lg: 18px pill: 9999px shadows: card: "rgba(31,26,34,0.04) 0 1px 2px, rgba(31,26,34,0.04) 0 8px 24px -10px" button: none borders: card: "1px solid rgba(31,26,34,0.08)" divider: rgba(31,26,34,0.10) buttons: primary: background: #6b3550 color: #f7eef0 border: none shape: rounded padding: 12px 24px font: 600 / 0.875rem secondary: background: rgba(255,255,255,0.65) color: #1f1a22 border: 1px solid rgba(31,26,34,0.10) shape: rounded padding: 12px 24px font: 500 / 0.875rem outline: background: transparent color: #1f1a22 border: 1px solid rgba(31,26,34,0.18) shape: rounded padding: 12px 24px font: 500 / 0.875rem ghost: background: transparent color: #6f6770 border: none shape: rounded padding: 12px 16px font: 500 / 0.875rem charts: variant: "thin-bars" stroke_width: 1.5 fill_opacity: 0.08 gridlines: false bar_gap: 5px highlight: single dot_marker: true fonts_url: "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Dawn Quartz ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Dawn Quartz** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#6b3550`, text `#f7eef0`, padding `12px 24px`, weight `600`. - **Secondary** — rounded shape, bg `rgba(255,255,255,0.65)`, text `#1f1a22`, border `1px solid rgba(31,26,34,0.10)`, padding `12px 24px`, weight `500`. - **Outline** — rounded shape, text `#1f1a22`, border `1px solid rgba(31,26,34,0.18)`, padding `12px 24px`, weight `500`. - **Ghost** — rounded shape, text `#6f6770`, padding `12px 16px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#f7eef0` - Border: `1px solid rgba(31,26,34,0.08)` - Shadow: `rgba(31,26,34,0.04) 0 1px 2px, rgba(31,26,34,0.04) 0 8px 24px -10px` - Radius: `radius.lg` (`18px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `thin-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Fraunces`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Manrope`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Dawn Quartz is a soft tonal gradient that stays in one hue. The page background runs from quartz-pink `#f7eef0` at the top down to bone-white `#fbf6f7` at the bottom — a 5% lightness shift across 100vh, single-hue, never sunset. Display headlines run in Fraunces 400 at 88px — the soft-modern serif sits warm on the quartz field. Body sits in Manrope at 17px on a 1.65 leading. The single accent is muted plum `#6b3550` — deep enough to read as ink-adjacent on the warm field, never pink, never burgundy. Plum appears only on the primary CTA, the active step indicator, and the focus ring. The discipline is in the gradient: single-hue, low-amplitude, never two-color. The plum is what gives the system its signature — a muted wine-mark on a warm dawn field. **Signature moves** - Single-hue tonal gradient: quartz `#f7eef0` → bone-white `#fbf6f7` across 100vh - Fraunces 400 at 88px for display — soft-modern serif, never bold - Plum `#6b3550` exclusively on primary CTA + active step indicator + focus ring - Glass secondary buttons (`rgba(255,255,255,0.65)`) — pick up the gradient through the white tint - Soft 12-18px radius — warm and reachable, never pill, never sharp ## 2. Palette ### Surfaces - **Quartz** `#f7eef0` — page top (warm pink-bone) - **Bone Wash** `#fbf6f7` — page bottom (the gradient endpoint) - **Quartz Lift** `#f0e8eb` — secondary surfaces - **Glass** `rgba(255,255,255,0.65)` — secondary button tint ### Ink - **Graphite** `#1f1a22` — text, headings (warm near-black, slight purple undertone) - **Ink 50** `#6f6770` — secondary text, mono labels ### Accent - **Plum** `#6b3550` — primary CTA, active step indicator, focus ring - **Plum Soft** `rgba(107,53,80,0.10)` — focus ring background, hovered step ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Fraunces | 88px | 400 | 1.0 | -0.035em | | H1 | Fraunces | 52px | 400 | 1.08 | -0.025em | | H2 | Manrope | 28px | 500 | 1.22 | -0.012em | | Pull Quote | Fraunces (italic) | 24px | 400 | 1.4 | -0.008em | | Body | Manrope | 17px | 400 | 1.65 | -0.005em | | UI / Button | Manrope | 14px | 600 | 1.4 | 0 | | Caption | JetBrains Mono | 11px | 500 | 1.0 | 0.10em uppercase | | Number | JetBrains Mono | 13px | 500 | 1.0 | 0 tabular-nums | Fraunces 400 only — bold breaks the soft-modern proportion. The optical-size axis lets the glyphs breathe at 88px without ever feeling display-pretentious. ## 4. Buttons ### Primary (Plum Rounded) ```css background: #6b3550; color: #f7eef0; padding: 12px 24px; border-radius: 12px; font-weight: 600; ``` The 12px radius is the warm-reachable shape — never pill (too brand-y), never sharp (too cold). ### Secondary (Glass) ```css background: rgba(255,255,255,0.65); border: 1px solid rgba(31,26,34,0.10); ``` The white tint picks up the quartz field underneath — secondary buttons read as soft frosted tiles, not as solid white. ### Outline & Ghost - Outline: transparent, 1px hairline at 18% graphite - Ghost: no border, ink-50, hover lifts to graphite ## 5. Cards ```css background: rgba(255,255,255,0.65); border: 1px solid rgba(31,26,34,0.08); border-radius: 18px; box-shadow: rgba(31,26,34,0.04) 0 1px 2px, rgba(31,26,34,0.04) 0 8px 24px -10px; ``` Glass tint on the gradient = the quartz bleeds through. The 24px y-offset shadow at -10px spread is the soft-dawn lift — present, never heavy. ## 6. Charts Thin precise bars (4px wide, 5px gap). One bar in plum, others in 22% graphite. Line charts at 1.5px graphite with an 8% plum fill, ending in a plum dot marker. NO gridlines. ## 7. Tabs Underline 1.5px in plum for the active state. Inactive tabs are ink-50 in Manrope 600. Hover lifts to graphite. ## 8. Spacing - Base 4px - Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128` - Section padding: 96px desktop, 48px mobile ## 9. Do's & don'ts ✅ **Do** - Use the single-hue gradient: quartz → bone-white, 5% lightness shift, never sunset - Use Fraunces at 400 only — bold breaks the soft-modern proportion - Reserve plum for primary CTA + active step indicator + focus ring exclusively - Use glass secondary buttons that pick up the gradient through the white tint ❌ **Don't** - Use a two-hue gradient (peach→pink, purple→blue) — single-hue tonal only - Use Fraunces at 600+ — the soft-modern proportion needs 400 - Use bright pink or burgundy for plum — `#6b3550` is muted wine, never neon, never red - Use solid white cards — the white tint that bleeds the gradient is the system's signature --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1f1a22` | | secondary | `#6f6770` | | tertiary | `#1f1a22` | | neutral | `#f0e8eb` | | surface | `#f7eef0` | ### Typography - **Display:** Fraunces - **Body:** Manrope - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 5.5rem / 1 / 400 / -0.035em | | H1 | 3.25rem / 1.08 / 400 / -0.025em | | H2 | 1.75rem / 1.22 / 500 / -0.012em | | Body | 1.0625rem / 1.65 / 400 / -0.005em | ### Radius - sm: `6px` - md: `12px` - lg: `18px` - pill: `9999px` ### Shadows - **card:** `rgba(31,26,34,0.04) 0 1px 2px, rgba(31,26,34,0.04) 0 8px 24px -10px` - **button:** `none` ### Borders - **card:** `1px solid rgba(31,26,34,0.08)` - **divider:** `rgba(31,26,34,0.10)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#6b3550` | | color | `#f7eef0` | | border | `none` | | padding | `12px 24px` | | fontWeight | `600` | | fontSize | `0.875rem` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `rgba(255,255,255,0.65)` | | color | `#1f1a22` | | border | `1px solid rgba(31,26,34,0.10)` | | padding | `12px 24px` | | fontWeight | `500` | | fontSize | `0.875rem` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#1f1a22` | | border | `1px solid rgba(31,26,34,0.18)` | | padding | `12px 24px` | | fontWeight | `500` | | fontSize | `0.875rem` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#6f6770` | | border | `none` | | padding | `12px 16px` | | fontWeight | `500` | | fontSize | `0.875rem` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1.5` | | fillOpacity | `0.08` | | gridlines | `false` | | barGap | `5px` | | highlight | `single` | | dotMarker | `true` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 8px 24px -10px rgba(31, 26, 34, 0.35)`, transform: `translateY(-1px)`, filter: `brightness(1.02)` - **focus** — outline: `2px solid rgba(31, 26, 34, 0.4)`, outline-offset: `3px` - **active** — transform: `translateY(0) scale(0.98)` - **disabled** — opacity: `0.4`, filter: `saturate(0.5)` - **loading** — opacity: `0.65` - **selected** — bg: `rgba(31, 26, 34, 0.18)`, color: `#1f1a22` #### Input - **hover** — bg: `rgba(31, 26, 34, 0.03)`, border: `1px solid rgba(31, 26, 34, 0.4)` - **focus** — border: `1px solid rgba(31, 26, 34, 0.6)`, shadow: `0 0 0 4px rgba(31, 26, 34, 0.12)` - **disabled** — opacity: `0.4` - **error** — border: `1px solid rgba(244,114,182,0.7)`, shadow: `0 0 0 4px rgba(244,114,182,0.15)` #### Card - **hover** — shadow: `0 16px 40px -16px rgba(31, 26, 34, 0.3)`, transform: `translateY(-3px)` - **selected** — bg: `rgba(31, 26, 34, 0.04)`, border: `1px solid rgba(31, 26, 34, 0.5)` - **dragging** — transform: `scale(1.03) rotate(-0.8deg)`, opacity: `0.92` #### Tab - **hover** — bg: `rgba(31, 26, 34, 0.08)`, color: `#1f1a22` - **focus** — outline: `2px solid rgba(31, 26, 34, 0.4)`, outline-offset: `2px` - **selected** — bg: `rgba(31, 26, 34, 0.16)`, color: `#1f1a22` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Soft fade.** Long, gentle transitions with a symmetric easing curve. Motion is calming, never intrusive. ```css transition: all 400ms cubic-bezier(0.45, 0.05, 0.55, 0.95); ``` | Token | Value | |-------|-------| | duration.instant | `120ms` | | duration.fast | `240ms` | | duration.base | `400ms` | | duration.slow | `600ms` | | easing.standard | `cubic-bezier(0.45, 0.05, 0.55, 0.95)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.45, 1.4, 0.55, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the tone separates, not the shadow. | | level1 | `0 2px 6px -2px rgba(31, 26, 34, 0.12)` | Soft tinted lift. | | level2 | `0 8px 24px -10px rgba(31, 26, 34, 0.2)` | Floating card — pastel-tinted shadow. | | level3 | `0 16px 48px -16px rgba(31, 26, 34, 0.28)` | Sheet — visible tinted glow. | | level4 | `0 32px 80px -24px rgba(31, 26, 34, 0.4)` | Modal — tinted wash, scrim required. | ### Content - **measure:** `64ch` (max line length for body prose) - **paragraph spacing:** `1.35em` - **list indent:** `1.5em` - **list gap:** `0.6em` - **link:** color `#1f1a22`, underline `hover` - **blockquote:** border `2px solid rgba(31, 26, 34, 0.5)`, padding `0.9em 1.2em` - **code:** background `rgba(31, 26, 34, 0.1)`, color `#1f1a22` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 15:1 | AA | AAA | — | | Body text on canvas | 14.2:1 | AA | AAA | — | | Muted text on surface | 4.79:1 | AA | AA | — | | Accent on surface | 15:1 | AA-Large | AAA | — | | Accent on canvas | 14.2:1 | AA-Large | AAA | — | --- # SYSTEM: Bronze Foundry Source: https://www.freedesignmd.com/system/bronze-foundry --- name: "Bronze Foundry" description: "A workshop interface cast in brushed bronze. Warm metallic tonal surfaces with a subtle vertical sheen, Fraunces for display and Inter for UI, sharp 2px corners, a single patina-green accent reserved for verified-cast marks and the primary CTA. Built for craft brands, manufacturing portfolios, and premium hardware product pages where the surface itself reads as machined metal." tags: [metallic, premium, warm, modern, minimal] colors: primary: "#1a1410" secondary: "#6e5e4c" tertiary: "#1a1410" neutral: "#d8c4a8" surface: "#e6d3b5" typography: display: Fraunces body: Inter mono: "JetBrains Mono" scale: hero: "7rem / 0.94 / 400 / -0.04em" h1: "4rem / 1.05 / 400 / -0.025em" h2: "1.875rem / 1.22 / 500 / -0.012em" body: "1.0625rem / 1.65 / 400 / -0.005em" radius: sm: 1px md: 2px lg: 3px pill: 9999px shadows: card: "rgba(26,20,16,0.06) 0 1px 2px, inset 0 1px 0 rgba(255,240,215,0.40)" button: none borders: card: "1px solid rgba(26,20,16,0.14)" divider: rgba(26,20,16,0.18) buttons: primary: background: #1a1410 color: #e6d3b5 border: none shape: sharp padding: 12px 24px font: 600 / 0.8125rem / 0.14em uppercase: true secondary: background: rgba(26,20,16,0.04) color: #1a1410 border: 1px solid rgba(26,20,16,0.20) shape: sharp padding: 12px 24px font: 600 / 0.8125rem / 0.14em uppercase: true outline: background: transparent color: #1a1410 border: 1px solid rgba(26,20,16,0.16) shape: sharp padding: 12px 24px font: 600 / 0.8125rem / 0.14em uppercase: true ghost: background: transparent color: #6e5e4c border: none shape: sharp padding: 12px 16px font: 600 / 0.8125rem / 0.14em uppercase: true charts: variant: "thin-bars" stroke_width: 1.25 fill_opacity: 0 gridlines: false bar_gap: 10px highlight: single dot_marker: false fonts_url: "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Bronze Foundry ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Bronze Foundry** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#1a1410`, text `#e6d3b5`, padding `12px 24px`, weight `600`, uppercased. - **Secondary** — sharp shape, bg `rgba(26,20,16,0.04)`, text `#1a1410`, border `1px solid rgba(26,20,16,0.20)`, padding `12px 24px`, weight `600`, uppercased. - **Outline** — sharp shape, text `#1a1410`, border `1px solid rgba(26,20,16,0.16)`, padding `12px 24px`, weight `600`, uppercased. - **Ghost** — sharp shape, text `#6e5e4c`, padding `12px 16px`, weight `600`, uppercased. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#e6d3b5` - Border: `1px solid rgba(26,20,16,0.14)` - Shadow: `rgba(26,20,16,0.06) 0 1px 2px, inset 0 1px 0 rgba(255,240,215,0.40)` - Radius: `radius.lg` (`3px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `thin-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Fraunces`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Bronze Foundry is a workshop interface cast in brushed bronze. The page surface is warm bronze `#e6d3b5` with a subtle vertical `linear-gradient(180deg, #ecdcc1 0%, #e6d3b5 50%, #d8c4a8 100%)` — a 5% lightness sheen that reads as light hitting brushed metal. Display headlines run in Fraunces 400 at 112px — the soft-modern serif inscribed into the bronze. Body sits in Inter at 17px on a 1.65 leading. UI labels in Inter 600 with 0.14em uppercase tracking — the stamped-into-the-metal voice. The single accent is patina green `#3d5e4a` that appears only on verified-cast marks, the primary CTA, and the active step in a process flow — the oxidation that signals authority on real bronze. The discipline is in the surface treatment: every elevated card gets an `inset 0 1px 0 rgba(255,240,215,0.40)` highlight — the thin top edge of light that distinguishes a brushed-metal panel from a flat tinted card. **Signature moves** - Brushed-bronze tonal page `#ecdcc1 → #e6d3b5 → #d8c4a8` — vertical sheen, 5% lightness shift - Fraunces 400 at 112px for display — soft-modern serif inscribed into bronze - Patina green `#3d5e4a` exclusively on verified-cast marks + primary CTA + active step - Inset 1px highlight at 40% warm-white on every card — the brushed-metal top edge - Sharp 1-3px corners — machined precision, never pill, never rounded - 0.14em uppercase tracking on UI labels — stamped-into-the-metal voice ## 2. Palette ### Surfaces - **Bronze Top** `#ecdcc1` — page top highlight - **Bronze** `#e6d3b5` — page body (the brushed metal mid-tone) - **Bronze Lift** `#d8c4a8` — page bottom shadow, secondary surfaces - **Hairline** `rgba(26,20,16,0.14)` — every divider ### Ink - **Ink** `#1a1410` — text, headings, primary CTA fill (warm near-black) - **Ink 50** `#6e5e4c` — secondary text, mono labels ### Accent - **Patina** `#3d5e4a` — verified-cast marks, primary CTA accent stripe, active step - **Patina Soft** `rgba(61,94,74,0.10)` — focus ring, hovered step ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Fraunces | 112px | 400 | 0.94 | -0.04em | | H1 | Fraunces | 64px | 400 | 1.05 | -0.025em | | H2 | Fraunces | 30px | 500 | 1.22 | -0.012em | | Pull Quote | Fraunces (italic) | 26px | 400 | 1.4 | -0.008em | | Body | Inter | 17px | 400 | 1.65 | -0.005em | | UI / Button | Inter | 13px | 600 | 1.4 | 0.14em uppercase | | Caption | JetBrains Mono | 11px | 500 | 1.0 | 0.10em uppercase | | Cast Number | JetBrains Mono | 13px | 500 | 1.0 | 0.04em tabular-nums | Fraunces 400 only — the soft-modern proportion needs to stay light to sit on the warm bronze without going muddy. ## 4. Buttons ### Primary (Ink — Engage) ```css background: #1a1410; color: #e6d3b5; padding: 12px 24px; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; ``` The ink button on bronze reads as a stamped iron tag riveted to the brushed surface. The 0.14em tracking is the stamped-into-the-metal voice. ### Secondary (Bronze Wash) - `rgba(26,20,16,0.04)` background, 1px hairline at 20% ink — same sharp 2px corners ### Outline & Ghost - Outline: transparent, 1px hairline at 16% ink - Ghost: no border, ink-50 uppercase ## 5. Cards ```css background: #e6d3b5; border: 1px solid rgba(26,20,16,0.14); border-radius: 3px; box-shadow: rgba(26,20,16,0.06) 0 1px 2px, inset 0 1px 0 rgba(255,240,215,0.40); ``` The `inset 0 1px 0` highlight at 40% warm-white is the entire trick — that thin top edge of light is what makes the card read as a brushed-metal panel rather than a flat tinted rectangle. Without it, the card just looks beige. ## 6. Charts Thin precise bars (3px wide, 10px gap). One bar in patina, others in 22% ink. NO gridlines. Y-axis labels in JetBrains Mono uppercase 11px. Charts read as inscribed exhibits on the bronze plate. ## 7. Tabs Underline 1.5px in patina for the active state. Inactive tabs are ink-50 in Inter 600 uppercase. Tabs sit on a 1px hairline baseline. ## 8. Spacing - Base 8px - Scale: `8, 16, 24, 32, 48, 64, 96, 128, 200` - Section padding: 128px desktop, 64px mobile ## 9. Do's & don'ts ✅ **Do** - Use the brushed-bronze vertical gradient as the page surface — flat bronze reads as beige - Use the `inset 0 1px 0 rgba(255,240,215,0.40)` highlight on every card — that's the brushed-metal edge - Reserve patina green for verified marks + primary CTA + active step exclusively - Use Fraunces 400 only — bold breaks the soft-modern proportion on warm metal ❌ **Don't** - Use flat single-tone bronze — the vertical sheen IS the metal - Use a second accent — patina alone, on three specific surfaces - Use rounded or pill corners — sharp 2px is the machined-precision voice - Use bright gold or copper accents — the only accent is muted patina-green oxidation --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1a1410` | | secondary | `#6e5e4c` | | tertiary | `#1a1410` | | neutral | `#d8c4a8` | | surface | `#e6d3b5` | ### Typography - **Display:** Fraunces - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 7rem / 0.94 / 400 / -0.04em | | H1 | 4rem / 1.05 / 400 / -0.025em | | H2 | 1.875rem / 1.22 / 500 / -0.012em | | Body | 1.0625rem / 1.65 / 400 / -0.005em | ### Radius - sm: `1px` - md: `2px` - lg: `3px` - pill: `9999px` ### Shadows - **card:** `rgba(26,20,16,0.06) 0 1px 2px, inset 0 1px 0 rgba(255,240,215,0.40)` - **button:** `none` ### Borders - **card:** `1px solid rgba(26,20,16,0.14)` - **divider:** `rgba(26,20,16,0.18)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#1a1410` | | color | `#e6d3b5` | | border | `none` | | padding | `12px 24px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.14em` | | uppercase | `true` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `rgba(26,20,16,0.04)` | | color | `#1a1410` | | border | `1px solid rgba(26,20,16,0.20)` | | padding | `12px 24px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.14em` | | uppercase | `true` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#1a1410` | | border | `1px solid rgba(26,20,16,0.16)` | | padding | `12px 24px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.14em` | | uppercase | `true` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#6e5e4c` | | border | `none` | | padding | `12px 16px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.14em` | | uppercase | `true` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1.25` | | fillOpacity | `0` | | gridlines | `false` | | barGap | `10px` | | highlight | `single` | | dotMarker | `false` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 0 24px -4px rgba(26, 20, 16, 0.5), 0 8px 24px -8px rgba(0,0,0,0.6)`, filter: `brightness(1.1)` - **focus** — outline: `1.5px solid #1a1410`, outline-offset: `3px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.92)` - **disabled** — opacity: `0.35`, filter: `saturate(0.4)` - **loading** — opacity: `0.6` - **selected** — bg: `#1a1410`, color: `#0A0A0A` #### Input - **hover** — border: `1px solid rgba(26, 20, 16, 0.5)` - **focus** — border: `1px solid #1a1410`, shadow: `0 0 0 3px rgba(26, 20, 16, 0.2)` - **disabled** — opacity: `0.35` - **error** — border: `1px solid #F87171`, shadow: `0 0 0 3px rgba(248,113,113,0.2)` #### Card - **hover** — shadow: `0 16px 40px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(26, 20, 16, 0.18)`, transform: `translateY(-2px)` - **selected** — border: `1px solid #1a1410`, shadow: `0 0 0 1px #1a1410` - **dragging** — shadow: `0 24px 60px -16px rgba(0,0,0,0.85)`, transform: `scale(1.02)`, opacity: `0.85` #### Tab - **hover** — color: `#1a1410` - **focus** — outline: `1.5px solid #1a1410`, outline-offset: `2px` - **selected** — color: `#1a1410`, border: `0 0 1.5px 0 solid #1a1410` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Glide.** Fließende, leicht beschleunigte Übergänge mit Accent-Glow auf hover. Premium-Feeling durch kontrollierte Lichtspiele. ```css transition: all 280ms cubic-bezier(0.32, 0.72, 0, 1); ``` | Token | Value | |-------|-------| | duration.instant | `100ms` | | duration.fast | `180ms` | | duration.base | `280ms` | | duration.slow | `450ms` | | easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.25, 0.55, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — Hairline mit Accent-Hauch. | | level1 | `0 2px 4px rgba(0,0,0,0.45)` | Subtle drop — list items. | | level2 | `0 12px 28px -8px rgba(0,0,0,0.6)` | Popover — vom Canvas gelöst. | | level3 | `0 20px 48px -12px rgba(0,0,0,0.7), 0 0 32px -8px rgba(26, 20, 16, 0.25)` | Sheet — Accent-Halo. | | level4 | `0 40px 96px -16px rgba(0,0,0,0.85), 0 0 64px -12px rgba(26, 20, 16, 0.4)` | Modal — voller Accent-Rim, dramatisch. | ### Content - **measure:** `66ch` (max line length for body prose) - **paragraph spacing:** `1.3em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#1a1410`, underline `hover` - **blockquote:** border `2px solid #1a1410`, padding `0.8em 1.2em` - **code:** background `rgba(26, 20, 16, 0.12)`, color `#1a1410` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 12.46:1 | AA | AAA | — | | Body text on canvas | 10.75:1 | AA | AAA | — | | Muted text on surface | 4.26:1 | AA | AA-Large | `#685948` → 4.61:1 (AA) | | Accent on surface | 12.46:1 | AA-Large | AAA | — | | Accent on canvas | 10.75:1 | AA-Large | AAA | — | --- # SYSTEM: Monolith CLI Source: https://www.freedesignmd.com/system/monolith-cli --- name: "Monolith CLI" description: "A premium command-line aesthetic that earned its calm. JetBrains Mono carries display, body, and labels at three sizes; warm off-white paper for surfaces; precise hairlines instead of cards; a single cobalt accent reserved for the cursor caret, the active path crumb, and the primary action. Built for developer-tool marketing pages, technical documentation hubs, and infra products that want to read as terminal-native without going dark." tags: [coding, minimal, premium, warm, modern] colors: primary: "#1a1a18" secondary: "#5e5e58" tertiary: "#1a1a18" neutral: "#ebe7dd" surface: "#f4f0e6" typography: display: "JetBrains Mono" body: "JetBrains Mono" mono: "JetBrains Mono" scale: hero: "4.5rem / 1 / 500 / -0.04em" h1: "2.5rem / 1.1 / 500 / -0.025em" h2: "1.5rem / 1.25 / 500 / -0.012em" body: "0.9375rem / 1.65 / 400 / 0" radius: sm: 2px md: 3px lg: 4px pill: 9999px shadows: card: none button: none borders: card: "1px solid rgba(26,26,24,0.12)" divider: rgba(26,26,24,0.14) buttons: primary: background: #1a1a18 color: #f4f0e6 border: none shape: sharp padding: 10px 18px font: 500 / 0.8125rem secondary: background: transparent color: #1a1a18 border: 1px solid rgba(26,26,24,0.20) shape: sharp padding: 10px 18px font: 500 / 0.8125rem outline: background: transparent color: #1a1a18 border: 1px solid rgba(26,26,24,0.16) shape: sharp padding: 10px 18px font: 500 / 0.8125rem ghost: background: transparent color: #5e5e58 border: none shape: sharp padding: 10px 14px font: 500 / 0.8125rem charts: variant: "thin-bars" stroke_width: 1 fill_opacity: 0 gridlines: false bar_gap: 3px highlight: single dot_marker: false fonts_url: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" dependencies: ["lucide-react"] --- # Monolith CLI ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Monolith CLI** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#1a1a18`, text `#f4f0e6`, padding `10px 18px`, weight `500`. - **Secondary** — sharp shape, text `#1a1a18`, border `1px solid rgba(26,26,24,0.20)`, padding `10px 18px`, weight `500`. - **Outline** — sharp shape, text `#1a1a18`, border `1px solid rgba(26,26,24,0.16)`, padding `10px 18px`, weight `500`. - **Ghost** — sharp shape, text `#5e5e58`, padding `10px 14px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#f4f0e6` - Border: `1px solid rgba(26,26,24,0.12)` - Shadow: `none` - Radius: `radius.lg` (`4px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `thin-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`JetBrains Mono`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`JetBrains Mono`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Monolith CLI is a premium command-line aesthetic that earned its calm. The page surface is warm off-white paper `#f4f0e6` — closer to printed manual stock than to white. Display headlines run in JetBrains Mono 500 at 72px with -0.04em tracking — the mono glyphs at scale read as etched into the page. Body sits in the same JetBrains Mono at 15px on a 1.65 leading — long-form readable mono. There are no cards: every section is divided by a single 1px hairline at 14% ink. The single accent is cobalt `#1f4dd9` — a deep, saturated true-blue that appears only on the cursor caret `▍`, the active breadcrumb segment, and the primary CTA. The caret blinks at 1Hz; nothing else animates. The discipline is in the type scale: only three sizes (72px / 24px / 15px) and only two weights (400 / 500). Mono at every size means columns naturally align — section labels above a paragraph, command snippets inline in body, and the cobalt cursor sits on a baseline shared with the prose. **Signature moves** - JetBrains Mono only — display, body, labels — three sizes (72/24/15), two weights (400/500) - Warm paper surface `#f4f0e6` — never white, never grey - Cobalt `#1f4dd9` exclusively on cursor caret `▍`, active breadcrumb, primary CTA - 1px hairlines at 14% ink instead of cards — the system never lifts a surface - Sharp 2-4px corners — precise, never pill, never soft - Single 1Hz blinking cursor caret — the only animation in the entire system ## 2. Palette ### Surfaces - **Paper** `#f4f0e6` — page background (warm manual stock) - **Paper Lift** `#ebe7dd` — secondary tonal surface (rare, used only for code blocks) - **Hairline** `rgba(26,26,24,0.14)` — every divider, every section break ### Ink - **Ink** `#1a1a18` — text, headings, primary CTA fill (warm near-black) - **Ink 50** `#5e5e58` — secondary text, comments, captions ### Accent - **Cobalt** `#1f4dd9` — cursor caret, active breadcrumb, primary CTA, focus ring - **Cobalt Soft** `rgba(31,77,217,0.10)` — focus ring background ## 3. Typography (the entire system) | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | JetBrains Mono | 72px | 500 | 1.0 | -0.04em | | H1 | JetBrains Mono | 40px | 500 | 1.1 | -0.025em | | H2 | JetBrains Mono | 24px | 500 | 1.25 | -0.012em | | Body | JetBrains Mono | 15px | 400 | 1.65 | 0 | | UI / Button | JetBrains Mono | 13px | 500 | 1.4 | 0 | | Caption / Comment | JetBrains Mono | 12px | 400 | 1.4 | 0 | | Inline Code | JetBrains Mono | 14px | 400 | 1.4 | 0 (no extra treatment — it's already mono) | Three sizes, two weights, one font. Inline code does not need a different background or color — the entire system is already mono. ## 4. Buttons ### Primary (Ink Sharp Mono) ```css background: #1a1a18; color: #f4f0e6; padding: 10px 18px; border-radius: 3px; font-family: "JetBrains Mono"; font-weight: 500; ``` The button label is mono, lowercase, often prefixed with a glyph: `$ deploy`, `→ continue`, `↳ open in editor`. The button reads as a runnable command, not a marketing CTA. ### Secondary (Outline) - Transparent, 1px hairline at 20% ink — same sharp shape ### Outline & Ghost - Outline: transparent, 1px hairline at 16% ink - Ghost: no border, ink-50 ## 5. Cards (there are none) The system never lifts a surface. Sections are separated by a single 1px hairline at 14% ink and 64px of vertical breathing room. Code samples sit in a slightly recessed paper-lift block `#ebe7dd` with a 1px hairline border — that is the only deviation from flat paper. ## 6. Charts Thin precise bars (2px wide, 3px gap). One bar in cobalt, others in 22% ink. NO gridlines. Y-axis labels in JetBrains Mono 11px. Charts read as terminal output, never as data viz. ## 7. Tabs Underline 1.5px in cobalt for the active state. Inactive tabs are ink-50 in JetBrains Mono 500. The active tab label is prefixed with a cobalt `▍` caret — that's how the system says "you are here." ## 8. Spacing - Base 4px (mono-grid aware) - Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128` - Section padding: 96px desktop, 48px mobile — air comes from the hairlines ## 9. Do's & don'ts ✅ **Do** - Use JetBrains Mono for everything — display, body, UI, labels — that's the entire premise - Hold the warm paper surface — terminal-dark would make this generic - Reserve cobalt for cursor caret + active breadcrumb + primary CTA — three surfaces only - Prefix the primary button label with a glyph: `$`, `→`, `↳` — it reads as a runnable command ❌ **Don't** - Add a sans serif for "readability" — the warm paper handles long-form mono fine at 15px - Use cards or shadows — hairlines and breathing room carry the layout - Add a second accent color — cobalt alone, on three specific surfaces - Animate beyond the 1Hz caret blink — the calm IS the system --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1a1a18` | | secondary | `#5e5e58` | | tertiary | `#1a1a18` | | neutral | `#ebe7dd` | | surface | `#f4f0e6` | ### Typography - **Display:** JetBrains Mono - **Body:** JetBrains Mono - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.5rem / 1 / 500 / -0.04em | | H1 | 2.5rem / 1.1 / 500 / -0.025em | | H2 | 1.5rem / 1.25 / 500 / -0.012em | | Body | 0.9375rem / 1.65 / 400 / 0 | ### Radius - sm: `2px` - md: `3px` - lg: `4px` - pill: `9999px` ### Shadows - **card:** `none` - **button:** `none` ### Borders - **card:** `1px solid rgba(26,26,24,0.12)` - **divider:** `rgba(26,26,24,0.14)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#1a1a18` | | color | `#f4f0e6` | | border | `none` | | padding | `10px 18px` | | fontWeight | `500` | | fontSize | `0.8125rem` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#1a1a18` | | border | `1px solid rgba(26,26,24,0.20)` | | padding | `10px 18px` | | fontWeight | `500` | | fontSize | `0.8125rem` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#1a1a18` | | border | `1px solid rgba(26,26,24,0.16)` | | padding | `10px 18px` | | fontWeight | `500` | | fontSize | `0.8125rem` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#5e5e58` | | border | `none` | | padding | `10px 14px` | | fontWeight | `500` | | fontSize | `0.8125rem` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1` | | fillOpacity | `0` | | gridlines | `false` | | barGap | `3px` | | highlight | `single` | | dotMarker | `false` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(26, 26, 24, 0.15)`, color: `#1a1a18`, border: `1px solid #1a1a18` - **focus** — outline: `1px dashed #1a1a18`, outline-offset: `2px` - **active** — bg: `#1a1a18`, color: `#f4f0e6` - **disabled** — opacity: `0.35` - **loading** — opacity: `0.6` - **selected** — bg: `#1a1a18`, color: `#f4f0e6` #### Input - **hover** — border: `1px solid rgba(26, 26, 24, 0.5)` - **focus** — bg: `rgba(26, 26, 24, 0.05)`, border: `1px solid #1a1a18` - **disabled** — opacity: `0.35` - **error** — bg: `rgba(239,68,68,0.05)`, border: `1px solid #EF4444` #### Card - **hover** — border: `1px solid #1a1a18` - **selected** — bg: `rgba(26, 26, 24, 0.05)`, border: `1px solid #1a1a18` - **dragging** — opacity: `0.7` #### Tab - **hover** — color: `#1a1a18` - **focus** — outline: `1px dashed #1a1a18`, outline-offset: `1px` - **selected** — bg: `rgba(26, 26, 24, 0.1)`, color: `#1a1a18` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Cursor blink.** Discrete, often stepped transitions. Like a terminal cursor: on or off. Response under 120 ms. ```css transition: all 120ms linear; ``` | Token | Value | |-------|-------| | duration.instant | `0ms` | | duration.fast | `60ms` | | duration.base | `120ms` | | duration.slow | `200ms` | | easing.standard | `linear` | | easing.decelerate | `linear` | | easing.accelerate | `linear` | | easing.spring | `steps(2, end)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the stroke carries the hierarchy. | | level1 | `none` | Border tone lifts the surface. | | level2 | `0 0 0 1px rgba(26, 26, 24, 0.5)` | Ring outline — popover. | | level3 | `0 0 0 1px #1a1a18, 0 12px 32px -16px rgba(26, 26, 24, 0.4)` | Sheet with accent ring + glow. | | level4 | `0 0 0 1px #1a1a18, 0 24px 64px -20px rgba(26, 26, 24, 0.5)` | Modal with accent ring + glow. | ### Content - **measure:** `78ch` (max line length for body prose) - **paragraph spacing:** `1em` - **list indent:** `1.25em` - **list gap:** `0.35em` - **link:** color `#1a1a18`, underline `always` - **blockquote:** border `1px solid rgba(26, 26, 24, 0.5)`, padding `0.7em 1em` - **code:** background `rgba(26, 26, 24, 0.12)`, color `#1a1a18` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 15.32:1 | AA | AAA | — | | Body text on canvas | 14.12:1 | AA | AAA | — | | Muted text on surface | 5.73:1 | AA | AA | — | | Accent on surface | 15.32:1 | AA-Large | AAA | — | | Accent on canvas | 14.12:1 | AA-Large | AAA | — | --- # SYSTEM: Obsidian Rail Source: https://www.freedesignmd.com/system/obsidian-rail --- name: "Obsidian Rail" description: "A precision dark dev-tool surface. Near-black background, every divider a single 1px hairline at 8% white, Inter Display for headings and Geist Mono for IDs and timestamps with tabular-nums, a single electric mint accent reserved for active status pills and the primary CTA. Built for infrastructure dashboards, observability tools, and developer-platform marketing pages where the chrome itself reads as a precision instrument." tags: [dark, modern, minimal, saas, premium] colors: primary: "#f5f6f7" secondary: "#8b8e93" tertiary: "#f5f6f7" neutral: "#1a1c1e" surface: "#0c0d0f" typography: display: Inter body: Inter mono: "Geist Mono" scale: hero: "4.25rem / 1.02 / 600 / -0.035em" h1: "2.5rem / 1.12 / 600 / -0.025em" h2: "1.5rem / 1.25 / 600 / -0.012em" body: "0.9375rem / 1.6 / 400 / -0.005em" radius: sm: 4px md: 6px lg: 8px pill: 9999px shadows: card: "rgba(0,0,0,0.20) 0 1px 2px" button: none borders: card: "1px solid rgba(245,246,247,0.08)" divider: rgba(245,246,247,0.08) buttons: primary: background: #5fe3b1 color: #0c0d0f border: none shape: rounded padding: 9px 18px font: 600 / 0.8125rem secondary: background: #1a1c1e color: #f5f6f7 border: 1px solid rgba(245,246,247,0.10) shape: rounded padding: 9px 18px font: 500 / 0.8125rem outline: background: transparent color: #f5f6f7 border: 1px solid rgba(245,246,247,0.14) shape: rounded padding: 9px 18px font: 500 / 0.8125rem ghost: background: transparent color: #8b8e93 border: none shape: rounded padding: 9px 14px font: 500 / 0.8125rem charts: variant: "thin-bars" stroke_width: 1.25 fill_opacity: 0.06 gridlines: false bar_gap: 3px highlight: single dot_marker: true fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap" dependencies: ["lucide-react"] --- # Obsidian Rail ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Obsidian Rail** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#5fe3b1`, text `#0c0d0f`, padding `9px 18px`, weight `600`. - **Secondary** — rounded shape, bg `#1a1c1e`, text `#f5f6f7`, border `1px solid rgba(245,246,247,0.10)`, padding `9px 18px`, weight `500`. - **Outline** — rounded shape, text `#f5f6f7`, border `1px solid rgba(245,246,247,0.14)`, padding `9px 18px`, weight `500`. - **Ghost** — rounded shape, text `#8b8e93`, padding `9px 14px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#0c0d0f` - Border: `1px solid rgba(245,246,247,0.08)` - Shadow: `rgba(0,0,0,0.20) 0 1px 2px` - Radius: `radius.lg` (`8px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `thin-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Inter`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`Geist Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Obsidian Rail is a precision dark dev-tool surface. The page is near-black `#0c0d0f` — slightly warmer than true black, never blue. Cards lift to `#1a1c1e`, a 4% lightness step, edged with a single 1px hairline at 8% white. There are no shadows beyond a 1px lift; depth comes entirely from tonal-step + hairline. Headings run in Inter 600 at 68px, body in Inter 400 at 15px on a 1.6 leading. Every ID, timestamp, region, percentage, latency runs in Geist Mono with `font-variant-numeric: tabular-nums` — column-aligned to the millisecond. The single accent is electric mint `#5fe3b1` reserved for active status pills, the primary CTA, and the focus ring — never as a fill, never as a chart background. The discipline is in the hairline: every divider, every card edge, every table row separator is the same 1px at 8% white. Anything thicker reads as a brand-y SaaS card stack; anything dimmer disappears. **Signature moves** - Near-black warm `#0c0d0f` page → `#1a1c1e` card — single 4% tonal step, never two - Every divider, card edge, row separator: 1px at 8% white — one hairline value, system-wide - Geist Mono with tabular-nums on every ID, timestamp, region, percentage, latency - Mint `#5fe3b1` exclusively on active status pill + primary CTA + focus ring - Inter 600 at 68px for hero — calm authority, never display-serif drama - 15px body — dev consoles need density, not marketing spacing ## 2. Palette ### Surfaces - **Page** `#0c0d0f` — near-black, slight warm undertone - **Card** `#1a1c1e` — elevated surface, 4% tonal step - **Hairline** `rgba(245,246,247,0.08)` — every divider, every card edge ### Ink - **Bone** `#f5f6f7` — primary text - **Bone 50** `#8b8e93` — secondary text, mono labels ### Accent - **Mint** `#5fe3b1` — active status pill, primary CTA, focus ring, "operational" indicator - **Mint Soft** `rgba(95,227,177,0.12)` — focus ring background, hovered status pill ### Status (semantic only — never UI accent) - Operational `#5fe3b1` (= mint, the accent doubles as healthy status) - Degraded `#e8b95f` — used only on degraded status badges - Down `#e87a5f` — used only on down status badges ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Inter | 68px | 600 | 1.02 | -0.035em | | H1 | Inter | 40px | 600 | 1.12 | -0.025em | | H2 | Inter | 24px | 600 | 1.25 | -0.012em | | Body | Inter | 15px | 400 | 1.6 | -0.005em | | UI / Button | Inter | 13px | 500 | 1.4 | 0 | | ID / Region / Latency | Geist Mono | 13px | 500 | 1.0 | 0 tabular-nums | | Big Metric | Geist Mono | 28px | 600 | 1.0 | 0 tabular-nums | | Label | Geist Mono | 11px | 500 | 1.0 | 0.06em uppercase | | Timestamp | Geist Mono | 12px | 500 | 1.0 | 0 tabular-nums | Inter for prose; Geist Mono for every numeric or ID string. The tabular-nums variant is what makes a deploy-log column-align like a terminal. ## 4. Buttons ### Primary (Mint Compact) ```css background: #5fe3b1; color: #0c0d0f; padding: 9px 18px; border-radius: 6px; font-weight: 600; ``` The mint button is the only saturated color on the page — its single appearance carries every primary action. Compact 9px vertical padding because dev tools live in toolbars. ### Secondary (Card Lift) - `#1a1c1e` background, 1px hairline at 10% white, bone text — same compact shape ### Outline & Ghost - Outline: transparent, 1px hairline at 14% white - Ghost: no border, bone-50, hover lifts to bone ## 5. Cards ```css background: #1a1c1e; border: 1px solid rgba(245,246,247,0.08); border-radius: 8px; box-shadow: rgba(0,0,0,0.20) 0 1px 2px; ``` The 4% tonal step is what separates the card from the page; the 1px hairline is the only edge treatment. No gradient borders, no glow, no inset highlight. The active card adds a 1px mint top hairline — the only place mint appears on a card edge. ## 6. Charts Thin precise bars (3px wide, 3px gap). One bar in mint, others in 22% bone. Line charts at 1.25px bone with a 6% mint fill, ending in a mint dot marker. NO gridlines — the card edge frames the chart. Y-axis labels in Geist Mono uppercase 11px aligned right. ## 7. Tabs Underline 1.5px in mint for the active state. Inactive tabs are bone-50 in Inter 500. Hover lifts to bone. Tabs sit on a 1px hairline baseline at 8% white. ## 8. Spacing - Base 4px (table-row aware) - Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96` - Section padding: 64px desktop, 32px mobile — dev density ## 9. Do's & don'ts ✅ **Do** - Use the single 4% tonal step (page → card) and the single 1px hairline at 8% white system-wide - Use Geist Mono with tabular-nums on every ID, timestamp, region, percentage, latency - Reserve mint for active status pill + primary CTA + focus ring + "operational" indicator - Use 15px body — dev consoles need density, not marketing spacing ❌ **Don't** - Use gradient borders, glows, or inset highlights — the hairline is the only chrome - Use a second UI accent — mint alone, plus muted status colors for degraded/down only - Use rounded-full pills for status — 6px capsule with mint or muted-amber/red text - Use shadows beyond the 1px lift — the tonal step IS the depth --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#f5f6f7` | | secondary | `#8b8e93` | | tertiary | `#f5f6f7` | | neutral | `#1a1c1e` | | surface | `#0c0d0f` | ### Typography - **Display:** Inter - **Body:** Inter - **Mono:** Geist Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.25rem / 1.02 / 600 / -0.035em | | H1 | 2.5rem / 1.12 / 600 / -0.025em | | H2 | 1.5rem / 1.25 / 600 / -0.012em | | Body | 0.9375rem / 1.6 / 400 / -0.005em | ### Radius - sm: `4px` - md: `6px` - lg: `8px` - pill: `9999px` ### Shadows - **card:** `rgba(0,0,0,0.20) 0 1px 2px` - **button:** `none` ### Borders - **card:** `1px solid rgba(245,246,247,0.08)` - **divider:** `rgba(245,246,247,0.08)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#5fe3b1` | | color | `#0c0d0f` | | border | `none` | | padding | `9px 18px` | | fontWeight | `600` | | fontSize | `0.8125rem` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#1a1c1e` | | color | `#f5f6f7` | | border | `1px solid rgba(245,246,247,0.10)` | | padding | `9px 18px` | | fontWeight | `500` | | fontSize | `0.8125rem` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#f5f6f7` | | border | `1px solid rgba(245,246,247,0.14)` | | padding | `9px 18px` | | fontWeight | `500` | | fontSize | `0.8125rem` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#8b8e93` | | border | `none` | | padding | `9px 14px` | | fontWeight | `500` | | fontSize | `0.8125rem` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1.25` | | fillOpacity | `0.06` | | gridlines | `false` | | barGap | `3px` | | highlight | `single` | | dotMarker | `true` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 0 24px -4px rgba(245, 246, 247, 0.5), 0 8px 24px -8px rgba(0,0,0,0.6)`, filter: `brightness(1.1)` - **focus** — outline: `1.5px solid #f5f6f7`, outline-offset: `3px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.92)` - **disabled** — opacity: `0.35`, filter: `saturate(0.4)` - **loading** — opacity: `0.6` - **selected** — bg: `#f5f6f7`, color: `#0A0A0A` #### Input - **hover** — border: `1px solid rgba(245, 246, 247, 0.5)` - **focus** — border: `1px solid #f5f6f7`, shadow: `0 0 0 3px rgba(245, 246, 247, 0.2)` - **disabled** — opacity: `0.35` - **error** — border: `1px solid #F87171`, shadow: `0 0 0 3px rgba(248,113,113,0.2)` #### Card - **hover** — shadow: `0 16px 40px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(245, 246, 247, 0.18)`, transform: `translateY(-2px)` - **selected** — border: `1px solid #f5f6f7`, shadow: `0 0 0 1px #f5f6f7` - **dragging** — shadow: `0 24px 60px -16px rgba(0,0,0,0.85)`, transform: `scale(1.02)`, opacity: `0.85` #### Tab - **hover** — color: `#f5f6f7` - **focus** — outline: `1.5px solid #f5f6f7`, outline-offset: `2px` - **selected** — color: `#f5f6f7`, border: `0 0 1.5px 0 solid #f5f6f7` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Glide.** Fließende, leicht beschleunigte Übergänge mit Accent-Glow auf hover. Premium-Feeling durch kontrollierte Lichtspiele. ```css transition: all 280ms cubic-bezier(0.32, 0.72, 0, 1); ``` | Token | Value | |-------|-------| | duration.instant | `100ms` | | duration.fast | `180ms` | | duration.base | `280ms` | | duration.slow | `450ms` | | easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.25, 0.55, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — Hairline mit Accent-Hauch. | | level1 | `0 2px 4px rgba(0,0,0,0.45)` | Subtle drop — list items. | | level2 | `0 12px 28px -8px rgba(0,0,0,0.6)` | Popover — vom Canvas gelöst. | | level3 | `0 20px 48px -12px rgba(0,0,0,0.7), 0 0 32px -8px rgba(245, 246, 247, 0.25)` | Sheet — Accent-Halo. | | level4 | `0 40px 96px -16px rgba(0,0,0,0.85), 0 0 64px -12px rgba(245, 246, 247, 0.4)` | Modal — voller Accent-Rim, dramatisch. | ### Content - **measure:** `66ch` (max line length for body prose) - **paragraph spacing:** `1.3em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#f5f6f7`, underline `hover` - **blockquote:** border `2px solid #f5f6f7`, padding `0.8em 1.2em` - **code:** background `rgba(245, 246, 247, 0.12)`, color `#f5f6f7` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 17.97:1 | AA | AAA | — | | Body text on canvas | 15.79:1 | AA | AAA | — | | Muted text on surface | 5.91:1 | AA | AA | — | | Accent on surface | 17.97:1 | AA-Large | AAA | — | | Accent on canvas | 15.79:1 | AA-Large | AAA | — | --- # SYSTEM: Mallow SaaS Source: https://www.freedesignmd.com/system/mallow-saas --- name: "Mallow SaaS" description: "A soft modern SaaS surface with the warmth of a marshmallow. Cream-mallow page background, butter-soft cards with generous radius, Manrope for UI and DM Mono for figures, a single muted lavender accent reserved for the primary CTA and the active sidebar item. Built for early-stage product pages, friendly B2C dashboards, and onboarding flows that need to feel approachable without going saccharine." tags: [saas, warm, minimal, modern, premium] colors: primary: "#231f2a" secondary: "#76707d" tertiary: "#231f2a" neutral: "#ece4d9" surface: "#f4ece0" typography: display: Manrope body: Manrope mono: "DM Mono" scale: hero: "4.5rem / 1.05 / 700 / -0.03em" h1: "2.75rem / 1.12 / 700 / -0.022em" h2: "1.625rem / 1.25 / 600 / -0.012em" body: "1.0625rem / 1.62 / 400 / -0.005em" radius: sm: 8px md: 14px lg: 20px pill: 9999px shadows: card: "rgba(35,31,42,0.04) 0 1px 2px, rgba(35,31,42,0.04) 0 8px 28px -10px" button: none borders: card: "1px solid rgba(35,31,42,0.06)" divider: rgba(35,31,42,0.10) buttons: primary: background: #5d4a8a color: #f4ece0 border: none shape: rounded padding: 11px 22px font: 600 / 0.875rem secondary: background: #ffffff color: #231f2a border: 1px solid rgba(35,31,42,0.10) shape: rounded padding: 11px 22px font: 500 / 0.875rem outline: background: transparent color: #231f2a border: 1px solid rgba(35,31,42,0.16) shape: rounded padding: 11px 22px font: 500 / 0.875rem ghost: background: transparent color: #76707d border: none shape: rounded padding: 11px 16px font: 500 / 0.875rem charts: variant: "rounded-bars" stroke_width: 1.5 fill_opacity: 0.1 gridlines: false bar_gap: 6px highlight: single dot_marker: true fonts_url: "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Mallow SaaS ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Mallow SaaS** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#5d4a8a`, text `#f4ece0`, padding `11px 22px`, weight `600`. - **Secondary** — rounded shape, bg `#ffffff`, text `#231f2a`, border `1px solid rgba(35,31,42,0.10)`, padding `11px 22px`, weight `500`. - **Outline** — rounded shape, text `#231f2a`, border `1px solid rgba(35,31,42,0.16)`, padding `11px 22px`, weight `500`. - **Ghost** — rounded shape, text `#76707d`, padding `11px 16px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#f4ece0` - Border: `1px solid rgba(35,31,42,0.06)` - Shadow: `rgba(35,31,42,0.04) 0 1px 2px, rgba(35,31,42,0.04) 0 8px 28px -10px` - Radius: `radius.lg` (`20px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `pill`. Segmented control inside a tinted track. Active tab gets a filled pill in the accent color. #### Charts - Bar/line variant: `rounded-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Manrope`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Manrope`)** — paragraphs, labels, button text, form inputs. - **Mono (`DM Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Mallow SaaS is a soft modern surface with the warmth of a marshmallow. The page is cream-mallow `#f4ece0` — a warm pillow tone that reads as friendly without ever going pastel-cute. Cards are pure white with a generous 20px radius and a soft 28px y-offset shadow at -10px spread — butter-soft elevation, never harsh. Headlines run in Manrope 700 at 72px with -0.03em tracking — the rounded grotesque sits warm on the cream. Body sits in Manrope 400 at 17px on a 1.62 leading. Numbers and dates run in DM Mono — a slightly rounded mono that matches the system's friendliness. The single accent is muted lavender `#5d4a8a` reserved for the primary CTA, the active sidebar item, and the focus ring — a deep dusty purple, never bright lavender. The discipline is in the warmth: every surface is on the warm side of neutral, every shadow is soft and far-spread, every corner is generous. The lavender is what keeps it from going too sweet. **Signature moves** - Cream-mallow page `#f4ece0` → pure white card — the warmth IS the system - Soft 28px y-offset shadow at -10px spread — butter-soft elevation, never harsh - Generous 20px card radius, 14px button radius — friendly without going pill - Manrope 700 at 72px for hero — rounded grotesque, warm authority - DM Mono for every number — slightly rounded mono matches the system's friendliness - Lavender `#5d4a8a` exclusively on primary CTA + active sidebar + focus ring ## 2. Palette ### Surfaces - **Mallow** `#f4ece0` — page background (warm cream pillow tone) - **Mallow Lift** `#ece4d9` — secondary tonal surface, sidebar - **Card** `#ffffff` — elevated surface - **Hairline** `rgba(35,31,42,0.06)` — every divider, every card edge ### Ink - **Ink** `#231f2a` — text, headings (warm near-black, slight purple undertone) - **Ink 50** `#76707d` — secondary text, mono labels ### Accent - **Lavender** `#5d4a8a` — primary CTA, active sidebar item, focus ring - **Lavender Soft** `rgba(93,74,138,0.10)` — focus ring background, hovered sidebar item ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Manrope | 72px | 700 | 1.05 | -0.03em | | H1 | Manrope | 44px | 700 | 1.12 | -0.022em | | H2 | Manrope | 26px | 600 | 1.25 | -0.012em | | Body | Manrope | 17px | 400 | 1.62 | -0.005em | | UI / Button | Manrope | 14px | 600 | 1.4 | 0 | | Number / Metric | DM Mono | 14px | 500 | 1.0 | 0 tabular-nums | | Big KPI | DM Mono | 28px | 500 | 1.0 | 0 tabular-nums | | Label | DM Mono | 11px | 500 | 1.0 | 0.06em uppercase | DM Mono is the friendliness move — its slightly rounded glyphs match the warm cream surface and butter-soft cards. A sharper mono (Geist, JetBrains) would feel out of place. ## 4. Buttons ### Primary (Lavender Rounded) ```css background: #5d4a8a; color: #f4ece0; padding: 11px 22px; border-radius: 14px; font-weight: 600; ``` The 14px radius is the warm-friendly shape. The lavender is muted on purpose — bright lavender would clash with the cream warmth. ### Secondary (Card White) - Pure white, 1px hairline at 10% ink, ink text — same 14px radius ### Outline & Ghost - Outline: transparent, 1px hairline at 16% ink - Ghost: no border, ink-50, hover lifts to ink ## 5. Cards ```css background: #ffffff; border: 1px solid rgba(35,31,42,0.06); border-radius: 20px; box-shadow: rgba(35,31,42,0.04) 0 1px 2px, rgba(35,31,42,0.04) 0 8px 28px -10px; ``` The far-spread soft shadow is the butter-elevation move — present but never harsh. The 20px radius lets the card breathe on the warm cream. Active card adds a 2px lavender left border. ## 6. Charts Rounded bars (8px wide, 6px gap, fully rounded ends). One bar in lavender, others in 22% ink. Line charts at 1.5px ink with a 10% lavender fill, ending in a lavender dot marker. NO gridlines. ## 7. Tabs Pill tabs (9999px radius). Active = lavender-soft background fill, ink text, no border. Inactive = transparent, ink-50. Sits inside a mallow-lift rail. ## 8. Spacing - Base 4px - Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128` - Section padding: 96px desktop, 48px mobile ## 9. Do's & don'ts ✅ **Do** - Hold the cream-mallow page surface — bright white reads as cold, beige reads as old textbook - Use the soft 28px y-offset shadow at -10px spread — that's butter-soft elevation - Reserve lavender for primary CTA + active sidebar + focus ring exclusively — three surfaces only - Use DM Mono for numbers — its rounded glyphs match the system's friendliness ❌ **Don't** - Use bright lavender, pink, or pastel — `#5d4a8a` is muted dusty purple, never neon - Use sharp 0px corners — 14-20px is the warm-friendly shape - Use harsh 4px shadows — soft 28px far-spread only - Add a second accent for secondary CTAs — three lavender surfaces, that is all --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#231f2a` | | secondary | `#76707d` | | tertiary | `#231f2a` | | neutral | `#ece4d9` | | surface | `#f4ece0` | ### Typography - **Display:** Manrope - **Body:** Manrope - **Mono:** DM Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.5rem / 1.05 / 700 / -0.03em | | H1 | 2.75rem / 1.12 / 700 / -0.022em | | H2 | 1.625rem / 1.25 / 600 / -0.012em | | Body | 1.0625rem / 1.62 / 400 / -0.005em | ### Radius - sm: `8px` - md: `14px` - lg: `20px` - pill: `9999px` ### Shadows - **card:** `rgba(35,31,42,0.04) 0 1px 2px, rgba(35,31,42,0.04) 0 8px 28px -10px` - **button:** `none` ### Borders - **card:** `1px solid rgba(35,31,42,0.06)` - **divider:** `rgba(35,31,42,0.10)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#5d4a8a` | | color | `#f4ece0` | | border | `none` | | padding | `11px 22px` | | fontWeight | `600` | | fontSize | `0.875rem` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#ffffff` | | color | `#231f2a` | | border | `1px solid rgba(35,31,42,0.10)` | | padding | `11px 22px` | | fontWeight | `500` | | fontSize | `0.875rem` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#231f2a` | | border | `1px solid rgba(35,31,42,0.16)` | | padding | `11px 22px` | | fontWeight | `500` | | fontSize | `0.875rem` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#76707d` | | border | `none` | | padding | `11px 16px` | | fontWeight | `500` | | fontSize | `0.875rem` | ### Charts | Property | Value | |----------|-------| | variant | `rounded-bars` | | strokeWidth | `1.5` | | fillOpacity | `0.1` | | gridlines | `false` | | barGap | `6px` | | highlight | `single` | | dotMarker | `true` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 8px 24px -10px rgba(35, 31, 42, 0.35)`, transform: `translateY(-1px)`, filter: `brightness(1.02)` - **focus** — outline: `2px solid rgba(35, 31, 42, 0.4)`, outline-offset: `3px` - **active** — transform: `translateY(0) scale(0.98)` - **disabled** — opacity: `0.4`, filter: `saturate(0.5)` - **loading** — opacity: `0.65` - **selected** — bg: `rgba(35, 31, 42, 0.18)`, color: `#231f2a` #### Input - **hover** — bg: `rgba(35, 31, 42, 0.03)`, border: `1px solid rgba(35, 31, 42, 0.4)` - **focus** — border: `1px solid rgba(35, 31, 42, 0.6)`, shadow: `0 0 0 4px rgba(35, 31, 42, 0.12)` - **disabled** — opacity: `0.4` - **error** — border: `1px solid rgba(244,114,182,0.7)`, shadow: `0 0 0 4px rgba(244,114,182,0.15)` #### Card - **hover** — shadow: `0 16px 40px -16px rgba(35, 31, 42, 0.3)`, transform: `translateY(-3px)` - **selected** — bg: `rgba(35, 31, 42, 0.04)`, border: `1px solid rgba(35, 31, 42, 0.5)` - **dragging** — transform: `scale(1.03) rotate(-0.8deg)`, opacity: `0.92` #### Tab - **hover** — bg: `rgba(35, 31, 42, 0.08)`, color: `#231f2a` - **focus** — outline: `2px solid rgba(35, 31, 42, 0.4)`, outline-offset: `2px` - **selected** — bg: `rgba(35, 31, 42, 0.16)`, color: `#231f2a` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Soft fade.** Long, gentle transitions with a symmetric easing curve. Motion is calming, never intrusive. ```css transition: all 400ms cubic-bezier(0.45, 0.05, 0.55, 0.95); ``` | Token | Value | |-------|-------| | duration.instant | `120ms` | | duration.fast | `240ms` | | duration.base | `400ms` | | duration.slow | `600ms` | | easing.standard | `cubic-bezier(0.45, 0.05, 0.55, 0.95)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.45, 1.4, 0.55, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the tone separates, not the shadow. | | level1 | `0 2px 6px -2px rgba(35, 31, 42, 0.12)` | Soft tinted lift. | | level2 | `0 8px 24px -10px rgba(35, 31, 42, 0.2)` | Floating card — pastel-tinted shadow. | | level3 | `0 16px 48px -16px rgba(35, 31, 42, 0.28)` | Sheet — visible tinted glow. | | level4 | `0 32px 80px -24px rgba(35, 31, 42, 0.4)` | Modal — tinted wash, scrim required. | ### Content - **measure:** `64ch` (max line length for body prose) - **paragraph spacing:** `1.35em` - **list indent:** `1.5em` - **list gap:** `0.6em` - **link:** color `#231f2a`, underline `hover` - **blockquote:** border `2px solid rgba(35, 31, 42, 0.5)`, padding `0.9em 1.2em` - **code:** background `rgba(35, 31, 42, 0.1)`, color `#231f2a` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 13.78:1 | AA | AAA | — | | Body text on canvas | 12.81:1 | AA | AAA | — | | Muted text on surface | 4.09:1 | AA | AA-Large | `#6c6672` → 4.74:1 (AA) | | Accent on surface | 13.78:1 | AA-Large | AAA | — | | Accent on canvas | 12.81:1 | AA-Large | AAA | — | --- # SYSTEM: Null Grid Source: https://www.freedesignmd.com/system/null-grid --- name: "Null Grid" description: "An ultra-minimal restraint exercise. Pure white surfaces, every layout snapped to a strict 12-column grid with a 4px baseline, Inter at three sizes for the entire system, sharp 0px corners, and one vermilion accent reserved for exactly one moment per page. Built for product pages, design portfolios, and brand surfaces where the discipline of the grid IS the design." tags: [minimal, modern, premium, grid, saas] colors: primary: "#0a0a0a" secondary: "#737373" tertiary: "#0a0a0a" neutral: "#f0f0f0" surface: "#ffffff" typography: display: Inter body: Inter mono: "JetBrains Mono" scale: hero: "5.5rem / 1 / 500 / -0.035em" h1: "3rem / 1.1 / 500 / -0.025em" h2: "1.5rem / 1.25 / 500 / -0.012em" body: "0.9375rem / 1.6 / 400 / 0" radius: sm: 0px md: 0px lg: 0px pill: 9999px shadows: card: none button: none borders: card: "1px solid rgba(10,10,10,0.10)" divider: rgba(10,10,10,0.10) buttons: primary: background: #0a0a0a color: #ffffff border: none shape: sharp padding: 10px 20px font: 500 / 0.8125rem secondary: background: transparent color: #0a0a0a border: 1px solid #0a0a0a shape: sharp padding: 10px 20px font: 500 / 0.8125rem outline: background: transparent color: #0a0a0a border: 1px solid rgba(10,10,10,0.16) shape: sharp padding: 10px 20px font: 500 / 0.8125rem ghost: background: transparent color: #737373 border: none shape: sharp padding: 10px 14px font: 500 / 0.8125rem charts: variant: "thin-bars" stroke_width: 1 fill_opacity: 0 gridlines: false bar_gap: 4px highlight: single dot_marker: false fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Null Grid ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Null Grid** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#0a0a0a`, text `#ffffff`, padding `10px 20px`, weight `500`. - **Secondary** — sharp shape, text `#0a0a0a`, border `1px solid #0a0a0a`, padding `10px 20px`, weight `500`. - **Outline** — sharp shape, text `#0a0a0a`, border `1px solid rgba(10,10,10,0.16)`, padding `10px 20px`, weight `500`. - **Ghost** — sharp shape, text `#737373`, padding `10px 14px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#ffffff` - Border: `1px solid rgba(10,10,10,0.10)` - Shadow: `none` - Radius: `radius.lg` (`0px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `thin-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Inter`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Null Grid is an ultra-minimal restraint exercise. The page surface is pure white `#ffffff` — never off-white, never warm. Every layout is snapped to a strict 12-column grid with a 4px baseline. Inter handles everything: hero at 88px, body at 15px, UI labels at 13px — three sizes, two weights (400/500), one font. Sharp 0px corners on every surface and every button — there are no radii in this system except the badge pill. The single accent is vermilion `#e8482c` that appears exactly once per page — usually as the active step number in a process, the live indicator dot, or the primary CTA. The discipline is absolute: the page must justify every element on the grid. If a piece of UI does not snap to a column boundary, it does not belong. The vermilion is not for decoration — it is for the single moment the page wants the user's eye. **Signature moves** - Strict 12-column grid with 4px baseline — every element snaps to a column boundary - Pure white surface `#ffffff` — never off-white, never warm - Inter only — three sizes (88/24/15), two weights (400/500) - Vermilion `#e8482c` exactly once per page — the single moment the eye should land - Sharp 0px corners on every surface and button — Swiss-restraint precision - 1px hairlines at 10% ink as the only divider treatment ## 2. Palette (the entire system) - **Page** `#ffffff` — pure white - **Page Lift** `#f0f0f0` — secondary tonal step (rare, used only for code blocks) - **Ink** `#0a0a0a` — text, headings, primary CTA fill (true near-black) - **Ink 50** `#737373` — secondary text - **Hairline** `rgba(10,10,10,0.10)` — every divider, every border - **Vermilion** `#e8482c` — exactly one moment per page Six values, total. That is the entire system. ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Inter | 88px | 500 | 1.0 | -0.035em | | H1 | Inter | 48px | 500 | 1.1 | -0.025em | | H2 | Inter | 24px | 500 | 1.25 | -0.012em | | Body | Inter | 15px | 400 | 1.6 | 0 | | UI / Button | Inter | 13px | 500 | 1.4 | 0 | | Caption | JetBrains Mono | 11px | 500 | 1.0 | 0.06em uppercase | | Number | JetBrains Mono | 13px | 500 | 1.0 | 0 tabular-nums | Three Inter sizes (88/24/15), two weights (400/500). Mono only for captions and figures. There is no italic, no underline, no decoration — emphasis is achieved through column placement and white space. ## 4. Buttons ### Primary (Ink Sharp) ```css background: #0a0a0a; color: #ffffff; padding: 10px 20px; border-radius: 0px; font-weight: 500; ``` Sharp 0px corners. The button is a 4×8-grid-aligned ink rectangle. ### Secondary (Ink Outline) - Transparent, 1px solid ink, ink text — same sharp 0px corners ### Outline & Ghost - Outline: transparent, 1px hairline at 16% ink - Ghost: no border, ink-50, hover lifts to ink ## 5. Cards (rare) The system prefers grid-divided sections over cards. When a card is needed, it is sharp 0px corners with a 1px hairline at 10% ink — never lifted, never shadowed. ## 6. Charts Thin precise bars (3px wide, 4px gap). One bar in vermilion (only if vermilion has not yet been used on the page), others in 22% ink. NO gridlines. Y-axis labels in JetBrains Mono uppercase 11px. ## 7. Tabs Underline 1.5px in ink for the active state. Inactive tabs are ink-50 in Inter 500. Tabs sit on a 1px hairline baseline. ## 8. Spacing - Base 4px (every dimension is a multiple of 4) - Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128` - 12-column grid with 24px gutters (desktop), 16px gutters (mobile) - Section padding: 96px desktop, 48px mobile ## 9. Do's & don'ts ✅ **Do** - Snap every element to the 12-column grid — if it doesn't fit, redesign the layout - Use Inter only — three sizes, two weights, one font, no exceptions - Reserve vermilion for exactly one moment per page — the eye lands there once - Use 4px multiples for every dimension — padding, margin, gap, height - Hold pure white — off-white belongs to a different system ❌ **Don't** - Use vermilion more than once per page — the discipline IS the design - Use any radius beyond 0px (or the badge pill) — sharp Swiss precision throughout - Add a second accent or status color — six total values, that is all - Use any font besides Inter (and Mono for figures) — restraint is the whole premise --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#0a0a0a` | | secondary | `#737373` | | tertiary | `#0a0a0a` | | neutral | `#f0f0f0` | | surface | `#ffffff` | ### Typography - **Display:** Inter - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 5.5rem / 1 / 500 / -0.035em | | H1 | 3rem / 1.1 / 500 / -0.025em | | H2 | 1.5rem / 1.25 / 500 / -0.012em | | Body | 0.9375rem / 1.6 / 400 / 0 | ### Radius - sm: `0px` - md: `0px` - lg: `0px` - pill: `9999px` ### Shadows - **card:** `none` - **button:** `none` ### Borders - **card:** `1px solid rgba(10,10,10,0.10)` - **divider:** `rgba(10,10,10,0.10)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#0a0a0a` | | color | `#ffffff` | | border | `none` | | padding | `10px 20px` | | fontWeight | `500` | | fontSize | `0.8125rem` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#0a0a0a` | | border | `1px solid #0a0a0a` | | padding | `10px 20px` | | fontWeight | `500` | | fontSize | `0.8125rem` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#0a0a0a` | | border | `1px solid rgba(10,10,10,0.16)` | | padding | `10px 20px` | | fontWeight | `500` | | fontSize | `0.8125rem` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#737373` | | border | `none` | | padding | `10px 14px` | | fontWeight | `500` | | fontSize | `0.8125rem` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1` | | fillOpacity | `0` | | gridlines | `false` | | barGap | `4px` | | highlight | `single` | | dotMarker | `false` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `4px 4px 0 0 #0a0a0a`, transform: `translate(-2px, -2px)` - **focus** — outline: `2px solid #0a0a0a`, outline-offset: `3px` - **active** — shadow: `none`, transform: `translate(0, 0)` - **disabled** — opacity: `0.4`, filter: `grayscale(0.4)` - **loading** — opacity: `0.6` - **selected** — bg: `#0a0a0a`, color: `#ffffff` #### Input - **hover** — border: `2px solid #0a0a0a` - **focus** — border: `2px solid #0a0a0a`, shadow: `4px 4px 0 0 #0a0a0a` - **disabled** — bg: `rgba(10, 10, 10, 0.05)`, opacity: `0.4` - **error** — border: `2px solid #B91C1C`, shadow: `4px 4px 0 0 #B91C1C` #### Card - **hover** — shadow: `6px 6px 0 0 #0a0a0a`, transform: `translate(-3px, -3px)` - **selected** — border: `3px solid #0a0a0a` - **dragging** — shadow: `8px 8px 0 0 #0a0a0a`, transform: `rotate(-1deg) scale(1.02)` #### Tab - **hover** — bg: `rgba(10, 10, 10, 0.08)` - **focus** — outline: `2px solid #0a0a0a`, outline-offset: `2px` - **selected** — bg: `#0a0a0a`, color: `#ffffff` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Hard cut.** No animation. Transitions are cuts — the state switches, the eye follows. Brutalism means no softening. ```css transition: none; ``` | Token | Value | |-------|-------| | duration.instant | `0ms` | | duration.fast | `50ms` | | duration.base | `100ms` | | duration.slow | `150ms` | | easing.standard | `linear` | | easing.decelerate | `linear` | | easing.accelerate | `linear` | | easing.spring | `steps(3, end)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the border carries the separation. | | level1 | `2px 2px 0 0 #0a0a0a` | Hard offset 2/2, no blur. | | level2 | `4px 4px 0 0 #0a0a0a` | Hard offset 4/4 — cards. | | level3 | `6px 6px 0 0 #0a0a0a` | Hard offset 6/6 — dialogs. | | level4 | `8px 8px 0 0 #0a0a0a` | Hard offset 8/8 — modals, thicker border. | ### Content - **measure:** `64ch` (max line length for body prose) - **paragraph spacing:** `1.2em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#0a0a0a`, underline `always` - **blockquote:** border `4px solid #0a0a0a`, padding `0.8em 1em` - **code:** background `#0a0a0a`, color `#ffffff` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 19.8:1 | AA | AAA | — | | Body text on canvas | 17.37:1 | AA | AAA | — | | Muted text on surface | 4.74:1 | AA | AA | — | | Accent on surface | 19.8:1 | AA-Large | AAA | — | | Accent on canvas | 17.37:1 | AA-Large | AAA | — | --- # SYSTEM: Mistveil Gradient Source: https://www.freedesignmd.com/system/mistveil-gradient --- name: "Mistveil Gradient" description: "A soft single-hue tonal gradient that stays in pale steel-blue. Page background runs from a faint mist top to bone-white bottom, Inter for display, IBM Plex Mono for figures with tabular-nums, a single graphite accent reserved for the primary CTA and the active step indicator. Built for product pages, technical hubs, and infrastructure marketing where calm depth carries the surface." tags: [gradient, minimal, modern, premium, saas] colors: primary: "#181d24" secondary: "#6a7283" tertiary: "#181d24" neutral: "#e2e7ef" surface: "#eef2f8" typography: display: Inter body: Inter mono: "IBM Plex Mono" scale: hero: "5rem / 1.04 / 600 / -0.035em" h1: "3rem / 1.12 / 600 / -0.025em" h2: "1.625rem / 1.25 / 600 / -0.012em" body: "1.0625rem / 1.62 / 400 / -0.005em" radius: sm: 6px md: 10px lg: 16px pill: 9999px shadows: card: "rgba(24,29,36,0.04) 0 1px 2px, rgba(24,29,36,0.04) 0 8px 28px -10px" button: none borders: card: "1px solid rgba(24,29,36,0.08)" divider: rgba(24,29,36,0.10) buttons: primary: background: #181d24 color: #eef2f8 border: none shape: rounded padding: 10px 20px font: 600 / 0.875rem secondary: background: rgba(255,255,255,0.70) color: #181d24 border: 1px solid rgba(24,29,36,0.10) shape: rounded padding: 10px 20px font: 500 / 0.875rem outline: background: transparent color: #181d24 border: 1px solid rgba(24,29,36,0.16) shape: rounded padding: 10px 20px font: 500 / 0.875rem ghost: background: transparent color: #6a7283 border: none shape: rounded padding: 10px 14px font: 500 / 0.875rem charts: variant: "thin-bars" stroke_width: 1.5 fill_opacity: 0.06 gridlines: false bar_gap: 5px highlight: single dot_marker: true fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" dependencies: ["lucide-react"] --- # Mistveil Gradient ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Mistveil Gradient** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#181d24`, text `#eef2f8`, padding `10px 20px`, weight `600`. - **Secondary** — rounded shape, bg `rgba(255,255,255,0.70)`, text `#181d24`, border `1px solid rgba(24,29,36,0.10)`, padding `10px 20px`, weight `500`. - **Outline** — rounded shape, text `#181d24`, border `1px solid rgba(24,29,36,0.16)`, padding `10px 20px`, weight `500`. - **Ghost** — rounded shape, text `#6a7283`, padding `10px 14px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#eef2f8` - Border: `1px solid rgba(24,29,36,0.08)` - Shadow: `rgba(24,29,36,0.04) 0 1px 2px, rgba(24,29,36,0.04) 0 8px 28px -10px` - Radius: `radius.lg` (`16px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `thin-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Inter`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`IBM Plex Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Mistveil Gradient is a soft single-hue tonal gradient that stays in pale steel-blue. The page background runs from `#eef2f8` (faint mist) at the top to `#fafbfd` (bone-white) at the bottom — a 5% lightness shift across 100vh, single-hue, never sunset. Display headlines run in Inter 600 at 80px — calm authority, never display-serif drama. Body sits in Inter 400 at 17px on a 1.62 leading. Numbers and timestamps run in IBM Plex Mono with tabular-nums. The single accent is graphite `#181d24` — the same value that carries primary text doubles as the primary CTA fill and the active step indicator. There is no third hue. The discipline is in the gradient: single-hue, low-amplitude, never two-color. Cards are glass-tinted (`rgba(255,255,255,0.70)`) so the steel-blue field bleeds through — that bleed is the system's signature. **Signature moves** - Single-hue tonal gradient: pale mist `#eef2f8` → bone-white `#fafbfd`, 5% lightness shift - Glass cards (`rgba(255,255,255,0.70)`) — pick up the steel-blue field through the white tint - Inter 600 at 80px display — calm authority - IBM Plex Mono with tabular-nums on every number, timestamp, percentage - Graphite `#181d24` doubles as text + primary CTA + active step — no separate accent hue - Soft 16px card radius, 10px button radius — calm and modern, never pill, never sharp ## 2. Palette ### Surfaces - **Mist Top** `#eef2f8` — page top - **Bone Bottom** `#fafbfd` — page bottom (the gradient endpoint) - **Lift** `#e2e7ef` — secondary tonal surface - **Glass** `rgba(255,255,255,0.70)` — card tint ### Ink - **Graphite** `#181d24` — text, headings, primary CTA fill, active step - **Ink 50** `#6a7283` — secondary text, mono labels ### There is no accent hue. Graphite carries every "look here" moment — the discipline is using one value for both prose and the CTA. ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Inter | 80px | 600 | 1.04 | -0.035em | | H1 | Inter | 48px | 600 | 1.12 | -0.025em | | H2 | Inter | 26px | 600 | 1.25 | -0.012em | | Body | Inter | 17px | 400 | 1.62 | -0.005em | | UI / Button | Inter | 14px | 600 | 1.4 | 0 | | Number / Metric | IBM Plex Mono | 14px | 500 | 1.0 | 0 tabular-nums | | Big KPI | IBM Plex Mono | 28px | 600 | 1.0 | 0 tabular-nums | | Label | IBM Plex Mono | 11px | 500 | 1.0 | 0.06em uppercase | Inter for prose; IBM Plex Mono for every numeric or ID string. The tabular-nums variant lets KPI rows column-align cleanly. ## 4. Buttons ### Primary (Graphite Rounded) ```css background: #181d24; color: #eef2f8; padding: 10px 20px; border-radius: 10px; font-weight: 600; ``` The graphite-on-mist reads as a precision instrument tile — the only solid surface besides the cards. ### Secondary (Glass) ```css background: rgba(255,255,255,0.70); border: 1px solid rgba(24,29,36,0.10); ``` The white tint picks up the mist field — secondary buttons read as soft frosted tiles. ### Outline & Ghost - Outline: transparent, 1px hairline at 16% graphite - Ghost: no border, ink-50, hover lifts to graphite ## 5. Cards ```css background: rgba(255,255,255,0.70); border: 1px solid rgba(24,29,36,0.08); border-radius: 16px; box-shadow: rgba(24,29,36,0.04) 0 1px 2px, rgba(24,29,36,0.04) 0 8px 28px -10px; ``` Glass tint on the gradient = the mist bleeds through the card. The far-spread shadow at -10px spread is the soft-mist lift — present, never heavy. ## 6. Charts Thin precise bars (4px wide, 5px gap). One bar in graphite, others in 22% graphite. Line charts at 1.5px graphite with a 6% graphite fill, ending in a graphite dot marker. NO gridlines. ## 7. Tabs Underline 1.5px in graphite for the active state. Inactive tabs are ink-50 in Inter 600. Hover lifts to graphite. ## 8. Spacing - Base 4px - Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128` - Section padding: 96px desktop, 48px mobile ## 9. Do's & don'ts ✅ **Do** - Use the single-hue gradient: pale mist → bone-white, 5% lightness shift, never sunset - Use glass cards that pick up the gradient through the white tint - Use graphite as both primary text and primary CTA fill — one value, two roles - Use IBM Plex Mono with tabular-nums on every number, timestamp, percentage ❌ **Don't** - Use a two-hue gradient (peach→pink, purple→blue) — single-hue tonal only - Add a third accent color — graphite carries every "look here" moment - Use solid white cards — the white tint that bleeds the gradient is the system's signature - Use a serif for display — Inter calm-authority is the system voice --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#181d24` | | secondary | `#6a7283` | | tertiary | `#181d24` | | neutral | `#e2e7ef` | | surface | `#eef2f8` | ### Typography - **Display:** Inter - **Body:** Inter - **Mono:** IBM Plex Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 5rem / 1.04 / 600 / -0.035em | | H1 | 3rem / 1.12 / 600 / -0.025em | | H2 | 1.625rem / 1.25 / 600 / -0.012em | | Body | 1.0625rem / 1.62 / 400 / -0.005em | ### Radius - sm: `6px` - md: `10px` - lg: `16px` - pill: `9999px` ### Shadows - **card:** `rgba(24,29,36,0.04) 0 1px 2px, rgba(24,29,36,0.04) 0 8px 28px -10px` - **button:** `none` ### Borders - **card:** `1px solid rgba(24,29,36,0.08)` - **divider:** `rgba(24,29,36,0.10)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#181d24` | | color | `#eef2f8` | | border | `none` | | padding | `10px 20px` | | fontWeight | `600` | | fontSize | `0.875rem` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `rgba(255,255,255,0.70)` | | color | `#181d24` | | border | `1px solid rgba(24,29,36,0.10)` | | padding | `10px 20px` | | fontWeight | `500` | | fontSize | `0.875rem` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#181d24` | | border | `1px solid rgba(24,29,36,0.16)` | | padding | `10px 20px` | | fontWeight | `500` | | fontSize | `0.875rem` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#6a7283` | | border | `none` | | padding | `10px 14px` | | fontWeight | `500` | | fontSize | `0.875rem` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1.5` | | fillOpacity | `0.06` | | gridlines | `false` | | barGap | `5px` | | highlight | `single` | | dotMarker | `true` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 4px 12px -2px rgba(15,23,42,0.18)`, filter: `brightness(0.97)` - **focus** — outline: `2px solid rgba(24, 29, 36, 0.5)`, outline-offset: `2px` - **active** — shadow: `0 1px 2px rgba(15,23,42,0.1)`, transform: `scale(0.98)` - **disabled** — opacity: `0.4`, filter: `saturate(0.5)` - **loading** — opacity: `0.7` - **selected** — bg: `#181d24`, color: `#eef2f8` #### Input - **hover** — border: `1px solid rgba(24, 29, 36, 0.5)` - **focus** — border: `1.5px solid #181d24`, shadow: `0 0 0 4px rgba(24, 29, 36, 0.15)` - **disabled** — bg: `rgba(24, 29, 36, 0.04)`, opacity: `0.4` - **error** — border: `1.5px solid #DC2626`, shadow: `0 0 0 4px rgba(220,38,38,0.15)` #### Card - **hover** — shadow: `0 12px 28px -12px rgba(15,23,42,0.18)`, transform: `translateY(-2px)` - **selected** — bg: `rgba(24, 29, 36, 0.04)`, border: `1.5px solid #181d24` - **dragging** — shadow: `0 20px 48px -16px rgba(15,23,42,0.3)`, transform: `scale(1.02) rotate(-0.5deg)`, opacity: `0.9` #### Tab - **hover** — bg: `rgba(24, 29, 36, 0.06)`, color: `#181d24` - **focus** — outline: `2px solid rgba(24, 29, 36, 0.5)`, outline-offset: `2px` - **selected** — color: `#181d24`, border: `0 0 2px 0 solid #181d24` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Quiet ease.** 240 ms ease-out for all standard transitions. Reliable, invisible — motion stays out of the way. ```css transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `160ms` | | duration.base | `240ms` | | duration.slow | `380ms` | | easing.standard | `cubic-bezier(0.4, 0, 0.2, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.34, 1.4, 0.64, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — hairline border separates. | | level1 | `0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04)` | List rows, resting cards. | | level2 | `0 4px 12px -2px rgba(15,23,42,0.1), 0 2px 6px rgba(15,23,42,0.06)` | Hover cards, popover. | | level3 | `0 12px 32px -8px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.08)` | Sheets, side panels. | | level4 | `0 28px 64px -16px rgba(15,23,42,0.28), 0 8px 24px rgba(15,23,42,0.12)` | Modals — scrim required. | ### Content - **measure:** `68ch` (max line length for body prose) - **paragraph spacing:** `1.2em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#181d24`, underline `hover` - **blockquote:** border `3px solid rgba(24, 29, 36, 0.6)`, padding `0.5em 0 0.5em 1.25em` - **code:** background `rgba(24, 29, 36, 0.06)`, color `#181d24` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 15.07:1 | AA | AAA | — | | Body text on canvas | 13.64:1 | AA | AAA | — | | Muted text on surface | 4.3:1 | AA | AA-Large | `#656d7d` → 4.63:1 (AA) | | Accent on surface | 15.07:1 | AA-Large | AAA | — | | Accent on canvas | 13.64:1 | AA-Large | AAA | — | --- # SYSTEM: Hemlock Paper Source: https://www.freedesignmd.com/system/hemlock-paper --- name: "Hemlock Paper" description: "A warm off-white paper system that earns trust through quiet. Cream-paper surfaces, EB Garamond at oversized scale for headlines paired with Inter for UI, generous reading line-heights, a single forest-green accent reserved for verified marks and the primary CTA. Built for advisory firms, professional services, premium brands, and editorial sites that want quiet European authority." tags: [editorial, warm, premium, serif, minimal] colors: primary: "#1c1a14" secondary: "#6b6759" tertiary: "#1c1a14" neutral: "#ebe4cf" surface: "#f3ecd6" typography: display: "EB Garamond" body: Inter mono: "JetBrains Mono" scale: hero: "6.5rem / 0.98 / 400 / -0.035em" h1: "3.75rem / 1.06 / 400 / -0.022em" h2: "1.875rem / 1.22 / 500 / -0.012em" body: "1.0625rem / 1.72 / 400 / -0.005em" radius: sm: 2px md: 3px lg: 4px pill: 9999px shadows: card: none button: none borders: card: "1px solid rgba(28,26,20,0.12)" divider: rgba(28,26,20,0.16) buttons: primary: background: #244232 color: #f3ecd6 border: none shape: sharp padding: 12px 24px font: 500 / 0.8125rem / 0.14em uppercase: true secondary: background: transparent color: #1c1a14 border: 1px solid #1c1a14 shape: sharp padding: 12px 24px font: 500 / 0.8125rem / 0.14em uppercase: true outline: background: transparent color: #1c1a14 border: 1px solid rgba(28,26,20,0.18) shape: sharp padding: 12px 24px font: 500 / 0.8125rem / 0.14em uppercase: true ghost: background: transparent color: #6b6759 border: none shape: sharp padding: 12px 16px font: 500 / 0.8125rem / 0.14em uppercase: true charts: variant: "thin-bars" stroke_width: 1 fill_opacity: 0 gridlines: false bar_gap: 12px highlight: single dot_marker: false fonts_url: "https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Hemlock Paper ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Hemlock Paper** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#244232`, text `#f3ecd6`, padding `12px 24px`, weight `500`, uppercased. - **Secondary** — sharp shape, text `#1c1a14`, border `1px solid #1c1a14`, padding `12px 24px`, weight `500`, uppercased. - **Outline** — sharp shape, text `#1c1a14`, border `1px solid rgba(28,26,20,0.18)`, padding `12px 24px`, weight `500`, uppercased. - **Ghost** — sharp shape, text `#6b6759`, padding `12px 16px`, weight `500`, uppercased. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#f3ecd6` - Border: `1px solid rgba(28,26,20,0.12)` - Shadow: `none` - Radius: `radius.lg` (`4px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `thin-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`EB Garamond`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Hemlock Paper is a warm off-white paper system that earns trust through quiet. The page surface is cream paper `#f3ecd6` — warmer than a clinical white-paper, calmer than parchment. Headlines run in EB Garamond 400 at 104px — the classical serif at scale, never bold. Body sits in Inter at 17px on a 1.72 leading — a generous reading rhythm that signals long-form respect. UI labels run in Inter 500 with 0.14em uppercase tracking — the engraved-foundry voice. The single accent is forest green `#244232` reserved for verified marks (a small filled square in front of a verified item), the primary CTA, and the active step in a process flow. The discipline is in the proportion: huge classical serif on warm paper, generous body leading, and one forest-green mark per page that reads as a notary stamp. The system never lifts a card and never adds shadows. **Signature moves** - EB Garamond 400 at 104px headlines — classical serif at scale, never bold - Warm cream paper `#f3ecd6` — never bright white, never beige - Forest green `#244232` exclusively on verified marks + primary CTA + active step - 17px Inter body on 1.72 leading — generous long-form reading rhythm - 0.14em uppercase tracking on UI labels — engraved-foundry voice - Sharp 2-4px corners — letterpress precision, no shadows anywhere ## 2. Palette ### Surfaces - **Cream Paper** `#f3ecd6` — page background (warm off-white) - **Cream Lift** `#ebe4cf` — secondary surfaces, footer - **Hairline** `rgba(28,26,20,0.12)` — every divider, every card edge ### Ink - **Ink** `#1c1a14` — text, headings (warm near-black) - **Ink 50** `#6b6759` — secondary text, mono captions ### Accent - **Forest** `#244232` — verified marks, primary CTA, active step indicator - **Forest Soft** `rgba(36,66,50,0.10)` — focus ring, hovered step ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | EB Garamond | 104px | 400 | 0.98 | -0.035em | | H1 | EB Garamond | 60px | 400 | 1.06 | -0.022em | | H2 | EB Garamond | 30px | 500 | 1.22 | -0.012em | | Pull Quote | EB Garamond (italic) | 26px | 400 | 1.4 | -0.008em | | Body | Inter | 17px | 400 | 1.72 | -0.005em | | UI / Button | Inter | 13px | 500 | 1.4 | 0.14em uppercase | | Caption / Date | JetBrains Mono | 11px | 500 | 1.0 | 0.10em uppercase | | Reference Number | JetBrains Mono | 13px | 500 | 1.0 | 0.04em tabular-nums | EB Garamond at 400 only — bold breaks the classical proportion. Italic reserved for pull quotes and the verified-by line. ## 4. Buttons ### Primary (Forest — Engage) ```css background: #244232; color: #f3ecd6; padding: 12px 24px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500; ``` The forest-green on warm paper reads as a wax-stamped notary mark, not a marketing CTA. ### Secondary (Ink Outline) - Transparent, 1px solid ink, ink text — same near-sharp shape, same wide tracking ### Outline & Ghost - Outline: transparent, 1px hairline at 18% ink - Ghost: no border, ink-50 uppercase ## 5. Cards (rare) The system prefers hairline-divided sections over cards. When a card is needed, it is sharp 4px corners with a 1px hairline at 12% ink — never lifted, never shadowed. Practice-area cards may add a 1px ink top border (3px wide) — the only chrome. ## 6. Charts Thin precise bars (3px wide, 12px gap). One bar in forest, others in 22% ink. NO gridlines. Y-axis labels in JetBrains Mono uppercase 11px. Charts are reserved for performance breakdowns and read as inscribed exhibits. ## 7. Tabs Underline 1px in ink for the active state. Inactive tabs are ink-50 in Inter 500 uppercase 0.14em. The active label often switches to EB Garamond italic at the same size — that is the rhythm change. ## 8. Spacing - Base 8px - Scale: `8, 16, 24, 32, 48, 64, 96, 128, 200` - Section padding: 160px desktop, 80px mobile — long-form rhythm ## 9. Do's & don'ts ✅ **Do** - Use EB Garamond at 400 only — anything heavier breaks the classical proportion - Hold the warm cream paper surface — bright white reads as web app, beige reads as old textbook - Reserve forest green for verified marks + primary CTA + active step exclusively - Use 17px Inter body on 1.72 leading — long-form reading respect ❌ **Don't** - Use stock photography of pillars, trees, or "trust" imagery — the typography earns it - Use EB Garamond at 600+ — bold breaks the classical proportion - Use a second accent — forest alone, on three specific surfaces - Add shadows or lifted cards — hairlines and breathing room carry the layout --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1c1a14` | | secondary | `#6b6759` | | tertiary | `#1c1a14` | | neutral | `#ebe4cf` | | surface | `#f3ecd6` | ### Typography - **Display:** EB Garamond - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 6.5rem / 0.98 / 400 / -0.035em | | H1 | 3.75rem / 1.06 / 400 / -0.022em | | H2 | 1.875rem / 1.22 / 500 / -0.012em | | Body | 1.0625rem / 1.72 / 400 / -0.005em | ### Radius - sm: `2px` - md: `3px` - lg: `4px` - pill: `9999px` ### Shadows - **card:** `none` - **button:** `none` ### Borders - **card:** `1px solid rgba(28,26,20,0.12)` - **divider:** `rgba(28,26,20,0.16)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#244232` | | color | `#f3ecd6` | | border | `none` | | padding | `12px 24px` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.14em` | | uppercase | `true` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#1c1a14` | | border | `1px solid #1c1a14` | | padding | `12px 24px` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.14em` | | uppercase | `true` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#1c1a14` | | border | `1px solid rgba(28,26,20,0.18)` | | padding | `12px 24px` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.14em` | | uppercase | `true` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#6b6759` | | border | `none` | | padding | `12px 16px` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.14em` | | uppercase | `true` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1` | | fillOpacity | `0` | | gridlines | `false` | | barGap | `12px` | | highlight | `single` | | dotMarker | `false` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(28, 26, 20, 0.92)`, shadow: `0 4px 20px -8px rgba(28, 26, 20, 0.4)` - **focus** — outline: `1.5px solid #1c1a14`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#1c1a14`, color: `#f3ecd6` #### Input - **hover** — border: `1px solid #1c1a14` - **focus** — border: `1px solid #1c1a14`, shadow: `0 1px 0 0 #1c1a14` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #1c1a14` #### Tab - **hover** — color: `#1c1a14` - **focus** — outline: `1.5px solid #1c1a14`, outline-offset: `3px` - **selected** — color: `#1c1a14`, border: `0 0 2px 0 solid #1c1a14` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#1c1a14`, underline `always` - **blockquote:** border `4px solid #1c1a14`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(28, 26, 20, 0.06)`, color `#1c1a14` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 14.73:1 | AA | AAA | — | | Body text on canvas | 13.69:1 | AA | AAA | — | | Muted text on surface | 4.79:1 | AA | AA | — | | Accent on surface | 14.73:1 | AA-Large | AAA | — | | Accent on canvas | 13.69:1 | AA-Large | AAA | — | --- # SYSTEM: Pastel Mesh Source: https://www.freedesignmd.com/system/pastel-mesh --- name: "Pastel Mesh" description: "The design.md house style — Source Serif 4 with blue italic accent words, soft pastel mesh background (peach, lavender, mint), translucent glass panes with hairline borders, and a single deep editorial blue pill CTA." tags: [minimal, light, premium, glass, modern] colors: primary: "#15192B" secondary: "#697084" tertiary: "#0071E3" neutral: "#F8F9FB" surface: "#FFFFFF" typography: display: "Source Serif 4" body: Inter mono: "JetBrains Mono" scale: hero: "4.5rem / 1.02 / 600 / -0.02em" h1: "2.75rem / 1.05 / 600 / -0.02em" h2: "1.5rem / 1.25 / 600 / -0.015em" body: "1.0625rem / 1.6 / 400 / -0.005em" radius: sm: 6px md: 10px lg: 16px pill: 9999px shadows: card: "inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 12px -4px rgba(15, 23, 42, 0.04)" button: none borders: card: "1px solid rgba(15, 23, 42, 0.08)" divider: "rgba(15, 23, 42, 0.06)" glass: surface: "rgba(255, 255, 255, 0.62)" blur: 20px saturate: 160% border: "1px solid rgba(15, 23, 42, 0.08)" shadow: "0 2px 12px -4px rgba(15, 23, 42, 0.04)" inner_highlight: "inset 0 1px 0 rgba(255, 255, 255, 0.50)" backdrop: "radial-gradient(ellipse 80% 50% at 15% 0%, rgba(186, 213, 255, 0.45) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 85% 10%, rgba(255, 200, 230, 0.38) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(190, 240, 220, 0.35) 0%, transparent 70%), #F8F9FB" buttons: primary: background: #0071E3 color: #FFFFFF border: 1px solid #0071E3 shape: pill padding: 13px 24px font: 500 / 0.9375rem / -0.005em secondary: background: rgba(255, 255, 255, 0.62) color: #15192B border: 1px solid rgba(15, 23, 42, 0.08) shape: pill padding: 13px 24px font: 500 / 0.9375rem / -0.005em backdrop_blur: 12px backdrop_saturate: 140% outline: background: rgba(255, 255, 255, 0.45) color: #15192B border: 1px solid rgba(15, 23, 42, 0.10) shape: pill padding: 12px 22px font: 500 / 0.9375rem / -0.005em backdrop_blur: 12px backdrop_saturate: 140% ghost: background: transparent color: #0071E3 border: none shape: pill padding: 11px 6px font: 500 / 0.9375rem / -0.005em hover: underline charts: variant: line stroke_width: 2 gridlines: false highlight: last dot_marker: true axis_color: "#697084" palette: ["#0071E3", "#15192B", "#697084"] fonts_url: "https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Pastel Mesh ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Pastel Mesh** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — pill shape, bg `#0071E3`, text `#FFFFFF`, border `1px solid #0071E3`, padding `13px 24px`, weight `500`. - **Secondary** — pill shape, bg `rgba(255, 255, 255, 0.62)`, text `#15192B`, border `1px solid rgba(15, 23, 42, 0.08)`, padding `13px 24px`, weight `500`. - **Outline** — pill shape, bg `rgba(255, 255, 255, 0.45)`, text `#15192B`, border `1px solid rgba(15, 23, 42, 0.10)`, padding `12px 22px`, weight `500`. - **Ghost** — pill shape, text `#0071E3`, padding `11px 6px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FFFFFF` - Border: `1px solid rgba(15, 23, 42, 0.08)` - Shadow: `inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 12px -4px rgba(15, 23, 42, 0.04)` - Radius: `radius.lg` (`16px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. > This system ships a **glass treatment** — see the Glass token table. > Apply `backdrop-filter: blur(20px)` to translucent panes. > The page must have a backdrop (gradient mesh / blurred orbs) for glass to refract. #### Charts - Bar/line variant: `line` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#0071E3`, `#15192B`, `#697084`. #### Typography pairings - **Display (`Source Serif 4`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Pastel Mesh is the in-house language of **design.md** itself — a modern minimal hybrid built on a soft pastel mesh background, translucent glass panes with hairline borders, and a single deep editorial blue accent that lives in italic display words and the primary CTA. The whole system runs on **three quiet ideas**: 1. A near-white canvas with a soft pastel mesh (peach + lavender + mint radial blooms) sitting above it. 2. Translucent white glass panes (62% white + 20px blur + 1px hairline) for every surface. 3. **One** blue. It appears as italic Source Serif accent words, the primary pill CTA, the mono eyebrow tags, and the chart line. Nowhere else. This is for product marketing, design tooling, modern editorial, and any brand that wants to feel calm, precise, and a little bit premium. ## The Mesh Background The signature backdrop is a three-radial pastel mesh on a near-white canvas. It's faint — never above 45% opacity on any single bloom. Use it on the page ``, fixed-attachment, no repeat: ```css body { background-color: #F8F9FB; background-image: radial-gradient(ellipse 80% 50% at 15% 0%, rgba(186, 213, 255, 0.45), transparent 60%), radial-gradient(ellipse 70% 50% at 85% 10%, rgba(255, 200, 230, 0.38), transparent 60%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(190, 240, 220, 0.35), transparent 70%); background-attachment: fixed; background-repeat: no-repeat; } ``` The blooms live at the **edges** — top-left blue, top-right pink, bottom-center mint. The center stays clean so reading is never compromised. ## The Italic Accent (signature) Source Serif 4 italic in **editorial-blue #0071E3** is the system's voice. It appears in hero headlines as the closing phrase, and occasionally inside section titles: > Free design.md library *for your coding tool.* > Three steps. *No setup.* Apply it with a normal-weight italic span — never bold, never roman: ```tsx

Free design.md library{" "} for your coding tool.

``` The italic should be the **last 2–4 words** of the headline. It's the rhythmic closer. ## Color - **Near-Black #15192B** — primary text. Cool cast harmonizes with the blue accent. - **Slate #697084** — captions, meta, axis labels. - **Editorial Blue #0071E3** — the single accent. Italic display, primary CTA, mono eyebrows. - **Off-White #F8F9FB** — page canvas (the mesh sits above it). - **Paper #FFFFFF** — pure white card fill. **No second accent exists.** editorial blue carries everything chromatic. ## Typography - **Display: Source Serif 4** at 4.5rem / 600, -2% tracking. The italic style at 400 weight is reserved for the blue accent. - **Body: Inter** at 1.0625rem with **1.6 leading**. - **Mono: JetBrains Mono** at 0.6875rem, +18% tracking, uppercase, in editorial blue. Used for eyebrow tags like `00 · THE DIRECTORY`. | Role | Font | Size | Weight | Style | |------|------|------|--------|-------| | Hero | Source Serif 4 | 4.5rem | 600 | Roman + 400 italic blue accent | | H1 | Source Serif 4 | 2.75rem | 600 | Same | | H2 | Source Serif 4 | 1.5rem | 600 | Same | | Body | Inter | 1.0625rem | 400 | -0.005em / 1.6 | | Eyebrow | JetBrains Mono | 0.6875rem | 500 | UPPER, +0.18em, blue | ## Glass Panes Three glass tiers, all on the mesh backdrop: - **Subtle** — 45% white, 12px blur, 140% saturate. For headers, secondary buttons. - **Default** — 62% white, 20px blur, 160% saturate. For cards, How-It-Works strips. - **Strong** — 78% white, 28px blur, 180% saturate. For modals, popovers. Every glass surface carries: - 1px hairline border at `rgba(15, 23, 42, 0.08)`. - An inner top highlight: `inset 0 1px 0 rgba(255, 255, 255, 0.5)`. - A whisper drop shadow: `0 2px 12px -4px rgba(15, 23, 42, 0.04)`. Never use heavy shadows. The hairline + the inner highlight IS the elevation. ## Buttons All four are **pills** (9999px radius). The editorial-blue primary is the only solid fill in the system. - **Primary** — solid editorial blue, white label, no shadow. The single chromatic moment. - **Secondary** — translucent glass pill (62% white, 12px blur), hairline slate border. - **Outline** — softer glass pill (45% white) with a slightly firmer hairline. - **Ghost** — bare editorial-blue label, hover underline. **No drop shadows on any button.** The pill form + the hairline carries the gesture. ## Cards Default glass pane (62% white + 20px blur + hairline). Radius is **24px** on hero strips, **16px** on standard cards. Cards lift with the inner highlight, never with a halo. ## Charts & Data A single 2px editorial-blue line over the mesh. **No gridlines, no fills.** A small blue dot at the latest reading. Axis labels in slate. ## Do's and Don'ts - ✅ The mesh background is mandatory. It's the system's atmosphere. - ✅ Italic Source Serif blue closes every hero headline. 2–4 words, always italic, always 400 weight. - ✅ Mono eyebrow numerals in editorial blue: `00 · SECTION NAME`. Section markers. - ✅ Pill buttons everywhere. The 9999px radius is the system. - ❌ No second accent color. editorial blue is alone. - ❌ No deep drop shadows. Hairline + inner highlight IS the elevation. - ❌ No bold italic. The italic accent is always 400 weight. - ❌ No mesh in the center of the page — the blooms live at edges so reading stays clean. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#15192B` | | secondary | `#697084` | | tertiary | `#0071E3` | | neutral | `#F8F9FB` | | surface | `#FFFFFF` | ### Typography - **Display:** Source Serif 4 - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.5rem / 1.02 / 600 / -0.02em | | H1 | 2.75rem / 1.05 / 600 / -0.02em | | H2 | 1.5rem / 1.25 / 600 / -0.015em | | Body | 1.0625rem / 1.6 / 400 / -0.005em | ### Radius - sm: `6px` - md: `10px` - lg: `16px` - pill: `9999px` ### Shadows - **card:** `inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 12px -4px rgba(15, 23, 42, 0.04)` - **button:** `none` ### Borders - **card:** `1px solid rgba(15, 23, 42, 0.08)` - **divider:** `rgba(15, 23, 42, 0.06)` ### Glass Translucent panes with backdrop-filter — the preview renders cards from these exact values. | Property | Value | |----------|-------| | surface | `rgba(255, 255, 255, 0.62)` | | blur | `20px` | | saturate | `160%` | | border | `1px solid rgba(15, 23, 42, 0.08)` | | shadow | `0 2px 12px -4px rgba(15, 23, 42, 0.04)` | | innerHighlight | `inset 0 1px 0 rgba(255, 255, 255, 0.50)` | | backdrop | `radial-gradient(ellipse 80% 50% at 15% 0%, rgba(186, 213, 255, 0.45) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 85% 10%, rgba(255, 200, 230, 0.38) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(190, 240, 220, 0.35) 0%, transparent 70%), #F8F9FB` | ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `pill` | | background | `#0071E3` | | color | `#FFFFFF` | | border | `1px solid #0071E3` | | padding | `13px 24px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Secondary | Property | Value | |----------|-------| | shape | `pill` | | background | `rgba(255, 255, 255, 0.62)` | | color | `#15192B` | | border | `1px solid rgba(15, 23, 42, 0.08)` | | padding | `13px 24px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | backdropBlur | `12px` | | backdropSaturate | `140%` | #### Outline | Property | Value | |----------|-------| | shape | `pill` | | background | `rgba(255, 255, 255, 0.45)` | | color | `#15192B` | | border | `1px solid rgba(15, 23, 42, 0.10)` | | padding | `12px 22px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | backdropBlur | `12px` | | backdropSaturate | `140%` | #### Ghost | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#0071E3` | | border | `none` | | padding | `11px 6px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `line` | | strokeWidth | `2` | | gridlines | `false` | | highlight | `last` | | dotMarker | `true` | | axisColor | `#697084` | | palette | `#0071E3`, `#15192B`, `#697084` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 8px 24px -8px rgba(0, 113, 227, 0.35), inset 0 1px 0 rgba(255,255,255,0.18)`, transform: `translateY(-1px)`, filter: `saturate(1.15)` - **focus** — outline: `2px solid rgba(0, 113, 227, 0.5)`, outline-offset: `3px` - **active** — transform: `translateY(0) scale(0.98)`, filter: `brightness(0.96)` - **disabled** — opacity: `0.4`, filter: `saturate(0.4) blur(0.4px)` - **loading** — opacity: `0.7` - **selected** — bg: `rgba(0, 113, 227, 0.18)`, color: `#0071E3` #### Input - **hover** — border: `1px solid rgba(0, 113, 227, 0.4)`, shadow: `inset 0 1px 0 rgba(255,255,255,0.18)` - **focus** — border: `1px solid rgba(0, 113, 227, 0.65)`, shadow: `0 0 0 4px rgba(0, 113, 227, 0.15), inset 0 1px 0 rgba(255,255,255,0.18)` - **disabled** — opacity: `0.4` - **error** — border: `1px solid rgba(248,113,113,0.7)`, shadow: `0 0 0 4px rgba(248,113,113,0.15)` #### Card - **hover** — shadow: `0 16px 48px -16px rgba(0, 113, 227, 0.25), inset 0 1px 0 rgba(255,255,255,0.18)`, transform: `translateY(-2px)`, filter: `saturate(1.1)` - **selected** — border: `1px solid rgba(0, 113, 227, 0.5)` - **dragging** — shadow: `0 24px 64px -16px rgba(0,0,0,0.4)`, transform: `scale(1.02)`, opacity: `0.85` #### Tab - **hover** — bg: `rgba(0, 113, 227, 0.08)` - **focus** — outline: `2px solid rgba(0, 113, 227, 0.5)`, outline-offset: `2px` - **selected** — bg: `rgba(0, 113, 227, 0.18)`, color: `#0071E3` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Refract.** Long opacity- and blur-driven transitions. Not a hard move, but a shift of light across the glass surface. ```css transition: opacity 350ms cubic-bezier(0.32, 0.72, 0, 1), backdrop-filter 350ms cubic-bezier(0.32, 0.72, 0, 1), transform 350ms cubic-bezier(0.32, 0.72, 0, 1); ``` | Token | Value | |-------|-------| | duration.instant | `100ms` | | duration.fast | `200ms` | | duration.base | `350ms` | | duration.slow | `550ms` | | easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.34, 1.2, 0.64, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `inset 0 1px 0 rgba(255,255,255,0.18)` | Flat glass surface — top-edge gloss only. | | level1 | `0 2px 8px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Soft lift + top-edge gloss. | | level2 | `0 12px 32px -8px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255,255,255,0.18)` | Floating pane — popover. | | level3 | `0 24px 64px -16px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(0, 113, 227, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Sheet — accent rim for depth. | | level4 | `0 40px 96px -24px rgba(15, 23, 42, 0.5), 0 0 48px -12px rgba(0, 113, 227, 0.25), inset 0 1px 0 rgba(255,255,255,0.18)` | Modal — dramatic glow, scrim required. | ### Content - **measure:** `66ch` (max line length for body prose) - **paragraph spacing:** `1.25em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#0071E3`, underline `hover` - **blockquote:** border `1px solid rgba(0, 113, 227, 0.4)`, padding `0.9em 1.2em` - **code:** background `rgba(0, 113, 227, 0.1)`, color `#0071E3` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 17.42:1 | AA | AAA | — | | Body text on canvas | 16.53:1 | AA | AAA | — | | Muted text on surface | 4.94:1 | AA | AA | — | | Accent on surface | 4.7:1 | AA-Large | AA | — | | Accent on canvas | 4.46:1 | AA-Large | AA-Large | — | --- # SYSTEM: Sorbet Tonal Source: https://www.freedesignmd.com/system/sorbet-tonal --- name: "Sorbet Tonal" description: "A multi-stop pastel gradient runs across the page — desaturated lavender, peach, seafoam, cream — every stop at ~25% chroma so it reads as soft sorbet rather than rainbow. Pure paper-white cards, ink text, hairlines. Calm and considered." tags: [gradient, pastel, soft, minimal, wellness, premium] colors: primary: "#1C1B22" secondary: "#6B6973" tertiary: "#A088B8" neutral: "#F4EFE9" surface: "#FFFFFF" typography: display: Manrope body: Manrope mono: "JetBrains Mono" scale: hero: "4.75rem / 1.05 / 600 / -0.035em" h1: "2.75rem / 1.1 / 600 / -0.028em" h2: "1.5rem / 1.3 / 600 / -0.015em" body: "1.0625rem / 1.7 / 400 / -0.003em" radius: sm: 14px md: 20px lg: 28px pill: 9999px shadows: card: "0 18px 48px -24px rgba(40, 35, 60, 0.14), 0 1px 3px rgba(40, 35, 60, 0.05)" button: "0 6px 18px -8px rgba(28, 27, 34, 0.22)" borders: card: "1px solid rgba(28, 27, 34, 0.06)" divider: "rgba(28, 27, 34, 0.08)" glass: surface: "#FFFFFF" blur: 0px border: "1px solid rgba(28, 27, 34, 0.06)" shadow: "0 18px 48px -24px rgba(40, 35, 60, 0.14)" backdrop: "radial-gradient(at 8% 12%, rgba(195, 178, 222, 0.55) 0px, transparent 42%), radial-gradient(at 90% 18%, rgba(245, 210, 198, 0.55) 0px, transparent 45%), radial-gradient(at 78% 92%, rgba(196, 224, 215, 0.55) 0px, transparent 48%), radial-gradient(at 14% 88%, rgba(238, 226, 200, 0.50) 0px, transparent 45%)" buttons: primary: background: #1C1B22 color: #FFFFFF border: 1px solid #1C1B22 shape: pill padding: 13px 26px font: 600 / 0.9375rem / -0.005em shadow: 0 6px 18px -8px rgba(28, 27, 34, 0.22) secondary: background: #FFFFFF color: #1C1B22 border: 1px solid rgba(28, 27, 34, 0.10) shape: pill padding: 13px 26px font: 500 / 0.9375rem / -0.005em outline: background: transparent color: #1C1B22 border: 1px solid rgba(28, 27, 34, 0.16) shape: pill padding: 12px 25px font: 500 / 0.9375rem / -0.005em ghost: background: transparent color: #6B6973 border: none shape: pill padding: 12px 6px font: 500 / 0.9375rem / -0.005em hover: underline charts: variant: area stroke_width: 2 fill_opacity: 0.2 gridlines: false highlight: last dot_marker: true axis_color: "#6B6973" palette: ["#A088B8", "#C7B4D8", "#E0D2EA"] fonts_url: "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Sorbet Tonal ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Sorbet Tonal** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — pill shape, bg `#1C1B22`, text `#FFFFFF`, border `1px solid #1C1B22`, padding `13px 26px`, weight `600`, shadow `0 6px 18px -8px rgba(28, 27, 34, 0.22)`. - **Secondary** — pill shape, bg `#FFFFFF`, text `#1C1B22`, border `1px solid rgba(28, 27, 34, 0.10)`, padding `13px 26px`, weight `500`. - **Outline** — pill shape, text `#1C1B22`, border `1px solid rgba(28, 27, 34, 0.16)`, padding `12px 25px`, weight `500`. - **Ghost** — pill shape, text `#6B6973`, padding `12px 6px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FFFFFF` - Border: `1px solid rgba(28, 27, 34, 0.06)` - Shadow: `0 18px 48px -24px rgba(40, 35, 60, 0.14), 0 1px 3px rgba(40, 35, 60, 0.05)` - Radius: `radius.lg` (`28px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. > This system ships a **glass treatment** — see the Glass token table. > Apply `backdrop-filter: blur(0px)` to translucent panes. > The page must have a backdrop (gradient mesh / blurred orbs) for glass to refract. #### Charts - Bar/line variant: `area` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#A088B8`, `#C7B4D8`, `#E0D2EA`. #### Typography pairings - **Display (`Manrope`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Manrope`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Sorbet Tonal is built on one decision: a multi-stop pastel gradient runs across the entire page background — pale lavender, peach, seafoam, cream — but every stop is held at ~25% chroma. The desaturation is what makes it premium. Without it the system would read as a rainbow; with it, the page reads as soft sorbet. Cards sit on top in pure paper white. The contrast between the soft gradient page and the bright white cards is the entire design. For wellness brands, mindfulness apps, premium consumer products, journaling tools, anything that should feel calm and considered. ## The Gradient Recipe Four soft radial blobs at the corners, each ~50-55% alpha, layered over a warm cream base: ```css body { background: radial-gradient(at 8% 12%, rgba(195, 178, 222, 0.55) 0, transparent 42%), /* lavender */ radial-gradient(at 90% 18%, rgba(245, 210, 198, 0.55) 0, transparent 45%), /* peach */ radial-gradient(at 78% 92%, rgba(196, 224, 215, 0.55) 0, transparent 48%), /* seafoam */ radial-gradient(at 14% 88%, rgba(238, 226, 200, 0.50) 0, transparent 45%), /* cream */ #F4EFE9; } ``` The stops sit at the four corners — never centered, never edge-to-edge — so the gradient feels like ambient light rather than a poster. The 25% chroma cap is non-negotiable; pushing any stop higher tips the page into "vibecoded gradient." ## Color - **Ink #1C1B22** — primary text and primary CTA. - **Graphite #6B6973** — secondary text, axis labels. - **Mauve #A088B8** — chromatic accent (active state, chart line). Sits inside the gradient family. - **Cream #F4EFE9** — page canvas base. - **Paper #FFFFFF** — pure white card surface. The contrast is the design. ## Typography **One family — Manrope.** Display, body, all weights covered. The single-family decision keeps the system quiet so the gradient can sing. | Role | Size | Weight | Tracking | |------|------|--------|----------| | Hero | 4.75rem | 600 | -0.035em | | H1 | 2.75rem | 600 | -0.028em | | H2 | 1.5rem | 600 | -0.015em | | Body | 1.0625rem | 400 | -0.003em / 1.7 | ## Geometry - **Radii: 14 / 20 / 28, plus pill.** Generous and soft throughout. The whole system is rounded. - **Section gap: 128px** desktop, 80px mobile. The gradient needs room to breathe. - **12-column grid** with 28px gutters. ## Buttons - **Primary** — solid ink pill. The gradient is the protagonist; the CTA stays quiet. - **Secondary** — pure white pill with a hairline. - **Outline** — bare hairline pill. - **Ghost** — bare graphite label, hover underline. ## Cards **Pure white surface** on the gradient — no translucency, no glass. The contrast is the entire point. 20px corner radius, 1px ink hairline at 6% opacity, single soft pillowy shadow. Padding 32px minimum. ## Charts & Data Mauve area chart, 2px stroke, 20% fill opacity, no gridlines. End-of-line dot marker. The chart sits inside a white card so the gradient stays in the background. ## Do's and Don'ts - ✅ The gradient is mandatory. The whole identity rests on it. - ✅ Hold every gradient stop at ~25% chroma. Desaturation is what makes it premium. - ✅ Cards are pure white — never tinted, never glass. The contrast IS the design. - ✅ One family (Manrope) for everything. The discipline keeps the gradient as the only voice. - ❌ No high-chroma gradient stops. The moment a stop goes saturated, the system dies. - ❌ No translucent or tinted cards. White only. - ❌ No second chromatic accent beyond mauve. - ❌ No sharp corners. The system is soft from canvas to button. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1C1B22` | | secondary | `#6B6973` | | tertiary | `#A088B8` | | neutral | `#F4EFE9` | | surface | `#FFFFFF` | ### Typography - **Display:** Manrope - **Body:** Manrope - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.75rem / 1.05 / 600 / -0.035em | | H1 | 2.75rem / 1.1 / 600 / -0.028em | | H2 | 1.5rem / 1.3 / 600 / -0.015em | | Body | 1.0625rem / 1.7 / 400 / -0.003em | ### Radius - sm: `14px` - md: `20px` - lg: `28px` - pill: `9999px` ### Shadows - **card:** `0 18px 48px -24px rgba(40, 35, 60, 0.14), 0 1px 3px rgba(40, 35, 60, 0.05)` - **button:** `0 6px 18px -8px rgba(28, 27, 34, 0.22)` ### Borders - **card:** `1px solid rgba(28, 27, 34, 0.06)` - **divider:** `rgba(28, 27, 34, 0.08)` ### Glass Translucent panes with backdrop-filter — the preview renders cards from these exact values. | Property | Value | |----------|-------| | surface | `#FFFFFF` | | blur | `0px` | | border | `1px solid rgba(28, 27, 34, 0.06)` | | shadow | `0 18px 48px -24px rgba(40, 35, 60, 0.14)` | | backdrop | `radial-gradient(at 8% 12%, rgba(195, 178, 222, 0.55) 0px, transparent 42%), radial-gradient(at 90% 18%, rgba(245, 210, 198, 0.55) 0px, transparent 45%), radial-gradient(at 78% 92%, rgba(196, 224, 215, 0.55) 0px, transparent 48%), radial-gradient(at 14% 88%, rgba(238, 226, 200, 0.50) 0px, transparent 45%)` | ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `pill` | | background | `#1C1B22` | | color | `#FFFFFF` | | border | `1px solid #1C1B22` | | padding | `13px 26px` | | fontWeight | `600` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | shadow | `0 6px 18px -8px rgba(28, 27, 34, 0.22)` | #### Secondary | Property | Value | |----------|-------| | shape | `pill` | | background | `#FFFFFF` | | color | `#1C1B22` | | border | `1px solid rgba(28, 27, 34, 0.10)` | | padding | `13px 26px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Outline | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#1C1B22` | | border | `1px solid rgba(28, 27, 34, 0.16)` | | padding | `12px 25px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Ghost | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#6B6973` | | border | `none` | | padding | `12px 6px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `area` | | strokeWidth | `2` | | fillOpacity | `0.2` | | gridlines | `false` | | highlight | `last` | | dotMarker | `true` | | axisColor | `#6B6973` | | palette | `#A088B8`, `#C7B4D8`, `#E0D2EA` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 8px 24px -8px rgba(160, 136, 184, 0.35), inset 0 1px 0 rgba(255,255,255,0.18)`, transform: `translateY(-1px)`, filter: `saturate(1.15)` - **focus** — outline: `2px solid rgba(160, 136, 184, 0.5)`, outline-offset: `3px` - **active** — transform: `translateY(0) scale(0.98)`, filter: `brightness(0.96)` - **disabled** — opacity: `0.4`, filter: `saturate(0.4) blur(0.4px)` - **loading** — opacity: `0.7` - **selected** — bg: `rgba(160, 136, 184, 0.18)`, color: `#A088B8` #### Input - **hover** — border: `1px solid rgba(160, 136, 184, 0.4)`, shadow: `inset 0 1px 0 rgba(255,255,255,0.18)` - **focus** — border: `1px solid rgba(160, 136, 184, 0.65)`, shadow: `0 0 0 4px rgba(160, 136, 184, 0.15), inset 0 1px 0 rgba(255,255,255,0.18)` - **disabled** — opacity: `0.4` - **error** — border: `1px solid rgba(248,113,113,0.7)`, shadow: `0 0 0 4px rgba(248,113,113,0.15)` #### Card - **hover** — shadow: `0 16px 48px -16px rgba(160, 136, 184, 0.25), inset 0 1px 0 rgba(255,255,255,0.18)`, transform: `translateY(-2px)`, filter: `saturate(1.1)` - **selected** — border: `1px solid rgba(160, 136, 184, 0.5)` - **dragging** — shadow: `0 24px 64px -16px rgba(0,0,0,0.4)`, transform: `scale(1.02)`, opacity: `0.85` #### Tab - **hover** — bg: `rgba(160, 136, 184, 0.08)` - **focus** — outline: `2px solid rgba(160, 136, 184, 0.5)`, outline-offset: `2px` - **selected** — bg: `rgba(160, 136, 184, 0.18)`, color: `#A088B8` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Refract.** Long opacity- and blur-driven transitions. Not a hard move, but a shift of light across the glass surface. ```css transition: opacity 350ms cubic-bezier(0.32, 0.72, 0, 1), backdrop-filter 350ms cubic-bezier(0.32, 0.72, 0, 1), transform 350ms cubic-bezier(0.32, 0.72, 0, 1); ``` | Token | Value | |-------|-------| | duration.instant | `100ms` | | duration.fast | `200ms` | | duration.base | `350ms` | | duration.slow | `550ms` | | easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.34, 1.2, 0.64, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `inset 0 1px 0 rgba(255,255,255,0.18)` | Flat glass surface — top-edge gloss only. | | level1 | `0 2px 8px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Soft lift + top-edge gloss. | | level2 | `0 12px 32px -8px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255,255,255,0.18)` | Floating pane — popover. | | level3 | `0 24px 64px -16px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(160, 136, 184, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Sheet — accent rim for depth. | | level4 | `0 40px 96px -24px rgba(15, 23, 42, 0.5), 0 0 48px -12px rgba(160, 136, 184, 0.25), inset 0 1px 0 rgba(255,255,255,0.18)` | Modal — dramatic glow, scrim required. | ### Content - **measure:** `66ch` (max line length for body prose) - **paragraph spacing:** `1.25em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#A088B8`, underline `hover` - **blockquote:** border `1px solid rgba(160, 136, 184, 0.4)`, padding `0.9em 1.2em` - **code:** background `rgba(160, 136, 184, 0.1)`, color `#A088B8` ### Accessibility (WCAG 2.1) **Overall:** FAIL | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 17.08:1 | AA | AAA | — | | Body text on canvas | 14.94:1 | AA | AAA | — | | Muted text on surface | 5.39:1 | AA | AA | — | | Accent on surface | 3.13:1 | AA-Large | AA-Large | — | | Accent on canvas | 2.74:1 | AA-Large | FAIL | `#7c5d9c` → 4.71:1 (AA) | --- # SYSTEM: Prism Conic Source: https://www.freedesignmd.com/system/prism-conic --- name: "Prism Conic" description: "A slow conic gradient sweeps behind the page through desaturated lavender, sage, peach at ~22% chroma — soft prismatic light, never rainbow. Pure white cards on top, ink text, hairlines." tags: [gradient, soft, minimal, premium, creative] colors: primary: "#191920" secondary: "#6E6E78" tertiary: "#8E7FC4" neutral: "#F4F1EB" surface: "#FFFFFF" typography: display: "Inter Tight" body: Inter mono: "JetBrains Mono" scale: hero: "4.5rem / 1.05 / 600 / -0.035em" h1: "2.625rem / 1.1 / 600 / -0.028em" h2: "1.5rem / 1.3 / 600 / -0.015em" body: "1.0625rem / 1.7 / 400 / -0.003em" radius: sm: 12px md: 18px lg: 24px pill: 9999px shadows: card: "0 16px 40px -20px rgba(40, 35, 60, 0.12), 0 1px 3px rgba(40, 35, 60, 0.04)" button: "0 6px 16px -8px rgba(25, 25, 32, 0.22)" borders: card: "1px solid rgba(25, 25, 32, 0.06)" divider: "rgba(25, 25, 32, 0.08)" glass: surface: "#FFFFFF" blur: 0px border: "1px solid rgba(25, 25, 32, 0.06)" shadow: "0 16px 40px -20px rgba(40, 35, 60, 0.12)" backdrop: "conic-gradient(from 210deg at 50% 50%, rgba(190, 175, 220, 0.45) 0deg, rgba(195, 220, 200, 0.40) 110deg, rgba(245, 215, 195, 0.42) 220deg, rgba(190, 175, 220, 0.45) 360deg)" buttons: primary: background: #191920 color: #FFFFFF border: 1px solid #191920 shape: pill padding: 13px 26px font: 600 / 0.9375rem / -0.005em shadow: 0 6px 16px -8px rgba(25, 25, 32, 0.22) secondary: background: #FFFFFF color: #191920 border: 1px solid rgba(25, 25, 32, 0.10) shape: pill padding: 13px 26px font: 500 / 0.9375rem / -0.005em outline: background: transparent color: #191920 border: 1px solid rgba(25, 25, 32, 0.16) shape: pill padding: 12px 25px font: 500 / 0.9375rem / -0.005em ghost: background: transparent color: #6E6E78 border: none shape: pill padding: 12px 6px font: 500 / 0.9375rem / -0.005em hover: underline charts: variant: area stroke_width: 2 fill_opacity: 0.18 gridlines: false highlight: last dot_marker: true axis_color: "#6E6E78" palette: ["#8E7FC4", "#B8AED9", "#DAD3EB"] fonts_url: "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Prism Conic ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Prism Conic** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — pill shape, bg `#191920`, text `#FFFFFF`, border `1px solid #191920`, padding `13px 26px`, weight `600`, shadow `0 6px 16px -8px rgba(25, 25, 32, 0.22)`. - **Secondary** — pill shape, bg `#FFFFFF`, text `#191920`, border `1px solid rgba(25, 25, 32, 0.10)`, padding `13px 26px`, weight `500`. - **Outline** — pill shape, text `#191920`, border `1px solid rgba(25, 25, 32, 0.16)`, padding `12px 25px`, weight `500`. - **Ghost** — pill shape, text `#6E6E78`, padding `12px 6px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FFFFFF` - Border: `1px solid rgba(25, 25, 32, 0.06)` - Shadow: `0 16px 40px -20px rgba(40, 35, 60, 0.12), 0 1px 3px rgba(40, 35, 60, 0.04)` - Radius: `radius.lg` (`24px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. > This system ships a **glass treatment** — see the Glass token table. > Apply `backdrop-filter: blur(0px)` to translucent panes. > The page must have a backdrop (gradient mesh / blurred orbs) for glass to refract. #### Charts - Bar/line variant: `area` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#8E7FC4`, `#B8AED9`, `#DAD3EB`. #### Typography pairings - **Display (`Inter Tight`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Prism Conic is built on one decision: a slow conic gradient sits behind the entire page, sweeping through three desaturated tints — soft lavender, sage, peach — every stop held at ~22% chroma. The page reads as soft prismatic light, never rainbow. Cards sit on top in pure white. The contrast between the soft prismatic backdrop and the bright white cards is the entire design. For creative tools, design platforms, generative-art adjacent products, AI image tools, anything where "soft prismatic light" is the brand mood. ## The Conic Recipe The conic gradient sweeps from 210deg with three desaturated stops, looping back to the start hue so the seam is invisible: ```css body { background: conic-gradient( from 210deg at 50% 50%, rgba(190, 175, 220, 0.45) 0deg, rgba(195, 220, 200, 0.40) 110deg, rgba(245, 215, 195, 0.42) 220deg, rgba(190, 175, 220, 0.45) 360deg ), #F4F1EB; } ``` The 22% chroma cap is non-negotiable. Pushing any stop higher tips the system into "rainbow vibe gradient." For larger pages, blur the conic layer subtly (`filter: blur(20px)`) and apply it via a fixed pseudo-element so the page content stays crisp. ## Color - **Ink #191920** — primary text and primary CTA. - **Graphite #6E6E78** — secondary text, axis labels. - **Lavender #8E7FC4** — chromatic accent (active state, chart line). Sits inside the conic family. - **Cream #F4F1EB** — page canvas base under the conic. - **Paper #FFFFFF** — pure white card surface. The contrast is the design. ## Typography - **Display: Inter Tight 600** at 4.5rem with -3.5% tracking. - **Body: Inter 400** at 1.0625rem with 1.7 leading. | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | Inter Tight | 4.5rem | 600 | -0.035em | | H1 | Inter Tight | 2.625rem | 600 | -0.028em | | H2 | Inter Tight | 1.5rem | 600 | -0.015em | | Body | Inter | 1.0625rem | 400 | -0.003em / 1.7 | ## Geometry - **Radii: 12 / 18 / 24, plus pill.** Generous and soft throughout. - **Section gap: 128px** desktop, 80px mobile. The conic needs room to breathe. - **12-column grid** with 28px gutters. ## Buttons - **Primary** — solid ink pill. The conic is the protagonist; the CTA stays quiet. - **Secondary** — pure white pill with a hairline. - **Outline** — bare hairline pill. - **Ghost** — bare graphite label, hover underline. ## Cards **Pure white surface** on the conic — no translucency, no glass. The contrast is the entire point. 18px corner radius, 1px ink hairline at 6%, single soft pillowy shadow. Padding 32px minimum. ## Charts & Data Lavender area chart at 2px stroke and 18% fill opacity, no gridlines, end-of-line dot marker. The chart sits inside a white card so the conic stays in the background. ## Do's and Don'ts - ✅ The conic is mandatory. The whole identity rests on it. - ✅ Hold every conic stop at ~22% chroma. Desaturation is what makes it premium. - ✅ Cards are pure white — never tinted, never glass. - ✅ One chromatic accent — lavender. It sits inside the conic's family. - ❌ No high-chroma conic stops. Saturated stops kill the system instantly. - ❌ No translucent or tinted cards. White only. - ❌ No second chromatic accent beyond lavender. - ❌ No second light source — the conic is the only background treatment. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#191920` | | secondary | `#6E6E78` | | tertiary | `#8E7FC4` | | neutral | `#F4F1EB` | | surface | `#FFFFFF` | ### Typography - **Display:** Inter Tight - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.5rem / 1.05 / 600 / -0.035em | | H1 | 2.625rem / 1.1 / 600 / -0.028em | | H2 | 1.5rem / 1.3 / 600 / -0.015em | | Body | 1.0625rem / 1.7 / 400 / -0.003em | ### Radius - sm: `12px` - md: `18px` - lg: `24px` - pill: `9999px` ### Shadows - **card:** `0 16px 40px -20px rgba(40, 35, 60, 0.12), 0 1px 3px rgba(40, 35, 60, 0.04)` - **button:** `0 6px 16px -8px rgba(25, 25, 32, 0.22)` ### Borders - **card:** `1px solid rgba(25, 25, 32, 0.06)` - **divider:** `rgba(25, 25, 32, 0.08)` ### Glass Translucent panes with backdrop-filter — the preview renders cards from these exact values. | Property | Value | |----------|-------| | surface | `#FFFFFF` | | blur | `0px` | | border | `1px solid rgba(25, 25, 32, 0.06)` | | shadow | `0 16px 40px -20px rgba(40, 35, 60, 0.12)` | | backdrop | `conic-gradient(from 210deg at 50% 50%, rgba(190, 175, 220, 0.45) 0deg, rgba(195, 220, 200, 0.40) 110deg, rgba(245, 215, 195, 0.42) 220deg, rgba(190, 175, 220, 0.45) 360deg)` | ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `pill` | | background | `#191920` | | color | `#FFFFFF` | | border | `1px solid #191920` | | padding | `13px 26px` | | fontWeight | `600` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | shadow | `0 6px 16px -8px rgba(25, 25, 32, 0.22)` | #### Secondary | Property | Value | |----------|-------| | shape | `pill` | | background | `#FFFFFF` | | color | `#191920` | | border | `1px solid rgba(25, 25, 32, 0.10)` | | padding | `13px 26px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Outline | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#191920` | | border | `1px solid rgba(25, 25, 32, 0.16)` | | padding | `12px 25px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Ghost | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#6E6E78` | | border | `none` | | padding | `12px 6px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `area` | | strokeWidth | `2` | | fillOpacity | `0.18` | | gridlines | `false` | | highlight | `last` | | dotMarker | `true` | | axisColor | `#6E6E78` | | palette | `#8E7FC4`, `#B8AED9`, `#DAD3EB` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 8px 24px -8px rgba(142, 127, 196, 0.35), inset 0 1px 0 rgba(255,255,255,0.18)`, transform: `translateY(-1px)`, filter: `saturate(1.15)` - **focus** — outline: `2px solid rgba(142, 127, 196, 0.5)`, outline-offset: `3px` - **active** — transform: `translateY(0) scale(0.98)`, filter: `brightness(0.96)` - **disabled** — opacity: `0.4`, filter: `saturate(0.4) blur(0.4px)` - **loading** — opacity: `0.7` - **selected** — bg: `rgba(142, 127, 196, 0.18)`, color: `#8E7FC4` #### Input - **hover** — border: `1px solid rgba(142, 127, 196, 0.4)`, shadow: `inset 0 1px 0 rgba(255,255,255,0.18)` - **focus** — border: `1px solid rgba(142, 127, 196, 0.65)`, shadow: `0 0 0 4px rgba(142, 127, 196, 0.15), inset 0 1px 0 rgba(255,255,255,0.18)` - **disabled** — opacity: `0.4` - **error** — border: `1px solid rgba(248,113,113,0.7)`, shadow: `0 0 0 4px rgba(248,113,113,0.15)` #### Card - **hover** — shadow: `0 16px 48px -16px rgba(142, 127, 196, 0.25), inset 0 1px 0 rgba(255,255,255,0.18)`, transform: `translateY(-2px)`, filter: `saturate(1.1)` - **selected** — border: `1px solid rgba(142, 127, 196, 0.5)` - **dragging** — shadow: `0 24px 64px -16px rgba(0,0,0,0.4)`, transform: `scale(1.02)`, opacity: `0.85` #### Tab - **hover** — bg: `rgba(142, 127, 196, 0.08)` - **focus** — outline: `2px solid rgba(142, 127, 196, 0.5)`, outline-offset: `2px` - **selected** — bg: `rgba(142, 127, 196, 0.18)`, color: `#8E7FC4` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Refract.** Long opacity- and blur-driven transitions. Not a hard move, but a shift of light across the glass surface. ```css transition: opacity 350ms cubic-bezier(0.32, 0.72, 0, 1), backdrop-filter 350ms cubic-bezier(0.32, 0.72, 0, 1), transform 350ms cubic-bezier(0.32, 0.72, 0, 1); ``` | Token | Value | |-------|-------| | duration.instant | `100ms` | | duration.fast | `200ms` | | duration.base | `350ms` | | duration.slow | `550ms` | | easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.34, 1.2, 0.64, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `inset 0 1px 0 rgba(255,255,255,0.18)` | Flat glass surface — top-edge gloss only. | | level1 | `0 2px 8px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Soft lift + top-edge gloss. | | level2 | `0 12px 32px -8px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255,255,255,0.18)` | Floating pane — popover. | | level3 | `0 24px 64px -16px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(142, 127, 196, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Sheet — accent rim for depth. | | level4 | `0 40px 96px -24px rgba(15, 23, 42, 0.5), 0 0 48px -12px rgba(142, 127, 196, 0.25), inset 0 1px 0 rgba(255,255,255,0.18)` | Modal — dramatic glow, scrim required. | ### Content - **measure:** `66ch` (max line length for body prose) - **paragraph spacing:** `1.25em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#8E7FC4`, underline `hover` - **blockquote:** border `1px solid rgba(142, 127, 196, 0.4)`, padding `0.9em 1.2em` - **code:** background `rgba(142, 127, 196, 0.1)`, color `#8E7FC4` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 17.48:1 | AA | AAA | — | | Body text on canvas | 15.51:1 | AA | AAA | — | | Muted text on surface | 5.04:1 | AA | AA | — | | Accent on surface | 3.51:1 | AA-Large | AA-Large | — | | Accent on canvas | 3.11:1 | AA-Large | AA-Large | — | --- # SYSTEM: Quartz Monochrome Source: https://www.freedesignmd.com/system/quartz-monochrome --- name: "Quartz Monochrome" description: "No chromatic color at all. Five steps of grey on a paper-white canvas, generous 16px radii, oversized whitespace, one humanist sans for everything. The discipline is the brand." tags: [minimal, monochrome, light, premium, modern] colors: primary: "#0F0F11" secondary: "#6F6F75" tertiary: "#A8A8AE" neutral: "#FAFAF8" surface: "#FFFFFF" typography: display: Geist body: Geist mono: "Geist Mono" scale: hero: "4.75rem / 1.05 / 500 / -0.04em" h1: "2.75rem / 1.08 / 500 / -0.032em" h2: "1.5rem / 1.3 / 500 / -0.018em" body: "1.0625rem / 1.65 / 400 / -0.005em" radius: sm: 10px md: 14px lg: 16px pill: 9999px shadows: card: "0 1px 2px rgba(15, 15, 17, 0.04), 0 8px 24px -12px rgba(15, 15, 17, 0.08)" button: "0 1px 2px rgba(15, 15, 17, 0.06)" borders: card: "1px solid rgba(15, 15, 17, 0.06)" divider: "rgba(15, 15, 17, 0.08)" buttons: primary: background: #0F0F11 color: #FAFAF8 border: 1px solid #0F0F11 shape: pill padding: 12px 24px font: 500 / 0.9375rem / -0.005em shadow: 0 1px 2px rgba(15, 15, 17, 0.06) secondary: background: #FFFFFF color: #0F0F11 border: 1px solid rgba(15, 15, 17, 0.10) shape: pill padding: 12px 24px font: 500 / 0.9375rem / -0.005em outline: background: transparent color: #0F0F11 border: 1px solid rgba(15, 15, 17, 0.16) shape: pill padding: 11px 23px font: 500 / 0.9375rem / -0.005em ghost: background: transparent color: #6F6F75 border: none shape: pill padding: 11px 6px font: 500 / 0.9375rem / -0.005em hover: underline charts: variant: line stroke_width: 2 gridlines: false highlight: last dot_marker: true axis_color: "#A8A8AE" palette: ["#0F0F11"] fonts_url: "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Quartz Monochrome ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Quartz Monochrome** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — pill shape, bg `#0F0F11`, text `#FAFAF8`, border `1px solid #0F0F11`, padding `12px 24px`, weight `500`, shadow `0 1px 2px rgba(15, 15, 17, 0.06)`. - **Secondary** — pill shape, bg `#FFFFFF`, text `#0F0F11`, border `1px solid rgba(15, 15, 17, 0.10)`, padding `12px 24px`, weight `500`. - **Outline** — pill shape, text `#0F0F11`, border `1px solid rgba(15, 15, 17, 0.16)`, padding `11px 23px`, weight `500`. - **Ghost** — pill shape, text `#6F6F75`, padding `11px 6px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FFFFFF` - Border: `1px solid rgba(15, 15, 17, 0.06)` - Shadow: `0 1px 2px rgba(15, 15, 17, 0.04), 0 8px 24px -12px rgba(15, 15, 17, 0.08)` - Radius: `radius.lg` (`16px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `line` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#0F0F11`. #### Typography pairings - **Display (`Geist`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Geist`)** — paragraphs, labels, button text, form inputs. - **Mono (`Geist Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Quartz Monochrome is the discipline of removing color until only structure remains. The entire system is five steps of grey on a paper-white canvas — no blue, no accent, no warm tertiary. One humanist sans (Geist) is used for everything. Corner radii are generous (16px). Whitespace is the loudest element on the page. The system disappears so the content can speak. For writing platforms, design portfolios, premium reading apps, design libraries, anything where the page should feel like a glass case around the work. ## Color A five-step greyscale. No chroma anywhere. | Token | Hex | Use | |-------|-----|-----| | Ink | #0F0F11 | Primary text, primary CTA fill | | Mid | #6F6F75 | Secondary text | | Light | #A8A8AE | Tertiary text, axis labels | | Canvas | #FAFAF8 | Page background | | Surface | #FFFFFF | Card surface | The canvas is **#FAFAF8** — paper-white with the faintest warm bias so the page doesn't feel sterile. The surface is pure white, one notch up. ## Typography **One family: Geist.** Display, body, mono variant — all Geist. The single-family decision is itself the system. | Role | Size | Weight | Tracking | |------|------|--------|----------| | Hero | 4.75rem | 500 | -0.04em | | H1 | 2.75rem | 500 | -0.032em | | H2 | 1.5rem | 500 | -0.018em | | Body | 1.0625rem | 400 | -0.005em / 1.65 | Display weight is **500, never 700**. The system is quiet — bold type would break the discipline. ## Geometry - **Radii: 10 / 14 / 16, plus pill.** Generous and soft. Never sharp. - **Section gap: 128px** desktop, 80px mobile. Whitespace is the design. - **12-column grid** with 32px gutters. Wide gutters reinforce the calm. ## Buttons All pills. Four variants share the same vertical rhythm. - **Primary** — solid ink pill, canvas-tone label. The single loud element on the page. - **Secondary** — surface white pill, ink label, hairline border. - **Outline** — bare hairline pill. - **Ghost** — bare mid-grey label, hover underline. There is no danger / success / warning button. The system has no semantic color. ## Cards Surface white on canvas, 1px ink hairline at 6% opacity, 14px corner radius, single soft layered shadow. Padding 32px minimum. Cards have generous internal whitespace — the same discipline as the page. ## Charts & Data Single ink line at 2px stroke, no gridlines, end-of-line dot marker. Axis labels in light grey at 11px. The chart is a hairline drawing, not a marketing visualization. ## Do's and Don'ts - ✅ One family for everything — Geist. The single-family decision IS the brand. - ✅ Display weight 500. Never go up to 700. - ✅ Whitespace is the loudest element. Section gaps of 128px are not optional. - ✅ Generous 14-16px radii. Soft modern, never sharp. - ❌ No chromatic color. No blue link, no green checkmark, no red error. The system is monochrome. - ❌ No second font. The discipline of one family is the entire identity. - ❌ No display weight above 500. Bold breaks the calm. - ❌ No drop shadow heavier than the spec. The shadow is a whisper. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#0F0F11` | | secondary | `#6F6F75` | | tertiary | `#A8A8AE` | | neutral | `#FAFAF8` | | surface | `#FFFFFF` | ### Typography - **Display:** Geist - **Body:** Geist - **Mono:** Geist Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.75rem / 1.05 / 500 / -0.04em | | H1 | 2.75rem / 1.08 / 500 / -0.032em | | H2 | 1.5rem / 1.3 / 500 / -0.018em | | Body | 1.0625rem / 1.65 / 400 / -0.005em | ### Radius - sm: `10px` - md: `14px` - lg: `16px` - pill: `9999px` ### Shadows - **card:** `0 1px 2px rgba(15, 15, 17, 0.04), 0 8px 24px -12px rgba(15, 15, 17, 0.08)` - **button:** `0 1px 2px rgba(15, 15, 17, 0.06)` ### Borders - **card:** `1px solid rgba(15, 15, 17, 0.06)` - **divider:** `rgba(15, 15, 17, 0.08)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `pill` | | background | `#0F0F11` | | color | `#FAFAF8` | | border | `1px solid #0F0F11` | | padding | `12px 24px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | shadow | `0 1px 2px rgba(15, 15, 17, 0.06)` | #### Secondary | Property | Value | |----------|-------| | shape | `pill` | | background | `#FFFFFF` | | color | `#0F0F11` | | border | `1px solid rgba(15, 15, 17, 0.10)` | | padding | `12px 24px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Outline | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#0F0F11` | | border | `1px solid rgba(15, 15, 17, 0.16)` | | padding | `11px 23px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Ghost | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#6F6F75` | | border | `none` | | padding | `11px 6px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `line` | | strokeWidth | `2` | | gridlines | `false` | | highlight | `last` | | dotMarker | `true` | | axisColor | `#A8A8AE` | | palette | `#0F0F11` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 4px 12px -2px rgba(15,23,42,0.18)`, filter: `brightness(0.97)` - **focus** — outline: `2px solid rgba(168, 168, 174, 0.5)`, outline-offset: `2px` - **active** — shadow: `0 1px 2px rgba(15,23,42,0.1)`, transform: `scale(0.98)` - **disabled** — opacity: `0.4`, filter: `saturate(0.5)` - **loading** — opacity: `0.7` - **selected** — bg: `#A8A8AE`, color: `#FFFFFF` #### Input - **hover** — border: `1px solid rgba(168, 168, 174, 0.5)` - **focus** — border: `1.5px solid #A8A8AE`, shadow: `0 0 0 4px rgba(168, 168, 174, 0.15)` - **disabled** — bg: `rgba(15, 15, 17, 0.04)`, opacity: `0.4` - **error** — border: `1.5px solid #DC2626`, shadow: `0 0 0 4px rgba(220,38,38,0.15)` #### Card - **hover** — shadow: `0 12px 28px -12px rgba(15,23,42,0.18)`, transform: `translateY(-2px)` - **selected** — bg: `rgba(168, 168, 174, 0.04)`, border: `1.5px solid #A8A8AE` - **dragging** — shadow: `0 20px 48px -16px rgba(15,23,42,0.3)`, transform: `scale(1.02) rotate(-0.5deg)`, opacity: `0.9` #### Tab - **hover** — bg: `rgba(168, 168, 174, 0.06)`, color: `#A8A8AE` - **focus** — outline: `2px solid rgba(168, 168, 174, 0.5)`, outline-offset: `2px` - **selected** — color: `#A8A8AE`, border: `0 0 2px 0 solid #A8A8AE` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Quiet ease.** 240 ms ease-out for all standard transitions. Reliable, invisible — motion stays out of the way. ```css transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `160ms` | | duration.base | `240ms` | | duration.slow | `380ms` | | easing.standard | `cubic-bezier(0.4, 0, 0.2, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.34, 1.4, 0.64, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — hairline border separates. | | level1 | `0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04)` | List rows, resting cards. | | level2 | `0 4px 12px -2px rgba(15,23,42,0.1), 0 2px 6px rgba(15,23,42,0.06)` | Hover cards, popover. | | level3 | `0 12px 32px -8px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.08)` | Sheets, side panels. | | level4 | `0 28px 64px -16px rgba(15,23,42,0.28), 0 8px 24px rgba(15,23,42,0.12)` | Modals — scrim required. | ### Content - **measure:** `68ch` (max line length for body prose) - **paragraph spacing:** `1.2em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#A8A8AE`, underline `hover` - **blockquote:** border `3px solid rgba(168, 168, 174, 0.6)`, padding `0.5em 0 0.5em 1.25em` - **code:** background `rgba(15, 15, 17, 0.06)`, color `#0F0F11` ### Accessibility (WCAG 2.1) **Overall:** FAIL | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 19.15:1 | AA | AAA | — | | Body text on canvas | 18.32:1 | AA | AAA | — | | Muted text on surface | 4.99:1 | AA | AA | — | | Accent on surface | 2.37:1 | AA-Large | FAIL | `#74747c` → 4.63:1 (AA) | | Accent on canvas | 2.26:1 | AA-Large | FAIL | `#6f6f77` → 4.77:1 (AA) | --- # SYSTEM: Frostlite Source: https://www.freedesignmd.com/system/frostlite --- name: Frostlite description: "Light glass. Pale daylight canvas with a soft mesh aurora behind it; cards float as frosted panes with a 28px backdrop-blur and faint inset highlight. Depth without the weight of dark mode." tags: [glass, light, minimal, premium, saas, modern] colors: primary: "#0E1320" secondary: "#5A6478" tertiary: "#6E7BFF" neutral: "#EFF2F8" surface: "#FFFFFF" typography: display: Geist body: Inter mono: "JetBrains Mono" scale: hero: "4.5rem / 1.05 / 600 / -0.035em" h1: "2.625rem / 1.1 / 600 / -0.03em" h2: "1.5rem / 1.3 / 600 / -0.015em" body: "1rem / 1.65 / 400 / -0.005em" radius: sm: 12px md: 18px lg: 24px pill: 9999px shadows: card: "0 24px 60px -28px rgba(20, 24, 60, 0.18), 0 2px 8px -4px rgba(20, 24, 60, 0.06)" button: "0 10px 28px -14px rgba(110, 123, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35)" borders: card: "1px solid rgba(255, 255, 255, 0.65)" divider: "rgba(14, 19, 32, 0.06)" glass: surface: "rgba(255, 255, 255, 0.55)" blur: 28px saturate: 150% border: "1px solid rgba(255, 255, 255, 0.65)" shadow: "0 24px 60px -28px rgba(20, 24, 60, 0.18), 0 2px 8px -4px rgba(20, 24, 60, 0.06)" inner_highlight: "inset 0 1px 0 rgba(255, 255, 255, 0.85)" backdrop: "radial-gradient(at 12% 18%, rgba(110, 123, 255, 0.20) 0px, transparent 45%), radial-gradient(at 88% 14%, rgba(170, 195, 255, 0.22) 0px, transparent 50%), radial-gradient(at 78% 92%, rgba(195, 210, 255, 0.18) 0px, transparent 55%)" buttons: primary: background: linear-gradient(180deg, #7C89FF 0%, #5563E8 100%) color: #FFFFFF border: 1px solid rgba(255, 255, 255, 0.20) shape: pill padding: 12px 24px font: 600 / 0.9375rem / -0.005em shadow: 0 10px 28px -14px rgba(110, 123, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35) secondary: background: rgba(255, 255, 255, 0.55) color: #0E1320 border: 1px solid rgba(255, 255, 255, 0.70) shape: pill padding: 12px 24px font: 500 / 0.9375rem / -0.005em backdrop_blur: 20px backdrop_saturate: 150% outline: background: transparent color: #0E1320 border: 1px solid rgba(14, 19, 32, 0.18) shape: pill padding: 11px 22px font: 500 / 0.9375rem / -0.005em ghost: background: transparent color: #5A6478 border: none shape: pill padding: 11px 6px font: 500 / 0.9375rem / -0.005em hover: underline charts: variant: area stroke_width: 2 fill_opacity: 0.18 gridlines: false highlight: last dot_marker: true axis_color: "#5A6478" palette: ["#6E7BFF", "#A4B0FF", "#D2D9FF"] fonts_url: "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Frostlite ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Frostlite** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — pill shape, bg `linear-gradient(180deg, #7C89FF 0%, #5563E8 100%)`, text `#FFFFFF`, border `1px solid rgba(255, 255, 255, 0.20)`, padding `12px 24px`, weight `600`, shadow `0 10px 28px -14px rgba(110, 123, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35)`. - **Secondary** — pill shape, bg `rgba(255, 255, 255, 0.55)`, text `#0E1320`, border `1px solid rgba(255, 255, 255, 0.70)`, padding `12px 24px`, weight `500`. - **Outline** — pill shape, text `#0E1320`, border `1px solid rgba(14, 19, 32, 0.18)`, padding `11px 22px`, weight `500`. - **Ghost** — pill shape, text `#5A6478`, padding `11px 6px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FFFFFF` - Border: `1px solid rgba(255, 255, 255, 0.65)` - Shadow: `0 24px 60px -28px rgba(20, 24, 60, 0.18), 0 2px 8px -4px rgba(20, 24, 60, 0.06)` - Radius: `radius.lg` (`24px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. > This system ships a **glass treatment** — see the Glass token table. > Apply `backdrop-filter: blur(28px)` to translucent panes. > The page must have a backdrop (gradient mesh / blurred orbs) for glass to refract. #### Charts - Bar/line variant: `area` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#6E7BFF`, `#A4B0FF`, `#D2D9FF`. #### Typography pairings - **Display (`Geist`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Frostlite is light glass. The page sits on a pale daylight canvas with a soft cool aurora — three faint radial blobs in periwinkle, sky, and ice — painted into the background. Cards float above the aurora as actual frosted glass panes: 28px backdrop-blur, 55% white surface, 1px white-alpha hairline, and a faint inset top highlight that reads as a top-edge gloss. The glass is the entire system. Everything else — type, color, buttons — is calibrated to let the glass do the work. For modern SaaS landings, premium product launches, AI tools that want depth without the weight of dark mode. ## The Glass Recipe Cards are not "white with a shadow." They are real glass: ```css .frostlite-pane { background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(28px) saturate(150%); -webkit-backdrop-filter: blur(28px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.65); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 24px 60px -28px rgba(20, 24, 60, 0.18), 0 2px 8px -4px rgba(20, 24, 60, 0.06); border-radius: 24px; } ``` The page MUST have a chromatic backdrop for the glass to mean anything. Apply this aurora to the body or a fixed background layer: ```css body { background: radial-gradient(at 12% 18%, rgba(110,123,255,0.20) 0, transparent 45%), radial-gradient(at 88% 14%, rgba(170,195,255,0.22) 0, transparent 50%), radial-gradient(at 78% 92%, rgba(195,210,255,0.18) 0, transparent 55%), #EFF2F8; } ``` Without the aurora, the glass collapses to "translucent grey." The two are inseparable. ## Color - **Ink #0E1320** — primary text. - **Slate #5A6478** — secondary text, axis labels. - **Periwinkle #6E7BFF** — the only chromatic accent. Primary CTA, link hover, chart line. - **Daylight #EFF2F8** — page canvas. - **Glass #FFFFFF @ 55%** — card surface (translucent). The aurora uses three soft tints of periwinkle / sky / ice — never anything warm. ## Typography - **Display: Geist 600** at 4.5rem with -3.5% tracking. - **Body: Inter 400** at 1rem with 1.65 leading. | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | Geist | 4.5rem | 600 | -0.035em | | H1 | Geist | 2.625rem | 600 | -0.03em | | H2 | Geist | 1.5rem | 600 | -0.015em | | Body | Inter | 1rem | 400 | -0.005em / 1.65 | ## Geometry - **Radii: 12 / 18 / 24.** Glass needs generous corners to read as a pane. - **Pill buttons** for primary + secondary. Sharp buttons fight the soft glass. - **Section gap: 120px** desktop, 72px mobile. The aurora needs room to breathe. ## Buttons - **Primary** — vertical periwinkle gradient with an inner top-edge gloss. Pill shape, white label at 600. - **Secondary** — frosted glass pill (the same recipe as cards, scaled down). Backdrop-blur 20px. - **Outline** — bare hairline pill at 18% ink. - **Ghost** — bare slate label, hover underline. ## Cards Glass panes — see the recipe above. Radius 24px. Padding 32px minimum. Cards never sit flush against each other; always 24-32px gap so the aurora reads between them. ## Charts & Data Periwinkle area chart, 2px stroke, 18% fill opacity, no gridlines. End-of-line dot. The chart sits inside a glass card, never on bare canvas. ## Do's and Don'ts - ✅ The aurora backdrop is mandatory. Without it the glass dies. - ✅ Cards always include the inner top-edge highlight — that's what reads as "polished pane." - ✅ One chromatic accent only — periwinkle. Everything else is ink/slate. - ✅ Generous radii (18-24px). Glass at sharp corners reads as plastic. - ❌ No warm tints in the aurora. The system is cool-monochrome. - ❌ No solid white cards. If a card isn't glass, it's not in the system. - ❌ No drop shadows beyond the soft ink-tinted glass shadow. - ❌ No second chromatic accent. Periwinkle is the only chroma allowed. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#0E1320` | | secondary | `#5A6478` | | tertiary | `#6E7BFF` | | neutral | `#EFF2F8` | | surface | `#FFFFFF` | ### Typography - **Display:** Geist - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.5rem / 1.05 / 600 / -0.035em | | H1 | 2.625rem / 1.1 / 600 / -0.03em | | H2 | 1.5rem / 1.3 / 600 / -0.015em | | Body | 1rem / 1.65 / 400 / -0.005em | ### Radius - sm: `12px` - md: `18px` - lg: `24px` - pill: `9999px` ### Shadows - **card:** `0 24px 60px -28px rgba(20, 24, 60, 0.18), 0 2px 8px -4px rgba(20, 24, 60, 0.06)` - **button:** `0 10px 28px -14px rgba(110, 123, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35)` ### Borders - **card:** `1px solid rgba(255, 255, 255, 0.65)` - **divider:** `rgba(14, 19, 32, 0.06)` ### Glass Translucent panes with backdrop-filter — the preview renders cards from these exact values. | Property | Value | |----------|-------| | surface | `rgba(255, 255, 255, 0.55)` | | blur | `28px` | | saturate | `150%` | | border | `1px solid rgba(255, 255, 255, 0.65)` | | shadow | `0 24px 60px -28px rgba(20, 24, 60, 0.18), 0 2px 8px -4px rgba(20, 24, 60, 0.06)` | | innerHighlight | `inset 0 1px 0 rgba(255, 255, 255, 0.85)` | | backdrop | `radial-gradient(at 12% 18%, rgba(110, 123, 255, 0.20) 0px, transparent 45%), radial-gradient(at 88% 14%, rgba(170, 195, 255, 0.22) 0px, transparent 50%), radial-gradient(at 78% 92%, rgba(195, 210, 255, 0.18) 0px, transparent 55%)` | ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `pill` | | background | `linear-gradient(180deg, #7C89FF 0%, #5563E8 100%)` | | color | `#FFFFFF` | | border | `1px solid rgba(255, 255, 255, 0.20)` | | padding | `12px 24px` | | fontWeight | `600` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | shadow | `0 10px 28px -14px rgba(110, 123, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35)` | #### Secondary | Property | Value | |----------|-------| | shape | `pill` | | background | `rgba(255, 255, 255, 0.55)` | | color | `#0E1320` | | border | `1px solid rgba(255, 255, 255, 0.70)` | | padding | `12px 24px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | backdropBlur | `20px` | | backdropSaturate | `150%` | #### Outline | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#0E1320` | | border | `1px solid rgba(14, 19, 32, 0.18)` | | padding | `11px 22px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Ghost | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#5A6478` | | border | `none` | | padding | `11px 6px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `area` | | strokeWidth | `2` | | fillOpacity | `0.18` | | gridlines | `false` | | highlight | `last` | | dotMarker | `true` | | axisColor | `#5A6478` | | palette | `#6E7BFF`, `#A4B0FF`, `#D2D9FF` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 8px 24px -8px rgba(110, 123, 255, 0.35), inset 0 1px 0 rgba(255,255,255,0.18)`, transform: `translateY(-1px)`, filter: `saturate(1.15)` - **focus** — outline: `2px solid rgba(110, 123, 255, 0.5)`, outline-offset: `3px` - **active** — transform: `translateY(0) scale(0.98)`, filter: `brightness(0.96)` - **disabled** — opacity: `0.4`, filter: `saturate(0.4) blur(0.4px)` - **loading** — opacity: `0.7` - **selected** — bg: `rgba(110, 123, 255, 0.18)`, color: `#6E7BFF` #### Input - **hover** — border: `1px solid rgba(110, 123, 255, 0.4)`, shadow: `inset 0 1px 0 rgba(255,255,255,0.18)` - **focus** — border: `1px solid rgba(110, 123, 255, 0.65)`, shadow: `0 0 0 4px rgba(110, 123, 255, 0.15), inset 0 1px 0 rgba(255,255,255,0.18)` - **disabled** — opacity: `0.4` - **error** — border: `1px solid rgba(248,113,113,0.7)`, shadow: `0 0 0 4px rgba(248,113,113,0.15)` #### Card - **hover** — shadow: `0 16px 48px -16px rgba(110, 123, 255, 0.25), inset 0 1px 0 rgba(255,255,255,0.18)`, transform: `translateY(-2px)`, filter: `saturate(1.1)` - **selected** — border: `1px solid rgba(110, 123, 255, 0.5)` - **dragging** — shadow: `0 24px 64px -16px rgba(0,0,0,0.4)`, transform: `scale(1.02)`, opacity: `0.85` #### Tab - **hover** — bg: `rgba(110, 123, 255, 0.08)` - **focus** — outline: `2px solid rgba(110, 123, 255, 0.5)`, outline-offset: `2px` - **selected** — bg: `rgba(110, 123, 255, 0.18)`, color: `#6E7BFF` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Refract.** Long opacity- and blur-driven transitions. Not a hard move, but a shift of light across the glass surface. ```css transition: opacity 350ms cubic-bezier(0.32, 0.72, 0, 1), backdrop-filter 350ms cubic-bezier(0.32, 0.72, 0, 1), transform 350ms cubic-bezier(0.32, 0.72, 0, 1); ``` | Token | Value | |-------|-------| | duration.instant | `100ms` | | duration.fast | `200ms` | | duration.base | `350ms` | | duration.slow | `550ms` | | easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.34, 1.2, 0.64, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `inset 0 1px 0 rgba(255,255,255,0.18)` | Flat glass surface — top-edge gloss only. | | level1 | `0 2px 8px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Soft lift + top-edge gloss. | | level2 | `0 12px 32px -8px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255,255,255,0.18)` | Floating pane — popover. | | level3 | `0 24px 64px -16px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(110, 123, 255, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Sheet — accent rim for depth. | | level4 | `0 40px 96px -24px rgba(15, 23, 42, 0.5), 0 0 48px -12px rgba(110, 123, 255, 0.25), inset 0 1px 0 rgba(255,255,255,0.18)` | Modal — dramatic glow, scrim required. | ### Content - **measure:** `66ch` (max line length for body prose) - **paragraph spacing:** `1.25em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#6E7BFF`, underline `hover` - **blockquote:** border `1px solid rgba(110, 123, 255, 0.4)`, padding `0.9em 1.2em` - **code:** background `rgba(110, 123, 255, 0.1)`, color `#6E7BFF` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 18.54:1 | AA | AAA | — | | Body text on canvas | 16.53:1 | AA | AAA | — | | Muted text on surface | 5.95:1 | AA | AA | — | | Accent on surface | 3.54:1 | AA-Large | AA-Large | — | | Accent on canvas | 3.15:1 | AA-Large | AA-Large | — | --- # SYSTEM: Mineral Dusk Source: https://www.freedesignmd.com/system/mineral-dusk --- name: "Mineral Dusk" description: "A single beautifully calibrated diagonal gradient runs across the page — cool slate into dusty mauve into champagne mist — while every other element stays restrained ink and hairlines. The gradient is the room." tags: [minimal, gradient, light, premium, editorial] colors: primary: "#1A1A22" secondary: "#6B6B78" tertiary: "#A88BA8" neutral: "#E8E5EE" surface: "#FDFCFA" typography: display: Fraunces body: Inter mono: "JetBrains Mono" scale: hero: "5rem / 1 / 400 / -0.03em" h1: "3rem / 1.05 / 400 / -0.025em" h2: "1.625rem / 1.3 / 500 / -0.012em" body: "1.0625rem / 1.7 / 400 / -0.003em" radius: sm: 6px md: 10px lg: 14px shadows: card: "0 8px 32px -16px rgba(40, 35, 60, 0.10), 0 1px 2px rgba(40, 35, 60, 0.04)" button: "0 4px 14px -6px rgba(26, 26, 34, 0.20)" borders: card: "1px solid rgba(26, 26, 34, 0.06)" divider: "rgba(26, 26, 34, 0.06)" buttons: primary: background: #1A1A22 color: #FDFCFA border: 1px solid #1A1A22 shape: rounded padding: 13px 26px font: 500 / 0.9375rem / -0.005em shadow: 0 4px 14px -6px rgba(26, 26, 34, 0.20) secondary: background: #FDFCFA color: #1A1A22 border: 1px solid rgba(26, 26, 34, 0.18) shape: rounded padding: 13px 26px font: 500 / 0.9375rem / -0.005em outline: background: transparent color: #1A1A22 border: 1px solid rgba(26, 26, 34, 0.25) shape: rounded padding: 12px 24px font: 500 / 0.9375rem / -0.005em ghost: background: transparent color: #6B6B78 border: none shape: rounded padding: 12px 4px font: 500 / 0.9375rem / -0.005em hover: underline charts: variant: line stroke_width: 1.5 gridlines: false highlight: last dot_marker: true axis_color: "#6B6B78" palette: ["#1A1A22", "#A88BA8", "#C9B89E"] fonts_url: "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300;9..144,400;9..144,500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Mineral Dusk ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Mineral Dusk** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#1A1A22`, text `#FDFCFA`, border `1px solid #1A1A22`, padding `13px 26px`, weight `500`, shadow `0 4px 14px -6px rgba(26, 26, 34, 0.20)`. - **Secondary** — rounded shape, bg `#FDFCFA`, text `#1A1A22`, border `1px solid rgba(26, 26, 34, 0.18)`, padding `13px 26px`, weight `500`. - **Outline** — rounded shape, text `#1A1A22`, border `1px solid rgba(26, 26, 34, 0.25)`, padding `12px 24px`, weight `500`. - **Ghost** — rounded shape, text `#6B6B78`, padding `12px 4px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FDFCFA` - Border: `1px solid rgba(26, 26, 34, 0.06)` - Shadow: `0 8px 32px -16px rgba(40, 35, 60, 0.10), 0 1px 2px rgba(40, 35, 60, 0.04)` - Radius: `radius.lg` (`14px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `line` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#1A1A22`, `#A88BA8`, `#C9B89E`. #### Typography pairings - **Display (`Fraunces`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Mineral Dusk is one beautifully calibrated diagonal gradient — cool slate at the top-left, dusty mauve through the middle, warm champagne mist at the bottom-right — that lives in the page background. Everything else is restrained: ink type in a high-contrast variable serif, paper cards, hairline borders, a solid-ink primary button. The gradient is the room. The content sits in the room. Adding a second decorative element would make the room feel cluttered. For premium content brands, design portfolios, photography platforms, boutique hospitality, editorial fashion. ## The Page Gradient A diagonal three-stop gradient covers the entire viewport background. Always the same direction (135°), always the same three stops: ```css body { background: linear-gradient( 135deg, #DDE0EA 0%, #E8DCEA 45%, #F1E6D8 100% ); min-height: 100vh; } ``` Stops chosen so each transition is barely perceptible — the gradient reads as a *room*, not a banner. **Where it appears:** - The page background. Always. - A 1px diagonal divider above the footer (same gradient, 1px tall). **Where it never appears:** - Buttons. Card fills. Borders. Text. Section bands. ## Color - **Ink #1A1A22** — primary text and primary CTA. - **Dusk #6B6B78** — secondary text. - **Mauve #A88BA8** — accent word in the hero (one per page). - **Slate base #E8E5EE** — gradient origin. - **Paper #FDFCFA** — card surface (sits over the gradient). The gradient stops never appear as fills anywhere else. ## Typography - **Display: Fraunces 400** at 5rem with -3% tracking. Variable serif with optical-size sensitivity — the type carries the editorial weight. - **Body: Inter 400** at 1.0625rem with 1.7 leading. - **Italic Fraunces** for emphasis inside hero headlines (one phrase per hero). | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | Fraunces | 5rem | 400 | -0.03em | | H1 | Fraunces | 3rem | 400 | -0.025em | | H2 | Fraunces | 1.625rem | 500 | -0.012em | | Body | Inter | 1.0625rem | 400 | -0.003em / 1.7 | ## Geometry - **Radii: 6 / 10 / 14.** Refined but never sharp. - **Section gap: 144px** desktop, 88px mobile. The gradient needs the page to breathe. - **Card padding: 36px** minimum. ## Buttons - **Primary** — solid ink, paper label, soft ink underglow. The button is the punctuation; the gradient is the sentence. - **Secondary** — paper, ink hairline at 18%. - **Outline** — transparent, ink hairline at 25%. - **Ghost** — bare dusk label, hover underline. All four are gently rounded at 10-14px. ## Cards Paper surface (#FDFCFA) sits over the gradient — the gradient peeks at the corners and between cards. 1px ink hairline at 6%, soft 8px shadow at 10%. Radius 14px. Cards always have ≥ 24px gap so the gradient reads between them. ## Charts & Data A single 1.5px ink line over the paper card. No gridlines. Mauve dot at the latest reading. ## Do's and Don'ts - ✅ The gradient is always 135°, always the same three stops, always full-viewport. - ✅ Paper cards over the gradient — never solid-color sections that hide it. - ✅ Fraunces 400 for display — the optical-size variable axis is what makes the serif sing at large sizes. - ✅ Italic Fraunces on one accent phrase per hero, max. - ❌ No second gradient anywhere. Not on buttons, not on cards, not on accents. - ❌ No saturated chromatic accents. The mauve is the loudest element allowed. - ❌ No drop shadows beyond the soft ink-tinted card shadow. - ❌ No sharp radii. The system is refined, never aggressive. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1A1A22` | | secondary | `#6B6B78` | | tertiary | `#A88BA8` | | neutral | `#E8E5EE` | | surface | `#FDFCFA` | ### Typography - **Display:** Fraunces - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 5rem / 1 / 400 / -0.03em | | H1 | 3rem / 1.05 / 400 / -0.025em | | H2 | 1.625rem / 1.3 / 500 / -0.012em | | Body | 1.0625rem / 1.7 / 400 / -0.003em | ### Radius - sm: `6px` - md: `10px` - lg: `14px` ### Shadows - **card:** `0 8px 32px -16px rgba(40, 35, 60, 0.10), 0 1px 2px rgba(40, 35, 60, 0.04)` - **button:** `0 4px 14px -6px rgba(26, 26, 34, 0.20)` ### Borders - **card:** `1px solid rgba(26, 26, 34, 0.06)` - **divider:** `rgba(26, 26, 34, 0.06)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#1A1A22` | | color | `#FDFCFA` | | border | `1px solid #1A1A22` | | padding | `13px 26px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | shadow | `0 4px 14px -6px rgba(26, 26, 34, 0.20)` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#FDFCFA` | | color | `#1A1A22` | | border | `1px solid rgba(26, 26, 34, 0.18)` | | padding | `13px 26px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#1A1A22` | | border | `1px solid rgba(26, 26, 34, 0.25)` | | padding | `12px 24px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#6B6B78` | | border | `none` | | padding | `12px 4px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `line` | | strokeWidth | `1.5` | | gridlines | `false` | | highlight | `last` | | dotMarker | `true` | | axisColor | `#6B6B78` | | palette | `#1A1A22`, `#A88BA8`, `#C9B89E` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(168, 139, 168, 0.92)`, shadow: `0 4px 20px -8px rgba(168, 139, 168, 0.4)` - **focus** — outline: `1.5px solid #A88BA8`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#1A1A22`, color: `#FDFCFA` #### Input - **hover** — border: `1px solid #1A1A22` - **focus** — border: `1px solid #A88BA8`, shadow: `0 1px 0 0 #A88BA8` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #1A1A22` #### Tab - **hover** — color: `#1A1A22` - **focus** — outline: `1.5px solid #A88BA8`, outline-offset: `3px` - **selected** — color: `#A88BA8`, border: `0 0 2px 0 solid #A88BA8` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#A88BA8`, underline `always` - **blockquote:** border `4px solid #A88BA8`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(26, 26, 34, 0.06)`, color `#1A1A22` ### Accessibility (WCAG 2.1) **Overall:** FAIL | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 16.86:1 | AA | AAA | — | | Body text on canvas | 13.89:1 | AA | AAA | — | | Muted text on surface | 5.12:1 | AA | AA | — | | Accent on surface | 2.96:1 | AA-Large | FAIL | `#8c698c` → 4.54:1 (AA) | | Accent on canvas | 2.44:1 | AA-Large | FAIL | `#7b5c7b` → 4.61:1 (AA) | --- # SYSTEM: Dawn Gradient Source: https://www.freedesignmd.com/system/dawn-gradient --- name: "Dawn Gradient" description: "Minimal canvas with a single restrained gesture — a deep indigo-to-steel gradient on the primary CTA and one accent word. Everything else is whitespace and quiet type." tags: [minimal, light, premium, saas, modern] colors: primary: "#0B0D12" secondary: "#6B7280" tertiary: "#3B4BD8" neutral: "#FAFAFB" surface: "#FFFFFF" typography: display: "Inter Tight" body: Inter mono: "JetBrains Mono" scale: hero: "4.75rem / 1.05 / 600 / -0.035em" h1: "2.75rem / 1.1 / 600 / -0.03em" h2: "1.5rem / 1.3 / 600 / -0.015em" body: "1.0625rem / 1.65 / 400 / -0.005em" radius: sm: 8px md: 12px lg: 16px pill: 9999px shadows: card: "0 1px 2px rgba(11, 13, 18, 0.04)" button: "0 10px 24px -12px rgba(20, 28, 90, 0.45), 0 2px 6px -2px rgba(20, 28, 90, 0.18)" borders: card: "1px solid rgba(11, 13, 18, 0.06)" divider: "rgba(11, 13, 18, 0.05)" buttons: primary: background: linear-gradient(180deg, #2A3AC8 0%, #1A237A 100%) color: #FFFFFF border: 1px solid rgba(255, 255, 255, 0.08) shape: rounded padding: 13px 26px font: 600 / 0.9375rem / -0.005em shadow: 0 10px 24px -12px rgba(20, 28, 90, 0.45), 0 2px 6px -2px rgba(20, 28, 90, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18) secondary: background: #FFFFFF color: #0B0D12 border: 1px solid rgba(11, 13, 18, 0.10) shape: rounded padding: 13px 26px font: 500 / 0.9375rem / -0.005em outline: background: transparent color: #2A3AC8 border: 1px solid #BFC6F0 shape: rounded padding: 12px 24px font: 500 / 0.9375rem / -0.005em ghost: background: transparent color: #2A3AC8 border: none shape: rounded padding: 11px 6px font: 500 / 0.9375rem / -0.005em hover: underline charts: variant: line stroke_width: 2 gridlines: false highlight: last dot_marker: true axis_color: "#6B7280" palette: ["#2A3AC8", "#5C6FE8", "#8FA0F2"] fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Dawn Gradient ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Dawn Gradient** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `linear-gradient(180deg, #2A3AC8 0%, #1A237A 100%)`, text `#FFFFFF`, border `1px solid rgba(255, 255, 255, 0.08)`, padding `13px 26px`, weight `600`, shadow `0 10px 24px -12px rgba(20, 28, 90, 0.45), 0 2px 6px -2px rgba(20, 28, 90, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18)`. - **Secondary** — rounded shape, bg `#FFFFFF`, text `#0B0D12`, border `1px solid rgba(11, 13, 18, 0.10)`, padding `13px 26px`, weight `500`. - **Outline** — rounded shape, text `#2A3AC8`, border `1px solid #BFC6F0`, padding `12px 24px`, weight `500`. - **Ghost** — rounded shape, text `#2A3AC8`, padding `11px 6px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FFFFFF` - Border: `1px solid rgba(11, 13, 18, 0.06)` - Shadow: `0 1px 2px rgba(11, 13, 18, 0.04)` - Radius: `radius.lg` (`16px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `line` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#2A3AC8`, `#5C6FE8`, `#8FA0F2`. #### Typography pairings - **Display (`Inter Tight`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Dawn Gradient is a near-pure minimal system with one signature gesture: a **deep vertical indigo gradient** — saturated indigo at the top resolving into a darker slate-blue at the bottom — that appears in two places, and two places only: 1. The **primary CTA**. 2. **One accent word** in the hero headline (applied with `background-clip: text`). Everything else is whitespace, quiet type, and hairline borders. The gradient earns its presence by being rare. When it appears, it should feel like polished steel under directional light — restrained, precise, premium. This is for product launches, modern SaaS, AI tools, fintech, premium content brands — anything that wants depth and authority without warmth or noise. ## The Signature Gradient Always vertical (180°), always the same two stops: ```css background: linear-gradient(180deg, #2A3AC8 0%, #1A237A 100%); ``` Pair it with an inner top-edge highlight to give the surface a subtle machined gloss: ```css box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); ``` **Where it appears:** - The primary CTA fill. - A hero accent word via `-webkit-background-clip: text` (use the brighter palette stop `#5C6FE8` to keep contrast legible on white). - The chart line (single stroke, no fill). **Where it never appears:** - Body text. Card fills. Borders (except the primary button hairline). Backgrounds. Section dividers. ```css .dawn-text { background: linear-gradient(180deg, #2A3AC8 0%, #1A237A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } ``` Apply `.dawn-text` to **one accent word per hero**, never more. ## Color - **Near-Black #0B0D12** — primary text. - **Mist #6B7280** — captions, meta, axis labels. - **Indigo #2A3AC8** — outline buttons, ghost links, the gradient's top stop. - **Mist Canvas #FAFAFB** — page background. - **Paper #FFFFFF** — card surface. The gradient stops (#2A3AC8 indigo → #1A237A deep slate-blue) are reserved for the signature gesture only. ## Typography - **Display: Inter Tight** at 4.75rem / 600, -3.5% tracking. - **Body: Inter** at 1.0625rem with **1.65 leading**. | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | Inter Tight | 4.75rem | 600 | -0.035em | | H1 | Inter Tight | 2.75rem | 600 | -0.03em | | H2 | Inter Tight | 1.5rem | 600 | -0.015em | | Body | Inter | 1.0625rem | 400 | -0.005em / 1.65 | ## Whitespace Rhythm - **Section gap: 140px** desktop, 80px mobile. - **Card padding: 32px** minimum. - **Heading-to-body gap: 24px**. The gradient's depth depends on the air around it. Crowd it and it reads as a heavy block instead of a precise gesture. ## Buttons - **Primary** — vertical indigo gradient with an inner top-edge gloss and a deep indigo underglow shadow. White label at 600 weight. The single most authoritative element on the page. - **Secondary** — white surface, 10% near-black hairline. - **Outline** — transparent with a soft indigo (#BFC6F0) hairline. - **Ghost** — bare indigo label, hover underline. All four are gently rounded at 12px. No pills. ## Cards Paper surface, **1px near-black border at 6%**, a 1px shadow at 4%. Radius is **16px**. Cards never lift more than the hairline. ## Charts & Data A single 2px indigo line over the mist canvas. **No gridlines, no fills.** An indigo dot at the latest reading. ## Do's and Don'ts - ✅ The gradient appears in **at most two places per page**: the primary CTA and one hero accent word. - ✅ Always vertical (180°), always the same two stops. Never re-arrange or rotate. - ✅ Always pair the primary CTA with the inner top-edge highlight — that gloss is what reads as premium. - ✅ Whitespace around the gradient is what makes it sing — over-space the hero. - ✅ Inter Tight 600 with tight -3.5% tracking on display. - ❌ No warm-tone gradients (no peach, no rose, no sunset). The system's character is cool, restrained, machined. - ❌ No gradient on body text, card fills, borders, or backgrounds. - ❌ No second gradient direction. Always 180°. - ❌ No drop shadows beyond the deep indigo underglow on the primary CTA. - ❌ No pill buttons. 12px radius is the system. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#0B0D12` | | secondary | `#6B7280` | | tertiary | `#3B4BD8` | | neutral | `#FAFAFB` | | surface | `#FFFFFF` | ### Typography - **Display:** Inter Tight - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.75rem / 1.05 / 600 / -0.035em | | H1 | 2.75rem / 1.1 / 600 / -0.03em | | H2 | 1.5rem / 1.3 / 600 / -0.015em | | Body | 1.0625rem / 1.65 / 400 / -0.005em | ### Radius - sm: `8px` - md: `12px` - lg: `16px` - pill: `9999px` ### Shadows - **card:** `0 1px 2px rgba(11, 13, 18, 0.04)` - **button:** `0 10px 24px -12px rgba(20, 28, 90, 0.45), 0 2px 6px -2px rgba(20, 28, 90, 0.18)` ### Borders - **card:** `1px solid rgba(11, 13, 18, 0.06)` - **divider:** `rgba(11, 13, 18, 0.05)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `linear-gradient(180deg, #2A3AC8 0%, #1A237A 100%)` | | color | `#FFFFFF` | | border | `1px solid rgba(255, 255, 255, 0.08)` | | padding | `13px 26px` | | fontWeight | `600` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | shadow | `0 10px 24px -12px rgba(20, 28, 90, 0.45), 0 2px 6px -2px rgba(20, 28, 90, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18)` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#FFFFFF` | | color | `#0B0D12` | | border | `1px solid rgba(11, 13, 18, 0.10)` | | padding | `13px 26px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#2A3AC8` | | border | `1px solid #BFC6F0` | | padding | `12px 24px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#2A3AC8` | | border | `none` | | padding | `11px 6px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `line` | | strokeWidth | `2` | | gridlines | `false` | | highlight | `last` | | dotMarker | `true` | | axisColor | `#6B7280` | | palette | `#2A3AC8`, `#5C6FE8`, `#8FA0F2` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 4px 12px -2px rgba(15,23,42,0.18)`, filter: `brightness(0.97)` - **focus** — outline: `2px solid rgba(59, 75, 216, 0.5)`, outline-offset: `2px` - **active** — shadow: `0 1px 2px rgba(15,23,42,0.1)`, transform: `scale(0.98)` - **disabled** — opacity: `0.4`, filter: `saturate(0.5)` - **loading** — opacity: `0.7` - **selected** — bg: `#3B4BD8`, color: `#FFFFFF` #### Input - **hover** — border: `1px solid rgba(59, 75, 216, 0.5)` - **focus** — border: `1.5px solid #3B4BD8`, shadow: `0 0 0 4px rgba(59, 75, 216, 0.15)` - **disabled** — bg: `rgba(11, 13, 18, 0.04)`, opacity: `0.4` - **error** — border: `1.5px solid #DC2626`, shadow: `0 0 0 4px rgba(220,38,38,0.15)` #### Card - **hover** — shadow: `0 12px 28px -12px rgba(15,23,42,0.18)`, transform: `translateY(-2px)` - **selected** — bg: `rgba(59, 75, 216, 0.04)`, border: `1.5px solid #3B4BD8` - **dragging** — shadow: `0 20px 48px -16px rgba(15,23,42,0.3)`, transform: `scale(1.02) rotate(-0.5deg)`, opacity: `0.9` #### Tab - **hover** — bg: `rgba(59, 75, 216, 0.06)`, color: `#3B4BD8` - **focus** — outline: `2px solid rgba(59, 75, 216, 0.5)`, outline-offset: `2px` - **selected** — color: `#3B4BD8`, border: `0 0 2px 0 solid #3B4BD8` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Quiet ease.** 240 ms ease-out for all standard transitions. Reliable, invisible — motion stays out of the way. ```css transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `160ms` | | duration.base | `240ms` | | duration.slow | `380ms` | | easing.standard | `cubic-bezier(0.4, 0, 0.2, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.34, 1.4, 0.64, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — hairline border separates. | | level1 | `0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04)` | List rows, resting cards. | | level2 | `0 4px 12px -2px rgba(15,23,42,0.1), 0 2px 6px rgba(15,23,42,0.06)` | Hover cards, popover. | | level3 | `0 12px 32px -8px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.08)` | Sheets, side panels. | | level4 | `0 28px 64px -16px rgba(15,23,42,0.28), 0 8px 24px rgba(15,23,42,0.12)` | Modals — scrim required. | ### Content - **measure:** `68ch` (max line length for body prose) - **paragraph spacing:** `1.2em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#3B4BD8`, underline `hover` - **blockquote:** border `3px solid rgba(59, 75, 216, 0.6)`, padding `0.5em 0 0.5em 1.25em` - **code:** background `rgba(11, 13, 18, 0.06)`, color `#0B0D12` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 19.43:1 | AA | AAA | — | | Body text on canvas | 18.63:1 | AA | AAA | — | | Muted text on surface | 4.83:1 | AA | AA | — | | Accent on surface | 6.6:1 | AA-Large | AA | — | | Accent on canvas | 6.32:1 | AA-Large | AA | — | --- # SYSTEM: Quiet Cobalt Source: https://www.freedesignmd.com/system/quiet-cobalt --- name: "Quiet Cobalt" description: "Crystalline ice-white canvas, abundant whitespace, gently rounded corners, and a single deep cobalt accent. Ultra-clean modern SaaS with quiet confidence." tags: [minimal, saas, light, premium, modern] colors: primary: "#0F1115" secondary: "#6B7280" tertiary: "#2956E8" neutral: "#F7F9FC" surface: "#FFFFFF" typography: display: "Inter Tight" body: Inter mono: "JetBrains Mono" scale: hero: "4.5rem / 1.05 / 600 / -0.035em" h1: "2.75rem / 1.1 / 600 / -0.03em" h2: "1.5rem / 1.3 / 600 / -0.015em" body: "1.0625rem / 1.6 / 400 / -0.005em" radius: sm: 8px md: 10px lg: 14px pill: 9999px shadows: card: "0 1px 2px rgba(15, 17, 21, 0.04)" button: none borders: card: "1px solid rgba(15, 17, 21, 0.06)" divider: "rgba(15, 17, 21, 0.05)" buttons: primary: background: #2956E8 color: #FFFFFF border: 1px solid #2956E8 shape: rounded padding: 12px 22px font: 500 / 0.9375rem / -0.005em secondary: background: #FFFFFF color: #0F1115 border: 1px solid rgba(15, 17, 21, 0.10) shape: rounded padding: 12px 22px font: 500 / 0.9375rem / -0.005em outline: background: transparent color: #2956E8 border: 1px solid #2956E8 shape: rounded padding: 11px 20px font: 500 / 0.9375rem / -0.005em ghost: background: transparent color: #2956E8 border: none shape: rounded padding: 10px 6px font: 500 / 0.9375rem / -0.005em hover: underline charts: variant: line stroke_width: 2 gridlines: false highlight: last dot_marker: true axis_color: "#6B7280" palette: ["#2956E8", "#0F1115", "#6B7280"] fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Quiet Cobalt ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Quiet Cobalt** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#2956E8`, text `#FFFFFF`, border `1px solid #2956E8`, padding `12px 22px`, weight `500`. - **Secondary** — rounded shape, bg `#FFFFFF`, text `#0F1115`, border `1px solid rgba(15, 17, 21, 0.10)`, padding `12px 22px`, weight `500`. - **Outline** — rounded shape, text `#2956E8`, border `1px solid #2956E8`, padding `11px 20px`, weight `500`. - **Ghost** — rounded shape, text `#2956E8`, padding `10px 6px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FFFFFF` - Border: `1px solid rgba(15, 17, 21, 0.06)` - Shadow: `0 1px 2px rgba(15, 17, 21, 0.04)` - Radius: `radius.lg` (`14px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `line` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#2956E8`, `#0F1115`, `#6B7280`. #### Typography pairings - **Display (`Inter Tight`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Quiet Cobalt is modern SaaS pared back to its quietest expression — crystalline ice canvas, abundant whitespace, gently rounded corners, and **one** deep cobalt accent. There are no gradients, no gloss, no decoration. The whole system runs on confidence in a single chromatic moment. This is for product marketing, B2B SaaS, dashboards, developer tools, and any modern brand whose value lives in clarity rather than spectacle. ## Color - **Near-Black #0F1115** — primary text. Slightly cool to harmonize with the cobalt accent. - **Slate #6B7280** — captions, meta, axis labels. - **Cobalt #2956E8** — the single accent. Primary CTA, outline buttons, ghost links, chart lines. - **Ice #F7F9FC** — page canvas. Pure cool off-white. - **Paper #FFFFFF** — card surface, brighter than the page so cards lift quietly. **No second accent.** Cobalt is alone. ## Typography - **Display: Inter Tight** at 4.5rem / 600, -3.5% tracking. The tight tracking is what gives it the modern-SaaS edge. - **Body: Inter** at 1.0625rem with **1.6 leading**. | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | Inter Tight | 4.5rem | 600 | -0.035em | | H1 | Inter Tight | 2.75rem | 600 | -0.03em | | H2 | Inter Tight | 1.5rem | 600 | -0.015em | | Body | Inter | 1.0625rem | 400 | -0.005em / 1.6 | ## Whitespace Rhythm - **Section gap: 140px** desktop, 80px mobile. - **Card padding: 32px**. Never below 24px. - **Heading-to-body gap: 20px**. - **Inter-paragraph: 14px**. When in doubt, add more vertical air. ## Buttons All four are gently rounded at 10px — the SaaS sweet spot. Never pill, never sharp. - **Primary** — cobalt fill, white label, no shadow. The single chromatic moment. - **Secondary** — white surface, 10% slate hairline. - **Outline** — transparent with 1px cobalt border. - **Ghost** — bare cobalt label, hover underline. **No drop shadows on buttons.** Form carries the gesture. ## Cards White surface, **1px slate border at 6%**, a 1px shadow at 4%. Radius is **14px**. Cards lift quietly — never with a halo. ## Charts & Data A single 2px cobalt line over ice. **No gridlines, no fills.** Small cobalt dot at the latest reading. Axis labels in slate. ## Do's and Don'ts - ✅ Whitespace is the material — over-space, never crowd. - ✅ Inter Tight 600 with -3.5% tracking on display. The tracking is the voice. - ✅ Cobalt earns its loudness by being alone. - ✅ Ice canvas (#F7F9FC), never pure white. The cool cast harmonizes with cobalt. - ❌ No gradients anywhere. Quiet Cobalt is flat by design. - ❌ No drop shadows beyond a 4% hairline. - ❌ No second accent. Sage, mint, amber — all forbidden. - ❌ No pill buttons. The 10px radius IS the system. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#0F1115` | | secondary | `#6B7280` | | tertiary | `#2956E8` | | neutral | `#F7F9FC` | | surface | `#FFFFFF` | ### Typography - **Display:** Inter Tight - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.5rem / 1.05 / 600 / -0.035em | | H1 | 2.75rem / 1.1 / 600 / -0.03em | | H2 | 1.5rem / 1.3 / 600 / -0.015em | | Body | 1.0625rem / 1.6 / 400 / -0.005em | ### Radius - sm: `8px` - md: `10px` - lg: `14px` - pill: `9999px` ### Shadows - **card:** `0 1px 2px rgba(15, 17, 21, 0.04)` - **button:** `none` ### Borders - **card:** `1px solid rgba(15, 17, 21, 0.06)` - **divider:** `rgba(15, 17, 21, 0.05)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#2956E8` | | color | `#FFFFFF` | | border | `1px solid #2956E8` | | padding | `12px 22px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#FFFFFF` | | color | `#0F1115` | | border | `1px solid rgba(15, 17, 21, 0.10)` | | padding | `12px 22px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#2956E8` | | border | `1px solid #2956E8` | | padding | `11px 20px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#2956E8` | | border | `none` | | padding | `10px 6px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `line` | | strokeWidth | `2` | | gridlines | `false` | | highlight | `last` | | dotMarker | `true` | | axisColor | `#6B7280` | | palette | `#2956E8`, `#0F1115`, `#6B7280` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 4px 12px -2px rgba(15,23,42,0.18)`, filter: `brightness(0.97)` - **focus** — outline: `2px solid rgba(41, 86, 232, 0.5)`, outline-offset: `2px` - **active** — shadow: `0 1px 2px rgba(15,23,42,0.1)`, transform: `scale(0.98)` - **disabled** — opacity: `0.4`, filter: `saturate(0.5)` - **loading** — opacity: `0.7` - **selected** — bg: `#2956E8`, color: `#FFFFFF` #### Input - **hover** — border: `1px solid rgba(41, 86, 232, 0.5)` - **focus** — border: `1.5px solid #2956E8`, shadow: `0 0 0 4px rgba(41, 86, 232, 0.15)` - **disabled** — bg: `rgba(15, 17, 21, 0.04)`, opacity: `0.4` - **error** — border: `1.5px solid #DC2626`, shadow: `0 0 0 4px rgba(220,38,38,0.15)` #### Card - **hover** — shadow: `0 12px 28px -12px rgba(15,23,42,0.18)`, transform: `translateY(-2px)` - **selected** — bg: `rgba(41, 86, 232, 0.04)`, border: `1.5px solid #2956E8` - **dragging** — shadow: `0 20px 48px -16px rgba(15,23,42,0.3)`, transform: `scale(1.02) rotate(-0.5deg)`, opacity: `0.9` #### Tab - **hover** — bg: `rgba(41, 86, 232, 0.06)`, color: `#2956E8` - **focus** — outline: `2px solid rgba(41, 86, 232, 0.5)`, outline-offset: `2px` - **selected** — color: `#2956E8`, border: `0 0 2px 0 solid #2956E8` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Quiet ease.** 240 ms ease-out for all standard transitions. Reliable, invisible — motion stays out of the way. ```css transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `160ms` | | duration.base | `240ms` | | duration.slow | `380ms` | | easing.standard | `cubic-bezier(0.4, 0, 0.2, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.34, 1.4, 0.64, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — hairline border separates. | | level1 | `0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04)` | List rows, resting cards. | | level2 | `0 4px 12px -2px rgba(15,23,42,0.1), 0 2px 6px rgba(15,23,42,0.06)` | Hover cards, popover. | | level3 | `0 12px 32px -8px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.08)` | Sheets, side panels. | | level4 | `0 28px 64px -16px rgba(15,23,42,0.28), 0 8px 24px rgba(15,23,42,0.12)` | Modals — scrim required. | ### Content - **measure:** `68ch` (max line length for body prose) - **paragraph spacing:** `1.2em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#2956E8`, underline `hover` - **blockquote:** border `3px solid rgba(41, 86, 232, 0.6)`, padding `0.5em 0 0.5em 1.25em` - **code:** background `rgba(15, 17, 21, 0.06)`, color `#0F1115` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 18.9:1 | AA | AAA | — | | Body text on canvas | 17.92:1 | AA | AAA | — | | Muted text on surface | 4.83:1 | AA | AA | — | | Accent on surface | 5.85:1 | AA-Large | AA | — | | Accent on canvas | 5.55:1 | AA-Large | AA | — | --- # SYSTEM: Blanc Minimal Source: https://www.freedesignmd.com/system/blanc-minimal --- name: "Blanc Minimal" description: "Endless whitespace. Bold Inter headlines at -3% tracking. A single black accent. Soft 6px corners. Nothing else." tags: [minimal, light, saas, editorial, modern] colors: primary: "#0A0A0A" secondary: "#737373" tertiary: "#0A0A0A" neutral: "#FAFAFA" surface: "#FFFFFF" typography: display: Inter body: Inter mono: "JetBrains Mono" scale: hero: "5rem / 1.02 / 700 / -0.03em" h1: "3.25rem / 1.05 / 700 / -0.03em" h2: "2rem / 1.15 / 600 / -0.02em" body: "1rem / 1.6 / 400 / 0" radius: sm: 4px md: 6px lg: 8px pill: 9999px shadows: card: "rgba(10,10,10,0.06) 0 0 0 1px" button: "rgba(10,10,10,0.08) 0 1px 2px" borders: card: "1px solid rgba(10,10,10,0.06)" divider: "1px solid rgba(10,10,10,0.06)" buttons: primary: background: #0A0A0A color: #FFFFFF border: none shape: rounded padding: 12px 22px font: 600 / 0.9375rem / -0.01em shadow: rgba(10,10,10,0.08) 0 1px 2px secondary: background: #FFFFFF color: #0A0A0A border: 1px solid rgba(10,10,10,0.10) shape: rounded padding: 12px 22px font: 600 / 0.9375rem / -0.01em outline: background: transparent color: #0A0A0A border: 1px solid #0A0A0A shape: rounded padding: 11px 22px font: 600 / 0.9375rem / -0.01em ghost: background: transparent color: #0A0A0A border: none shape: rounded padding: 12px 14px font: 600 / 0.9375rem / -0.01em hover: underline charts: variant: bars gridlines: false bar_radius: 3px bar_gap: 12px highlight: single axis_color: "#A3A3A3" fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Blanc Minimal ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Blanc Minimal** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#0A0A0A`, text `#FFFFFF`, padding `12px 22px`, weight `600`, shadow `rgba(10,10,10,0.08) 0 1px 2px`. - **Secondary** — rounded shape, bg `#FFFFFF`, text `#0A0A0A`, border `1px solid rgba(10,10,10,0.10)`, padding `12px 22px`, weight `600`. - **Outline** — rounded shape, text `#0A0A0A`, border `1px solid #0A0A0A`, padding `11px 22px`, weight `600`. - **Ghost** — rounded shape, text `#0A0A0A`, padding `12px 14px`, weight `600`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FFFFFF` - Border: `1px solid rgba(10,10,10,0.06)` - Shadow: `rgba(10,10,10,0.06) 0 0 0 1px` - Radius: `radius.lg` (`8px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `bars` - Bar radius: `3px` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Inter`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview A design system stripped to its essentials. Endless whitespace carries the eye; a single black accent does all the work. Bold Inter headlines at **-3% letter-spacing** create density precisely where the layout is otherwise quiet. Corners are softly rounded at 6px — never sharp, never pill. This is not minimalism for fashion. It is restraint as a feature: every element earns its place. ## Colors - **Ink #0A0A0A** — text, the only accent, the only fill. Use it sparingly and it stays loud. - **Mid #737373** — captions, timestamps, meta. Never for body copy. - **Surface #FFFFFF** — cards, panels. - **Background #FAFAFA** — page canvas. Slightly warm so #FFF surfaces lift off it. - **Border rgba(10,10,10,0.06)** — hairline only. If you can clearly see the border, it's too strong. > Rule: there is no second accent color. Don't add one. ## Typography **Inter** at every level. Hierarchy comes from weight and size, never color. | Role | Size | Weight | Leading | Tracking | |-------|-----------|--------|---------|-----------| | Hero | 5rem | 700 | 1.02 | **-0.03em** | | H1 | 3.25rem | 700 | 1.05 | **-0.03em** | | H2 | 2rem | 600 | 1.15 | -0.02em | | Body | 1rem | 400 | 1.6 | 0 | | Small | 0.8125rem | 500 | 1.5 | 0 | The -3% tracking on display sizes is non-negotiable — it is the visual signature of the system. ## Spacing Built on an **8px grid**. Section padding starts at **120px** vertical. The whitespace is the design; do not fight it with dense compositions. - Container max: 1120px - Section: 120px - Block: 64px - Element: 16–24px ## Components ### Buttons Four variants, all 6px radius, all Inter 600 at 0.9375rem with -0.01em tracking. - **Primary** — black fill, white ink, subtle 1px ink halo shadow. The only filled button. - **Secondary** — white fill, hairline 10%-ink border. - **Outline** — transparent fill, solid 1px ink border. Confident, not loud. - **Ghost** — bare label with hover underline. Tertiary actions only. ### Cards White surface, no drop-shadow. A 1px border at 6% ink (rendered as box-shadow) provides the only edge. Corners 8px. Padding 32px minimum. ### Dividers Hairline at 6% ink. Felt, not seen. ## Charts & Data Single-accent thin bars. **No gridlines**. Bar radius 3px, bar gap 12px. The chart sits in whitespace; the whitespace is the gridline. Axis labels in mid-grey #A3A3A3. ## Icons `lucide-react` at stroke-width **1.5**. Always ink. Never colored. ## Do's and Don'ts - ✅ Use whitespace generously. If it feels too empty, add more. - ✅ Hold the -3% tracking on every display headline. - ✅ Keep all corners at 6px — never sharp, never pill on buttons. - ✅ Reach for ink before reaching for a second color. - ❌ No drop-shadows. Borders-as-shadow only. - ❌ No second accent color, ever. - ❌ No bold body copy. Weight 400 for body, always. - ❌ No gridlines on charts. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#0A0A0A` | | secondary | `#737373` | | tertiary | `#0A0A0A` | | neutral | `#FAFAFA` | | surface | `#FFFFFF` | ### Typography - **Display:** Inter - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 5rem / 1.02 / 700 / -0.03em | | H1 | 3.25rem / 1.05 / 700 / -0.03em | | H2 | 2rem / 1.15 / 600 / -0.02em | | Body | 1rem / 1.6 / 400 / 0 | ### Radius - sm: `4px` - md: `6px` - lg: `8px` - pill: `9999px` ### Shadows - **card:** `rgba(10,10,10,0.06) 0 0 0 1px` - **button:** `rgba(10,10,10,0.08) 0 1px 2px` ### Borders - **card:** `1px solid rgba(10,10,10,0.06)` - **divider:** `1px solid rgba(10,10,10,0.06)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#0A0A0A` | | color | `#FFFFFF` | | border | `none` | | padding | `12px 22px` | | fontWeight | `600` | | fontSize | `0.9375rem` | | tracking | `-0.01em` | | shadow | `rgba(10,10,10,0.08) 0 1px 2px` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#FFFFFF` | | color | `#0A0A0A` | | border | `1px solid rgba(10,10,10,0.10)` | | padding | `12px 22px` | | fontWeight | `600` | | fontSize | `0.9375rem` | | tracking | `-0.01em` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#0A0A0A` | | border | `1px solid #0A0A0A` | | padding | `11px 22px` | | fontWeight | `600` | | fontSize | `0.9375rem` | | tracking | `-0.01em` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#0A0A0A` | | border | `none` | | padding | `12px 14px` | | fontWeight | `600` | | fontSize | `0.9375rem` | | tracking | `-0.01em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `bars` | | gridlines | `false` | | barRadius | `3px` | | barGap | `12px` | | highlight | `single` | | axisColor | `#A3A3A3` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(10, 10, 10, 0.92)`, shadow: `0 4px 20px -8px rgba(10, 10, 10, 0.4)` - **focus** — outline: `1.5px solid #0A0A0A`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#0A0A0A`, color: `#FFFFFF` #### Input - **hover** — border: `1px solid #0A0A0A` - **focus** — border: `1px solid #0A0A0A`, shadow: `0 1px 0 0 #0A0A0A` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #0A0A0A` #### Tab - **hover** — color: `#0A0A0A` - **focus** — outline: `1.5px solid #0A0A0A`, outline-offset: `3px` - **selected** — color: `#0A0A0A`, border: `0 0 2px 0 solid #0A0A0A` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#0A0A0A`, underline `always` - **blockquote:** border `4px solid #0A0A0A`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(10, 10, 10, 0.06)`, color `#0A0A0A` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 19.8:1 | AA | AAA | — | | Body text on canvas | 18.97:1 | AA | AAA | — | | Muted text on surface | 4.74:1 | AA | AA | — | | Accent on surface | 19.8:1 | AA-Large | AAA | — | | Accent on canvas | 18.97:1 | AA-Large | AAA | — | --- # SYSTEM: Soft Linen Source: https://www.freedesignmd.com/system/soft-linen --- name: "Soft Linen" description: "Warm linen canvas with abundant whitespace, gently rounded corners, and a single sage accent. Calm, airy, considered. Nothing shouts." tags: [minimal, warm, light, premium] colors: primary: "#2A2823" secondary: "#8B8678" tertiary: "#7A8B6F" neutral: "#F6F2EA" surface: "#FBF8F2" typography: display: Fraunces body: Inter mono: "JetBrains Mono" scale: hero: "4.75rem / 1.05 / 400 / -0.025em" h1: "2.75rem / 1.1 / 400 / -0.02em" h2: "1.5rem / 1.3 / 500 / -0.01em" body: "1.0625rem / 1.65 / 400 / -0.005em" radius: sm: 8px md: 12px lg: 18px pill: 9999px shadows: card: "0 1px 2px rgba(42, 40, 35, 0.04)" button: none borders: card: "1px solid rgba(42, 40, 35, 0.08)" divider: "rgba(42, 40, 35, 0.06)" buttons: primary: background: #2A2823 color: #F6F2EA border: 1px solid #2A2823 shape: rounded padding: 13px 26px font: 500 / 0.9375rem / -0.005em secondary: background: #FBF8F2 color: #2A2823 border: 1px solid rgba(42, 40, 35, 0.14) shape: rounded padding: 13px 26px font: 500 / 0.9375rem / -0.005em outline: background: transparent color: #7A8B6F border: 1px solid #7A8B6F shape: rounded padding: 12px 24px font: 500 / 0.9375rem / -0.005em ghost: background: transparent color: #7A8B6F border: none shape: rounded padding: 11px 6px font: 500 / 0.9375rem / -0.005em hover: underline charts: variant: line stroke_width: 1.75 gridlines: false highlight: last dot_marker: true axis_color: "#8B8678" palette: ["#7A8B6F", "#2A2823", "#8B8678"] fonts_url: "https://fonts.googleapis.com/css2?family=Fraunces:wght@300;400;500;600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Soft Linen ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Soft Linen** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#2A2823`, text `#F6F2EA`, border `1px solid #2A2823`, padding `13px 26px`, weight `500`. - **Secondary** — rounded shape, bg `#FBF8F2`, text `#2A2823`, border `1px solid rgba(42, 40, 35, 0.14)`, padding `13px 26px`, weight `500`. - **Outline** — rounded shape, text `#7A8B6F`, border `1px solid #7A8B6F`, padding `12px 24px`, weight `500`. - **Ghost** — rounded shape, text `#7A8B6F`, padding `11px 6px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FBF8F2` - Border: `1px solid rgba(42, 40, 35, 0.08)` - Shadow: `0 1px 2px rgba(42, 40, 35, 0.04)` - Radius: `radius.lg` (`18px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `line` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#7A8B6F`, `#2A2823`, `#8B8678`. #### Typography pairings - **Display (`Fraunces`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Soft Linen is the visual language of a quiet morning — warm cream paper, abundant air, and a single quiet sage accent. The system is built around **whitespace as the primary material**: sections breathe at 160px+ vertical rhythm, body copy sits at 1.65 leading, and every surface is a half-shade away from the next. Nothing competes for attention because nothing needs to. This is for product pages that want to feel slow on purpose — wellness brands, considered SaaS, slow-publishing journals, premium hospitality. ## Color - **Charcoal #2A2823** — primary text. Warm enough to never read as cold black on linen. - **Stone #8B8678** — captions, meta, axis labels. - **Sage #7A8B6F** — the single accent. Outline buttons, ghost links, chart lines. Used **once or twice per screen**, never as a fill. - **Linen #F6F2EA** — page canvas. Warm off-white. - **Surface #FBF8F2** — card stock, a half-shade brighter than the page. **No second accent exists.** Sage carries the entire chromatic load. ## Typography - **Display: Fraunces** at 4.75rem / 400, -2.5% tracking. Warm modern serif with optical-size grace. - **Body: Inter** at 1.0625rem with **1.65 leading**. The leading is non-negotiable. | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | Fraunces | 4.75rem | 400 | -0.025em | | H1 | Fraunces | 2.75rem | 400 | -0.02em | | H2 | Inter | 1.5rem | 500 | -0.01em | | Body | Inter | 1.0625rem | 400 | -0.005em / 1.65 | ## Whitespace Rhythm Soft Linen is defined by its breathing room. Apply this rhythm: - **Section gap: 160px** (mobile 96px) between major page sections. - **Card padding: 32px–40px**. Never below 24px. - **Heading-to-body gap: 24px** minimum. - **Inter-paragraph: 16px**. If a section feels comfortable, double its vertical padding. The system is built for over-spacing. ## Buttons All four are gently rounded (12–18px), soft and round but never pill-shaped except for the optional pill variant. - **Primary** — warm charcoal fill, linen label, no shadow. Quiet authority. - **Secondary** — linen surface with a 14% stone hairline. - **Outline** — transparent with a 1px sage border. The accent appears here. - **Ghost** — bare sage label, hover underline. **No drop shadows on buttons.** The form is the gesture. ## Cards Surface tile, **1px stone border at 8%**, a single 1px shadow at 4%. Radius is **18px**. Cards never lift more than that hairline shadow — the page-flat read is the system. ## Charts & Data A single 1.75px sage line over the linen canvas. **No gridlines, no fills.** A small sage dot at the latest reading. Axis labels in stone. ## Do's and Don'ts - ✅ Whitespace is the material. Over-space; never crowd. - ✅ Fraunces 400 for display — never 600+. Heavy weights kill the warmth. - ✅ Sage appears once or twice per screen, never as a fill. - ✅ 1.65 body leading minimum. Reading-first. - ❌ No drop shadows beyond a 4% hairline. - ❌ No second accent color. Sage is alone. - ❌ No tight section padding. The breathing room IS the design. - ❌ No pill buttons except for chrome — primary is gently rounded, not capsule. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#2A2823` | | secondary | `#8B8678` | | tertiary | `#7A8B6F` | | neutral | `#F6F2EA` | | surface | `#FBF8F2` | ### Typography - **Display:** Fraunces - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.75rem / 1.05 / 400 / -0.025em | | H1 | 2.75rem / 1.1 / 400 / -0.02em | | H2 | 1.5rem / 1.3 / 500 / -0.01em | | Body | 1.0625rem / 1.65 / 400 / -0.005em | ### Radius - sm: `8px` - md: `12px` - lg: `18px` - pill: `9999px` ### Shadows - **card:** `0 1px 2px rgba(42, 40, 35, 0.04)` - **button:** `none` ### Borders - **card:** `1px solid rgba(42, 40, 35, 0.08)` - **divider:** `rgba(42, 40, 35, 0.06)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#2A2823` | | color | `#F6F2EA` | | border | `1px solid #2A2823` | | padding | `13px 26px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#FBF8F2` | | color | `#2A2823` | | border | `1px solid rgba(42, 40, 35, 0.14)` | | padding | `13px 26px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#7A8B6F` | | border | `1px solid #7A8B6F` | | padding | `12px 24px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#7A8B6F` | | border | `none` | | padding | `11px 6px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `line` | | strokeWidth | `1.75` | | gridlines | `false` | | highlight | `last` | | dotMarker | `true` | | axisColor | `#8B8678` | | palette | `#7A8B6F`, `#2A2823`, `#8B8678` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 8px 24px -10px rgba(122, 139, 111, 0.35)`, transform: `translateY(-1px)`, filter: `brightness(1.02)` - **focus** — outline: `2px solid rgba(122, 139, 111, 0.4)`, outline-offset: `3px` - **active** — transform: `translateY(0) scale(0.98)` - **disabled** — opacity: `0.4`, filter: `saturate(0.5)` - **loading** — opacity: `0.65` - **selected** — bg: `rgba(122, 139, 111, 0.18)`, color: `#7A8B6F` #### Input - **hover** — bg: `rgba(122, 139, 111, 0.03)`, border: `1px solid rgba(122, 139, 111, 0.4)` - **focus** — border: `1px solid rgba(122, 139, 111, 0.6)`, shadow: `0 0 0 4px rgba(122, 139, 111, 0.12)` - **disabled** — opacity: `0.4` - **error** — border: `1px solid rgba(244,114,182,0.7)`, shadow: `0 0 0 4px rgba(244,114,182,0.15)` #### Card - **hover** — shadow: `0 16px 40px -16px rgba(122, 139, 111, 0.3)`, transform: `translateY(-3px)` - **selected** — bg: `rgba(122, 139, 111, 0.04)`, border: `1px solid rgba(122, 139, 111, 0.5)` - **dragging** — transform: `scale(1.03) rotate(-0.8deg)`, opacity: `0.92` #### Tab - **hover** — bg: `rgba(122, 139, 111, 0.08)`, color: `#7A8B6F` - **focus** — outline: `2px solid rgba(122, 139, 111, 0.4)`, outline-offset: `2px` - **selected** — bg: `rgba(122, 139, 111, 0.16)`, color: `#7A8B6F` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Soft fade.** Long, gentle transitions with a symmetric easing curve. Motion is calming, never intrusive. ```css transition: all 400ms cubic-bezier(0.45, 0.05, 0.55, 0.95); ``` | Token | Value | |-------|-------| | duration.instant | `120ms` | | duration.fast | `240ms` | | duration.base | `400ms` | | duration.slow | `600ms` | | easing.standard | `cubic-bezier(0.45, 0.05, 0.55, 0.95)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.45, 1.4, 0.55, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the tone separates, not the shadow. | | level1 | `0 2px 6px -2px rgba(122, 139, 111, 0.12)` | Soft tinted lift. | | level2 | `0 8px 24px -10px rgba(122, 139, 111, 0.2)` | Floating card — pastel-tinted shadow. | | level3 | `0 16px 48px -16px rgba(122, 139, 111, 0.28)` | Sheet — visible tinted glow. | | level4 | `0 32px 80px -24px rgba(122, 139, 111, 0.4)` | Modal — tinted wash, scrim required. | ### Content - **measure:** `64ch` (max line length for body prose) - **paragraph spacing:** `1.35em` - **list indent:** `1.5em` - **list gap:** `0.6em` - **link:** color `#7A8B6F`, underline `hover` - **blockquote:** border `2px solid rgba(122, 139, 111, 0.5)`, padding `0.9em 1.2em` - **code:** background `rgba(122, 139, 111, 0.1)`, color `#2A2823` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 13.89:1 | AA | AAA | — | | Body text on canvas | 13.19:1 | AA | AAA | — | | Muted text on surface | 3.43:1 | AA | AA-Large | `#757165` → 4.6:1 (AA) | | Accent on surface | 3.45:1 | AA-Large | AA-Large | — | | Accent on canvas | 3.27:1 | AA-Large | AA-Large | — | --- # SYSTEM: Liquid Metal Source: https://www.freedesignmd.com/system/liquid-metal --- name: "Liquid Metal" description: "Dark graphite glassmorphism — heavy 48px backdrop blur on near-opaque graphite panes, hairline pewter borders, and brushed-silver text accents. No color, no glow, no aurora. Just clean machined glass over a flat charcoal canvas with subtle metallic gradients on display type." tags: [dark, glass, minimal, premium, modern] colors: primary: "#E8EAEE" secondary: "#8C92A0" tertiary: "#C8CDD6" neutral: "#0E1013" surface: "#15181D" typography: display: Inter body: Inter mono: "JetBrains Mono" scale: hero: "4.25rem / 1.04 / 600 / -0.035em" h1: "2.75rem / 1.08 / 600 / -0.03em" h2: "1.625rem / 1.2 / 500 / -0.02em" body: "1rem / 1.55 / 400 / -0.005em" radius: sm: 8px md: 14px lg: 20px pill: 9999px shadows: card: "0 1px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(232, 234, 238, 0.10)" button: "inset 0 1px 0 rgba(232, 234, 238, 0.14)" borders: card: "1px solid rgba(220, 225, 235, 0.08)" divider: "rgba(220, 225, 235, 0.06)" glass: surface: "rgba(30, 34, 40, 0.28)" blur: 64px saturate: 115% border: "1px solid rgba(220, 225, 235, 0.14)" shadow: "0 1px 0 rgba(0, 0, 0, 0.25)" inner_highlight: "inset 0 1px 0 rgba(232, 234, 238, 0.10)" backdrop: "radial-gradient(at 18% 22%, rgba(60, 66, 76, 0.55) 0%, transparent 55%), radial-gradient(at 82% 78%, rgba(36, 40, 48, 0.65) 0%, transparent 50%), radial-gradient(at 50% 50%, rgba(48, 52, 60, 0.35) 0%, transparent 65%), #0E1115" buttons: primary: background: linear-gradient(180deg, rgba(232, 234, 238, 0.22) 0%, rgba(180, 188, 200, 0.10) 100%) color: #F4F6FA border: 1px solid rgba(232, 234, 238, 0.32) shape: pill padding: 12px 24px font: 600 / 0.9375rem / -0.01em shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20) backdrop_blur: 40px backdrop_saturate: 130% secondary: background: rgba(40, 46, 54, 0.28) color: #E8EAEE border: 1px solid rgba(220, 225, 235, 0.14) shape: pill padding: 12px 24px font: 500 / 0.9375rem / -0.01em shadow: inset 0 1px 0 rgba(232, 234, 238, 0.08) backdrop_blur: 40px backdrop_saturate: 120% outline: background: rgba(20, 23, 28, 0.40) color: #E8EAEE border: 1px solid rgba(220, 225, 235, 0.14) shape: pill padding: 11px 22px font: 500 / 0.9375rem / -0.01em backdrop_blur: 24px backdrop_saturate: 110% ghost: background: transparent color: rgba(232, 234, 238, 0.70) border: none shape: pill padding: 11px 16px font: 500 / 0.9375rem charts: variant: line stroke_width: 1.75 gridlines: false highlight: last dot_marker: true axis_color: "#5A6070" palette: ["#C8CDD6", "#8C92A0", "#5A6070"] fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Liquid Metal ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Liquid Metal** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — pill shape, bg `linear-gradient(180deg, rgba(232, 234, 238, 0.22) 0%, rgba(180, 188, 200, 0.10) 100%)`, text `#F4F6FA`, border `1px solid rgba(232, 234, 238, 0.32)`, padding `12px 24px`, weight `600`, shadow `inset 0 1px 0 rgba(255, 255, 255, 0.20)`. - **Secondary** — pill shape, bg `rgba(40, 46, 54, 0.28)`, text `#E8EAEE`, border `1px solid rgba(220, 225, 235, 0.14)`, padding `12px 24px`, weight `500`, shadow `inset 0 1px 0 rgba(232, 234, 238, 0.08)`. - **Outline** — pill shape, bg `rgba(20, 23, 28, 0.40)`, text `#E8EAEE`, border `1px solid rgba(220, 225, 235, 0.14)`, padding `11px 22px`, weight `500`. - **Ghost** — pill shape, text `rgba(232, 234, 238, 0.70)`, padding `11px 16px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#15181D` - Border: `1px solid rgba(220, 225, 235, 0.08)` - Shadow: `0 1px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(232, 234, 238, 0.10)` - Radius: `radius.lg` (`20px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. > This system ships a **glass treatment** — see the Glass token table. > Apply `backdrop-filter: blur(64px)` to translucent panes. > The page must have a backdrop (gradient mesh / blurred orbs) for glass to refract. #### Charts - Bar/line variant: `line` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#C8CDD6`, `#8C92A0`, `#5A6070`. #### Typography pairings - **Display (`Inter`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Liquid Metal is dark glassmorphism stripped of every color cue. Where Aurora Glass detonates a vivid mesh behind translucent panes, Liquid Metal sits on a **flat charcoal canvas** — two neutral stops, no orbs, no glow. The glass itself does the talking: 48px backdrop blur, graphite tint at 55% opacity, cool pewter hairlines, and a metallic top-edge gloss that reads as machined aluminum under frost. This is the industrial machined-metal language: industrial, cool, premium. Every surface feels milled. ## Atmosphere - The page background is a **flat vertical graphite gradient** — `#14171C` to `#0B0D11`. No mesh, no aurora, no color. The neutrality is deliberate: it makes the glass read as glass, not as a tinted overlay. - Cards are **graphite panes** at 55% opacity with a heavy 48px blur. They have weight — closer to brushed steel under glass than to floating bubbles. - Buttons are **frosted pills**. The primary uses a vertical silver gradient (18% → 10%) to suggest a brushed metal cap with a cool hairline rim. No color, no glow shadow. - Borders are **cool pewter hairlines** at 10–14% — they catch light without ever introducing hue. - Shadows are **deep and heavy** (80px blur, -24px y, 75% opacity) paired with a 1px cool top highlight and a 1px dark bottom relief. That double-stroke is the metallic edge. ## Liquid Metal Text Accents Display type uses **brushed silver** as the accent stop — `#C8CDD6` paired with the primary ivory `#E8EAEE` to create a subtle metallic gradient on hero titles, callout numerals, and accent words. Apply it with `background-clip: text` and a 180° linear gradient (silver top, ivory bottom) so the text reads like polished steel under cool light. ```css .metal-text { background: linear-gradient(180deg, #E8EAEE 0%, #C8CDD6 60%, #8C92A0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } ``` Use this on hero words, large numerals, and section accents only — never on body text. ## Typography **Inter** at every level. Hero compresses to -3.5% tracking; body breathes at -0.5%. Display weight is **600**, never 700 — heavy weights look plastic on glass. | Role | Size | Weight | Tracking | |------|-----------|--------|-----------| | Hero | 4.25rem | 600 | -0.035em | | H1 | 2.75rem | 600 | -0.03em | | H2 | 1.625rem | 500 | -0.02em | | Body | 1rem | 400 | -0.005em | ## Color - **Ivory #E8EAEE** — primary text on graphite glass. Cool, slightly cyan-leaning. - **Brushed Silver #C8CDD6** — the metallic accent stop. Used in display gradients only, never as a solid fill. - **Pewter #8C92A0** — captions, axis labels, secondary chrome. - **Graphite #15181D** — opaque surface fallback when glass is not available. - **Charcoal #0E1013** — the page canvas. **No saturated colors exist in this system.** No mint, no violet, no rose. The accent is brightness, not hue. ## Buttons All four are frosted glass pills. **There are no solid buttons.** - **Primary** — brushed silver glass with a vertical 18%→10% white gradient, cool hairline border at 28%, double-stroke shadow (cool top, dark bottom). Reads as a polished metal cap. - **Secondary** — graphite pane at 55%, hairline pewter border, 32px backdrop blur. - **Outline** — whisper-glass at 40% with a 14% hairline ring. - **Ghost** — bare label, no surface. All four are **pills** (9999px). Sharp corners only on hairlines. ## Charts & Data A single 1.75px brushed-silver line over the flat graphite canvas. **No gridlines, no fills, no second color.** A small dot marks the latest value. Axis labels in pewter `#5A6070`. The chart should read like an oscilloscope sweep on a darkroom monitor. ## Do's and Don'ts - ✅ Always render the flat graphite canvas. The neutrality is what makes the glass read as metal. - ✅ Use `background-clip: text` with the silver gradient on hero accents. - ✅ Pair every glass surface with a cool top highlight (1px white at 14–22%) AND a dark bottom relief (1px black at 40%). The double-stroke is the metallic edge. - ✅ Keep cards at ~55% opacity with 48px blur — heavier than aurora, never bubble-light. - ❌ No colored gradients anywhere. No mint, no blue, no violet. Brightness only. - ❌ No glow shadows. Shadows are deep and dark, not luminous. - ❌ No saturation boost on the backdrop — keep `saturate: 100%`. Color in the canvas would defeat the metallic read. - ❌ No solid CTAs. Even the primary is frosted glass with a silver gradient. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#E8EAEE` | | secondary | `#8C92A0` | | tertiary | `#C8CDD6` | | neutral | `#0E1013` | | surface | `#15181D` | ### Typography - **Display:** Inter - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.25rem / 1.04 / 600 / -0.035em | | H1 | 2.75rem / 1.08 / 600 / -0.03em | | H2 | 1.625rem / 1.2 / 500 / -0.02em | | Body | 1rem / 1.55 / 400 / -0.005em | ### Radius - sm: `8px` - md: `14px` - lg: `20px` - pill: `9999px` ### Shadows - **card:** `0 1px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(232, 234, 238, 0.10)` - **button:** `inset 0 1px 0 rgba(232, 234, 238, 0.14)` ### Borders - **card:** `1px solid rgba(220, 225, 235, 0.08)` - **divider:** `rgba(220, 225, 235, 0.06)` ### Glass Translucent panes with backdrop-filter — the preview renders cards from these exact values. | Property | Value | |----------|-------| | surface | `rgba(30, 34, 40, 0.28)` | | blur | `64px` | | saturate | `115%` | | border | `1px solid rgba(220, 225, 235, 0.14)` | | shadow | `0 1px 0 rgba(0, 0, 0, 0.25)` | | innerHighlight | `inset 0 1px 0 rgba(232, 234, 238, 0.10)` | | backdrop | `radial-gradient(at 18% 22%, rgba(60, 66, 76, 0.55) 0%, transparent 55%), radial-gradient(at 82% 78%, rgba(36, 40, 48, 0.65) 0%, transparent 50%), radial-gradient(at 50% 50%, rgba(48, 52, 60, 0.35) 0%, transparent 65%), #0E1115` | ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `pill` | | background | `linear-gradient(180deg, rgba(232, 234, 238, 0.22) 0%, rgba(180, 188, 200, 0.10) 100%)` | | color | `#F4F6FA` | | border | `1px solid rgba(232, 234, 238, 0.32)` | | padding | `12px 24px` | | fontWeight | `600` | | fontSize | `0.9375rem` | | tracking | `-0.01em` | | shadow | `inset 0 1px 0 rgba(255, 255, 255, 0.20)` | | backdropBlur | `40px` | | backdropSaturate | `130%` | #### Secondary | Property | Value | |----------|-------| | shape | `pill` | | background | `rgba(40, 46, 54, 0.28)` | | color | `#E8EAEE` | | border | `1px solid rgba(220, 225, 235, 0.14)` | | padding | `12px 24px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.01em` | | shadow | `inset 0 1px 0 rgba(232, 234, 238, 0.08)` | | backdropBlur | `40px` | | backdropSaturate | `120%` | #### Outline | Property | Value | |----------|-------| | shape | `pill` | | background | `rgba(20, 23, 28, 0.40)` | | color | `#E8EAEE` | | border | `1px solid rgba(220, 225, 235, 0.14)` | | padding | `11px 22px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.01em` | | backdropBlur | `24px` | | backdropSaturate | `110%` | #### Ghost | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `rgba(232, 234, 238, 0.70)` | | border | `none` | | padding | `11px 16px` | | fontWeight | `500` | | fontSize | `0.9375rem` | ### Charts | Property | Value | |----------|-------| | variant | `line` | | strokeWidth | `1.75` | | gridlines | `false` | | highlight | `last` | | dotMarker | `true` | | axisColor | `#5A6070` | | palette | `#C8CDD6`, `#8C92A0`, `#5A6070` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 8px 24px -8px rgba(200, 205, 214, 0.35), inset 0 1px 0 rgba(255,255,255,0.18)`, transform: `translateY(-1px)`, filter: `saturate(1.15)` - **focus** — outline: `2px solid rgba(200, 205, 214, 0.5)`, outline-offset: `3px` - **active** — transform: `translateY(0) scale(0.98)`, filter: `brightness(0.96)` - **disabled** — opacity: `0.4`, filter: `saturate(0.4) blur(0.4px)` - **loading** — opacity: `0.7` - **selected** — bg: `rgba(200, 205, 214, 0.18)`, color: `#C8CDD6` #### Input - **hover** — border: `1px solid rgba(200, 205, 214, 0.4)`, shadow: `inset 0 1px 0 rgba(255,255,255,0.18)` - **focus** — border: `1px solid rgba(200, 205, 214, 0.65)`, shadow: `0 0 0 4px rgba(200, 205, 214, 0.15), inset 0 1px 0 rgba(255,255,255,0.18)` - **disabled** — opacity: `0.4` - **error** — border: `1px solid rgba(248,113,113,0.7)`, shadow: `0 0 0 4px rgba(248,113,113,0.15)` #### Card - **hover** — shadow: `0 16px 48px -16px rgba(200, 205, 214, 0.25), inset 0 1px 0 rgba(255,255,255,0.18)`, transform: `translateY(-2px)`, filter: `saturate(1.1)` - **selected** — border: `1px solid rgba(200, 205, 214, 0.5)` - **dragging** — shadow: `0 24px 64px -16px rgba(0,0,0,0.4)`, transform: `scale(1.02)`, opacity: `0.85` #### Tab - **hover** — bg: `rgba(200, 205, 214, 0.08)` - **focus** — outline: `2px solid rgba(200, 205, 214, 0.5)`, outline-offset: `2px` - **selected** — bg: `rgba(200, 205, 214, 0.18)`, color: `#C8CDD6` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Refract.** Long opacity- and blur-driven transitions. Not a hard move, but a shift of light across the glass surface. ```css transition: opacity 350ms cubic-bezier(0.32, 0.72, 0, 1), backdrop-filter 350ms cubic-bezier(0.32, 0.72, 0, 1), transform 350ms cubic-bezier(0.32, 0.72, 0, 1); ``` | Token | Value | |-------|-------| | duration.instant | `100ms` | | duration.fast | `200ms` | | duration.base | `350ms` | | duration.slow | `550ms` | | easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.34, 1.2, 0.64, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `inset 0 1px 0 rgba(255,255,255,0.18)` | Flat glass surface — top-edge gloss only. | | level1 | `0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Soft lift + top-edge gloss. | | level2 | `0 12px 32px -8px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255,255,255,0.18)` | Floating pane — popover. | | level3 | `0 24px 64px -16px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(200, 205, 214, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Sheet — accent rim for depth. | | level4 | `0 40px 96px -24px rgba(0, 0, 0, 0.5), 0 0 48px -12px rgba(200, 205, 214, 0.25), inset 0 1px 0 rgba(255,255,255,0.18)` | Modal — dramatic glow, scrim required. | ### Content - **measure:** `66ch` (max line length for body prose) - **paragraph spacing:** `1.25em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#C8CDD6`, underline `hover` - **blockquote:** border `1px solid rgba(200, 205, 214, 0.4)`, padding `0.9em 1.2em` - **code:** background `rgba(200, 205, 214, 0.1)`, color `#C8CDD6` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 14.77:1 | AA | AAA | — | | Body text on canvas | 15.82:1 | AA | AAA | — | | Muted text on surface | 5.71:1 | AA | AA | — | | Accent on surface | 11.15:1 | AA-Large | AAA | — | | Accent on canvas | 11.94:1 | AA-Large | AAA | — | --- # SYSTEM: Argent Machined Source: https://www.freedesignmd.com/system/argent-machined --- name: "Argent Machined" description: "Cool brushed silver on a slate canvas. The metallic surface appears only on the primary CTA and one hero badge — everywhere else is graphite ink and quiet steel hairlines. Premium hardware, machined." tags: [metallic, premium, cool, minimal, hardware] colors: primary: "#13171C" secondary: "#5C6670" tertiary: "#C8CDD3" neutral: "#E6E8EC" surface: "#F2F3F6" typography: display: "Space Grotesk" body: Inter mono: "IBM Plex Mono" scale: hero: "4.5rem / 1.02 / 600 / -0.04em" h1: "2.75rem / 1.08 / 600 / -0.03em" h2: "1.5rem / 1.3 / 600 / -0.015em" body: "1rem / 1.6 / 400 / -0.005em" radius: sm: 4px md: 6px lg: 8px shadows: card: "0 0 0 1px rgba(19, 23, 28, 0.06), 0 6px 18px -10px rgba(19, 23, 28, 0.12)" button: "0 6px 14px -6px rgba(19, 23, 28, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(19, 23, 28, 0.18)" borders: card: "1px solid rgba(19, 23, 28, 0.08)" divider: "rgba(19, 23, 28, 0.10)" buttons: primary: background: linear-gradient(180deg, #EEF1F5 0%, #C8CDD3 50%, #9AA1AB 100%) color: #13171C border: 1px solid rgba(19, 23, 28, 0.18) shape: rounded padding: 12px 22px font: 600 / 0.9375rem / -0.01em shadow: 0 6px 14px -6px rgba(19, 23, 28, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(19, 23, 28, 0.18) secondary: background: #13171C color: #F2F3F6 border: 1px solid #13171C shape: rounded padding: 12px 22px font: 500 / 0.9375rem / -0.005em outline: background: transparent color: #13171C border: 1px solid rgba(19, 23, 28, 0.22) shape: rounded padding: 11px 21px font: 500 / 0.9375rem / -0.005em ghost: background: transparent color: #5C6670 border: none shape: rounded padding: 11px 6px font: 500 / 0.9375rem / -0.005em hover: underline charts: variant: "rounded-bars" stroke_width: 2 gridlines: false bar_radius: 3px bar_gap: 8px highlight: all axis_color: "#5C6670" palette: ["#13171C", "#5C6670", "#9AA1AB", "#C8CDD3"] fonts_url: "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Argent Machined ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Argent Machined** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `linear-gradient(180deg, #EEF1F5 0%, #C8CDD3 50%, #9AA1AB 100%)`, text `#13171C`, border `1px solid rgba(19, 23, 28, 0.18)`, padding `12px 22px`, weight `600`, shadow `0 6px 14px -6px rgba(19, 23, 28, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(19, 23, 28, 0.18)`. - **Secondary** — rounded shape, bg `#13171C`, text `#F2F3F6`, border `1px solid #13171C`, padding `12px 22px`, weight `500`. - **Outline** — rounded shape, text `#13171C`, border `1px solid rgba(19, 23, 28, 0.22)`, padding `11px 21px`, weight `500`. - **Ghost** — rounded shape, text `#5C6670`, padding `11px 6px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#F2F3F6` - Border: `1px solid rgba(19, 23, 28, 0.08)` - Shadow: `0 0 0 1px rgba(19, 23, 28, 0.06), 0 6px 18px -10px rgba(19, 23, 28, 0.12)` - Radius: `radius.lg` (`8px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `rounded-bars` - Bar radius: `3px` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `all` — emphasize a single bar/point per chart. - Use the declared palette in order: `#13171C`, `#5C6670`, `#9AA1AB`, `#C8CDD3`. #### Typography pairings - **Display (`Space Grotesk`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`IBM Plex Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Argent Machined is the cool counterpart to warm metallic systems: brushed silver on a slate canvas, graphite ink, quiet steel hairlines. The metallic surface is rationed — it appears only on the primary CTA and a hero badge, never on cards or backgrounds. Everywhere else is restraint. The system is built for premium hardware product pages: audio equipment, watches, automotive interfaces, professional electronics. Anything where the product is the protagonist and the page is its plinth. ## The Metallic Recipe Brushed silver is a vertical 3-stop gradient with a top-edge gloss and a bottom-edge shadow. Together they simulate directional light hitting a machined surface: ```css .argent-metal { background: linear-gradient(180deg, #EEF1F5 0%, #C8CDD3 50%, #9AA1AB 100%); border: 1px solid rgba(19, 23, 28, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), /* top-edge gloss */ inset 0 -1px 0 rgba(19, 23, 28, 0.18), /* bottom-edge shadow */ 0 6px 14px -6px rgba(19, 23, 28, 0.30); /* ambient drop */ border-radius: 8px; } ``` The 50% mid-stop is the key — it creates the brushed-band that reads as metal rather than just "grey gradient." Without it the surface dies. ## Color - **Graphite #13171C** — primary text. - **Steel #5C6670** — secondary text, axis labels. - **Silver #C8CDD3** — metallic mid-stop, used in the primary CTA. - **Slate #E6E8EC** — page canvas. Cool but not sterile. - **Surface #F2F3F6** — card surface, one notch lighter than canvas. Three neutrals, one "accent" (which is itself a neutral). The system has no chromatic color at all. ## Typography - **Display: Space Grotesk 600** at 4.5rem with -4% tracking. The neo-grotesque feels engineered. - **Body: Inter 400** at 1rem with 1.6 leading. - **Mono: IBM Plex Mono 500** for spec callouts (S/N, dimensions, weight). | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | Space Grotesk | 4.5rem | 600 | -0.04em | | H1 | Space Grotesk | 2.75rem | 600 | -0.03em | | H2 | Space Grotesk | 1.5rem | 600 | -0.015em | | Body | Inter | 1rem | 400 | -0.005em / 1.6 | | Spec | IBM Plex Mono | 0.8125rem | 500 | 0 | ## Geometry - **Radii: 4 / 6 / 8.** Machined edges. Never pill, never sharp, never soft. - **Section gap: 96px** desktop, 64px mobile. - **12-column grid** with 24px gutters. ## Buttons - **Primary** — brushed silver gradient with top gloss + bottom shadow. Graphite label at 600. Reads as a machined toggle. - **Secondary** — solid graphite, surface label. The dark inverse. - **Outline** — bare hairline rectangle. - **Ghost** — bare steel label, hover underline. Primary and secondary always appear together as a pair, in that order. Never two primaries. ## Cards Surface cards on slate, 1px graphite hairline at 8% opacity, soft 6px corner radius, low cool ambient shadow. Padding 28px. Cards never use the metallic gradient — that surface belongs only to the primary CTA. ## Charts & Data Multi-bar histogram in three steps of grey (graphite → steel → silver), 3px corner radius, 8px gap, no gridlines. Axis labels in steel at 11px. The chart reads like a measurement readout, not a marketing graphic. ## Do's and Don'ts - ✅ Metallic surface only on the primary CTA + one hero badge. Anywhere else cheapens it. - ✅ The 50% mid-stop in the gradient is mandatory — it is what makes it read as metal. - ✅ Top-edge gloss + bottom-edge shadow inset. Without both, the metal looks like a flat grey button. - ✅ Pair primary (silver) + secondary (graphite) — that contrast is the system's signature. - ❌ No warm tints. The system is strictly cool — slate, graphite, silver. - ❌ No chromatic accent. There is no blue, no green, no anything. - ❌ No metallic backgrounds or large metallic surfaces. The metal is jewelry, not wallpaper. - ❌ No pill shape. Machined hardware does not round to a pill. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#13171C` | | secondary | `#5C6670` | | tertiary | `#C8CDD3` | | neutral | `#E6E8EC` | | surface | `#F2F3F6` | ### Typography - **Display:** Space Grotesk - **Body:** Inter - **Mono:** IBM Plex Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.5rem / 1.02 / 600 / -0.04em | | H1 | 2.75rem / 1.08 / 600 / -0.03em | | H2 | 1.5rem / 1.3 / 600 / -0.015em | | Body | 1rem / 1.6 / 400 / -0.005em | ### Radius - sm: `4px` - md: `6px` - lg: `8px` ### Shadows - **card:** `0 0 0 1px rgba(19, 23, 28, 0.06), 0 6px 18px -10px rgba(19, 23, 28, 0.12)` - **button:** `0 6px 14px -6px rgba(19, 23, 28, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(19, 23, 28, 0.18)` ### Borders - **card:** `1px solid rgba(19, 23, 28, 0.08)` - **divider:** `rgba(19, 23, 28, 0.10)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `linear-gradient(180deg, #EEF1F5 0%, #C8CDD3 50%, #9AA1AB 100%)` | | color | `#13171C` | | border | `1px solid rgba(19, 23, 28, 0.18)` | | padding | `12px 22px` | | fontWeight | `600` | | fontSize | `0.9375rem` | | tracking | `-0.01em` | | shadow | `0 6px 14px -6px rgba(19, 23, 28, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(19, 23, 28, 0.18)` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#13171C` | | color | `#F2F3F6` | | border | `1px solid #13171C` | | padding | `12px 22px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#13171C` | | border | `1px solid rgba(19, 23, 28, 0.22)` | | padding | `11px 21px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#5C6670` | | border | `none` | | padding | `11px 6px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `rounded-bars` | | strokeWidth | `2` | | gridlines | `false` | | barRadius | `3px` | | barGap | `8px` | | highlight | `all` | | axisColor | `#5C6670` | | palette | `#13171C`, `#5C6670`, `#9AA1AB`, `#C8CDD3` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 0 24px -4px rgba(200, 205, 211, 0.5), 0 8px 24px -8px rgba(0,0,0,0.6)`, filter: `brightness(1.1)` - **focus** — outline: `1.5px solid #C8CDD3`, outline-offset: `3px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.92)` - **disabled** — opacity: `0.35`, filter: `saturate(0.4)` - **loading** — opacity: `0.6` - **selected** — bg: `#C8CDD3`, color: `#0A0A0A` #### Input - **hover** — border: `1px solid rgba(200, 205, 211, 0.5)` - **focus** — border: `1px solid #C8CDD3`, shadow: `0 0 0 3px rgba(200, 205, 211, 0.2)` - **disabled** — opacity: `0.35` - **error** — border: `1px solid #F87171`, shadow: `0 0 0 3px rgba(248,113,113,0.2)` #### Card - **hover** — shadow: `0 16px 40px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(200, 205, 211, 0.18)`, transform: `translateY(-2px)` - **selected** — border: `1px solid #C8CDD3`, shadow: `0 0 0 1px #C8CDD3` - **dragging** — shadow: `0 24px 60px -16px rgba(0,0,0,0.85)`, transform: `scale(1.02)`, opacity: `0.85` #### Tab - **hover** — color: `#C8CDD3` - **focus** — outline: `1.5px solid #C8CDD3`, outline-offset: `2px` - **selected** — color: `#C8CDD3`, border: `0 0 1.5px 0 solid #C8CDD3` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Glide.** Fließende, leicht beschleunigte Übergänge mit Accent-Glow auf hover. Premium-Feeling durch kontrollierte Lichtspiele. ```css transition: all 280ms cubic-bezier(0.32, 0.72, 0, 1); ``` | Token | Value | |-------|-------| | duration.instant | `100ms` | | duration.fast | `180ms` | | duration.base | `280ms` | | duration.slow | `450ms` | | easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.25, 0.55, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — Hairline mit Accent-Hauch. | | level1 | `0 2px 4px rgba(0,0,0,0.45)` | Subtle drop — list items. | | level2 | `0 12px 28px -8px rgba(0,0,0,0.6)` | Popover — vom Canvas gelöst. | | level3 | `0 20px 48px -12px rgba(0,0,0,0.7), 0 0 32px -8px rgba(200, 205, 211, 0.25)` | Sheet — Accent-Halo. | | level4 | `0 40px 96px -16px rgba(0,0,0,0.85), 0 0 64px -12px rgba(200, 205, 211, 0.4)` | Modal — voller Accent-Rim, dramatisch. | ### Content - **measure:** `66ch` (max line length for body prose) - **paragraph spacing:** `1.3em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#C8CDD3`, underline `hover` - **blockquote:** border `2px solid #C8CDD3`, padding `0.8em 1.2em` - **code:** background `rgba(200, 205, 211, 0.12)`, color `#C8CDD3` ### Accessibility (WCAG 2.1) **Overall:** FAIL | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 16.22:1 | AA | AAA | — | | Body text on canvas | 14.67:1 | AA | AAA | — | | Muted text on surface | 5.27:1 | AA | AA | — | | Accent on surface | 1.44:1 | AA-Large | FAIL | `#616c79` → 4.82:1 (AA) | | Accent on canvas | 1.3:1 | AA-Large | FAIL | `#5c6673` → 4.75:1 (AA) | --- # SYSTEM: Hairline Light Source: https://www.freedesignmd.com/system/hairline-light --- name: "Hairline Light" description: "Light dev-tool. Bone canvas with a 1px graphite hairline grid, mono-forward labels, one signal-violet accent. The aesthetic of an API console — built for developer-facing platforms that ship a light theme." tags: ["dev-tool", light, minimal, developer, modern] colors: primary: "#0E0F12" secondary: "#5A6068" tertiary: "#9097A0" neutral: "#F7F7F4" surface: "#FFFFFF" typography: display: "Geist Mono" body: Geist mono: "Geist Mono" scale: hero: "4rem / 1 / 500 / -0.035em" h1: "2.375rem / 1.05 / 500 / -0.03em" h2: "1.25rem / 1.3 / 500 / -0.012em" body: "0.9375rem / 1.6 / 400 / -0.003em" radius: sm: 4px md: 6px lg: 8px shadows: card: "0 0 0 1px rgba(14, 15, 18, 0.08)" button: "0 1px 2px rgba(14, 15, 18, 0.06)" borders: card: "1px solid rgba(14, 15, 18, 0.08)" divider: "rgba(14, 15, 18, 0.10)" buttons: primary: background: #0E0F12 color: #F7F7F4 border: 1px solid #0E0F12 shape: rounded padding: 10px 18px font: mono / 500 / 0.8125rem / -0.005em shadow: 0 1px 2px rgba(14, 15, 18, 0.06) secondary: background: #FFFFFF color: #0E0F12 border: 1px solid rgba(14, 15, 18, 0.14) shape: rounded padding: 10px 18px font: mono / 500 / 0.8125rem / -0.005em outline: background: transparent color: #0E0F12 border: 1px dashed rgba(14, 15, 18, 0.30) shape: rounded padding: 10px 18px font: mono / 500 / 0.8125rem / -0.005em ghost: background: transparent color: #7C5CFA border: none shape: rounded padding: 10px 4px font: mono / 500 / 0.8125rem / -0.005em hover: underline charts: variant: "thin-bars" stroke_width: 1 gridlines: true bar_radius: 0px bar_gap: 6px highlight: single axis_color: "#5A6068" palette: ["#7C5CFA"] fonts_url: "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap" dependencies: ["lucide-react"] --- # Hairline Light ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Hairline Light** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#0E0F12`, text `#F7F7F4`, border `1px solid #0E0F12`, padding `10px 18px`, weight `500`, shadow `0 1px 2px rgba(14, 15, 18, 0.06)`. - **Secondary** — rounded shape, bg `#FFFFFF`, text `#0E0F12`, border `1px solid rgba(14, 15, 18, 0.14)`, padding `10px 18px`, weight `500`. - **Outline** — rounded shape, text `#0E0F12`, border `1px dashed rgba(14, 15, 18, 0.30)`, padding `10px 18px`, weight `500`. - **Ghost** — rounded shape, text `#7C5CFA`, padding `10px 4px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FFFFFF` - Border: `1px solid rgba(14, 15, 18, 0.08)` - Shadow: `0 0 0 1px rgba(14, 15, 18, 0.08)` - Radius: `radius.lg` (`8px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `thin-bars` - Bar radius: `0px` - Highlight strategy: `single` — emphasize a single bar/point per chart. - Use the declared palette in order: `#7C5CFA`. #### Typography pairings - **Display (`Geist Mono`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Geist`)** — paragraphs, labels, button text, form inputs. - **Mono (`Geist Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Hairline Light is the light counterpart to dev-tool dark systems. The page sits on a bone canvas with a 1px graphite hairline grid; type is mono-forward (Geist Mono for display + labels, Geist Sans for body); every pixel lands on a 4px subgrid. There is exactly one chromatic accent — a signal violet — and it appears only on links, ghost buttons, and the primary chart bar. The system is built for developer-facing platforms that ship a light theme: API consoles, docs sites, infra dashboards, log viewers, anything where the aesthetic is "documentation, not marketing." ## Color - **Graphite #0E0F12** — primary text, primary fills, hairline borders. - **Mid Graphite #5A6068** — secondary text, axis labels. - **Soft Graphite #9097A0** — tertiary text, dividers at low opacity. - **Bone #F7F7F4** — page canvas. Slightly warm so it doesn't feel sterile. - **Paper #FFFFFF** — card surface. - **Signal Violet #7C5CFA** — the only chromatic accent. Links, ghost button label, primary chart bar. Color is rationed. The page is mostly bone and graphite with a single stroke of violet. ## Typography The system runs on **Geist + Geist Mono**. Display and labels are mono — that single decision is the whole tonal voice. | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | Geist Mono | 4rem | 500 | -0.035em | | H1 | Geist Mono | 2.375rem | 500 | -0.03em | | H2 | Geist Mono | 1.25rem | 500 | -0.012em | | Body | Geist | 0.9375rem | 400 | -0.003em / 1.6 | | Button | Geist Mono | 0.8125rem | 500 | -0.005em | Body copy uses the proportional Geist; everything structural (display, button, label, table header) uses Geist Mono. The contrast between proportional body and mono structure is the entire texture. ## Geometry - **Radii: 4 / 6 / 8.** Precise instrument geometry. Never pill, never soft. - **4px subgrid.** Every spacing value is a multiple of 4. - **Hairlines everywhere.** 1px graphite at 8-14% opacity divides every section. The page is a wireframe. - **Section gap: 96px** desktop, 64px mobile. ## Buttons - **Primary** — solid graphite, bone label, mono caps. The single dark element on the page. - **Secondary** — surface paper with a 14% graphite hairline. Mono label. - **Outline** — **dashed** hairline at 30%. Dashed = "secondary action" semantics — distinct from secondary's solid border. - **Ghost** — bare signal-violet label, hover underline. ## Cards Surface paper on bone, 1px graphite hairline at 8% opacity, sharp 6px corners, **no drop shadow**. Padding 24px. Cards are wireframes filled with content — the hairline is the entire structure. ## Charts & Data Single-color thin bars in signal violet, **gridlines on** (this is a developer tool — readability beats minimalism), 6px gap, 0 corner radius. Axis labels in mid graphite at 11px Geist Mono. ## Do's and Don'ts - ✅ Mono for display and structure. Proportional only for body. - ✅ Hairline borders, never drop shadows. The system is a wireframe. - ✅ One chromatic accent — signal violet. Used sparingly (link, ghost, primary chart bar). - ✅ 4px subgrid. Every spacing value is a multiple of 4. - ❌ No pill buttons. No soft corners. No drop shadows. - ❌ No second chromatic color. The page is bone + graphite + violet. - ❌ No proportional display type. Mono carries the identity. - ❌ No icons inside body text. Use mono labels. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#0E0F12` | | secondary | `#5A6068` | | tertiary | `#9097A0` | | neutral | `#F7F7F4` | | surface | `#FFFFFF` | ### Typography - **Display:** Geist Mono - **Body:** Geist - **Mono:** Geist Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4rem / 1 / 500 / -0.035em | | H1 | 2.375rem / 1.05 / 500 / -0.03em | | H2 | 1.25rem / 1.3 / 500 / -0.012em | | Body | 0.9375rem / 1.6 / 400 / -0.003em | ### Radius - sm: `4px` - md: `6px` - lg: `8px` ### Shadows - **card:** `0 0 0 1px rgba(14, 15, 18, 0.08)` - **button:** `0 1px 2px rgba(14, 15, 18, 0.06)` ### Borders - **card:** `1px solid rgba(14, 15, 18, 0.08)` - **divider:** `rgba(14, 15, 18, 0.10)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#0E0F12` | | color | `#F7F7F4` | | border | `1px solid #0E0F12` | | padding | `10px 18px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `-0.005em` | | shadow | `0 1px 2px rgba(14, 15, 18, 0.06)` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#FFFFFF` | | color | `#0E0F12` | | border | `1px solid rgba(14, 15, 18, 0.14)` | | padding | `10px 18px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `-0.005em` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#0E0F12` | | border | `1px dashed rgba(14, 15, 18, 0.30)` | | padding | `10px 18px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `-0.005em` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#7C5CFA` | | border | `none` | | padding | `10px 4px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `-0.005em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1` | | gridlines | `true` | | barRadius | `0px` | | barGap | `6px` | | highlight | `single` | | axisColor | `#5A6068` | | palette | `#7C5CFA` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 4px 12px -2px rgba(15,23,42,0.18)`, filter: `brightness(0.97)` - **focus** — outline: `2px solid rgba(144, 151, 160, 0.5)`, outline-offset: `2px` - **active** — shadow: `0 1px 2px rgba(15,23,42,0.1)`, transform: `scale(0.98)` - **disabled** — opacity: `0.4`, filter: `saturate(0.5)` - **loading** — opacity: `0.7` - **selected** — bg: `#9097A0`, color: `#FFFFFF` #### Input - **hover** — border: `1px solid rgba(144, 151, 160, 0.5)` - **focus** — border: `1.5px solid #9097A0`, shadow: `0 0 0 4px rgba(144, 151, 160, 0.15)` - **disabled** — bg: `rgba(14, 15, 18, 0.04)`, opacity: `0.4` - **error** — border: `1.5px solid #DC2626`, shadow: `0 0 0 4px rgba(220,38,38,0.15)` #### Card - **hover** — shadow: `0 12px 28px -12px rgba(15,23,42,0.18)`, transform: `translateY(-2px)` - **selected** — bg: `rgba(144, 151, 160, 0.04)`, border: `1.5px solid #9097A0` - **dragging** — shadow: `0 20px 48px -16px rgba(15,23,42,0.3)`, transform: `scale(1.02) rotate(-0.5deg)`, opacity: `0.9` #### Tab - **hover** — bg: `rgba(144, 151, 160, 0.06)`, color: `#9097A0` - **focus** — outline: `2px solid rgba(144, 151, 160, 0.5)`, outline-offset: `2px` - **selected** — color: `#9097A0`, border: `0 0 2px 0 solid #9097A0` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Quiet ease.** 240 ms ease-out for all standard transitions. Reliable, invisible — motion stays out of the way. ```css transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `160ms` | | duration.base | `240ms` | | duration.slow | `380ms` | | easing.standard | `cubic-bezier(0.4, 0, 0.2, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.34, 1.4, 0.64, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — hairline border separates. | | level1 | `0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04)` | List rows, resting cards. | | level2 | `0 4px 12px -2px rgba(15,23,42,0.1), 0 2px 6px rgba(15,23,42,0.06)` | Hover cards, popover. | | level3 | `0 12px 32px -8px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.08)` | Sheets, side panels. | | level4 | `0 28px 64px -16px rgba(15,23,42,0.28), 0 8px 24px rgba(15,23,42,0.12)` | Modals — scrim required. | ### Content - **measure:** `68ch` (max line length for body prose) - **paragraph spacing:** `1.2em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#9097A0`, underline `hover` - **blockquote:** border `3px solid rgba(144, 151, 160, 0.6)`, padding `0.5em 0 0.5em 1.25em` - **code:** background `rgba(14, 15, 18, 0.06)`, color `#0E0F12` ### Accessibility (WCAG 2.1) **Overall:** FAIL | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 19.17:1 | AA | AAA | — | | Body text on canvas | 17.86:1 | AA | AAA | — | | Muted text on surface | 6.35:1 | AA | AA | — | | Accent on surface | 2.95:1 | AA-Large | FAIL | `#6b737d` → 4.8:1 (AA) | | Accent on canvas | 2.75:1 | AA-Large | FAIL | `#676e78` → 4.8:1 (AA) | --- # SYSTEM: Vellum Quiet Source: https://www.freedesignmd.com/system/vellum-quiet --- name: "Vellum Quiet" description: "Warm vellum paper canvas, humanist sans at quiet sizes, refined 6px corners, no shadows — only a faint warm hairline. One deep moss accent. Calibrated to feel like a well-set page in a notebook." tags: [minimal, paper, warm, premium, writing] colors: primary: "#1F1B14" secondary: "#7A7264" tertiary: "#A89F90" neutral: "#F4EEDF" surface: "#FBF7EB" typography: display: "Inter Tight" body: Inter mono: "JetBrains Mono" scale: hero: "4rem / 1.08 / 500 / -0.03em" h1: "2.375rem / 1.12 / 500 / -0.025em" h2: "1.375rem / 1.35 / 500 / -0.012em" body: "1.0625rem / 1.7 / 400 / -0.003em" radius: sm: 4px md: 6px lg: 8px shadows: card: "0 0 0 1px rgba(31, 27, 20, 0.08)" button: none borders: card: "1px solid rgba(31, 27, 20, 0.08)" divider: "rgba(31, 27, 20, 0.12)" buttons: primary: background: #3E5A3A color: #FBF7EB border: 1px solid #3E5A3A shape: rounded padding: 12px 22px font: 500 / 0.9375rem / -0.005em secondary: background: #FBF7EB color: #1F1B14 border: 1px solid rgba(31, 27, 20, 0.16) shape: rounded padding: 12px 22px font: 500 / 0.9375rem / -0.005em outline: background: transparent color: #1F1B14 border: 1px solid rgba(31, 27, 20, 0.20) shape: rounded padding: 11px 21px font: 500 / 0.9375rem / -0.005em ghost: background: transparent color: #7A7264 border: none shape: rounded padding: 11px 4px font: 500 / 0.9375rem / -0.005em hover: underline charts: variant: line stroke_width: 1.5 gridlines: false highlight: last dot_marker: true axis_color: "#7A7264" palette: ["#3E5A3A"] fonts_url: "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Vellum Quiet ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Vellum Quiet** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#3E5A3A`, text `#FBF7EB`, border `1px solid #3E5A3A`, padding `12px 22px`, weight `500`. - **Secondary** — rounded shape, bg `#FBF7EB`, text `#1F1B14`, border `1px solid rgba(31, 27, 20, 0.16)`, padding `12px 22px`, weight `500`. - **Outline** — rounded shape, text `#1F1B14`, border `1px solid rgba(31, 27, 20, 0.20)`, padding `11px 21px`, weight `500`. - **Ghost** — rounded shape, text `#7A7264`, padding `11px 4px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FBF7EB` - Border: `1px solid rgba(31, 27, 20, 0.08)` - Shadow: `0 0 0 1px rgba(31, 27, 20, 0.08)` - Radius: `radius.lg` (`8px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `line` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#3E5A3A`. #### Typography pairings - **Display (`Inter Tight`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Vellum Quiet is calibrated to feel like a well-set page in a notebook. The canvas is warm vellum (distinctly not-white). Type is one humanist sans (Inter Tight) used at refined, restrained sizes — the hero stops at 4rem rather than pushing to 7-8rem. There are no shadows; depth comes from a single warm hairline. One deep moss-green accent does the entire chromatic work. For writing apps, indie publishers, slow-content platforms, knowledge tools, anything that should feel considered and quiet rather than clamoring for attention. ## Color - **Ink #1F1B14** — primary text. Deep ink with a warm bias so it sits on vellum naturally. - **Warm graphite #7A7264** — secondary text. - **Soft graphite #A89F90** — captions, axis labels. - **Vellum #F4EEDF** — page canvas. Warm paper, distinctly not-white. - **Surface #FBF7EB** — card surface, a notch lighter and warmer than canvas. - **Moss #3E5A3A** — the only chromatic accent. Primary CTA, links, chart line. The accent is a deep, slightly desaturated moss — not bright, not olive. It sits in the warm-paper world without breaking it. ## Typography **Inter Tight for display, Inter for body.** Same family lineage, different optical sizes. | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | Inter Tight | 4rem | 500 | -0.03em | | H1 | Inter Tight | 2.375rem | 500 | -0.025em | | H2 | Inter Tight | 1.375rem | 500 | -0.012em | | Body | Inter | 1.0625rem | 400 | -0.003em / 1.7 | The whole system runs at weight 500 for display — never 600 or 700. The restraint is the brand. ## Geometry - **Radii: 4 / 6 / 8.** Refined, neither sharp nor soft. - **No shadows.** A 1px ink hairline at 8% opacity is the only depth signal. - **Section gap: 112px** desktop, 72px mobile. - **12-column grid** with 24px gutters. ## Buttons - **Primary** — solid moss green, vellum label. - **Secondary** — surface vellum, ink label, warm hairline at 16% opacity. - **Outline** — bare hairline at 20% opacity. - **Ghost** — bare warm-graphite label, hover underline. All buttons sit at 12px / 22px padding with 6px corners. The button is small and considered — never a CTA shouting for clicks. ## Cards Surface vellum on canvas, 1px ink hairline at 8% opacity, 6px corners, **no shadow**. Padding 28-32px. The card depth comes from the hairline alone. ## Charts & Data Single moss-green line at 1.5px stroke, no gridlines, end-of-line dot marker. Axis labels in soft graphite at 11px Inter. The chart reads as a notation, not a marketing graphic. ## Do's and Don'ts - ✅ Vellum canvas, never pure white. The warmth is the system. - ✅ Hero stops at 4rem. The system never shouts. - ✅ Display weight 500, never higher. - ✅ One chromatic accent — moss. Used sparingly. - ❌ No drop shadows. Hairline is the only depth. - ❌ No second chromatic accent. Moss stands alone. - ❌ No oversized type. The whole identity rests on restraint. - ❌ No pill buttons. Refined 6px corners only. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1F1B14` | | secondary | `#7A7264` | | tertiary | `#A89F90` | | neutral | `#F4EEDF` | | surface | `#FBF7EB` | ### Typography - **Display:** Inter Tight - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4rem / 1.08 / 500 / -0.03em | | H1 | 2.375rem / 1.12 / 500 / -0.025em | | H2 | 1.375rem / 1.35 / 500 / -0.012em | | Body | 1.0625rem / 1.7 / 400 / -0.003em | ### Radius - sm: `4px` - md: `6px` - lg: `8px` ### Shadows - **card:** `0 0 0 1px rgba(31, 27, 20, 0.08)` - **button:** `none` ### Borders - **card:** `1px solid rgba(31, 27, 20, 0.08)` - **divider:** `rgba(31, 27, 20, 0.12)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#3E5A3A` | | color | `#FBF7EB` | | border | `1px solid #3E5A3A` | | padding | `12px 22px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#FBF7EB` | | color | `#1F1B14` | | border | `1px solid rgba(31, 27, 20, 0.16)` | | padding | `12px 22px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#1F1B14` | | border | `1px solid rgba(31, 27, 20, 0.20)` | | padding | `11px 21px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#7A7264` | | border | `none` | | padding | `11px 4px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `line` | | strokeWidth | `1.5` | | gridlines | `false` | | highlight | `last` | | dotMarker | `true` | | axisColor | `#7A7264` | | palette | `#3E5A3A` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 4px 12px -2px rgba(15,23,42,0.18)`, filter: `brightness(0.97)` - **focus** — outline: `2px solid rgba(168, 159, 144, 0.5)`, outline-offset: `2px` - **active** — shadow: `0 1px 2px rgba(15,23,42,0.1)`, transform: `scale(0.98)` - **disabled** — opacity: `0.4`, filter: `saturate(0.5)` - **loading** — opacity: `0.7` - **selected** — bg: `#A89F90`, color: `#FBF7EB` #### Input - **hover** — border: `1px solid rgba(168, 159, 144, 0.5)` - **focus** — border: `1.5px solid #A89F90`, shadow: `0 0 0 4px rgba(168, 159, 144, 0.15)` - **disabled** — bg: `rgba(31, 27, 20, 0.04)`, opacity: `0.4` - **error** — border: `1.5px solid #DC2626`, shadow: `0 0 0 4px rgba(220,38,38,0.15)` #### Card - **hover** — shadow: `0 12px 28px -12px rgba(15,23,42,0.18)`, transform: `translateY(-2px)` - **selected** — bg: `rgba(168, 159, 144, 0.04)`, border: `1.5px solid #A89F90` - **dragging** — shadow: `0 20px 48px -16px rgba(15,23,42,0.3)`, transform: `scale(1.02) rotate(-0.5deg)`, opacity: `0.9` #### Tab - **hover** — bg: `rgba(168, 159, 144, 0.06)`, color: `#A89F90` - **focus** — outline: `2px solid rgba(168, 159, 144, 0.5)`, outline-offset: `2px` - **selected** — color: `#A89F90`, border: `0 0 2px 0 solid #A89F90` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Quiet ease.** 240 ms ease-out for all standard transitions. Reliable, invisible — motion stays out of the way. ```css transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `160ms` | | duration.base | `240ms` | | duration.slow | `380ms` | | easing.standard | `cubic-bezier(0.4, 0, 0.2, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.34, 1.4, 0.64, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — hairline border separates. | | level1 | `0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04)` | List rows, resting cards. | | level2 | `0 4px 12px -2px rgba(15,23,42,0.1), 0 2px 6px rgba(15,23,42,0.06)` | Hover cards, popover. | | level3 | `0 12px 32px -8px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.08)` | Sheets, side panels. | | level4 | `0 28px 64px -16px rgba(15,23,42,0.28), 0 8px 24px rgba(15,23,42,0.12)` | Modals — scrim required. | ### Content - **measure:** `68ch` (max line length for body prose) - **paragraph spacing:** `1.2em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#A89F90`, underline `hover` - **blockquote:** border `3px solid rgba(168, 159, 144, 0.6)`, padding `0.5em 0 0.5em 1.25em` - **code:** background `rgba(31, 27, 20, 0.06)`, color `#1F1B14` ### Accessibility (WCAG 2.1) **Overall:** FAIL | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 16:1 | AA | AAA | — | | Body text on canvas | 14.81:1 | AA | AAA | — | | Muted text on surface | 4.44:1 | AA | AA-Large | `#746d5f` → 4.79:1 (AA) | | Accent on surface | 2.44:1 | AA-Large | FAIL | `#766c5c` → 4.82:1 (AA) | | Accent on canvas | 2.26:1 | AA-Large | FAIL | `#706758` → 4.81:1 (AA) | --- # SYSTEM: Linnea Serif Source: https://www.freedesignmd.com/system/linnea-serif --- name: "Linnea Serif" description: "Ultra-minimal modern serif. Pure off-white canvas, Fraunces variable serif tuned for warmth and optical size, one slate-blue accent. No shadows, no gradients — the serif itself is the system." tags: [minimal, serif, premium, modern, editorial] colors: primary: "#16181D" secondary: "#5E6470" tertiary: "#9097A0" neutral: "#F5F5F2" surface: "#FFFFFF" typography: display: Fraunces body: Inter mono: "JetBrains Mono" scale: hero: "4.5rem / 1.05 / 400 / -0.025em" h1: "2.625rem / 1.1 / 400 / -0.022em" h2: "1.5rem / 1.3 / 500 / -0.012em" body: "1.0625rem / 1.7 / 400 / -0.003em" radius: sm: 8px md: 12px lg: 16px pill: 9999px shadows: card: "0 0 0 1px rgba(22, 24, 29, 0.07)" button: none borders: card: "1px solid rgba(22, 24, 29, 0.07)" divider: "rgba(22, 24, 29, 0.10)" buttons: primary: background: #3C4B6B color: #F5F5F2 border: 1px solid #3C4B6B shape: rounded padding: 12px 24px font: 500 / 0.9375rem / -0.005em secondary: background: #FFFFFF color: #16181D border: 1px solid rgba(22, 24, 29, 0.14) shape: rounded padding: 12px 24px font: 500 / 0.9375rem / -0.005em outline: background: transparent color: #16181D border: 1px solid rgba(22, 24, 29, 0.18) shape: rounded padding: 11px 23px font: 500 / 0.9375rem / -0.005em ghost: background: transparent color: #3C4B6B border: none shape: rounded padding: 11px 4px font: 500 / 0.9375rem / -0.005em hover: underline charts: variant: line stroke_width: 1.5 gridlines: false highlight: last dot_marker: true axis_color: "#5E6470" palette: ["#3C4B6B"] fonts_url: "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Linnea Serif ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Linnea Serif** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#3C4B6B`, text `#F5F5F2`, border `1px solid #3C4B6B`, padding `12px 24px`, weight `500`. - **Secondary** — rounded shape, bg `#FFFFFF`, text `#16181D`, border `1px solid rgba(22, 24, 29, 0.14)`, padding `12px 24px`, weight `500`. - **Outline** — rounded shape, text `#16181D`, border `1px solid rgba(22, 24, 29, 0.18)`, padding `11px 23px`, weight `500`. - **Ghost** — rounded shape, text `#3C4B6B`, padding `11px 4px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FFFFFF` - Border: `1px solid rgba(22, 24, 29, 0.07)` - Shadow: `0 0 0 1px rgba(22, 24, 29, 0.07)` - Radius: `radius.lg` (`16px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `line` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#3C4B6B`. #### Typography pairings - **Display (`Fraunces`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Linnea Serif is reduced to its barest elements. Pure cool off-white canvas. One variable serif — **Fraunces** — tuned for warmth via its optical-size and soft axes. One slate-blue accent. No shadows, no gradients, no decoration. The serif itself, with its optical contrast and humanist warmth, is the entire system. For literary brands, premium SaaS that wants character without ornamentation, design journals, considered editorial sites. ## Color - **Ink #16181D** — primary text. Faint cool bias to sit naturally on the cool off-white. - **Mid Graphite #5E6470** — secondary text, axis labels. - **Soft Graphite #9097A0** — tertiary text, dividers. - **Off-white #F5F5F2** — page canvas. Distinctly not warm, distinctly not pure white. - **Paper #FFFFFF** — card surface, one notch above the canvas. - **Slate Blue #3C4B6B** — the only chromatic accent. Primary CTA, links, chart line. The slate-blue is intentionally low-chroma — it sits in the cool off-white world without breaking it. ## Typography **Fraunces is the entire system.** Variable axes give it character without needing a second display family. | Role | Font | Size | Weight | Tracking | opsz | SOFT | |------|------|------|--------|----------|------|------| | Hero | Fraunces | 4.5rem | 400 | -0.025em | 144 | 100 | | H1 | Fraunces | 2.625rem | 400 | -0.022em | 96 | 80 | | H2 | Fraunces | 1.5rem | 500 | -0.012em | 36 | 50 | | Body | Inter | 1.0625rem | 400 | -0.003em / 1.7 | — | — | The hero uses Fraunces at the maximum 144 optical size with SOFT 100 — the letterforms become large, warm, and visibly humanist. Smaller sizes step the optical-size down so the serif stays crisp. ```css .linnea-hero { font-family: "Fraunces", serif; font-size: 4.5rem; font-weight: 400; letter-spacing: -0.025em; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0; } ``` ## Geometry - **Radii: 8 / 12 / 16, plus pill.** Soft modern. Never sharp. - **No shadows.** A 1px ink hairline at 7% opacity is the only depth signal. - **Section gap: 128px** desktop, 80px mobile. - **12-column grid** with 28px gutters. ## Buttons - **Primary** — solid slate-blue, off-white label. - **Secondary** — surface paper, ink label, ink hairline at 14%. - **Outline** — bare ink hairline at 18%. - **Ghost** — bare slate-blue label, hover underline. All buttons sit at 12px / 24px padding with 12px corners. Quiet and considered. ## Cards Surface paper on off-white, 1px ink hairline at 7% opacity, 12px corners, **no drop shadow**. Padding 32px. The hairline is the entire structure. ## Charts & Data Single slate-blue line at 1.5px stroke, no gridlines, end-of-line dot marker. Axis labels in mid-graphite Inter at 11px. The chart is a notation, not a visualization. ## Do's and Don'ts - ✅ Fraunces with variable axes (opsz + SOFT). The variable-axis tuning IS the system. - ✅ Display weight 400. Bold breaks the serif's warmth. - ✅ Cool off-white canvas. Never pure white, never warm bone. - ✅ One chromatic accent — slate blue. Used sparingly. - ❌ No drop shadows. Hairline only. - ❌ No second display font. - ❌ No bold weight. The serif speaks at 400. - ❌ No oversized hero. Restraint is the brand. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#16181D` | | secondary | `#5E6470` | | tertiary | `#9097A0` | | neutral | `#F5F5F2` | | surface | `#FFFFFF` | ### Typography - **Display:** Fraunces - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.5rem / 1.05 / 400 / -0.025em | | H1 | 2.625rem / 1.1 / 400 / -0.022em | | H2 | 1.5rem / 1.3 / 500 / -0.012em | | Body | 1.0625rem / 1.7 / 400 / -0.003em | ### Radius - sm: `8px` - md: `12px` - lg: `16px` - pill: `9999px` ### Shadows - **card:** `0 0 0 1px rgba(22, 24, 29, 0.07)` - **button:** `none` ### Borders - **card:** `1px solid rgba(22, 24, 29, 0.07)` - **divider:** `rgba(22, 24, 29, 0.10)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#3C4B6B` | | color | `#F5F5F2` | | border | `1px solid #3C4B6B` | | padding | `12px 24px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#FFFFFF` | | color | `#16181D` | | border | `1px solid rgba(22, 24, 29, 0.14)` | | padding | `12px 24px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#16181D` | | border | `1px solid rgba(22, 24, 29, 0.18)` | | padding | `11px 23px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#3C4B6B` | | border | `none` | | padding | `11px 4px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `line` | | strokeWidth | `1.5` | | gridlines | `false` | | highlight | `last` | | dotMarker | `true` | | axisColor | `#5E6470` | | palette | `#3C4B6B` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(144, 151, 160, 0.92)`, shadow: `0 4px 20px -8px rgba(144, 151, 160, 0.4)` - **focus** — outline: `1.5px solid #9097A0`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#16181D`, color: `#FFFFFF` #### Input - **hover** — border: `1px solid #16181D` - **focus** — border: `1px solid #9097A0`, shadow: `0 1px 0 0 #9097A0` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #16181D` #### Tab - **hover** — color: `#16181D` - **focus** — outline: `1.5px solid #9097A0`, outline-offset: `3px` - **selected** — color: `#9097A0`, border: `0 0 2px 0 solid #9097A0` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#9097A0`, underline `always` - **blockquote:** border `4px solid #9097A0`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(22, 24, 29, 0.06)`, color `#16181D` ### Accessibility (WCAG 2.1) **Overall:** FAIL | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 17.76:1 | AA | AAA | — | | Body text on canvas | 16.26:1 | AA | AAA | — | | Muted text on surface | 5.94:1 | AA | AA | — | | Accent on surface | 2.95:1 | AA-Large | FAIL | `#6b737d` → 4.8:1 (AA) | | Accent on canvas | 2.7:1 | AA-Large | FAIL | `#676e78` → 4.71:1 (AA) | --- # SYSTEM: Dune Glass Source: https://www.freedesignmd.com/system/dune-glass --- name: "Dune Glass" description: "Mid-tone soft glass. Warm dusty-sand canvas with a peach-and-rose aurora behind; cards float as cream-tinted frosted panes with 26px backdrop-blur and a faint inset top highlight. The mid-tone is the system." tags: [glass, warm, premium, minimal, modern] colors: primary: "#1F1A18" secondary: "#7A6E66" tertiary: "#C46B6B" neutral: "#D8C9B8" surface: "#EFE4D5" typography: display: "Inter Tight" body: Inter mono: "JetBrains Mono" scale: hero: "4.5rem / 1.05 / 600 / -0.035em" h1: "2.625rem / 1.1 / 600 / -0.028em" h2: "1.5rem / 1.3 / 600 / -0.015em" body: "1rem / 1.65 / 400 / -0.005em" radius: sm: 14px md: 20px lg: 26px pill: 9999px shadows: card: "0 28px 64px -28px rgba(74, 50, 38, 0.22), 0 2px 8px -4px rgba(74, 50, 38, 0.08)" button: "0 10px 28px -14px rgba(196, 107, 107, 0.50), inset 0 1px 0 rgba(255, 230, 220, 0.40)" borders: card: "1px solid rgba(255, 248, 238, 0.65)" divider: "rgba(31, 26, 24, 0.10)" glass: surface: "rgba(255, 248, 238, 0.55)" blur: 26px saturate: 150% border: "1px solid rgba(255, 248, 238, 0.65)" shadow: "0 28px 64px -28px rgba(74, 50, 38, 0.22), 0 2px 8px -4px rgba(74, 50, 38, 0.08)" inner_highlight: "inset 0 1px 0 rgba(255, 248, 238, 0.85)" backdrop: "radial-gradient(at 14% 16%, rgba(255, 200, 180, 0.55) 0px, transparent 45%), radial-gradient(at 84% 18%, rgba(255, 175, 175, 0.45) 0px, transparent 50%), radial-gradient(at 78% 88%, rgba(245, 220, 195, 0.50) 0px, transparent 55%)" buttons: primary: background: linear-gradient(180deg, #D88585 0%, #B85858 100%) color: #FFF8EE border: 1px solid rgba(255, 248, 238, 0.22) shape: pill padding: 12px 24px font: 600 / 0.9375rem / -0.005em shadow: 0 10px 28px -14px rgba(196, 107, 107, 0.55), inset 0 1px 0 rgba(255, 248, 238, 0.40) secondary: background: rgba(255, 248, 238, 0.55) color: #1F1A18 border: 1px solid rgba(255, 248, 238, 0.70) shape: pill padding: 12px 24px font: 500 / 0.9375rem / -0.005em backdrop_blur: 20px backdrop_saturate: 150% outline: background: transparent color: #1F1A18 border: 1px solid rgba(31, 26, 24, 0.22) shape: pill padding: 11px 22px font: 500 / 0.9375rem / -0.005em ghost: background: transparent color: #7A6E66 border: none shape: pill padding: 11px 6px font: 500 / 0.9375rem / -0.005em hover: underline charts: variant: area stroke_width: 2 fill_opacity: 0.2 gridlines: false highlight: last dot_marker: true axis_color: "#7A6E66" palette: ["#C46B6B", "#D89090", "#E8B8B8"] fonts_url: "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Dune Glass ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Dune Glass** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — pill shape, bg `linear-gradient(180deg, #D88585 0%, #B85858 100%)`, text `#FFF8EE`, border `1px solid rgba(255, 248, 238, 0.22)`, padding `12px 24px`, weight `600`, shadow `0 10px 28px -14px rgba(196, 107, 107, 0.55), inset 0 1px 0 rgba(255, 248, 238, 0.40)`. - **Secondary** — pill shape, bg `rgba(255, 248, 238, 0.55)`, text `#1F1A18`, border `1px solid rgba(255, 248, 238, 0.70)`, padding `12px 24px`, weight `500`. - **Outline** — pill shape, text `#1F1A18`, border `1px solid rgba(31, 26, 24, 0.22)`, padding `11px 22px`, weight `500`. - **Ghost** — pill shape, text `#7A6E66`, padding `11px 6px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#EFE4D5` - Border: `1px solid rgba(255, 248, 238, 0.65)` - Shadow: `0 28px 64px -28px rgba(74, 50, 38, 0.22), 0 2px 8px -4px rgba(74, 50, 38, 0.08)` - Radius: `radius.lg` (`26px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. > This system ships a **glass treatment** — see the Glass token table. > Apply `backdrop-filter: blur(26px)` to translucent panes. > The page must have a backdrop (gradient mesh / blurred orbs) for glass to refract. #### Charts - Bar/line variant: `area` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#C46B6B`, `#D89090`, `#E8B8B8`. #### Typography pairings - **Display (`Inter Tight`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Dune Glass is the third register of glass — neither cool light nor dark indigo, but a warm dusty-sand mid-tone. The page sits on dusty sand with a soft aurora behind it: peach, rose, cream — three warm radial blobs. Cards float above as cream-tinted frosted panes: 26px backdrop-blur, 55% cream surface, 1px cream-alpha hairline, faint inset top highlight. The mid-tone canvas is the system's differentiator. For wellness brands, hospitality, lifestyle apps, anything that wants the depth of glass without going to either extreme of light or dark. ## The Glass Recipe Cards are warm cream glass over a dusty-warm canvas: ```css .dune-pane { background: rgba(255, 248, 238, 0.55); backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%); border: 1px solid rgba(255, 248, 238, 0.65); box-shadow: inset 0 1px 0 rgba(255, 248, 238, 0.85), 0 28px 64px -28px rgba(74, 50, 38, 0.22), 0 2px 8px -4px rgba(74, 50, 38, 0.08); border-radius: 26px; } ``` The page MUST have the warm aurora for the glass to mean anything: ```css body { background: radial-gradient(at 14% 16%, rgba(255,200,180,0.55) 0, transparent 45%), radial-gradient(at 84% 18%, rgba(255,175,175,0.45) 0, transparent 50%), radial-gradient(at 78% 88%, rgba(245,220,195,0.50) 0, transparent 55%), #D8C9B8; } ``` The dusty-sand base is non-negotiable — it is what makes this system distinct from cool light glass. ## Color - **Ink #1F1A18** — primary text. Warm bias to sit on the dusty canvas. - **Warm graphite #7A6E66** — secondary text, axis labels. - **Soft rose #C46B6B** — the only chromatic accent. Sits inside the aurora family. - **Dusty sand #D8C9B8** — page canvas. Mid-tone warm. - **Cream #FFF8EE @ 55%** — card surface (translucent over the aurora). The aurora uses three soft warm tints — peach, rose, cream. Never anything cool. ## Typography - **Display: Inter Tight 600** at 4.5rem with -3.5% tracking. - **Body: Inter 400** at 1rem with 1.65 leading. | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | Inter Tight | 4.5rem | 600 | -0.035em | | H1 | Inter Tight | 2.625rem | 600 | -0.028em | | H2 | Inter Tight | 1.5rem | 600 | -0.015em | | Body | Inter | 1rem | 400 | -0.005em / 1.65 | ## Geometry - **Radii: 14 / 20 / 26.** Generous corners — glass at sharp corners reads as plastic. - **Pill buttons** for primary + secondary. - **Section gap: 120px** desktop, 72px mobile. The aurora needs room. ## Buttons - **Primary** — vertical soft-rose gradient with inner top-edge gloss. Pill shape. Warm CTA on warm canvas. - **Secondary** — cream-tinted frosted glass pill (the same recipe as cards, scaled down). - **Outline** — bare ink hairline pill at 22%. - **Ghost** — bare warm-graphite label, hover underline. ## Cards Cream-tinted frosted glass panes — see the recipe above. Radius 26px. Padding 32px minimum. Cards never sit flush; always 24-32px gap so the aurora reads between them. ## Charts & Data Soft-rose area chart at 2px stroke and 20% fill opacity, no gridlines, end-of-line dot marker. The chart sits inside a glass card so the page aurora stays in the background. ## Do's and Don'ts - ✅ The dusty-sand canvas + warm aurora is mandatory. Without it the glass dies. - ✅ Cream-tinted glass surface (#FFF8EE @ 55%), never neutral white-translucent. - ✅ Cards always include the inner top-edge highlight — that's what reads as a polished pane. - ✅ One chromatic accent — soft rose. Sits inside the aurora's color family. - ❌ No cool tints. The system is strictly warm. - ❌ No solid cards. If a card isn't cream-glass, it's not in the system. - ❌ No light or dark canvas — the mid-tone dusty sand is the entire differentiator. - ❌ No second chromatic accent. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1F1A18` | | secondary | `#7A6E66` | | tertiary | `#C46B6B` | | neutral | `#D8C9B8` | | surface | `#EFE4D5` | ### Typography - **Display:** Inter Tight - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.5rem / 1.05 / 600 / -0.035em | | H1 | 2.625rem / 1.1 / 600 / -0.028em | | H2 | 1.5rem / 1.3 / 600 / -0.015em | | Body | 1rem / 1.65 / 400 / -0.005em | ### Radius - sm: `14px` - md: `20px` - lg: `26px` - pill: `9999px` ### Shadows - **card:** `0 28px 64px -28px rgba(74, 50, 38, 0.22), 0 2px 8px -4px rgba(74, 50, 38, 0.08)` - **button:** `0 10px 28px -14px rgba(196, 107, 107, 0.50), inset 0 1px 0 rgba(255, 230, 220, 0.40)` ### Borders - **card:** `1px solid rgba(255, 248, 238, 0.65)` - **divider:** `rgba(31, 26, 24, 0.10)` ### Glass Translucent panes with backdrop-filter — the preview renders cards from these exact values. | Property | Value | |----------|-------| | surface | `rgba(255, 248, 238, 0.55)` | | blur | `26px` | | saturate | `150%` | | border | `1px solid rgba(255, 248, 238, 0.65)` | | shadow | `0 28px 64px -28px rgba(74, 50, 38, 0.22), 0 2px 8px -4px rgba(74, 50, 38, 0.08)` | | innerHighlight | `inset 0 1px 0 rgba(255, 248, 238, 0.85)` | | backdrop | `radial-gradient(at 14% 16%, rgba(255, 200, 180, 0.55) 0px, transparent 45%), radial-gradient(at 84% 18%, rgba(255, 175, 175, 0.45) 0px, transparent 50%), radial-gradient(at 78% 88%, rgba(245, 220, 195, 0.50) 0px, transparent 55%)` | ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `pill` | | background | `linear-gradient(180deg, #D88585 0%, #B85858 100%)` | | color | `#FFF8EE` | | border | `1px solid rgba(255, 248, 238, 0.22)` | | padding | `12px 24px` | | fontWeight | `600` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | shadow | `0 10px 28px -14px rgba(196, 107, 107, 0.55), inset 0 1px 0 rgba(255, 248, 238, 0.40)` | #### Secondary | Property | Value | |----------|-------| | shape | `pill` | | background | `rgba(255, 248, 238, 0.55)` | | color | `#1F1A18` | | border | `1px solid rgba(255, 248, 238, 0.70)` | | padding | `12px 24px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | backdropBlur | `20px` | | backdropSaturate | `150%` | #### Outline | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#1F1A18` | | border | `1px solid rgba(31, 26, 24, 0.22)` | | padding | `11px 22px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Ghost | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#7A6E66` | | border | `none` | | padding | `11px 6px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `area` | | strokeWidth | `2` | | fillOpacity | `0.2` | | gridlines | `false` | | highlight | `last` | | dotMarker | `true` | | axisColor | `#7A6E66` | | palette | `#C46B6B`, `#D89090`, `#E8B8B8` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 8px 24px -8px rgba(196, 107, 107, 0.35), inset 0 1px 0 rgba(255,255,255,0.18)`, transform: `translateY(-1px)`, filter: `saturate(1.15)` - **focus** — outline: `2px solid rgba(196, 107, 107, 0.5)`, outline-offset: `3px` - **active** — transform: `translateY(0) scale(0.98)`, filter: `brightness(0.96)` - **disabled** — opacity: `0.4`, filter: `saturate(0.4) blur(0.4px)` - **loading** — opacity: `0.7` - **selected** — bg: `rgba(196, 107, 107, 0.18)`, color: `#C46B6B` #### Input - **hover** — border: `1px solid rgba(196, 107, 107, 0.4)`, shadow: `inset 0 1px 0 rgba(255,255,255,0.18)` - **focus** — border: `1px solid rgba(196, 107, 107, 0.65)`, shadow: `0 0 0 4px rgba(196, 107, 107, 0.15), inset 0 1px 0 rgba(255,255,255,0.18)` - **disabled** — opacity: `0.4` - **error** — border: `1px solid rgba(248,113,113,0.7)`, shadow: `0 0 0 4px rgba(248,113,113,0.15)` #### Card - **hover** — shadow: `0 16px 48px -16px rgba(196, 107, 107, 0.25), inset 0 1px 0 rgba(255,255,255,0.18)`, transform: `translateY(-2px)`, filter: `saturate(1.1)` - **selected** — border: `1px solid rgba(196, 107, 107, 0.5)` - **dragging** — shadow: `0 24px 64px -16px rgba(0,0,0,0.4)`, transform: `scale(1.02)`, opacity: `0.85` #### Tab - **hover** — bg: `rgba(196, 107, 107, 0.08)` - **focus** — outline: `2px solid rgba(196, 107, 107, 0.5)`, outline-offset: `2px` - **selected** — bg: `rgba(196, 107, 107, 0.18)`, color: `#C46B6B` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Refract.** Long opacity- and blur-driven transitions. Not a hard move, but a shift of light across the glass surface. ```css transition: opacity 350ms cubic-bezier(0.32, 0.72, 0, 1), backdrop-filter 350ms cubic-bezier(0.32, 0.72, 0, 1), transform 350ms cubic-bezier(0.32, 0.72, 0, 1); ``` | Token | Value | |-------|-------| | duration.instant | `100ms` | | duration.fast | `200ms` | | duration.base | `350ms` | | duration.slow | `550ms` | | easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.34, 1.2, 0.64, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `inset 0 1px 0 rgba(255,255,255,0.18)` | Flat glass surface — top-edge gloss only. | | level1 | `0 2px 8px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Soft lift + top-edge gloss. | | level2 | `0 12px 32px -8px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255,255,255,0.18)` | Floating pane — popover. | | level3 | `0 24px 64px -16px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(196, 107, 107, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Sheet — accent rim for depth. | | level4 | `0 40px 96px -24px rgba(15, 23, 42, 0.5), 0 0 48px -12px rgba(196, 107, 107, 0.25), inset 0 1px 0 rgba(255,255,255,0.18)` | Modal — dramatic glow, scrim required. | ### Content - **measure:** `66ch` (max line length for body prose) - **paragraph spacing:** `1.25em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#C46B6B`, underline `hover` - **blockquote:** border `1px solid rgba(196, 107, 107, 0.4)`, padding `0.9em 1.2em` - **code:** background `rgba(196, 107, 107, 0.1)`, color `#C46B6B` ### Accessibility (WCAG 2.1) **Overall:** FAIL | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 13.72:1 | AA | AAA | — | | Body text on canvas | 10.64:1 | AA | AAA | — | | Muted text on surface | 3.94:1 | AA | AA-Large | `#6f645d` → 4.57:1 (AA) | | Accent on surface | 2.95:1 | AA-Large | FAIL | `#ad4545` → 4.5:1 (AA) | | Accent on canvas | 2.29:1 | AA-Large | FAIL | `#903939` → 4.58:1 (AA) | --- # SYSTEM: Cirrus Pane Source: https://www.freedesignmd.com/system/cirrus-pane --- name: "Cirrus Pane" description: "Cool soft-glass system on a pale icy-blue canvas. True frosted cards at 18% white with 28px backdrop-blur, 160% saturate, 1px white hairline, inner top-edge gloss. One restrained slate-blue accent." tags: [glass, soft, cool, premium, minimal] colors: primary: "#3F5878" secondary: "#42505E" tertiary: "#7A8696" neutral: "#E8EEF4" surface: "#FFFFFF" typography: display: Manrope body: Manrope mono: "JetBrains Mono" scale: hero: "4.25rem / 1.06 / 600 / -0.034em" h1: "2.5rem / 1.12 / 600 / -0.026em" h2: "1.5rem / 1.3 / 600 / -0.014em" body: "1rem / 1.65 / 400 / -0.003em" radius: sm: 14px md: 20px lg: 28px pill: 9999px shadows: card: "0 24px 60px -28px rgba(40, 60, 90, 0.22), 0 2px 6px rgba(40, 60, 90, 0.06)" button: "0 8px 20px -10px rgba(63, 88, 120, 0.45)" borders: card: "1px solid rgba(255, 255, 255, 0.6)" divider: "rgba(63, 88, 120, 0.12)" glass: surface: "rgba(255, 255, 255, 0.18)" blur: 28px saturate: 160% border: "1px solid rgba(255, 255, 255, 0.55)" shadow: "0 24px 60px -28px rgba(40, 60, 90, 0.22), 0 2px 6px rgba(40, 60, 90, 0.06)" inner_highlight: "inset 0 1px 0 rgba(255, 255, 255, 0.65)" backdrop: "radial-gradient(80% 50% at 20% 0%, rgba(195, 215, 235, 0.65) 0%, transparent 60%), radial-gradient(70% 60% at 90% 100%, rgba(210, 225, 240, 0.55) 0%, transparent 60%), linear-gradient(180deg, #E8EEF4 0%, #DBE5EE 100%)" buttons: primary: background: rgba(63, 88, 120, 0.92) color: #FFFFFF border: 1px solid rgba(255, 255, 255, 0.18) shape: pill padding: 13px 26px font: 600 / 0.9375rem / -0.005em shadow: 0 8px 20px -10px rgba(63, 88, 120, 0.45) backdrop_blur: 12px backdrop_saturate: 160% secondary: background: rgba(255, 255, 255, 0.55) color: #3F5878 border: 1px solid rgba(255, 255, 255, 0.6) shape: pill padding: 13px 26px font: 600 / 0.9375rem / -0.005em shadow: 0 8px 20px -12px rgba(40, 60, 90, 0.18) backdrop_blur: 20px backdrop_saturate: 160% outline: background: transparent color: #3F5878 border: 1px solid rgba(63, 88, 120, 0.28) shape: pill padding: 12px 25px font: 500 / 0.9375rem / -0.005em ghost: background: transparent color: #42505E border: none shape: pill padding: 12px 6px font: 500 / 0.9375rem / -0.005em hover: underline charts: variant: area stroke_width: 2 fill_opacity: 0.22 gridlines: false highlight: last dot_marker: true axis_color: "#7A8696" palette: ["#3F5878", "#7A8696", "#B8C2CE"] fonts_url: "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Cirrus Pane ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Cirrus Pane** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — pill shape, bg `rgba(63, 88, 120, 0.92)`, text `#FFFFFF`, border `1px solid rgba(255, 255, 255, 0.18)`, padding `13px 26px`, weight `600`, shadow `0 8px 20px -10px rgba(63, 88, 120, 0.45)`. - **Secondary** — pill shape, bg `rgba(255, 255, 255, 0.55)`, text `#3F5878`, border `1px solid rgba(255, 255, 255, 0.6)`, padding `13px 26px`, weight `600`, shadow `0 8px 20px -12px rgba(40, 60, 90, 0.18)`. - **Outline** — pill shape, text `#3F5878`, border `1px solid rgba(63, 88, 120, 0.28)`, padding `12px 25px`, weight `500`. - **Ghost** — pill shape, text `#42505E`, padding `12px 6px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FFFFFF` - Border: `1px solid rgba(255, 255, 255, 0.6)` - Shadow: `0 24px 60px -28px rgba(40, 60, 90, 0.22), 0 2px 6px rgba(40, 60, 90, 0.06)` - Radius: `radius.lg` (`28px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. > This system ships a **glass treatment** — see the Glass token table. > Apply `backdrop-filter: blur(28px)` to translucent panes. > The page must have a backdrop (gradient mesh / blurred orbs) for glass to refract. #### Charts - Bar/line variant: `area` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#3F5878`, `#7A8696`, `#B8C2CE`. #### Typography pairings - **Display (`Manrope`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Manrope`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Cirrus Pane is a cool soft-glass system. The canvas is a pale icy blue with a horizontal cloud-light gradient — two diffuse radial highlights at opposite corners over a vertical pale-to-deeper-pale wash. Cards are true frosted panes: 18% white background, 28px backdrop-blur, 160% saturate, a 1px white hairline at 55%, and an inner top-edge gloss. One restrained slate-blue accent (#3F5878) carries every interactive moment. For SaaS surfaces that want to feel premium without going dark, weather and travel apps, financial dashboards that need a calm cool register, anything where "high cirrus light" is the brand mood. ## The Glass Recipe The card treatment is the entire system. Every value matters: ```css .card { background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(28px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 24px 60px -28px rgba(40, 60, 90, 0.22), 0 2px 6px rgba(40, 60, 90, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.65); } ``` The inner top-edge highlight is non-negotiable — it's what makes the glass read as a real pane catching light from above rather than a flat translucent rectangle. The 28px blur and 160% saturate combine to keep colors behind the glass alive without smearing them. ## The Backdrop Cards need something to refract. The page background layers two diffuse radial highlights at opposite corners over a vertical pale-blue wash: ```css body { background: radial-gradient(80% 50% at 20% 0%, rgba(195, 215, 235, 0.65) 0%, transparent 60%), radial-gradient(70% 60% at 90% 100%, rgba(210, 225, 240, 0.55) 0%, transparent 60%), linear-gradient(180deg, #E8EEF4 0%, #DBE5EE 100%); } ``` Both highlights stay cool — never introduce a warm stop. Warm stops kill the cirrus mood instantly. ## Color - **Slate-blue #3F5878** — the only chromatic mark. CTAs, chart line, active states. - **Mid slate #42505E** — body text. - **Cool stone #7A8696** — secondary text, axis labels. - **Icy canvas #E8EEF4** — page base. - **Paper #FFFFFF** — inverse moments only. ## Typography - **Manrope 600** for display at 4.25rem with -3.4% tracking. - **Manrope 400** for body at 1rem with 1.65 leading. | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | Manrope | 4.25rem | 600 | -0.034em | | H1 | Manrope | 2.5rem | 600 | -0.026em | | H2 | Manrope | 1.5rem | 600 | -0.014em | | Body | Manrope | 1rem | 400 | -0.003em / 1.65 | ## Geometry - **Radii: 14 / 20 / 28.** Soft and glass-friendly throughout. - **Section gap: 112px** desktop, 72px mobile. - **12-column grid** with 24px gutters. ## Buttons - **Primary** — frosted slate-blue glass pill, 12px backdrop-blur, 160% saturate. White hairline. - **Secondary** — true frosted-white pill, 20px backdrop-blur. The system's most distinctive button. - **Outline** — slate-blue hairline at 28% alpha. - **Ghost** — bare slate label, hover underline. ## Charts & Data 2px slate-blue line, 22% fill area, no gridlines, end-of-line dot marker. Axis labels in cool stone at 0.75rem. The chart sits inside a frosted card so the soft cirrus backdrop reads through the data. ## Do's and Don'ts - ✅ Hold every glass value precisely — the recipe is non-negotiable. - ✅ Always include the inner top-edge gloss. It's the difference between glass and translucency. - ✅ Keep all backdrop stops cool. No warm tones on the canvas. - ✅ One slate-blue accent only. - ❌ No warm radial stops in the backdrop. Cool light is the brand. - ❌ No flat opaque cards. Cards must be glass — that's the entire system. - ❌ No second chromatic accent. - ❌ No deep shadows. The glass floats softly; it doesn't drop heavy. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#3F5878` | | secondary | `#42505E` | | tertiary | `#7A8696` | | neutral | `#E8EEF4` | | surface | `#FFFFFF` | ### Typography - **Display:** Manrope - **Body:** Manrope - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.25rem / 1.06 / 600 / -0.034em | | H1 | 2.5rem / 1.12 / 600 / -0.026em | | H2 | 1.5rem / 1.3 / 600 / -0.014em | | Body | 1rem / 1.65 / 400 / -0.003em | ### Radius - sm: `14px` - md: `20px` - lg: `28px` - pill: `9999px` ### Shadows - **card:** `0 24px 60px -28px rgba(40, 60, 90, 0.22), 0 2px 6px rgba(40, 60, 90, 0.06)` - **button:** `0 8px 20px -10px rgba(63, 88, 120, 0.45)` ### Borders - **card:** `1px solid rgba(255, 255, 255, 0.6)` - **divider:** `rgba(63, 88, 120, 0.12)` ### Glass Translucent panes with backdrop-filter — the preview renders cards from these exact values. | Property | Value | |----------|-------| | surface | `rgba(255, 255, 255, 0.18)` | | blur | `28px` | | saturate | `160%` | | border | `1px solid rgba(255, 255, 255, 0.55)` | | shadow | `0 24px 60px -28px rgba(40, 60, 90, 0.22), 0 2px 6px rgba(40, 60, 90, 0.06)` | | innerHighlight | `inset 0 1px 0 rgba(255, 255, 255, 0.65)` | | backdrop | `radial-gradient(80% 50% at 20% 0%, rgba(195, 215, 235, 0.65) 0%, transparent 60%), radial-gradient(70% 60% at 90% 100%, rgba(210, 225, 240, 0.55) 0%, transparent 60%), linear-gradient(180deg, #E8EEF4 0%, #DBE5EE 100%)` | ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `pill` | | background | `rgba(63, 88, 120, 0.92)` | | color | `#FFFFFF` | | border | `1px solid rgba(255, 255, 255, 0.18)` | | padding | `13px 26px` | | fontWeight | `600` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | shadow | `0 8px 20px -10px rgba(63, 88, 120, 0.45)` | | backdropBlur | `12px` | | backdropSaturate | `160%` | #### Secondary | Property | Value | |----------|-------| | shape | `pill` | | background | `rgba(255, 255, 255, 0.55)` | | color | `#3F5878` | | border | `1px solid rgba(255, 255, 255, 0.6)` | | padding | `13px 26px` | | fontWeight | `600` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | shadow | `0 8px 20px -12px rgba(40, 60, 90, 0.18)` | | backdropBlur | `20px` | | backdropSaturate | `160%` | #### Outline | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#3F5878` | | border | `1px solid rgba(63, 88, 120, 0.28)` | | padding | `12px 25px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Ghost | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#42505E` | | border | `none` | | padding | `12px 6px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `area` | | strokeWidth | `2` | | fillOpacity | `0.22` | | gridlines | `false` | | highlight | `last` | | dotMarker | `true` | | axisColor | `#7A8696` | | palette | `#3F5878`, `#7A8696`, `#B8C2CE` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 8px 24px -8px rgba(122, 134, 150, 0.35), inset 0 1px 0 rgba(255,255,255,0.18)`, transform: `translateY(-1px)`, filter: `saturate(1.15)` - **focus** — outline: `2px solid rgba(122, 134, 150, 0.5)`, outline-offset: `3px` - **active** — transform: `translateY(0) scale(0.98)`, filter: `brightness(0.96)` - **disabled** — opacity: `0.4`, filter: `saturate(0.4) blur(0.4px)` - **loading** — opacity: `0.7` - **selected** — bg: `rgba(122, 134, 150, 0.18)`, color: `#7A8696` #### Input - **hover** — border: `1px solid rgba(122, 134, 150, 0.4)`, shadow: `inset 0 1px 0 rgba(255,255,255,0.18)` - **focus** — border: `1px solid rgba(122, 134, 150, 0.65)`, shadow: `0 0 0 4px rgba(122, 134, 150, 0.15), inset 0 1px 0 rgba(255,255,255,0.18)` - **disabled** — opacity: `0.4` - **error** — border: `1px solid rgba(248,113,113,0.7)`, shadow: `0 0 0 4px rgba(248,113,113,0.15)` #### Card - **hover** — shadow: `0 16px 48px -16px rgba(122, 134, 150, 0.25), inset 0 1px 0 rgba(255,255,255,0.18)`, transform: `translateY(-2px)`, filter: `saturate(1.1)` - **selected** — border: `1px solid rgba(122, 134, 150, 0.5)` - **dragging** — shadow: `0 24px 64px -16px rgba(0,0,0,0.4)`, transform: `scale(1.02)`, opacity: `0.85` #### Tab - **hover** — bg: `rgba(122, 134, 150, 0.08)` - **focus** — outline: `2px solid rgba(122, 134, 150, 0.5)`, outline-offset: `2px` - **selected** — bg: `rgba(122, 134, 150, 0.18)`, color: `#7A8696` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Refract.** Long opacity- and blur-driven transitions. Not a hard move, but a shift of light across the glass surface. ```css transition: opacity 350ms cubic-bezier(0.32, 0.72, 0, 1), backdrop-filter 350ms cubic-bezier(0.32, 0.72, 0, 1), transform 350ms cubic-bezier(0.32, 0.72, 0, 1); ``` | Token | Value | |-------|-------| | duration.instant | `100ms` | | duration.fast | `200ms` | | duration.base | `350ms` | | duration.slow | `550ms` | | easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.34, 1.2, 0.64, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `inset 0 1px 0 rgba(255,255,255,0.18)` | Flat glass surface — top-edge gloss only. | | level1 | `0 2px 8px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Soft lift + top-edge gloss. | | level2 | `0 12px 32px -8px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255,255,255,0.18)` | Floating pane — popover. | | level3 | `0 24px 64px -16px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(122, 134, 150, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Sheet — accent rim for depth. | | level4 | `0 40px 96px -24px rgba(15, 23, 42, 0.5), 0 0 48px -12px rgba(122, 134, 150, 0.25), inset 0 1px 0 rgba(255,255,255,0.18)` | Modal — dramatic glow, scrim required. | ### Content - **measure:** `66ch` (max line length for body prose) - **paragraph spacing:** `1.25em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#7A8696`, underline `hover` - **blockquote:** border `1px solid rgba(122, 134, 150, 0.4)`, padding `0.9em 1.2em` - **code:** background `rgba(122, 134, 150, 0.1)`, color `#7A8696` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 7.3:1 | AA | AAA | — | | Body text on canvas | 6.24:1 | AA | AA | — | | Muted text on surface | 8.27:1 | AA | AAA | — | | Accent on surface | 3.7:1 | AA-Large | AA-Large | — | | Accent on canvas | 3.16:1 | AA-Large | AA-Large | — | --- # SYSTEM: Whisper Studio Source: https://www.freedesignmd.com/system/whisper-studio --- name: "Whisper Studio" description: "Near-white canvas with warm stone undertones, ethereal light-weight display type, and whisper-soft multi-layer shadows." tags: [minimal, warm, premium, audio] colors: primary: "#000000" secondary: "#4E4E4E" tertiary: "#777169" neutral: "#F5F5F5" surface: "#FFFFFF" typography: display: "Familjen Grotesk" body: Inter mono: "JetBrains Mono" scale: hero: "3rem / 1.08 / 300 / -0.96px" h1: "2.25rem / 1.17 / 300 / 0" h2: "1.5rem / 1.2 / 300 / 0" body: "1.125rem / 1.55 / 400 / 0.18px" radius: sm: 8px md: 12px lg: 20px pill: 9999px shadows: card: "rgba(0,0,0,0.06) 0 0 0 1px, rgba(0,0,0,0.04) 0 1px 2px, rgba(0,0,0,0.04) 0 2px 4px" button: "rgba(78, 50, 23, 0.04) 0 6px 16px, rgba(0,0,0,0.4) 0 0 1px" buttons: primary: background: #1A1A1A color: #FAFAF7 border: none shape: pill padding: 10px 18px font: 500 secondary: background: #FAFAF7 color: #1A1A1A border: 1px solid #E8E5DD shape: pill padding: 10px 18px font: 500 outline: background: transparent color: #1A1A1A border: 1px solid #1A1A1A shape: pill padding: 10px 18px font: 500 ghost: background: transparent color: #6B6B6B border: none shape: pill padding: 10px 14px font: 500 hover: underline charts: variant: "thin-bars" stroke_width: 1 fill_opacity: 0.04 bar_gap: 16px highlight: single dot_marker: false fonts_url: "https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@300;400;500;700&family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Whisper Studio ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Whisper Studio** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — pill shape, bg `#1A1A1A`, text `#FAFAF7`, padding `10px 18px`, weight `500`. - **Secondary** — pill shape, bg `#FAFAF7`, text `#1A1A1A`, border `1px solid #E8E5DD`, padding `10px 18px`, weight `500`. - **Outline** — pill shape, text `#1A1A1A`, border `1px solid #1A1A1A`, padding `10px 18px`, weight `500`. - **Ghost** — pill shape, text `#6B6B6B`, padding `10px 14px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FFFFFF` - Shadow: `rgba(0,0,0,0.06) 0 0 0 1px, rgba(0,0,0,0.04) 0 1px 2px, rgba(0,0,0,0.04) 0 2px 4px` - Radius: `radius.lg` (`20px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `thin-bars` - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Familjen Grotesk`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere A near-white canvas where typography and whisper-soft shadows do the heavy lifting. Surfaces barely exist — they float above the page with the lightest possible touch. Warm stone undertones (`#F5F2EF`, `#777169`) prevent the purity from feeling clinical; this is restraint with body heat, not refrigerator-light minimalism. The signature move: light-weight display type. Where most systems shout in bold, Whisper Studio uses **weight 300** to create intrigue through restraint. Body text uses **positive letter-spacing (+0.14 to +0.18px)** for an airy reading rhythm. ## 2. Palette ### Ink - `#000000` — primary text, headings, dark pill buttons - `#4E4E4E` — secondary text, descriptions - `#777169` — tertiary text, captions, decorative underlines ### Surface - `#FFFFFF` — primary canvas, cards, button backgrounds - `#F5F5F5` — secondary surface, subtle section breaks - `rgba(245, 242, 239, 0.8)` — **warm stone** — the signature CTA tint ### Lines - `#E5E5E5` — explicit borders - `rgba(0, 0, 0, 0.05)` — hairline section dividers - `rgba(147, 197, 253, 0.5)` — focus ring ## 3. Typography | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | Familjen Grotesk | 48px | 300 | -0.96px | | Section | Familjen Grotesk | 36px | 300 | 0 | | Card title | Familjen Grotesk | 32px | 300 | 0 | | Body | Inter | 18px | 400 | +0.18px | | UI | Inter | 16px | 400 | +0.16px | | Nav | Inter | 15px | 500 | +0.15px | | Caps CTA | Inter | 14px | 700 | +0.7px, uppercase | | Code | JetBrains Mono | 13px | 400 | 0 | **Light is the hero weight.** Display type at weight 300 is non-negotiable — bold display breaks the system. Body uses positive tracking for airy readability. ## 4. Shadow Stack The most distinctive element. Every shadow is sub-0.1 opacity. Cards combine **inset edges + outline rings + soft elevation**, layered: - **Level 0 (inset edge)** — `rgba(0,0,0,0.075) 0 0 0 0.5px inset` — defines surface boundary from inside - **Level 1 (outline ring)** — `rgba(0,0,0,0.06) 0 0 0 1px, rgba(0,0,0,0.04) 0 1px 2px, rgba(0,0,0,0.04) 0 2px 4px` — shadow-as-border for cards - **Level 2 (card lift)** — `rgba(0,0,0,0.4) 0 0 1px, rgba(0,0,0,0.04) 0 4px 4px` — pill buttons, prominent cards - **Level 3 (warm lift)** — `rgba(78, 50, 23, 0.04) 0 6px 16px` — featured CTAs only **Shadows have color, not just darkness.** The warm CTA shadow uses brown (`rgba(78, 50, 23, ...)`) instead of neutral black — this is the system's hidden warmth. ## 5. Buttons - **Primary pill** — black background, white text, `9999px` radius, padding `10px 14px`. The page's main action. - **Ghost pill** — white background, black text, `9999px` radius, level-2 shadow. Secondary action. - **Warm stone pill** — `rgba(245,242,239,0.8)` background, asymmetric padding (`12px 20px 12px 14px`), `30px` radius, level-3 warm shadow. The signature — featured CTAs and hero actions only. - **Caps button** — Inter 14px weight 700, uppercase, +0.7px tracking. For specific bold labels. ## 6. Cards White background, **20px radius**, level-1 outline-ring shadow. Padding 24px. Cards are *not* pills — keep the radius generous but rectangular. ## 7. Spacing & Layout - Base unit: **8px** - Scale: `1, 3, 4, 8, 9, 10, 11, 12, 16, 18, 20, 24, 28, 32, 40` - Section spacing: **120px** vertical between major sections — premium-modern generosity - Container max: **1200px** ## 8. Radius Scale `2 / 4 / 8 / 12 / 20 / 24 / 30 / 9999` — `30px` is reserved for the warm stone pill. Pill (`9999px`) for primary buttons. Cards use 20–24px. ## 9. Icons `lucide-react` only. Stroke width `1.5`. Default 20px, 16px in dense UI, 24px on primary actions. Icons inherit text color — never tint them. ## 10. Do's and Don'ts ✅ **Do** - Use Familjen Grotesk weight 300 for all display — the lightness *is* the brand - Layer shadows: inset edge + outline ring + soft elevation, all sub-0.1 opacity - Apply positive letter-spacing (+0.14 to +0.18px) to body text - Use 9999px radius for primary buttons (never on cards) - Use the warm stone pill for *one* hero CTA per page - Tint shadows warm (`rgba(78, 50, 23, ...)`) on featured elements ❌ **Don't** - Use bold display weight — it breaks the ethereal quality - Use heavy shadows (>0.1 opacity) — whisper-soft only - Apply pill radius to cards or surfaces — pills are buttons only - Apply negative letter-spacing to body - Make buttons opaque and heavy — translucent stone is the signature - Introduce brand colors — the palette is achromatic with warm undertones --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#000000` | | secondary | `#4E4E4E` | | tertiary | `#777169` | | neutral | `#F5F5F5` | | surface | `#FFFFFF` | ### Typography - **Display:** Familjen Grotesk - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 3rem / 1.08 / 300 / -0.96px | | H1 | 2.25rem / 1.17 / 300 / 0 | | H2 | 1.5rem / 1.2 / 300 / 0 | | Body | 1.125rem / 1.55 / 400 / 0.18px | ### Radius - sm: `8px` - md: `12px` - lg: `20px` - pill: `9999px` ### Shadows - **card:** `rgba(0,0,0,0.06) 0 0 0 1px, rgba(0,0,0,0.04) 0 1px 2px, rgba(0,0,0,0.04) 0 2px 4px` - **button:** `rgba(78, 50, 23, 0.04) 0 6px 16px, rgba(0,0,0,0.4) 0 0 1px` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `pill` | | background | `#1A1A1A` | | color | `#FAFAF7` | | border | `none` | | padding | `10px 18px` | | fontWeight | `500` | #### Secondary | Property | Value | |----------|-------| | shape | `pill` | | background | `#FAFAF7` | | color | `#1A1A1A` | | border | `1px solid #E8E5DD` | | padding | `10px 18px` | | fontWeight | `500` | #### Outline | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#1A1A1A` | | border | `1px solid #1A1A1A` | | padding | `10px 18px` | | fontWeight | `500` | #### Ghost | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#6B6B6B` | | border | `none` | | padding | `10px 14px` | | fontWeight | `500` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1` | | fillOpacity | `0.04` | | barGap | `16px` | | highlight | `single` | | dotMarker | `false` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 8px 24px -10px rgba(119, 113, 105, 0.35)`, transform: `translateY(-1px)`, filter: `brightness(1.02)` - **focus** — outline: `2px solid rgba(119, 113, 105, 0.4)`, outline-offset: `3px` - **active** — transform: `translateY(0) scale(0.98)` - **disabled** — opacity: `0.4`, filter: `saturate(0.5)` - **loading** — opacity: `0.65` - **selected** — bg: `rgba(119, 113, 105, 0.18)`, color: `#777169` #### Input - **hover** — bg: `rgba(119, 113, 105, 0.03)`, border: `1px solid rgba(119, 113, 105, 0.4)` - **focus** — border: `1px solid rgba(119, 113, 105, 0.6)`, shadow: `0 0 0 4px rgba(119, 113, 105, 0.12)` - **disabled** — opacity: `0.4` - **error** — border: `1px solid rgba(244,114,182,0.7)`, shadow: `0 0 0 4px rgba(244,114,182,0.15)` #### Card - **hover** — shadow: `0 16px 40px -16px rgba(119, 113, 105, 0.3)`, transform: `translateY(-3px)` - **selected** — bg: `rgba(119, 113, 105, 0.04)`, border: `1px solid rgba(119, 113, 105, 0.5)` - **dragging** — transform: `scale(1.03) rotate(-0.8deg)`, opacity: `0.92` #### Tab - **hover** — bg: `rgba(119, 113, 105, 0.08)`, color: `#777169` - **focus** — outline: `2px solid rgba(119, 113, 105, 0.4)`, outline-offset: `2px` - **selected** — bg: `rgba(119, 113, 105, 0.16)`, color: `#777169` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Soft fade.** Long, gentle transitions with a symmetric easing curve. Motion is calming, never intrusive. ```css transition: all 400ms cubic-bezier(0.45, 0.05, 0.55, 0.95); ``` | Token | Value | |-------|-------| | duration.instant | `120ms` | | duration.fast | `240ms` | | duration.base | `400ms` | | duration.slow | `600ms` | | easing.standard | `cubic-bezier(0.45, 0.05, 0.55, 0.95)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.45, 1.4, 0.55, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the tone separates, not the shadow. | | level1 | `0 2px 6px -2px rgba(119, 113, 105, 0.12)` | Soft tinted lift. | | level2 | `0 8px 24px -10px rgba(119, 113, 105, 0.2)` | Floating card — pastel-tinted shadow. | | level3 | `0 16px 48px -16px rgba(119, 113, 105, 0.28)` | Sheet — visible tinted glow. | | level4 | `0 32px 80px -24px rgba(119, 113, 105, 0.4)` | Modal — tinted wash, scrim required. | ### Content - **measure:** `64ch` (max line length for body prose) - **paragraph spacing:** `1.35em` - **list indent:** `1.5em` - **list gap:** `0.6em` - **link:** color `#777169`, underline `hover` - **blockquote:** border `2px solid rgba(119, 113, 105, 0.5)`, padding `0.9em 1.2em` - **code:** background `rgba(119, 113, 105, 0.1)`, color `#000000` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 21:1 | AA | AAA | — | | Body text on canvas | 19.26:1 | AA | AAA | — | | Muted text on surface | 8.32:1 | AA | AAA | — | | Accent on surface | 4.83:1 | AA-Large | AA | — | | Accent on canvas | 4.43:1 | AA-Large | AA-Large | — | --- # SYSTEM: Geistlab Source: https://www.freedesignmd.com/system/geistlab --- name: Geistlab description: "Developer infrastructure made invisible. Geist with -2.4px tracking, shadow-as-border philosophy, multi-layer shadow stacks, ligatures everywhere." tags: [developer, minimal, premium, saas, modern] colors: primary: "#171717" secondary: "#4d4d4d" tertiary: "#171717" neutral: "#fafafa" surface: "#ffffff" typography: display: Geist body: Geist mono: "Geist Mono" scale: hero: "3rem / 1 / 600 / -2.88px" h1: "2.5rem / 1.2 / 600 / -2.4px" h2: "2rem / 1.25 / 600 / -1.28px" body: "1.125rem / 1.56 / 400 / 0" radius: sm: 4px md: 6px lg: 8px pill: 9999px shadows: card: "rgba(0,0,0,0.08) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 2px, rgba(0,0,0,0.04) 0 8px 8px -8px, #fafafa 0 0 0 1px inset" button: "rgba(0,0,0,0.12) 0 0 0 1px" borders: card: none divider: rgba(0,0,0,0.08) buttons: primary: background: #171717 color: #ffffff border: none shape: rounded padding: 8px 16px font: 500 / 0.875rem shadow: rgba(0,0,0,0.12) 0 0 0 1px secondary: background: #ffffff color: #171717 border: none shape: rounded padding: 8px 16px font: 500 / 0.875rem shadow: rgba(235,235,235,1) 0 0 0 1px outline: background: transparent color: #171717 border: 1px solid rgba(0,0,0,0.08) shape: rounded padding: 8px 16px font: 500 / 0.875rem ghost: background: #ebf5ff color: #0068d6 border: none shape: pill padding: 0 10px font: 500 / 0.75rem charts: variant: "thin-bars" stroke_width: 1.5 fill_opacity: 0.06 gridlines: true bar_gap: 14px highlight: single dot_marker: true fonts_url: "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Geistlab ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Geistlab** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#171717`, text `#ffffff`, padding `8px 16px`, weight `500`, shadow `rgba(0,0,0,0.12) 0 0 0 1px`. - **Secondary** — rounded shape, bg `#ffffff`, text `#171717`, padding `8px 16px`, weight `500`, shadow `rgba(235,235,235,1) 0 0 0 1px`. - **Outline** — rounded shape, text `#171717`, border `1px solid rgba(0,0,0,0.08)`, padding `8px 16px`, weight `500`. - **Ghost** — pill shape, bg `#ebf5ff`, text `#0068d6`, padding `0 10px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#ffffff` - Border: `none` - Shadow: `rgba(0,0,0,0.08) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 2px, rgba(0,0,0,0.04) 0 8px 8px -8px, #fafafa 0 0 0 1px inset` - Radius: `radius.lg` (`8px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `thin-bars` - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Geist`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Geist`)** — paragraphs, labels, button text, form inputs. - **Mono (`Geist Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Geistlab is the visual thesis of developer infrastructure made invisible — a design system so restrained it borders on philosophical. The page is overwhelmingly white (`#ffffff`) with near-black (`#171717`) text, creating a gallery-like emptiness where every element earns its pixel. This isn't minimalism as decoration; it's minimalism as engineering principle. The system treats the interface like a compiler treats code — every unnecessary token is stripped away until only structure remains. The Geist font family is the crown jewel. Geist Sans uses aggressive negative letter-spacing (-2.4px to -2.88px at display sizes), creating headlines that feel compressed, urgent, and engineered — like code that's been minified for production. At body sizes, the tracking relaxes but the geometric precision persists. Geist Mono completes the system as the monospace companion for code, terminal output, and technical labels. Both enable OpenType `"liga"` (ligatures) globally. What distinguishes Geistlab from other monochrome design systems is its **shadow-as-border** philosophy. Instead of traditional CSS borders, Geistlab uses `box-shadow: 0 0 0 1px rgba(0,0,0,0.08)` — a zero-offset, zero-blur, 1px-spread shadow that creates a border-like line without the box model implications. The entire depth system is built on layered, multi-value shadow stacks where each layer serves a specific purpose: border, soft elevation, ambient depth, inner highlight. **Signature moves** - Geist Sans with extreme negative tracking (-2.4 to -2.88px at display) — text as compressed infrastructure - Geist Mono for code and technical labels with `"liga"` globally - **Shadow-as-border**: `box-shadow 0 0 0 1px` replaces traditional borders throughout - Multi-layer shadow stacks (border + elevation + ambient + inner highlight) on cards - Near-pure white canvas with `#171717` text — slight warmth prevents harshness - Workflow accent colors: Ship Red (`#ff5b4f`), Preview Pink (`#de1d8d`), Develop Blue (`#0a72ef`) - Pill badges (9999px) tinted blue — *only* for status, never for CTAs ## 2. Palette ### Primary - **Geistlab Black** `#171717` — text, headings, dark surface (warm, not pure black) - **Pure White** `#ffffff` — page, cards, button text on dark - **True Black** `#000000` — console contexts only ### Workflow Accents - **Ship Red** `#ff5b4f` — production deploy step - **Preview Pink** `#de1d8d` — preview deploy step - **Develop Blue** `#0a72ef` — development step ### Console / Code - Console Blue `#0070f3` · Purple `#7928ca` · Pink `#eb367f` ### Interactive - Link Blue `#0072f5` - Focus Blue `hsla(212, 100%, 48%, 1)` ### Neutrals - Gray 900 `#171717` · 600 `#4d4d4d` · 500 `#666666` · 400 `#808080` - Gray 100 `#ebebeb` · 50 `#fafafa` ### Shadows - Border `rgba(0,0,0,0.08) 0 0 0 1px` — the signature - Card stack: `rgba(0,0,0,0.08) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 2px, rgba(0,0,0,0.04) 0 8px 8px -8px, #fafafa 0 0 0 1px` ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Display Hero | Sans | 48px | 600 | 1.00–1.17 | -2.4 to -2.88px | | Section | Sans | 40px | 600 | 1.20 | -2.4px | | Sub-heading L | Sans | 32px | 600 | 1.25 | -1.28px | | Sub-heading | Sans | 32px | 400 | 1.50 | -1.28px | | Card title | Sans | 24px | 600 | 1.33 | -0.96px | | Body Large | Sans | 20px | 400 | 1.80 | normal | | Body | Sans | 18px | 400 | 1.56 | normal | | Body Small | Sans | 16px | 400 | 1.50 | normal | | Body Medium | Sans | 16px | 500 | 1.50 | normal | | Body Semibold | Sans | 16px | 600 | 1.50 | -0.32px | | Button / Link | Sans | 14px | 500 | 1.43 | normal | | Caption | Sans | 12px | 400–500 | 1.33 | normal | | Mono Body | Mono | 16px | 400 | 1.50 | normal | | Mono Small | Mono | 12px | 500 | 1.00 | uppercase | **Three weights, strict roles.** 400 (body), 500 (UI), 600 (headings). No 700. Tracking compresses progressively with size: -2.88px at 48px, -1.28px at 32px, -0.32px at 16px, 0 at 14px. ## 4. Buttons ### Primary Dark ```css background: #171717; color: #ffffff; padding: 8px 16px; border-radius: 6px; ``` ### Secondary White (Shadow-bordered) - Background `#ffffff`, text `#171717` - **No CSS border** — shadow-border `rgba(235,235,235,1) 0 0 0 1px` instead - 6px radius, content-driven width - Hover: dark surface; Focus: `2px solid var(--ds-focus-color)` + ring ### Pill Badge (status only) - Background `#ebf5ff`, text `#0068d6` - 9999px radius, 0×10 padding - 12px weight 500 ## 5. Cards - Background: `#ffffff` - **No CSS border** — shadow-border technique - Radius: 8px standard, 12px featured/image - Shadow stack: `rgba(0,0,0,0.08) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 2px, rgba(0,0,0,0.04) 0 8px 8px -8px, #fafafa 0 0 0 1px inset` - Hover: subtle shadow intensification ## 6. Charts **Thin precise bars (3px)** with dashed gridlines — engineered, technical, as if rendered by a CLI tool. Single highlighted maximum bar. Line charts run at 1.5px stroke with a barely-visible 6% fill, ending in a dot marker — the live-deployment readout aesthetic. ## 7. Spacing - Base: 8px - Scale: `1, 2, 3, 4, 5, 6, 8, 10, 12, 14, 16, 32, 36, 40` - Notable jump from 16 to 32 — no 20 or 24 ## 8. Depth & elevation | Level | Treatment | Use | |-------|-----------|-----| | 0 | Flat | Page, text | | 1 | `rgba(0,0,0,0.08) 0 0 0 1px` | Shadow-border for most elements | | 1b | `rgb(235,235,235) 0 0 0 1px` | Tabs, images | | 2 | Ring + `rgba(0,0,0,0.04) 0 2px 2px` | Standard cards | | 3 | Full 4-stack with inner highlight | Featured cards | | Focus | `2px solid hsla(212,100%,48%,1)` | Keyboard focus | **The most sophisticated shadow system in modern web design.** Each shadow layer has a distinct architectural purpose: border, ambient softness, distance depth, inner glow. Cards feel built, not floating. ## 9. Do's & don'ts ✅ **Do** - Use Geist with negative tracking at display (-2.4 to -2.88px at 48px) - Use shadow-as-border (`0 0 0 1px rgba(0,0,0,0.08)`) instead of CSS borders - Enable `"liga"` on all Geist text — ligatures are structural - Use the three-weight system: 400 / 500 / 600 only - Apply workflow accents only in their workflow context ❌ **Don't** - Use positive letter-spacing on Geist — always negative or zero - Use weight 700 — 600 is the maximum - Use traditional CSS `border` on cards — shadow-border only - Use heavy shadows (>0.1 opacity) — whisper-level only - Use pill radius (9999px) on action buttons — pills are for status badges - Skip the inner `#fafafa` ring in card shadows — it's the glow that makes the system work --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#171717` | | secondary | `#4d4d4d` | | tertiary | `#171717` | | neutral | `#fafafa` | | surface | `#ffffff` | ### Typography - **Display:** Geist - **Body:** Geist - **Mono:** Geist Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 3rem / 1 / 600 / -2.88px | | H1 | 2.5rem / 1.2 / 600 / -2.4px | | H2 | 2rem / 1.25 / 600 / -1.28px | | Body | 1.125rem / 1.56 / 400 / 0 | ### Radius - sm: `4px` - md: `6px` - lg: `8px` - pill: `9999px` ### Shadows - **card:** `rgba(0,0,0,0.08) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 2px, rgba(0,0,0,0.04) 0 8px 8px -8px, #fafafa 0 0 0 1px inset` - **button:** `rgba(0,0,0,0.12) 0 0 0 1px` ### Borders - **card:** `none` - **divider:** `rgba(0,0,0,0.08)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#171717` | | color | `#ffffff` | | border | `none` | | padding | `8px 16px` | | fontWeight | `500` | | fontSize | `0.875rem` | | shadow | `rgba(0,0,0,0.12) 0 0 0 1px` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#ffffff` | | color | `#171717` | | border | `none` | | padding | `8px 16px` | | fontWeight | `500` | | fontSize | `0.875rem` | | shadow | `rgba(235,235,235,1) 0 0 0 1px` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#171717` | | border | `1px solid rgba(0,0,0,0.08)` | | padding | `8px 16px` | | fontWeight | `500` | | fontSize | `0.875rem` | #### Ghost | Property | Value | |----------|-------| | shape | `pill` | | background | `#ebf5ff` | | color | `#0068d6` | | border | `none` | | padding | `0 10px` | | fontWeight | `500` | | fontSize | `0.75rem` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1.5` | | fillOpacity | `0.06` | | gridlines | `true` | | barGap | `14px` | | highlight | `single` | | dotMarker | `true` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(23, 23, 23, 0.15)`, color: `#171717`, border: `1px solid #171717` - **focus** — outline: `1px dashed #171717`, outline-offset: `2px` - **active** — bg: `#171717`, color: `#ffffff` - **disabled** — opacity: `0.35` - **loading** — opacity: `0.6` - **selected** — bg: `#171717`, color: `#ffffff` #### Input - **hover** — border: `1px solid rgba(23, 23, 23, 0.5)` - **focus** — bg: `rgba(23, 23, 23, 0.05)`, border: `1px solid #171717` - **disabled** — opacity: `0.35` - **error** — bg: `rgba(239,68,68,0.05)`, border: `1px solid #EF4444` #### Card - **hover** — border: `1px solid #171717` - **selected** — bg: `rgba(23, 23, 23, 0.05)`, border: `1px solid #171717` - **dragging** — opacity: `0.7` #### Tab - **hover** — color: `#171717` - **focus** — outline: `1px dashed #171717`, outline-offset: `1px` - **selected** — bg: `rgba(23, 23, 23, 0.1)`, color: `#171717` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Cursor blink.** Discrete, often stepped transitions. Like a terminal cursor: on or off. Response under 120 ms. ```css transition: all 120ms linear; ``` | Token | Value | |-------|-------| | duration.instant | `0ms` | | duration.fast | `60ms` | | duration.base | `120ms` | | duration.slow | `200ms` | | easing.standard | `linear` | | easing.decelerate | `linear` | | easing.accelerate | `linear` | | easing.spring | `steps(2, end)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the stroke carries the hierarchy. | | level1 | `none` | Border tone lifts the surface. | | level2 | `0 0 0 1px rgba(23, 23, 23, 0.5)` | Ring outline — popover. | | level3 | `0 0 0 1px #171717, 0 12px 32px -16px rgba(23, 23, 23, 0.4)` | Sheet with accent ring + glow. | | level4 | `0 0 0 1px #171717, 0 24px 64px -20px rgba(23, 23, 23, 0.5)` | Modal with accent ring + glow. | ### Content - **measure:** `78ch` (max line length for body prose) - **paragraph spacing:** `1em` - **list indent:** `1.25em` - **list gap:** `0.35em` - **link:** color `#171717`, underline `always` - **blockquote:** border `1px solid rgba(23, 23, 23, 0.5)`, padding `0.7em 1em` - **code:** background `rgba(23, 23, 23, 0.12)`, color `#171717` ### Accessibility (WCAG 2.1) **Overall:** AAA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 17.93:1 | AA | AAA | — | | Body text on canvas | 17.18:1 | AA | AAA | — | | Muted text on surface | 8.45:1 | AA | AAA | — | | Accent on surface | 17.93:1 | AA-Large | AAA | — | | Accent on canvas | 17.18:1 | AA-Large | AAA | — | --- # SYSTEM: Kinfolk Stone Source: https://www.freedesignmd.com/system/kinfolk-stone --- name: "Kinfolk Stone" description: "Wabi-sabi calm. Warm stone and oat tones, asymmetric editorial layout, crimson hairline accent, classical serif lyrics. Slow, considered, quietly luxurious." tags: [editorial, minimal, light, magazine] colors: primary: "#2A2724" secondary: "#8C857B" tertiary: "#9B2C2C" neutral: "#F1ECE0" surface: "#FAF6EC" typography: display: "Cormorant Garamond" body: "Source Serif 4" mono: "IBM Plex Mono" scale: hero: "5rem / 1.05 / 300 / -0.02em" h1: "3rem / 1.1 / 400 / -0.015em" h2: "1.5rem / 1.4 / 400 / 0" body: "1.0625rem / 1.7 / 400 / 0.005em" radius: sm: 1px md: 2px lg: 3px shadows: borders: card: "1px solid rgba(140, 133, 123, 0.28)" divider: "rgba(140, 133, 123, 0.40)" buttons: primary: background: #2A2724 color: #FAF6EC border: none shape: rounded padding: 13px 26px font: body / 400 / 0.9375rem / 0.04em secondary: background: #FAF6EC color: #9B2C2C border: 1px solid #9B2C2C shape: rounded padding: 13px 26px font: body / 400 / 0.9375rem / 0.04em outline: background: transparent color: #2A2724 border: 1px solid rgba(140, 133, 123, 0.45) shape: rounded padding: 13px 26px font: body / 400 / 0.9375rem / 0.04em ghost: background: transparent color: #9B2C2C border: none shape: rounded padding: 10px 4px font: display / 400 / 1.0625rem / 0 hover: underline charts: variant: line stroke_width: 1 gridlines: false highlight: last dot_marker: true axis_color: "#8C857B" palette: ["#2A2724"] fonts_url: "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400&family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,500&family=IBM+Plex+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Kinfolk Stone ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Kinfolk Stone** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#2A2724`, text `#FAF6EC`, padding `13px 26px`, weight `400`. - **Secondary** — rounded shape, bg `#FAF6EC`, text `#9B2C2C`, border `1px solid #9B2C2C`, padding `13px 26px`, weight `400`. - **Outline** — rounded shape, text `#2A2724`, border `1px solid rgba(140, 133, 123, 0.45)`, padding `13px 26px`, weight `400`. - **Ghost** — rounded shape, text `#9B2C2C`, padding `10px 4px`, weight `400`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FAF6EC` - Border: `1px solid rgba(140, 133, 123, 0.28)` - Radius: `radius.lg` (`3px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `line` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#2A2724`. #### Typography pairings - **Display (`Cormorant Garamond`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Source Serif 4`)** — paragraphs, labels, button text, form inputs. - **Mono (`IBM Plex Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Kinfolk Stone is a system for slow reading. The page is **warm oat #F1ECE0**, the cards are **cream #FAF6EC**, and the ink is **stone #2A2724** — a deep brown-grey that has never met pure black. The accent is **crimson #9B2C2C**, used as a 1px hairline border or a single dot on a chart. Never as a fill, never as a CTA background. Typography is editorial through and through: Cormorant Garamond for display (classical, light, generous), Source Serif 4 for body (slow, leaded at 1.7), IBM Plex Mono for footnotes. Buttons are nearly-square. Nothing rounds. ## Material - **Page** is warm oat — slightly green-tinted so it reads as natural fibre, not bleached paper. - **Cards** are a half-shade lighter (#FAF6EC), separated by a **1px sand hairline at 28%** — felt as a margin rule, never as a border. - **No drop-shadows anywhere.** Depth in this system is achieved by paper colour alone. ## Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Cormorant Garamond | 5rem | 300 | 1.05 | -0.02em | | H1 | Cormorant Garamond | 3rem | 400 | 1.10 | -0.015em | | H2 | Source Serif 4 | 1.5rem | 400 | 1.40 | 0 | | Body | Source Serif 4 | 1.0625rem | 400 | **1.70** | +0.005em | | Caption | IBM Plex Mono | 0.8125rem | 400 | 1.55 | +0.06em | The hero is **weight 300** — light is correct here. Body leading is **1.70**, non-negotiable. ## Color - **Stone #2A2724** — primary ink. Warmer than black; sits gently on oat. - **Sand #8C857B** — captions, dividers, axis labels. Always low-contrast. - **Crimson #9B2C2C** — emphasis only. As a border, an underline, a dot. Never a fill larger than 4px². - **Cream #FAF6EC** — card surface. - **Oat #F1ECE0** — page. ## Buttons Restraint is the entire idea. - **Primary** — stone fill, cream text, **3px radius**, body serif at +4% tracking. The button is a sentence, not a billboard. - **Secondary** — cream tile with **1px crimson hairline border**, crimson serif label. The editorial "read more." - **Outline** — sand hairline at 45%, stone label. For tertiary calls and chrome. - **Ghost** — display Cormorant *italic* in crimson, hover underline. The system's most expressive button. All buttons sit on **3px radius**. We never round more. ## Layout Asymmetry is encouraged: a 60/40 column split, a single hero pulled hard to the left margin, captions anchored 12% from the gutter. The white space is what the reader pays for. ## Charts & Data A **single 1px stone line** over warm paper. **No gridlines.** A **single crimson dot** on the latest value — that is the only colour on the chart. Axis labels in sand. ## Do's and Don'ts - ✅ Use weight 300 on display sizes. Lightness is part of the calm. - ✅ Hold body leading at 1.70. Tightening it kills the slowness. - ✅ Use crimson as ink, never as a fill larger than a dot or a border. - ✅ Asymmetric columns. Centre everything and you have killed the magazine. - ❌ No drop-shadows. Ever. - ❌ No pure black. Ever. The system is warm; pure black is cold. - ❌ No display serif on body — Cormorant is for hero/H1 only. Body is Source Serif. - ❌ No pill buttons. 3px max. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#2A2724` | | secondary | `#8C857B` | | tertiary | `#9B2C2C` | | neutral | `#F1ECE0` | | surface | `#FAF6EC` | ### Typography - **Display:** Cormorant Garamond - **Body:** Source Serif 4 - **Mono:** IBM Plex Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 5rem / 1.05 / 300 / -0.02em | | H1 | 3rem / 1.1 / 400 / -0.015em | | H2 | 1.5rem / 1.4 / 400 / 0 | | Body | 1.0625rem / 1.7 / 400 / 0.005em | ### Radius - sm: `1px` - md: `2px` - lg: `3px` ### Shadows ### Borders - **card:** `1px solid rgba(140, 133, 123, 0.28)` - **divider:** `rgba(140, 133, 123, 0.40)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#2A2724` | | color | `#FAF6EC` | | border | `none` | | padding | `13px 26px` | | fontFamily | `body` | | fontWeight | `400` | | fontSize | `0.9375rem` | | tracking | `0.04em` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#FAF6EC` | | color | `#9B2C2C` | | border | `1px solid #9B2C2C` | | padding | `13px 26px` | | fontFamily | `body` | | fontWeight | `400` | | fontSize | `0.9375rem` | | tracking | `0.04em` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#2A2724` | | border | `1px solid rgba(140, 133, 123, 0.45)` | | padding | `13px 26px` | | fontFamily | `body` | | fontWeight | `400` | | fontSize | `0.9375rem` | | tracking | `0.04em` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#9B2C2C` | | border | `none` | | padding | `10px 4px` | | fontFamily | `display` | | fontWeight | `400` | | fontSize | `1.0625rem` | | tracking | `0` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `line` | | strokeWidth | `1` | | gridlines | `false` | | highlight | `last` | | dotMarker | `true` | | axisColor | `#8C857B` | | palette | `#2A2724` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(155, 44, 44, 0.92)`, shadow: `0 4px 20px -8px rgba(155, 44, 44, 0.4)` - **focus** — outline: `1.5px solid #9B2C2C`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#2A2724`, color: `#FAF6EC` #### Input - **hover** — border: `1px solid #2A2724` - **focus** — border: `1px solid #9B2C2C`, shadow: `0 1px 0 0 #9B2C2C` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #2A2724` #### Tab - **hover** — color: `#2A2724` - **focus** — outline: `1.5px solid #9B2C2C`, outline-offset: `3px` - **selected** — color: `#9B2C2C`, border: `0 0 2px 0 solid #9B2C2C` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#9B2C2C`, underline `always` - **blockquote:** border `4px solid #9B2C2C`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(42, 39, 36, 0.06)`, color `#2A2724` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 13.76:1 | AA | AAA | — | | Body text on canvas | 12.6:1 | AA | AAA | — | | Muted text on surface | 3.38:1 | AA | AA-Large | `#777067` → 4.53:1 (AA) | | Accent on surface | 6.97:1 | AA-Large | AA | — | | Accent on canvas | 6.38:1 | AA-Large | AA | — | --- # SYSTEM: Lumen Material Source: https://www.freedesignmd.com/system/lumen-material --- name: "Lumen Material" description: "Tonal elevation, dynamic-color purple primary, full-rounded buttons, Roboto Flex throughout. Faithful to the modern tonal-surface spec — generous, accessible, dependable for product UI." tags: [saas, material, playful, minimal, modern] colors: primary: "#1D1B20" secondary: "#79747E" tertiary: "#6750A4" neutral: "#F7F2FA" surface: "#FEF7FF" typography: display: "Roboto Flex" body: "Roboto Flex" mono: "Roboto Mono" scale: hero: "3.5625rem / 1.12 / 400 / -0.015em" h1: "2rem / 1.25 / 400 / 0" h2: "1.375rem / 1.27 / 500 / 0" body: "1rem / 1.5 / 400 / 0.03125em" radius: sm: 8px md: 12px lg: 16px pill: 9999px shadows: card: "0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15)" button: "0 1px 3px rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15)" borders: card: "1px solid #CAC4D0" divider: "#CAC4D0" buttons: primary: background: #6750A4 color: #FFFFFF border: none shape: pill padding: 10px 24px font: body / 500 / 0.875rem / 0.00714em shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15) hover: lift secondary: background: #E8DEF8 color: #1D192B border: none shape: pill padding: 10px 24px font: body / 500 / 0.875rem / 0.00714em outline: background: transparent color: #6750A4 border: 1px solid #79747E shape: pill padding: 9px 24px font: body / 500 / 0.875rem / 0.00714em ghost: background: transparent color: #6750A4 border: none shape: pill padding: 10px 12px font: body / 500 / 0.875rem / 0.00714em hover: glow charts: variant: "rounded-bars" gridlines: true bar_radius: 4px bar_gap: 12px highlight: single axis_color: "#79747E" palette: ["#6750A4", "#625B71", "#7D5260"] fonts_url: "https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,400;8..144,500;8..144,600;8..144,700&family=Roboto+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Lumen Material ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Lumen Material** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — pill shape, bg `#6750A4`, text `#FFFFFF`, padding `10px 24px`, weight `500`, shadow `0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15)`. - **Secondary** — pill shape, bg `#E8DEF8`, text `#1D192B`, padding `10px 24px`, weight `500`. - **Outline** — pill shape, text `#6750A4`, border `1px solid #79747E`, padding `9px 24px`, weight `500`. - **Ghost** — pill shape, text `#6750A4`, padding `10px 12px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FEF7FF` - Border: `1px solid #CAC4D0` - Shadow: `0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15)` - Radius: `radius.lg` (`16px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `rounded-bars` - Bar radius: `4px` - Highlight strategy: `single` — emphasize a single bar/point per chart. - Use the declared palette in order: `#6750A4`, `#625B71`, `#7D5260`. #### Typography pairings - **Display (`Roboto Flex`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Roboto Flex`)** — paragraphs, labels, button text, form inputs. - **Mono (`Roboto Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Lumen Material is a faithful implementation of the modern tonal-elevation product spec. It uses dynamic-color purple **#6750A4** as the primary, tonal surface containers for elevation (instead of opacity overlays), full-rounded **9999px** buttons, and **Roboto Flex** as the single typeface across display and body. Cards rest on a tonal hierarchy — `surface` for the base, `surface-container-low` for the page canvas, with a 1px `outline-variant` hairline. This is a system designed for product UI: it is generous, dependable, and accessible by construction. State layers, label-large typography, and 40px touch targets all match the spec. ## Color (tonal palette) The system is built on the seven-role color spec. Surface tones replace the old opacity-overlay elevation model. | Role | Token | Hex | |------|-------|-----| | Primary | `primary` | `#6750A4` | | On-Primary | `on-primary` | `#FFFFFF` | | Primary Container | `primary-container` | `#EADDFF` | | On-Primary Container | `on-primary-container` | `#21005D` | | Secondary | `secondary` | `#625B71` | | Secondary Container | `secondary-container` | `#E8DEF8` | | On-Secondary Container | `on-secondary-container` | `#1D192B` | | Surface | `surface` | `#FEF7FF` | | Surface Container Low | `surface-container-low` | `#F7F2FA` | | On-Surface | `on-surface` | `#1D1B20` | | Outline | `outline` | `#79747E` | | Outline Variant | `outline-variant` | `#CAC4D0` | ## Typography **Roboto Flex** at every level. The type scale follows the published display/headline/title/body roles. | Role | Size | Weight | Leading | Tracking | |------|------|--------|---------|----------| | Display Large | 3.5625rem | 400 | 1.12 | -0.015em | | Headline Large | 2rem | 400 | 1.25 | 0 | | Title Large | 1.375rem | 500 | 1.27 | 0 | | Body Large | 1rem | 400 | 1.50 | +0.03125em | | Label Large | 0.875rem | 500 | 1.43 | +0.00714em | Display and headline run at **weight 400** — the spec is intentionally light at the top of the scale. ## Shape - **Small:** 8px (chips, dense buttons) - **Medium:** 12px (cards, sheets) - **Large:** 16px (dialogs, large cards) - **Full:** 9999px (buttons, FAB) Buttons are **pills**. Cards are **12px medium**. Sharp corners are out of system. ## Elevation (tonal) The system uses tonal surface colors for elevation rather than opacity overlays. Six elevation levels exist; the resting card uses Level 1. - **Level 0:** `surface` — flat - **Level 1:** key shadow `0 1px 2px rgba(0,0,0,0.30)` + ambient `0 1px 3px 1px rgba(0,0,0,0.15)` - **Level 3:** `0 1px 3px rgba(0,0,0,0.30), 0 4px 8px 3px rgba(0,0,0,0.15)` — used on filled buttons and floating actions ## Buttons Five canonical variants exist in the spec; this system ships four: - **Filled** (primary) — purple background, white ink, level-1 shadow, full-rounded. The default high-emphasis CTA. - **Filled tonal** (secondary) — `secondary-container` fill #E8DEF8 with on-secondary-container ink #1D192B. No shadow. Use when filled would compete with another primary. - **Outlined** — 1px `outline` border #79747E, primary-color label. Medium emphasis. - **Text** (ghost) — bare label in primary color with state-layer hover. Lowest emphasis, used inline. All four are **full-rounded pills** (9999px). Touch height 40px. Label-large typography (14/500/+0.7px tracking). ## Charts & Data Rounded bars (4px corner radius), 12px gap, primary color with faint `outline-variant` gridlines. The spec leans on subtle gridlines — they help with scan, they don't dominate. Axis labels in `outline` #79747E. ## State Layers Interactive elements carry an 8% / 12% / 16% state layer for hover / focus / pressed in their own ink color. Implement as a translucent overlay, not as a separate fill — the underlying token color must remain readable. ## Do's and Don'ts - ✅ Use tonal surface containers for elevation. Never use opacity overlays. - ✅ Full-rounded pills for all buttons. 9999px is the spec. - ✅ Keep Roboto Flex for both display and body — single-typeface clarity is intentional. - ✅ Use `outline-variant` #CAC4D0 for hairline borders, never `outline` #79747E (that's for emphasis). - ✅ Apply label-large typography on buttons (14/500/+0.7px). Don't shrink it. - ❌ No sharp corners on buttons or cards. 8px is the floor. - ❌ No bold display headlines — weight 400 is correct at hero size. - ❌ Don't use the primary purple as a body color. It is for action and brand identity. - ❌ Don't add drop-shadows beyond the published elevation levels. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1D1B20` | | secondary | `#79747E` | | tertiary | `#6750A4` | | neutral | `#F7F2FA` | | surface | `#FEF7FF` | ### Typography - **Display:** Roboto Flex - **Body:** Roboto Flex - **Mono:** Roboto Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 3.5625rem / 1.12 / 400 / -0.015em | | H1 | 2rem / 1.25 / 400 / 0 | | H2 | 1.375rem / 1.27 / 500 / 0 | | Body | 1rem / 1.5 / 400 / 0.03125em | ### Radius - sm: `8px` - md: `12px` - lg: `16px` - pill: `9999px` ### Shadows - **card:** `0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15)` - **button:** `0 1px 3px rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15)` ### Borders - **card:** `1px solid #CAC4D0` - **divider:** `#CAC4D0` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `pill` | | background | `#6750A4` | | color | `#FFFFFF` | | border | `none` | | padding | `10px 24px` | | fontFamily | `body` | | fontWeight | `500` | | fontSize | `0.875rem` | | tracking | `0.00714em` | | shadow | `0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15)` | | hoverHint | `lift` | #### Secondary | Property | Value | |----------|-------| | shape | `pill` | | background | `#E8DEF8` | | color | `#1D192B` | | border | `none` | | padding | `10px 24px` | | fontFamily | `body` | | fontWeight | `500` | | fontSize | `0.875rem` | | tracking | `0.00714em` | #### Outline | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#6750A4` | | border | `1px solid #79747E` | | padding | `9px 24px` | | fontFamily | `body` | | fontWeight | `500` | | fontSize | `0.875rem` | | tracking | `0.00714em` | #### Ghost | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#6750A4` | | border | `none` | | padding | `10px 12px` | | fontFamily | `body` | | fontWeight | `500` | | fontSize | `0.875rem` | | tracking | `0.00714em` | | hoverHint | `glow` | ### Charts | Property | Value | |----------|-------| | variant | `rounded-bars` | | gridlines | `true` | | barRadius | `4px` | | barGap | `12px` | | highlight | `single` | | axisColor | `#79747E` | | palette | `#6750A4`, `#625B71`, `#7D5260` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 4px 12px -2px rgba(15,23,42,0.18)`, filter: `brightness(0.97)` - **focus** — outline: `2px solid rgba(103, 80, 164, 0.5)`, outline-offset: `2px` - **active** — shadow: `0 1px 2px rgba(15,23,42,0.1)`, transform: `scale(0.98)` - **disabled** — opacity: `0.4`, filter: `saturate(0.5)` - **loading** — opacity: `0.7` - **selected** — bg: `#6750A4`, color: `#FEF7FF` #### Input - **hover** — border: `1px solid rgba(103, 80, 164, 0.5)` - **focus** — border: `1.5px solid #6750A4`, shadow: `0 0 0 4px rgba(103, 80, 164, 0.15)` - **disabled** — bg: `rgba(29, 27, 32, 0.04)`, opacity: `0.4` - **error** — border: `1.5px solid #DC2626`, shadow: `0 0 0 4px rgba(220,38,38,0.15)` #### Card - **hover** — shadow: `0 12px 28px -12px rgba(15,23,42,0.18)`, transform: `translateY(-2px)` - **selected** — bg: `rgba(103, 80, 164, 0.04)`, border: `1.5px solid #6750A4` - **dragging** — shadow: `0 20px 48px -16px rgba(15,23,42,0.3)`, transform: `scale(1.02) rotate(-0.5deg)`, opacity: `0.9` #### Tab - **hover** — bg: `rgba(103, 80, 164, 0.06)`, color: `#6750A4` - **focus** — outline: `2px solid rgba(103, 80, 164, 0.5)`, outline-offset: `2px` - **selected** — color: `#6750A4`, border: `0 0 2px 0 solid #6750A4` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Quiet ease.** 240 ms ease-out for all standard transitions. Reliable, invisible — motion stays out of the way. ```css transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `160ms` | | duration.base | `240ms` | | duration.slow | `380ms` | | easing.standard | `cubic-bezier(0.4, 0, 0.2, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.34, 1.4, 0.64, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — hairline border separates. | | level1 | `0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04)` | List rows, resting cards. | | level2 | `0 4px 12px -2px rgba(15,23,42,0.1), 0 2px 6px rgba(15,23,42,0.06)` | Hover cards, popover. | | level3 | `0 12px 32px -8px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.08)` | Sheets, side panels. | | level4 | `0 28px 64px -16px rgba(15,23,42,0.28), 0 8px 24px rgba(15,23,42,0.12)` | Modals — scrim required. | ### Content - **measure:** `68ch` (max line length for body prose) - **paragraph spacing:** `1.2em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#6750A4`, underline `hover` - **blockquote:** border `3px solid rgba(103, 80, 164, 0.6)`, padding `0.5em 0 0.5em 1.25em` - **code:** background `rgba(29, 27, 32, 0.06)`, color `#1D1B20` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 16.23:1 | AA | AAA | — | | Body text on canvas | 15.48:1 | AA | AAA | — | | Muted text on surface | 4.33:1 | AA | AA-Large | `#746f79` → 4.65:1 (AA) | | Accent on surface | 6.12:1 | AA-Large | AA | — | | Accent on canvas | 5.84:1 | AA-Large | AA | — | --- # SYSTEM: Tide Material Source: https://www.freedesignmd.com/system/tide-material --- name: "Tide Material" description: "tonal-surface with a teal seed — cool tonal surfaces, full-rounded tonal buttons, Roboto Flex throughout. The tonal-surface spec applied to a calm aqua palette." tags: [saas, material, minimal, modern, light] colors: primary: "#171D1D" secondary: "#6F7979" tertiary: "#006A6A" neutral: "#F4FAFA" surface: "#FBFDFD" typography: display: "Roboto Flex" body: "Roboto Flex" mono: "Roboto Mono" scale: hero: "3.5625rem / 1.12 / 400 / -0.015em" h1: "2rem / 1.25 / 400 / 0" h2: "1.375rem / 1.27 / 500 / 0" body: "1rem / 1.5 / 400 / 0.015em" radius: sm: 8px md: 12px lg: 16px pill: 9999px shadows: card: "0 1px 2px rgba(23, 29, 29, 0.04), 0 1px 3px rgba(23, 29, 29, 0.06)" button: none borders: card: "1px solid rgba(111, 121, 121, 0.20)" divider: "rgba(111, 121, 121, 0.16)" buttons: primary: background: #006A6A color: #FFFFFF border: 1px solid #006A6A shape: pill padding: 10px 24px font: 500 / 0.875rem / 0.0125em secondary: background: #CCE8E7 color: #051F1F border: 1px solid #CCE8E7 shape: pill padding: 10px 24px font: 500 / 0.875rem / 0.0125em outline: background: transparent color: #006A6A border: 1px solid #6F7979 shape: pill padding: 9px 22px font: 500 / 0.875rem / 0.0125em ghost: background: transparent color: #006A6A border: none shape: pill padding: 10px 12px font: 500 / 0.875rem / 0.0125em hover: underline charts: variant: line stroke_width: 2 gridlines: false highlight: last dot_marker: true axis_color: "#6F7979" palette: ["#006A6A", "#171D1D", "#6F7979"] fonts_url: "https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,400;8..144,500;8..144,600;8..144,700&family=Roboto+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Tide Material ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Tide Material** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — pill shape, bg `#006A6A`, text `#FFFFFF`, border `1px solid #006A6A`, padding `10px 24px`, weight `500`. - **Secondary** — pill shape, bg `#CCE8E7`, text `#051F1F`, border `1px solid #CCE8E7`, padding `10px 24px`, weight `500`. - **Outline** — pill shape, text `#006A6A`, border `1px solid #6F7979`, padding `9px 22px`, weight `500`. - **Ghost** — pill shape, text `#006A6A`, padding `10px 12px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FBFDFD` - Border: `1px solid rgba(111, 121, 121, 0.20)` - Shadow: `0 1px 2px rgba(23, 29, 29, 0.04), 0 1px 3px rgba(23, 29, 29, 0.06)` - Radius: `radius.lg` (`16px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `line` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#006A6A`, `#171D1D`, `#6F7979`. #### Typography pairings - **Display (`Roboto Flex`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Roboto Flex`)** — paragraphs, labels, button text, form inputs. - **Mono (`Roboto Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Tide Material is the tonal-surface spec applied to a teal seed. It's the same tonal-surface logic as Lumen — surface, surface-container-low, outline-variant, full-rounded buttons — just with **teal #006A6A** as the dynamic-color primary and a cooler neutral tonal palette derived from it. This is for product UI that wants tonal-surface's calm, accessible scaffolding without the violet of the baseline. ## Color (tonal roles) - **on-surface #171D1D** — primary text. cool tonal neutral. - **outline #6F7979** — borders, captions, dividers. - **primary #006A6A** — the teal seed. CTAs, focus rings, accent ink. - **secondary-container #CCE8E7** — tonal button fill. - **surface-container-low #F4FAFA** — page canvas. - **surface #FBFDFD** — base card surface. The single seed drives every accent. No second hue exists in the system. ## Typography **Roboto Flex** at every level — the tonal-surface system's canonical face. | Role | Size | Weight | Tracking | tonal-surface token | |------|------|--------|----------|----------| | Hero | 3.5625rem | 400 | -0.015em | display-large | | H1 | 2rem | 400 | 0 | headline-large | | H2 | 1.375rem | 500 | 0 | title-large | | Body | 1rem | 400 | +0.015em | body-large | | Label | 0.875rem | 500 | +0.0125em | label-large | ## Buttons (tonal variants) All four are **full-rounded pills** at 9999px — the standard default. - **Filled (primary)** — teal fill, white label. The single primary action. - **Tonal (secondary)** — secondary-container fill (#CCE8E7), on-container ink. the tonal-surface system's preferred secondary. - **Outlined** — transparent with outline-variant border. - **Text (ghost)** — bare teal label. **No drop shadows on buttons.** tonal buttons rely on color contrast, not elevation. ## Cards Surface fill (#FBFDFD) with **outline-variant border at 20%** and tonal elevation level 1 (1px + 1px shadow stack at 4–6%). Radius is **16px** — the tonal-surface large shape token. ## Charts & Data A single 2px teal line over the cool surface canvas. **No gridlines, no fills.** A small teal dot at the latest reading. Axis labels in outline grey. ## Do's and Don'ts - ✅ Full-rounded pills on every button. the standard default. - ✅ Tonal secondaries via secondary-container, not white-with-border. - ✅ Roboto Flex everywhere. Display weight 400 — never 700. - ✅ Use elevation level 1 on cards. Never level 3+. - ❌ No second accent color. The teal seed is alone. - ❌ No serif typography. the tonal-surface system is sans-only. - ❌ No tight padding. the tonal-surface system is breathing-room first. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#171D1D` | | secondary | `#6F7979` | | tertiary | `#006A6A` | | neutral | `#F4FAFA` | | surface | `#FBFDFD` | ### Typography - **Display:** Roboto Flex - **Body:** Roboto Flex - **Mono:** Roboto Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 3.5625rem / 1.12 / 400 / -0.015em | | H1 | 2rem / 1.25 / 400 / 0 | | H2 | 1.375rem / 1.27 / 500 / 0 | | Body | 1rem / 1.5 / 400 / 0.015em | ### Radius - sm: `8px` - md: `12px` - lg: `16px` - pill: `9999px` ### Shadows - **card:** `0 1px 2px rgba(23, 29, 29, 0.04), 0 1px 3px rgba(23, 29, 29, 0.06)` - **button:** `none` ### Borders - **card:** `1px solid rgba(111, 121, 121, 0.20)` - **divider:** `rgba(111, 121, 121, 0.16)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `pill` | | background | `#006A6A` | | color | `#FFFFFF` | | border | `1px solid #006A6A` | | padding | `10px 24px` | | fontWeight | `500` | | fontSize | `0.875rem` | | tracking | `0.0125em` | #### Secondary | Property | Value | |----------|-------| | shape | `pill` | | background | `#CCE8E7` | | color | `#051F1F` | | border | `1px solid #CCE8E7` | | padding | `10px 24px` | | fontWeight | `500` | | fontSize | `0.875rem` | | tracking | `0.0125em` | #### Outline | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#006A6A` | | border | `1px solid #6F7979` | | padding | `9px 22px` | | fontWeight | `500` | | fontSize | `0.875rem` | | tracking | `0.0125em` | #### Ghost | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#006A6A` | | border | `none` | | padding | `10px 12px` | | fontWeight | `500` | | fontSize | `0.875rem` | | tracking | `0.0125em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `line` | | strokeWidth | `2` | | gridlines | `false` | | highlight | `last` | | dotMarker | `true` | | axisColor | `#6F7979` | | palette | `#006A6A`, `#171D1D`, `#6F7979` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(0, 106, 106, 0.15)`, color: `#006A6A`, border: `1px solid #006A6A` - **focus** — outline: `1px dashed #006A6A`, outline-offset: `2px` - **active** — bg: `#006A6A`, color: `#FBFDFD` - **disabled** — opacity: `0.35` - **loading** — opacity: `0.6` - **selected** — bg: `#006A6A`, color: `#FBFDFD` #### Input - **hover** — border: `1px solid rgba(0, 106, 106, 0.5)` - **focus** — bg: `rgba(0, 106, 106, 0.05)`, border: `1px solid #006A6A` - **disabled** — opacity: `0.35` - **error** — bg: `rgba(239,68,68,0.05)`, border: `1px solid #EF4444` #### Card - **hover** — border: `1px solid #006A6A` - **selected** — bg: `rgba(0, 106, 106, 0.05)`, border: `1px solid #006A6A` - **dragging** — opacity: `0.7` #### Tab - **hover** — color: `#006A6A` - **focus** — outline: `1px dashed #006A6A`, outline-offset: `1px` - **selected** — bg: `rgba(0, 106, 106, 0.1)`, color: `#006A6A` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Cursor blink.** Discrete, often stepped transitions. Like a terminal cursor: on or off. Response under 120 ms. ```css transition: all 120ms linear; ``` | Token | Value | |-------|-------| | duration.instant | `0ms` | | duration.fast | `60ms` | | duration.base | `120ms` | | duration.slow | `200ms` | | easing.standard | `linear` | | easing.decelerate | `linear` | | easing.accelerate | `linear` | | easing.spring | `steps(2, end)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the stroke carries the hierarchy. | | level1 | `none` | Border tone lifts the surface. | | level2 | `0 0 0 1px rgba(0, 106, 106, 0.5)` | Ring outline — popover. | | level3 | `0 0 0 1px #006A6A, 0 12px 32px -16px rgba(0, 106, 106, 0.4)` | Sheet with accent ring + glow. | | level4 | `0 0 0 1px #006A6A, 0 24px 64px -20px rgba(0, 106, 106, 0.5)` | Modal with accent ring + glow. | ### Content - **measure:** `78ch` (max line length for body prose) - **paragraph spacing:** `1em` - **list indent:** `1.25em` - **list gap:** `0.35em` - **link:** color `#006A6A`, underline `always` - **blockquote:** border `1px solid rgba(0, 106, 106, 0.5)`, padding `0.7em 1em` - **code:** background `rgba(0, 106, 106, 0.12)`, color `#006A6A` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 16.72:1 | AA | AAA | — | | Body text on canvas | 16.18:1 | AA | AAA | — | | Muted text on surface | 4.39:1 | AA | AA-Large | `#6a7474` → 4.71:1 (AA) | | Accent on surface | 6.29:1 | AA-Large | AA | — | | Accent on canvas | 6.09:1 | AA-Large | AA | — | --- # SYSTEM: Moss Material Source: https://www.freedesignmd.com/system/moss-material --- name: "Moss Material" description: "tonal-surface with a moss-green seed — warm tonal surfaces, full-rounded tonal buttons, Roboto Flex throughout. Calm and grounded." tags: [saas, material, minimal, modern, natural, light] colors: primary: "#1A1C16" secondary: "#74786C" tertiary: "#406836" neutral: "#F8FAEF" surface: "#FCFCEF" typography: display: "Roboto Flex" body: "Roboto Flex" mono: "Roboto Mono" scale: hero: "3.5625rem / 1.12 / 400 / -0.015em" h1: "2rem / 1.25 / 400 / 0" h2: "1.375rem / 1.27 / 500 / 0" body: "1rem / 1.5 / 400 / 0.015em" radius: sm: 8px md: 12px lg: 16px pill: 9999px shadows: card: "0 1px 2px rgba(26, 28, 22, 0.04), 0 1px 3px rgba(26, 28, 22, 0.06)" button: none borders: card: "1px solid rgba(116, 120, 108, 0.20)" divider: "rgba(116, 120, 108, 0.16)" buttons: primary: background: #406836 color: #FFFFFF border: 1px solid #406836 shape: pill padding: 10px 24px font: 500 / 0.875rem / 0.0125em secondary: background: #DAE7CF color: #0F1F08 border: 1px solid #DAE7CF shape: pill padding: 10px 24px font: 500 / 0.875rem / 0.0125em outline: background: transparent color: #406836 border: 1px solid #74786C shape: pill padding: 9px 22px font: 500 / 0.875rem / 0.0125em ghost: background: transparent color: #406836 border: none shape: pill padding: 10px 12px font: 500 / 0.875rem / 0.0125em hover: underline charts: variant: line stroke_width: 2 gridlines: false highlight: last dot_marker: true axis_color: "#74786C" palette: ["#406836", "#1A1C16", "#74786C"] fonts_url: "https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,400;8..144,500;8..144,600;8..144,700&family=Roboto+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Moss Material ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Moss Material** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — pill shape, bg `#406836`, text `#FFFFFF`, border `1px solid #406836`, padding `10px 24px`, weight `500`. - **Secondary** — pill shape, bg `#DAE7CF`, text `#0F1F08`, border `1px solid #DAE7CF`, padding `10px 24px`, weight `500`. - **Outline** — pill shape, text `#406836`, border `1px solid #74786C`, padding `9px 22px`, weight `500`. - **Ghost** — pill shape, text `#406836`, padding `10px 12px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FCFCEF` - Border: `1px solid rgba(116, 120, 108, 0.20)` - Shadow: `0 1px 2px rgba(26, 28, 22, 0.04), 0 1px 3px rgba(26, 28, 22, 0.06)` - Radius: `radius.lg` (`16px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `line` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#406836`, `#1A1C16`, `#74786C`. #### Typography pairings - **Display (`Roboto Flex`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Roboto Flex`)** — paragraphs, labels, button text, form inputs. - **Mono (`Roboto Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Moss Material applies the tonal-surface spec to a moss-green seed. The full tonal-surface logic — surface, surface-container-low, outline-variant — derived from a calm green primary and warm-neutral tonal palette. This is for wellness products, naturalist brands, sustainability tooling, and any tonal-surface product that wants to feel grounded rather than corporate. ## Color (tonal roles) - **on-surface #1A1C16** — primary text on warm tonal neutrals. - **outline #74786C** — warm mid-grey for borders, captions. - **primary #406836** — the moss-green seed. CTAs, focus rings. - **secondary-container #DAE7CF** — tonal button fill. - **surface-container-low #F8FAEF** — warm page canvas. - **surface #FCFCEF** — base card surface. ## Typography **Roboto Flex** at every level — the canonical face. | Role | Size | Weight | tonal-surface token | |------|------|--------|----------| | Hero | 3.5625rem | 400 | display-large | | H1 | 2rem | 400 | headline-large | | H2 | 1.375rem | 500 | title-large | | Body | 1rem | 400 | body-large | ## Buttons (tonal variants) - **Filled (primary)** — moss-green fill, white label. - **Tonal (secondary)** — sage container fill, deep ink label. - **Outlined** — transparent with outline-variant border. - **Text (ghost)** — bare moss label. All full-rounded pills. No drop shadows. ## Cards Surface fill with outline-variant border at 20% + tonal elevation level 1. Radius **16px**. ## Do's and Don'ts - ✅ Full-rounded pills, tonal secondaries, no shadow on buttons. - ✅ Warm canvas (#F8FAEF) — never cool-neutral. The warmth carries the moss vibe. - ✅ Roboto Flex 400 on display. - ❌ No second accent. The moss seed is alone. - ❌ No sharp corners. the tonal-surface system is rounded by default. - ❌ No serif typography. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1A1C16` | | secondary | `#74786C` | | tertiary | `#406836` | | neutral | `#F8FAEF` | | surface | `#FCFCEF` | ### Typography - **Display:** Roboto Flex - **Body:** Roboto Flex - **Mono:** Roboto Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 3.5625rem / 1.12 / 400 / -0.015em | | H1 | 2rem / 1.25 / 400 / 0 | | H2 | 1.375rem / 1.27 / 500 / 0 | | Body | 1rem / 1.5 / 400 / 0.015em | ### Radius - sm: `8px` - md: `12px` - lg: `16px` - pill: `9999px` ### Shadows - **card:** `0 1px 2px rgba(26, 28, 22, 0.04), 0 1px 3px rgba(26, 28, 22, 0.06)` - **button:** `none` ### Borders - **card:** `1px solid rgba(116, 120, 108, 0.20)` - **divider:** `rgba(116, 120, 108, 0.16)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `pill` | | background | `#406836` | | color | `#FFFFFF` | | border | `1px solid #406836` | | padding | `10px 24px` | | fontWeight | `500` | | fontSize | `0.875rem` | | tracking | `0.0125em` | #### Secondary | Property | Value | |----------|-------| | shape | `pill` | | background | `#DAE7CF` | | color | `#0F1F08` | | border | `1px solid #DAE7CF` | | padding | `10px 24px` | | fontWeight | `500` | | fontSize | `0.875rem` | | tracking | `0.0125em` | #### Outline | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#406836` | | border | `1px solid #74786C` | | padding | `9px 22px` | | fontWeight | `500` | | fontSize | `0.875rem` | | tracking | `0.0125em` | #### Ghost | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#406836` | | border | `none` | | padding | `10px 12px` | | fontWeight | `500` | | fontSize | `0.875rem` | | tracking | `0.0125em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `line` | | strokeWidth | `2` | | gridlines | `false` | | highlight | `last` | | dotMarker | `true` | | axisColor | `#74786C` | | palette | `#406836`, `#1A1C16`, `#74786C` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 4px 12px -2px rgba(15,23,42,0.18)`, filter: `brightness(0.97)` - **focus** — outline: `2px solid rgba(64, 104, 54, 0.5)`, outline-offset: `2px` - **active** — shadow: `0 1px 2px rgba(15,23,42,0.1)`, transform: `scale(0.98)` - **disabled** — opacity: `0.4`, filter: `saturate(0.5)` - **loading** — opacity: `0.7` - **selected** — bg: `#406836`, color: `#FCFCEF` #### Input - **hover** — border: `1px solid rgba(64, 104, 54, 0.5)` - **focus** — border: `1.5px solid #406836`, shadow: `0 0 0 4px rgba(64, 104, 54, 0.15)` - **disabled** — bg: `rgba(26, 28, 22, 0.04)`, opacity: `0.4` - **error** — border: `1.5px solid #DC2626`, shadow: `0 0 0 4px rgba(220,38,38,0.15)` #### Card - **hover** — shadow: `0 12px 28px -12px rgba(15,23,42,0.18)`, transform: `translateY(-2px)` - **selected** — bg: `rgba(64, 104, 54, 0.04)`, border: `1.5px solid #406836` - **dragging** — shadow: `0 20px 48px -16px rgba(15,23,42,0.3)`, transform: `scale(1.02) rotate(-0.5deg)`, opacity: `0.9` #### Tab - **hover** — bg: `rgba(64, 104, 54, 0.06)`, color: `#406836` - **focus** — outline: `2px solid rgba(64, 104, 54, 0.5)`, outline-offset: `2px` - **selected** — color: `#406836`, border: `0 0 2px 0 solid #406836` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Quiet ease.** 240 ms ease-out for all standard transitions. Reliable, invisible — motion stays out of the way. ```css transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `160ms` | | duration.base | `240ms` | | duration.slow | `380ms` | | easing.standard | `cubic-bezier(0.4, 0, 0.2, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.34, 1.4, 0.64, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — hairline border separates. | | level1 | `0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04)` | List rows, resting cards. | | level2 | `0 4px 12px -2px rgba(15,23,42,0.1), 0 2px 6px rgba(15,23,42,0.06)` | Hover cards, popover. | | level3 | `0 12px 32px -8px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.08)` | Sheets, side panels. | | level4 | `0 28px 64px -16px rgba(15,23,42,0.28), 0 8px 24px rgba(15,23,42,0.12)` | Modals — scrim required. | ### Content - **measure:** `68ch` (max line length for body prose) - **paragraph spacing:** `1.2em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#406836`, underline `hover` - **blockquote:** border `3px solid rgba(64, 104, 54, 0.6)`, padding `0.5em 0 0.5em 1.25em` - **code:** background `rgba(26, 28, 22, 0.06)`, color `#1A1C16` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 16.63:1 | AA | AAA | — | | Body text on canvas | 16.3:1 | AA | AAA | — | | Muted text on surface | 4.37:1 | AA | AA-Large | `#6f7367` → 4.7:1 (AA) | | Accent on surface | 6.25:1 | AA-Large | AA | — | | Accent on canvas | 6.12:1 | AA-Large | AA | — | --- # SYSTEM: Slate Material Source: https://www.freedesignmd.com/system/slate-material --- name: "Slate Material" description: "tonal-surface with a slate-blue seed — cool tonal surfaces, full-rounded tonal buttons, Roboto Flex throughout. The trustworthy B2B tonal-surface dialect." tags: [saas, material, minimal, modern, trustworthy, light, b2b] colors: primary: "#1A1C1E" secondary: "#73777F" tertiary: "#385F9F" neutral: "#F4F8FB" surface: "#FAFCFE" typography: display: "Roboto Flex" body: "Roboto Flex" mono: "Roboto Mono" scale: hero: "3.5625rem / 1.12 / 400 / -0.015em" h1: "2rem / 1.25 / 400 / 0" h2: "1.375rem / 1.27 / 500 / 0" body: "1rem / 1.5 / 400 / 0.015em" radius: sm: 8px md: 12px lg: 16px pill: 9999px shadows: card: "0 1px 2px rgba(26, 28, 30, 0.04), 0 1px 3px rgba(26, 28, 30, 0.06)" button: none borders: card: "1px solid rgba(115, 119, 127, 0.20)" divider: "rgba(115, 119, 127, 0.16)" buttons: primary: background: #385F9F color: #FFFFFF border: 1px solid #385F9F shape: pill padding: 10px 24px font: 500 / 0.875rem / 0.0125em secondary: background: #D6E3F7 color: #0B1B33 border: 1px solid #D6E3F7 shape: pill padding: 10px 24px font: 500 / 0.875rem / 0.0125em outline: background: transparent color: #385F9F border: 1px solid #73777F shape: pill padding: 9px 22px font: 500 / 0.875rem / 0.0125em ghost: background: transparent color: #385F9F border: none shape: pill padding: 10px 12px font: 500 / 0.875rem / 0.0125em hover: underline charts: variant: line stroke_width: 2 gridlines: false highlight: last dot_marker: true axis_color: "#73777F" palette: ["#385F9F", "#1A1C1E", "#73777F"] fonts_url: "https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,400;8..144,500;8..144,600;8..144,700&family=Roboto+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Slate Material ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Slate Material** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — pill shape, bg `#385F9F`, text `#FFFFFF`, border `1px solid #385F9F`, padding `10px 24px`, weight `500`. - **Secondary** — pill shape, bg `#D6E3F7`, text `#0B1B33`, border `1px solid #D6E3F7`, padding `10px 24px`, weight `500`. - **Outline** — pill shape, text `#385F9F`, border `1px solid #73777F`, padding `9px 22px`, weight `500`. - **Ghost** — pill shape, text `#385F9F`, padding `10px 12px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FAFCFE` - Border: `1px solid rgba(115, 119, 127, 0.20)` - Shadow: `0 1px 2px rgba(26, 28, 30, 0.04), 0 1px 3px rgba(26, 28, 30, 0.06)` - Radius: `radius.lg` (`16px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `line` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#385F9F`, `#1A1C1E`, `#73777F`. #### Typography pairings - **Display (`Roboto Flex`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Roboto Flex`)** — paragraphs, labels, button text, form inputs. - **Mono (`Roboto Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Slate Material applies the tonal-surface spec to a deep slate-blue seed. Cool neutral tonal palette, full-rounded tonal buttons, Roboto Flex everywhere. The B2B tonal-surface dialect — calm, trustworthy, dependable. For dashboards, infrastructure tooling, fintech, and product UI that needs the tonal-surface system's accessibility scaffolding with a serious tone. ## Color (tonal roles) - **on-surface #1A1C1E** — primary ink. - **outline #73777F** — cool mid-grey. - **primary #385F9F** — slate-blue seed. CTAs, focus. - **secondary-container #D6E3F7** — tonal button fill. - **surface-container-low #F4F8FB** — cool page canvas. - **surface #FAFCFE** — base card surface. ## Typography **Roboto Flex** everywhere. | Role | Size | Weight | tonal-surface token | |------|------|--------|----------| | Hero | 3.5625rem | 400 | display-large | | H1 | 2rem | 400 | headline-large | | H2 | 1.375rem | 500 | title-large | | Body | 1rem | 400 | body-large | ## Buttons - **Filled (primary)** — slate-blue fill. - **Tonal (secondary)** — sky container fill. - **Outlined** — outline-variant border. - **Text (ghost)** — bare slate label. Full-rounded pills, no shadows. ## Cards Surface fill, outline-variant border at 20%, tonal elevation level 1. Radius **16px**. ## Do's and Don'ts - ✅ Full-rounded pills, tonal secondaries. - ✅ Cool canvas (#F4F8FB) — pairs with the slate seed. - ✅ Roboto Flex 400 on display, never 700. - ❌ No second accent. Slate-blue is alone. - ❌ No serifs. - ❌ No tonal elevation level 3+ on standard cards. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1A1C1E` | | secondary | `#73777F` | | tertiary | `#385F9F` | | neutral | `#F4F8FB` | | surface | `#FAFCFE` | ### Typography - **Display:** Roboto Flex - **Body:** Roboto Flex - **Mono:** Roboto Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 3.5625rem / 1.12 / 400 / -0.015em | | H1 | 2rem / 1.25 / 400 / 0 | | H2 | 1.375rem / 1.27 / 500 / 0 | | Body | 1rem / 1.5 / 400 / 0.015em | ### Radius - sm: `8px` - md: `12px` - lg: `16px` - pill: `9999px` ### Shadows - **card:** `0 1px 2px rgba(26, 28, 30, 0.04), 0 1px 3px rgba(26, 28, 30, 0.06)` - **button:** `none` ### Borders - **card:** `1px solid rgba(115, 119, 127, 0.20)` - **divider:** `rgba(115, 119, 127, 0.16)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `pill` | | background | `#385F9F` | | color | `#FFFFFF` | | border | `1px solid #385F9F` | | padding | `10px 24px` | | fontWeight | `500` | | fontSize | `0.875rem` | | tracking | `0.0125em` | #### Secondary | Property | Value | |----------|-------| | shape | `pill` | | background | `#D6E3F7` | | color | `#0B1B33` | | border | `1px solid #D6E3F7` | | padding | `10px 24px` | | fontWeight | `500` | | fontSize | `0.875rem` | | tracking | `0.0125em` | #### Outline | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#385F9F` | | border | `1px solid #73777F` | | padding | `9px 22px` | | fontWeight | `500` | | fontSize | `0.875rem` | | tracking | `0.0125em` | #### Ghost | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#385F9F` | | border | `none` | | padding | `10px 12px` | | fontWeight | `500` | | fontSize | `0.875rem` | | tracking | `0.0125em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `line` | | strokeWidth | `2` | | gridlines | `false` | | highlight | `last` | | dotMarker | `true` | | axisColor | `#73777F` | | palette | `#385F9F`, `#1A1C1E`, `#73777F` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 4px 12px -2px rgba(15,23,42,0.18)`, filter: `brightness(0.97)` - **focus** — outline: `2px solid rgba(56, 95, 159, 0.5)`, outline-offset: `2px` - **active** — shadow: `0 1px 2px rgba(15,23,42,0.1)`, transform: `scale(0.98)` - **disabled** — opacity: `0.4`, filter: `saturate(0.5)` - **loading** — opacity: `0.7` - **selected** — bg: `#385F9F`, color: `#FAFCFE` #### Input - **hover** — border: `1px solid rgba(56, 95, 159, 0.5)` - **focus** — border: `1.5px solid #385F9F`, shadow: `0 0 0 4px rgba(56, 95, 159, 0.15)` - **disabled** — bg: `rgba(26, 28, 30, 0.04)`, opacity: `0.4` - **error** — border: `1.5px solid #DC2626`, shadow: `0 0 0 4px rgba(220,38,38,0.15)` #### Card - **hover** — shadow: `0 12px 28px -12px rgba(15,23,42,0.18)`, transform: `translateY(-2px)` - **selected** — bg: `rgba(56, 95, 159, 0.04)`, border: `1.5px solid #385F9F` - **dragging** — shadow: `0 20px 48px -16px rgba(15,23,42,0.3)`, transform: `scale(1.02) rotate(-0.5deg)`, opacity: `0.9` #### Tab - **hover** — bg: `rgba(56, 95, 159, 0.06)`, color: `#385F9F` - **focus** — outline: `2px solid rgba(56, 95, 159, 0.5)`, outline-offset: `2px` - **selected** — color: `#385F9F`, border: `0 0 2px 0 solid #385F9F` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Quiet ease.** 240 ms ease-out for all standard transitions. Reliable, invisible — motion stays out of the way. ```css transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `160ms` | | duration.base | `240ms` | | duration.slow | `380ms` | | easing.standard | `cubic-bezier(0.4, 0, 0.2, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.34, 1.4, 0.64, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — hairline border separates. | | level1 | `0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04)` | List rows, resting cards. | | level2 | `0 4px 12px -2px rgba(15,23,42,0.1), 0 2px 6px rgba(15,23,42,0.06)` | Hover cards, popover. | | level3 | `0 12px 32px -8px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.08)` | Sheets, side panels. | | level4 | `0 28px 64px -16px rgba(15,23,42,0.28), 0 8px 24px rgba(15,23,42,0.12)` | Modals — scrim required. | ### Content - **measure:** `68ch` (max line length for body prose) - **paragraph spacing:** `1.2em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#385F9F`, underline `hover` - **blockquote:** border `3px solid rgba(56, 95, 159, 0.6)`, padding `0.5em 0 0.5em 1.25em` - **code:** background `rgba(26, 28, 30, 0.06)`, color `#1A1C1E` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 16.62:1 | AA | AAA | — | | Body text on canvas | 16.01:1 | AA | AAA | — | | Muted text on surface | 4.37:1 | AA | AA-Large | `#6e727a` → 4.69:1 (AA) | | Accent on surface | 6.18:1 | AA-Large | AA | — | | Accent on canvas | 5.95:1 | AA-Large | AA | — | --- # SYSTEM: Soft Pastel SaaS Source: https://www.freedesignmd.com/system/soft-pastel-saas --- name: "Soft Pastel SaaS" description: "Lavender and cream, generous rounding, friendly and approachable." tags: [saas, playful, minimal, modern] colors: primary: "#1F1B2E" secondary: "#6B6280" tertiary: "#A78BFA" neutral: "#FEF7ED" surface: "#FFFFFF" typography: display: Inter body: Inter mono: "JetBrains Mono" radius: sm: 8px md: 10px lg: 12px buttons: primary: background: #A78BFA color: #1F1B2E border: none shape: rounded padding: 12px 20px font: 600 shadow: 0 1px 2px rgba(167,139,250,0.25) secondary: background: #FEF7ED color: #1F1B2E border: none shape: rounded padding: 12px 20px font: 600 outline: background: #FFFFFF color: #1F1B2E border: 1px solid #EFE6D8 shape: rounded padding: 12px 20px font: 600 ghost: background: transparent color: #A78BFA border: none shape: rounded padding: 10px 14px font: 600 fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Soft Pastel SaaS ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Soft Pastel SaaS** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#A78BFA`, text `#1F1B2E`, padding `12px 20px`, weight `600`, shadow `0 1px 2px rgba(167,139,250,0.25)`. - **Secondary** — rounded shape, bg `#FEF7ED`, text `#1F1B2E`, padding `12px 20px`, weight `600`. - **Outline** — rounded shape, bg `#FFFFFF`, text `#1F1B2E`, border `1px solid #EFE6D8`, padding `12px 20px`, weight `600`. - **Ghost** — rounded shape, text `#A78BFA`, padding `10px 14px`, weight `600`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FFFFFF` - Radius: `radius.lg` (`12px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Typography pairings - **Display (`Inter`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview A modern SaaS aesthetic with warmth. Pastel lavender on cream — approachable but professional. Rounded corners and soft shadows give the UI a tactile, friendly feel. ## Colors - **Primary #1F1B2E** — deep aubergine, used for text. - **Secondary #6B6280** — muted text. - **Tertiary #A78BFA** — lavender accent. Used on primary CTAs and highlights. - **Neutral #FEF7ED** — cream background. - **Surface #FFFFFF** — cards. ## Typography **Inter** for everything. Tight tracking on display, comfortable line-height on body. ## Spacing 4px grid. Generous: aim for 88px between sections. ## Components Soft 12px radii. Light shadows. Lavender CTAs with dark text for contrast. ## Icons `lucide-react`, stroke width 1.5, 20px default. Inherit text color. ## Do's and Don'ts - ✅ Use lavender on primary actions. - ✅ Soft shadows (max 4–6px blur). - ❌ Don't use sharp corners. - ❌ Don't pair with bright saturated colors. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1F1B2E` | | secondary | `#6B6280` | | tertiary | `#A78BFA` | | neutral | `#FEF7ED` | | surface | `#FFFFFF` | ### Typography - **Display:** Inter - **Body:** Inter - **Mono:** JetBrains Mono ### Radius - sm: `8px` - md: `10px` - lg: `12px` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#A78BFA` | | color | `#1F1B2E` | | border | `none` | | padding | `12px 20px` | | fontWeight | `600` | | shadow | `0 1px 2px rgba(167,139,250,0.25)` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#FEF7ED` | | color | `#1F1B2E` | | border | `none` | | padding | `12px 20px` | | fontWeight | `600` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `#FFFFFF` | | color | `#1F1B2E` | | border | `1px solid #EFE6D8` | | padding | `12px 20px` | | fontWeight | `600` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#A78BFA` | | border | `none` | | padding | `10px 14px` | | fontWeight | `600` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 8px 24px -10px rgba(167, 139, 250, 0.35)`, transform: `translateY(-1px)`, filter: `brightness(1.02)` - **focus** — outline: `2px solid rgba(167, 139, 250, 0.4)`, outline-offset: `3px` - **active** — transform: `translateY(0) scale(0.98)` - **disabled** — opacity: `0.4`, filter: `saturate(0.5)` - **loading** — opacity: `0.65` - **selected** — bg: `rgba(167, 139, 250, 0.18)`, color: `#A78BFA` #### Input - **hover** — bg: `rgba(167, 139, 250, 0.03)`, border: `1px solid rgba(167, 139, 250, 0.4)` - **focus** — border: `1px solid rgba(167, 139, 250, 0.6)`, shadow: `0 0 0 4px rgba(167, 139, 250, 0.12)` - **disabled** — opacity: `0.4` - **error** — border: `1px solid rgba(244,114,182,0.7)`, shadow: `0 0 0 4px rgba(244,114,182,0.15)` #### Card - **hover** — shadow: `0 16px 40px -16px rgba(167, 139, 250, 0.3)`, transform: `translateY(-3px)` - **selected** — bg: `rgba(167, 139, 250, 0.04)`, border: `1px solid rgba(167, 139, 250, 0.5)` - **dragging** — transform: `scale(1.03) rotate(-0.8deg)`, opacity: `0.92` #### Tab - **hover** — bg: `rgba(167, 139, 250, 0.08)`, color: `#A78BFA` - **focus** — outline: `2px solid rgba(167, 139, 250, 0.4)`, outline-offset: `2px` - **selected** — bg: `rgba(167, 139, 250, 0.16)`, color: `#A78BFA` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Soft fade.** Long, gentle transitions with a symmetric easing curve. Motion is calming, never intrusive. ```css transition: all 400ms cubic-bezier(0.45, 0.05, 0.55, 0.95); ``` | Token | Value | |-------|-------| | duration.instant | `120ms` | | duration.fast | `240ms` | | duration.base | `400ms` | | duration.slow | `600ms` | | easing.standard | `cubic-bezier(0.45, 0.05, 0.55, 0.95)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.45, 1.4, 0.55, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the tone separates, not the shadow. | | level1 | `0 2px 6px -2px rgba(167, 139, 250, 0.12)` | Soft tinted lift. | | level2 | `0 8px 24px -10px rgba(167, 139, 250, 0.2)` | Floating card — pastel-tinted shadow. | | level3 | `0 16px 48px -16px rgba(167, 139, 250, 0.28)` | Sheet — visible tinted glow. | | level4 | `0 32px 80px -24px rgba(167, 139, 250, 0.4)` | Modal — tinted wash, scrim required. | ### Content - **measure:** `64ch` (max line length for body prose) - **paragraph spacing:** `1.35em` - **list indent:** `1.5em` - **list gap:** `0.6em` - **link:** color `#A78BFA`, underline `hover` - **blockquote:** border `2px solid rgba(167, 139, 250, 0.5)`, padding `0.9em 1.2em` - **code:** background `rgba(167, 139, 250, 0.1)`, color `#1F1B2E` ### Accessibility (WCAG 2.1) **Overall:** FAIL | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 16.74:1 | AA | AAA | — | | Body text on canvas | 15.74:1 | AA | AAA | — | | Muted text on surface | 5.7:1 | AA | AA | — | | Accent on surface | 2.72:1 | AA-Large | FAIL | `#7a50f7` → 4.86:1 (AA) | | Accent on canvas | 2.56:1 | AA-Large | FAIL | `#7a50f7` → 4.57:1 (AA) | --- # SYSTEM: Aurora Haze Source: https://www.freedesignmd.com/system/aurora-haze --- name: "Aurora Haze" description: "Warm grainy aurora applied with restraint — amber bleeds into coral and softens into violet, with real fractal-noise grain layered on top. Inter throughout, generous bone-white surfaces, and the gradient appears in exactly two places: the primary CTA and the featured hero tile. Everything else stays calm so the bloom carries." tags: [grainy, gradient, modern, premium, light] colors: primary: "#171419" secondary: "#6b6470" tertiary: "#ef5a8a" neutral: "#fbf8f5" surface: "#ffffff" typography: display: Inter body: Inter mono: "JetBrains Mono" scale: hero: "4.5rem / 1.02 / 700 / -0.04em" h1: "2.75rem / 1.1 / 700 / -0.03em" h2: "1.625rem / 1.22 / 600 / -0.018em" body: "1.0625rem / 1.6 / 400 / -0.005em" radius: sm: 10px md: 16px lg: 22px pill: 9999px shadows: card: "rgba(23,20,25,0.04) 0 1px 2px, rgba(23,20,25,0.06) 0 14px 36px -16px" button: "rgba(240,102,148,0.28) 0 10px 24px -10px, rgba(140,92,255,0.22) 0 6px 18px -8px" borders: card: "1px solid rgba(23,20,25,0.06)" divider: rgba(23,20,25,0.08) buttons: primary: background: url("data:image/svg+xml;utf8,"), radial-gradient(ellipse 90% 70% at 12% 88%, #ff8a4c 0%, transparent 55%), radial-gradient(ellipse 70% 80% at 88% 12%, #c47bff 0%, transparent 55%), radial-gradient(ellipse 50% 60% at 55% 50%, #ff6b9b 0%, transparent 60%), linear-gradient(135deg, #ffb27a 0%, #f06694 45%, #8c5cff 100%) color: #ffffff border: none shape: rounded padding: 12px 22px font: 700 / 0.9375rem shadow: rgba(240,102,148,0.28) 0 10px 24px -10px, rgba(140,92,255,0.22) 0 6px 18px -8px secondary: background: #171419 color: #fbf8f5 border: none shape: rounded padding: 12px 22px font: 600 / 0.9375rem outline: background: transparent color: #171419 border: 1px solid rgba(23,20,25,0.16) shape: rounded padding: 12px 22px font: 600 / 0.9375rem ghost: background: transparent color: #6b6470 border: none shape: rounded padding: 12px 18px font: 600 / 0.9375rem charts: variant: "rounded-bars" stroke_width: 1.5 fill_opacity: 0.12 gridlines: false bar_gap: 10px dot_marker: true palette: [rgba(23,20,25,0.10), rgba(23,20,25,0.10), rgba(23,20,25,0.10), "#f06694", rgba(23,20,25,0.10), rgba(23,20,25,0.10), rgba(23,20,25,0.10)] fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Aurora Haze ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Aurora Haze** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `url("data:image/svg+xml;utf8,"), radial-gradient(ellipse 90% 70% at 12% 88%, #ff8a4c 0%, transparent 55%), radial-gradient(ellipse 70% 80% at 88% 12%, #c47bff 0%, transparent 55%), radial-gradient(ellipse 50% 60% at 55% 50%, #ff6b9b 0%, transparent 60%), linear-gradient(135deg, #ffb27a 0%, #f06694 45%, #8c5cff 100%)`, text `#ffffff`, padding `12px 22px`, weight `700`, shadow `rgba(240,102,148,0.28) 0 10px 24px -10px, rgba(140,92,255,0.22) 0 6px 18px -8px`. - **Secondary** — rounded shape, bg `#171419`, text `#fbf8f5`, padding `12px 22px`, weight `600`. - **Outline** — rounded shape, text `#171419`, border `1px solid rgba(23,20,25,0.16)`, padding `12px 22px`, weight `600`. - **Ghost** — rounded shape, text `#6b6470`, padding `12px 18px`, weight `600`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#ffffff` - Border: `1px solid rgba(23,20,25,0.06)` - Shadow: `rgba(23,20,25,0.04) 0 1px 2px, rgba(23,20,25,0.06) 0 14px 36px -16px` - Radius: `radius.lg` (`22px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `rounded-bars` - No gridlines — let the bars/lines carry the data. - Use the declared palette in order: `rgba(23,20,25,0.10)`, `rgba(23,20,25,0.10)`, `rgba(23,20,25,0.10)`, `#f06694`, `rgba(23,20,25,0.10)`, `rgba(23,20,25,0.10)`, `rgba(23,20,25,0.10)`. #### Typography pairings - **Display (`Inter`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Aurora Haze is a calm bone-white surface with one hot moment: a multi-stop grainy aurora gradient that runs amber → coral → soft violet, with real SVG fractal-noise grain layered on top. The gradient lives in exactly two places — the primary CTA and the featured hero tile — so it always reads as a deliberate bloom, never decoration. Inter carries every word at 400/600/700; numbers shift to JetBrains Mono. Surfaces are flat ivory, hairlines at 6% ink, generous white space. The discipline is in placement: the gradient is never repeated on a third surface. Buttons that aren't the CTA fall back to graphite, outline, or ghost. The chart uses muted graphite bars except for one column rendered in coral — the visual rhyme tells you "this is the active value" without copy. **Signature moves** - Multi-stop grainy gradient (amber → coral → violet) with **real fractal-noise grain** baked in via an inline SVG `feTurbulence` data URI - Gradient appears exactly twice per screen: primary CTA + featured hero tile - The **active bar** in the chart picks up the coral stop from the gradient — visual rhyme - Bone-white surface (`#fbf8f5`), hairlines at 6% ink, no decorative borders - Inter at every level — display 700, body 400, UI 600 ## 2. The grainy gradient (copy this exactly) The grain is not a Photoshop filter or a Tailwind class — it is an inline SVG with `feTurbulence` set to `fractalNoise`, baseFrequency `0.9`, two octaves, stitched. The noise layer sits **on top** of a stack of three radial-gradient blooms over a 135° linear base. Stop order matters. ```css background: url("data:image/svg+xml;utf8,"), radial-gradient(ellipse 90% 70% at 12% 88%, #ff8a4c 0%, transparent 55%), radial-gradient(ellipse 70% 80% at 88% 12%, #c47bff 0%, transparent 55%), radial-gradient(ellipse 50% 60% at 55% 50%, #ff6b9b 0%, transparent 60%), linear-gradient(135deg, #ffb27a 0%, #f06694 45%, #8c5cff 100%); ``` The `feColorMatrix` reduces the noise to alpha-only (no color shift), so the grain darkens the gradient instead of tinting it. The 0.55 opacity is the calibrated value — anything higher reads as "dirty," anything lower disappears on retina screens. ### Stop palette - **Amber bloom** `#ff8a4c` — bottom-left anchor - **Violet bloom** `#c47bff` — top-right counter-anchor - **Coral core** `#ff6b9b` — center bloom, 60% reach - **Linear base** `#ffb27a → #f06694 → #8c5cff` at 135° ## 3. Palette ### Surface - **Bone** `#fbf8f5` — page background - **Snow** `#ffffff` — cards, sheets ### Ink - **Ink** `#171419` — text, headings, secondary CTA fill - **Ink 55** `#6b6470` — secondary text, mono labels - **Hairline** `rgba(23,20,25,0.06)` — every divider ### Accent (single) - **Coral** `#ef5a8a` — picked from the gradient's mid stop, used for active tab underline + active chart bar ## 4. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Inter | 72px | 700 | 1.02 | -0.04em | | H1 | Inter | 44px | 700 | 1.10 | -0.03em | | H2 | Inter | 26px | 600 | 1.22 | -0.018em | | Body | Inter | 17px | 400 | 1.6 | -0.005em | | UI / Button | Inter | 15px | 700 | 1.4 | 0 | | Number | JetBrains Mono | 13px | 500 | 1.0 | 0 | Inter at three weights only — 400, 600, 700. The 800 weight is reserved for the optional oversized gradient KPI inside the featured tile. ## 5. Buttons ### Primary (Grainy Gradient Box) A solid box (not a pill) with the full grainy-gradient stack as background, white label, no border. The drop shadow uses two layered colored shadows that pick the coral and violet stops — they bloom under the button like a soft halo. ```css background: /* the full grainy gradient stack from §2 */; color: #ffffff; padding: 12px 22px; border-radius: 16px; box-shadow: rgba(240,102,148,0.28) 0 10px 24px -10px, rgba(140,92,255,0.22) 0 6px 18px -8px; font: 700 15px/1.4 Inter; ``` ### Secondary (Graphite Box) Solid ink `#171419`, bone label, same 16px radius, no shadow. The graphite-on-bone pairs cleanly with the gradient without competing. ### Outline & Ghost - Outline: transparent, 1px hairline at 16% ink - Ghost: no border, ink-55, hover lifts to ink ## 6. The Featured tile The featured hero tile uses the **same exact gradient stack** as the primary CTA. White display headline at 32px in Inter 700, label "Featured" in mono at 11px uppercase 0.12em tracking. No badge, no icon — the gradient does the work. ## 7. Charts Rounded bars (pill ends), 10px gap. Six bars in graphite at 10% opacity, **one bar in coral** `#f06694` (the gradient's mid stop). The eye reads the coral bar as the active value because it visually rhymes with the CTA — no separate legend needed. ## 8. Tabs Underline 1.5px in coral. Inactive tabs in Inter 600 ink-55. Hover lifts to ink. Active = ink + coral underline. ## 9. Spacing - Base 4px - Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96` - Section padding: 96px desktop, 48px mobile ## 10. Do's & don'ts ✅ **Do** - Use the full grainy-gradient stack from §2 verbatim — the noise layer is what makes it expensive - Apply the gradient exactly twice per screen: primary CTA + featured tile - Pick the active chart bar from the gradient's coral stop so it rhymes with the CTA - Layer two colored shadows under the gradient button — coral + violet, low opacity, wide spread ❌ **Don't** - Apply the gradient to a third surface (cards, secondary buttons, headers) — it loses its weight - Use a 2-stop gradient (e.g. peach → pink) — this system is multi-stop with grain, never the cliché - Skip the SVG noise layer — without grain the gradient reads as generic - Use coral anywhere except active states (chart bar, tab underline) — the gradient owns the bloom --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#171419` | | secondary | `#6b6470` | | tertiary | `#ef5a8a` | | neutral | `#fbf8f5` | | surface | `#ffffff` | ### Typography - **Display:** Inter - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.5rem / 1.02 / 700 / -0.04em | | H1 | 2.75rem / 1.1 / 700 / -0.03em | | H2 | 1.625rem / 1.22 / 600 / -0.018em | | Body | 1.0625rem / 1.6 / 400 / -0.005em | ### Radius - sm: `10px` - md: `16px` - lg: `22px` - pill: `9999px` ### Shadows - **card:** `rgba(23,20,25,0.04) 0 1px 2px, rgba(23,20,25,0.06) 0 14px 36px -16px` - **button:** `rgba(240,102,148,0.28) 0 10px 24px -10px, rgba(140,92,255,0.22) 0 6px 18px -8px` ### Borders - **card:** `1px solid rgba(23,20,25,0.06)` - **divider:** `rgba(23,20,25,0.08)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `url("data:image/svg+xml;utf8,"), radial-gradient(ellipse 90% 70% at 12% 88%, #ff8a4c 0%, transparent 55%), radial-gradient(ellipse 70% 80% at 88% 12%, #c47bff 0%, transparent 55%), radial-gradient(ellipse 50% 60% at 55% 50%, #ff6b9b 0%, transparent 60%), linear-gradient(135deg, #ffb27a 0%, #f06694 45%, #8c5cff 100%)` | | color | `#ffffff` | | border | `none` | | padding | `12px 22px` | | fontWeight | `700` | | fontSize | `0.9375rem` | | shadow | `rgba(240,102,148,0.28) 0 10px 24px -10px, rgba(140,92,255,0.22) 0 6px 18px -8px` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#171419` | | color | `#fbf8f5` | | border | `none` | | padding | `12px 22px` | | fontWeight | `600` | | fontSize | `0.9375rem` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#171419` | | border | `1px solid rgba(23,20,25,0.16)` | | padding | `12px 22px` | | fontWeight | `600` | | fontSize | `0.9375rem` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#6b6470` | | border | `none` | | padding | `12px 18px` | | fontWeight | `600` | | fontSize | `0.9375rem` | ### Charts | Property | Value | |----------|-------| | variant | `rounded-bars` | | strokeWidth | `1.5` | | fillOpacity | `0.12` | | gridlines | `false` | | barGap | `10px` | | dotMarker | `true` | | palette | `rgba(23,20,25,0.10)`, `rgba(23,20,25,0.10)`, `rgba(23,20,25,0.10)`, `#f06694`, `rgba(23,20,25,0.10)`, `rgba(23,20,25,0.10)`, `rgba(23,20,25,0.10)` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 4px 12px -2px rgba(15,23,42,0.18)`, filter: `brightness(0.97)` - **focus** — outline: `2px solid rgba(239, 90, 138, 0.5)`, outline-offset: `2px` - **active** — shadow: `0 1px 2px rgba(15,23,42,0.1)`, transform: `scale(0.98)` - **disabled** — opacity: `0.4`, filter: `saturate(0.5)` - **loading** — opacity: `0.7` - **selected** — bg: `#ef5a8a`, color: `#ffffff` #### Input - **hover** — border: `1px solid rgba(239, 90, 138, 0.5)` - **focus** — border: `1.5px solid #ef5a8a`, shadow: `0 0 0 4px rgba(239, 90, 138, 0.15)` - **disabled** — bg: `rgba(23, 20, 25, 0.04)`, opacity: `0.4` - **error** — border: `1.5px solid #DC2626`, shadow: `0 0 0 4px rgba(220,38,38,0.15)` #### Card - **hover** — shadow: `0 12px 28px -12px rgba(15,23,42,0.18)`, transform: `translateY(-2px)` - **selected** — bg: `rgba(239, 90, 138, 0.04)`, border: `1.5px solid #ef5a8a` - **dragging** — shadow: `0 20px 48px -16px rgba(15,23,42,0.3)`, transform: `scale(1.02) rotate(-0.5deg)`, opacity: `0.9` #### Tab - **hover** — bg: `rgba(239, 90, 138, 0.06)`, color: `#ef5a8a` - **focus** — outline: `2px solid rgba(239, 90, 138, 0.5)`, outline-offset: `2px` - **selected** — color: `#ef5a8a`, border: `0 0 2px 0 solid #ef5a8a` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Quiet ease.** 240 ms ease-out for all standard transitions. Reliable, invisible — motion stays out of the way. ```css transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `160ms` | | duration.base | `240ms` | | duration.slow | `380ms` | | easing.standard | `cubic-bezier(0.4, 0, 0.2, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.34, 1.4, 0.64, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — hairline border separates. | | level1 | `0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04)` | List rows, resting cards. | | level2 | `0 4px 12px -2px rgba(15,23,42,0.1), 0 2px 6px rgba(15,23,42,0.06)` | Hover cards, popover. | | level3 | `0 12px 32px -8px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.08)` | Sheets, side panels. | | level4 | `0 28px 64px -16px rgba(15,23,42,0.28), 0 8px 24px rgba(15,23,42,0.12)` | Modals — scrim required. | ### Content - **measure:** `68ch` (max line length for body prose) - **paragraph spacing:** `1.2em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#ef5a8a`, underline `hover` - **blockquote:** border `3px solid rgba(239, 90, 138, 0.6)`, padding `0.5em 0 0.5em 1.25em` - **code:** background `rgba(23, 20, 25, 0.06)`, color `#171419` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 18.25:1 | AA | AAA | — | | Body text on canvas | 17.25:1 | AA | AAA | — | | Muted text on surface | 5.7:1 | AA | AA | — | | Accent on surface | 3.23:1 | AA-Large | AA-Large | — | | Accent on canvas | 3.05:1 | AA-Large | AA-Large | — | --- # SYSTEM: Solflare Bloom Source: https://www.freedesignmd.com/system/solflare-bloom --- name: "Solflare Bloom" description: "A low-sun grainy gradient that runs deep ember to marigold with real fractal-noise grain. Cream surface, Inter Tight display in heavy 800, generous slabs of negative space, and the gradient burns through exactly the primary CTA, the featured tile, and the active chart bar. A warm, restrained bloom — never sunset cliché." tags: [grainy, gradient, warm, modern, light] colors: primary: "#241813" secondary: "#7a6c63" tertiary: "#d4451f" neutral: "#f7f1e8" surface: "#fffaf2" typography: display: "Inter Tight" body: Inter mono: "JetBrains Mono" scale: hero: "5rem / 0.98 / 800 / -0.045em" h1: "3rem / 1.05 / 800 / -0.035em" h2: "1.75rem / 1.18 / 700 / -0.02em" body: "1.0625rem / 1.58 / 400 / -0.005em" radius: sm: 8px md: 14px lg: 20px pill: 9999px shadows: card: "rgba(36,24,19,0.05) 0 1px 2px, rgba(36,24,19,0.07) 0 16px 40px -18px" button: "rgba(212,69,31,0.32) 0 12px 28px -10px, rgba(255,138,61,0.22) 0 6px 18px -8px" borders: card: "1px solid rgba(36,24,19,0.07)" divider: rgba(36,24,19,0.10) buttons: primary: background: url("data:image/svg+xml;utf8,"), radial-gradient(ellipse 80% 65% at 18% 82%, #d4451f 0%, transparent 55%), radial-gradient(ellipse 65% 75% at 85% 18%, #ffd24a 0%, transparent 55%), radial-gradient(ellipse 55% 60% at 62% 55%, #ff8a3d 0%, transparent 55%), linear-gradient(125deg, #b53412 0%, #ff7a2e 50%, #ffc14a 100%) color: #fffaf2 border: none shape: rounded padding: 13px 24px font: display / 800 / 0.9375rem / -0.01em shadow: rgba(212,69,31,0.32) 0 12px 28px -10px, rgba(255,138,61,0.22) 0 6px 18px -8px secondary: background: #241813 color: #fffaf2 border: none shape: rounded padding: 13px 24px font: display / 700 / 0.9375rem outline: background: transparent color: #241813 border: 1px solid rgba(36,24,19,0.18) shape: rounded padding: 13px 24px font: display / 700 / 0.9375rem ghost: background: transparent color: #7a6c63 border: none shape: rounded padding: 13px 18px font: display / 700 / 0.9375rem charts: variant: bars stroke_width: 2 fill_opacity: 0.14 gridlines: false bar_radius: 4px bar_gap: 8px dot_marker: true palette: [rgba(36,24,19,0.10), rgba(36,24,19,0.10), rgba(36,24,19,0.10), rgba(36,24,19,0.10), "#ff7a2e", rgba(36,24,19,0.10), rgba(36,24,19,0.10)] fonts_url: "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Solflare Bloom ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Solflare Bloom** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `url("data:image/svg+xml;utf8,"), radial-gradient(ellipse 80% 65% at 18% 82%, #d4451f 0%, transparent 55%), radial-gradient(ellipse 65% 75% at 85% 18%, #ffd24a 0%, transparent 55%), radial-gradient(ellipse 55% 60% at 62% 55%, #ff8a3d 0%, transparent 55%), linear-gradient(125deg, #b53412 0%, #ff7a2e 50%, #ffc14a 100%)`, text `#fffaf2`, padding `13px 24px`, weight `800`, shadow `rgba(212,69,31,0.32) 0 12px 28px -10px, rgba(255,138,61,0.22) 0 6px 18px -8px`. - **Secondary** — rounded shape, bg `#241813`, text `#fffaf2`, padding `13px 24px`, weight `700`. - **Outline** — rounded shape, text `#241813`, border `1px solid rgba(36,24,19,0.18)`, padding `13px 24px`, weight `700`. - **Ghost** — rounded shape, text `#7a6c63`, padding `13px 18px`, weight `700`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#fffaf2` - Border: `1px solid rgba(36,24,19,0.07)` - Shadow: `rgba(36,24,19,0.05) 0 1px 2px, rgba(36,24,19,0.07) 0 16px 40px -18px` - Radius: `radius.lg` (`20px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `bars` - Bar radius: `4px` - No gridlines — let the bars/lines carry the data. - Use the declared palette in order: `rgba(36,24,19,0.10)`, `rgba(36,24,19,0.10)`, `rgba(36,24,19,0.10)`, `rgba(36,24,19,0.10)`, `#ff7a2e`, `rgba(36,24,19,0.10)`, `rgba(36,24,19,0.10)`. #### Typography pairings - **Display (`Inter Tight`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Solflare Bloom is a low-sun grainy gradient — deep ember bleeds into pumpkin and lifts into marigold, with real SVG fractal-noise grain on top. The surface is warm cream, ink is near-black brown, and the gradient lives in exactly three places: the primary CTA, the featured hero tile, and the active bar of the chart. Inter Tight at 800 carries every display moment; Inter 400 carries body. Numbers shift to JetBrains Mono. The discipline is **warm restraint**. The gradient is never repeated on a fourth surface. Cards stay cream-on-cream with hairlines at 7% ink. The CTA is a solid rectangular box with heavy display type — no pill, no icon glow, just the gradient burning through. **Signature moves** - Three-stop warm grainy gradient (ember → pumpkin → marigold) with **real fractal-noise grain** via inline SVG `feTurbulence` - Inter Tight 800 at -0.045em tracking — heavy display sitting on the gradient - Cream surface (`#fffaf2`) so the gradient's warmth never fights the page - Active chart bar in pumpkin `#ff7a2e` — picked directly from the gradient's mid stop - 14px button radius — square enough to read as a deliberate "block," soft enough to feel modern ## 2. The grainy gradient (copy this exactly) Grain via inline SVG `feTurbulence` at baseFrequency `0.85`, three octaves, stitched. Layered over three radial blooms anchored to the corners and a 125° linear base. The `feColorMatrix` collapses the noise to alpha-only (0.6), so the grain darkens the gradient instead of tinting it. ```css background: url("data:image/svg+xml;utf8,"), radial-gradient(ellipse 80% 65% at 18% 82%, #d4451f 0%, transparent 55%), radial-gradient(ellipse 65% 75% at 85% 18%, #ffd24a 0%, transparent 55%), radial-gradient(ellipse 55% 60% at 62% 55%, #ff8a3d 0%, transparent 55%), linear-gradient(125deg, #b53412 0%, #ff7a2e 50%, #ffc14a 100%); ``` ### Stop palette - **Ember** `#d4451f` / linear stop 0 `#b53412` — bottom-left anchor - **Marigold** `#ffd24a` / linear stop end `#ffc14a` — top-right - **Pumpkin** `#ff8a3d` / linear mid `#ff7a2e` — center bloom, also the active-bar color ## 3. Palette ### Surface - **Cream** `#fffaf2` — page background, cards - **Sand** `#f7f1e8` — subtle tonal lift for inputs ### Ink - **Cocoa** `#241813` — text, headings, secondary CTA fill - **Cocoa 50** `#7a6c63` — secondary text - **Hairline** `rgba(36,24,19,0.07)` — dividers ### Accent - **Pumpkin** `#ff7a2e` — picked from the gradient mid, used only on active chart bar + active tab underline ## 4. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Inter Tight | 80px | 800 | 0.98 | -0.045em | | H1 | Inter Tight | 48px | 800 | 1.05 | -0.035em | | H2 | Inter Tight | 28px | 700 | 1.18 | -0.02em | | Body | Inter | 17px | 400 | 1.58 | -0.005em | | UI / Button | Inter Tight | 15px | 800 | 1.4 | -0.01em | | Number | JetBrains Mono | 13px | 500 | 1.0 | 0 | Inter Tight is the heavy modern grotesk that sits on the gradient without getting eaten by it. The 800 weight is non-negotiable for the CTA label. ## 5. Buttons ### Primary (Grainy Gradient Block) ```css background: /* full grainy gradient from §2 */; color: #fffaf2; padding: 13px 24px; border-radius: 14px; box-shadow: rgba(212,69,31,0.32) 0 12px 28px -10px, rgba(255,138,61,0.22) 0 6px 18px -8px; font: 800 15px/1.4 'Inter Tight'; letter-spacing: -0.01em; ``` ### Secondary (Cocoa Block) Solid `#241813` with cream label, same 14px radius. Display weight 700. ### Outline & Ghost Outline = 1px hairline at 18% cocoa. Ghost = cocoa-50, no border. ## 6. The Featured tile The featured hero tile uses the **identical** gradient stack. Inside: cream display headline at 28px in Inter Tight 800. Mono label "Featured" at 11px uppercase 0.12em. ## 7. Charts Square bars (4px corner), 8px gap. Six bars at 10% cocoa. **One bar in pumpkin** `#ff7a2e` — the gradient's mid stop. The visual rhyme with the CTA is the entire chart legend. ## 8. Tabs Underline 2px in ember `#d4451f`. Inactive tabs in Inter Tight 700 cocoa-50. ## 9. Spacing - Base 4px - Scale: `4, 8, 12, 16, 24, 32, 48, 64, 96, 128` - Section padding: 96px desktop, 48px mobile ## 10. Do's & don'ts ✅ **Do** - Copy the gradient stack from §2 verbatim — the noise layer + alpha-only matrix is what makes it look painted, not generated - Use the gradient exactly three times: CTA, featured tile, active chart bar - Pair the gradient with cream cards and cocoa text — never white cards - Use Inter Tight 800 for the CTA label — display weight on display surface ❌ **Don't** - Use a 2-stop "sunset" gradient — this is multi-stop with grain, not the cliché - Apply the gradient to cards, headers, or borders — block-level only - Skip the SVG noise — flat gradient = generic - Use a serif or rounded display font on the CTA — Inter Tight is the voice --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#241813` | | secondary | `#7a6c63` | | tertiary | `#d4451f` | | neutral | `#f7f1e8` | | surface | `#fffaf2` | ### Typography - **Display:** Inter Tight - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 5rem / 0.98 / 800 / -0.045em | | H1 | 3rem / 1.05 / 800 / -0.035em | | H2 | 1.75rem / 1.18 / 700 / -0.02em | | Body | 1.0625rem / 1.58 / 400 / -0.005em | ### Radius - sm: `8px` - md: `14px` - lg: `20px` - pill: `9999px` ### Shadows - **card:** `rgba(36,24,19,0.05) 0 1px 2px, rgba(36,24,19,0.07) 0 16px 40px -18px` - **button:** `rgba(212,69,31,0.32) 0 12px 28px -10px, rgba(255,138,61,0.22) 0 6px 18px -8px` ### Borders - **card:** `1px solid rgba(36,24,19,0.07)` - **divider:** `rgba(36,24,19,0.10)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `url("data:image/svg+xml;utf8,"), radial-gradient(ellipse 80% 65% at 18% 82%, #d4451f 0%, transparent 55%), radial-gradient(ellipse 65% 75% at 85% 18%, #ffd24a 0%, transparent 55%), radial-gradient(ellipse 55% 60% at 62% 55%, #ff8a3d 0%, transparent 55%), linear-gradient(125deg, #b53412 0%, #ff7a2e 50%, #ffc14a 100%)` | | color | `#fffaf2` | | border | `none` | | padding | `13px 24px` | | fontFamily | `display` | | fontWeight | `800` | | fontSize | `0.9375rem` | | tracking | `-0.01em` | | shadow | `rgba(212,69,31,0.32) 0 12px 28px -10px, rgba(255,138,61,0.22) 0 6px 18px -8px` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#241813` | | color | `#fffaf2` | | border | `none` | | padding | `13px 24px` | | fontFamily | `display` | | fontWeight | `700` | | fontSize | `0.9375rem` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#241813` | | border | `1px solid rgba(36,24,19,0.18)` | | padding | `13px 24px` | | fontFamily | `display` | | fontWeight | `700` | | fontSize | `0.9375rem` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#7a6c63` | | border | `none` | | padding | `13px 18px` | | fontFamily | `display` | | fontWeight | `700` | | fontSize | `0.9375rem` | ### Charts | Property | Value | |----------|-------| | variant | `bars` | | strokeWidth | `2` | | fillOpacity | `0.14` | | gridlines | `false` | | barRadius | `4px` | | barGap | `8px` | | dotMarker | `true` | | palette | `rgba(36,24,19,0.10)`, `rgba(36,24,19,0.10)`, `rgba(36,24,19,0.10)`, `rgba(36,24,19,0.10)`, `#ff7a2e`, `rgba(36,24,19,0.10)`, `rgba(36,24,19,0.10)` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 4px 12px -2px rgba(15,23,42,0.18)`, filter: `brightness(0.97)` - **focus** — outline: `2px solid rgba(212, 69, 31, 0.5)`, outline-offset: `2px` - **active** — shadow: `0 1px 2px rgba(15,23,42,0.1)`, transform: `scale(0.98)` - **disabled** — opacity: `0.4`, filter: `saturate(0.5)` - **loading** — opacity: `0.7` - **selected** — bg: `#d4451f`, color: `#fffaf2` #### Input - **hover** — border: `1px solid rgba(212, 69, 31, 0.5)` - **focus** — border: `1.5px solid #d4451f`, shadow: `0 0 0 4px rgba(212, 69, 31, 0.15)` - **disabled** — bg: `rgba(36, 24, 19, 0.04)`, opacity: `0.4` - **error** — border: `1.5px solid #DC2626`, shadow: `0 0 0 4px rgba(220,38,38,0.15)` #### Card - **hover** — shadow: `0 12px 28px -12px rgba(15,23,42,0.18)`, transform: `translateY(-2px)` - **selected** — bg: `rgba(212, 69, 31, 0.04)`, border: `1.5px solid #d4451f` - **dragging** — shadow: `0 20px 48px -16px rgba(15,23,42,0.3)`, transform: `scale(1.02) rotate(-0.5deg)`, opacity: `0.9` #### Tab - **hover** — bg: `rgba(212, 69, 31, 0.06)`, color: `#d4451f` - **focus** — outline: `2px solid rgba(212, 69, 31, 0.5)`, outline-offset: `2px` - **selected** — color: `#d4451f`, border: `0 0 2px 0 solid #d4451f` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Quiet ease.** 240 ms ease-out for all standard transitions. Reliable, invisible — motion stays out of the way. ```css transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `160ms` | | duration.base | `240ms` | | duration.slow | `380ms` | | easing.standard | `cubic-bezier(0.4, 0, 0.2, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.34, 1.4, 0.64, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — hairline border separates. | | level1 | `0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04)` | List rows, resting cards. | | level2 | `0 4px 12px -2px rgba(15,23,42,0.1), 0 2px 6px rgba(15,23,42,0.06)` | Hover cards, popover. | | level3 | `0 12px 32px -8px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.08)` | Sheets, side panels. | | level4 | `0 28px 64px -16px rgba(15,23,42,0.28), 0 8px 24px rgba(15,23,42,0.12)` | Modals — scrim required. | ### Content - **measure:** `68ch` (max line length for body prose) - **paragraph spacing:** `1.2em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#d4451f`, underline `hover` - **blockquote:** border `3px solid rgba(212, 69, 31, 0.6)`, padding `0.5em 0 0.5em 1.25em` - **code:** background `rgba(36, 24, 19, 0.06)`, color `#241813` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 16.63:1 | AA | AAA | — | | Body text on canvas | 15.39:1 | AA | AAA | — | | Muted text on surface | 4.87:1 | AA | AA | — | | Accent on surface | 4.33:1 | AA-Large | AA-Large | — | | Accent on canvas | 4:1 | AA-Large | AA-Large | — | --- # SYSTEM: Nebula Drift Source: https://www.freedesignmd.com/system/nebula-drift --- name: "Nebula Drift" description: "A near-black dark canvas where one cosmic grainy gradient does all the talking — deep indigo bleeds into magenta and ignites into warm amber, with real fractal-noise grain layered on top. Inter throughout, hairlines at 8% white, and the gradient burns through the primary CTA, the featured hero tile, and the active chart bar. Quiet space, hot bloom." tags: [grainy, gradient, dark, modern, premium] colors: primary: "#f5f3ff" secondary: "#9690b8" tertiary: "#e2399a" neutral: "#0a0814" surface: "#13101f" typography: display: Inter body: Inter mono: "JetBrains Mono" scale: hero: "4.75rem / 1 / 700 / -0.04em" h1: "2.875rem / 1.08 / 700 / -0.03em" h2: "1.625rem / 1.22 / 600 / -0.018em" body: "1.0625rem / 1.6 / 400 / -0.005em" radius: sm: 10px md: 16px lg: 22px pill: 9999px shadows: card: "rgba(0,0,0,0.4) 0 1px 2px, rgba(0,0,0,0.5) 0 18px 44px -18px" button: "rgba(226,57,154,0.40) 0 14px 32px -12px, rgba(255,138,61,0.28) 0 8px 22px -10px" borders: card: "1px solid rgba(245,243,255,0.06)" divider: rgba(245,243,255,0.08) buttons: primary: background: url("data:image/svg+xml;utf8,"), radial-gradient(ellipse 75% 60% at 15% 85%, #ff8a3d 0%, transparent 55%), radial-gradient(ellipse 70% 75% at 85% 18%, #4a3cff 0%, transparent 55%), radial-gradient(ellipse 55% 65% at 58% 50%, #e2399a 0%, transparent 60%), linear-gradient(140deg, #2a1a6c 0%, #c92e8c 50%, #ff8a3d 100%) color: #ffffff border: none shape: rounded padding: 13px 24px font: 700 / 0.9375rem / -0.01em shadow: rgba(226,57,154,0.40) 0 14px 32px -12px, rgba(255,138,61,0.28) 0 8px 22px -10px secondary: background: rgba(245,243,255,0.08) color: #f5f3ff border: 1px solid rgba(245,243,255,0.10) shape: rounded padding: 13px 24px font: 600 / 0.9375rem outline: background: transparent color: #f5f3ff border: 1px solid rgba(245,243,255,0.18) shape: rounded padding: 13px 24px font: 600 / 0.9375rem ghost: background: transparent color: #9690b8 border: none shape: rounded padding: 13px 18px font: 600 / 0.9375rem charts: variant: "rounded-bars" stroke_width: 1.5 fill_opacity: 0.16 gridlines: false bar_gap: 10px dot_marker: true palette: [rgba(245,243,255,0.10), rgba(245,243,255,0.10), rgba(245,243,255,0.10), rgba(245,243,255,0.10), rgba(245,243,255,0.10), "#e2399a", rgba(245,243,255,0.10)] fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Nebula Drift ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Nebula Drift** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `url("data:image/svg+xml;utf8,"), radial-gradient(ellipse 75% 60% at 15% 85%, #ff8a3d 0%, transparent 55%), radial-gradient(ellipse 70% 75% at 85% 18%, #4a3cff 0%, transparent 55%), radial-gradient(ellipse 55% 65% at 58% 50%, #e2399a 0%, transparent 60%), linear-gradient(140deg, #2a1a6c 0%, #c92e8c 50%, #ff8a3d 100%)`, text `#ffffff`, padding `13px 24px`, weight `700`, shadow `rgba(226,57,154,0.40) 0 14px 32px -12px, rgba(255,138,61,0.28) 0 8px 22px -10px`. - **Secondary** — rounded shape, bg `rgba(245,243,255,0.08)`, text `#f5f3ff`, border `1px solid rgba(245,243,255,0.10)`, padding `13px 24px`, weight `600`. - **Outline** — rounded shape, text `#f5f3ff`, border `1px solid rgba(245,243,255,0.18)`, padding `13px 24px`, weight `600`. - **Ghost** — rounded shape, text `#9690b8`, padding `13px 18px`, weight `600`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#13101f` - Border: `1px solid rgba(245,243,255,0.06)` - Shadow: `rgba(0,0,0,0.4) 0 1px 2px, rgba(0,0,0,0.5) 0 18px 44px -18px` - Radius: `radius.lg` (`22px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `rounded-bars` - No gridlines — let the bars/lines carry the data. - Use the declared palette in order: `rgba(245,243,255,0.10)`, `rgba(245,243,255,0.10)`, `rgba(245,243,255,0.10)`, `rgba(245,243,255,0.10)`, `rgba(245,243,255,0.10)`, `#e2399a`, `rgba(245,243,255,0.10)`. #### Typography pairings - **Display (`Inter`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Nebula Drift is a near-black canvas where one cosmic grainy gradient does the work — deep indigo bleeds into magenta and ignites into warm amber, with real SVG fractal-noise grain layered on top. The surface is `#0a0814` (near-black with a faint indigo cast), cards lift to `#13101f`, and the gradient lives in exactly three places: the primary CTA, the featured hero tile, and the active bar of the chart. Inter at 400/600/700 carries every word; numbers in JetBrains Mono. The discipline is **negative space on the dark canvas**. Hairlines at 8% white only — no decorative borders, no glow halos, no second accent. The gradient is the entire color identity. **Signature moves** - Cosmic three-stop grainy gradient (indigo → magenta → amber bloom) with **real fractal-noise grain** via inline SVG `feTurbulence` - Near-black canvas (`#0a0814`) with a faint indigo cast — true black would kill the gradient's depth - Magenta `#e2399a` picked from the gradient mid, used only on active chart bar + tab underline - Two-color drop shadow under the CTA: magenta + amber, low opacity, wide spread — the bloom escapes the box - Inter at 700 in 76px display, -0.04em tracking — calm modern grotesk against the bloom ## 2. The grainy gradient (copy this exactly) Inline SVG `feTurbulence` at baseFrequency `0.95`, two octaves, stitched. The dark canvas needs a slightly higher noise frequency than the light systems so grain reads through the deeper hues. Three radial blooms over a 140° linear base — indigo anchor bottom-left is replaced by an amber anchor (warm against deep blue), magenta anchors top-right. ```css background: url("data:image/svg+xml;utf8,"), radial-gradient(ellipse 75% 60% at 15% 85%, #ff8a3d 0%, transparent 55%), radial-gradient(ellipse 70% 75% at 85% 18%, #4a3cff 0%, transparent 55%), radial-gradient(ellipse 55% 65% at 58% 50%, #e2399a 0%, transparent 60%), linear-gradient(140deg, #2a1a6c 0%, #c92e8c 50%, #ff8a3d 100%); ``` The noise alpha is 0.5 (lower than the light systems) — dark backgrounds amplify grain visually, so less is more. ### Stop palette - **Indigo** `#2a1a6c` / radial `#4a3cff` — top-right counter-anchor - **Magenta** `#c92e8c` / radial `#e2399a` — center bloom + accent extraction - **Amber** `#ff8a3d` — bottom-left anchor (warm fights the cold indigo) ## 3. Palette ### Surface - **Void** `#0a0814` — page background (near-black with faint indigo cast — never `#000`) - **Lift** `#13101f` — cards, sheets - **Edge** `rgba(245,243,255,0.06)` — hairline borders - **Glass** `rgba(245,243,255,0.08)` — secondary button fill ### Ink - **Star** `#f5f3ff` — text, headings (warm white with violet cast) - **Star 60** `#9690b8` — secondary text, mono labels ### Accent (single) - **Magenta** `#e2399a` — extracted from the gradient's mid radial, used only on active chart bar + active tab underline ## 4. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Inter | 76px | 700 | 1.0 | -0.04em | | H1 | Inter | 46px | 700 | 1.08 | -0.03em | | H2 | Inter | 26px | 600 | 1.22 | -0.018em | | Body | Inter | 17px | 400 | 1.6 | -0.005em | | UI / Button | Inter | 15px | 700 | 1.4 | -0.01em | | Number | JetBrains Mono | 13px | 500 | 1.0 | 0 | Inter at three weights: 400 / 600 / 700. The 800 weight is reserved for the optional oversized KPI inside the featured tile. ## 5. Buttons ### Primary (Grainy Gradient Box) ```css background: /* full gradient stack from §2 */; color: #ffffff; padding: 13px 24px; border-radius: 16px; box-shadow: rgba(226,57,154,0.40) 0 14px 32px -12px, rgba(255,138,61,0.28) 0 8px 22px -10px; font: 700 15px/1.4 Inter; letter-spacing: -0.01em; ``` The two-color shadow (magenta + amber) is the bloom escaping the box — it picks up the gradient's hot stops and lets them hover under the button. ### Secondary (Glass) ```css background: rgba(245,243,255,0.08); border: 1px solid rgba(245,243,255,0.10); color: #f5f3ff; ``` ### Outline & Ghost - Outline: transparent, 1px hairline at 18% star - Ghost: no border, star-60, hover lifts to star ## 6. The Featured tile The featured hero tile uses the **same** gradient stack. Inside: white display headline at 30px in Inter 700. Mono label "Featured" at 11px uppercase 0.12em tracking, color `rgba(255,255,255,0.78)`. ## 7. Charts Rounded bars (pill ends), 10px gap. Six bars at 10% star (warm white). **One bar in magenta** `#e2399a` — the gradient's mid radial. The eye reads the magenta bar as active because it visually rhymes with the CTA's bloom. ## 8. Tabs Underline 1.5px in magenta `#e2399a`. Inactive tabs in Inter 600 star-60. Hover lifts to star. ## 9. Spacing - Base 4px - Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96` - Section padding: 96px desktop, 48px mobile ## 10. Do's & don'ts ✅ **Do** - Use the full gradient stack from §2 verbatim — the noise frequency 0.95 is calibrated for the dark canvas - Apply the gradient exactly three times: CTA, featured tile, active chart bar - Use `#0a0814` (near-black with indigo cast), never pure `#000` — true black flattens the gradient - Layer two colored shadows under the CTA: magenta + amber, low opacity, wide spread ❌ **Don't** - Use a 2-stop dark gradient (e.g. purple → blue) — this is multi-stop with grain, never the cliché - Add a third accent hue — magenta carries every "look here" moment alone - Apply the gradient to cards, headers, or sidebar — block-level on three surfaces only - Skip the SVG noise — on a dark canvas the gradient flattens to gradient-stock without it --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#f5f3ff` | | secondary | `#9690b8` | | tertiary | `#e2399a` | | neutral | `#0a0814` | | surface | `#13101f` | ### Typography - **Display:** Inter - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.75rem / 1 / 700 / -0.04em | | H1 | 2.875rem / 1.08 / 700 / -0.03em | | H2 | 1.625rem / 1.22 / 600 / -0.018em | | Body | 1.0625rem / 1.6 / 400 / -0.005em | ### Radius - sm: `10px` - md: `16px` - lg: `22px` - pill: `9999px` ### Shadows - **card:** `rgba(0,0,0,0.4) 0 1px 2px, rgba(0,0,0,0.5) 0 18px 44px -18px` - **button:** `rgba(226,57,154,0.40) 0 14px 32px -12px, rgba(255,138,61,0.28) 0 8px 22px -10px` ### Borders - **card:** `1px solid rgba(245,243,255,0.06)` - **divider:** `rgba(245,243,255,0.08)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `url("data:image/svg+xml;utf8,"), radial-gradient(ellipse 75% 60% at 15% 85%, #ff8a3d 0%, transparent 55%), radial-gradient(ellipse 70% 75% at 85% 18%, #4a3cff 0%, transparent 55%), radial-gradient(ellipse 55% 65% at 58% 50%, #e2399a 0%, transparent 60%), linear-gradient(140deg, #2a1a6c 0%, #c92e8c 50%, #ff8a3d 100%)` | | color | `#ffffff` | | border | `none` | | padding | `13px 24px` | | fontWeight | `700` | | fontSize | `0.9375rem` | | tracking | `-0.01em` | | shadow | `rgba(226,57,154,0.40) 0 14px 32px -12px, rgba(255,138,61,0.28) 0 8px 22px -10px` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `rgba(245,243,255,0.08)` | | color | `#f5f3ff` | | border | `1px solid rgba(245,243,255,0.10)` | | padding | `13px 24px` | | fontWeight | `600` | | fontSize | `0.9375rem` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#f5f3ff` | | border | `1px solid rgba(245,243,255,0.18)` | | padding | `13px 24px` | | fontWeight | `600` | | fontSize | `0.9375rem` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#9690b8` | | border | `none` | | padding | `13px 18px` | | fontWeight | `600` | | fontSize | `0.9375rem` | ### Charts | Property | Value | |----------|-------| | variant | `rounded-bars` | | strokeWidth | `1.5` | | fillOpacity | `0.16` | | gridlines | `false` | | barGap | `10px` | | dotMarker | `true` | | palette | `rgba(245,243,255,0.10)`, `rgba(245,243,255,0.10)`, `rgba(245,243,255,0.10)`, `rgba(245,243,255,0.10)`, `rgba(245,243,255,0.10)`, `#e2399a`, `rgba(245,243,255,0.10)` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 0 24px -4px rgba(226, 57, 154, 0.5), 0 8px 24px -8px rgba(0,0,0,0.6)`, filter: `brightness(1.1)` - **focus** — outline: `1.5px solid #e2399a`, outline-offset: `3px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.92)` - **disabled** — opacity: `0.35`, filter: `saturate(0.4)` - **loading** — opacity: `0.6` - **selected** — bg: `#e2399a`, color: `#0A0A0A` #### Input - **hover** — border: `1px solid rgba(226, 57, 154, 0.5)` - **focus** — border: `1px solid #e2399a`, shadow: `0 0 0 3px rgba(226, 57, 154, 0.2)` - **disabled** — opacity: `0.35` - **error** — border: `1px solid #F87171`, shadow: `0 0 0 3px rgba(248,113,113,0.2)` #### Card - **hover** — shadow: `0 16px 40px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(226, 57, 154, 0.18)`, transform: `translateY(-2px)` - **selected** — border: `1px solid #e2399a`, shadow: `0 0 0 1px #e2399a` - **dragging** — shadow: `0 24px 60px -16px rgba(0,0,0,0.85)`, transform: `scale(1.02)`, opacity: `0.85` #### Tab - **hover** — color: `#e2399a` - **focus** — outline: `1.5px solid #e2399a`, outline-offset: `2px` - **selected** — color: `#e2399a`, border: `0 0 1.5px 0 solid #e2399a` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Glide.** Fließende, leicht beschleunigte Übergänge mit Accent-Glow auf hover. Premium-Feeling durch kontrollierte Lichtspiele. ```css transition: all 280ms cubic-bezier(0.32, 0.72, 0, 1); ``` | Token | Value | |-------|-------| | duration.instant | `100ms` | | duration.fast | `180ms` | | duration.base | `280ms` | | duration.slow | `450ms` | | easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.25, 0.55, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — Hairline mit Accent-Hauch. | | level1 | `0 2px 4px rgba(0,0,0,0.45)` | Subtle drop — list items. | | level2 | `0 12px 28px -8px rgba(0,0,0,0.6)` | Popover — vom Canvas gelöst. | | level3 | `0 20px 48px -12px rgba(0,0,0,0.7), 0 0 32px -8px rgba(226, 57, 154, 0.25)` | Sheet — Accent-Halo. | | level4 | `0 40px 96px -16px rgba(0,0,0,0.85), 0 0 64px -12px rgba(226, 57, 154, 0.4)` | Modal — voller Accent-Rim, dramatisch. | ### Content - **measure:** `66ch` (max line length for body prose) - **paragraph spacing:** `1.3em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#e2399a`, underline `hover` - **blockquote:** border `2px solid #e2399a`, padding `0.8em 1.2em` - **code:** background `rgba(226, 57, 154, 0.12)`, color `#e2399a` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 17.07:1 | AA | AAA | — | | Body text on canvas | 18.1:1 | AA | AAA | — | | Muted text on surface | 6.22:1 | AA | AA | — | | Accent on surface | 4.71:1 | AA-Large | AA | — | | Accent on canvas | 5:1 | AA-Large | AA | — | --- # SYSTEM: Champagne Foundry Source: https://www.freedesignmd.com/system/champagne-foundry --- name: "Champagne Foundry" description: "Brushed champagne and bronze on a cream-paper canvas. The metallic surface appears only on the primary CTA and one hero accent — everywhere else is quiet cream and ink. Premium without ostentation." tags: [premium, metallic, warm, luxury, editorial] colors: primary: "#1F1A14" secondary: "#7A6B58" tertiary: "#C9A96A" neutral: "#F4EFE6" surface: "#FBF7EE" typography: display: "Cormorant Garamond" body: Inter mono: "JetBrains Mono" scale: hero: "5.5rem / 1 / 400 / -0.025em" h1: "3.25rem / 1.05 / 400 / -0.02em" h2: "1.625rem / 1.3 / 500 / -0.01em" body: "1rem / 1.7 / 400 / 0em" radius: sm: 2px md: 4px lg: 6px shadows: card: "0 1px 2px rgba(31, 26, 20, 0.04), 0 0 0 1px rgba(122, 107, 88, 0.08)" button: "0 8px 20px -10px rgba(122, 89, 45, 0.40), inset 0 1px 0 rgba(255, 245, 220, 0.55), inset 0 -1px 0 rgba(122, 89, 45, 0.20)" borders: card: "1px solid rgba(122, 107, 88, 0.15)" divider: "rgba(122, 107, 88, 0.18)" buttons: primary: background: linear-gradient(180deg, #E6CC92 0%, #C9A96A 50%, #A88848 100%) color: #1F1A14 border: 1px solid rgba(122, 89, 45, 0.35) shape: rounded padding: 12px 26px font: 500 / 0.9375rem / 0em shadow: 0 8px 20px -10px rgba(122, 89, 45, 0.40), inset 0 1px 0 rgba(255, 245, 220, 0.55), inset 0 -1px 0 rgba(122, 89, 45, 0.20) secondary: background: #FBF7EE color: #1F1A14 border: 1px solid rgba(122, 107, 88, 0.25) shape: rounded padding: 12px 26px font: 500 / 0.9375rem / 0em outline: background: transparent color: #7A6B58 border: 1px solid rgba(122, 107, 88, 0.40) shape: rounded padding: 11px 24px font: 500 / 0.9375rem / 0em ghost: background: transparent color: #7A6B58 border: none shape: rounded padding: 11px 4px font: 500 / 0.9375rem / 0em hover: underline charts: variant: line stroke_width: 1.5 gridlines: false highlight: last dot_marker: true axis_color: "#7A6B58" palette: ["#C9A96A", "#A88848", "#7A6B58"] fonts_url: "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Champagne Foundry ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Champagne Foundry** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `linear-gradient(180deg, #E6CC92 0%, #C9A96A 50%, #A88848 100%)`, text `#1F1A14`, border `1px solid rgba(122, 89, 45, 0.35)`, padding `12px 26px`, weight `500`, shadow `0 8px 20px -10px rgba(122, 89, 45, 0.40), inset 0 1px 0 rgba(255, 245, 220, 0.55), inset 0 -1px 0 rgba(122, 89, 45, 0.20)`. - **Secondary** — rounded shape, bg `#FBF7EE`, text `#1F1A14`, border `1px solid rgba(122, 107, 88, 0.25)`, padding `12px 26px`, weight `500`. - **Outline** — rounded shape, text `#7A6B58`, border `1px solid rgba(122, 107, 88, 0.40)`, padding `11px 24px`, weight `500`. - **Ghost** — rounded shape, text `#7A6B58`, padding `11px 4px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FBF7EE` - Border: `1px solid rgba(122, 107, 88, 0.15)` - Shadow: `0 1px 2px rgba(31, 26, 20, 0.04), 0 0 0 1px rgba(122, 107, 88, 0.08)` - Radius: `radius.lg` (`6px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `line` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#C9A96A`, `#A88848`, `#7A6B58`. #### Typography pairings - **Display (`Cormorant Garamond`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Champagne Foundry is a warm metallic premium system. Cream paper canvas, deep ink type in a high-contrast serif, and one machined gesture: a brushed champagne primary CTA with a top-edge gloss and a bottom-edge shadow that reads as lit metal. For high-end consumer brands, watchmakers, private banking, concierge platforms, hospitality. Premium without ostentation — restraint is the whole point. ## The Metallic Gesture The primary button is the system's signature. It uses a vertical 3-stop gradient that mimics a lit brushed surface: ```css background: linear-gradient(180deg, #E6CC92 0%, #C9A96A 50%, #A88848 100%); border: 1px solid rgba(122, 89, 45, 0.35); box-shadow: 0 8px 20px -10px rgba(122, 89, 45, 0.40), inset 0 1px 0 rgba(255, 245, 220, 0.55), inset 0 -1px 0 rgba(122, 89, 45, 0.20); ``` The inner top-edge highlight is what reads as "polished." Without it the button looks flat. The inner bottom-edge shadow gives the metal weight. Both must be present. **Where it appears:** - The primary CTA fill. - An optional thin horizontal divider beneath the hero (1px gradient line). **Where it never appears:** - Body text. Card fills. Backgrounds. Logos. Any second button on the page. ## Color - **Ink #1F1A14** — primary text. - **Bronze #7A6B58** — secondary text, refined captions. - **Champagne #C9A96A** — the accent endstop. - **Cream Paper #F4EFE6** — page canvas. - **Warm Paper #FBF7EE** — card surface. The system is monochromatic-warm. There is no second hue. Restraint of palette is what allows the metal to feel precious. ## Typography - **Display: Cormorant Garamond 400** at 5.5rem with -2.5% tracking. High-contrast serif, never bolded above 500. - **Body: Inter 400** at 1rem with **1.7 leading**. - Italic Cormorant for emphasis inside hero headlines (one word per hero). | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | Cormorant Garamond | 5.5rem | 400 | -0.025em | | H1 | Cormorant Garamond | 3.25rem | 400 | -0.02em | | H2 | Cormorant Garamond | 1.625rem | 500 | -0.01em | | Body | Inter | 1rem | 400 | 0 / 1.7 | ## Geometry - **Radii: 2 / 4 / 6.** Architectural restraint. The metal looks expensive at 4px; at 12px it looks cheap. - **Section gap: 160px** desktop, 96px mobile. Air around the metal is mandatory. - **Card padding: 40px** minimum. ## Buttons - **Primary** — brushed champagne with the full gloss/shadow stack. The single most precious element on the page. - **Secondary** — warm paper, 25% bronze hairline. - **Outline** — transparent with a 40% bronze hairline. - **Ghost** — bare bronze label, hover underline. All four are softly rounded at 4px. The rest is restraint. ## Cards Warm paper surface, 1px bronze hairline at 15%, a 1px shadow at 4%. Radius 6px. Cards never lift — the page is a layered paper composition, not a stack of floating tiles. ## Charts & Data A single 1.5px champagne line over the cream canvas, no gridlines, no fills. A champagne dot at the latest reading. The chart should feel like a hand-engraved plot. ## Do's and Don'ts - ✅ The metallic gradient appears once per page — the primary CTA. That's it. - ✅ Always include the inner top-edge highlight + inner bottom-edge shadow. Without them the metal dies. - ✅ Cormorant 400 for display — never bolded above 500. The serif's contrast is the elegance. - ✅ Italic Cormorant on one accent word per hero, max. - ❌ No second metallic surface. No silver, no rose-gold, no chrome. - ❌ No drop shadows beyond the warm bronze underglow on the primary CTA. - ❌ No pills. No 12px+ radii. The metal needs sharp edges to read as crafted. - ❌ No saturated chromatic accents. The system is warm-monochrome. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1F1A14` | | secondary | `#7A6B58` | | tertiary | `#C9A96A` | | neutral | `#F4EFE6` | | surface | `#FBF7EE` | ### Typography - **Display:** Cormorant Garamond - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 5.5rem / 1 / 400 / -0.025em | | H1 | 3.25rem / 1.05 / 400 / -0.02em | | H2 | 1.625rem / 1.3 / 500 / -0.01em | | Body | 1rem / 1.7 / 400 / 0em | ### Radius - sm: `2px` - md: `4px` - lg: `6px` ### Shadows - **card:** `0 1px 2px rgba(31, 26, 20, 0.04), 0 0 0 1px rgba(122, 107, 88, 0.08)` - **button:** `0 8px 20px -10px rgba(122, 89, 45, 0.40), inset 0 1px 0 rgba(255, 245, 220, 0.55), inset 0 -1px 0 rgba(122, 89, 45, 0.20)` ### Borders - **card:** `1px solid rgba(122, 107, 88, 0.15)` - **divider:** `rgba(122, 107, 88, 0.18)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `linear-gradient(180deg, #E6CC92 0%, #C9A96A 50%, #A88848 100%)` | | color | `#1F1A14` | | border | `1px solid rgba(122, 89, 45, 0.35)` | | padding | `12px 26px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `0em` | | shadow | `0 8px 20px -10px rgba(122, 89, 45, 0.40), inset 0 1px 0 rgba(255, 245, 220, 0.55), inset 0 -1px 0 rgba(122, 89, 45, 0.20)` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#FBF7EE` | | color | `#1F1A14` | | border | `1px solid rgba(122, 107, 88, 0.25)` | | padding | `12px 26px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `0em` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#7A6B58` | | border | `1px solid rgba(122, 107, 88, 0.40)` | | padding | `11px 24px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `0em` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#7A6B58` | | border | `none` | | padding | `11px 4px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `0em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `line` | | strokeWidth | `1.5` | | gridlines | `false` | | highlight | `last` | | dotMarker | `true` | | axisColor | `#7A6B58` | | palette | `#C9A96A`, `#A88848`, `#7A6B58` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(201, 169, 106, 0.92)`, shadow: `0 4px 20px -8px rgba(201, 169, 106, 0.4)` - **focus** — outline: `1.5px solid #C9A96A`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#1F1A14`, color: `#FBF7EE` #### Input - **hover** — border: `1px solid #1F1A14` - **focus** — border: `1px solid #C9A96A`, shadow: `0 1px 0 0 #C9A96A` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #1F1A14` #### Tab - **hover** — color: `#1F1A14` - **focus** — outline: `1.5px solid #C9A96A`, outline-offset: `3px` - **selected** — color: `#C9A96A`, border: `0 0 2px 0 solid #C9A96A` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#C9A96A`, underline `always` - **blockquote:** border `4px solid #C9A96A`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(31, 26, 20, 0.06)`, color `#1F1A14` ### Accessibility (WCAG 2.1) **Overall:** FAIL | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 16.15:1 | AA | AAA | — | | Body text on canvas | 15.08:1 | AA | AAA | — | | Muted text on surface | 4.82:1 | AA | AA | — | | Accent on surface | 2.1:1 | AA-Large | FAIL | `#876a31` → 4.75:1 (AA) | | Accent on canvas | 1.96:1 | AA-Large | FAIL | `#80652e` → 4.8:1 (AA) | --- # SYSTEM: Mercure Editorial Source: https://www.freedesignmd.com/system/mercure-editorial --- name: "Mercure Editorial" description: "Design-studio editorial. Massive display serif at 7rem with tight tracking, hairline rules between sections, asymmetric column grids, captions in small-caps mono. One ox-blood accent. The page reads like a printed monograph." tags: [editorial, agency, serif, minimal, portfolio] colors: primary: "#171411" secondary: "#6E665C" tertiary: "#7A1E1E" neutral: "#F1ECE3" surface: "#FBF8F2" typography: display: "Playfair Display" body: "Source Serif 4" mono: "JetBrains Mono" scale: hero: "7rem / 0.95 / 500 / -0.04em" h1: "3.75rem / 1.05 / 500 / -0.025em" h2: "1.75rem / 1.25 / 500 / -0.012em" body: "1.0625rem / 1.75 / 400 / 0em" radius: sm: 0px md: 0px lg: 2px shadows: card: "0 0 0 1px rgba(23, 20, 17, 0.10)" button: none borders: card: "1px solid rgba(23, 20, 17, 0.10)" divider: "rgba(23, 20, 17, 0.18)" buttons: primary: background: #171411 color: #F1ECE3 border: 1px solid #171411 shape: sharp padding: 16px 28px font: mono / 500 / 0.75rem / 0.14em uppercase: true suffix: arrow secondary: background: transparent color: #171411 border: 1px solid #171411 shape: sharp padding: 15px 27px font: mono / 500 / 0.75rem / 0.14em uppercase: true outline: background: transparent color: #171411 border: 1px solid rgba(23, 20, 17, 0.30) shape: sharp padding: 15px 27px font: mono / 500 / 0.75rem / 0.14em uppercase: true ghost: background: transparent color: #7A1E1E border: none shape: sharp padding: 15px 4px font: mono / 500 / 0.75rem / 0.14em uppercase: true hover: underline charts: variant: "thin-bars" stroke_width: 1 gridlines: false bar_radius: 0px bar_gap: 10px highlight: single axis_color: "#6E665C" palette: ["#171411"] fonts_url: "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Source+Serif+4:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Mercure Editorial ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Mercure Editorial** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#171411`, text `#F1ECE3`, border `1px solid #171411`, padding `16px 28px`, weight `500`, uppercased. - **Secondary** — sharp shape, text `#171411`, border `1px solid #171411`, padding `15px 27px`, weight `500`, uppercased. - **Outline** — sharp shape, text `#171411`, border `1px solid rgba(23, 20, 17, 0.30)`, padding `15px 27px`, weight `500`, uppercased. - **Ghost** — sharp shape, text `#7A1E1E`, padding `15px 4px`, weight `500`, uppercased. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FBF8F2` - Border: `1px solid rgba(23, 20, 17, 0.10)` - Shadow: `0 0 0 1px rgba(23, 20, 17, 0.10)` - Radius: `radius.lg` (`2px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `thin-bars` - Bar radius: `0px` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. - Use the declared palette in order: `#171411`. #### Typography pairings - **Display (`Playfair Display`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Source Serif 4`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Mercure Editorial is a design-studio system disguised as a printed monograph. One massive display serif carries the page: 7rem, weight 500, tracking -4%. Everything beneath it is restrained — old-style serif body copy, small-caps mono captions, hairline rules between sections, sharp rectangular geometry. A single ox-blood accent appears on active links and footnotes; nothing else is chromatic. The page reads like an essay set in a quarterly. For studios, portfolios, agency sites, magazine-style brand pages, anything that should feel slow-read and considered. ## Color - **Ink #171411** — primary text. Near-black with a warm bias so it sits on bone without going cold. - **Graphite #6E665C** — captions, secondary copy. - **Ox-blood #7A1E1E** — the only chromatic accent. Active link, footnote rule, mark of emphasis. - **Bone #F1ECE3** — page canvas. Warmer than paper, cooler than cream. - **Paper #FBF8F2** — card surface. Color is rationed. The page is mostly bone and ink with two strokes of ox-blood. ## Typography The system is the type. Three families, each with one job: | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | Playfair Display | 7rem | 500 | -0.04em | | H1 | Playfair Display | 3.75rem | 500 | -0.025em | | H2 | Playfair Display | 1.75rem | 500 | -0.012em | | Body | Source Serif 4 | 1.0625rem | 400 | 0 / 1.75 | | Caption | JetBrains Mono | 0.75rem | 500 | 0.14em uppercase | Body copy is set in **Source Serif 4** at 17px with 1.75 leading — long-form first. Captions, figure labels, and button text are **JetBrains Mono in uppercase small-caps** at 12px with 14% tracking. The contrast between display serif, body serif, and mono caps is the rhythm of the page. ## Geometry - **Radii: 0 / 0 / 2px.** Editorial is rectangles and hairlines. - **Hairline rules everywhere.** 1px ink rules between sections at 18% opacity. The page is divided like a magazine spread. - **Asymmetric columns.** A 12-column grid where text usually sits in columns 2-7 or 6-11, never centered. Pull-quotes break into the margin. - **Section gap: 160px** desktop, 96px mobile. The whitespace is part of the type. ## Buttons All buttons share the same anatomy: sharp corners, mono caps label at 12px / 14% tracking, 16px vertical padding. - **Primary** — solid ink, bone label. Optional → arrow suffix. - **Secondary** — bare ink hairline, ink label. - **Outline** — same as secondary at 30% rule opacity. - **Ghost** — bare ox-blood label, hover underline. ## Cards Cards are not "cards" — they are **bordered rectangles** with a 1px ink hairline at 10% opacity, no shadow, sharp 0px corners (or 2px on the largest container). Padding is generous: 40px minimum on the long side. ## Charts & Data Single-color thin bars in ink, no gridlines, no fill, 10px gap. Axis labels in mono caps at 11px / 14% tracking. The chart reads like a figure inset in an article. ## Do's and Don'ts - ✅ Set the hero at 7rem. The whole system depends on display serif at scale. - ✅ Hairline rules between every section. They are the page's spine. - ✅ Captions in mono caps. The contrast against the serif is the entire texture. - ✅ Asymmetric columns. Centered text kills the editorial feel. - ❌ No rounded corners beyond 2px. No pills. No drop shadows. - ❌ No second chromatic accent. Ox-blood is alone for a reason. - ❌ No sans body copy. The body is set in Source Serif 4 — that is non-negotiable. - ❌ No icons inside body text. Use mono labels and rules instead. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#171411` | | secondary | `#6E665C` | | tertiary | `#7A1E1E` | | neutral | `#F1ECE3` | | surface | `#FBF8F2` | ### Typography - **Display:** Playfair Display - **Body:** Source Serif 4 - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 7rem / 0.95 / 500 / -0.04em | | H1 | 3.75rem / 1.05 / 500 / -0.025em | | H2 | 1.75rem / 1.25 / 500 / -0.012em | | Body | 1.0625rem / 1.75 / 400 / 0em | ### Radius - sm: `0px` - md: `0px` - lg: `2px` ### Shadows - **card:** `0 0 0 1px rgba(23, 20, 17, 0.10)` - **button:** `none` ### Borders - **card:** `1px solid rgba(23, 20, 17, 0.10)` - **divider:** `rgba(23, 20, 17, 0.18)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#171411` | | color | `#F1ECE3` | | border | `1px solid #171411` | | padding | `16px 28px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.75rem` | | tracking | `0.14em` | | uppercase | `true` | | suffix | `arrow` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#171411` | | border | `1px solid #171411` | | padding | `15px 27px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.75rem` | | tracking | `0.14em` | | uppercase | `true` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#171411` | | border | `1px solid rgba(23, 20, 17, 0.30)` | | padding | `15px 27px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.75rem` | | tracking | `0.14em` | | uppercase | `true` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#7A1E1E` | | border | `none` | | padding | `15px 4px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.75rem` | | tracking | `0.14em` | | uppercase | `true` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1` | | gridlines | `false` | | barRadius | `0px` | | barGap | `10px` | | highlight | `single` | | axisColor | `#6E665C` | | palette | `#171411` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(122, 30, 30, 0.92)`, shadow: `0 4px 20px -8px rgba(122, 30, 30, 0.4)` - **focus** — outline: `1.5px solid #7A1E1E`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#171411`, color: `#FBF8F2` #### Input - **hover** — border: `1px solid #171411` - **focus** — border: `1px solid #7A1E1E`, shadow: `0 1px 0 0 #7A1E1E` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #171411` #### Tab - **hover** — color: `#171411` - **focus** — outline: `1.5px solid #7A1E1E`, outline-offset: `3px` - **selected** — color: `#7A1E1E`, border: `0 0 2px 0 solid #7A1E1E` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#7A1E1E`, underline `always` - **blockquote:** border `4px solid #7A1E1E`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(23, 20, 17, 0.06)`, color `#171411` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 17.31:1 | AA | AAA | — | | Body text on canvas | 15.59:1 | AA | AAA | — | | Muted text on surface | 5.33:1 | AA | AA | — | | Accent on surface | 9.75:1 | AA-Large | AAA | — | | Accent on canvas | 8.78:1 | AA-Large | AAA | — | --- # SYSTEM: Maison Folio Source: https://www.freedesignmd.com/system/maison-folio --- name: "Maison Folio" description: "Design-agency editorial: a single oversized Bodoni Moda display at 7rem, a single ink, an off-white canvas. The signature is the radical scale gap — hero 7rem, body 1rem, nothing in between except a mono eyebrow." tags: [editorial, agency, serif, oversized, minimal] colors: primary: "#13110F" secondary: "#6E695E" tertiary: "#A39989" neutral: "#F2EFEA" surface: "#FFFFFF" typography: display: "Bodoni Moda" body: "Inter Tight" mono: "JetBrains Mono" scale: hero: "7rem / 0.92 / 500 / -0.05em" h1: "4rem / 0.98 / 500 / -0.04em" h2: "1.625rem / 1.25 / 500 / -0.015em" body: "1.0625rem / 1.6 / 400 / 0" radius: sm: 0px md: 0px lg: 2px pill: 9999px shadows: card: none button: none borders: card: "1px solid #13110F" divider: "#13110F" buttons: primary: background: #13110F color: #F2EFEA border: 1px solid #13110F shape: sharp padding: 16px 32px font: mono / 500 / 0.75rem / 0.12em uppercase: true secondary: background: transparent color: #13110F border: 1px solid #13110F shape: sharp padding: 16px 32px font: mono / 500 / 0.75rem / 0.12em uppercase: true outline: background: transparent color: #13110F border: 1px solid #A39989 shape: sharp padding: 15px 31px font: mono / 500 / 0.75rem / 0.12em uppercase: true ghost: background: transparent color: #13110F border: none shape: sharp padding: 16px 0 font: mono / 500 / 0.75rem / 0.12em uppercase: true suffix: arrow hover: underline charts: variant: "thin-bars" stroke_width: 1 gridlines: false bar_radius: 0px bar_gap: 12px highlight: single axis_color: "#6E695E" palette: ["#13110F"] fonts_url: "https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500;6..96,700&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Maison Folio ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Maison Folio** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#13110F`, text `#F2EFEA`, border `1px solid #13110F`, padding `16px 32px`, weight `500`, uppercased. - **Secondary** — sharp shape, text `#13110F`, border `1px solid #13110F`, padding `16px 32px`, weight `500`, uppercased. - **Outline** — sharp shape, text `#13110F`, border `1px solid #A39989`, padding `15px 31px`, weight `500`, uppercased. - **Ghost** — sharp shape, text `#13110F`, padding `16px 0`, weight `500`, uppercased. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FFFFFF` - Border: `1px solid #13110F` - Shadow: `none` - Radius: `radius.lg` (`2px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `thin-bars` - Bar radius: `0px` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. - Use the declared palette in order: `#13110F`. #### Typography pairings - **Display (`Bodoni Moda`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter Tight`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Maison Folio is design-agency editorial. One oversized modern serif. One ink. One off-white canvas. The signature is a radical type-scale gap: hero at 7rem, body at 1.0625rem, and nothing in between except a single mono eyebrow line in caps. The whitespace does the rest. For design studios, fashion houses, architecture firms, photography portfolios — anywhere the work itself is the loudest element on the page and the typography needs to be a second voice, not a competitor. ## The Scale Gap Most editorial systems lay down five or six type sizes. Maison Folio uses three: | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | Bodoni Moda | 7rem | 500 | -0.05em / 0.92 | | H1 | Bodoni Moda | 4rem | 500 | -0.04em / 0.98 | | H2 | Bodoni Moda | 1.625rem | 500 | -0.015em / 1.25 | | Body | Inter Tight | 1.0625rem | 400 | 0 / 1.6 | | Eyebrow | JetBrains Mono | 0.75rem | 500 | 0.12em / uppercase | The 7rem hero with -5% tracking is non-negotiable. Bodoni Moda's high contrast collapses below 4rem; below that size, switch to Inter Tight. Never use the serif for body text — modern serifs are designed for display only. ## Color - **Ink #13110F** — text and CTA. The only chromatic mark. - **Stone #6E695E** — secondary text, axis labels. - **Taupe #A39989** — used only in hairline outlines. - **Linen #F2EFEA** — page canvas with warmth. - **Paper #FFFFFF** — inverse panels only. ## Geometry - **Radii: 0px throughout.** The serifs need flat edges. Pill exists only for status chips. - **Section gap: 192px** desktop, 96px mobile. The whitespace IS the design. - **Asymmetric grid** — 12 columns with intentional offset. Heroes break the grid. ## Buttons Every button uses **JetBrains Mono caps at 0.75rem with 0.12em tracking** — the eyebrow voice carried through to interaction. Sharp corners. No shadow. - **Primary** — flat ink rectangle. - **Secondary** — off-white with ink hairline. - **Outline** — taupe hairline. - **Ghost** — bare mono caps with arrow suffix and underline on hover. ## Cards Flat off-white panel with a 1px ink hairline. No shadow, no radius. Padding 48px minimum — the negative space is the entire treatment. Inverse cards (ink background, off-white text) appear sparingly for editorial contrast. ## Charts & Data Thin ink bars at 1px width with 12px gaps. No gridlines, no axis decoration. One bar may be highlighted by extending its height — never by changing its color. Numbers set in Bodoni Moda for headline KPIs, in mono for tabular data. ## Do's and Don'ts - ✅ Hold the 7rem hero with -5% tracking. The scale IS the system. - ✅ One ink only. Never introduce a second chromatic color. - ✅ Mono caps at 0.12em tracking for every interactive label. - ✅ Massive section gaps. Whitespace is a first-class element. - ❌ No Bodoni Moda below 1.625rem — its contrast collapses. - ❌ No second display family. The serif carries every display role. - ❌ No rounded corners. Sharp throughout. - ❌ No drop shadows. Depth comes from scale and negative space only. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#13110F` | | secondary | `#6E695E` | | tertiary | `#A39989` | | neutral | `#F2EFEA` | | surface | `#FFFFFF` | ### Typography - **Display:** Bodoni Moda - **Body:** Inter Tight - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 7rem / 0.92 / 500 / -0.05em | | H1 | 4rem / 0.98 / 500 / -0.04em | | H2 | 1.625rem / 1.25 / 500 / -0.015em | | Body | 1.0625rem / 1.6 / 400 / 0 | ### Radius - sm: `0px` - md: `0px` - lg: `2px` - pill: `9999px` ### Shadows - **card:** `none` - **button:** `none` ### Borders - **card:** `1px solid #13110F` - **divider:** `#13110F` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#13110F` | | color | `#F2EFEA` | | border | `1px solid #13110F` | | padding | `16px 32px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.75rem` | | tracking | `0.12em` | | uppercase | `true` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#13110F` | | border | `1px solid #13110F` | | padding | `16px 32px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.75rem` | | tracking | `0.12em` | | uppercase | `true` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#13110F` | | border | `1px solid #A39989` | | padding | `15px 31px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.75rem` | | tracking | `0.12em` | | uppercase | `true` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#13110F` | | border | `none` | | padding | `16px 0` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.75rem` | | tracking | `0.12em` | | uppercase | `true` | | suffix | `arrow` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1` | | gridlines | `false` | | barRadius | `0px` | | barGap | `12px` | | highlight | `single` | | axisColor | `#6E695E` | | palette | `#13110F` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(163, 153, 137, 0.92)`, shadow: `0 4px 20px -8px rgba(163, 153, 137, 0.4)` - **focus** — outline: `1.5px solid #A39989`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#13110F`, color: `#FFFFFF` #### Input - **hover** — border: `1px solid #13110F` - **focus** — border: `1px solid #A39989`, shadow: `0 1px 0 0 #A39989` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #13110F` #### Tab - **hover** — color: `#13110F` - **focus** — outline: `1.5px solid #A39989`, outline-offset: `3px` - **selected** — color: `#A39989`, border: `0 0 2px 0 solid #A39989` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#A39989`, underline `always` - **blockquote:** border `4px solid #A39989`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(19, 17, 15, 0.06)`, color `#13110F` ### Accessibility (WCAG 2.1) **Overall:** FAIL | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 18.84:1 | AA | AAA | — | | Body text on canvas | 16.43:1 | AA | AAA | — | | Muted text on surface | 5.46:1 | AA | AA | — | | Accent on surface | 2.81:1 | AA-Large | FAIL | `#7b7060` → 4.85:1 (AA) | | Accent on canvas | 2.45:1 | AA-Large | FAIL | `#756b5b` → 4.57:1 (AA) | --- # SYSTEM: Atlas Display Source: https://www.freedesignmd.com/system/atlas-display --- name: "Atlas Display" description: "Design-agency oversized grotesque. 8rem condensed display sans with -5% tracking — the type itself is the layout. Off-white canvas, one molten-orange accent, hairline grid, asymmetric columns. Hits hard the moment it loads." tags: [agency, display, bold, editorial, modern] colors: primary: "#13110F" secondary: "#6D6862" tertiary: "#FF5722" neutral: "#F4F1EC" surface: "#FFFFFF" typography: display: "Archivo Black" body: Archivo mono: "JetBrains Mono" scale: hero: "8rem / 0.92 / 900 / -0.05em" h1: "4.5rem / 0.95 / 900 / -0.04em" h2: "1.875rem / 1.2 / 900 / -0.02em" body: "1.0625rem / 1.65 / 400 / -0.005em" radius: sm: 0px md: 2px lg: 4px shadows: card: "0 0 0 1px rgba(19, 17, 15, 0.10)" button: none borders: card: "1px solid rgba(19, 17, 15, 0.10)" divider: "rgba(19, 17, 15, 0.18)" buttons: primary: background: #FF5722 color: #13110F border: 1px solid #FF5722 shape: sharp padding: 16px 28px font: display / 900 / 0.8125rem / 0.04em uppercase: true suffix: arrow secondary: background: #13110F color: #F4F1EC border: 1px solid #13110F shape: sharp padding: 16px 28px font: display / 900 / 0.8125rem / 0.04em uppercase: true outline: background: transparent color: #13110F border: 1px solid #13110F shape: sharp padding: 15px 27px font: display / 900 / 0.8125rem / 0.04em uppercase: true ghost: background: transparent color: #FF5722 border: none shape: sharp padding: 15px 4px font: display / 900 / 0.8125rem / 0.04em uppercase: true hover: underline charts: variant: bars stroke_width: 2 gridlines: false bar_radius: 0px bar_gap: 4px highlight: last axis_color: "#6D6862" palette: ["#13110F", "#13110F", "#FF5722"] fonts_url: "https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Atlas Display ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Atlas Display** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#FF5722`, text `#13110F`, border `1px solid #FF5722`, padding `16px 28px`, weight `900`, uppercased. - **Secondary** — sharp shape, bg `#13110F`, text `#F4F1EC`, border `1px solid #13110F`, padding `16px 28px`, weight `900`, uppercased. - **Outline** — sharp shape, text `#13110F`, border `1px solid #13110F`, padding `15px 27px`, weight `900`, uppercased. - **Ghost** — sharp shape, text `#FF5722`, padding `15px 4px`, weight `900`, uppercased. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FFFFFF` - Border: `1px solid rgba(19, 17, 15, 0.10)` - Shadow: `0 0 0 1px rgba(19, 17, 15, 0.10)` - Radius: `radius.lg` (`4px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. Tabs are uppercased with `0.08em` tracking. #### Charts - Bar/line variant: `bars` - Bar radius: `0px` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#13110F`, `#13110F`, `#FF5722`. #### Typography pairings - **Display (`Archivo Black`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Archivo`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Atlas Display is the sans counterpart to serif-editorial systems. The whole identity rests on one decision: an 8rem condensed display sans (Archivo Black, weight 900) with -5% tracking, set against an off-white canvas. The type isn't on the layout — the type *is* the layout. A single molten-orange accent does the rest of the talking. For independent studios, agency case-study sites, fashion-adjacent brands, anything that should hit the moment it loads. ## Color - **Ink #13110F** — primary text and primary fills. Near-black with a warm bias so it sits on the off-white naturally. - **Graphite #6D6862** — secondary text, captions, axis labels. - **Molten Orange #FF5722** — the single chromatic accent. Hero pull-words, primary CTA, active links. - **Off-white #F4F1EC** — page canvas. - **Paper #FFFFFF** — card surface. Color is one note. Orange and nothing else. ## Typography The system is the type. **Archivo Black** is single-weight at 900 — there is no choice; it lives at one weight, used at scale. | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | Archivo Black | 8rem | 900 | -0.05em | | H1 | Archivo Black | 4.5rem | 900 | -0.04em | | H2 | Archivo Black | 1.875rem | 900 | -0.02em | | Body | Archivo | 1.0625rem | 400 | -0.005em / 1.65 | | Button | Archivo Black | 0.8125rem | 900 | 0.04em uppercase | Body copy uses regular Archivo at 17px — same family, dialed down. Buttons use Archivo Black uppercase at 13px with positive tracking — small, dense, loud. ## Geometry - **Radii: 0 / 2 / 4.** Sharp. The display carries the system; geometry stays rectangular. - **Asymmetric columns.** Hero usually breaks into the margin. 12-column grid where text often sits in columns 1-9 or 4-12, never centered. - **Hairline rules** between sections at 18% ink. The grid is visible. - **Section gap: 160px** desktop, 96px mobile. ## Buttons - **Primary** — solid molten orange, ink label. Sharp. Optional → arrow suffix. - **Secondary** — solid ink, off-white label. Sharp. - **Outline** — bare full-opacity ink hairline. - **Ghost** — bare orange label, hover underline. All buttons use Archivo Black uppercase at 13px with 4% tracking. The button is a small loud rectangle. ## Cards Bordered rectangles — 1px ink hairline at 10% opacity, sharp 2-4px corners, **no drop shadow**. Padding 32-40px on the long side. Cards are containers, never decorations. ## Charts & Data Three-bar histogram in ink with the lead bar in molten orange, sharp 0px corners, 4px gap, no gridlines. Axis labels in graphite at 11px regular Archivo. ## Do's and Don'ts - ✅ The hero at 8rem is mandatory. The system collapses below 6rem. - ✅ Archivo Black at 900 only. There is no other display weight. - ✅ One chromatic accent — molten orange. Used on lead, not everywhere. - ✅ Asymmetric columns. Centered hero kills the energy. - ❌ No second chromatic color. - ❌ No rounded corners beyond 4px. No pills. No drop shadows. - ❌ No serif body. Family discipline — Archivo throughout. - ❌ No timid hero size. Below 6rem the type stops being the layout. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#13110F` | | secondary | `#6D6862` | | tertiary | `#FF5722` | | neutral | `#F4F1EC` | | surface | `#FFFFFF` | ### Typography - **Display:** Archivo Black - **Body:** Archivo - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 8rem / 0.92 / 900 / -0.05em | | H1 | 4.5rem / 0.95 / 900 / -0.04em | | H2 | 1.875rem / 1.2 / 900 / -0.02em | | Body | 1.0625rem / 1.65 / 400 / -0.005em | ### Radius - sm: `0px` - md: `2px` - lg: `4px` ### Shadows - **card:** `0 0 0 1px rgba(19, 17, 15, 0.10)` - **button:** `none` ### Borders - **card:** `1px solid rgba(19, 17, 15, 0.10)` - **divider:** `rgba(19, 17, 15, 0.18)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#FF5722` | | color | `#13110F` | | border | `1px solid #FF5722` | | padding | `16px 28px` | | fontFamily | `display` | | fontWeight | `900` | | fontSize | `0.8125rem` | | tracking | `0.04em` | | uppercase | `true` | | suffix | `arrow` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#13110F` | | color | `#F4F1EC` | | border | `1px solid #13110F` | | padding | `16px 28px` | | fontFamily | `display` | | fontWeight | `900` | | fontSize | `0.8125rem` | | tracking | `0.04em` | | uppercase | `true` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#13110F` | | border | `1px solid #13110F` | | padding | `15px 27px` | | fontFamily | `display` | | fontWeight | `900` | | fontSize | `0.8125rem` | | tracking | `0.04em` | | uppercase | `true` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#FF5722` | | border | `none` | | padding | `15px 4px` | | fontFamily | `display` | | fontWeight | `900` | | fontSize | `0.8125rem` | | tracking | `0.04em` | | uppercase | `true` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `bars` | | strokeWidth | `2` | | gridlines | `false` | | barRadius | `0px` | | barGap | `4px` | | highlight | `last` | | axisColor | `#6D6862` | | palette | `#13110F`, `#13110F`, `#FF5722` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(255, 87, 34, 0.92)`, shadow: `0 4px 20px -8px rgba(255, 87, 34, 0.4)` - **focus** — outline: `1.5px solid #FF5722`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#13110F`, color: `#FFFFFF` #### Input - **hover** — border: `1px solid #13110F` - **focus** — border: `1px solid #FF5722`, shadow: `0 1px 0 0 #FF5722` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #13110F` #### Tab - **hover** — color: `#13110F` - **focus** — outline: `1.5px solid #FF5722`, outline-offset: `3px` - **selected** — color: `#FF5722`, border: `0 0 2px 0 solid #FF5722` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#FF5722`, underline `always` - **blockquote:** border `4px solid #FF5722`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(19, 17, 15, 0.06)`, color `#13110F` ### Accessibility (WCAG 2.1) **Overall:** FAIL | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 18.84:1 | AA | AAA | — | | Body text on canvas | 16.72:1 | AA | AAA | — | | Muted text on surface | 5.52:1 | AA | AA | — | | Accent on surface | 3.16:1 | AA-Large | AA-Large | — | | Accent on canvas | 2.81:1 | AA-Large | FAIL | `#cf3200` → 4.54:1 (AA) | --- # SYSTEM: Terra Bone Source: https://www.freedesignmd.com/system/terra-bone --- name: "Terra Bone" description: "Radical two-color: deep terracotta and warm bone, nothing else. Humanist serif display at scale, soft 12px corners, generous body. Earthen and quiet — for artisan brands, ceramics, slow-food, hospitality." tags: [duotone, warm, minimal, editorial, artisan] colors: primary: "#7A2E1F" secondary: "#A66854" tertiary: "#C98C72" neutral: "#F2EADD" surface: "#F8F1E5" typography: display: "DM Serif Display" body: "DM Sans" mono: "JetBrains Mono" scale: hero: "5.5rem / 1 / 400 / -0.025em" h1: "3rem / 1.05 / 400 / -0.02em" h2: "1.625rem / 1.3 / 400 / -0.012em" body: "1.0625rem / 1.7 / 400 / 0em" radius: sm: 8px md: 10px lg: 12px shadows: card: "0 0 0 1px rgba(122, 46, 31, 0.10)" button: none borders: card: "1px solid rgba(122, 46, 31, 0.10)" divider: "rgba(122, 46, 31, 0.18)" buttons: primary: background: #7A2E1F color: #F2EADD border: 1px solid #7A2E1F shape: rounded padding: 13px 24px font: 500 / 0.9375rem / 0em secondary: background: #F8F1E5 color: #7A2E1F border: 1px solid #7A2E1F shape: rounded padding: 12px 23px font: 500 / 0.9375rem / 0em outline: background: transparent color: #7A2E1F border: 1px solid rgba(122, 46, 31, 0.30) shape: rounded padding: 12px 23px font: 500 / 0.9375rem / 0em ghost: background: transparent color: #A66854 border: none shape: rounded padding: 12px 4px font: 500 / 0.9375rem / 0em hover: underline charts: variant: "rounded-bars" stroke_width: 2 gridlines: false bar_radius: 4px bar_gap: 10px highlight: all axis_color: "#A66854" palette: ["#7A2E1F", "#A66854", "#C98C72"] fonts_url: "https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Terra Bone ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Terra Bone** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#7A2E1F`, text `#F2EADD`, border `1px solid #7A2E1F`, padding `13px 24px`, weight `500`. - **Secondary** — rounded shape, bg `#F8F1E5`, text `#7A2E1F`, border `1px solid #7A2E1F`, padding `12px 23px`, weight `500`. - **Outline** — rounded shape, text `#7A2E1F`, border `1px solid rgba(122, 46, 31, 0.30)`, padding `12px 23px`, weight `500`. - **Ghost** — rounded shape, text `#A66854`, padding `12px 4px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#F8F1E5` - Border: `1px solid rgba(122, 46, 31, 0.10)` - Shadow: `0 0 0 1px rgba(122, 46, 31, 0.10)` - Radius: `radius.lg` (`12px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `rounded-bars` - Bar radius: `4px` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `all` — emphasize a single bar/point per chart. - Use the declared palette in order: `#7A2E1F`, `#A66854`, `#C98C72`. #### Typography pairings - **Display (`DM Serif Display`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`DM Sans`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Terra Bone is a strict two-color system: **deep terracotta and warm bone, nothing else.** No third hue anywhere — not in charts, not in icons, not in shadows. Charts and accents reuse the terracotta hue at three chroma levels so the duotone discipline holds. The system is warm and earthen. For artisan brands, ceramics studios, slow-food platforms, boutique hospitality, anything that should feel hand-thrown rather than machined. ## Color - **Terracotta #7A2E1F** — the only "dark." Body text, headings, primary fills, hairlines. - **Faded #A66854** — same hue at lower chroma. Secondary text, axis labels, second chart bar. - **Soft #C98C72** — same hue, even softer. Hover underline, third chart bar. - **Bone #F2EADD** — page canvas. The only neutral. - **Surface #F8F1E5** — card surface, one notch above bone. The "three" terracotta steps are not three colors — they are one color at three chroma levels. The duotone discipline holds. ## Typography - **Display: DM Serif Display 400** at 5.5rem with -2.5% tracking. Humanist serif with warmth. - **Body: DM Sans 400** at 1.0625rem with 1.7 leading. | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | DM Serif Display | 5.5rem | 400 | -0.025em | | H1 | DM Serif Display | 3rem | 400 | -0.02em | | H2 | DM Serif Display | 1.625rem | 400 | -0.012em | | Body | DM Sans | 1.0625rem | 400 | 0 / 1.7 | The serif/sans pairing is the whole texture — display does the singing, body does the reading. ## Geometry - **Radii: 8 / 10 / 12.** Soft, hand-thrown. Never sharp, never pill. - **No shadow.** A 1px terracotta hairline at 10% opacity is the only depth signal. - **Section gap: 120px** desktop, 72px mobile. ## Buttons - **Primary** — solid terracotta, bone label, 12px corners. - **Secondary** — surface bone, terracotta label, terracotta 1px hairline. - **Outline** — bare hairline at 30%. - **Ghost** — faded terracotta label, hover underline. ## Cards Surface bone on canvas, 1px terracotta hairline at 10% opacity, 10px corner radius, **no shadow**. Padding 32px. The card depth comes from the hairline alone — adding shadow would introduce a third tonal value and break the duotone. ## Charts & Data Three-bar histogram in three chroma steps of terracotta — deep, faded, soft — 4px corner radius, 10px gap, no gridlines. Axis labels in faded terracotta. The chart is monochrome by definition. ## Do's and Don'ts - ✅ Two colors only — terracotta and bone. The chart's chroma steps are the same hue. - ✅ The hairline is the only depth. No shadows. - ✅ Serif display + sans body. The pairing is the texture. - ✅ Soft 8-12px radii. Hand-thrown, never machined. - ❌ No third hue. No green, no blue, no grey accent. Ever. - ❌ No drop shadow. Hairline only. - ❌ No bold display weight. DM Serif Display lives at 400. - ❌ No pill buttons or sharp corners. The system is soft. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#7A2E1F` | | secondary | `#A66854` | | tertiary | `#C98C72` | | neutral | `#F2EADD` | | surface | `#F8F1E5` | ### Typography - **Display:** DM Serif Display - **Body:** DM Sans - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 5.5rem / 1 / 400 / -0.025em | | H1 | 3rem / 1.05 / 400 / -0.02em | | H2 | 1.625rem / 1.3 / 400 / -0.012em | | Body | 1.0625rem / 1.7 / 400 / 0em | ### Radius - sm: `8px` - md: `10px` - lg: `12px` ### Shadows - **card:** `0 0 0 1px rgba(122, 46, 31, 0.10)` - **button:** `none` ### Borders - **card:** `1px solid rgba(122, 46, 31, 0.10)` - **divider:** `rgba(122, 46, 31, 0.18)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#7A2E1F` | | color | `#F2EADD` | | border | `1px solid #7A2E1F` | | padding | `13px 24px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `0em` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#F8F1E5` | | color | `#7A2E1F` | | border | `1px solid #7A2E1F` | | padding | `12px 23px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `0em` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#7A2E1F` | | border | `1px solid rgba(122, 46, 31, 0.30)` | | padding | `12px 23px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `0em` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#A66854` | | border | `none` | | padding | `12px 4px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `0em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `rounded-bars` | | strokeWidth | `2` | | gridlines | `false` | | barRadius | `4px` | | barGap | `10px` | | highlight | `all` | | axisColor | `#A66854` | | palette | `#7A2E1F`, `#A66854`, `#C98C72` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(201, 140, 114, 0.92)`, shadow: `0 4px 20px -8px rgba(201, 140, 114, 0.4)` - **focus** — outline: `1.5px solid #C98C72`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#7A2E1F`, color: `#F8F1E5` #### Input - **hover** — border: `1px solid #7A2E1F` - **focus** — border: `1px solid #C98C72`, shadow: `0 1px 0 0 #C98C72` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #7A2E1F` #### Tab - **hover** — color: `#7A2E1F` - **focus** — outline: `1.5px solid #C98C72`, outline-offset: `3px` - **selected** — color: `#C98C72`, border: `0 0 2px 0 solid #C98C72` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#C98C72`, underline `always` - **blockquote:** border `4px solid #C98C72`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(122, 46, 31, 0.06)`, color `#7A2E1F` ### Accessibility (WCAG 2.1) **Overall:** FAIL | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 8.36:1 | AA | AAA | — | | Body text on canvas | 7.86:1 | AA | AAA | — | | Muted text on surface | 3.95:1 | AA | AA-Large | `#98604d` → 4.55:1 (AA) | | Accent on surface | 2.5:1 | AA-Large | FAIL | `#a15c3e` → 4.54:1 (AA) | | Accent on canvas | 2.35:1 | AA-Large | FAIL | `#9a573b` → 4.63:1 (AA) | --- # SYSTEM: Indigo Bone Source: https://www.freedesignmd.com/system/indigo-bone --- name: "Indigo Bone" description: "Radical two-color: deep indigo and warm bone, nothing else. Cool but editorial — never electric. Considered serif/sans pairing, refined 6px corners, no shadows. Discipline and quiet authority." tags: [duotone, editorial, minimal, premium, modern] colors: primary: "#1B2447" secondary: "#5A6688" tertiary: "#8E97B5" neutral: "#F1ECE0" surface: "#F8F4EA" typography: display: "Cormorant Garamond" body: Inter mono: "JetBrains Mono" scale: hero: "5rem / 1 / 500 / -0.025em" h1: "2.875rem / 1.05 / 500 / -0.022em" h2: "1.5rem / 1.3 / 500 / -0.012em" body: "1.0625rem / 1.7 / 400 / -0.003em" radius: sm: 4px md: 6px lg: 8px shadows: card: "0 0 0 1px rgba(27, 36, 71, 0.10)" button: none borders: card: "1px solid rgba(27, 36, 71, 0.10)" divider: "rgba(27, 36, 71, 0.16)" buttons: primary: background: #1B2447 color: #F1ECE0 border: 1px solid #1B2447 shape: rounded padding: 12px 24px font: 500 / 0.9375rem / -0.005em secondary: background: #F8F4EA color: #1B2447 border: 1px solid #1B2447 shape: rounded padding: 11px 23px font: 500 / 0.9375rem / -0.005em outline: background: transparent color: #1B2447 border: 1px solid rgba(27, 36, 71, 0.30) shape: rounded padding: 11px 23px font: 500 / 0.9375rem / -0.005em ghost: background: transparent color: #5A6688 border: none shape: rounded padding: 11px 4px font: 500 / 0.9375rem / -0.005em hover: underline charts: variant: "rounded-bars" stroke_width: 2 gridlines: false bar_radius: 3px bar_gap: 10px highlight: all axis_color: "#5A6688" palette: ["#1B2447", "#5A6688", "#8E97B5"] fonts_url: "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Indigo Bone ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Indigo Bone** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#1B2447`, text `#F1ECE0`, border `1px solid #1B2447`, padding `12px 24px`, weight `500`. - **Secondary** — rounded shape, bg `#F8F4EA`, text `#1B2447`, border `1px solid #1B2447`, padding `11px 23px`, weight `500`. - **Outline** — rounded shape, text `#1B2447`, border `1px solid rgba(27, 36, 71, 0.30)`, padding `11px 23px`, weight `500`. - **Ghost** — rounded shape, text `#5A6688`, padding `11px 4px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#F8F4EA` - Border: `1px solid rgba(27, 36, 71, 0.10)` - Shadow: `0 0 0 1px rgba(27, 36, 71, 0.10)` - Radius: `radius.lg` (`8px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `rounded-bars` - Bar radius: `3px` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `all` — emphasize a single bar/point per chart. - Use the declared palette in order: `#1B2447`, `#5A6688`, `#8E97B5`. #### Typography pairings - **Display (`Cormorant Garamond`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Indigo Bone is a strict two-color editorial system: **deep indigo and warm bone, nothing else.** No third hue anywhere — not in charts, not in icons, not in shadows. The chart's three "colors" are one hue at three chroma levels. Where Ink & Citron is cool-electric (deep ink + acid citron) and Terra Bone is warm-earthen (terracotta + bone), Indigo Bone sits between them: cool but editorial, never electric. The pairing of high-contrast serif and crisp sans gives it discipline and quiet authority. For literary brands, premium publishers, design-forward financial pages, anything that wants two colors and nothing more. ## Color - **Indigo #1B2447** — the only "dark." Body text, headings, primary fills, hairlines. - **Faded #5A6688** — same hue at lower chroma. Secondary text, axis labels, second chart bar. - **Soft #8E97B5** — same hue, even softer. Third chart bar, hover underline. - **Bone #F1ECE0** — page canvas. Warm. The only neutral. - **Surface #F8F4EA** — card surface, one notch above bone. The three indigo steps are the same color at three chroma levels — the duotone discipline holds. ## Typography - **Display: Cormorant Garamond 500** at 5rem with -2.5% tracking. Editorial serif. - **Body: Inter 400** at 1.0625rem with 1.7 leading. | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | Cormorant Garamond | 5rem | 500 | -0.025em | | H1 | Cormorant Garamond | 2.875rem | 500 | -0.022em | | H2 | Cormorant Garamond | 1.5rem | 500 | -0.012em | | Body | Inter | 1.0625rem | 400 | -0.003em / 1.7 | The serif/sans pairing carries the texture. Display always at weight 500 — never bold. ## Geometry - **Radii: 4 / 6 / 8.** Editorial geometry, refined. - **No shadow.** A 1px indigo hairline at 10% opacity is the only depth signal. - **Section gap: 128px** desktop, 80px mobile. ## Buttons - **Primary** — solid deep indigo, bone label. - **Secondary** — bone surface, indigo label, full-opacity indigo hairline. - **Outline** — bare hairline at 30%. - **Ghost** — faded indigo label, hover underline. ## Cards Surface bone on canvas, 1px indigo hairline at 10%, 6px corners, **no shadow**. The card depth comes from the hairline alone — adding shadow would introduce a third tonal value and break the duotone. ## Charts & Data Three-bar histogram in three chroma steps of indigo, 3px corner radius, 10px gap, no gridlines. Axis labels in faded indigo. Monochrome by definition. ## Do's and Don'ts - ✅ Two colors only — indigo and bone. Chart chroma steps are the same hue. - ✅ Hairline is the only depth. No shadows. - ✅ Serif display + sans body. The pairing is the texture. - ✅ Display weight 500. Bold breaks the editorial restraint. - ❌ No third hue. No green, no orange, no grey accent. Ever. - ❌ No drop shadow. Hairline only. - ❌ No bold display weight. Cormorant lives at 500. - ❌ No pill buttons or sharp 0px corners. The system is refined. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1B2447` | | secondary | `#5A6688` | | tertiary | `#8E97B5` | | neutral | `#F1ECE0` | | surface | `#F8F4EA` | ### Typography - **Display:** Cormorant Garamond - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 5rem / 1 / 500 / -0.025em | | H1 | 2.875rem / 1.05 / 500 / -0.022em | | H2 | 1.5rem / 1.3 / 500 / -0.012em | | Body | 1.0625rem / 1.7 / 400 / -0.003em | ### Radius - sm: `4px` - md: `6px` - lg: `8px` ### Shadows - **card:** `0 0 0 1px rgba(27, 36, 71, 0.10)` - **button:** `none` ### Borders - **card:** `1px solid rgba(27, 36, 71, 0.10)` - **divider:** `rgba(27, 36, 71, 0.16)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#1B2447` | | color | `#F1ECE0` | | border | `1px solid #1B2447` | | padding | `12px 24px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#F8F4EA` | | color | `#1B2447` | | border | `1px solid #1B2447` | | padding | `11px 23px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#1B2447` | | border | `1px solid rgba(27, 36, 71, 0.30)` | | padding | `11px 23px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#5A6688` | | border | `none` | | padding | `11px 4px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `rounded-bars` | | strokeWidth | `2` | | gridlines | `false` | | barRadius | `3px` | | barGap | `10px` | | highlight | `all` | | axisColor | `#5A6688` | | palette | `#1B2447`, `#5A6688`, `#8E97B5` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(142, 151, 181, 0.92)`, shadow: `0 4px 20px -8px rgba(142, 151, 181, 0.4)` - **focus** — outline: `1.5px solid #8E97B5`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#1B2447`, color: `#F8F4EA` #### Input - **hover** — border: `1px solid #1B2447` - **focus** — border: `1px solid #8E97B5`, shadow: `0 1px 0 0 #8E97B5` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #1B2447` #### Tab - **hover** — color: `#1B2447` - **focus** — outline: `1.5px solid #8E97B5`, outline-offset: `3px` - **selected** — color: `#8E97B5`, border: `0 0 2px 0 solid #8E97B5` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#8E97B5`, underline `always` - **blockquote:** border `4px solid #8E97B5`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(27, 36, 71, 0.06)`, color `#1B2447` ### Accessibility (WCAG 2.1) **Overall:** FAIL | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 13.76:1 | AA | AAA | — | | Body text on canvas | 12.82:1 | AA | AAA | — | | Muted text on surface | 5.18:1 | AA | AA | — | | Accent on surface | 2.64:1 | AA-Large | FAIL | `#606b92` → 4.76:1 (AA) | | Accent on canvas | 2.46:1 | AA-Large | FAIL | `#5b678c` → 4.73:1 (AA) | --- # SYSTEM: Aurora Glass Source: https://www.freedesignmd.com/system/aurora-glass --- name: "Aurora Glass" description: "Extreme glassmorphism. Translucent panes float on a vivid aurora mesh — ultramarine, magenta, and mint cyan, blurred to 40px with 200% saturation. Every surface — cards, CTAs, even the primary button — is frosted glass. Nothing is opaque." tags: [dark, glass, premium, saas] colors: primary: "#F4F7FB" secondary: "#A6B0C2" tertiary: "#7DF9D6" neutral: "#04050B" surface: "#0A0D18" typography: display: Inter body: Inter mono: "JetBrains Mono" scale: hero: "4.25rem / 1.04 / 600 / -0.035em" h1: "2.75rem / 1.08 / 600 / -0.03em" h2: "1.625rem / 1.2 / 500 / -0.02em" body: "1rem / 1.55 / 400 / -0.005em" radius: sm: 12px md: 18px lg: 26px pill: 9999px shadows: card: "0 30px 80px -20px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.18)" button: "0 12px 32px -8px rgba(125, 249, 214, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22)" borders: card: "1px solid rgba(255, 255, 255, 0.10)" divider: "rgba(255, 255, 255, 0.08)" glass: surface: "rgba(255, 255, 255, 0.06)" blur: 40px saturate: 200% border: "1px solid rgba(255, 255, 255, 0.18)" shadow: "0 30px 80px -20px rgba(0, 0, 0, 0.65)" inner_highlight: "inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.04)" backdrop: "radial-gradient(at 12% 18%, rgba(125, 249, 214, 0.55) 0%, transparent 42%), radial-gradient(at 88% 22%, rgba(167, 139, 250, 0.60) 0%, transparent 48%), radial-gradient(at 78% 82%, rgba(244, 114, 182, 0.50) 0%, transparent 46%), radial-gradient(at 22% 88%, rgba(96, 165, 250, 0.50) 0%, transparent 48%), radial-gradient(at 50% 50%, rgba(192, 132, 252, 0.25) 0%, transparent 60%), #04050B" buttons: primary: background: rgba(125, 249, 214, 0.22) color: #F4F7FB border: 1px solid rgba(125, 249, 214, 0.45) shape: pill padding: 12px 24px font: 600 / 0.9375rem / -0.01em shadow: 0 12px 32px -8px rgba(125, 249, 214, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.28) backdrop_blur: 32px backdrop_saturate: 200% secondary: background: rgba(255, 255, 255, 0.10) color: #F4F7FB border: 1px solid rgba(255, 255, 255, 0.22) shape: pill padding: 12px 24px font: 600 / 0.9375rem / -0.01em shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18) backdrop_blur: 32px backdrop_saturate: 180% outline: background: rgba(255, 255, 255, 0.04) color: #F4F7FB border: 1px solid rgba(255, 255, 255, 0.18) shape: pill padding: 11px 22px font: 500 / 0.9375rem / -0.01em backdrop_blur: 24px backdrop_saturate: 160% ghost: background: transparent color: rgba(244, 247, 251, 0.72) border: none shape: pill padding: 11px 16px font: 500 / 0.9375rem hover: glow charts: variant: line stroke_width: 2 gridlines: false highlight: last dot_marker: true axis_color: "#5C6478" palette: ["#7DF9D6", "#A78BFA", "#F472B6"] fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Aurora Glass ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Aurora Glass** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — pill shape, bg `rgba(125, 249, 214, 0.22)`, text `#F4F7FB`, border `1px solid rgba(125, 249, 214, 0.45)`, padding `12px 24px`, weight `600`, shadow `0 12px 32px -8px rgba(125, 249, 214, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.28)`. - **Secondary** — pill shape, bg `rgba(255, 255, 255, 0.10)`, text `#F4F7FB`, border `1px solid rgba(255, 255, 255, 0.22)`, padding `12px 24px`, weight `600`, shadow `0 8px 24px -8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18)`. - **Outline** — pill shape, bg `rgba(255, 255, 255, 0.04)`, text `#F4F7FB`, border `1px solid rgba(255, 255, 255, 0.18)`, padding `11px 22px`, weight `500`. - **Ghost** — pill shape, text `rgba(244, 247, 251, 0.72)`, padding `11px 16px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#0A0D18` - Border: `1px solid rgba(255, 255, 255, 0.10)` - Shadow: `0 30px 80px -20px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.18)` - Radius: `radius.lg` (`26px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. > This system ships a **glass treatment** — see the Glass token table. > Apply `backdrop-filter: blur(40px)` to translucent panes. > The page must have a backdrop (gradient mesh / blurred orbs) for glass to refract. #### Charts - Bar/line variant: `line` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#7DF9D6`, `#A78BFA`, `#F472B6`. #### Typography pairings - **Display (`Inter`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Aurora Glass is the extreme end of glassmorphism. **Every surface that matters is translucent** — cards at 6% opacity, buttons at 10–22%, all sitting on a 40px backdrop blur with 200% saturation. Underneath, a five-orb aurora mesh in mint, violet, rose, and ultramarine. There are no opaque surfaces in this system. Even the primary CTA is frosted mint glass. This is the iOS 17 / visionOS material language at full intensity: real backdrop-filter, layered transparency, hairline gloss on every top edge, vivid colored light passing through every pane. ## Atmosphere - The page background is a **vivid aurora mesh** — five radial orbs (mint, violet, rose, blue, purple) layered over near-black `#04050B`. It is loud on purpose; the glass tames it. - Cards are **panes**, not boxes. They float at 6% opacity. They refract every color behind them. They never have a solid fill. - Buttons are **frosted pills** — even the primary, which is mint-tinted glass at 22% with a 32px backdrop blur. Solid CTAs are forbidden. - Borders are **bright hairlines** — 18% white on cards, 22% white on secondary buttons, 45% mint on the primary. They catch the light from the gloss above. - Shadows are **deep and far** (80px blur, -20px y) and always paired with a 1px inner top highlight. That combination is what creates the floating-pane illusion. ## Typography **Inter** at every level — chosen because it holds up at -3.5% tracking on display sizes without losing legibility on translucent surfaces. The hero compresses; the body breathes. | Role | Size | Weight | Tracking | |------|-----------|--------|-----------| | Hero | 4.25rem | 600 | -0.035em | | H1 | 2.75rem | 600 | -0.03em | | H2 | 1.625rem | 500 | -0.02em | | Body | 1rem | 400 | -0.005em | Display weight is **600** — never 700. Glass surfaces eat contrast; over-bold text shouts. ## Color - **Aurora Mint #7DF9D6** — used as a glass tint on the primary CTA and as the chart accent. Never as a solid fill. - **Violet #A78BFA**, **Rose #F472B6**, **Blue #60A5FA**, **Purple #C084FC** — these only exist inside the backdrop mesh. They are light, not ink. - **Ink #F4F7FB** — primary text, slightly cool. Reads cleanly through every level of frost. - **Mid #A6B0C2** — captions, tested to remain legible through 6% glass at 40px blur. ## Buttons All four variants are frosted glass. **There are no solid buttons in this system.** - **Primary** — mint-tinted glass pill, 22% mint background, 32px backdrop blur, 200% saturation, 45% mint hairline border, mint-glow shadow. The most visible CTA — but still glass. - **Secondary** — neutral frosted pill, 10% white, 32px blur, bright hairline. - **Outline** — whisper-glass, 4% white, hairline border, 24px blur. Almost invisible until you hover. - **Ghost** — bare label, no surface. For chrome only. All four are **pills** (9999px). Sharp corners are forbidden anywhere in this system. ## Charts & Data Single mint stepped-line over the aurora with a dot marker at the latest value. **No gridlines** — the aurora provides depth, the line provides signal. Axis labels in cool grey `#5C6478`. ## Do's and Don'ts - ✅ Always render the aurora backdrop. Without it, glass is just a grey tint. - ✅ Every surface — cards, CTAs, inputs — must use `backdrop-filter: blur(...)`. No exceptions. - ✅ Pair every glass surface with a bright top-edge highlight (1px white at 18–22%). That is the difference between glass and plexiglass. - ✅ Keep card opacity ≤ 8%, button opacity ≤ 22%. More opaque = plastic. - ❌ No solid CTAs. The primary button is mint-tinted glass, not solid mint. - ❌ No sharp corners. 26px on cards, pill on buttons, period. - ❌ No drop-shadow without an inner highlight. Half of it is half wrong. - ❌ No magenta/rose/violet ink. Those colors live in the backdrop only. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#F4F7FB` | | secondary | `#A6B0C2` | | tertiary | `#7DF9D6` | | neutral | `#04050B` | | surface | `#0A0D18` | ### Typography - **Display:** Inter - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.25rem / 1.04 / 600 / -0.035em | | H1 | 2.75rem / 1.08 / 600 / -0.03em | | H2 | 1.625rem / 1.2 / 500 / -0.02em | | Body | 1rem / 1.55 / 400 / -0.005em | ### Radius - sm: `12px` - md: `18px` - lg: `26px` - pill: `9999px` ### Shadows - **card:** `0 30px 80px -20px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.18)` - **button:** `0 12px 32px -8px rgba(125, 249, 214, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22)` ### Borders - **card:** `1px solid rgba(255, 255, 255, 0.10)` - **divider:** `rgba(255, 255, 255, 0.08)` ### Glass Translucent panes with backdrop-filter — the preview renders cards from these exact values. | Property | Value | |----------|-------| | surface | `rgba(255, 255, 255, 0.06)` | | blur | `40px` | | saturate | `200%` | | border | `1px solid rgba(255, 255, 255, 0.18)` | | shadow | `0 30px 80px -20px rgba(0, 0, 0, 0.65)` | | innerHighlight | `inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.04)` | | backdrop | `radial-gradient(at 12% 18%, rgba(125, 249, 214, 0.55) 0%, transparent 42%), radial-gradient(at 88% 22%, rgba(167, 139, 250, 0.60) 0%, transparent 48%), radial-gradient(at 78% 82%, rgba(244, 114, 182, 0.50) 0%, transparent 46%), radial-gradient(at 22% 88%, rgba(96, 165, 250, 0.50) 0%, transparent 48%), radial-gradient(at 50% 50%, rgba(192, 132, 252, 0.25) 0%, transparent 60%), #04050B` | ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `pill` | | background | `rgba(125, 249, 214, 0.22)` | | color | `#F4F7FB` | | border | `1px solid rgba(125, 249, 214, 0.45)` | | padding | `12px 24px` | | fontWeight | `600` | | fontSize | `0.9375rem` | | tracking | `-0.01em` | | shadow | `0 12px 32px -8px rgba(125, 249, 214, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.28)` | | backdropBlur | `32px` | | backdropSaturate | `200%` | #### Secondary | Property | Value | |----------|-------| | shape | `pill` | | background | `rgba(255, 255, 255, 0.10)` | | color | `#F4F7FB` | | border | `1px solid rgba(255, 255, 255, 0.22)` | | padding | `12px 24px` | | fontWeight | `600` | | fontSize | `0.9375rem` | | tracking | `-0.01em` | | shadow | `0 8px 24px -8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18)` | | backdropBlur | `32px` | | backdropSaturate | `180%` | #### Outline | Property | Value | |----------|-------| | shape | `pill` | | background | `rgba(255, 255, 255, 0.04)` | | color | `#F4F7FB` | | border | `1px solid rgba(255, 255, 255, 0.18)` | | padding | `11px 22px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.01em` | | backdropBlur | `24px` | | backdropSaturate | `160%` | #### Ghost | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `rgba(244, 247, 251, 0.72)` | | border | `none` | | padding | `11px 16px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | hoverHint | `glow` | ### Charts | Property | Value | |----------|-------| | variant | `line` | | strokeWidth | `2` | | gridlines | `false` | | highlight | `last` | | dotMarker | `true` | | axisColor | `#5C6478` | | palette | `#7DF9D6`, `#A78BFA`, `#F472B6` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 8px 24px -8px rgba(125, 249, 214, 0.35), inset 0 1px 0 rgba(255,255,255,0.18)`, transform: `translateY(-1px)`, filter: `saturate(1.15)` - **focus** — outline: `2px solid rgba(125, 249, 214, 0.5)`, outline-offset: `3px` - **active** — transform: `translateY(0) scale(0.98)`, filter: `brightness(0.96)` - **disabled** — opacity: `0.4`, filter: `saturate(0.4) blur(0.4px)` - **loading** — opacity: `0.7` - **selected** — bg: `rgba(125, 249, 214, 0.18)`, color: `#7DF9D6` #### Input - **hover** — border: `1px solid rgba(125, 249, 214, 0.4)`, shadow: `inset 0 1px 0 rgba(255,255,255,0.18)` - **focus** — border: `1px solid rgba(125, 249, 214, 0.65)`, shadow: `0 0 0 4px rgba(125, 249, 214, 0.15), inset 0 1px 0 rgba(255,255,255,0.18)` - **disabled** — opacity: `0.4` - **error** — border: `1px solid rgba(248,113,113,0.7)`, shadow: `0 0 0 4px rgba(248,113,113,0.15)` #### Card - **hover** — shadow: `0 16px 48px -16px rgba(125, 249, 214, 0.25), inset 0 1px 0 rgba(255,255,255,0.18)`, transform: `translateY(-2px)`, filter: `saturate(1.1)` - **selected** — border: `1px solid rgba(125, 249, 214, 0.5)` - **dragging** — shadow: `0 24px 64px -16px rgba(0,0,0,0.4)`, transform: `scale(1.02)`, opacity: `0.85` #### Tab - **hover** — bg: `rgba(125, 249, 214, 0.08)` - **focus** — outline: `2px solid rgba(125, 249, 214, 0.5)`, outline-offset: `2px` - **selected** — bg: `rgba(125, 249, 214, 0.18)`, color: `#7DF9D6` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Refract.** Long opacity- and blur-driven transitions. Not a hard move, but a shift of light across the glass surface. ```css transition: opacity 350ms cubic-bezier(0.32, 0.72, 0, 1), backdrop-filter 350ms cubic-bezier(0.32, 0.72, 0, 1), transform 350ms cubic-bezier(0.32, 0.72, 0, 1); ``` | Token | Value | |-------|-------| | duration.instant | `100ms` | | duration.fast | `200ms` | | duration.base | `350ms` | | duration.slow | `550ms` | | easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.34, 1.2, 0.64, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `inset 0 1px 0 rgba(255,255,255,0.18)` | Flat glass surface — top-edge gloss only. | | level1 | `0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Soft lift + top-edge gloss. | | level2 | `0 12px 32px -8px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255,255,255,0.18)` | Floating pane — popover. | | level3 | `0 24px 64px -16px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(125, 249, 214, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Sheet — accent rim for depth. | | level4 | `0 40px 96px -24px rgba(0, 0, 0, 0.5), 0 0 48px -12px rgba(125, 249, 214, 0.25), inset 0 1px 0 rgba(255,255,255,0.18)` | Modal — dramatic glow, scrim required. | ### Content - **measure:** `66ch` (max line length for body prose) - **paragraph spacing:** `1.25em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#7DF9D6`, underline `hover` - **blockquote:** border `1px solid rgba(125, 249, 214, 0.4)`, padding `0.9em 1.2em` - **code:** background `rgba(125, 249, 214, 0.1)`, color `#7DF9D6` ### Accessibility (WCAG 2.1) **Overall:** AAA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 18.04:1 | AA | AAA | — | | Body text on canvas | 18.94:1 | AA | AAA | — | | Muted text on surface | 8.87:1 | AA | AAA | — | | Accent on surface | 15.13:1 | AA-Large | AAA | — | | Accent on canvas | 15.89:1 | AA-Large | AAA | — | --- # SYSTEM: Botanical Press Source: https://www.freedesignmd.com/system/botanical-press --- name: "Botanical Press" description: "Pressed-herbarium editorial — deep forest ink and oxidized terracotta on bone paper. Italic Cormorant display, generous leading, hairline rules, and a single warm spot color used like a botanist's annotation stamp." tags: [editorial, natural, warm, serif] colors: primary: "#1F2A1E" secondary: "#7A8472" tertiary: "#B7553A" neutral: "#F2EDE0" surface: "#F8F4E9" typography: display: "Cormorant Garamond" body: Lora mono: "IBM Plex Mono" scale: hero: "5.25rem / 1 / 400 / -0.025em" h1: "3rem / 1.05 / 400 / -0.02em" h2: "1.5rem / 1.3 / 500 / 0" body: "1.0625rem / 1.7 / 400 / 0" radius: sm: 2px md: 3px lg: 4px shadows: card: "0 1px 0 rgba(31, 42, 30, 0.06)" button: none borders: card: "1px solid rgba(31, 42, 30, 0.16)" divider: "rgba(31, 42, 30, 0.10)" buttons: primary: background: #1F2A1E color: #F2EDE0 border: 1px solid #1F2A1E shape: rounded padding: 13px 24px font: display / 500 / 1rem / 0.01em secondary: background: #F8F4E9 color: #1F2A1E border: 1px solid #1F2A1E shape: rounded padding: 13px 24px font: display / 500 / 1rem / 0.01em outline: background: transparent color: #B7553A border: 1px solid #B7553A shape: rounded padding: 12px 22px font: display / 500 / 0.9375rem / 0.02em uppercase: true ghost: background: transparent color: #B7553A border: none shape: rounded padding: 10px 4px font: display / 500 / 1rem / 0.01em hover: underline charts: variant: line stroke_width: 1.5 gridlines: false highlight: last dot_marker: true axis_color: "#7A8472" palette: ["#B7553A", "#1F2A1E", "#7A8472"] fonts_url: "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Lora:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Botanical Press ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Botanical Press** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#1F2A1E`, text `#F2EDE0`, border `1px solid #1F2A1E`, padding `13px 24px`, weight `500`. - **Secondary** — rounded shape, bg `#F8F4E9`, text `#1F2A1E`, border `1px solid #1F2A1E`, padding `13px 24px`, weight `500`. - **Outline** — rounded shape, text `#B7553A`, border `1px solid #B7553A`, padding `12px 22px`, weight `500`, uppercased. - **Ghost** — rounded shape, text `#B7553A`, padding `10px 4px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#F8F4E9` - Border: `1px solid rgba(31, 42, 30, 0.16)` - Shadow: `0 1px 0 rgba(31, 42, 30, 0.06)` - Radius: `radius.lg` (`4px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `line` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#B7553A`, `#1F2A1E`, `#7A8472`. #### Typography pairings - **Display (`Cormorant Garamond`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Lora`)** — paragraphs, labels, button text, form inputs. - **Mono (`IBM Plex Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Botanical Press is the visual language of a 19th-century pressed-flora archive — deep forest ink and oxidized terracotta annotations on warm bone paper. Every screen reads like a herbarium card: hairline rules, italic Cormorant display, generous leading, and a single warm spot color used the way a botanist would stamp a specimen number. This system is for editorial product, slow content, journals, longform reading, naturalist brands, and anything that wants the calm authority of a museum collection card. ## Color - **Forest Ink #1F2A1E** — primary text and headings. Deep enough to read as black on bone, green enough to feel inked rather than printed. - **Oxidized Terracotta #B7553A** — the **only** accent. Used for annotations, outlines, ghost links, and chart highlights. Treat it like a stamp: rare, intentional, never decorative. - **Faded Sage #7A8472** — meta, captions, axis labels. The pencil tone. - **Bone #F2EDE0** — page paper. Warm off-white, never pure. - **Herbarium Card #F8F4E9** — surface for cards. A half-shade lighter than the page so the card lifts without floating. **There is no blue, no purple, no cool gradient anywhere.** The palette is two pigments on paper. ## Typography **Cormorant Garamond italic** is the display voice — it gives the system its herbarium-label cadence. Body is **Lora** for warm, readable serif paragraphs. Generous leading (1.7 on body) is mandatory; this is reading-first design. | Role | Font | Size | Weight | Style | |------|------|------|--------|-------| | Hero | Cormorant | 5.25rem | 400 | Italic | | H1 | Cormorant | 3rem | 400 | Italic | | H2 | Lora | 1.5rem | 500 | Roman | | Body | Lora | 1.0625rem | 400 | Roman, leading 1.7 | | Caption | IBM Plex Mono | 0.8125rem | 500 | Specimen-number voice | ## Buttons All four are rectangular with 2–4px radii — herbarium labels never have pill corners. - **Primary** — forest ink fill, bone label, italic Cormorant. The botanist's stamp. - **Secondary** — herbarium-card surface with a 1px ink border. Italic display label. - **Outline** — transparent with a 1px terracotta hairline. Uppercase, +2% tracking. Used for annotation-style CTAs. - **Ghost** — italic terracotta label, no chrome, hover underline. For inline references. **No shadows on any button.** The forest ink itself carries the weight. ## Cards Bone-card surface with a **1px forest-ink border at 16%** and a 1px hairline shadow at 6%. Cards lie flat. Radius is 4px. Never lift them with drop-shadow — the herbarium read depends on the page-flat plane. ## Charts & Data A single 1.5px terracotta line over the bone canvas with a small dot at the latest value. **No gridlines, no fills, no second color.** Axis labels in faded sage. Reads like a growth chart pencilled into the margin of a field notebook. ## Annotation Stamps The terracotta accent should appear once or twice per screen, used like a wax seal: - The single spot color on a chart line. - A small terracotta rule under a section number. - An italic terracotta caption beside a quoted figure. Never use terracotta on body text. Never use it as a fill on cards. Its scarcity is what makes it read as authoritative. ## Do's and Don'ts - ✅ Cormorant italic for every display heading. The italic is non-negotiable. - ✅ Generous leading (1.6–1.7) on body. This is reading-first. - ✅ Hairline borders only — 1px forest ink at 16% or terracotta at 100%. - ✅ Treat terracotta like a stamp — once or twice per screen, never as decoration. - ❌ No drop shadows on cards or buttons. The page-flat read is the system. - ❌ No pill buttons. No radii above 4px. - ❌ No cool colors. No blue, no purple, no neutral grey. - ❌ No sans-serif display. Cormorant italic carries the voice. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1F2A1E` | | secondary | `#7A8472` | | tertiary | `#B7553A` | | neutral | `#F2EDE0` | | surface | `#F8F4E9` | ### Typography - **Display:** Cormorant Garamond - **Body:** Lora - **Mono:** IBM Plex Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 5.25rem / 1 / 400 / -0.025em | | H1 | 3rem / 1.05 / 400 / -0.02em | | H2 | 1.5rem / 1.3 / 500 / 0 | | Body | 1.0625rem / 1.7 / 400 / 0 | ### Radius - sm: `2px` - md: `3px` - lg: `4px` ### Shadows - **card:** `0 1px 0 rgba(31, 42, 30, 0.06)` - **button:** `none` ### Borders - **card:** `1px solid rgba(31, 42, 30, 0.16)` - **divider:** `rgba(31, 42, 30, 0.10)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#1F2A1E` | | color | `#F2EDE0` | | border | `1px solid #1F2A1E` | | padding | `13px 24px` | | fontFamily | `display` | | fontWeight | `500` | | fontSize | `1rem` | | tracking | `0.01em` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#F8F4E9` | | color | `#1F2A1E` | | border | `1px solid #1F2A1E` | | padding | `13px 24px` | | fontFamily | `display` | | fontWeight | `500` | | fontSize | `1rem` | | tracking | `0.01em` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#B7553A` | | border | `1px solid #B7553A` | | padding | `12px 22px` | | fontFamily | `display` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `0.02em` | | uppercase | `true` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#B7553A` | | border | `none` | | padding | `10px 4px` | | fontFamily | `display` | | fontWeight | `500` | | fontSize | `1rem` | | tracking | `0.01em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `line` | | strokeWidth | `1.5` | | gridlines | `false` | | highlight | `last` | | dotMarker | `true` | | axisColor | `#7A8472` | | palette | `#B7553A`, `#1F2A1E`, `#7A8472` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(183, 85, 58, 0.92)`, shadow: `0 4px 20px -8px rgba(183, 85, 58, 0.4)` - **focus** — outline: `1.5px solid #B7553A`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#1F2A1E`, color: `#F8F4E9` #### Input - **hover** — border: `1px solid #1F2A1E` - **focus** — border: `1px solid #B7553A`, shadow: `0 1px 0 0 #B7553A` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #1F2A1E` #### Tab - **hover** — color: `#1F2A1E` - **focus** — outline: `1.5px solid #B7553A`, outline-offset: `3px` - **selected** — color: `#B7553A`, border: `0 0 2px 0 solid #B7553A` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#B7553A`, underline `always` - **blockquote:** border `4px solid #B7553A`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(31, 42, 30, 0.06)`, color `#1F2A1E` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 13.57:1 | AA | AAA | — | | Body text on canvas | 12.76:1 | AA | AAA | — | | Muted text on surface | 3.56:1 | AA | AA-Large | `#666e5f` → 4.82:1 (AA) | | Accent on surface | 4.37:1 | AA-Large | AA-Large | — | | Accent on canvas | 4.11:1 | AA-Large | AA-Large | — | --- # SYSTEM: Parchment Atelier Source: https://www.freedesignmd.com/system/parchment-atelier --- name: "Parchment Atelier" description: "Warm cream parchment canvas, humanist variable sans, opacity-driven gray scale, and the signature inset-shadow dark pill — quiet craft over cold tech." tags: [warm, minimal, editorial, premium] colors: primary: "#1c1c1c" secondary: "#5f5f5d" tertiary: "#1c1c1c" neutral: "#f7f4ed" surface: "#f7f4ed" typography: display: "Inter Tight" body: "Inter Tight" mono: "JetBrains Mono" scale: hero: "3.75rem / 1.05 / 600 / -1.5px" h1: "3rem / 1 / 600 / -1.2px" h2: "2.25rem / 1.1 / 600 / -0.9px" body: "1.125rem / 1.38 / 400 / 0" radius: sm: 4px md: 6px lg: 12px pill: 9999px shadows: button: "rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px" buttons: primary: background: #1F1B16 color: #F7F4ED border: none shape: rounded padding: 12px 20px font: display / 500 secondary: background: rgba(31,27,22,0.06) color: #1F1B16 border: none shape: rounded padding: 12px 20px font: display / 500 outline: background: transparent color: #1F1B16 border: 1px solid rgba(31,27,22,0.18) shape: rounded padding: 12px 20px font: display / 500 ghost: background: transparent color: rgba(31,27,22,0.7) border: none shape: rounded padding: 10px 12px font: display / 500 hover: underline charts: variant: bars stroke_width: 1.5 fill_opacity: 0.08 gridlines: true bar_radius: "2px 2px 0 0" bar_gap: 6px highlight: gradient dot_marker: true fonts_url: "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Parchment Atelier ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Parchment Atelier** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#1F1B16`, text `#F7F4ED`, padding `12px 20px`, weight `500`. - **Secondary** — rounded shape, bg `rgba(31,27,22,0.06)`, text `#1F1B16`, padding `12px 20px`, weight `500`. - **Outline** — rounded shape, text `#1F1B16`, border `1px solid rgba(31,27,22,0.18)`, padding `12px 20px`, weight `500`. - **Ghost** — rounded shape, text `rgba(31,27,22,0.7)`, padding `10px 12px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#f7f4ed` - Radius: `radius.lg` (`12px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `bars` - Bar radius: `2px 2px 0 0` - Highlight strategy: `gradient` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Inter Tight`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter Tight`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Parchment Atelier earns its warmth through restraint. Every page sits on a creamy parchment canvas (`#f7f4ed`) — a deliberate move away from the cold-white default of most developer tools. The surface feels approachable, almost analog, like a well-kept notebook. Near-black ink (`#1c1c1c`) on warm cream produces an easy, sharp read without the chill of pure black on pure white. The system leans on a humanist variable sans that carries the brand voice. At display sizes (48–60px), weight 600 with aggressive negative tracking (-0.9px to -1.5px) compresses headlines into confident editorial statements. Body copy stays at normal tracking for an unhurried reading rhythm. Most distinctive of all: the depth model is opacity-driven. Instead of an arbitrary gray scale, every gray on the page is `#1c1c1c` modulated through opacity (0.03, 0.04, 0.4, 0.82–0.83). The result is a tonal range that's nearly impossible to fake with hand-picked hexes. **Signature moves** - Warm parchment background (`#f7f4ed`) — never pure white - Humanist variable sans, weight 600 with negative tracking at scale - Opacity-derived grays, all from a single `#1c1c1c` source - Multi-layer inset shadow on the dark pill: `rgba(255,255,255,0.2) 0 0.5px 0 0 inset, rgba(0,0,0,0.2) 0 0 0 0.5px inset, rgba(0,0,0,0.05) 0 1px 2px 0` - Warm border palette: `#eceae4` (passive), `rgba(28,28,28,0.4)` (interactive) - Soft diffuse focus shadow: `rgba(0,0,0,0.1) 0 4px 12px` ## 2. Palette ### Primary - **Cream** `#f7f4ed` — page, card and button surfaces - **Charcoal** `#1c1c1c` — headings, primary text, dark button background - **Off-White** `#fcfbf8` — text on dark surfaces ### Opacity scale (all derived from `#1c1c1c`) - 100% `#1c1c1c` — primary text - 83% `rgba(28,28,28,0.83)` — strong secondary - 82% `rgba(28,28,28,0.82)` — body copy - 40% `rgba(28,28,28,0.4)` — interactive borders - 4% `rgba(28,28,28,0.04)` — hover micro-tints - 3% `rgba(28,28,28,0.03)` — barely-visible overlays - Muted `#5f5f5d` — captions, descriptions ### Lines - Passive border: `#eceae4` - Interactive border: `rgba(28,28,28,0.4)` - Focus shadow: `rgba(0,0,0,0.1) 0 4px 12px` - Ring: `rgba(59,130,246,0.5)` 2px ## 3. Typography | Role | Size | Weight | Leading | Tracking | |------|------|--------|---------|----------| | Display | 60px | 600 | 1.05 | -1.5px | | Section | 48px | 600 | 1.00 | -1.2px | | Sub-heading | 36px | 600 | 1.10 | -0.9px | | Card title | 20px | 400 | 1.25 | normal | | Body L | 18px | 400 | 1.38 | normal | | Body | 16px | 400 | 1.50 | normal | | Button | 16px | 400 | 1.50 | normal | | Caption | 14px | 400 | 1.50 | normal | **Two weights, clear roles:** 400 for body/UI/links/buttons, 600 for headings. Hierarchy comes from size and tracking, not weight stacks. Never reach for 700 — it breaks the system. ## 4. Buttons ### Primary Dark (inset shadow) ```css background: #1c1c1c; color: #fcfbf8; padding: 8px 16px; border-radius: 6px; box-shadow: rgba(255,255,255,0.2) 0 0.5px 0 0 inset, rgba(0,0,0,0.2) 0 0 0 0.5px inset, rgba(0,0,0,0.05) 0 1px 2px 0; ``` ### Ghost - Transparent background, `#1c1c1c` text - `1px solid rgba(28,28,28,0.4)` border, 6px radius - Active: opacity 0.8 ### Cream Surface - `#f7f4ed` background, no border, 6px radius — for tertiary actions ### Pill / Icon - `#f7f4ed` background, 9999px radius, same inset shadow as primary dark - Reserved for icon toggles, never rectangular labels ## 5. Cards - Background: `#f7f4ed` (matches page — no card lift) - Border: `1px solid #eceae4` - Radius: 12px standard, 16px featured, 8px compact - No box-shadow — borders carry containment ## 6. Spacing - Base: 8px - Scale: `8, 10, 12, 16, 24, 32, 40, 56, 80, 96, 128, 176, 192, 208` - Section vertical: 80–208px — generous editorial breathing room - Container max: ~1200px ## 7. Radius scale `4 / 6 / 8 / 12 / 16 / 9999` — pill is for action toggles and icon buttons, never rectangular CTAs. ## 8. Depth & elevation | Level | Treatment | Use | |-------|-----------|-----| | 0 | Flat cream | Page, content | | 1 | `1px solid #eceae4` | Cards, image frames | | 2 | Inset stack on dark pill | Primary CTA | | 3 | `rgba(0,0,0,0.1) 0 4px 12px` | Focus, active | The depth philosophy is shallow. Borders contain, the inset shadow on dark pills creates a pressed-into-surface tactility, and focus uses a diffuse warm glow rather than a sharp ring. ## 9. Do's & don'ts ✅ **Do** - Use cream (`#f7f4ed`) as the page foundation - Derive grays from `#1c1c1c` at varying opacity - Apply the inset shadow on every dark pill — it is the brand - Use `#eceae4` borders instead of card shadows - Keep the weight palette to 400 / 600 only ❌ **Don't** - Use pure white as the page background - Apply heavy drop-shadows to cards - Reach for weight 700 - Use saturated accent colors — the palette is intentionally warm-neutral - Apply 9999px radius to rectangular buttons --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1c1c1c` | | secondary | `#5f5f5d` | | tertiary | `#1c1c1c` | | neutral | `#f7f4ed` | | surface | `#f7f4ed` | ### Typography - **Display:** Inter Tight - **Body:** Inter Tight - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 3.75rem / 1.05 / 600 / -1.5px | | H1 | 3rem / 1 / 600 / -1.2px | | H2 | 2.25rem / 1.1 / 600 / -0.9px | | Body | 1.125rem / 1.38 / 400 / 0 | ### Radius - sm: `4px` - md: `6px` - lg: `12px` - pill: `9999px` ### Shadows - **button:** `rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#1F1B16` | | color | `#F7F4ED` | | border | `none` | | padding | `12px 20px` | | fontFamily | `display` | | fontWeight | `500` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `rgba(31,27,22,0.06)` | | color | `#1F1B16` | | border | `none` | | padding | `12px 20px` | | fontFamily | `display` | | fontWeight | `500` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#1F1B16` | | border | `1px solid rgba(31,27,22,0.18)` | | padding | `12px 20px` | | fontFamily | `display` | | fontWeight | `500` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `rgba(31,27,22,0.7)` | | border | `none` | | padding | `10px 12px` | | fontFamily | `display` | | fontWeight | `500` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `bars` | | strokeWidth | `1.5` | | fillOpacity | `0.08` | | gridlines | `true` | | barRadius | `2px 2px 0 0` | | barGap | `6px` | | highlight | `gradient` | | dotMarker | `true` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(28, 28, 28, 0.92)`, shadow: `0 4px 20px -8px rgba(28, 28, 28, 0.4)` - **focus** — outline: `1.5px solid #1c1c1c`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#1c1c1c`, color: `#f7f4ed` #### Input - **hover** — border: `1px solid #1c1c1c` - **focus** — border: `1px solid #1c1c1c`, shadow: `0 1px 0 0 #1c1c1c` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #1c1c1c` #### Tab - **hover** — color: `#1c1c1c` - **focus** — outline: `1.5px solid #1c1c1c`, outline-offset: `3px` - **selected** — color: `#1c1c1c`, border: `0 0 2px 0 solid #1c1c1c` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#1c1c1c`, underline `always` - **blockquote:** border `4px solid #1c1c1c`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(28, 28, 28, 0.06)`, color `#1c1c1c` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 15.51:1 | AA | AAA | — | | Body text on canvas | 15.51:1 | AA | AAA | — | | Muted text on surface | 5.83:1 | AA | AA | — | | Accent on surface | 15.51:1 | AA-Large | AAA | — | | Accent on canvas | 15.51:1 | AA-Large | AAA | — | --- # SYSTEM: Warm Canvas Source: https://www.freedesignmd.com/system/warm-canvas --- name: "Warm Canvas" description: "Approachable minimalism on warm white. Compressed Inter at -2.125px, whisper borders, multi-layer 4-stack shadows, and a single saturated blue accent." tags: [minimal, warm, productivity, saas] colors: primary: "#000000" secondary: "#615d59" tertiary: "#0075de" neutral: "#ffffff" surface: "#ffffff" typography: display: Inter body: Inter mono: "JetBrains Mono" scale: hero: "4rem / 1 / 700 / -2.125px" h1: "3rem / 1 / 700 / -1.5px" h2: "1.625rem / 1.23 / 700 / -0.625px" body: "1rem / 1.5 / 400 / 0" radius: sm: 4px md: 8px lg: 12px pill: 9999px shadows: card: "rgba(0,0,0,0.04) 0 4px 18px, rgba(0,0,0,0.027) 0 2.025px 7.85px, rgba(0,0,0,0.02) 0 0.8px 2.93px, rgba(0,0,0,0.01) 0 0.175px 1.04px" button: "rgba(0,117,222,0.15) 0 4px 12px" borders: card: "1px solid rgba(0,0,0,0.1)" divider: rgba(0,0,0,0.1) buttons: primary: background: #2F2F2F color: #FFFFFF border: none shape: rounded padding: 8px 16px font: 500 / 0.875rem secondary: background: #F7F6F3 color: #2F2F2F border: 1px solid #E9E5DC shape: rounded padding: 8px 16px font: 500 / 0.875rem outline: background: transparent color: #2F2F2F border: 1px solid #2F2F2F shape: rounded padding: 8px 16px font: 500 / 0.875rem ghost: background: transparent color: #787673 border: none shape: rounded padding: 8px 12px font: 500 / 0.875rem charts: variant: stepped stroke_width: 2 fill_opacity: 0.12 gridlines: true bar_gap: 0px highlight: single dot_marker: false fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Warm Canvas ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Warm Canvas** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#2F2F2F`, text `#FFFFFF`, padding `8px 16px`, weight `500`. - **Secondary** — rounded shape, bg `#F7F6F3`, text `#2F2F2F`, border `1px solid #E9E5DC`, padding `8px 16px`, weight `500`. - **Outline** — rounded shape, text `#2F2F2F`, border `1px solid #2F2F2F`, padding `8px 16px`, weight `500`. - **Ghost** — rounded shape, text `#787673`, padding `8px 12px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#ffffff` - Border: `1px solid rgba(0,0,0,0.1)` - Shadow: `rgba(0,0,0,0.04) 0 4px 18px, rgba(0,0,0,0.027) 0 2.025px 7.85px, rgba(0,0,0,0.02) 0 0.8px 2.93px, rgba(0,0,0,0.01) 0 0.175px 1.04px` - Radius: `radius.lg` (`12px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `stepped` - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Inter`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Warm Canvas embodies the philosophy of a great workspace: a blank canvas that gets out of your way. The system is built on warm neutrals rather than cold grays — distinctly approachable minimalism that feels like quality paper rather than sterile glass. The page background is pure white (`#ffffff`) but the text isn't pure black — it sits at `rgba(0,0,0,0.95)`, softening the read imperceptibly. The warm gray scale (`#f6f5f4`, `#31302e`, `#615d59`, `#a39e98`) carries subtle yellow-brown undertones, giving the interface a tactile, almost analog warmth. A modified geometric sans is the backbone of the system. At display sizes (64px) it uses aggressive negative letter-spacing (-2.125px), creating headlines that feel compressed and precise. The weight range is broader than typical: 400 for body, 500 for UI, 600 for semi-bold labels, 700 for display headings. OpenType features `"lnum"` and `"locl"` are enabled on larger text, adding sophistication that rewards close reading. What makes Warm Canvas distinctive is its **border philosophy**. Rather than heavy borders or shadows, it uses ultra-thin `1px solid rgba(0,0,0,0.1)` — borders that exist as whispers, barely perceptible division lines that create structure without weight. The shadow system is equally restrained: multi-layer 4-stack with cumulative opacity never exceeding 0.05, depth that's felt rather than seen. **Signature moves** - Compressed sans at -2.125px tracking on 64px display - Warm neutrals: yellow-brown undertones throughout (`#f6f5f4` warm white, `#31302e` warm dark) - Near-black text via `rgba(0,0,0,0.95)` — micro-warmth - Whisper borders: `1px solid rgba(0,0,0,0.1)` — barely there - Multi-layer 4-stack shadows with sub-0.05 opacity - Single saturated blue accent (`#0075de`) — the only color in core UI chrome - Pill badges (9999px) with tinted blue background for status ## 2. Palette ### Primary - **Near Black** `rgba(0,0,0,0.95)` — text, headings - **Pure White** `#ffffff` — page, cards - **Canvas Blue** `#0075de` — CTA, links, single saturated accent ### Warm Neutrals - Warm White `#f6f5f4` — section alternation - Warm Dark `#31302e` — dark surface - Warm Gray 500 `#615d59` — secondary text - Warm Gray 300 `#a39e98` — placeholders, disabled ### Semantic - Teal `#2a9d99` — success - Green `#1aae39` — completion - Orange `#dd5b00` — warning - Pink `#ff64c8` — decorative ### Interactive - Active `#005bab` — pressed - Focus `#097fe8` — ring - Badge bg `#f2f9ff`, text `#097fe8` ## 3. Typography | Role | Size | Weight | Leading | Tracking | |------|------|--------|---------|----------| | Display Hero | 64px | 700 | 1.00 | -2.125px | | Display 2 | 54px | 700 | 1.04 | -1.875px | | Section | 48px | 700 | 1.00 | -1.5px | | Sub-heading L | 40px | 700 | 1.50 | normal | | Sub-heading | 26px | 700 | 1.23 | -0.625px | | Card title | 22px | 700 | 1.27 | -0.25px | | Body L | 20px | 600 | 1.40 | -0.125px | | Body | 16px | 400 | 1.50 | normal | | Nav | 15px | 600 | 1.33 | normal | | Badge | 12px | 600 | 1.33 | +0.125px | **Four-weight system.** 400 (read), 500 (interact), 600 (emphasize), 700 (announce). Tracking compresses with size and relaxes at body. Badges are the only positive-tracking text. ## 4. Buttons ### Primary Blue ```css background: #0075de; color: #ffffff; padding: 8px 16px; border-radius: 4px; ``` Hover `#005bab`. Active scale(0.9). ### Secondary Translucent - Background `rgba(0,0,0,0.05)`, text near-black - 4px radius, scale(1.05) on hover ### Pill Badge - Background `#f2f9ff`, text `#097fe8` - 9999px radius, 4px 8px padding, 12px weight 600 ## 5. Cards - Background: `#ffffff` - Border: `1px solid rgba(0,0,0,0.1)` (whisper) - Radius: 12px standard, 16px featured - Shadow: 4-layer stack, max opacity 0.04 ## 6. Charts **Stepped charts.** Bars are flush (no gap) with a thin top accent line, giving an organic, blocky productivity-tool feel. Gridlines are dashed at 14% opacity. Line charts use a 2px stroke with subtle 12% area fill — no end-dot. ## 7. Spacing - Base: 8px - Scale: `2, 3, 4, 5, 6, 7, 8, 11, 12, 14, 16, 24, 32` - Section vertical: 64–120px ## 8. Depth & elevation | Level | Treatment | Use | |-------|-----------|-----| | 0 | None | Page, text | | 1 | Whisper border `1px solid rgba(0,0,0,0.1)` | Cards, dividers | | 2 | 4-stack shadow (max 0.04) | Content cards | | 3 | 5-stack shadow (max 0.05, 52px blur) | Modals, hero | **Layered, ambient, embedded.** Multiple layers with extremely low individual opacity accumulate into soft natural-looking elevation — elements feel embedded in the page, not floating above it. ## 9. Do's & don'ts ✅ **Do** - Use warm neutrals exclusively — yellow-brown undertones - Compress display tracking to -2.125px at 64px - Use whisper borders at `rgba(0,0,0,0.1)` — never heavier - Layer 4–5 shadows with sub-0.05 individual opacity - Reserve canvas blue (`#0075de`) for CTAs and links ❌ **Don't** - Use blue-gray neutrals — kills the warmth - Apply pill radius to cards — pill is for badges only - Use heavy single shadows — multi-layer ambient only - Introduce more saturated colors in core chrome - Use bold (`#000000`) — `rgba(0,0,0,0.95)` only --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#000000` | | secondary | `#615d59` | | tertiary | `#0075de` | | neutral | `#ffffff` | | surface | `#ffffff` | ### Typography - **Display:** Inter - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4rem / 1 / 700 / -2.125px | | H1 | 3rem / 1 / 700 / -1.5px | | H2 | 1.625rem / 1.23 / 700 / -0.625px | | Body | 1rem / 1.5 / 400 / 0 | ### Radius - sm: `4px` - md: `8px` - lg: `12px` - pill: `9999px` ### Shadows - **card:** `rgba(0,0,0,0.04) 0 4px 18px, rgba(0,0,0,0.027) 0 2.025px 7.85px, rgba(0,0,0,0.02) 0 0.8px 2.93px, rgba(0,0,0,0.01) 0 0.175px 1.04px` - **button:** `rgba(0,117,222,0.15) 0 4px 12px` ### Borders - **card:** `1px solid rgba(0,0,0,0.1)` - **divider:** `rgba(0,0,0,0.1)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#2F2F2F` | | color | `#FFFFFF` | | border | `none` | | padding | `8px 16px` | | fontWeight | `500` | | fontSize | `0.875rem` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#F7F6F3` | | color | `#2F2F2F` | | border | `1px solid #E9E5DC` | | padding | `8px 16px` | | fontWeight | `500` | | fontSize | `0.875rem` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#2F2F2F` | | border | `1px solid #2F2F2F` | | padding | `8px 16px` | | fontWeight | `500` | | fontSize | `0.875rem` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#787673` | | border | `none` | | padding | `8px 12px` | | fontWeight | `500` | | fontSize | `0.875rem` | ### Charts | Property | Value | |----------|-------| | variant | `stepped` | | strokeWidth | `2` | | fillOpacity | `0.12` | | gridlines | `true` | | barGap | `0px` | | highlight | `single` | | dotMarker | `false` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 8px 24px -10px rgba(0, 117, 222, 0.35)`, transform: `translateY(-1px)`, filter: `brightness(1.02)` - **focus** — outline: `2px solid rgba(0, 117, 222, 0.4)`, outline-offset: `3px` - **active** — transform: `translateY(0) scale(0.98)` - **disabled** — opacity: `0.4`, filter: `saturate(0.5)` - **loading** — opacity: `0.65` - **selected** — bg: `rgba(0, 117, 222, 0.18)`, color: `#0075de` #### Input - **hover** — bg: `rgba(0, 117, 222, 0.03)`, border: `1px solid rgba(0, 117, 222, 0.4)` - **focus** — border: `1px solid rgba(0, 117, 222, 0.6)`, shadow: `0 0 0 4px rgba(0, 117, 222, 0.12)` - **disabled** — opacity: `0.4` - **error** — border: `1px solid rgba(244,114,182,0.7)`, shadow: `0 0 0 4px rgba(244,114,182,0.15)` #### Card - **hover** — shadow: `0 16px 40px -16px rgba(0, 117, 222, 0.3)`, transform: `translateY(-3px)` - **selected** — bg: `rgba(0, 117, 222, 0.04)`, border: `1px solid rgba(0, 117, 222, 0.5)` - **dragging** — transform: `scale(1.03) rotate(-0.8deg)`, opacity: `0.92` #### Tab - **hover** — bg: `rgba(0, 117, 222, 0.08)`, color: `#0075de` - **focus** — outline: `2px solid rgba(0, 117, 222, 0.4)`, outline-offset: `2px` - **selected** — bg: `rgba(0, 117, 222, 0.16)`, color: `#0075de` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Soft fade.** Long, gentle transitions with a symmetric easing curve. Motion is calming, never intrusive. ```css transition: all 400ms cubic-bezier(0.45, 0.05, 0.55, 0.95); ``` | Token | Value | |-------|-------| | duration.instant | `120ms` | | duration.fast | `240ms` | | duration.base | `400ms` | | duration.slow | `600ms` | | easing.standard | `cubic-bezier(0.45, 0.05, 0.55, 0.95)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.45, 1.4, 0.55, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the tone separates, not the shadow. | | level1 | `0 2px 6px -2px rgba(0, 117, 222, 0.12)` | Soft tinted lift. | | level2 | `0 8px 24px -10px rgba(0, 117, 222, 0.2)` | Floating card — pastel-tinted shadow. | | level3 | `0 16px 48px -16px rgba(0, 117, 222, 0.28)` | Sheet — visible tinted glow. | | level4 | `0 32px 80px -24px rgba(0, 117, 222, 0.4)` | Modal — tinted wash, scrim required. | ### Content - **measure:** `64ch` (max line length for body prose) - **paragraph spacing:** `1.35em` - **list indent:** `1.5em` - **list gap:** `0.6em` - **link:** color `#0075de`, underline `hover` - **blockquote:** border `2px solid rgba(0, 117, 222, 0.5)`, padding `0.9em 1.2em` - **code:** background `rgba(0, 117, 222, 0.1)`, color `#000000` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 21:1 | AA | AAA | — | | Body text on canvas | 21:1 | AA | AAA | — | | Muted text on surface | 6.53:1 | AA | AA | — | | Accent on surface | 4.57:1 | AA-Large | AA | — | | Accent on canvas | 4.57:1 | AA-Large | AA | — | --- # SYSTEM: Warm Editorial Source: https://www.freedesignmd.com/system/warm-editorial --- name: "Warm Editorial" description: "A warm, high-contrast palette rooted in broadsheet newspaper aesthetics." tags: [editorial, minimal, warm] colors: primary: "#1A1C1E" secondary: "#6C7278" tertiary: "#B8422E" neutral: "#F7F5F2" surface: "#FFFFFF" typography: display: Fraunces body: "Public Sans" mono: "JetBrains Mono" radius: sm: 4px md: 6px lg: 8px buttons: primary: background: #B8422E color: #FFFFFF border: none shape: rounded padding: 12px 20px font: 500 secondary: background: #1A1C1E color: #FFFFFF border: none shape: rounded padding: 12px 20px font: 500 outline: background: #FFFFFF color: #1A1C1E border: 1px solid #E8E4DD shape: rounded padding: 12px 20px font: 500 ghost: background: transparent color: #B8422E border: none shape: rounded padding: 10px 12px font: 600 hover: underline charts: variant: capsule bar_gap: 12px highlight: gradient fonts_url: "https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,600;0,700;1,400&family=Public+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Warm Editorial ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Warm Editorial** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#B8422E`, text `#FFFFFF`, padding `12px 20px`, weight `500`. - **Secondary** — rounded shape, bg `#1A1C1E`, text `#FFFFFF`, padding `12px 20px`, weight `500`. - **Outline** — rounded shape, bg `#FFFFFF`, text `#1A1C1E`, border `1px solid #E8E4DD`, padding `12px 20px`, weight `500`. - **Ghost** — rounded shape, text `#B8422E`, padding `10px 12px`, weight `600`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FFFFFF` - Radius: `radius.lg` (`8px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `capsule` - Highlight strategy: `gradient` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Fraunces`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Public Sans`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview A serif-driven editorial system. Warmth comes from the off-white background and a single terracotta accent — used only on primary actions. The aesthetic borrows from print: generous whitespace, italic emphasis, restrained color. ## Colors - **Primary #1A1C1E** — body and headlines. Near-black, never pure black, to keep warmth. - **Secondary #6C7278** — meta text, captions, secondary UI. - **Tertiary #B8422E** — terracotta. CTAs and italic display emphasis only. Never on body text or icons. - **Neutral #F7F5F2** — page background. - **Surface #FFFFFF** — cards, modals, elevated panels. ## Typography - Display: **Fraunces** — italics for emphasis on key fragments only. - Body: **Public Sans** — clean, neutral grotesque. - Mono: **JetBrains Mono** — code blocks. ## Spacing 4px base unit. Sections separated by 96px. Container max 1200px with 24px gutter. ## Components Buttons are filled terracotta or outline. Cards are white with a 1px border and minimal shadow. ## Icons Use `lucide-react` exclusively. Stroke width 1.5. Default 20px, 16px in dense UI, 24px on primary actions. Icons inherit text color — never terracotta. ## Do's and Don'ts - ✅ Use terracotta sparingly — one or two elements per viewport. - ✅ Italicize a fragment of a headline for emphasis. - ❌ Don't apply terracotta to body text, icons, or large surfaces. - ❌ Don't use gradients or heavy shadows. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1A1C1E` | | secondary | `#6C7278` | | tertiary | `#B8422E` | | neutral | `#F7F5F2` | | surface | `#FFFFFF` | ### Typography - **Display:** Fraunces - **Body:** Public Sans - **Mono:** JetBrains Mono ### Radius - sm: `4px` - md: `6px` - lg: `8px` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#B8422E` | | color | `#FFFFFF` | | border | `none` | | padding | `12px 20px` | | fontWeight | `500` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#1A1C1E` | | color | `#FFFFFF` | | border | `none` | | padding | `12px 20px` | | fontWeight | `500` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `#FFFFFF` | | color | `#1A1C1E` | | border | `1px solid #E8E4DD` | | padding | `12px 20px` | | fontWeight | `500` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#B8422E` | | border | `none` | | padding | `10px 12px` | | fontWeight | `600` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `capsule` | | barGap | `12px` | | highlight | `gradient` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(184, 66, 46, 0.92)`, shadow: `0 4px 20px -8px rgba(184, 66, 46, 0.4)` - **focus** — outline: `1.5px solid #B8422E`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#1A1C1E`, color: `#FFFFFF` #### Input - **hover** — border: `1px solid #1A1C1E` - **focus** — border: `1px solid #B8422E`, shadow: `0 1px 0 0 #B8422E` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #1A1C1E` #### Tab - **hover** — color: `#1A1C1E` - **focus** — outline: `1.5px solid #B8422E`, outline-offset: `3px` - **selected** — color: `#B8422E`, border: `0 0 2px 0 solid #B8422E` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#B8422E`, underline `always` - **blockquote:** border `4px solid #B8422E`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(26, 28, 30, 0.06)`, color `#1A1C1E` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 17.09:1 | AA | AAA | — | | Body text on canvas | 15.71:1 | AA | AAA | — | | Muted text on surface | 4.87:1 | AA | AA | — | | Accent on surface | 5.44:1 | AA-Large | AA | — | | Accent on canvas | 5:1 | AA-Large | AA | — | --- # SYSTEM: Duotone Press Source: https://www.freedesignmd.com/system/duotone-press --- name: "Duotone Press" description: "A two-color press operation: warm bone and persimmon, nothing else. Bricolage Grotesque for display at oversized scale, Newsreader for body, sharp 0px corners, every accent and every CTA in the same persimmon. Built for editorial sites, indie magazines, and brands that want one disciplined color move and zero decoration." tags: [editorial, duotone, warm, minimal, bold] colors: primary: "#1a1612" secondary: "#1a1612" tertiary: "#cf4a1c" neutral: "#ede4d3" surface: "#f5ecd9" typography: display: "Bricolage Grotesque" body: Newsreader mono: "JetBrains Mono" scale: hero: "10rem / 0.9 / 700 / -0.045em" h1: "5rem / 0.96 / 700 / -0.03em" h2: "2rem / 1.18 / 600 / -0.018em" body: "1.125rem / 1.65 / 400 / -0.003em" radius: sm: 0px md: 0px lg: 0px pill: 9999px shadows: card: none button: none borders: card: "1px solid #1a1612" divider: "#1a1612" buttons: primary: background: #cf4a1c color: #f5ecd9 border: none shape: sharp padding: 13px 26px font: 600 / 0.8125rem / 0.10em uppercase: true secondary: background: transparent color: #1a1612 border: 1px solid #1a1612 shape: sharp padding: 13px 26px font: 600 / 0.8125rem / 0.10em uppercase: true outline: background: transparent color: #1a1612 border: 1px solid #1a1612 shape: sharp padding: 13px 26px font: 600 / 0.8125rem / 0.10em uppercase: true ghost: background: transparent color: #1a1612 border: none shape: sharp padding: 13px 18px font: 600 / 0.8125rem / 0.10em uppercase: true charts: variant: bars stroke_width: 2 fill_opacity: 0 gridlines: false bar_gap: 8px highlight: single dot_marker: false fonts_url: "https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700&family=Newsreader:ital,wght@0,400;0,500;1,400&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Duotone Press ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Duotone Press** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#cf4a1c`, text `#f5ecd9`, padding `13px 26px`, weight `600`, uppercased. - **Secondary** — sharp shape, text `#1a1612`, border `1px solid #1a1612`, padding `13px 26px`, weight `600`, uppercased. - **Outline** — sharp shape, text `#1a1612`, border `1px solid #1a1612`, padding `13px 26px`, weight `600`, uppercased. - **Ghost** — sharp shape, text `#1a1612`, padding `13px 18px`, weight `600`, uppercased. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#f5ecd9` - Border: `1px solid #1a1612` - Shadow: `none` - Radius: `radius.lg` (`0px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Bricolage Grotesque`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Newsreader`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Duotone Press is a strict two-color press operation. The page surface is warm bone `#f5ecd9` — never white, never cream. Ink is near-black `#1a1612` with a slight warm undertone — text, headings, dividers, secondary buttons, card borders. The single accent is persimmon `#cf4a1c` — every CTA, every active state, every editorial moment. There is no third color. Display headlines run in Bricolage Grotesque at 160px, weight 700 — the variable-grotesque hits like a press-roll. Body sits in Newsreader at 18px on a 1.65 leading — the warm text-grade serif is the editorial counterweight. The discipline is absolute: every pixel is bone, ink, or persimmon. No greys, no tints, no opacity tricks. The persimmon does the entire job of "look here," and a page should have at most three persimmon moments. **Signature moves** - Bricolage Grotesque 700 at 160px — variable-grotesque press-roll weight - Newsreader 18px body — warm text-grade serif counterweight - Strict two-color: bone `#f5ecd9` + ink `#1a1612` + persimmon `#cf4a1c` — no third color - Persimmon for every CTA + every active state + every editorial moment - Sharp 0px corners on every card and button — press-printed precision - 1px ink dividers and card borders — never grey, never opacity ## 2. Palette (the entire system) - **Bone** `#f5ecd9` — page background - **Bone Lift** `#ede4d3` — secondary surfaces, table headers - **Ink** `#1a1612` — text, dividers, card borders, secondary CTA outline - **Persimmon** `#cf4a1c` — primary CTA, active state, editorial accent That is the entire palette. No greys (use opacity-0 ink only when absolutely needed for ink-50 text via an actual second ink swatch — but prefer dropping the text). No third hue. Ever. ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Bricolage Grotesque | 160px | 700 | 0.90 | -0.045em | | H1 | Bricolage Grotesque | 80px | 700 | 0.96 | -0.03em | | H2 | Bricolage Grotesque | 32px | 600 | 1.18 | -0.018em | | Pull Quote | Newsreader (italic) | 26px | 400 | 1.4 | -0.008em | | Body | Newsreader | 18px | 400 | 1.65 | -0.003em | | UI / Button | Bricolage Grotesque | 13px | 600 | 1.4 | 0.10em uppercase | | Caption | JetBrains Mono | 11px | 500 | 1.0 | 0.10em uppercase | | Number | JetBrains Mono | 14px | 500 | 1.0 | 0 tabular-nums | Bricolage Grotesque on display + UI labels; Newsreader on body + pull quotes. Two voices, no compromise. ## 4. Buttons ### Primary (Persimmon — every CTA) ```css background: #cf4a1c; color: #f5ecd9; padding: 13px 26px; border-radius: 0px; text-transform: uppercase; letter-spacing: 0.10em; font-weight: 600; ``` Sharp 0px corners. The persimmon-on-bone reads as a printed-tab press-stamp. ### Secondary (Ink Outline) - Transparent, 1px solid ink, ink text — same sharp 0px corners ### Outline & Ghost - Outline: identical to secondary (no fourth treatment in a two-color system) - Ghost: no border, ink text, hover underlines ## 5. Cards ```css background: #f5ecd9; border: 1px solid #1a1612; border-radius: 0px; box-shadow: none; ``` NO shadows. NO opacity. The 1px solid ink border is the only chrome. The active card flips: ink background, bone text, 1px persimmon border on the bottom edge — the only place persimmon ever appears as a border. ## 6. Charts Thick precise bars (8px wide, 8px gap). One bar in persimmon, others in ink. NO gridlines. Y-axis labels in JetBrains Mono uppercase 11px. Charts read as press-printed broadside graphics, not as data viz. ## 7. Tabs Underline 2px in persimmon for the active state. Inactive tabs are ink in Bricolage Grotesque uppercase 0.10em. The underline is the only place persimmon appears in nav. ## 8. Spacing - Base 8px - Scale: `8, 16, 24, 32, 48, 64, 96, 128, 160` - Section padding: 128px desktop, 64px mobile ## 9. Do's & don'ts ✅ **Do** - Hold the strict two-color discipline: bone, ink, persimmon — no greys, no tints, no third hue - Use Bricolage Grotesque at 160px for the hero — the variable-grotesque is the system's voice - Reserve persimmon for CTAs + active states + editorial accents only - Use sharp 0px corners on every card and button — press-printed precision ❌ **Don't** - Add a third color, even for status — success/warn/error all live in ink + persimmon - Use ink-50 grey for secondary text — drop the text or restate it in shorter form - Round any corner — 0px or pill (for badges only), nothing in between - Use persimmon as a background fill — three surfaces only (CTA, active state, editorial accent) --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1a1612` | | secondary | `#1a1612` | | tertiary | `#cf4a1c` | | neutral | `#ede4d3` | | surface | `#f5ecd9` | ### Typography - **Display:** Bricolage Grotesque - **Body:** Newsreader - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 10rem / 0.9 / 700 / -0.045em | | H1 | 5rem / 0.96 / 700 / -0.03em | | H2 | 2rem / 1.18 / 600 / -0.018em | | Body | 1.125rem / 1.65 / 400 / -0.003em | ### Radius - sm: `0px` - md: `0px` - lg: `0px` - pill: `9999px` ### Shadows - **card:** `none` - **button:** `none` ### Borders - **card:** `1px solid #1a1612` - **divider:** `#1a1612` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#cf4a1c` | | color | `#f5ecd9` | | border | `none` | | padding | `13px 26px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.10em` | | uppercase | `true` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#1a1612` | | border | `1px solid #1a1612` | | padding | `13px 26px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.10em` | | uppercase | `true` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#1a1612` | | border | `1px solid #1a1612` | | padding | `13px 26px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.10em` | | uppercase | `true` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#1a1612` | | border | `none` | | padding | `13px 18px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.10em` | | uppercase | `true` | ### Charts | Property | Value | |----------|-------| | variant | `bars` | | strokeWidth | `2` | | fillOpacity | `0` | | gridlines | `false` | | barGap | `8px` | | highlight | `single` | | dotMarker | `false` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(207, 74, 28, 0.92)`, shadow: `0 4px 20px -8px rgba(207, 74, 28, 0.4)` - **focus** — outline: `1.5px solid #cf4a1c`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#1a1612`, color: `#f5ecd9` #### Input - **hover** — border: `1px solid #1a1612` - **focus** — border: `1px solid #cf4a1c`, shadow: `0 1px 0 0 #cf4a1c` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #1a1612` #### Tab - **hover** — color: `#1a1612` - **focus** — outline: `1.5px solid #cf4a1c`, outline-offset: `3px` - **selected** — color: `#cf4a1c`, border: `0 0 2px 0 solid #cf4a1c` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#cf4a1c`, underline `always` - **blockquote:** border `4px solid #cf4a1c`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(26, 22, 18, 0.06)`, color `#1a1612` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 15.32:1 | AA | AAA | — | | Body text on canvas | 14.25:1 | AA | AAA | — | | Muted text on surface | 15.32:1 | AA | AAA | — | | Accent on surface | 3.85:1 | AA-Large | AA-Large | — | | Accent on canvas | 3.58:1 | AA-Large | AA-Large | — | --- # SYSTEM: Studio Margaux Source: https://www.freedesignmd.com/system/studio-margaux --- name: "Studio Margaux" description: "A design-studio identity built on asymmetric oversized typography. Cream surfaces, Fraunces at extreme display scale paired with Inter Tight for body, an inked black block reserved for the studio mark and the single primary CTA, and an italic serif accent line that breaks every layout. Built for design agencies, art-direction portfolios, and creative studios that lead with type instead of imagery." tags: [editorial, agency, warm, premium, asymmetric] colors: primary: "#0e0c0a" secondary: "#5e574d" tertiary: "#0e0c0a" neutral: "#ebe2ce" surface: "#f1e8d4" typography: display: Fraunces body: "Inter Tight" mono: "JetBrains Mono" scale: hero: "11rem / 0.85 / 300 / -0.05em" h1: "5.5rem / 0.95 / 400 / -0.035em" h2: "2.25rem / 1.15 / 400 / -0.018em" body: "1.0625rem / 1.6 / 400 / -0.005em" radius: sm: 0px md: 0px lg: 0px pill: 9999px shadows: card: none button: none borders: card: "1px solid rgba(14,12,10,0.14)" divider: rgba(14,12,10,0.18) buttons: primary: background: #0e0c0a color: #f1e8d4 border: none shape: sharp padding: 16px 28px font: 600 / 0.8125rem / 0.14em uppercase: true secondary: background: transparent color: #0e0c0a border: 1px solid #0e0c0a shape: sharp padding: 16px 28px font: 600 / 0.8125rem / 0.14em uppercase: true outline: background: transparent color: #0e0c0a border: 1px solid rgba(14,12,10,0.20) shape: sharp padding: 16px 28px font: 600 / 0.8125rem / 0.14em uppercase: true ghost: background: transparent color: #5e574d border: none shape: sharp padding: 16px 18px font: 600 / 0.8125rem / 0.14em uppercase: true charts: variant: "thin-bars" stroke_width: 1 fill_opacity: 0 gridlines: false bar_gap: 12px highlight: single dot_marker: false fonts_url: "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;1,9..144,300;1,9..144,400&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Studio Margaux ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Studio Margaux** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#0e0c0a`, text `#f1e8d4`, padding `16px 28px`, weight `600`, uppercased. - **Secondary** — sharp shape, text `#0e0c0a`, border `1px solid #0e0c0a`, padding `16px 28px`, weight `600`, uppercased. - **Outline** — sharp shape, text `#0e0c0a`, border `1px solid rgba(14,12,10,0.20)`, padding `16px 28px`, weight `600`, uppercased. - **Ghost** — sharp shape, text `#5e574d`, padding `16px 18px`, weight `600`, uppercased. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#f1e8d4` - Border: `1px solid rgba(14,12,10,0.14)` - Shadow: `none` - Radius: `radius.lg` (`0px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `thin-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Fraunces`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter Tight`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Studio Margaux is a design studio that leads with typography instead of imagery. The page surface is warm cream `#f1e8d4` — a colored letterpress stock, never white. Display headlines run in Fraunces 300 at 176px with -0.05em tracking — the soft-modern serif at extreme thin weight stretched across the full bleed. Below every headline sits a single italic Fraunces line at 56px that intentionally breaks the alignment of the headline above — the asymmetric editorial moment that signals studio-craft. Body sits in Inter Tight at 17px on a 1.6 leading. UI labels in Inter Tight 600 with 0.14em uppercase tracking. The single accent is pure ink `#0e0c0a` — a true near-black inked block reserved for the studio mark, the primary CTA, and the section index numbers (01., 02., 03.). The discipline is in the asymmetry: every section has one element that intentionally breaks the grid — a headline that overhangs the column, a metadata block that floats into the margin, an italic line that starts mid-page. The layout never resolves to symmetry. That is the studio voice. **Signature moves** - Fraunces 300 at 176px — extreme thin display weight stretched full-bleed - Italic Fraunces second line at 56px breaking the headline alignment — asymmetric craft moment - Cream surface `#f1e8d4` — colored letterpress stock, never white - Pure ink `#0e0c0a` blocks reserved for studio mark + primary CTA + section index numbers - Sharp 0px corners on every surface — letterpress precision - Section index numbers (01., 02., 03.) in Fraunces 400 at 96px — the chapter mark voice ## 2. Palette ### Surfaces - **Cream** `#f1e8d4` — page background (warm letterpress stock) - **Cream Lift** `#ebe2ce` — secondary surfaces, footer - **Hairline** `rgba(14,12,10,0.14)` — every divider ### Ink - **Ink** `#0e0c0a` — text, headings, studio mark, primary CTA fill (pure near-black) - **Ink 50** `#5e574d` — secondary text, mono captions That is the entire palette. There is no accent — the contrast between cream and pure ink IS the system. ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero | Fraunces | 176px | 300 | 0.85 | -0.05em | | Hero Italic Line | Fraunces (italic) | 56px | 400 | 1.05 | -0.018em | | Section Index (01.) | Fraunces | 96px | 400 | 1.0 | -0.04em | | H1 | Fraunces | 88px | 400 | 0.95 | -0.035em | | H2 | Fraunces | 36px | 400 | 1.15 | -0.018em | | Pull Quote | Fraunces (italic) | 32px | 300 | 1.32 | -0.012em | | Body | Inter Tight | 17px | 400 | 1.6 | -0.005em | | UI / Button | Inter Tight | 13px | 600 | 1.4 | 0.14em uppercase | | Caption / Date | JetBrains Mono | 11px | 500 | 1.0 | 0.10em uppercase | | Project Number | JetBrains Mono | 13px | 500 | 1.0 | 0 tabular-nums | Fraunces lives at 300 (display thin) and 400 (h1/section index). Italic 300 for pull quotes, italic 400 for the breaking second line. The mono is reserved for project numbers and dates — the metadata voice. ## 4. Buttons ### Primary (Ink Block) ```css background: #0e0c0a; color: #f1e8d4; padding: 16px 28px; border-radius: 0px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; ``` The 16px vertical padding makes the ink block read as a stamped letterpress slab — heavier than a typical button, intentionally so. ### Secondary (Ink Outline) - Transparent, 1px solid ink, ink text — same sharp 0px corners, same heavy padding ### Outline & Ghost - Outline: transparent, 1px hairline at 20% ink - Ghost: no border, ink-50 uppercase ## 5. Cards (rarely used) ```css background: #f1e8d4; border: 1px solid rgba(14,12,10,0.14); border-radius: 0px; box-shadow: none; ``` The system prefers hairline-divided sections over cards. When a card is needed (project tile, team member), it is sharp 0px corners with a 1px hairline — never lifted, never shadowed. ## 6. Charts Thin precise bars (3px wide, 12px gap). One bar in ink, others in 22% ink. NO gridlines. Y-axis labels in JetBrains Mono uppercase 11px. Charts are reserved for studio metrics and read as broadside exhibits. ## 7. Tabs Underline 1.5px in ink for the active state. Inactive tabs are ink-50 in Inter Tight 600 uppercase. Active label often switches to Fraunces italic at the same size — that is the rhythm change. ## 8. Spacing - Base 8px - Scale: `8, 16, 24, 32, 48, 64, 96, 128, 200, 280` - Section padding: 200px desktop, 96px mobile — full editorial breathing room ## 9. Do's & don'ts ✅ **Do** - Use Fraunces 300 at 176px for the hero — the extreme thin weight is the studio voice - Pair every headline with a single Fraunces italic line that breaks the alignment — the asymmetric craft moment - Hold the cream surface — white reads as web app, beige reads as old textbook - Number every section in Fraunces 400 at 96px (01., 02., 03.) — the chapter-mark voice ❌ **Don't** - Use Fraunces at 600+ for display — bold breaks the studio thin-weight signature - Resolve the layout to symmetry — every section needs one intentional grid-break - Add a third color or accent — cream + pure ink IS the entire palette - Round any corner — 0px sharp letterpress precision throughout --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#0e0c0a` | | secondary | `#5e574d` | | tertiary | `#0e0c0a` | | neutral | `#ebe2ce` | | surface | `#f1e8d4` | ### Typography - **Display:** Fraunces - **Body:** Inter Tight - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 11rem / 0.85 / 300 / -0.05em | | H1 | 5.5rem / 0.95 / 400 / -0.035em | | H2 | 2.25rem / 1.15 / 400 / -0.018em | | Body | 1.0625rem / 1.6 / 400 / -0.005em | ### Radius - sm: `0px` - md: `0px` - lg: `0px` - pill: `9999px` ### Shadows - **card:** `none` - **button:** `none` ### Borders - **card:** `1px solid rgba(14,12,10,0.14)` - **divider:** `rgba(14,12,10,0.18)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#0e0c0a` | | color | `#f1e8d4` | | border | `none` | | padding | `16px 28px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.14em` | | uppercase | `true` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#0e0c0a` | | border | `1px solid #0e0c0a` | | padding | `16px 28px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.14em` | | uppercase | `true` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#0e0c0a` | | border | `1px solid rgba(14,12,10,0.20)` | | padding | `16px 28px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.14em` | | uppercase | `true` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#5e574d` | | border | `none` | | padding | `16px 18px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.14em` | | uppercase | `true` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1` | | fillOpacity | `0` | | gridlines | `false` | | barGap | `12px` | | highlight | `single` | | dotMarker | `false` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(14, 12, 10, 0.92)`, shadow: `0 4px 20px -8px rgba(14, 12, 10, 0.4)` - **focus** — outline: `1.5px solid #0e0c0a`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#0e0c0a`, color: `#f1e8d4` #### Input - **hover** — border: `1px solid #0e0c0a` - **focus** — border: `1px solid #0e0c0a`, shadow: `0 1px 0 0 #0e0c0a` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #0e0c0a` #### Tab - **hover** — color: `#0e0c0a` - **focus** — outline: `1.5px solid #0e0c0a`, outline-offset: `3px` - **selected** — color: `#0e0c0a`, border: `0 0 2px 0 solid #0e0c0a` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#0e0c0a`, underline `always` - **blockquote:** border `4px solid #0e0c0a`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(14, 12, 10, 0.06)`, color `#0e0c0a` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 16.02:1 | AA | AAA | — | | Body text on canvas | 15.16:1 | AA | AAA | — | | Muted text on surface | 5.85:1 | AA | AA | — | | Accent on surface | 16.02:1 | AA-Large | AAA | — | | Accent on canvas | 15.16:1 | AA-Large | AAA | — | --- # SYSTEM: Gazette Broadside Source: https://www.freedesignmd.com/system/gazette-broadside --- name: "Gazette Broadside" description: "A maximalist editorial broadside that earns every inch with prose. Sage-grey paper surface, Old Standard TT at extreme display scale for headlines, drop-caps that span eight body lines, full-bleed pull-quote slabs in oversized serif italic, Inter for navigation, a single muted burgundy accent reserved for the editor's mark and the issue-number tag. Built for long-form magazines, opinion sections, and editorial publishers who lead with words at oversized scale." tags: [editorial, premium, warm, serif, bold] colors: primary: "#1d1f1c" secondary: "#6b6e64" tertiary: "#1d1f1c" neutral: "#dadbcd" surface: "#e6e7d8" typography: display: "Old Standard TT" body: "Old Standard TT" mono: "JetBrains Mono" scale: hero: "12rem / 0.86 / 700 / -0.04em" h1: "5.5rem / 0.96 / 700 / -0.025em" h2: "2.25rem / 1.18 / 400 / -0.012em" body: "1.1875rem / 1.7 / 400 / -0.003em" radius: sm: 1px md: 2px lg: 3px pill: 9999px shadows: card: none button: none borders: card: "1px solid rgba(29,31,28,0.16)" divider: rgba(29,31,28,0.20) buttons: primary: background: #1d1f1c color: #e6e7d8 border: none shape: sharp padding: 12px 24px font: 500 / 0.8125rem / 0.18em uppercase: true secondary: background: transparent color: #1d1f1c border: 1px solid #1d1f1c shape: sharp padding: 12px 24px font: 500 / 0.8125rem / 0.18em uppercase: true outline: background: transparent color: #1d1f1c border: 1px solid rgba(29,31,28,0.20) shape: sharp padding: 12px 24px font: 500 / 0.8125rem / 0.18em uppercase: true ghost: background: transparent color: #6b6e64 border: none shape: sharp padding: 12px 18px font: 500 / 0.8125rem / 0.18em uppercase: true charts: variant: "thin-bars" stroke_width: 1 fill_opacity: 0 gridlines: false bar_gap: 14px highlight: single dot_marker: false fonts_url: "https://fonts.googleapis.com/css2?family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Gazette Broadside ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Gazette Broadside** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#1d1f1c`, text `#e6e7d8`, padding `12px 24px`, weight `500`, uppercased. - **Secondary** — sharp shape, text `#1d1f1c`, border `1px solid #1d1f1c`, padding `12px 24px`, weight `500`, uppercased. - **Outline** — sharp shape, text `#1d1f1c`, border `1px solid rgba(29,31,28,0.20)`, padding `12px 24px`, weight `500`, uppercased. - **Ghost** — sharp shape, text `#6b6e64`, padding `12px 18px`, weight `500`, uppercased. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#e6e7d8` - Border: `1px solid rgba(29,31,28,0.16)` - Shadow: `none` - Radius: `radius.lg` (`3px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `thin-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Old Standard TT`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Old Standard TT`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Gazette Broadside is a maximalist editorial broadside that earns every inch with prose. The page surface is sage-grey `#e6e7d8` — a cool olive-paper tone that reads as a printed weekly review, never bright. Headlines run in Old Standard TT 700 at 192px with a 0.86 leading — the classical bold serif at full-bleed scale, taking up the entire above-the-fold. The first paragraph of every article opens with a drop-cap that spans eight body lines: Old Standard TT 400 at 13rem, slight negative left margin so it visually overhangs the column. Pull quotes are full-bleed slabs: Old Standard TT italic 400 at 64px on a 1.18 leading, surrounded by 96px of vertical space, indented from a single 1px ink rule on the left. Body sits in Old Standard TT regular at 19px on a 1.7 leading. Navigation runs in Inter 500 with 0.18em uppercase tracking — the only sans in the entire system. The single accent is muted burgundy `#6e2530` reserved for the editor's mark and the issue-number tag. The discipline is in the maximalism: every page is dense with type, but the type does the entire job. There are no images, no cards, no decoration — just headlines at 192px, drop-caps at 208px, pull-quote slabs at 64px italic, and 19px body that runs for full columns. **Signature moves** - Old Standard TT 700 at 192px headlines — classical bold serif at full-bleed scale - Drop-caps spanning 8 body lines (208px), Old Standard TT 400, slight negative left margin - Full-bleed pull-quote slabs — italic 64px with 96px breathing room and a 1px left rule - 19px body in Old Standard TT regular on 1.7 leading — long-form serious reading - Sage-grey paper `#e6e7d8` — cool olive printed-weekly tone, never warm cream - Burgundy `#6e2530` exclusively on editor's mark + issue-number tag — two surfaces only - Inter (500, 0.18em uppercase) is the only sans — used for nav and page-number rails ## 2. Palette ### Surfaces - **Sage Paper** `#e6e7d8` — page background (cool olive printed-weekly) - **Sage Lift** `#dadbcd` — masthead, footer, table headers - **Hairline** `rgba(29,31,28,0.16)` — every divider, every rule ### Ink - **Ink** `#1d1f1c` — text, headings, primary CTA fill (warm near-black) - **Ink 50** `#6b6e64` — secondary text, mono captions, byline ### Accent - **Burgundy** `#6e2530` — editor's mark, issue-number tag - That is the only color in the system. ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Hero Headline | Old Standard TT | 192px | 700 | 0.86 | -0.04em | | H1 | Old Standard TT | 88px | 700 | 0.96 | -0.025em | | H2 / Subhead | Old Standard TT | 36px | 400 | 1.18 | -0.012em | | Drop-Cap | Old Standard TT | 208px | 400 | 0.85 | -0.04em | | Pull Quote | Old Standard TT (italic) | 64px | 400 | 1.18 | -0.012em | | Body | Old Standard TT | 19px | 400 | 1.7 | -0.003em | | Lead Paragraph | Old Standard TT | 22px | 400 | 1.6 | -0.005em | | Byline / Caption | Inter | 12px | 500 | 1.4 | 0.10em uppercase | | Nav / Section Label | Inter | 13px | 500 | 1.4 | 0.18em uppercase | | Page Number | JetBrains Mono | 11px | 500 | 1.0 | 0.10em uppercase | | Issue Number | JetBrains Mono | 13px | 500 | 1.0 | 0.04em tabular-nums | Old Standard TT carries display, drop-caps, pull-quotes, and body — the entire editorial voice in one classical serif. Inter carries only the navigation rail and bylines. Mono carries only page numbers and the issue tag. ## 4. Buttons ### Primary (Ink Sharp) ```css background: #1d1f1c; color: #e6e7d8; padding: 12px 24px; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 500; ``` The 0.18em tracking is the engraved-masthead voice carried into the subscribe button. ### Secondary (Ink Outline) - Transparent, 1px solid ink, ink text — same near-sharp shape, same wide tracking ### Outline & Ghost - Outline: transparent, 1px hairline at 20% ink - Ghost: no border, ink-50 uppercase ## 5. Cards (rare) The system prefers full-bleed columns separated by 1px hairlines and generous vertical breathing room. When a card is needed (a back-issue tile, a contributor card), it is sharp 2px corners, 1px hairline at 16% ink — never lifted, never shadowed. ## 6. Charts Thin precise bars (3px wide, 14px gap). One bar in burgundy, others in 22% ink. NO gridlines. Y-axis labels in JetBrains Mono uppercase 11px. Charts are reserved for editorial data exhibits and read as broadside graphics. ## 7. Tabs Underline 1.5px in burgundy for the active state. Inactive tabs are ink-50 in Inter 500 uppercase 0.18em. The active label often switches to Old Standard TT italic at the same size — the rhythm change. ## 8. Spacing - Base 8px (text-baseline aware) - Scale: `8, 16, 24, 32, 48, 64, 96, 128, 200, 280` - Section padding: 200px desktop, 96px mobile — full editorial breathing room - Pull-quote padding: 96px above and below - Drop-cap negative left margin: -16px ## 9. Do's & don'ts ✅ **Do** - Use Old Standard TT 700 at 192px for the hero headline — the classical bold at full-bleed - Open every article with a drop-cap spanning 8 body lines (208px) with a slight negative left margin - Use full-bleed pull-quote slabs — Old Standard TT italic 64px with 96px breathing room - Use 19px body — long-form serious reading is the entire premise - Reserve burgundy for editor's mark + issue-number tag exclusively ❌ **Don't** - Add images or photography to the broadside — the typography earns the entire page - Use Old Standard TT for nav or UI labels — Inter at 0.18em uppercase is the only sans - Use a second accent — burgundy alone, on two surfaces - Round any corner beyond 3px — letterpress precision throughout - Use 16px body — 19px on 1.7 leading is the editorial-broadside readability minimum --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1d1f1c` | | secondary | `#6b6e64` | | tertiary | `#1d1f1c` | | neutral | `#dadbcd` | | surface | `#e6e7d8` | ### Typography - **Display:** Old Standard TT - **Body:** Old Standard TT - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 12rem / 0.86 / 700 / -0.04em | | H1 | 5.5rem / 0.96 / 700 / -0.025em | | H2 | 2.25rem / 1.18 / 400 / -0.012em | | Body | 1.1875rem / 1.7 / 400 / -0.003em | ### Radius - sm: `1px` - md: `2px` - lg: `3px` - pill: `9999px` ### Shadows - **card:** `none` - **button:** `none` ### Borders - **card:** `1px solid rgba(29,31,28,0.16)` - **divider:** `rgba(29,31,28,0.20)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#1d1f1c` | | color | `#e6e7d8` | | border | `none` | | padding | `12px 24px` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.18em` | | uppercase | `true` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#1d1f1c` | | border | `1px solid #1d1f1c` | | padding | `12px 24px` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.18em` | | uppercase | `true` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#1d1f1c` | | border | `1px solid rgba(29,31,28,0.20)` | | padding | `12px 24px` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.18em` | | uppercase | `true` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#6b6e64` | | border | `none` | | padding | `12px 18px` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.18em` | | uppercase | `true` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1` | | fillOpacity | `0` | | gridlines | `false` | | barGap | `14px` | | highlight | `single` | | dotMarker | `false` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(29, 31, 28, 0.15)`, color: `#1d1f1c`, border: `1px solid #1d1f1c` - **focus** — outline: `1px dashed #1d1f1c`, outline-offset: `2px` - **active** — bg: `#1d1f1c`, color: `#e6e7d8` - **disabled** — opacity: `0.35` - **loading** — opacity: `0.6` - **selected** — bg: `#1d1f1c`, color: `#e6e7d8` #### Input - **hover** — border: `1px solid rgba(29, 31, 28, 0.5)` - **focus** — bg: `rgba(29, 31, 28, 0.05)`, border: `1px solid #1d1f1c` - **disabled** — opacity: `0.35` - **error** — bg: `rgba(239,68,68,0.05)`, border: `1px solid #EF4444` #### Card - **hover** — border: `1px solid #1d1f1c` - **selected** — bg: `rgba(29, 31, 28, 0.05)`, border: `1px solid #1d1f1c` - **dragging** — opacity: `0.7` #### Tab - **hover** — color: `#1d1f1c` - **focus** — outline: `1px dashed #1d1f1c`, outline-offset: `1px` - **selected** — bg: `rgba(29, 31, 28, 0.1)`, color: `#1d1f1c` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Cursor blink.** Discrete, often stepped transitions. Like a terminal cursor: on or off. Response under 120 ms. ```css transition: all 120ms linear; ``` | Token | Value | |-------|-------| | duration.instant | `0ms` | | duration.fast | `60ms` | | duration.base | `120ms` | | duration.slow | `200ms` | | easing.standard | `linear` | | easing.decelerate | `linear` | | easing.accelerate | `linear` | | easing.spring | `steps(2, end)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the stroke carries the hierarchy. | | level1 | `none` | Border tone lifts the surface. | | level2 | `0 0 0 1px rgba(29, 31, 28, 0.5)` | Ring outline — popover. | | level3 | `0 0 0 1px #1d1f1c, 0 12px 32px -16px rgba(29, 31, 28, 0.4)` | Sheet with accent ring + glow. | | level4 | `0 0 0 1px #1d1f1c, 0 24px 64px -20px rgba(29, 31, 28, 0.5)` | Modal with accent ring + glow. | ### Content - **measure:** `78ch` (max line length for body prose) - **paragraph spacing:** `1em` - **list indent:** `1.25em` - **list gap:** `0.35em` - **link:** color `#1d1f1c`, underline `always` - **blockquote:** border `1px solid rgba(29, 31, 28, 0.5)`, padding `0.7em 1em` - **code:** background `rgba(29, 31, 28, 0.12)`, color `#1d1f1c` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 13.27:1 | AA | AAA | — | | Body text on canvas | 11.85:1 | AA | AAA | — | | Muted text on surface | 4.16:1 | AA | AA-Large | `#61635a` → 4.88:1 (AA) | | Accent on surface | 13.27:1 | AA-Large | AAA | — | | Accent on canvas | 11.85:1 | AA-Large | AAA | — | --- # SYSTEM: Atelier AI Source: https://www.freedesignmd.com/system/atelier-ai --- name: "Atelier AI" description: "Literary salon as product page. Parchment canvas, serif headlines at weight 500, terracotta brand, exclusively warm neutrals, and ring-shadow depth." tags: [warm, editorial, ai, premium] colors: primary: "#141413" secondary: "#5e5d59" tertiary: "#c96442" neutral: "#f5f4ed" surface: "#faf9f5" typography: display: Fraunces body: Inter mono: "JetBrains Mono" scale: hero: "4rem / 1.1 / 500 / 0" h1: "3.25rem / 1.2 / 500 / 0" h2: "2rem / 1.1 / 500 / 0" body: "1.0625rem / 1.6 / 400 / 0" radius: sm: 8px md: 12px lg: 16px pill: 9999px shadows: card: "rgba(141,103,72,0.06) 0 0 0 1px, rgba(0,0,0,0.04) 0 4px 24px" button: "rgba(201,100,66,0.15) 0 0 0 1px, rgba(201,100,66,0.18) 0 6px 18px -8px" borders: card: "1px solid #f0eee6" divider: "#e8e6dc" buttons: primary: background: #CC785C color: #FFFFFF border: none shape: rounded padding: 11px 20px font: display / 500 secondary: background: #F4EFE6 color: #3D3929 border: none shape: rounded padding: 11px 20px font: display / 500 outline: background: transparent color: #3D3929 border: 1px solid #DDD6C7 shape: rounded padding: 11px 20px font: display / 500 ghost: background: transparent color: #CC785C border: none shape: rounded padding: 11px 12px font: display / 500 hover: underline charts: variant: "rounded-bars" stroke_width: 2.5 fill_opacity: 0.18 gridlines: false bar_gap: 10px highlight: gradient dot_marker: true fonts_url: "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Atelier AI ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Atelier AI** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#CC785C`, text `#FFFFFF`, padding `11px 20px`, weight `500`. - **Secondary** — rounded shape, bg `#F4EFE6`, text `#3D3929`, padding `11px 20px`, weight `500`. - **Outline** — rounded shape, text `#3D3929`, border `1px solid #DDD6C7`, padding `11px 20px`, weight `500`. - **Ghost** — rounded shape, text `#CC785C`, padding `11px 12px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#faf9f5` - Border: `1px solid #f0eee6` - Shadow: `rgba(141,103,72,0.06) 0 0 0 1px, rgba(0,0,0,0.04) 0 4px 24px` - Radius: `radius.lg` (`16px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `rounded-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `gradient` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Fraunces`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Atelier AI is a literary salon reimagined as a product page — warm, unhurried, quietly intellectual. The entire experience sits on a parchment-toned canvas (`#f5f4ed`) that deliberately evokes the feeling of high-quality paper rather than a digital surface. Where most AI product pages lean into cold, futuristic aesthetics, Atelier AI radiates human warmth, as if the model itself has good taste in interior design. The signature move is a **medium-weight serif** — generous proportions that give every headline the gravitas of a book title. Combined with organic, hand-drawn-feeling illustrations in terracotta, black, and muted green, the visual language says "thoughtful companion" rather than "powerful tool." Serif headlines breathe at tight-but-comfortable line-heights (1.10–1.30), creating cadence that feels more like reading an essay than scanning a product page. What makes Atelier AI truly distinctive is its **warm neutral palette**. Every gray has a yellow-brown undertone (`#5e5d59`, `#87867f`, `#4d4c48`) — there are no cool blue-grays anywhere. Borders are cream-tinted (`#f0eee6`, `#e8e6dc`), shadows use warm transparent blacks, and even the darkest surfaces (`#141413`, `#30302e`) carry a barely perceptible olive warmth. **Signature moves** - Warm parchment canvas (`#f5f4ed`) — premium paper, never screens - Medium-weight (500) serif for all headlines — single-weight discipline - Terracotta brand (`#c96442`) — warm, earthy, deliberately un-tech - Exclusively warm-toned neutrals — every gray has yellow-brown undertone - Ring-based shadow system: `0 0 0 1px` border-like depth without visible borders - Magazine-like pacing with generous section spacing - Generous radius (8–32px) — soft, approachable surfaces ## 2. Palette ### Primary - **Atelier Near Black** `#141413` — primary text, dark surface (warmest "black" in tech) - **Terracotta** `#c96442` — brand CTA, signature accent - **Coral** `#d97757` — text accents, secondary emphasis ### Surface - **Parchment** `#f5f4ed` — page background - **Ivory** `#faf9f5` — card surfaces (barely-distinguishable layering) - **Warm Sand** `#e8e6dc` — button background, prominent surfaces - **Dark Surface** `#30302e` — dark containers, nav ### Neutrals - Charcoal Warm `#4d4c48` — go-to dark text - Olive Gray `#5e5d59` — secondary body - Stone Gray `#87867f` — tertiary, footnotes - Warm Silver `#b0aea5` — text on dark ### Semantic - Crimson `#b53333` — error (warm red) - Focus Blue `#3898ec` — the only cool color, accessibility-only ### Borders - Cream `#f0eee6` — gentlest containment - Warm `#e8e6dc` — prominent dividers - Ring Warm `#d1cfc5` — interactive states ## 3. Typography | Role | Font | Size | Weight | Leading | |------|------|------|--------|---------| | Display | Serif | 64px | 500 | 1.10 | | Section | Serif | 52px | 500 | 1.20 | | Sub-heading L | Serif | 36px | 500 | 1.30 | | Sub-heading | Serif | 32px | 500 | 1.10 | | Feature title | Serif | 20.8px | 500 | 1.20 | | Body Serif | Serif | 17px | 400 | 1.60 | | Body | Sans | 16px | 400 | 1.60 | | Nav | Sans | 17px | 500 | 1.00 | | Caption | Sans | 14px | 400 | 1.43 | | Code | Mono | 15px | 400 | 1.60 | **Single weight for serif (500).** No bold, no light. Consistency creates a singular voice — as if the same author wrote every heading. Body uses generous 1.60 line-height — closer to a book than a dashboard. ## 4. Buttons ### Brand Terracotta (Primary) ```css background: #c96442; color: #faf9f5; border-radius: 12px; box-shadow: rgba(201,100,66,0.15) 0 0 0 1px; ``` ### Warm Sand (Secondary) - Background `#e8e6dc`, text `#4d4c48` - Padding `0 12px 0 8px` (asymmetric, icon-first) - 8px radius, ring shadow `#d1cfc5 0 0 0 1px` ### White Surface - Background `#ffffff`, text `#141413` - 12px radius, hover shifts to secondary bg ### Dark Charcoal - Background `#30302e`, text ivory - 8px radius, ring shadow ## 5. Cards - Background: `#faf9f5` (Ivory) on light, `#30302e` on dark - Border: `1px solid #f0eee6` (light) or `1px solid #30302e` (dark) - Radius: 8px standard, 16px featured, 32px hero - Shadow: `rgba(0,0,0,0.05) 0 4px 24px` for elevated content ## 6. Charts **Rounded bars with gradient highlight.** Each bar uses a height-proportional opacity of the terracotta accent — taller bars are more saturated, shorter bars fade. Bars are pill-rounded (999px) for the soft, approachable warmth. Line charts use a thicker 2.5px stroke for a hand-drawn-feeling line. ## 7. Spacing - Base: 8px - Scale: `3, 4, 6, 8, 10, 12, 16, 20, 24, 30` - Section vertical: 80–120px — magazine breathing room ## 8. Depth & elevation | Level | Treatment | Use | |-------|-----------|-----| | 0 | Flat parchment | Page, inline text | | 1 | `1px solid #f0eee6` | Cards, sections | | 2 | Ring `0 0 0 1px` warm gray | Interactive cards, hover | | 3 | `rgba(0,0,0,0.05) 0 4px 24px` | Elevated features | | 4 | Inset `0 0 0 1px` 15% opacity | Active/pressed | **Warm ring shadows.** Depth comes from `0 0 0 1px` ring patterns matching the warm palette — borders that are technically shadows. Drop shadows are extreme rare: when used, ultra-soft (0.05 opacity, 24px blur). ## 9. Do's & don'ts ✅ **Do** - Use Parchment (`#f5f4ed`) as the primary background — warm cream IS the personality - Use serif at weight 500 for all headlines — single-weight consistency - Use terracotta only for primary CTA and the highest-signal moments - Keep all neutrals warm-toned — yellow-brown undertones everywhere - Use ring shadows for interactive states, not drop shadows - Apply generous radius (12–32px) for soft approachable surfaces ❌ **Don't** - Use cool blue-grays anywhere — palette is exclusively warm - Use bold (700+) on serif — weight 500 is the ceiling - Introduce saturated colors beyond terracotta — palette is muted - Use sharp corners (<6px) on buttons or cards - Apply heavy drop shadows — depth is ring shadows + section alternation - Use pure white as page background — Parchment or Ivory only --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#141413` | | secondary | `#5e5d59` | | tertiary | `#c96442` | | neutral | `#f5f4ed` | | surface | `#faf9f5` | ### Typography - **Display:** Fraunces - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4rem / 1.1 / 500 / 0 | | H1 | 3.25rem / 1.2 / 500 / 0 | | H2 | 2rem / 1.1 / 500 / 0 | | Body | 1.0625rem / 1.6 / 400 / 0 | ### Radius - sm: `8px` - md: `12px` - lg: `16px` - pill: `9999px` ### Shadows - **card:** `rgba(141,103,72,0.06) 0 0 0 1px, rgba(0,0,0,0.04) 0 4px 24px` - **button:** `rgba(201,100,66,0.15) 0 0 0 1px, rgba(201,100,66,0.18) 0 6px 18px -8px` ### Borders - **card:** `1px solid #f0eee6` - **divider:** `#e8e6dc` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#CC785C` | | color | `#FFFFFF` | | border | `none` | | padding | `11px 20px` | | fontFamily | `display` | | fontWeight | `500` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#F4EFE6` | | color | `#3D3929` | | border | `none` | | padding | `11px 20px` | | fontFamily | `display` | | fontWeight | `500` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#3D3929` | | border | `1px solid #DDD6C7` | | padding | `11px 20px` | | fontFamily | `display` | | fontWeight | `500` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#CC785C` | | border | `none` | | padding | `11px 12px` | | fontFamily | `display` | | fontWeight | `500` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `rounded-bars` | | strokeWidth | `2.5` | | fillOpacity | `0.18` | | gridlines | `false` | | barGap | `10px` | | highlight | `gradient` | | dotMarker | `true` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(201, 100, 66, 0.92)`, shadow: `0 4px 20px -8px rgba(201, 100, 66, 0.4)` - **focus** — outline: `1.5px solid #c96442`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#141413`, color: `#faf9f5` #### Input - **hover** — border: `1px solid #141413` - **focus** — border: `1px solid #c96442`, shadow: `0 1px 0 0 #c96442` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #141413` #### Tab - **hover** — color: `#141413` - **focus** — outline: `1.5px solid #c96442`, outline-offset: `3px` - **selected** — color: `#c96442`, border: `0 0 2px 0 solid #c96442` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#c96442`, underline `always` - **blockquote:** border `4px solid #c96442`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(20, 20, 19, 0.06)`, color `#141413` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 17.5:1 | AA | AAA | — | | Body text on canvas | 16.72:1 | AA | AAA | — | | Muted text on surface | 6.26:1 | AA | AA | — | | Accent on surface | 3.7:1 | AA-Large | AA-Large | — | | Accent on canvas | 3.54:1 | AA-Large | AA-Large | — | --- # SYSTEM: Halogen Editor Source: https://www.freedesignmd.com/system/halogen-editor --- name: "Halogen Editor" description: "Dark-mode-native canvas where content emerges like starlight. Geometric variable sans, the signature 510 weight, semi-transparent white borders, and a single indigo-violet accent." tags: [dark, minimal, engineering, saas, modern] colors: primary: "#f7f8f8" secondary: "#d0d6e0" tertiary: "#7170ff" neutral: "#08090a" surface: "#0f1011" typography: display: Inter body: Inter mono: "JetBrains Mono" scale: hero: "4.5rem / 1 / 510 / -1.584px" h1: "3rem / 1 / 510 / -1.056px" h2: "2rem / 1.13 / 400 / -0.704px" body: "1rem / 1.5 / 400 / 0" radius: sm: 2px md: 6px lg: 12px pill: 9999px shadows: card: "rgba(255,255,255,0.08) 0 0 0 1px, rgba(0,0,0,0.4) 0 2px 4px" button: "rgba(94,106,210,0.35) 0 0 0 1px, rgba(0,0,0,0.4) 0 4px 12px" buttons: primary: background: #5E6AD2 color: #FFFFFF border: none shape: rounded padding: 8px 14px font: 510 / 0.8125rem shadow: rgba(94,106,210,0.32) 0 0 0 1px, rgba(94,106,210,0.18) 0 4px 12px -4px secondary: background: rgba(255,255,255,0.06) color: #F7F8F8 border: 1px solid rgba(255,255,255,0.10) shape: rounded padding: 8px 14px font: 510 / 0.8125rem outline: background: transparent color: #F7F8F8 border: 1px solid rgba(255,255,255,0.14) shape: rounded padding: 8px 14px font: 510 / 0.8125rem ghost: background: transparent color: rgba(247,248,248,0.6) border: none shape: rounded padding: 8px 10px font: 510 / 0.8125rem charts: variant: bars stroke_width: 1.5 fill_opacity: 0.25 gridlines: true bar_radius: 2px bar_gap: 8px highlight: all dot_marker: true fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Halogen Editor ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Halogen Editor** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#5E6AD2`, text `#FFFFFF`, padding `8px 14px`, weight `510`, shadow `rgba(94,106,210,0.32) 0 0 0 1px, rgba(94,106,210,0.18) 0 4px 12px -4px`. - **Secondary** — rounded shape, bg `rgba(255,255,255,0.06)`, text `#F7F8F8`, border `1px solid rgba(255,255,255,0.10)`, padding `8px 14px`, weight `510`. - **Outline** — rounded shape, text `#F7F8F8`, border `1px solid rgba(255,255,255,0.14)`, padding `8px 14px`, weight `510`. - **Ghost** — rounded shape, text `rgba(247,248,248,0.6)`, padding `8px 10px`, weight `510`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#0f1011` - Shadow: `rgba(255,255,255,0.08) 0 0 0 1px, rgba(0,0,0,0.4) 0 2px 4px` - Radius: `radius.lg` (`12px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `bars` - Bar radius: `2px` - Highlight strategy: `all` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Inter`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Halogen Editor is dark-mode native. The canvas (`#08090a`) is near-black with the faintest blue-cool undertone, and content emerges from it like starlight — a calibrated luminance hierarchy from barely-visible borders (`rgba(255,255,255,0.05)`) up to soft, luminous text (`#f7f8f8`). This is not a dark theme bolted onto a light design; darkness is the medium, and information density is managed through gradations of white opacity rather than color shifts. The typography is built entirely on a geometric variable sans with OpenType alternates enabled globally for a cleaner, more engineered character. Weight **510** — sitting between regular (400) and medium (500) — is the signature: a subtle emphasis that doesn't shout. Display sizes (72/64/48px) use aggressive negative tracking (-1.584px to -1.056px) for compressed, authoritative headlines. The palette is almost entirely achromatic — dark surfaces, white-opacity text — punctuated by a single brand accent: indigo-violet (`#5e6ad2` for backgrounds, `#7170ff` for interactive). Borders are wisp-thin semi-transparent whites that suggest structure without visual noise, like wireframes drawn in moonlight. **Signature moves** - `#08090a` marketing canvas, `#0f1011` panels, `#191a1b` elevated surfaces - Variable sans with weight 510 as the workhorse - Aggressive display tracking: -1.584px at 72px, -1.056px at 48px - Single chromatic accent: `#5e6ad2` / `#7170ff` / `#828fff` — used only for CTAs and brand - Borders as semi-transparent white: `rgba(255,255,255,0.05–0.08)` - Button surfaces at near-zero opacity: `rgba(255,255,255,0.02–0.05)` - Multi-layer shadows with inset variants for depth on dark ## 2. Palette ### Surfaces - Marketing `#08090a` — deepest canvas - Panel `#0f1011` — sidebars, panels - Level 3 `#191a1b` — elevated surfaces, cards - Secondary `#28282c` — hover states ### Text - Primary `#f7f8f8` — barely-warm near-white (never `#ffffff` — too harsh) - Secondary `#d0d6e0` — silver-gray body - Tertiary `#8a8f98` — placeholders, metadata - Quaternary `#62666d` — timestamps, disabled ### Brand - Indigo `#5e6ad2` — primary CTA background - Violet `#7170ff` — interactive accent - Hover `#828fff` — lighter saturated variant ### Status - Green `#27a644` — in-progress - Emerald `#10b981` — completion pills ### Borders - Subtle `rgba(255,255,255,0.05)` — default - Standard `rgba(255,255,255,0.08)` — cards, inputs - Solid Primary `#23252a` — prominent separations ## 3. Typography | Role | Size | Weight | Leading | Tracking | |------|------|--------|---------|----------| | Display XL | 72px | 510 | 1.00 | -1.584px | | Display | 48px | 510 | 1.00 | -1.056px | | Heading 1 | 32px | 400 | 1.13 | -0.704px | | Heading 3 | 20px | 590 | 1.33 | -0.24px | | Body L | 18px | 400 | 1.60 | -0.165px | | Body | 16px | 400 | 1.50 | normal | | Body Medium | 16px | 510 | 1.50 | normal | | Caption | 13px | 400 | 1.50 | -0.13px | | Mono | 14px | 400 | 1.50 | normal | **510 is the signature weight.** Between regular (400) and medium (500), it produces emphasis without heaviness. Three-tier system: 400 (read), 510 (emphasize / UI), 590 (announce). ## 4. Buttons ### Brand Indigo (Primary) ```css background: #5e6ad2; color: #ffffff; padding: 8px 16px; border-radius: 6px; ``` Hover shifts to `#828fff`. ### Ghost - Background `rgba(255,255,255,0.02)` - Text `#e2e4e7` - Border `1px solid rgb(36, 40, 44)`, radius 6px - Focus: `rgba(0,0,0,0.1) 0 4px 12px` ### Subtle / Toolbar - Background `rgba(255,255,255,0.04)` or `rgba(255,255,255,0.05)` - 12px text at weight 510, radius 2–6px ### Pill / Filter - Transparent background, `#d0d6e0` text - `1px solid rgb(35,37,42)`, radius 9999px ## 5. Cards - Background: `rgba(255,255,255,0.02)` to `rgba(255,255,255,0.05)` (always translucent — never solid) - Border: `1px solid rgba(255,255,255,0.08)` - Radius: 8px standard, 12px featured, 22px large panels - Hover: subtle background opacity bump ## 6. Spacing - Base: 8px - Scale: `1, 4, 7, 8, 11, 12, 16, 19, 20, 22, 24, 28, 32, 35` - 7px and 11px exist for optical alignment - Section vertical: 80px+ ## 7. Radius scale `2 / 4 / 6 / 8 / 12 / 22 / 9999 / 50%` — circle for icon buttons, pill for chips, 6px for buttons. ## 8. Depth & elevation | Level | Treatment | Use | |-------|-----------|-----| | 0 | Flat `#08090a` | Page background | | 1 | `rgba(0,0,0,0.03) 0 1.2px 0` | Toolbar buttons | | 2 | `rgba(255,255,255,0.05)` bg + `rgba(255,255,255,0.08)` border | Cards | | 3 | `rgba(0,0,0,0.4) 0 2px 4px` | Floating, dropdowns | | 4 | Multi-layer stack | Popovers, command palette | **Elevation through luminance, not shadow.** On dark, traditional drop shadows disappear. Halogen Editor stacks elevation by stepping the white opacity of each surface (`0.02 → 0.04 → 0.05`), producing depth without color. ## 9. Do's & don'ts ✅ **Do** - Build on `#08090a` / `#0f1011` / `#191a1b` surfaces - Use weight 510 as your default emphasis - Apply aggressive negative tracking at display sizes - Reserve indigo (`#5e6ad2`) for CTAs and brand only - Use `#f7f8f8` for primary text — never pure white ❌ **Don't** - Use pure white text — `#f7f8f8` prevents eye strain - Apply solid colored backgrounds to buttons — translucency is the system - Decorate with the brand indigo — it is for interaction only - Use positive tracking on display text - Add warm tones — the palette is cool gray with one violet accent --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#f7f8f8` | | secondary | `#d0d6e0` | | tertiary | `#7170ff` | | neutral | `#08090a` | | surface | `#0f1011` | ### Typography - **Display:** Inter - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.5rem / 1 / 510 / -1.584px | | H1 | 3rem / 1 / 510 / -1.056px | | H2 | 2rem / 1.13 / 400 / -0.704px | | Body | 1rem / 1.5 / 400 / 0 | ### Radius - sm: `2px` - md: `6px` - lg: `12px` - pill: `9999px` ### Shadows - **card:** `rgba(255,255,255,0.08) 0 0 0 1px, rgba(0,0,0,0.4) 0 2px 4px` - **button:** `rgba(94,106,210,0.35) 0 0 0 1px, rgba(0,0,0,0.4) 0 4px 12px` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#5E6AD2` | | color | `#FFFFFF` | | border | `none` | | padding | `8px 14px` | | fontWeight | `510` | | fontSize | `0.8125rem` | | shadow | `rgba(94,106,210,0.32) 0 0 0 1px, rgba(94,106,210,0.18) 0 4px 12px -4px` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `rgba(255,255,255,0.06)` | | color | `#F7F8F8` | | border | `1px solid rgba(255,255,255,0.10)` | | padding | `8px 14px` | | fontWeight | `510` | | fontSize | `0.8125rem` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#F7F8F8` | | border | `1px solid rgba(255,255,255,0.14)` | | padding | `8px 14px` | | fontWeight | `510` | | fontSize | `0.8125rem` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `rgba(247,248,248,0.6)` | | border | `none` | | padding | `8px 10px` | | fontWeight | `510` | | fontSize | `0.8125rem` | ### Charts | Property | Value | |----------|-------| | variant | `bars` | | strokeWidth | `1.5` | | fillOpacity | `0.25` | | gridlines | `true` | | barRadius | `2px` | | barGap | `8px` | | highlight | `all` | | dotMarker | `true` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(113, 112, 255, 0.15)`, color: `#7170ff`, border: `1px solid #7170ff` - **focus** — outline: `1px dashed #7170ff`, outline-offset: `2px` - **active** — bg: `#7170ff`, color: `#0f1011` - **disabled** — opacity: `0.35` - **loading** — opacity: `0.6` - **selected** — bg: `#7170ff`, color: `#0f1011` #### Input - **hover** — border: `1px solid rgba(113, 112, 255, 0.5)` - **focus** — bg: `rgba(113, 112, 255, 0.05)`, border: `1px solid #7170ff` - **disabled** — opacity: `0.35` - **error** — bg: `rgba(239,68,68,0.05)`, border: `1px solid #EF4444` #### Card - **hover** — border: `1px solid #7170ff` - **selected** — bg: `rgba(113, 112, 255, 0.05)`, border: `1px solid #7170ff` - **dragging** — opacity: `0.7` #### Tab - **hover** — color: `#7170ff` - **focus** — outline: `1px dashed #7170ff`, outline-offset: `1px` - **selected** — bg: `rgba(113, 112, 255, 0.1)`, color: `#7170ff` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Cursor blink.** Discrete, often stepped transitions. Like a terminal cursor: on or off. Response under 120 ms. ```css transition: all 120ms linear; ``` | Token | Value | |-------|-------| | duration.instant | `0ms` | | duration.fast | `60ms` | | duration.base | `120ms` | | duration.slow | `200ms` | | easing.standard | `linear` | | easing.decelerate | `linear` | | easing.accelerate | `linear` | | easing.spring | `steps(2, end)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the stroke carries the hierarchy. | | level1 | `none` | Border tone lifts the surface. | | level2 | `0 0 0 1px rgba(113, 112, 255, 0.5)` | Ring outline — popover. | | level3 | `0 0 0 1px #7170ff, 0 12px 32px -16px rgba(113, 112, 255, 0.4)` | Sheet with accent ring + glow. | | level4 | `0 0 0 1px #7170ff, 0 24px 64px -20px rgba(113, 112, 255, 0.5)` | Modal with accent ring + glow. | ### Content - **measure:** `78ch` (max line length for body prose) - **paragraph spacing:** `1em` - **list indent:** `1.25em` - **list gap:** `0.35em` - **link:** color `#7170ff`, underline `always` - **blockquote:** border `1px solid rgba(113, 112, 255, 0.5)`, padding `0.7em 1em` - **code:** background `rgba(113, 112, 255, 0.12)`, color `#7170ff` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 17.9:1 | AA | AAA | — | | Body text on canvas | 18.73:1 | AA | AAA | — | | Muted text on surface | 13.04:1 | AA | AAA | — | | Accent on surface | 4.96:1 | AA-Large | AA | — | | Accent on canvas | 5.18:1 | AA-Large | AA | — | --- # SYSTEM: Iris Pay Source: https://www.freedesignmd.com/system/iris-pay --- name: "Iris Pay" description: "Fintech-grade clarity on white. Whisper-weight 300 display headlines, deep navy ink, electric violet accents, and signature blue-tinted multi-layer shadows." tags: [fintech, premium, minimal, saas, modern] colors: primary: "#061b31" secondary: "#64748d" tertiary: "#533afd" neutral: "#ffffff" surface: "#ffffff" typography: display: Manrope body: Manrope mono: "JetBrains Mono" scale: hero: "3.5rem / 1.03 / 300 / -1.4px" h1: "3rem / 1.15 / 300 / -0.96px" h2: "2rem / 1.1 / 300 / -0.64px" body: "1rem / 1.4 / 300 / 0" radius: sm: 4px md: 5px lg: 8px pill: 9999px shadows: card: "rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px" button: "rgba(50,50,93,0.18) 0px 8px 16px -6px, rgba(0,0,0,0.08) 0px 4px 8px -4px" borders: card: "1px solid #e5edf5" divider: "#e5edf5" buttons: primary: background: #635BFF color: #FFFFFF border: none shape: rounded padding: 10px 16px font: 500 shadow: rgba(99,91,255,0.20) 0 4px 12px -2px, rgba(99,91,255,0.30) 0 0 0 1px secondary: background: #FFFFFF color: #0A2540 border: 1px solid #E3E8EE shape: rounded padding: 10px 16px font: 500 shadow: rgba(0,0,0,0.04) 0 1px 2px outline: background: transparent color: #635BFF border: 1px solid #635BFF shape: rounded padding: 10px 16px font: 500 ghost: background: transparent color: #425466 border: none shape: rounded padding: 10px 12px font: 500 hover: underline charts: variant: bars stroke_width: 2 fill_opacity: 0.18 gridlines: true bar_radius: "4px 4px 0 0" bar_gap: 10px highlight: single dot_marker: true fonts_url: "https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Iris Pay ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Iris Pay** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#635BFF`, text `#FFFFFF`, padding `10px 16px`, weight `500`, shadow `rgba(99,91,255,0.20) 0 4px 12px -2px, rgba(99,91,255,0.30) 0 0 0 1px`. - **Secondary** — rounded shape, bg `#FFFFFF`, text `#0A2540`, border `1px solid #E3E8EE`, padding `10px 16px`, weight `500`, shadow `rgba(0,0,0,0.04) 0 1px 2px`. - **Outline** — rounded shape, text `#635BFF`, border `1px solid #635BFF`, padding `10px 16px`, weight `500`. - **Ghost** — rounded shape, text `#425466`, padding `10px 12px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#ffffff` - Border: `1px solid #e5edf5` - Shadow: `rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px` - Radius: `radius.lg` (`8px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `bars` - Bar radius: `4px 4px 0 0` - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Manrope`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Manrope`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Iris Pay is fintech design at its most refined. A clean white canvas (`#ffffff`) anchored by deep navy headings (`#061b31`) — never pure black — and a saturated electric violet (`#533afd`) that does double duty as brand anchor and interactive accent. The impression is of a financial institution redesigned by a world-class type foundry: simultaneously technical and luxurious, precise and warm. The signature typographic move is **weight 300 at display sizes**. Where most product pages shout in 600/700, Iris Pay whispers — confident enough not to need the volume. Negative tracking compresses headlines into dense, engineered blocks (-1.4px at 56px, -0.96px at 48px). Every text element should run on a geometric variable sans with stylistic alternates enabled for a contemporary, rounded letterform. What truly distinguishes Iris Pay is its **shadow system**. Forget flat shadows or single-layer drops. Iris Pay uses multi-layer, blue-tinted shadows — `rgba(50,50,93,0.25)` paired with `rgba(0,0,0,0.1)` — creating depth that reads as cool, atmospheric, almost twilight. The blue-gray undertone ties shadows directly to the navy-violet palette, so even elevation feels on-brand. **Signature moves** - Geometric variable sans at weight 300 — lightness as luxury - Negative tracking at display: -1.4px at 56px, progressively relaxed below - Blue-tinted multi-layer shadows: `rgba(50,50,93,0.25) 0 30px 45px -30px, rgba(0,0,0,0.1) 0 18px 36px -18px` - Deep navy (`#061b31`) headings instead of black — warm, premium, financial-grade - Conservative border-radius (4–8px) — nothing pill-shaped, nothing harsh - Ruby (`#ea2261`) and magenta (`#f96bee`) for decorative gradients only — never CTAs ## 2. Palette ### Primary - **Iris Violet** `#533afd` — primary CTA, links, interactive accent - **Deep Navy** `#061b31` — headings, strong labels - **Pure White** `#ffffff` — page, card surfaces ### Brand Dark - **Brand Indigo** `#1c1e54` — immersive dark sections, footer - **Dark Navy** `#0d253d` — darkest neutral, blue-tinted near-black ### Accent (decorative only) - Ruby `#ea2261` — gradients, icon highlights - Magenta `#f96bee` — gradient stops, decorative pops - Magenta Light `#ffd7ef` — tinted surface for accent badges ### Interactive - Hover `#4434d4` — darker violet for primary hover - Light `#b9b9f9` — soft lavender for selected states - Mid `#665efd` — input range/highlight ### Neutral - Label `#273951` - Body `#64748d` - Border `#e5edf5` - Success `#15be53` (text `#108c3d`) ## 3. Typography | Role | Size | Weight | Leading | Tracking | |------|------|--------|---------|----------| | Display Hero | 56px | 300 | 1.03 | -1.4px | | Display | 48px | 300 | 1.15 | -0.96px | | Section | 32px | 300 | 1.10 | -0.64px | | Sub-heading L | 26px | 300 | 1.12 | -0.26px | | Body L | 18px | 300 | 1.40 | normal | | Body | 16px | 300–400 | 1.40 | normal | | Button | 16px | 400 | 1.00 | normal | | Caption | 13px | 400 | 1.50 | normal | | Tabular num | 12px | 300 | 1.33 | -0.36px | **Two-weight discipline.** 300 for body and headings, 400 for UI/buttons. No bold (700) in the primary face. Use `"tnum"` for any tabular financial number — never in flowing prose. ## 4. Buttons ### Primary Iris ```css background: #533afd; color: #ffffff; padding: 8px 16px; border-radius: 4px; ``` Hover: `#4434d4`. ### Outline - Transparent background, `#533afd` text - `1px solid #b9b9f9`, 4px radius - Hover: `rgba(83,58,253,0.05)` tint ### Disabled / Muted - Transparent, `rgba(16,16,16,0.3)` text - `1px solid rgb(212,222,233)` ## 5. Cards - Background: `#ffffff` - Border: `1px solid #e5edf5` - Radius: 5–8px (4px tight, 8px featured) - Standard shadow: `rgba(50,50,93,0.25) 0 30px 45px -30px, rgba(0,0,0,0.1) 0 18px 36px -18px` - Ambient: `rgba(23,23,23,0.08) 0 15px 35px` ## 6. Charts Bar charts use **gridline backgrounds** and a single highlighted bar in iris violet. Line charts run thin (2px stroke) with subtle area fills. Tabular numerals everywhere. The chart card itself carries the signature blue-tinted shadow, never a flat border. ## 7. Spacing - Base: 8px - Scale: `1, 2, 4, 6, 8, 10, 11, 12, 14, 16, 18, 20` — dense at the small end for precision data UI ## 8. Depth & elevation | Level | Treatment | Use | |-------|-----------|-----| | 0 | No shadow | Page background | | 1 | `rgba(23,23,23,0.06) 0 3px 6px` | Subtle lift, hover | | 2 | `rgba(23,23,23,0.08) 0 15px 35px` | Standard cards | | 3 | Multi-layer blue tint | Featured cards, dropdowns | | 4 | `rgba(3,3,39,0.25) 0 14px 21px -14px, rgba(0,0,0,0.1) 0 8px 17px -8px` | Modals | **Chromatic depth.** Shadows aren't just dark — they're *blue*. The `rgba(50,50,93,...)` tint echoes the navy-violet palette so elevation feels brand-colored. ## 9. Do's & don'ts ✅ **Do** - Use weight 300 for all display and body — lightness is the brand voice - Apply blue-tinted shadows on every elevated element - Use deep navy (`#061b31`) for headings — never `#000000` - Keep radius between 4–8px — nothing pill-shaped on cards/buttons - Use violet (`#533afd`) for CTAs only ❌ **Don't** - Use weight 600+ on display — it betrays the brand voice - Use neutral gray shadows — always tint with blue - Use ruby or magenta on buttons — they're decorative-only - Apply pill radius (>12px) on buttons or cards - Use pure black (`#000`) on text --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#061b31` | | secondary | `#64748d` | | tertiary | `#533afd` | | neutral | `#ffffff` | | surface | `#ffffff` | ### Typography - **Display:** Manrope - **Body:** Manrope - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 3.5rem / 1.03 / 300 / -1.4px | | H1 | 3rem / 1.15 / 300 / -0.96px | | H2 | 2rem / 1.1 / 300 / -0.64px | | Body | 1rem / 1.4 / 300 / 0 | ### Radius - sm: `4px` - md: `5px` - lg: `8px` - pill: `9999px` ### Shadows - **card:** `rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px` - **button:** `rgba(50,50,93,0.18) 0px 8px 16px -6px, rgba(0,0,0,0.08) 0px 4px 8px -4px` ### Borders - **card:** `1px solid #e5edf5` - **divider:** `#e5edf5` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#635BFF` | | color | `#FFFFFF` | | border | `none` | | padding | `10px 16px` | | fontWeight | `500` | | shadow | `rgba(99,91,255,0.20) 0 4px 12px -2px, rgba(99,91,255,0.30) 0 0 0 1px` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#FFFFFF` | | color | `#0A2540` | | border | `1px solid #E3E8EE` | | padding | `10px 16px` | | fontWeight | `500` | | shadow | `rgba(0,0,0,0.04) 0 1px 2px` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#635BFF` | | border | `1px solid #635BFF` | | padding | `10px 16px` | | fontWeight | `500` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#425466` | | border | `none` | | padding | `10px 12px` | | fontWeight | `500` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `bars` | | strokeWidth | `2` | | fillOpacity | `0.18` | | gridlines | `true` | | barRadius | `4px 4px 0 0` | | barGap | `10px` | | highlight | `single` | | dotMarker | `true` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 4px 12px -2px rgba(15,23,42,0.18)`, filter: `brightness(0.97)` - **focus** — outline: `2px solid rgba(83, 58, 253, 0.5)`, outline-offset: `2px` - **active** — shadow: `0 1px 2px rgba(15,23,42,0.1)`, transform: `scale(0.98)` - **disabled** — opacity: `0.4`, filter: `saturate(0.5)` - **loading** — opacity: `0.7` - **selected** — bg: `#533afd`, color: `#ffffff` #### Input - **hover** — border: `1px solid rgba(83, 58, 253, 0.5)` - **focus** — border: `1.5px solid #533afd`, shadow: `0 0 0 4px rgba(83, 58, 253, 0.15)` - **disabled** — bg: `rgba(6, 27, 49, 0.04)`, opacity: `0.4` - **error** — border: `1.5px solid #DC2626`, shadow: `0 0 0 4px rgba(220,38,38,0.15)` #### Card - **hover** — shadow: `0 12px 28px -12px rgba(15,23,42,0.18)`, transform: `translateY(-2px)` - **selected** — bg: `rgba(83, 58, 253, 0.04)`, border: `1.5px solid #533afd` - **dragging** — shadow: `0 20px 48px -16px rgba(15,23,42,0.3)`, transform: `scale(1.02) rotate(-0.5deg)`, opacity: `0.9` #### Tab - **hover** — bg: `rgba(83, 58, 253, 0.06)`, color: `#533afd` - **focus** — outline: `2px solid rgba(83, 58, 253, 0.5)`, outline-offset: `2px` - **selected** — color: `#533afd`, border: `0 0 2px 0 solid #533afd` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Quiet ease.** 240 ms ease-out for all standard transitions. Reliable, invisible — motion stays out of the way. ```css transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `160ms` | | duration.base | `240ms` | | duration.slow | `380ms` | | easing.standard | `cubic-bezier(0.4, 0, 0.2, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.34, 1.4, 0.64, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — hairline border separates. | | level1 | `0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04)` | List rows, resting cards. | | level2 | `0 4px 12px -2px rgba(15,23,42,0.1), 0 2px 6px rgba(15,23,42,0.06)` | Hover cards, popover. | | level3 | `0 12px 32px -8px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.08)` | Sheets, side panels. | | level4 | `0 28px 64px -16px rgba(15,23,42,0.28), 0 8px 24px rgba(15,23,42,0.12)` | Modals — scrim required. | ### Content - **measure:** `68ch` (max line length for body prose) - **paragraph spacing:** `1.2em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#533afd`, underline `hover` - **blockquote:** border `3px solid rgba(83, 58, 253, 0.6)`, padding `0.5em 0 0.5em 1.25em` - **code:** background `rgba(6, 27, 49, 0.06)`, color `#061b31` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 17.37:1 | AA | AAA | — | | Body text on canvas | 17.37:1 | AA | AAA | — | | Muted text on surface | 4.75:1 | AA | AA | — | | Accent on surface | 6.19:1 | AA-Large | AA | — | | Accent on canvas | 6.19:1 | AA-Large | AA | — | --- # SYSTEM: Twilight Mail Source: https://www.freedesignmd.com/system/twilight-mail --- name: "Twilight Mail" description: "Luxury productivity. Deep purple hero against pristine white, non-standard variable weight 460/540, ultra-tight 0.96 leading, warm cream CTAs, lavender as the only accent." tags: [consumer, premium, minimal, editorial] colors: primary: "#292827" secondary: "#55534e" tertiary: "#cbb7fb" neutral: "#1b1938" surface: "#ffffff" typography: display: "Inter Tight" body: "Inter Tight" mono: "JetBrains Mono" scale: hero: "4rem / 0.96 / 500 / 0" h1: "3rem / 0.96 / 500 / -1.32px" h2: "1.75rem / 1.14 / 500 / -0.63px" body: "1rem / 1.5 / 500 / 0" radius: sm: 8px md: 8px lg: 16px shadows: card: "rgba(41,40,39,0.06) 0 1px 2px" borders: card: "1px solid #dcd7d3" divider: "#dcd7d3" buttons: primary: background: #e9e5dd color: #292827 border: none shape: rounded padding: 12px 22px font: 700 secondary: background: #292827 color: #ffffff border: none shape: rounded padding: 12px 22px font: 600 outline: background: #ffffff color: #292827 border: 1px solid #dcd7d3 shape: rounded padding: 12px 22px font: 600 ghost: background: transparent color: #714cb6 border: none shape: rounded padding: 12px 8px font: 540 hover: underline charts: variant: stepped stroke_width: 2 fill_opacity: 0.4 gridlines: false bar_gap: 0px highlight: all dot_marker: false palette: ["#cbb7fb", "#b59cf5", "#9d80ee", "#8364e0", "#714cb6", "#52378a", "#1b1938"] fonts_url: "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Twilight Mail ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Twilight Mail** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#e9e5dd`, text `#292827`, padding `12px 22px`, weight `700`. - **Secondary** — rounded shape, bg `#292827`, text `#ffffff`, padding `12px 22px`, weight `600`. - **Outline** — rounded shape, bg `#ffffff`, text `#292827`, border `1px solid #dcd7d3`, padding `12px 22px`, weight `600`. - **Ghost** — rounded shape, text `#714cb6`, padding `12px 8px`, weight `540`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#ffffff` - Border: `1px solid #dcd7d3` - Shadow: `rgba(41,40,39,0.06) 0 1px 2px` - Radius: `radius.lg` (`16px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `stepped` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `all` — emphasize a single bar/point per chart. - Use the declared palette in order: `#cbb7fb`, `#b59cf5`, `#9d80ee`, `#8364e0`, `#714cb6`, `#52378a`, `#1b1938`. #### Typography pairings - **Display (`Inter Tight`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter Tight`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Twilight Mail feels like opening a luxury envelope — predominantly white, immaculately clean, with a single dramatic gesture of color that commands attention. The hero is a **cinematic deep-purple gradient** (`#1b1938`) — twilight just before dawn — overlaid with confident white typography. Below that entrance, the page returns to white canvas with **charcoal ink** (`#292827`) text: warm near-black, never pure. The typography is the true signature. The variable display family runs at non-standard weights — **460** and **540** — that sit deliberately between the conventional Regular (400) and Medium (500) stops. Weight 460 is the workhorse: heavier than expected, never aggressive. Display compresses to **0.96 line-height** for dense architectural blocks, while body relaxes to a generous 1.50 — tension between compressed power and breathing room defines the voice. The design philosophy is maximum confidence through minimum decoration. **Warm cream** (`#e9e5dd`) buttons instead of bright CTAs, near-absence of borders and shadows, and **lavender purple** (`#cbb7fb`) as the sole accent. It's a productivity tool that markets itself like a luxury brand. **Signature moves** - Deep purple hero gradient (`#1b1938`) against pristine white content - Variable font weights **460 / 540** — between conventional stops - Display leading **0.96** — compressed power - Warm Cream (`#e9e5dd`) buttons — never bright - Lavender (`#cbb7fb`) as the *only* accent - **Binary radius system** — 8px and 16px, nothing else - No pill shapes, no micro-rounding - Charcoal Ink (`#292827`) text — warmer than pure black ## 2. Palette ### Primary - **Mysteria Purple** `#1b1938` — hero gradient, darkest brand expression - **Lavender Glow** `#cbb7fb` — single accent - **Charcoal Ink** `#292827` — primary text on light ### Surface - Pure White `#ffffff` · Warm Cream `#e9e5dd` (button) · Parchment Border `#dcd7d3` ### Secondary - Amethyst Link `#714cb6` — underlined links - Translucent White `rgba(255,255,255,0.95)` / `rgba(255,255,255,0.8)` — text on dark ## 3. Typography Single variable family. Weight stops: **460, 540, 600, 700**. | Role | Size | Weight | Leading | Tracking | |------|------|--------|---------|----------| | Display Hero | 64px | 540 | 0.96 | 0 | | Section Display | 48px | 460 | 0.96 | -1.32px | | Feature Title | 28px | 540 | 1.14 | -0.63px | | Sub-heading L | 26px | 460 | 1.30 | 0 | | Card Heading | 22px | 460 | 0.76 | -0.315px | | Body Heading | 20px | 460 | 1.20 | 0 | | Emphasis Body | 18px | 540 | 1.50 | -0.135px | | Body | 16px | 460 | 1.50 | 0 | | Button | 16px | 600–700 | 1.00 | 0 | | Nav | 16px | 460 | 1.20 | 0 | | Caption | 14px | 500–600 | 1.20–1.29 | -0.315px / 0 | | Micro | 12px | 700 | 1.50 | 0 | **460 is the new 400.** Display compresses (0.96), body breathes (1.50). Negative tracking surgical: large only. ## 4. Buttons ### Warm Cream Primary ```css background: #e9e5dd; color: #292827; padding: 12px 22px; border-radius: 8px; ``` ### Dark Inverse - Background `#292827`, text white, 8px radius ### Ghost / Text Link - Underline decoration, Amethyst Link (`#714cb6`) ## 5. Cards - Background white - Border `1px solid #dcd7d3` - Radius **16px** (cards) or **8px** (small) — no other values - Hero containment: `rgba(255,255,255,0.2)` border on the purple gradient ## 6. Charts **Stepped lavender gradient bars, no gaps** — calm productivity, not financial hype. The bars step from soft Lavender Glow (`#cbb7fb`) into Mysteria Purple (`#1b1938`), creating a gradient narrative across the chart. No gridlines. ## 7. Spacing - Base 8px - Scale: `2, 4, 6, 8, 12, 16, 18, 20, 24, 28, 32, 36, 40, 48, 56` - Section padding 48–80px ## 8. Depth & elevation | Level | Treatment | Use | |-------|-----------|-----| | 0 | Flat | Page canvas | | 1 | `1px solid #dcd7d3` | Card | | 2 | `1px solid #292827` | Header / dark separator | | 3 | Subtle blur | Product screenshot frames | | 4 | `rgba(255,255,255,0.2)` border | Hero gradient overlay | **Hero gradient creates depth**, not shadows. Lavender accents float over the purple field — a stellar/atmospheric effect. ## 9. Do's & don'ts ✅ **Do** - Use weight 460 as default — slightly heavier than regular, the brand signature - Hold display leading at 0.96 — compression is intentional - Use Warm Cream (`#e9e5dd`) buttons — never white, never gray - Limit radius to **8px and 16px** only - Apply negative tracking on display, never body - Use Lavender (`#cbb7fb`) as the *only* accent ❌ **Don't** - Use conventional weights 400/500/600 for display — 460/540 is the signature - Add bright/saturated CTAs (blue, green, red) — buttons are intentionally muted - Introduce additional accents — palette is single-accent by design - Use pill shapes — not in this system - Use pure black text — Charcoal Ink (`#292827`) is warmer - Add micro-rounding (2–4px) — radius is binary --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#292827` | | secondary | `#55534e` | | tertiary | `#cbb7fb` | | neutral | `#1b1938` | | surface | `#ffffff` | ### Typography - **Display:** Inter Tight - **Body:** Inter Tight - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4rem / 0.96 / 500 / 0 | | H1 | 3rem / 0.96 / 500 / -1.32px | | H2 | 1.75rem / 1.14 / 500 / -0.63px | | Body | 1rem / 1.5 / 500 / 0 | ### Radius - sm: `8px` - md: `8px` - lg: `16px` ### Shadows - **card:** `rgba(41,40,39,0.06) 0 1px 2px` ### Borders - **card:** `1px solid #dcd7d3` - **divider:** `#dcd7d3` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#e9e5dd` | | color | `#292827` | | border | `none` | | padding | `12px 22px` | | fontWeight | `700` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#292827` | | color | `#ffffff` | | border | `none` | | padding | `12px 22px` | | fontWeight | `600` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `#ffffff` | | color | `#292827` | | border | `1px solid #dcd7d3` | | padding | `12px 22px` | | fontWeight | `600` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#714cb6` | | border | `none` | | padding | `12px 8px` | | fontWeight | `540` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `stepped` | | strokeWidth | `2` | | fillOpacity | `0.4` | | gridlines | `false` | | barGap | `0px` | | highlight | `all` | | dotMarker | `false` | | palette | `#cbb7fb`, `#b59cf5`, `#9d80ee`, `#8364e0`, `#714cb6`, `#52378a`, `#1b1938` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(203, 183, 251, 0.92)`, shadow: `0 4px 20px -8px rgba(203, 183, 251, 0.4)` - **focus** — outline: `1.5px solid #cbb7fb`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#292827`, color: `#ffffff` #### Input - **hover** — border: `1px solid #292827` - **focus** — border: `1px solid #cbb7fb`, shadow: `0 1px 0 0 #cbb7fb` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #292827` #### Tab - **hover** — color: `#292827` - **focus** — outline: `1.5px solid #cbb7fb`, outline-offset: `3px` - **selected** — color: `#cbb7fb`, border: `0 0 2px 0 solid #cbb7fb` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#cbb7fb`, underline `always` - **blockquote:** border `4px solid #cbb7fb`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(41, 40, 39, 0.06)`, color `#292827` ### Accessibility (WCAG 2.1) **Overall:** FAIL | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 14.72:1 | AA | AAA | — | | Body text on canvas | 1.15:1 | AA | FAIL | `#878481` → 4.54:1 (AA) | | Muted text on surface | 7.68:1 | AA | AAA | — | | Accent on surface | 1.79:1 | AA-Large | FAIL | `#8556f6` → 4.51:1 (AA) | | Accent on canvas | 9.42:1 | AA-Large | AAA | — | --- # SYSTEM: Cinescope Mail Source: https://www.freedesignmd.com/system/cinescope-mail --- name: "Cinescope Mail" description: "Pure black void with frost-blue borders. Editorial serif hero, geometric sans sections, pill CTAs, and a multi-color accent system that performs against the dark." tags: [dark, editorial, developer, cinematic] colors: primary: "#f0f0f0" secondary: "#a1a4a5" tertiary: "#ff801f" neutral: "#000000" surface: "#000000" typography: display: Fraunces body: Inter mono: "JetBrains Mono" scale: hero: "4.5rem / 1 / 400 / -0.96px" h1: "3.5rem / 1.2 / 400 / -2.8px" h2: "1.5rem / 1.3 / 500 / 0" body: "1rem / 1.5 / 400 / 0" radius: sm: 4px md: 8px lg: 16px pill: 9999px shadows: card: "rgba(176, 199, 217, 0.145) 0 0 0 1px" borders: card: "1px solid rgba(214, 235, 253, 0.19)" divider: "rgba(214, 235, 253, 0.19)" buttons: primary: background: #FFFFFF color: #000000 border: none shape: pill padding: 10px 22px font: 600 secondary: background: #000000 color: #FFFFFF border: 1px solid rgba(255,255,255,0.12) shape: pill padding: 10px 22px font: 600 outline: background: transparent color: #FFFFFF border: 1px solid rgba(135,206,250,0.4) shape: pill padding: 10px 22px font: 600 ghost: background: transparent color: rgba(255,255,255,0.6) border: none shape: pill padding: 10px 14px font: 600 charts: variant: "thin-bars" stroke_width: 1.5 fill_opacity: 0 gridlines: false bar_gap: 12px highlight: all dot_marker: true palette: ["#ff801f", "#11ff99", "#3b9eff", "#ffc53d", "#ff2047", "#ff801f", "#3b9eff"] fonts_url: "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Cinescope Mail ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Cinescope Mail** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — pill shape, bg `#FFFFFF`, text `#000000`, padding `10px 22px`, weight `600`. - **Secondary** — pill shape, bg `#000000`, text `#FFFFFF`, border `1px solid rgba(255,255,255,0.12)`, padding `10px 22px`, weight `600`. - **Outline** — pill shape, text `#FFFFFF`, border `1px solid rgba(135,206,250,0.4)`, padding `10px 22px`, weight `600`. - **Ghost** — pill shape, text `rgba(255,255,255,0.6)`, padding `10px 14px`, weight `600`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#000000` - Border: `1px solid rgba(214, 235, 253, 0.19)` - Shadow: `rgba(176, 199, 217, 0.145) 0 0 0 1px` - Radius: `radius.lg` (`16px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `thin-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `all` — emphasize a single bar/point per chart. - Use the declared palette in order: `#ff801f`, `#11ff99`, `#3b9eff`, `#ffc53d`, `#ff2047`, `#ff801f`, `#3b9eff`. #### Typography pairings - **Display (`Fraunces`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Cinescope Mail is dark, cinematic, and unhurried. The page is draped in pure black (`#000000`) with text that glows in near-white (`#f0f0f0`) — a theatre-like experience where content performs on a void stage. This is not the typical developer-tool darkness. It is the controlled darkness of a photography gallery, where every element is lit with intention and nothing competes for attention. The typography is the lead actor. A three-font hierarchy: a dramatic display serif at massive 96px for hero headlines (line-height 1.00, tracking -0.96px) creates magazine-cover energy; a geometric sans handles section headings with even more aggressive tracking (-2.8px at 56px) for compressed engineered authority; a clean grotesk takes over for body and UI to let the display fonts shine. A monospace voice rounds out the family for code blocks — code is treated as a first-class visual element, not an afterthought. The signature visual element is the **icy frost border**. Instead of neutral gray, every container is outlined in `rgba(214, 235, 253, 0.19)` — a frosty, slightly blue-tinted line at 19% opacity that gives every divider a cold, crystalline quality against the black. Combined with pill-shaped CTAs (9999px), a multi-color accent system, and whisper-thin ring shadows, the result feels premium, precise, and quietly confident. **Signature moves** - Pure `#000000` void background — never warm or charcoal - Three-font hierarchy: display serif (hero), geometric sans (sections), grotesk (body) - Icy frost borders `rgba(214, 235, 253, 0.19)` — cold crystalline shimmer - Multi-color accent system: orange, green, blue, yellow, red — each with its own role - Pill CTAs (9999px), white solid or transparent + frost - Mono as design element — used prominently, not hidden - Whisper ring shadows: `rgba(176, 199, 217, 0.145) 0 0 0 1px` ## 2. Palette ### Canvas - **Void Black** `#000000` — page background - **Near White** `#f0f0f0` — primary text - **Pure White** `#ffffff` — solid CTA, max emphasis ### Accent System - **Orange** `#ff801f` (primary), `#ffa057` (light), `#ff5900` (deep) - **Green** `#11ff99`, `#22ff99` — success, positive - **Blue** `#3b9eff` (links), `#0081fd` — interactive - **Yellow** `#ffc53d` — warnings, highlights - **Red** `#ff2047` — errors, destructive ### Neutrals - Silver `#a1a4a5` — secondary text - Dark Gray `#464a4d` — tertiary - Mid Gray `#5c5c5c` — hover ### Borders & Surface - Frost `rgba(214, 235, 253, 0.19)` — universal - Frost Soft `rgba(217, 237, 254, 0.145)` — list items - Ring `rgba(176, 199, 217, 0.145) 0 0 0 1px` — shadow-as-border ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Display Hero | Serif | 96px | 400 | 1.00 | -0.96px | | Section Head | Sans | 56px | 400 | 1.20 | -2.8px | | Sub-heading | Sans | 20px | 400 | 1.30 | normal | | Feature title | Body | 24px | 500 | 1.50 | normal | | Body L | Body | 18px | 400 | 1.50 | normal | | Body | Body | 16px | 400 | 1.50 | normal | | Nav | Sans | 14px | 500 | 1.43 | +0.35px | | Caption | Body | 14px | 400 | 1.60 | normal | | Code | Mono | 16px | 400 | 1.50 | normal | **The only positive tracking is on nav.** Display fonts compress (negative tracking); nav links breathe (+0.35px). Display serif is hero-only — never body. Each font has one job and never crosses lanes. ## 4. Buttons ### White Solid Pill (Primary) ```css background: #ffffff; color: #000000; padding: 5px 12px; border-radius: 9999px; ``` ### Frost Pill (Secondary) - Transparent background, `#f0f0f0` text - `1px solid rgba(214, 235, 253, 0.19)`, 9999px radius - Hover: `rgba(255,255,255,0.28)` glass ### Ghost - Transparent, no border, `#f0f0f0` text, 4px radius ## 5. Cards - Background: transparent or near-black - Border: `1px solid rgba(214, 235, 253, 0.19)` (frost) - Radius: 16px standard, 24px large - Shadow: `rgba(176, 199, 217, 0.145) 0 0 0 1px` — ring only ## 6. Charts **Multi-color accent bars.** Each bar takes its own color from the accent palette (orange / green / blue / yellow / red), creating syntax-highlighted data visualizations that match the code-block aesthetic. Line charts use thin strokes (1.5px) with no fill — pure linework against the void. ## 7. Spacing - Base: 8px - Scale: `4, 6, 8, 12, 16, 20, 24, 32, 40, 80, 120` - Section vertical: 80–120px+ — cinematic black space ## 8. Depth & elevation | Level | Treatment | Use | |-------|-----------|-----| | 0 | Flat black | Default | | 1 | Frost border | Cards, dividers, buttons | | 1b | Ring shadow `0 0 0 1px` | Floating panels | | 3 | Heavy black focus ring `0 0 0 8px` | Accessibility | **Borders ARE the depth.** On pure black, traditional shadows disappear. Cinescope Mail uses thin icy borders to create floating-glass-in-space depth — borders catch light, shadows don't. ## 9. Do's & don'ts ✅ **Do** - Use `#000000` — pure void, never charcoal - Apply frost borders (`rgba(214,235,253,0.19)`) for all structural lines - Pin display serif to hero only, geometric sans to sections, grotesk to body - Use pill (9999px) for primary CTAs and tags - Use multi-color accents — each feature gets its own color - Use +0.35px tracking on nav (the only positive tracking) ❌ **Don't** - Use neutral gray borders — they kill the icy signature - Use bold display serif on body - Mix multiple accent colors in the same component - Use box-shadow elevation on dark — frost borders only - Apply opaque buttons — transparency + frost is the pattern --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#f0f0f0` | | secondary | `#a1a4a5` | | tertiary | `#ff801f` | | neutral | `#000000` | | surface | `#000000` | ### Typography - **Display:** Fraunces - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.5rem / 1 / 400 / -0.96px | | H1 | 3.5rem / 1.2 / 400 / -2.8px | | H2 | 1.5rem / 1.3 / 500 / 0 | | Body | 1rem / 1.5 / 400 / 0 | ### Radius - sm: `4px` - md: `8px` - lg: `16px` - pill: `9999px` ### Shadows - **card:** `rgba(176, 199, 217, 0.145) 0 0 0 1px` ### Borders - **card:** `1px solid rgba(214, 235, 253, 0.19)` - **divider:** `rgba(214, 235, 253, 0.19)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `pill` | | background | `#FFFFFF` | | color | `#000000` | | border | `none` | | padding | `10px 22px` | | fontWeight | `600` | #### Secondary | Property | Value | |----------|-------| | shape | `pill` | | background | `#000000` | | color | `#FFFFFF` | | border | `1px solid rgba(255,255,255,0.12)` | | padding | `10px 22px` | | fontWeight | `600` | #### Outline | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#FFFFFF` | | border | `1px solid rgba(135,206,250,0.4)` | | padding | `10px 22px` | | fontWeight | `600` | #### Ghost | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `rgba(255,255,255,0.6)` | | border | `none` | | padding | `10px 14px` | | fontWeight | `600` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1.5` | | fillOpacity | `0` | | gridlines | `false` | | barGap | `12px` | | highlight | `all` | | dotMarker | `true` | | palette | `#ff801f`, `#11ff99`, `#3b9eff`, `#ffc53d`, `#ff2047`, `#ff801f`, `#3b9eff` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(255, 128, 31, 0.92)`, shadow: `0 4px 20px -8px rgba(255, 128, 31, 0.4)` - **focus** — outline: `1.5px solid #ff801f`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#f0f0f0`, color: `#000000` #### Input - **hover** — border: `1px solid #f0f0f0` - **focus** — border: `1px solid #ff801f`, shadow: `0 1px 0 0 #ff801f` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #f0f0f0` #### Tab - **hover** — color: `#f0f0f0` - **focus** — outline: `1.5px solid #ff801f`, outline-offset: `3px` - **selected** — color: `#ff801f`, border: `0 0 2px 0 solid #ff801f` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#ff801f`, underline `always` - **blockquote:** border `4px solid #ff801f`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(240, 240, 240, 0.06)`, color `#f0f0f0` ### Accessibility (WCAG 2.1) **Overall:** AAA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 18.43:1 | AA | AAA | — | | Body text on canvas | 18.43:1 | AA | AAA | — | | Muted text on surface | 8.37:1 | AA | AAA | — | | Accent on surface | 8.36:1 | AA-Large | AAA | — | | Accent on canvas | 8.36:1 | AA-Large | AAA | — | --- # SYSTEM: Ink & Citron Source: https://www.freedesignmd.com/system/ink-citron --- name: "Ink & Citron" description: "Radical 2-color duotone. Deep ink-blue and acid citron, with no third hue. Every surface is one of the two colors or a tint thereof — the constraint is the personality." tags: [bold, duotone, agency, modern, editorial] colors: primary: "#0E1B3D" secondary: "#3A4566" tertiary: "#E6FF55" neutral: "#F2F3F8" surface: "#FFFFFF" typography: display: "Space Grotesk" body: Inter mono: "Space Mono" scale: hero: "6rem / 0.95 / 700 / -0.045em" h1: "3.5rem / 1 / 700 / -0.04em" h2: "1.75rem / 1.2 / 600 / -0.02em" body: "1rem / 1.55 / 400 / -0.005em" radius: sm: 0px md: 2px lg: 4px shadows: card: "4px 4px 0 0 #0E1B3D" button: "3px 3px 0 0 #0E1B3D" borders: card: "1.5px solid #0E1B3D" divider: "#0E1B3D" buttons: primary: background: #E6FF55 color: #0E1B3D border: 1.5px solid #0E1B3D shape: sharp padding: 13px 26px font: display / 700 / 0.9375rem / -0.01em shadow: 3px 3px 0 0 #0E1B3D suffix: arrow secondary: background: #0E1B3D color: #FFFFFF border: 1.5px solid #0E1B3D shape: sharp padding: 13px 26px font: display / 600 / 0.9375rem / -0.01em outline: background: #FFFFFF color: #0E1B3D border: 1.5px solid #0E1B3D shape: sharp padding: 12px 24px font: display / 600 / 0.9375rem / -0.01em ghost: background: transparent color: #0E1B3D border: none shape: sharp padding: 12px 4px font: display / 600 / 0.9375rem / -0.01em hover: underline charts: variant: bars stroke_width: 0 gridlines: false bar_radius: 0px bar_gap: 8px highlight: last axis_color: "#3A4566" palette: ["#E6FF55", "#0E1B3D"] fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=Space+Mono:wght@400;700&display=swap" dependencies: ["lucide-react"] --- # Ink & Citron ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Ink & Citron** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#E6FF55`, text `#0E1B3D`, border `1.5px solid #0E1B3D`, padding `13px 26px`, weight `700`, shadow `3px 3px 0 0 #0E1B3D`. - **Secondary** — sharp shape, bg `#0E1B3D`, text `#FFFFFF`, border `1.5px solid #0E1B3D`, padding `13px 26px`, weight `600`. - **Outline** — sharp shape, bg `#FFFFFF`, text `#0E1B3D`, border `1.5px solid #0E1B3D`, padding `12px 24px`, weight `600`. - **Ghost** — sharp shape, text `#0E1B3D`, padding `12px 4px`, weight `600`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FFFFFF` - Border: `1.5px solid #0E1B3D` - Shadow: `4px 4px 0 0 #0E1B3D` - Radius: `radius.lg` (`4px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `bars` - Bar radius: `0px` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#E6FF55`, `#0E1B3D`. #### Typography pairings - **Display (`Space Grotesk`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`Space Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Ink & Citron is a radical 2-color duotone. Two colors do all the work: - **Deep Ink #0E1B3D** — text, borders, secondary surfaces, hard shadows. - **Acid Citron #E6FF55** — the primary CTA, accent words, chart bars, the one thing that should grab the eye. There is no third chromatic hue. The "neutral" off-white is tinted toward ink so the page never breaks the duotone. The constraint is the personality — when the system is followed strictly it reads as confident and modern; when a third color is introduced it falls apart. For design-forward agencies, fashion-tech, music platforms, awards sites — anywhere the brief is "make it loud but smart." ## The Two Colors ```css --ink: #0E1B3D; --citron: #E6FF55; --paper: #FFFFFF; /* allowed neutral */ --paper-tinted: #F2F3F8; /* page background, ink-tinted */ ``` Allowed combinations: - Citron block + ink label + hard ink shadow → primary CTA. - Ink block + paper label → secondary CTA, footer, dark sections. - Paper surface + ink hairline + ink type → cards, articles, body content. - Citron text on ink background → hero accent word only. Forbidden combinations: - Any third hue. - Citron on paper as a fill (it's too aggressive at scale — citron is for actions and accents only). - Soft shadows. The shadow is always 3-4px hard-offset ink, never blurred. ## Typography - **Display: Space Grotesk 700** at 6rem with -4.5% tracking. Tight, geometric, confident. - **Body: Inter 400** at 1rem with 1.55 leading. - **Mono: Space Mono** for captions and code. | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | Space Grotesk | 6rem | 700 | -0.045em | | H1 | Space Grotesk | 3.5rem | 700 | -0.04em | | H2 | Space Grotesk | 1.75rem | 600 | -0.02em | | Body | Inter | 1rem | 400 | -0.005em / 1.55 | ## Geometry - **Radii: 0 / 2 / 4.** The system reads as hard-edged. Pills and 12px+ radii break the personality. - **Borders: 1.5px solid ink.** Heavier than a hairline — the line is part of the composition. - **Hard shadows: 3-4px offset solid ink.** Never blurred. Reads as poster-print, not depth. ## Buttons - **Primary** — citron block, ink label, 1.5px ink border, 3px hard ink shadow. Mono-display label at 700. - **Secondary** — ink block, paper label, 1.5px ink border. - **Outline** — paper block, ink label, 1.5px ink border. - **Ghost** — bare ink label, hover underline. All four are sharp (0-2px). All four use the display face for labels — the typography is part of the system's voice. ## Cards Paper surface, 1.5px solid ink border, 4px hard ink shadow. Radius 4px. Cards have weight — they sit on the page like printed cards on a table. ## Charts & Data Citron bars on a paper background, ink axis labels and baseline. No gridlines, no rounded corners, 8px gap. The chart is a graphic, not a subtle data viz. ## Do's and Don'ts - ✅ Two colors only — ink and citron. Every paint decision goes through this filter. - ✅ Hard offset shadows — 3-4px, solid ink, no blur. Ever. - ✅ Display face for buttons. The type is part of the brand. - ✅ Citron is for the primary CTA, one hero accent word, and chart bars. Three appearances per page max. - ❌ No third hue. No grey midtones beyond the ink-tinted paper. - ❌ No soft / blurred shadows. No glassmorphism. No gradients of any kind. - ❌ No pills. No radii above 4px. - ❌ No citron at large fill scale (full sections, full cards). It will fight the type. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#0E1B3D` | | secondary | `#3A4566` | | tertiary | `#E6FF55` | | neutral | `#F2F3F8` | | surface | `#FFFFFF` | ### Typography - **Display:** Space Grotesk - **Body:** Inter - **Mono:** Space Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 6rem / 0.95 / 700 / -0.045em | | H1 | 3.5rem / 1 / 700 / -0.04em | | H2 | 1.75rem / 1.2 / 600 / -0.02em | | Body | 1rem / 1.55 / 400 / -0.005em | ### Radius - sm: `0px` - md: `2px` - lg: `4px` ### Shadows - **card:** `4px 4px 0 0 #0E1B3D` - **button:** `3px 3px 0 0 #0E1B3D` ### Borders - **card:** `1.5px solid #0E1B3D` - **divider:** `#0E1B3D` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#E6FF55` | | color | `#0E1B3D` | | border | `1.5px solid #0E1B3D` | | padding | `13px 26px` | | fontFamily | `display` | | fontWeight | `700` | | fontSize | `0.9375rem` | | tracking | `-0.01em` | | shadow | `3px 3px 0 0 #0E1B3D` | | suffix | `arrow` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#0E1B3D` | | color | `#FFFFFF` | | border | `1.5px solid #0E1B3D` | | padding | `13px 26px` | | fontFamily | `display` | | fontWeight | `600` | | fontSize | `0.9375rem` | | tracking | `-0.01em` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `#FFFFFF` | | color | `#0E1B3D` | | border | `1.5px solid #0E1B3D` | | padding | `12px 24px` | | fontFamily | `display` | | fontWeight | `600` | | fontSize | `0.9375rem` | | tracking | `-0.01em` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#0E1B3D` | | border | `none` | | padding | `12px 4px` | | fontFamily | `display` | | fontWeight | `600` | | fontSize | `0.9375rem` | | tracking | `-0.01em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `bars` | | strokeWidth | `0` | | gridlines | `false` | | barRadius | `0px` | | barGap | `8px` | | highlight | `last` | | axisColor | `#3A4566` | | palette | `#E6FF55`, `#0E1B3D` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(230, 255, 85, 0.92)`, shadow: `0 4px 20px -8px rgba(230, 255, 85, 0.4)` - **focus** — outline: `1.5px solid #E6FF55`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#0E1B3D`, color: `#FFFFFF` #### Input - **hover** — border: `1px solid #0E1B3D` - **focus** — border: `1px solid #E6FF55`, shadow: `0 1px 0 0 #E6FF55` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #0E1B3D` #### Tab - **hover** — color: `#0E1B3D` - **focus** — outline: `1.5px solid #E6FF55`, outline-offset: `3px` - **selected** — color: `#E6FF55`, border: `0 0 2px 0 solid #E6FF55` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#E6FF55`, underline `always` - **blockquote:** border `4px solid #E6FF55`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(14, 27, 61, 0.06)`, color `#0E1B3D` ### Accessibility (WCAG 2.1) **Overall:** FAIL | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 16.9:1 | AA | AAA | — | | Body text on canvas | 15.25:1 | AA | AAA | — | | Muted text on surface | 9.45:1 | AA | AAA | — | | Accent on surface | 1.12:1 | AA-Large | FAIL | `#6b7e00` → 4.56:1 (AA) | | Accent on canvas | 1.01:1 | AA-Large | FAIL | `#637400` → 4.7:1 (AA) | --- # SYSTEM: Stadium Bank Source: https://www.freedesignmd.com/system/stadium-bank --- name: "Stadium Bank" description: "Billboard-scale fintech. Geometric grotesque at -2.72px tracking, universal pill buttons with generous padding, zero shadows — depth through dark/light alternation only." tags: [fintech, minimal, premium, bold, modern] colors: primary: "#191c1f" secondary: "#505a63" tertiary: "#191c1f" neutral: "#f4f4f4" surface: "#ffffff" typography: display: "Space Grotesk" body: Inter mono: "JetBrains Mono" scale: hero: "5.5rem / 1 / 500 / -2.72px" h1: "3rem / 1 / 500 / -1.5px" h2: "2.5rem / 1.21 / 500 / -0.48px" body: "1rem / 1.5 / 400 / 0.24px" radius: sm: 8px md: 12px lg: 20px pill: 9999px shadows: borders: card: none divider: "#c9c9cd" buttons: primary: background: #191c1f color: #ffffff border: none shape: pill padding: 14px 32px font: display / 500 secondary: background: #f4f4f4 color: #000000 border: none shape: pill padding: 14px 34px font: display / 500 outline: background: transparent color: #191c1f border: 2px solid #191c1f shape: pill padding: 12px 30px font: display / 500 ghost: background: rgba(244,244,244,0.1) color: #191c1f border: 2px solid #191c1f shape: pill padding: 12px 26px font: display / 500 charts: variant: bars stroke_width: 2 fill_opacity: 0 gridlines: false bar_radius: "4px 4px 0 0" bar_gap: 10px highlight: single dot_marker: false fonts_url: "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Stadium Bank ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Stadium Bank** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — pill shape, bg `#191c1f`, text `#ffffff`, padding `14px 32px`, weight `500`. - **Secondary** — pill shape, bg `#f4f4f4`, text `#000000`, padding `14px 34px`, weight `500`. - **Outline** — pill shape, text `#191c1f`, border `2px solid #191c1f`, padding `12px 30px`, weight `500`. - **Ghost** — pill shape, bg `rgba(244,244,244,0.1)`, text `#191c1f`, border `2px solid #191c1f`, padding `12px 26px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#ffffff` - Border: `none` - Radius: `radius.lg` (`20px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `bars` - Bar radius: `4px 4px 0 0` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Space Grotesk`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Stadium Bank is fintech confidence distilled into pixels — a design system that communicates "your money is in capable hands" through massive typography, generous whitespace, and a disciplined neutral palette. The visual language is built on a geometric grotesque that creates billboard-scale headlines at 88–136px with weight 500 and aggressive negative tracking (-2.72px). This isn't subtle branding; it's fintech at stadium scale. The marketing surface is remarkably restrained — near-black (`#191c1f`) and pure white (`#ffffff`) dominate. The colorful semantic tokens (teal, blue, deep-pink, brown) are reserved for the product interface, not the marketing page. The result is a binary that lets typography and whitespace carry the entire story. What distinguishes Stadium Bank is its **pill-everything button system**. Every button uses 9999px radius — primary dark, secondary light, outlined, and ghost on dark. The padding is generous (14px 32–34px), creating large, confident touch targets. Combined with Inter for body text at positive letter-spacing (0.16–0.24px), the result feels both premium and accessible. **Signature moves** - Geometric grotesque at weight 500 — never bold, authority comes from size + tracking - Aggressive negative tracking: -2.72px at 88px, -1.5px at 48px - Universal pill buttons (9999px) with generous 14×32 padding - Inter body at +0.16–0.24px tracking — airy, well-spaced reading - **Zero shadows** — depth from color contrast and whitespace only - Tight display line-heights (1.00) with relaxed body (1.50–1.56) - Dark/light section alternation as the primary depth mechanism ## 2. Palette ### Primary - **Stadium Dark** `#191c1f` — primary surface, button background, near-black text - **Pure White** `#ffffff` — page surface, label on dark - **Light Surface** `#f4f4f4` — secondary button, subtle surface ### Brand - **Stadium Blue** `#494fdf` — primary brand blue - **Action Blue** `#4f55f1` — header accent - **Link Blue** `#376cd5` — link text ### Semantic - Danger `#e23b4a` · Deep Pink `#e61e49` - Warning `#ec7e00` · Yellow `#b09000` - Teal `#00a87e` · Light Green `#428619` · Green Text `#006400` - Light Blue `#007bc2` · Brown `#936d62` ### Neutrals - Mid Slate `#505a63` — secondary text - Cool Gray `#8d969e` — tertiary - Gray Tone `#c9c9cd` — borders, dividers ## 3. Typography | Role | Size | Weight | Leading | Tracking | |------|------|--------|---------|----------| | Display Mega | 136px | 500 | 1.00 | -2.72px | | Display Hero | 80px | 500 | 1.00 | -0.8px | | Section | 48px | 500 | 1.21 | -0.48px | | Sub-heading | 40px | 500 | 1.20 | -0.4px | | Card title | 32px | 500 | 1.19 | -0.32px | | Feature title | 24px | 400 | 1.33 | normal | | Nav / UI | 20px | 500 | 1.40 | normal | | Body Large | 18px | 400 | 1.56 | -0.09px | | Body | 16px | 400 | 1.50 | +0.24px | | Body Semibold | 16px | 600 | 1.50 | +0.16px | | Body Bold Link | 16px | 700 | 1.50 | +0.24px | **Weight 500 is the display default.** No bold for headings — authority comes from size and aggressive negative tracking, not weight stacks. The contrast: compressed display, airy body. Inter's body tracking is *positive* (+0.16–0.24px), creating an unmistakable reading rhythm. ## 4. Buttons ### Primary Dark Pill ```css background: #191c1f; color: #ffffff; padding: 14px 32px; border-radius: 9999px; ``` Hover: opacity 0.85. ### Secondary Light Pill - Background `#f4f4f4`, text `#000000` - 14px 34px padding, 9999px radius ### Outlined Pill - Transparent background, `#191c1f` text - `2px solid #191c1f`, 9999px radius ### Ghost on Dark - `rgba(244,244,244,0.1)` background, `#f4f4f4` text - `2px solid #f4f4f4`, 9999px radius ## 5. Cards - Background: `#ffffff` or `#f4f4f4` - **No border, no shadow** — flat surfaces only - Radius: 12px (small) or 20px (cards) - Containment via dark/light section alternation ## 6. Charts Big confident bars, single highlighted maximum bar in stadium dark. **No gridlines** — flat by design, just like the rest of the system. The chart card itself has no border or shadow — it sits as a plain block on its section background. ## 7. Spacing - Base: 8px - Scale: `4, 6, 8, 14, 16, 20, 24, 32, 40, 48, 80, 88, 120` - Section vertical: 80–120px ## 8. Depth & elevation | Level | Treatment | Use | |-------|-----------|-----| | 0 | Flat | Everything | | Focus | `0 0 0 0.125rem` ring | Accessibility only | **Zero-shadow philosophy.** Stadium Bank uses no drop shadows anywhere. Depth comes entirely from the dark/light section contrast and the generous whitespace between elements. ## 9. Do's & don'ts ✅ **Do** - Use weight 500 for all display headings — never bold - Apply 9999px radius to *every* button — pill is universal - Use generous button padding (14×32 minimum) - Keep marketing surfaces to near-black + white binary - Apply positive letter-spacing (+0.16–0.24px) on Inter body ❌ **Don't** - Use shadows — Stadium Bank is flat by design - Use weight 700 for display — 500 is the ceiling - Use small buttons — generous padding is intentional - Apply semantic colors (teal, deep pink, etc.) to marketing surfaces - Use rectangular CTAs — pills only --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#191c1f` | | secondary | `#505a63` | | tertiary | `#191c1f` | | neutral | `#f4f4f4` | | surface | `#ffffff` | ### Typography - **Display:** Space Grotesk - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 5.5rem / 1 / 500 / -2.72px | | H1 | 3rem / 1 / 500 / -1.5px | | H2 | 2.5rem / 1.21 / 500 / -0.48px | | Body | 1rem / 1.5 / 400 / 0.24px | ### Radius - sm: `8px` - md: `12px` - lg: `20px` - pill: `9999px` ### Shadows ### Borders - **card:** `none` - **divider:** `#c9c9cd` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `pill` | | background | `#191c1f` | | color | `#ffffff` | | border | `none` | | padding | `14px 32px` | | fontFamily | `display` | | fontWeight | `500` | #### Secondary | Property | Value | |----------|-------| | shape | `pill` | | background | `#f4f4f4` | | color | `#000000` | | border | `none` | | padding | `14px 34px` | | fontFamily | `display` | | fontWeight | `500` | #### Outline | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#191c1f` | | border | `2px solid #191c1f` | | padding | `12px 30px` | | fontFamily | `display` | | fontWeight | `500` | #### Ghost | Property | Value | |----------|-------| | shape | `pill` | | background | `rgba(244,244,244,0.1)` | | color | `#191c1f` | | border | `2px solid #191c1f` | | padding | `12px 26px` | | fontFamily | `display` | | fontWeight | `500` | ### Charts | Property | Value | |----------|-------| | variant | `bars` | | strokeWidth | `2` | | fillOpacity | `0` | | gridlines | `false` | | barRadius | `4px 4px 0 0` | | barGap | `10px` | | highlight | `single` | | dotMarker | `false` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 0 24px -4px rgba(25, 28, 31, 0.5), 0 8px 24px -8px rgba(0,0,0,0.6)`, filter: `brightness(1.1)` - **focus** — outline: `1.5px solid #191c1f`, outline-offset: `3px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.92)` - **disabled** — opacity: `0.35`, filter: `saturate(0.4)` - **loading** — opacity: `0.6` - **selected** — bg: `#191c1f`, color: `#0A0A0A` #### Input - **hover** — border: `1px solid rgba(25, 28, 31, 0.5)` - **focus** — border: `1px solid #191c1f`, shadow: `0 0 0 3px rgba(25, 28, 31, 0.2)` - **disabled** — opacity: `0.35` - **error** — border: `1px solid #F87171`, shadow: `0 0 0 3px rgba(248,113,113,0.2)` #### Card - **hover** — shadow: `0 16px 40px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(25, 28, 31, 0.18)`, transform: `translateY(-2px)` - **selected** — border: `1px solid #191c1f`, shadow: `0 0 0 1px #191c1f` - **dragging** — shadow: `0 24px 60px -16px rgba(0,0,0,0.85)`, transform: `scale(1.02)`, opacity: `0.85` #### Tab - **hover** — color: `#191c1f` - **focus** — outline: `1.5px solid #191c1f`, outline-offset: `2px` - **selected** — color: `#191c1f`, border: `0 0 1.5px 0 solid #191c1f` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Glide.** Fließende, leicht beschleunigte Übergänge mit Accent-Glow auf hover. Premium-Feeling durch kontrollierte Lichtspiele. ```css transition: all 280ms cubic-bezier(0.32, 0.72, 0, 1); ``` | Token | Value | |-------|-------| | duration.instant | `100ms` | | duration.fast | `180ms` | | duration.base | `280ms` | | duration.slow | `450ms` | | easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.25, 0.55, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — Hairline mit Accent-Hauch. | | level1 | `0 2px 4px rgba(0,0,0,0.45)` | Subtle drop — list items. | | level2 | `0 12px 28px -8px rgba(0,0,0,0.6)` | Popover — vom Canvas gelöst. | | level3 | `0 20px 48px -12px rgba(0,0,0,0.7), 0 0 32px -8px rgba(25, 28, 31, 0.25)` | Sheet — Accent-Halo. | | level4 | `0 40px 96px -16px rgba(0,0,0,0.85), 0 0 64px -12px rgba(25, 28, 31, 0.4)` | Modal — voller Accent-Rim, dramatisch. | ### Content - **measure:** `66ch` (max line length for body prose) - **paragraph spacing:** `1.3em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#191c1f`, underline `hover` - **blockquote:** border `2px solid #191c1f`, padding `0.8em 1.2em` - **code:** background `rgba(25, 28, 31, 0.12)`, color `#191c1f` ### Accessibility (WCAG 2.1) **Overall:** AAA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 17.11:1 | AA | AAA | — | | Body text on canvas | 15.56:1 | AA | AAA | — | | Muted text on surface | 7.04:1 | AA | AAA | — | | Accent on surface | 17.11:1 | AA-Large | AAA | — | | Accent on canvas | 15.56:1 | AA-Large | AAA | — | --- # SYSTEM: Coinblue Exchange Source: https://www.freedesignmd.com/system/coinblue-exchange --- name: "Coinblue Exchange" description: "Crypto-grade trust on white. Saturated brand blue, ultra-tight 1.00 line-height display, distinctive 56px radius pill CTAs, alternating white/near-black sections." tags: [fintech, saas, minimal, trustworthy, modern] colors: primary: "#0a0b0d" secondary: "#5b616e" tertiary: "#0052ff" neutral: "#eef0f3" surface: "#ffffff" typography: display: Manrope body: Manrope mono: "JetBrains Mono" scale: hero: "5rem / 1 / 400 / -1.6px" h1: "4rem / 1 / 400 / -1.28px" h2: "2.25rem / 1.11 / 400 / -0.72px" body: "1.125rem / 1.56 / 400 / 0" radius: sm: 8px md: 16px lg: 24px pill: 56px shadows: button: "rgba(0,82,255,0.18) 0 6px 18px -6px" borders: card: "1px solid rgba(91,97,110,0.2)" divider: rgba(91,97,110,0.2) buttons: primary: background: #0052ff color: #ffffff border: 1px solid #0052ff shape: pill padding: 14px 28px font: 600 shadow: rgba(0,82,255,0.18) 0 6px 18px -6px secondary: background: #eef0f3 color: #0a0b0d border: 1px solid #eef0f3 shape: pill padding: 14px 28px font: 600 outline: background: transparent color: #0052ff border: 1px solid #0052ff shape: pill padding: 14px 28px font: 600 ghost: background: transparent color: #0a0b0d border: none shape: pill padding: 12px 18px font: 600 charts: variant: "rounded-bars" stroke_width: 2.5 fill_opacity: 0.14 gridlines: false bar_gap: 8px highlight: last dot_marker: true fonts_url: "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Coinblue Exchange ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Coinblue Exchange** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — pill shape, bg `#0052ff`, text `#ffffff`, border `1px solid #0052ff`, padding `14px 28px`, weight `600`, shadow `rgba(0,82,255,0.18) 0 6px 18px -6px`. - **Secondary** — pill shape, bg `#eef0f3`, text `#0a0b0d`, border `1px solid #eef0f3`, padding `14px 28px`, weight `600`. - **Outline** — pill shape, text `#0052ff`, border `1px solid #0052ff`, padding `14px 28px`, weight `600`. - **Ghost** — pill shape, text `#0a0b0d`, padding `12px 18px`, weight `600`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#ffffff` - Border: `1px solid rgba(91,97,110,0.2)` - Radius: `radius.lg` (`24px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `rounded-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Manrope`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Manrope`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Coinblue Exchange is a clean, trustworthy crypto platform that communicates financial reliability through a blue-and-white binary palette. A single, deeply saturated brand blue (`#0052ff`) does all the interactive heavy lifting against white and near-black surfaces. The system feels institutional but modern — the kind of polish you want when an interface is asking you to move money. The display typography runs on geometric grotesque at weight 400 with ultra-tight 1.00 line-heights — headlines are stacked and dense, never airy. Body text takes over at weights 400–600 with relaxed 1.50–1.56 line-heights, creating clear separation between "headline mode" and "reading mode." The most distinctive button signature is a **56px radius** — a pill that's unmistakably Coinblue, and rare enough in the industry to read as proprietary. The page rhythm alternates between pristine white content sections and dark (`#0a0b0d`, `#282b31`) feature sections — a deliberate dark/light cadence that reinforces the dual-mode trading vibe. **Signature moves** - Coinblue Blue `#0052ff` as singular brand accent — never decorative - Geometric sans hierarchy across display/UI/body roles - 56px radius pill buttons — distinctive intermediate between rounded and full pill - Hover transitions to lighter blue `#578bfa` - Near-black (`#0a0b0d`) dark sections + white light sections - 1.00 line-height on display — ultra-tight, billboard-style - Cool gray secondary surface (`#eef0f3`) with blue tint - `text-transform: lowercase` on some button labels — unusual and recognizable ## 2. Palette ### Primary - **Coinblue Blue** `#0052ff` — primary brand, links, CTA borders - **Pure White** `#ffffff` — primary light surface - **Near Black** `#0a0b0d` — text, dark section backgrounds - **Cool Gray Surface** `#eef0f3` — secondary button background ### Interactive - Hover Blue `#578bfa` — button hover background - Link Blue `#0667d0` — secondary link - Muted Blue `#5b616e` at 20% — borders ### Surface - Dark Card `#282b31` — dark button/card backgrounds - Light Surface `rgba(247,247,247,0.88)` — subtle surface ## 3. Typography | Role | Size | Weight | Leading | Notes | |------|------|--------|---------|-------| | Display Hero | 80px | 400 | 1.00 | Maximum impact | | Display 2 | 64px | 400 | 1.00 | Sub-hero | | Display 3 | 52px | 400 | 1.00 | Third tier | | Section | 36px | 400 | 1.11 | Feature sections | | Card title | 32px | 400 | 1.13 | Card headings | | Feature title | 18px | 600 | 1.33 | Feature emphasis | | Body Bold | 16px | 700 | 1.50 | Strong body | | Body Semibold | 16px | 600 | 1.25 | Buttons, nav | | Body | 18px | 400 | 1.56 | Reading | | Body Small | 16px | 400 | 1.50 | Secondary reading | | Button | 16px | 600 | 1.20 | +0.16px tracking | | Caption | 14px | 600–700 | 1.50 | Metadata | | Small | 13px | 600 | 1.23 | Tags | **Display = ultra-tight (1.00).** No exceptions. UI text breathes (1.20–1.50). Display weight is intentionally light (400) — impact comes from size and leading, not weight. ## 4. Buttons ### Primary Pill (56px) ```css background: #eef0f3; border-radius: 56px; padding: 14px 28px; border: 1px solid #eef0f3; ``` Hover: `#578bfa`. Focus: 2px solid black outline. ### Dark Pill - Background `#282b31`, text `#ffffff`, 56px radius - Hover: `#578bfa` ### Blue Bordered - Border `1px solid #0052ff`, transparent background - 56px radius, blue text ## 5. Cards - Background: `#ffffff` (light) or `#282b31` (dark) - Border: `1px solid rgba(91,97,110,0.2)` - Radius: 8–24px range; 16px standard ## 6. Charts **Rounded pill-bars in saturated brand blue, with last-bar highlight** — the visual metaphor of "trending now." Line charts use a thicker 2.5px stroke and an end-of-line dot marker, like a live ticker reading. ## 7. Spacing - Base: 8px - Scale: `1, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 25, 32, 48` ## 8. Depth & elevation Minimal shadow system — depth from dark/light section contrast. The brand CTA gets a single subtle blue glow (`rgba(0,82,255,0.18) 0 6px 18px -6px`) for emphasis. ## 9. Do's & don'ts ✅ **Do** - Use brand blue (`#0052ff`) for primary interactive elements only - Apply 56px radius for all CTA buttons — never 8px or 9999px - Use display sizes 52–80px at line-height 1.00 - Alternate dark (`#0a0b0d`) and white sections ❌ **Don't** - Use the brand blue decoratively — it's functional only - Use sharp corners on CTAs — 56px minimum - Apply heavy drop shadows — light sections, dark sections, no shadows - Use bold (700) for display — 400 with tight leading is the look --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#0a0b0d` | | secondary | `#5b616e` | | tertiary | `#0052ff` | | neutral | `#eef0f3` | | surface | `#ffffff` | ### Typography - **Display:** Manrope - **Body:** Manrope - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 5rem / 1 / 400 / -1.6px | | H1 | 4rem / 1 / 400 / -1.28px | | H2 | 2.25rem / 1.11 / 400 / -0.72px | | Body | 1.125rem / 1.56 / 400 / 0 | ### Radius - sm: `8px` - md: `16px` - lg: `24px` - pill: `56px` ### Shadows - **button:** `rgba(0,82,255,0.18) 0 6px 18px -6px` ### Borders - **card:** `1px solid rgba(91,97,110,0.2)` - **divider:** `rgba(91,97,110,0.2)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `pill` | | background | `#0052ff` | | color | `#ffffff` | | border | `1px solid #0052ff` | | padding | `14px 28px` | | fontWeight | `600` | | shadow | `rgba(0,82,255,0.18) 0 6px 18px -6px` | #### Secondary | Property | Value | |----------|-------| | shape | `pill` | | background | `#eef0f3` | | color | `#0a0b0d` | | border | `1px solid #eef0f3` | | padding | `14px 28px` | | fontWeight | `600` | #### Outline | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#0052ff` | | border | `1px solid #0052ff` | | padding | `14px 28px` | | fontWeight | `600` | #### Ghost | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#0a0b0d` | | border | `none` | | padding | `12px 18px` | | fontWeight | `600` | ### Charts | Property | Value | |----------|-------| | variant | `rounded-bars` | | strokeWidth | `2.5` | | fillOpacity | `0.14` | | gridlines | `false` | | barGap | `8px` | | highlight | `last` | | dotMarker | `true` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 0 24px -4px rgba(0, 82, 255, 0.5), 0 8px 24px -8px rgba(0,0,0,0.6)`, filter: `brightness(1.1)` - **focus** — outline: `1.5px solid #0052ff`, outline-offset: `3px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.92)` - **disabled** — opacity: `0.35`, filter: `saturate(0.4)` - **loading** — opacity: `0.6` - **selected** — bg: `#0052ff`, color: `#0A0A0A` #### Input - **hover** — border: `1px solid rgba(0, 82, 255, 0.5)` - **focus** — border: `1px solid #0052ff`, shadow: `0 0 0 3px rgba(0, 82, 255, 0.2)` - **disabled** — opacity: `0.35` - **error** — border: `1px solid #F87171`, shadow: `0 0 0 3px rgba(248,113,113,0.2)` #### Card - **hover** — shadow: `0 16px 40px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(0, 82, 255, 0.18)`, transform: `translateY(-2px)` - **selected** — border: `1px solid #0052ff`, shadow: `0 0 0 1px #0052ff` - **dragging** — shadow: `0 24px 60px -16px rgba(0,0,0,0.85)`, transform: `scale(1.02)`, opacity: `0.85` #### Tab - **hover** — color: `#0052ff` - **focus** — outline: `1.5px solid #0052ff`, outline-offset: `2px` - **selected** — color: `#0052ff`, border: `0 0 1.5px 0 solid #0052ff` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Glide.** Fließende, leicht beschleunigte Übergänge mit Accent-Glow auf hover. Premium-Feeling durch kontrollierte Lichtspiele. ```css transition: all 280ms cubic-bezier(0.32, 0.72, 0, 1); ``` | Token | Value | |-------|-------| | duration.instant | `100ms` | | duration.fast | `180ms` | | duration.base | `280ms` | | duration.slow | `450ms` | | easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.25, 0.55, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — Hairline mit Accent-Hauch. | | level1 | `0 2px 4px rgba(0,0,0,0.45)` | Subtle drop — list items. | | level2 | `0 12px 28px -8px rgba(0,0,0,0.6)` | Popover — vom Canvas gelöst. | | level3 | `0 20px 48px -12px rgba(0,0,0,0.7), 0 0 32px -8px rgba(0, 82, 255, 0.25)` | Sheet — Accent-Halo. | | level4 | `0 40px 96px -16px rgba(0,0,0,0.85), 0 0 64px -12px rgba(0, 82, 255, 0.4)` | Modal — voller Accent-Rim, dramatisch. | ### Content - **measure:** `66ch` (max line length for body prose) - **paragraph spacing:** `1.3em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#0052ff`, underline `hover` - **blockquote:** border `2px solid #0052ff`, padding `0.8em 1.2em` - **code:** background `rgba(0, 82, 255, 0.12)`, color `#0052ff` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 19.69:1 | AA | AAA | — | | Body text on canvas | 17.25:1 | AA | AAA | — | | Muted text on surface | 6.21:1 | AA | AA | — | | Accent on surface | 5.75:1 | AA-Large | AA | — | | Accent on canvas | 5.04:1 | AA-Large | AA | — | --- # SYSTEM: Wanderstay Rentals Source: https://www.freedesignmd.com/system/wanderstay-rentals --- name: "Wanderstay Rentals" description: "Travel magazine that happens to be an app. Single-family typography, coral-pink accent reserved for primary CTAs, generous photography and 14–20px image radius." tags: [consumer, editorial, warm, marketplace] colors: primary: "#222222" secondary: "#6a6a6a" tertiary: "#ff385c" neutral: "#f7f7f7" surface: "#ffffff" typography: display: "Plus Jakarta Sans" body: "Plus Jakarta Sans" mono: "JetBrains Mono" scale: hero: "3.5rem / 1.18 / 700 / -0.7px" h1: "2.75rem / 1.18 / 700 / -0.55px" h2: "1.75rem / 1.43 / 700 / 0" body: "1rem / 1.25 / 500 / 0" radius: sm: 8px md: 14px lg: 20px pill: 9999px shadows: card: "rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px 0, rgba(0,0,0,0.1) 0 4px 8px 0" button: "rgba(255,56,92,0.22) 0 6px 16px -6px" borders: card: "1px solid #dddddd" divider: "#dddddd" buttons: primary: background: #ff385c color: #ffffff border: none shape: rounded padding: 14px 24px font: 600 shadow: rgba(255,56,92,0.22) 0 6px 16px -6px hover: scale secondary: background: #ffffff color: #222222 border: 1px solid #dddddd shape: pill padding: 12px 22px font: 600 hover: scale outline: background: transparent color: #222222 border: 1px solid #222222 shape: rounded padding: 12px 22px font: 600 ghost: background: transparent color: #222222 border: none shape: rounded padding: 10px 12px font: 600 hover: underline charts: variant: "rounded-bars" stroke_width: 2.5 fill_opacity: 0.18 gridlines: false bar_gap: 10px highlight: all dot_marker: true palette: ["#ffd1d8", "#ffadbd", "#ff7f95", "#ff5878", "#ff385c", "#e00b41", "#92174d"] fonts_url: "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Wanderstay Rentals ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Wanderstay Rentals** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#ff385c`, text `#ffffff`, padding `14px 24px`, weight `600`, shadow `rgba(255,56,92,0.22) 0 6px 16px -6px`. - **Secondary** — pill shape, bg `#ffffff`, text `#222222`, border `1px solid #dddddd`, padding `12px 22px`, weight `600`. - **Outline** — rounded shape, text `#222222`, border `1px solid #222222`, padding `12px 22px`, weight `600`. - **Ghost** — rounded shape, text `#222222`, padding `10px 12px`, weight `600`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#ffffff` - Border: `1px solid #dddddd` - Shadow: `rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px 0, rgba(0,0,0,0.1) 0 4px 8px 0` - Radius: `radius.lg` (`20px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `rounded-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `all` — emphasize a single bar/point per chart. - Use the declared palette in order: `#ffd1d8`, `#ffadbd`, `#ff7f95`, `#ff5878`, `#ff385c`, `#e00b41`, `#92174d`. #### Typography pairings - **Display (`Plus Jakarta Sans`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Plus Jakarta Sans`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Wanderstay feels like a travel magazine that happens to be an app — pristine white canvases give way to full-bleed photography, and the interface itself disappears so the listings can breathe. The signature **coral-pink** (`#ff385c`) is used sparingly but unmistakably: search CTA, active tab indicator, primary action button, the occasional price or wishlist heart. Everything else is a disciplined grayscale, with `#222222` carrying almost every line of text. What makes the system unmistakably Wanderstay is how much *faith* it places in content. Property photos are displayed at hero scale, 4:3 with edge-to-edge 14–20px radius. The category-tab pattern uses 3D rendered illustrated icons paired with crisp typographic labels — physical, tactile, almost toy-like, the rare consumer product where 3D renders and purely typographic UI coexist without tension. A **single-family typography system** carries every label, from 8px legal footnote to 28px section heading. The "regular" weight is 500, giving every paragraph a slightly more confident texture than the web default. Negative tracking only kicks in at display sizes (>20px); body stays at 0 tracking for readability. **Signature moves** - Coral-pink (`#ff385c`) as a *single*-accent brand color — primary CTAs only - Full-bleed photography at 4:3 / 16:9 with gentle 14–20px corner rounding - 3D rendered category icons paired with typographic tabs - Circular 50% icon buttons (back arrow, share, favorite) scattered throughout - Single-family typography — one variable sans carries 8px to 28px - 500 is the body weight (not 400) — subtle confidence in every paragraph - Three-layer subtle booking-panel shadow stack - No all-caps except at 8px superscript ## 2. Palette ### Primary - **Coral** `#ff385c` — primary CTA, search, active state, wishlist heart - **Deep Coral** `#e00b41` — pressed/active CTA states - **Plus Magenta** `#92174d` — premium tier accent - **Luxe Purple** `#460479` — luxury tier accent - **Info Blue** `#428bff` — legal links only ### Surface - **Canvas White** `#ffffff` — page, cards, containers - **Soft Cloud** `#f7f7f7` — footer, map wrapper, subsurface - **Hairline Gray** `#dddddd` — universal 1px border ### Neutrals - **Ink Black** `#222222` — ~90% of all text - Charcoal `#3f3f3f` · Ash Gray `#6a6a6a` · Mute `#929292` · Stone `#c1c1c1` ### Semantic - Error `#c13515` · Deep Error `#b32505` ## 3. Typography Single-family system. Weights observed: 500, 600, 700 — no 400 regular. | Role | Size | Weight | Leading | Tracking | |------|------|--------|---------|----------| | Section | 28px | 700 | 1.43 | 0 | | Subsection | 22px | 500 | 1.18 | -0.44px | | Card title | 21px | 700 | 1.43 | 0 | | Listing title | 20px | 600 | 1.20 | -0.18px | | Subtitle Bold | 16px | 600 | 1.25 | 0 | | Body Medium | 16px | 500 | 1.25 | 0 | | Button Large | 16px | 500 | 1.25 | 0 | | Button Default | 14px | 500 | 1.29 | 0 | | Link | 14px | 500 | 1.43 | 0 | | Caption Bold | 14px | 600 | 1.43 | 0 | | Micro | 12px | 400 | 1.33 | 0 | | Badge | 11px | 600 | 1.18 | 0 | | Superscript | 8px | 700 | 1.25 | +0.32px (uppercase) | **500 is the new 400.** Tight line-heights for headlines (1.18–1.25), generous for body (1.43). No all-caps except at 8px. ## 4. Buttons ### Primary CTA (Coral) ```css background: #ff385c; color: #ffffff; padding: 14px 24px; border-radius: 8px; ``` Active: `scale(0.92)` + 2px `#222222` focus ring. ### Secondary - Background `#ffffff`, text `#222222` - 1px `#dddddd` border, 20px (pill) or 8px radius ### Icon-Only Circular - 32–44px diameter, 50% radius - Background `#f2f2f2`, icon `#222222` outline 16–20px - Active `scale(0.92)` + 4px white ring on photo backgrounds ### Pill Tab (Category Selector) - Transparent, 8px 14px padding - Active: 2px Ink Black underline beneath the label ## 5. Cards ### Listing Card - Background `#ffffff`, **no shadow** - Image: 4:3, 14px radius, full-bleed - Metadata stacks below: city (16/600) → distance (14/500 ash) → date → price ### Booking Panel (the signature) - Background `#ffffff` - 14–20px radius, 1px `#dddddd` border - Three-layer shadow: `rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px 0, rgba(0,0,0,0.1) 0 4px 8px 0` - 24px padding, ~370px wide, sticky at 120–140px from top ## 6. Charts **Coral gradient bars** — each bar a step in the coral-magenta sweep (light coral → deep coral → magenta). The chart reads like a vacation density heatmap: warmer = more activity. Line charts use a 2.5px coral stroke with subtle fill, end-dot marker. ## 7. Spacing - Base: 8px - Scale: `2, 3, 4, 5.5, 6, 8, 10, 11, 12, 15, 16, 18.5, 22, 24, 32` - Section padding: 48–64px desktop, 24–32px mobile - Listing card gutter: 24px desktop, 16px mobile - Stacked text rows: 4–8px (very tight, dense info) ## 8. Depth & elevation | Level | Treatment | Use | |-------|-----------|-----| | 0 | Flat | Listing cards | | 1 | `1px #dddddd` border | Amenity rows, footer | | 2 | Subtle 3-layer stack | Booking panels | | 3 | Coral glow | Search button | ## 9. Do's & don'ts ✅ **Do** - Reserve coral (`#ff385c`) for primary CTAs and search only - Use 14–20px radius on all photography - Use 500 as the body weight — never 400 - Apply scale(0.92) on button press - Stick to single-family typography across all sizes ❌ **Don't** - Use coral decoratively — it loses its signal - Use sharp corners on photography - Use weight 400 for body - Apply all-caps except at 8px superscript - Use cool blue-grays — neutrals are warm-tinted --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#222222` | | secondary | `#6a6a6a` | | tertiary | `#ff385c` | | neutral | `#f7f7f7` | | surface | `#ffffff` | ### Typography - **Display:** Plus Jakarta Sans - **Body:** Plus Jakarta Sans - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 3.5rem / 1.18 / 700 / -0.7px | | H1 | 2.75rem / 1.18 / 700 / -0.55px | | H2 | 1.75rem / 1.43 / 700 / 0 | | Body | 1rem / 1.25 / 500 / 0 | ### Radius - sm: `8px` - md: `14px` - lg: `20px` - pill: `9999px` ### Shadows - **card:** `rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px 0, rgba(0,0,0,0.1) 0 4px 8px 0` - **button:** `rgba(255,56,92,0.22) 0 6px 16px -6px` ### Borders - **card:** `1px solid #dddddd` - **divider:** `#dddddd` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#ff385c` | | color | `#ffffff` | | border | `none` | | padding | `14px 24px` | | fontWeight | `600` | | shadow | `rgba(255,56,92,0.22) 0 6px 16px -6px` | | hoverHint | `scale` | #### Secondary | Property | Value | |----------|-------| | shape | `pill` | | background | `#ffffff` | | color | `#222222` | | border | `1px solid #dddddd` | | padding | `12px 22px` | | fontWeight | `600` | | hoverHint | `scale` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#222222` | | border | `1px solid #222222` | | padding | `12px 22px` | | fontWeight | `600` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#222222` | | border | `none` | | padding | `10px 12px` | | fontWeight | `600` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `rounded-bars` | | strokeWidth | `2.5` | | fillOpacity | `0.18` | | gridlines | `false` | | barGap | `10px` | | highlight | `all` | | dotMarker | `true` | | palette | `#ffd1d8`, `#ffadbd`, `#ff7f95`, `#ff5878`, `#ff385c`, `#e00b41`, `#92174d` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(255, 56, 92, 0.92)`, shadow: `0 4px 20px -8px rgba(255, 56, 92, 0.4)` - **focus** — outline: `1.5px solid #ff385c`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#222222`, color: `#ffffff` #### Input - **hover** — border: `1px solid #222222` - **focus** — border: `1px solid #ff385c`, shadow: `0 1px 0 0 #ff385c` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #222222` #### Tab - **hover** — color: `#222222` - **focus** — outline: `1.5px solid #ff385c`, outline-offset: `3px` - **selected** — color: `#ff385c`, border: `0 0 2px 0 solid #ff385c` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#ff385c`, underline `always` - **blockquote:** border `4px solid #ff385c`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(34, 34, 34, 0.06)`, color `#222222` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 15.91:1 | AA | AAA | — | | Body text on canvas | 14.85:1 | AA | AAA | — | | Muted text on surface | 5.41:1 | AA | AA | — | | Accent on surface | 3.52:1 | AA-Large | AA-Large | — | | Accent on canvas | 3.28:1 | AA-Large | AA-Large | — | --- # SYSTEM: Limepress Fintech Source: https://www.freedesignmd.com/system/limepress-fintech --- name: "Limepress Fintech" description: "Lime-bright fintech with weight-900 display at 0.85 line-height — billboard-density typography, dark-green-on-lime pill CTAs, ring-shadow depth." tags: [fintech, bold, warm, playful] colors: primary: "#0e0f0c" secondary: "#454745" tertiary: "#9fe870" neutral: "#e8ebe6" surface: "#ffffff" typography: display: "Archivo Black" body: Inter mono: "JetBrains Mono" scale: hero: "5.5rem / 0.85 / 900 / 0" h1: "4rem / 0.85 / 900 / 0" h2: "2.5rem / 0.85 / 900 / 0" body: "1.125rem / 1.44 / 600 / 0.18px" radius: sm: 10px md: 16px lg: 30px pill: 9999px shadows: card: "rgba(14,15,12,0.12) 0 0 0 1px" borders: card: "1px solid rgba(14,15,12,0.12)" divider: rgba(14,15,12,0.12) buttons: primary: background: #9fe870 color: #163300 border: none shape: pill padding: 12px 24px font: 600 hover: scale secondary: background: rgba(22,51,0,0.08) color: #0e0f0c border: none shape: pill padding: 10px 20px font: 600 hover: scale outline: background: #ffffff color: #0e0f0c border: none shape: pill padding: 10px 20px font: 600 shadow: rgba(14,15,12,0.12) 0 0 0 1px hover: scale ghost: background: rgba(211,242,192,0.4) color: #0e0f0c border: none shape: pill padding: 10px 16px font: 600 charts: variant: bars stroke_width: 3 fill_opacity: 0.2 gridlines: false bar_radius: "6px 6px 0 0" bar_gap: 12px highlight: single dot_marker: false fonts_url: "https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Limepress Fintech ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Limepress Fintech** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — pill shape, bg `#9fe870`, text `#163300`, padding `12px 24px`, weight `600`. - **Secondary** — pill shape, bg `rgba(22,51,0,0.08)`, text `#0e0f0c`, padding `10px 20px`, weight `600`. - **Outline** — pill shape, bg `#ffffff`, text `#0e0f0c`, padding `10px 20px`, weight `600`, shadow `rgba(14,15,12,0.12) 0 0 0 1px`. - **Ghost** — pill shape, bg `rgba(211,242,192,0.4)`, text `#0e0f0c`, padding `10px 16px`, weight `600`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#ffffff` - Border: `1px solid rgba(14,15,12,0.12)` - Shadow: `rgba(14,15,12,0.12) 0 0 0 1px` - Radius: `radius.lg` (`30px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `bars` - Bar radius: `6px 6px 0 0` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Archivo Black`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Limepress Fintech is the visual translation of "money without borders" — a bold, confident fintech surface that throws out corporate-blue convention in favor of a single, electric **lime-green** (`#9fe870`) accent paired with warm near-black (`#0e0f0c`). The page is a calm warm white, but the typography turns up the volume: display headlines run at weight **900** with a remarkable **0.85 line-height**, so the letters nearly stack on top of each other. The result reads like a protest sign — urgent, physical, impossible to ignore. The accent strategy is disciplined: lime green is reserved for primary CTAs, with **dark forest green** (`#163300`) as the contrasting button text. This nature-pairing feels alive and optimistic, completely unlike the saturated blues of legacy banking. Hover behavior is physical, not chromatic — buttons grow with `scale(1.05)` and compress to `scale(0.95)` on press. The button literally responds to your cursor like a tactile object. The body voice is Inter at weight **600** by default — confident, never light. Combined with OpenType `"calt"` (contextual alternates) on every text element, the whole system reads as one continuous, deliberate voice. **Signature moves** - Display weight 900 at 0.85 line-height — the densest type stack in the catalog - Lime Green (`#9fe870`) on `#163300` — nature-inspired CTA combo - Inter weight 600 as body default — never 400 - Scale(1.05) on hover, scale(0.95) on active — physical button motion - OpenType `"calt"` enabled globally - Pill buttons (9999px) and big rounded cards (30–40px) - **Ring shadow** (`0 0 0 1px`) as the entire elevation system — no soft blur ## 2. Palette ### Primary - **Near Black** `#0e0f0c` — text, dark sections (warm green undertone) - **Limepress Green** `#9fe870` — primary CTA, brand identity - **Dark Green** `#163300` — button label on green - **Light Mint** `#e2f6d5` — soft surface, badge - **Pastel Green** `#cdffad` — interactive hover accent ### Semantic - Positive `#054d28` · Danger `#d03238` · Warning `#ffd11a` - Background Cyan `rgba(56,200,255,0.10)` · Bright Orange `#ffc091` ### Neutral - Warm Dark `#454745` · Gray `#868685` · Light Surface `#e8ebe6` ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Display Mega | Display | 126px | 900 | 0.85 | 0 | | Display Hero | Display | 96px | 900 | 0.85 | 0 | | Section | Display | 64px | 900 | 0.85 | 0 | | Sub-heading | Display | 40px | 900 | 0.85 | 0 | | Card title | Body | 26px | 600 | 1.23 | -0.39px | | Feature | Body | 22px | 600 | 1.25 | -0.4px | | Body | Body | 18px | 400 | 1.44 | +0.18px | | Body Semibold | Body | 18px | 600 | 1.44 | -0.108px | | Button | Body | 18–22px | 600 | 1.00–1.44 | -0.108px | | Caption | Body | 14px | 400–600 | 1.50–1.86 | -0.084 to -0.108px | **Weight 900 is the identity.** Letters overlap vertically. Body weight is 600 (not 400) — confidence reads in every paragraph. ## 4. Buttons ### Primary Pill ```css background: #9fe870; color: #163300; padding: 12px 24px; border-radius: 9999px; ``` Hover: `scale(1.05)`. Active: `scale(0.95)`. ### Secondary Pill - Background `rgba(22,51,0,0.08)`, text `#0e0f0c` - 9999px radius, same scale animation ## 5. Cards - Background `#ffffff` - Radius: 16/30/40px - Border: `1px solid rgba(14,15,12,0.12)` or `1px solid #9fe870` - Shadow: `rgba(14,15,12,0.12) 0 0 0 1px` ring ## 6. Charts **Chunky lime bars with single-bar highlight, no gridlines** — flat, billboard-style. Line charts at 3px stroke with 20% lime fill: a confident, hand-drawn feel rather than a data-grid. ## 7. Spacing - Base: 8px - Scale: `1, 2, 3, 4, 5, 8, 10, 11, 12, 16, 18, 19, 20, 22, 24` ## 8. Depth & elevation | Level | Treatment | Use | |-------|-----------|-----| | 0 | Flat | Default | | 1 | `rgba(14,15,12,0.12) 0 0 0 1px` | Card border | | 2 | `rgb(134,134,133) 0 0 0 1px inset` | Input focus | **Ring shadow is the entire shadow system.** No blur shadows anywhere. ## 9. Do's & don'ts ✅ **Do** - Use weight 900 on display — the extreme weight IS the brand - Hold display line-height at 0.85 — never relax it - Lime CTAs only — `#9fe870` background, `#163300` text - Apply scale(1.05) hover and scale(0.95) active - Use Inter weight 600 as body default ❌ **Don't** - Use lighter weights for display — only 900 - Use lime as a large background — CTAs and small accents only - Skip the scale animation on buttons - Use blur shadows — ring shadows only --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#0e0f0c` | | secondary | `#454745` | | tertiary | `#9fe870` | | neutral | `#e8ebe6` | | surface | `#ffffff` | ### Typography - **Display:** Archivo Black - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 5.5rem / 0.85 / 900 / 0 | | H1 | 4rem / 0.85 / 900 / 0 | | H2 | 2.5rem / 0.85 / 900 / 0 | | Body | 1.125rem / 1.44 / 600 / 0.18px | ### Radius - sm: `10px` - md: `16px` - lg: `30px` - pill: `9999px` ### Shadows - **card:** `rgba(14,15,12,0.12) 0 0 0 1px` ### Borders - **card:** `1px solid rgba(14,15,12,0.12)` - **divider:** `rgba(14,15,12,0.12)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `pill` | | background | `#9fe870` | | color | `#163300` | | border | `none` | | padding | `12px 24px` | | fontWeight | `600` | | hoverHint | `scale` | #### Secondary | Property | Value | |----------|-------| | shape | `pill` | | background | `rgba(22,51,0,0.08)` | | color | `#0e0f0c` | | border | `none` | | padding | `10px 20px` | | fontWeight | `600` | | hoverHint | `scale` | #### Outline | Property | Value | |----------|-------| | shape | `pill` | | background | `#ffffff` | | color | `#0e0f0c` | | border | `none` | | padding | `10px 20px` | | fontWeight | `600` | | shadow | `rgba(14,15,12,0.12) 0 0 0 1px` | | hoverHint | `scale` | #### Ghost | Property | Value | |----------|-------| | shape | `pill` | | background | `rgba(211,242,192,0.4)` | | color | `#0e0f0c` | | border | `none` | | padding | `10px 16px` | | fontWeight | `600` | ### Charts | Property | Value | |----------|-------| | variant | `bars` | | strokeWidth | `3` | | fillOpacity | `0.2` | | gridlines | `false` | | barRadius | `6px 6px 0 0` | | barGap | `12px` | | highlight | `single` | | dotMarker | `false` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(159, 232, 112, 0.92)`, shadow: `0 4px 20px -8px rgba(159, 232, 112, 0.4)` - **focus** — outline: `1.5px solid #9fe870`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#0e0f0c`, color: `#ffffff` #### Input - **hover** — border: `1px solid #0e0f0c` - **focus** — border: `1px solid #9fe870`, shadow: `0 1px 0 0 #9fe870` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #0e0f0c` #### Tab - **hover** — color: `#0e0f0c` - **focus** — outline: `1.5px solid #9fe870`, outline-offset: `3px` - **selected** — color: `#9fe870`, border: `0 0 2px 0 solid #9fe870` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#9fe870`, underline `always` - **blockquote:** border `4px solid #9fe870`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(14, 15, 12, 0.06)`, color `#0e0f0c` ### Accessibility (WCAG 2.1) **Overall:** FAIL | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 19.23:1 | AA | AAA | — | | Body text on canvas | 15.98:1 | AA | AAA | — | | Muted text on surface | 9.37:1 | AA | AAA | — | | Accent on surface | 1.47:1 | AA-Large | FAIL | `#3f8115` → 4.81:1 (AA) | | Accent on canvas | 1.22:1 | AA-Large | FAIL | `#377012` → 5:1 (AA) | --- # SYSTEM: Kiln Craft Source: https://www.freedesignmd.com/system/kiln-craft --- name: "Kiln Craft" description: "Warm cream canvas with named swatch palette (matcha, lemon, ube, slushie). Display at -3.2px tracking, generous radii, multi-layer pressed-clay shadow." tags: [b2b, playful, warm, editorial] colors: primary: "#000000" secondary: "#9f9b93" tertiary: "#fbbd41" neutral: "#faf9f7" surface: "#ffffff" typography: display: Sora body: Sora mono: "Space Mono" scale: hero: "5rem / 1 / 600 / -3.2px" h1: "3.75rem / 1 / 600 / -2.4px" h2: "2.75rem / 1.1 / 600 / -1.32px" body: "1.125rem / 1.6 / 400 / -0.36px" radius: sm: 4px md: 12px lg: 24px pill: 1584px shadows: card: "rgba(0,0,0,0.1) 0 1px 1px, rgba(0,0,0,0.04) 0 -1px 1px inset, rgba(0,0,0,0.05) 0 -0.5px 1px" button: "rgb(0,0,0) -7px 7px" borders: card: "1px solid #dad4c8" divider: "#dad4c8" buttons: primary: background: #ffffff color: #000000 border: none shape: pill padding: 10px 18px font: 500 hover: tilt secondary: background: #fbbd41 color: #000000 border: none shape: pill padding: 10px 18px font: 500 hover: tilt outline: background: transparent color: #000000 border: 1px solid #717989 shape: sharp padding: 8px 14px font: 500 hover: tilt ghost: background: transparent color: #000000 border: 1px dashed #dad4c8 shape: rounded padding: 8px 14px font: 600 / 0.75rem / 1.08px uppercase: true charts: variant: "rounded-bars" stroke_width: 2.5 fill_opacity: 0.22 gridlines: false bar_radius: "8px 8px 0 0" bar_gap: 12px highlight: all dot_marker: true palette: ["#84e7a5", "#3bd3fd", "#fbbd41", "#fc7981", "#c1b0ff", "#01418d", "#078a52"] fonts_url: "https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap" dependencies: ["lucide-react"] --- # Kiln Craft ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Kiln Craft** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — pill shape, bg `#ffffff`, text `#000000`, padding `10px 18px`, weight `500`. - **Secondary** — pill shape, bg `#fbbd41`, text `#000000`, padding `10px 18px`, weight `500`. - **Outline** — sharp shape, text `#000000`, border `1px solid #717989`, padding `8px 14px`, weight `500`. - **Ghost** — rounded shape, text `#000000`, border `1px dashed #dad4c8`, padding `8px 14px`, weight `600`, uppercased. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#ffffff` - Border: `1px solid #dad4c8` - Shadow: `rgba(0,0,0,0.1) 0 1px 1px, rgba(0,0,0,0.04) 0 -1px 1px inset, rgba(0,0,0,0.05) 0 -0.5px 1px` - Radius: `radius.lg` (`24px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `rounded-bars` - Bar radius: `8px 8px 0 0` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `all` — emphasize a single bar/point per chart. - Use the declared palette in order: `#84e7a5`, `#3bd3fd`, `#fbbd41`, `#fc7981`, `#c1b0ff`, `#01418d`, `#078a52`. #### Typography pairings - **Display (`Sora`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Sora`)** — paragraphs, labels, button text, form inputs. - **Mono (`Space Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Kiln Craft is a warm, playful celebration of color that treats B2B software like a craft rather than an enterprise chore. The foundation is a **warm cream** background (`#faf9f7`) with **oat-toned borders** (`#dad4c8`, `#eee9df`) — every surface has the tactile quality of handmade paper. Against this artisanal canvas, a vivid named-swatch palette explodes: **Matcha** green, **Slushie** cyan, **Lemon** gold, **Ube** purple, **Pomegranate** pink, **Blueberry** navy, **Dragonfruit** magenta — each named like a juice-bar flavor, not an enterprise color token. The typography is anchored by a geometric sans loaded with **OpenType stylistic sets** that give the text a quirky, slightly off-kilter personality. At display scale (80px, weight 600), it uses aggressive **-3.2px** negative tracking that compresses headlines into punchy, billboard-like statements. A monospace companion (Space Mono) handles code and technical labels — craft meets tech. What makes Kiln Craft truly distinctive is its **playful hover micro-animations**: buttons rotate slightly (`rotateZ(-8deg)`), translate upward (`translateY(-80%)`), shift to a contrasting swatch color, and cast a **hard offset shadow** (`rgb(0,0,0) -7px 7px`) — a button literally tilts and jumps on interaction. Combined with generous radii (24px–40px), mixed solid + dashed borders, and a **multi-layer "pressed into clay" shadow** (downward + inset + edge), the whole system feels made by people who genuinely enjoy making things. **Signature moves** - Warm cream canvas (`#faf9f7`) with oat borders — artisanal, not clinical - Named swatch palette — Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry - Display tracking **-3.2px** at 80px — punchy compression - Playful hover: `rotateZ(-8deg)` + `translateY(-80%)` + hard offset shadow - Generous radii: **24px** cards, **40px** sections, **1584px** pills - Mixed solid + dashed borders - Multi-layer **pressed-clay shadow** with inset highlight - Uppercase labels with +1.08px tracking — wayfinding system ## 2. Palette ### Surface - **Warm Cream** `#faf9f7` — page background - **Pure White** `#ffffff` — cards, button surfaces - **Clay Black** `#000000` — text, headings ### Swatches (named) - Matcha `#84e7a5` / `#078a52` / `#02492a` - Slushie `#3bd3fd` / `#0089ad` - Lemon `#f8cc65` / `#fbbd41` / `#d08a11` / `#9d6a09` - Ube `#c1b0ff` / `#43089f` / `#32037d` - Pomegranate `#fc7981` - Blueberry `#01418d` ### Borders & Neutrals - Oat Border `#dad4c8` · Oat Light `#eee9df` · Cool Border `#e6e8ec` - Warm Silver `#9f9b93` · Warm Charcoal `#55534e` · Dark Charcoal `#333333` ### Shadows - **Clay Shadow** `rgba(0,0,0,0.1) 0 1px 1px, rgba(0,0,0,0.04) 0 -1px 1px inset, rgba(0,0,0,0.05) 0 -0.5px 1px` - **Hard Offset** (hover) `rgb(0,0,0) -7px 7px` ## 3. Typography | Role | Size | Weight | Leading | Tracking | |------|------|--------|---------|----------| | Display Hero | 80px | 600 | 1.00 | -3.2px | | Display 2 | 60px | 600 | 1.00 | -2.4px | | Section | 44px | 600 | 1.10 | -1.32px | | Card Heading | 32px | 600 | 1.10 | -0.64px | | Feature | 20px | 600 | 1.40 | -0.4px | | Body Large | 20px | 400 | 1.40 | 0 | | Body | 18px | 400 | 1.60 | -0.36px | | Body Standard | 16px | 400 | 1.50 | 0 | | Button | 16px | 500 | 1.50 | -0.16px | | Nav | 15px | 500 | 1.60 | 0 | | Caption | 14px | 400 | 1.50–1.60 | -0.14px | | Uppercase Label | 12px | 600 | 1.20 | **+1.08px** UPPERCASE | **Three weights, strict roles.** 600 (headings), 500 (UI), 400 (body). Aggressive negative tracking on display, generous body leading. ## 4. Buttons ### Primary (with playful hover) ```css background: transparent; color: #000; padding: 6.4px 12.8px; ``` Hover: background → swatch color, text white, `rotateZ(-8deg) translateY(-80%)`, hard shadow `rgb(0,0,0) -7px 7px`. ### White Solid - White background, black text, pill radius - Hover: oat-200 swatch + animated rotation ### Ghost Outlined - 1px solid `#717989`, 4px radius - Hover: pomegranate swatch + white text ## 5. Cards - White on cream canvas - Border: `1px solid #dad4c8` or `1px dashed #dad4c8` - Radius: 12 / 24 / 40px - Shadow: pressed-clay multi-layer ## 6. Charts **Multi-color swatch bars** — every bar a different swatch (Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry, Matcha-deep). The chart reads like a juice-bar flavor menu rather than a data grid. Rounded bar tops (8px), no gridlines, generous gap. ## 7. Spacing - Base 8px - Scale: `1, 2, 4, 6.4, 8, 12, 12.8, 16, 18, 20, 24` ## 8. Depth & elevation | Level | Treatment | Use | |-------|-----------|-----| | 0 | Flat cream | Page | | 1 | Clay Shadow (3-layer) | Cards, buttons | | 2 | Hard Offset `-7px 7px` | Hover state | | 3 | `rgb(20,110,245) solid 2px` | Focus | **Pressed into clay.** Elements feel both raised AND embedded — a clay tablet where content is stamped. The hover hard shadow is deliberately retro-graphic. ## 9. Do's & don'ts ✅ **Do** - Use warm cream (`#faf9f7`) — the warmth is the identity - Use named swatches for full sections — Matcha, Slushie, Lemon, Ube - Apply playful hover: `rotateZ(-8deg)` + `translateY(-80%)` + hard shadow - Use warm oat borders (`#dad4c8`) — never neutral gray - Mix solid + dashed borders - Use generous radius: 24px cards, 40px sections - Three weights only: 600 / 500 / 400 ❌ **Don't** - Use cool gray backgrounds — warm cream is non-negotiable - Use neutral gray borders (`#ccc`, `#ddd`) - Mix more than 2 swatches in one section - Use subtle hover effects — rotation + hard shadow is signature - Use small radius (<12px) on feature cards - Use blur-only shadows — Kiln uses multi-layer + inset - Forget uppercase labels with +1.08px tracking — wayfinding --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#000000` | | secondary | `#9f9b93` | | tertiary | `#fbbd41` | | neutral | `#faf9f7` | | surface | `#ffffff` | ### Typography - **Display:** Sora - **Body:** Sora - **Mono:** Space Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 5rem / 1 / 600 / -3.2px | | H1 | 3.75rem / 1 / 600 / -2.4px | | H2 | 2.75rem / 1.1 / 600 / -1.32px | | Body | 1.125rem / 1.6 / 400 / -0.36px | ### Radius - sm: `4px` - md: `12px` - lg: `24px` - pill: `1584px` ### Shadows - **card:** `rgba(0,0,0,0.1) 0 1px 1px, rgba(0,0,0,0.04) 0 -1px 1px inset, rgba(0,0,0,0.05) 0 -0.5px 1px` - **button:** `rgb(0,0,0) -7px 7px` ### Borders - **card:** `1px solid #dad4c8` - **divider:** `#dad4c8` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `pill` | | background | `#ffffff` | | color | `#000000` | | border | `none` | | padding | `10px 18px` | | fontWeight | `500` | | hoverHint | `tilt` | #### Secondary | Property | Value | |----------|-------| | shape | `pill` | | background | `#fbbd41` | | color | `#000000` | | border | `none` | | padding | `10px 18px` | | fontWeight | `500` | | hoverHint | `tilt` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#000000` | | border | `1px solid #717989` | | padding | `8px 14px` | | fontWeight | `500` | | hoverHint | `tilt` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#000000` | | border | `1px dashed #dad4c8` | | padding | `8px 14px` | | fontWeight | `600` | | fontSize | `0.75rem` | | tracking | `1.08px` | | uppercase | `true` | ### Charts | Property | Value | |----------|-------| | variant | `rounded-bars` | | strokeWidth | `2.5` | | fillOpacity | `0.22` | | gridlines | `false` | | barRadius | `8px 8px 0 0` | | barGap | `12px` | | highlight | `all` | | dotMarker | `true` | | palette | `#84e7a5`, `#3bd3fd`, `#fbbd41`, `#fc7981`, `#c1b0ff`, `#01418d`, `#078a52` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(251, 189, 65, 0.92)`, shadow: `0 4px 20px -8px rgba(251, 189, 65, 0.4)` - **focus** — outline: `1.5px solid #fbbd41`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#000000`, color: `#ffffff` #### Input - **hover** — border: `1px solid #000000` - **focus** — border: `1px solid #fbbd41`, shadow: `0 1px 0 0 #fbbd41` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #000000` #### Tab - **hover** — color: `#000000` - **focus** — outline: `1.5px solid #fbbd41`, outline-offset: `3px` - **selected** — color: `#fbbd41`, border: `0 0 2px 0 solid #fbbd41` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#fbbd41`, underline `always` - **blockquote:** border `4px solid #fbbd41`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(0, 0, 0, 0.06)`, color `#000000` ### Accessibility (WCAG 2.1) **Overall:** FAIL | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 21:1 | AA | AAA | — | | Body text on canvas | 19.96:1 | AA | AAA | — | | Muted text on surface | 2.77:1 | AA | FAIL | `#77726a` → 4.77:1 (AA) | | Accent on surface | 1.69:1 | AA-Large | FAIL | `#a06c03` → 4.52:1 (AA) | | Accent on canvas | 1.6:1 | AA-Large | FAIL | `#966503` → 4.8:1 (AA) | --- # SYSTEM: Magazine Bold Source: https://www.freedesignmd.com/system/magazine-bold --- name: "Magazine Bold" description: "High-contrast red, oversized Playfair headlines, dense editorial layout." tags: [editorial, playful] colors: primary: "#0A0A0A" secondary: "#5A5A5A" tertiary: "#DC2626" neutral: "#FFFFFF" surface: "#FAFAFA" typography: display: "Playfair Display" body: Inter mono: "JetBrains Mono" radius: sm: 2px md: 2px lg: 4px buttons: primary: background: #FF3D00 color: #FFFFFF border: none shape: sharp padding: 14px 28px font: display / 800 / 0.04em uppercase: true secondary: background: #000000 color: #FFFFFF border: none shape: sharp padding: 14px 28px font: display / 800 / 0.04em uppercase: true outline: background: transparent color: #000000 border: 3px solid #000000 shape: sharp padding: 12px 26px font: display / 800 / 0.04em uppercase: true ghost: background: transparent color: #FF3D00 border: none shape: sharp padding: 10px 0 font: display / 800 / 0.04em uppercase: true hover: underline charts: variant: "top-only" bar_radius: "3px 3px 0 0" bar_gap: 10px highlight: single fonts_url: "https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,900&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Magazine Bold ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Magazine Bold** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#FF3D00`, text `#FFFFFF`, padding `14px 28px`, weight `800`, uppercased. - **Secondary** — sharp shape, bg `#000000`, text `#FFFFFF`, padding `14px 28px`, weight `800`, uppercased. - **Outline** — sharp shape, text `#000000`, border `3px solid #000000`, padding `12px 26px`, weight `800`, uppercased. - **Ghost** — sharp shape, text `#FF3D00`, padding `10px 0`, weight `800`, uppercased. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FAFAFA` - Radius: `radius.lg` (`4px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. Tabs are uppercased with `0.06em` tracking. #### Charts - Bar/line variant: `top-only` - Bar radius: `3px 3px 0 0` - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Playfair Display`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview A high-contrast print-inspired system. Oversized serif headlines do the storytelling; red is reserved for moments of urgency or featured items. ## Colors - **Primary #0A0A0A** — text and rules. - **Secondary #5A5A5A** — bylines, captions. - **Tertiary #DC2626** — red. Featured tags, primary CTAs. - **Neutral #FFFFFF** — page. - **Surface #FAFAFA** — cards. ## Typography **Playfair Display** at large sizes (900 weight on h1) — let it breathe. **Inter** for body. ## Spacing 4px grid. 96px between sections. Use thin 1px rules to divide content. ## Components Near-zero radius (2px). No shadows. Buttons uppercase with red fill. ## Icons `lucide-react`, stroke width 1.5. Inherit text color, never red unless paired with a CTA. ## Do's and Don'ts - ✅ Make h1 huge — 5rem+ desktop. - ✅ Use italics on Playfair for editorial flair. - ❌ Don't use red on body text. - ❌ Don't soften with rounded corners. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#0A0A0A` | | secondary | `#5A5A5A` | | tertiary | `#DC2626` | | neutral | `#FFFFFF` | | surface | `#FAFAFA` | ### Typography - **Display:** Playfair Display - **Body:** Inter - **Mono:** JetBrains Mono ### Radius - sm: `2px` - md: `2px` - lg: `4px` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#FF3D00` | | color | `#FFFFFF` | | border | `none` | | padding | `14px 28px` | | fontFamily | `display` | | fontWeight | `800` | | tracking | `0.04em` | | uppercase | `true` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#000000` | | color | `#FFFFFF` | | border | `none` | | padding | `14px 28px` | | fontFamily | `display` | | fontWeight | `800` | | tracking | `0.04em` | | uppercase | `true` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#000000` | | border | `3px solid #000000` | | padding | `12px 26px` | | fontFamily | `display` | | fontWeight | `800` | | tracking | `0.04em` | | uppercase | `true` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#FF3D00` | | border | `none` | | padding | `10px 0` | | fontFamily | `display` | | fontWeight | `800` | | tracking | `0.04em` | | uppercase | `true` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `top-only` | | barRadius | `3px 3px 0 0` | | barGap | `10px` | | highlight | `single` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(220, 38, 38, 0.92)`, shadow: `0 4px 20px -8px rgba(220, 38, 38, 0.4)` - **focus** — outline: `1.5px solid #DC2626`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#0A0A0A`, color: `#FAFAFA` #### Input - **hover** — border: `1px solid #0A0A0A` - **focus** — border: `1px solid #DC2626`, shadow: `0 1px 0 0 #DC2626` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #0A0A0A` #### Tab - **hover** — color: `#0A0A0A` - **focus** — outline: `1.5px solid #DC2626`, outline-offset: `3px` - **selected** — color: `#DC2626`, border: `0 0 2px 0 solid #DC2626` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#DC2626`, underline `always` - **blockquote:** border `4px solid #DC2626`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(10, 10, 10, 0.06)`, color `#0A0A0A` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 18.97:1 | AA | AAA | — | | Body text on canvas | 19.8:1 | AA | AAA | — | | Muted text on surface | 6.61:1 | AA | AA | — | | Accent on surface | 4.63:1 | AA-Large | AA | — | | Accent on canvas | 4.83:1 | AA-Large | AA | — | --- # SYSTEM: Acid Chrome Source: https://www.freedesignmd.com/system/acid-chrome --- name: "Acid Chrome" description: "Liquid chrome and oil-slick iridescence on onyx — holographic gradients, polished metal CTAs, and prismatic accents. Y2K reborn as molten metal, not neon. Chrome is the color." tags: [dark, futuristic, premium, y2k, modern] colors: primary: "#F2F4F8" secondary: "#8089A0" tertiary: "#FF4DD8" neutral: "#06070C" surface: "#0E1018" typography: display: Syne body: Inter mono: "JetBrains Mono" scale: hero: "5rem / 1 / 700 / -0.035em" h1: "3rem / 1.05 / 700 / -0.03em" h2: "1.5rem / 1.2 / 600 / -0.015em" body: "1rem / 1.55 / 400 / -0.005em" radius: sm: 6px md: 12px lg: 20px pill: 9999px shadows: card: "0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 12px 32px -16px rgba(255, 77, 216, 0.18), 0 12px 32px -16px rgba(0, 229, 255, 0.14)" button: "inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 8px 24px -8px rgba(255, 77, 216, 0.30)" borders: card: "1px solid rgba(242, 244, 248, 0.10)" divider: "rgba(242, 244, 248, 0.06)" buttons: primary: background: linear-gradient(180deg, #F8FAFF 0%, #C4CCDA 45%, #6F7888 100%) color: #0A0C12 border: 1px solid rgba(255, 255, 255, 0.35) shape: pill padding: 13px 26px font: display / 700 / 0.9375rem / -0.005em shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 8px 24px -8px rgba(255, 77, 216, 0.30) secondary: background: linear-gradient(95deg, #FF4DD8 0%, #B14DFF 35%, #4D9FFF 70%, #00E5C2 100%) color: #06070C border: 1px solid rgba(255, 255, 255, 0.25) shape: pill padding: 13px 26px font: display / 700 / 0.9375rem / -0.005em shadow: 0 8px 24px -8px rgba(177, 77, 255, 0.40) outline: background: rgba(14, 16, 24, 0.60) color: #F2F4F8 border: 1px solid rgba(242, 244, 248, 0.22) shape: pill padding: 12px 24px font: body / 500 / 0.9375rem / -0.005em ghost: background: transparent color: #FF4DD8 border: none shape: pill padding: 11px 14px font: body / 600 / 0.9375rem / -0.005em hover: underline charts: variant: line stroke_width: 2 gridlines: false highlight: last dot_marker: true axis_color: "#5A6378" palette: ["#FF4DD8", "#B14DFF", "#4D9FFF", "#00E5C2"] fonts_url: "https://fonts.googleapis.com/css2?family=Syne:wght@500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Acid Chrome ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Acid Chrome** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — pill shape, bg `linear-gradient(180deg, #F8FAFF 0%, #C4CCDA 45%, #6F7888 100%)`, text `#0A0C12`, border `1px solid rgba(255, 255, 255, 0.35)`, padding `13px 26px`, weight `700`, shadow `inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 8px 24px -8px rgba(255, 77, 216, 0.30)`. - **Secondary** — pill shape, bg `linear-gradient(95deg, #FF4DD8 0%, #B14DFF 35%, #4D9FFF 70%, #00E5C2 100%)`, text `#06070C`, border `1px solid rgba(255, 255, 255, 0.25)`, padding `13px 26px`, weight `700`, shadow `0 8px 24px -8px rgba(177, 77, 255, 0.40)`. - **Outline** — pill shape, bg `rgba(14, 16, 24, 0.60)`, text `#F2F4F8`, border `1px solid rgba(242, 244, 248, 0.22)`, padding `12px 24px`, weight `500`. - **Ghost** — pill shape, text `#FF4DD8`, padding `11px 14px`, weight `600`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#0E1018` - Border: `1px solid rgba(242, 244, 248, 0.10)` - Shadow: `0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 12px 32px -16px rgba(255, 77, 216, 0.18), 0 12px 32px -16px rgba(0, 229, 255, 0.14)` - Radius: `radius.lg` (`20px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `pill`. Segmented control inside a tinted track. Active tab gets a filled pill in the accent color. Tabs are uppercased with `0.08em` tracking. #### Charts - Bar/line variant: `line` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#FF4DD8`, `#B14DFF`, `#4D9FFF`, `#00E5C2`. #### Typography pairings - **Display (`Syne`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Acid Chrome is Y2K rebuilt around polished metal instead of neon. Where Neon Y2K is sharp, glowing and electric, Acid Chrome is **molten, prismatic, and cool** — liquid chrome caps with cool top highlights and dark bottom relief, oil-slick iridescent secondary buttons, and a single hot magenta stop that drifts through the entire palette like an oil spill on wet asphalt. This is the language of luxury hardware launches, cyber fashion, music client work, and any product that wants to feel **expensive AND alien**. ## Atmosphere - Page canvas is **onyx #06070C** — deep blue-black with a microscopic cyan cast that makes chrome surfaces refract correctly. - Cards sit at **#0E1018** with a 10% pearl hairline border. The lift is two faint colored halos — magenta + cyan — at 18% / 14% opacity. Not a glow. A refraction. - The signature button is the **liquid chrome pill** — a vertical 3-stop silver gradient (pearl → steel → graphite) with a 55% white inner top highlight, 25% black inner bottom relief, and a soft magenta underglow. It reads like a polished aluminum cap caught under a single prismatic light. - The secondary is the **oil-slick pill** — a 95° horizontal sweep through magenta → violet → blue → mint. This is the only place in the system where the full prism appears. ## Color - **Pearl #F2F4F8** — primary text. Cool, slightly cyan. - **Iridescent Magenta #FF4DD8** — the prismatic accent stop. Used in card halos, ghost links, chart highlights. - **Pewter #8089A0** — secondary text, captions, axis labels. - **Onyx #06070C** — page canvas. - **Surface #0E1018** — card fallback. The oil-slick gradient stops (**#FF4DD8 → #B14DFF → #4D9FFF → #00E5C2**) appear only in: the secondary button, the chart line, and at most one decorative accent per page. Their scarcity is the system. ## Typography - **Display: Syne** at 5rem / 700, -3.5% tracking. Geometric futurism with character. - **Body: Inter** at 1rem for paragraphs and UI. - **Mono: JetBrains Mono** for spec callouts. | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | Syne | 5rem | 700 | -0.035em | | H1 | Syne | 3rem | 700 | -0.03em | | H2 | Syne | 1.5rem | 600 | -0.015em | | Body | Inter | 1rem | 400 | -0.005em | ## The Chrome Pill (signature) The primary CTA is the system's defining gesture. Build it with all four stacked effects: ```css .chrome-pill { background: linear-gradient(180deg, #F8FAFF 0%, #C4CCDA 45%, #6F7888 100%); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 9999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), /* cool top highlight */ inset 0 -1px 0 rgba(0, 0, 0, 0.25), /* dark bottom relief */ 0 8px 24px -8px rgba(255, 77, 216, 0.30); /* prismatic underglow */ color: #0A0C12; } ``` The double inset stroke is what sells the polished metal — never ship the chrome pill without both. ## The Oil-Slick Pill Secondary CTA. Use the 95° horizontal sweep — not vertical, not radial. The angle matters: it's the direction light travels across an oil spill on wet street. ## Buttons All four are pills. Sharp corners are forbidden in this system. - **Primary** — liquid chrome cap. Once per view, max. - **Secondary** — oil-slick iridescent sweep. Once per view, max. - **Outline** — onyx fill at 60% with a 22% pearl hairline. The everyday tertiary. - **Ghost** — bare iridescent magenta label, hover underline. ## Charts & Data A single 2px line over onyx. The line travels through the iridescent palette — magenta to cyan — with a small magenta dot at the latest value. No gridlines, no fills. Axis labels in pewter #5A6378. ## Do's and Don'ts - ✅ Always pair the chrome pill with both inset strokes (top white + bottom black). The double-stroke IS the metallic edge. - ✅ The oil-slick gradient appears in **at most three places per page**: the secondary button, the chart line, and one decorative accent. - ✅ Card halos are **two colored shadows at 14–18%**, not a glow. Refraction, not luminance. - ✅ Onyx (#06070C), not pure black. The cyan cast makes chrome read correctly. - ❌ No flat solid CTAs. The primary is always chrome; the secondary is always oil-slick. - ❌ No saturated single-color glows like Neon Y2K. The energy here is **prismatic**, not electric. - ❌ No serifs. No display fonts other than Syne. - ❌ No sharp corners on buttons. Pills only. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#F2F4F8` | | secondary | `#8089A0` | | tertiary | `#FF4DD8` | | neutral | `#06070C` | | surface | `#0E1018` | ### Typography - **Display:** Syne - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 5rem / 1 / 700 / -0.035em | | H1 | 3rem / 1.05 / 700 / -0.03em | | H2 | 1.5rem / 1.2 / 600 / -0.015em | | Body | 1rem / 1.55 / 400 / -0.005em | ### Radius - sm: `6px` - md: `12px` - lg: `20px` - pill: `9999px` ### Shadows - **card:** `0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 12px 32px -16px rgba(255, 77, 216, 0.18), 0 12px 32px -16px rgba(0, 229, 255, 0.14)` - **button:** `inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 8px 24px -8px rgba(255, 77, 216, 0.30)` ### Borders - **card:** `1px solid rgba(242, 244, 248, 0.10)` - **divider:** `rgba(242, 244, 248, 0.06)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `pill` | | background | `linear-gradient(180deg, #F8FAFF 0%, #C4CCDA 45%, #6F7888 100%)` | | color | `#0A0C12` | | border | `1px solid rgba(255, 255, 255, 0.35)` | | padding | `13px 26px` | | fontFamily | `display` | | fontWeight | `700` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | shadow | `inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 8px 24px -8px rgba(255, 77, 216, 0.30)` | #### Secondary | Property | Value | |----------|-------| | shape | `pill` | | background | `linear-gradient(95deg, #FF4DD8 0%, #B14DFF 35%, #4D9FFF 70%, #00E5C2 100%)` | | color | `#06070C` | | border | `1px solid rgba(255, 255, 255, 0.25)` | | padding | `13px 26px` | | fontFamily | `display` | | fontWeight | `700` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | shadow | `0 8px 24px -8px rgba(177, 77, 255, 0.40)` | #### Outline | Property | Value | |----------|-------| | shape | `pill` | | background | `rgba(14, 16, 24, 0.60)` | | color | `#F2F4F8` | | border | `1px solid rgba(242, 244, 248, 0.22)` | | padding | `12px 24px` | | fontFamily | `body` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Ghost | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#FF4DD8` | | border | `none` | | padding | `11px 14px` | | fontFamily | `body` | | fontWeight | `600` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `line` | | strokeWidth | `2` | | gridlines | `false` | | highlight | `last` | | dotMarker | `true` | | axisColor | `#5A6378` | | palette | `#FF4DD8`, `#B14DFF`, `#4D9FFF`, `#00E5C2` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `4px 6px 0 0 #F2F4F8`, transform: `translateY(-2px) rotate(-1deg)` - **focus** — outline: `3px solid #FF4DD8`, outline-offset: `3px` - **active** — shadow: `1px 2px 0 0 #F2F4F8`, transform: `translateY(1px) scale(0.96)` - **disabled** — opacity: `0.4` - **loading** — opacity: `0.7` - **selected** — bg: `#FF4DD8`, color: `#F2F4F8`, transform: `rotate(-2deg)` #### Input - **hover** — border: `2px solid #FF4DD8` - **focus** — border: `2px solid #FF4DD8`, shadow: `3px 3px 0 0 #FF4DD8` - **disabled** — opacity: `0.4` - **error** — border: `2px solid #EF4444`, shadow: `3px 3px 0 0 #EF4444` #### Card - **hover** — shadow: `6px 8px 0 0 #F2F4F8`, transform: `translateY(-4px) rotate(-1deg)` - **selected** — border: `2px solid #FF4DD8`, transform: `rotate(-1deg)` - **dragging** — transform: `rotate(-3deg) scale(1.05)`, opacity: `0.85` #### Tab - **hover** — color: `#FF4DD8`, transform: `translateY(-1px)` - **focus** — outline: `3px solid #FF4DD8`, outline-offset: `2px` - **selected** — bg: `#FF4DD8`, color: `#F2F4F8`, transform: `rotate(-1deg)` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Bounce.** Exaggerated spring easing with a slight rotational tilt. Every interaction feels physical and playful. ```css transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1); ``` | Token | Value | |-------|-------| | duration.instant | `100ms` | | duration.fast | `200ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.34, 1.56, 0.64, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 2, 0.4, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the tone separates. | | level1 | `2px 3px 0 0 #F2F4F8` | Hard offset, slight shift. | | level2 | `4px 6px 0 0 #F2F4F8` | Cards — visible offset. | | level3 | `6px 8px 0 0 #F2F4F8` | Dialog — strong offset. | | level4 | `8px 12px 0 0 #F2F4F8` | Modal — maximum offset, scrim required. | ### Content - **measure:** `62ch` (max line length for body prose) - **paragraph spacing:** `1.25em` - **list indent:** `1.5em` - **list gap:** `0.55em` - **link:** color `#FF4DD8`, underline `always` - **blockquote:** border `3px solid #FF4DD8`, padding `0.8em 1.2em` - **code:** background `#FF4DD8`, color `#F2F4F8` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 17.24:1 | AA | AAA | — | | Body text on canvas | 18.28:1 | AA | AAA | — | | Muted text on surface | 5.43:1 | AA | AA | — | | Accent on surface | 6.61:1 | AA-Large | AA | — | | Accent on canvas | 7:1 | AA-Large | AAA | — | --- # SYSTEM: Neo-Memphis Source: https://www.freedesignmd.com/system/neo-memphis --- name: "Neo-Memphis" description: "1980s Memphis Group revival — primary red, electric blue, and chrome yellow squiggling across cream paper. Hand-drawn shapes, chunky geometric sans, hard black borders, zero gradients." tags: [playful, maximalist, retro, geometric] colors: primary: "#0E0E0E" secondary: "#5A5A5A" tertiary: "#E63946" neutral: "#F4EFD8" surface: "#FBF7E5" typography: display: "Archivo Black" body: "DM Sans" mono: "Space Mono" scale: hero: "5.5rem / 0.95 / 900 / -0.04em" h1: "3rem / 1 / 900 / -0.03em" h2: "1.375rem / 1.2 / 700 / 0" body: "1.0625rem / 1.5 / 400 / 0" radius: sm: 0 md: 2px lg: 4px pill: 9999px shadows: card: "4px 4px 0 #0E0E0E" button: "3px 3px 0 #0E0E0E" borders: card: "2px solid #0E0E0E" divider: "rgba(14, 14, 14, 0.20)" buttons: primary: background: #E63946 color: #F4EFD8 border: 3px solid #0E0E0E shape: rounded padding: 14px 24px font: display / 900 / 0.9375rem / 0.04em uppercase: true shadow: 4px 4px 0 #0E0E0E secondary: background: #1B6CD9 color: #F4EFD8 border: 3px solid #0E0E0E shape: rounded padding: 14px 24px font: display / 900 / 0.9375rem / 0.04em uppercase: true shadow: 4px 4px 0 #0E0E0E outline: background: #F4C20D color: #0E0E0E border: 3px solid #0E0E0E shape: rounded padding: 14px 24px font: display / 900 / 0.9375rem / 0.04em uppercase: true shadow: 4px 4px 0 #0E0E0E ghost: background: transparent color: #0E0E0E border: none shape: sharp padding: 10px 4px font: display / 900 / 0.875rem / 0.06em uppercase: true hover: underline charts: variant: bars gridlines: false bar_radius: 0 bar_gap: 12px highlight: all axis_color: "#5A5A5A" palette: ["#E63946", "#1B6CD9", "#F4C20D", "#0E0E0E", "#E63946", "#1B6CD9", "#F4C20D"] fonts_url: "https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Sans:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap" dependencies: ["lucide-react"] --- # Neo-Memphis ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Neo-Memphis** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#E63946`, text `#F4EFD8`, border `3px solid #0E0E0E`, padding `14px 24px`, weight `900`, uppercased, shadow `4px 4px 0 #0E0E0E`. - **Secondary** — rounded shape, bg `#1B6CD9`, text `#F4EFD8`, border `3px solid #0E0E0E`, padding `14px 24px`, weight `900`, uppercased, shadow `4px 4px 0 #0E0E0E`. - **Outline** — rounded shape, bg `#F4C20D`, text `#0E0E0E`, border `3px solid #0E0E0E`, padding `14px 24px`, weight `900`, uppercased, shadow `4px 4px 0 #0E0E0E`. - **Ghost** — sharp shape, text `#0E0E0E`, padding `10px 4px`, weight `900`, uppercased. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FBF7E5` - Border: `2px solid #0E0E0E` - Shadow: `4px 4px 0 #0E0E0E` - Radius: `radius.lg` (`4px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `bars` - Bar radius: `0` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `all` — emphasize a single bar/point per chart. - Use the declared palette in order: `#E63946`, `#1B6CD9`, `#F4C20D`, `#0E0E0E`, `#E63946`, `#1B6CD9`, `#F4C20D`. #### Typography pairings - **Display (`Archivo Black`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`DM Sans`)** — paragraphs, labels, button text, form inputs. - **Mono (`Space Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Neo-Memphis is the 1980s Memphis Group reanimated for product UI — chunky geometric sans, hard black borders, primary-color shapes, and offset block shadows. Where Risograph Press is two-color print on cream, Neo-Memphis is **four-color poster-loud** on the same paper: red, electric blue, chrome yellow, and pure ink, fighting for attention without ever apologizing. This system is for kids' apps, music platforms, festival sites, fashion drops, creator tools, and brands that refuse to be quiet. ## Color (the trinity + ink) - **Memphis Red #E63946** — primary CTA fill. The loudest voice. - **Electric Blue #1B6CD9** — secondary CTA, accent shapes, highlight blocks. - **Chrome Yellow #F4C20D** — outline buttons, callouts, decorative tiles. Use sparingly — yellow earns its loudness by being rare. - **Ink #0E0E0E** — every border, every shadow, body text. The structural skeleton. Background is **cream #F4EFD8** — never pure white. Memphis was always printed, and printed paper is always warm. ## Typography - **Display: Archivo Black** at 5.5rem / 900, -4% tracking. Chunky, geometric, posterized. - **Body: DM Sans** at 1.0625rem for paragraphs and UI. Geometric companion. - **Mono: Space Mono** for captions and labels. Playful typewriter rhythm. | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | Archivo Black | 5.5rem | 900 | -0.04em | | H1 | Archivo Black | 3rem | 900 | -0.03em | | H2 | DM Sans | 1.375rem | 700 | 0 | | Body | DM Sans | 1.0625rem | 400 | 0 | | Label | Archivo Black | 0.875rem | 900 | +0.06em UPPER | ## Buttons All buttons share the same anatomy: **3px ink border + 4px ink offset shadow**. The variants change only by fill color. - **Primary** — Memphis red. The single loudest action per screen. - **Secondary** — electric blue. Equal weight to primary, different intent. - **Outline** — chrome yellow tile. For tertiary loud calls; the yellow is the warning flag. - **Ghost** — bare ink uppercase, hover underline. For inline links. **Pills are forbidden on action buttons.** Sharp 4px corners only. The block shadow IS the system. ## Cards **2px ink border + 4px ink offset shadow** on cream surface. No drop shadows ever — Memphis used physical paper offsets, never glow. Radius is **4px maximum**, often 0. ## Memphis Decoration The system permits — encourages — decorative geometric shapes scattered across the page: - Small filled circles in chrome yellow. - Squiggle lines in electric blue. - Triangular ink confetti. Use these as **background accents only**, never as buttons. They are the visual jazz that defined Memphis posters. ## Charts & Data Chunky bars in **rotating trinity** — red, blue, yellow, ink, repeat. Sharp 0px corners, 12px gap, no gridlines. Axis labels in mid graphite. Reads like a 1986 magazine infographic. ## Do's and Don'ts - ✅ Always use the offset ink shadow on cards and buttons. No exceptions. - ✅ Borders are **3px on buttons, 2px on cards**, always pure ink. - ✅ Cream background — never pure white. - ✅ Geometric shapes scattered as background decoration are encouraged. - ❌ No gradients anywhere. Memphis is **flat color or nothing**. - ❌ No glow, no drop-shadow blur. Only crisp offset blocks. - ❌ No more than one Memphis red CTA per view. Red earns its loudness by being rare. - ❌ No serif anywhere. The geometry is the voice. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#0E0E0E` | | secondary | `#5A5A5A` | | tertiary | `#E63946` | | neutral | `#F4EFD8` | | surface | `#FBF7E5` | ### Typography - **Display:** Archivo Black - **Body:** DM Sans - **Mono:** Space Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 5.5rem / 0.95 / 900 / -0.04em | | H1 | 3rem / 1 / 900 / -0.03em | | H2 | 1.375rem / 1.2 / 700 / 0 | | Body | 1.0625rem / 1.5 / 400 / 0 | ### Radius - sm: `0` - md: `2px` - lg: `4px` - pill: `9999px` ### Shadows - **card:** `4px 4px 0 #0E0E0E` - **button:** `3px 3px 0 #0E0E0E` ### Borders - **card:** `2px solid #0E0E0E` - **divider:** `rgba(14, 14, 14, 0.20)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#E63946` | | color | `#F4EFD8` | | border | `3px solid #0E0E0E` | | padding | `14px 24px` | | fontFamily | `display` | | fontWeight | `900` | | fontSize | `0.9375rem` | | tracking | `0.04em` | | uppercase | `true` | | shadow | `4px 4px 0 #0E0E0E` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#1B6CD9` | | color | `#F4EFD8` | | border | `3px solid #0E0E0E` | | padding | `14px 24px` | | fontFamily | `display` | | fontWeight | `900` | | fontSize | `0.9375rem` | | tracking | `0.04em` | | uppercase | `true` | | shadow | `4px 4px 0 #0E0E0E` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `#F4C20D` | | color | `#0E0E0E` | | border | `3px solid #0E0E0E` | | padding | `14px 24px` | | fontFamily | `display` | | fontWeight | `900` | | fontSize | `0.9375rem` | | tracking | `0.04em` | | uppercase | `true` | | shadow | `4px 4px 0 #0E0E0E` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#0E0E0E` | | border | `none` | | padding | `10px 4px` | | fontFamily | `display` | | fontWeight | `900` | | fontSize | `0.875rem` | | tracking | `0.06em` | | uppercase | `true` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `bars` | | gridlines | `false` | | barRadius | `0` | | barGap | `12px` | | highlight | `all` | | axisColor | `#5A5A5A` | | palette | `#E63946`, `#1B6CD9`, `#F4C20D`, `#0E0E0E`, `#E63946`, `#1B6CD9`, `#F4C20D` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `4px 6px 0 0 #0E0E0E`, transform: `translateY(-2px) rotate(-1deg)` - **focus** — outline: `3px solid #E63946`, outline-offset: `3px` - **active** — shadow: `1px 2px 0 0 #0E0E0E`, transform: `translateY(1px) scale(0.96)` - **disabled** — opacity: `0.4` - **loading** — opacity: `0.7` - **selected** — bg: `#E63946`, color: `#0E0E0E`, transform: `rotate(-2deg)` #### Input - **hover** — border: `2px solid #E63946` - **focus** — border: `2px solid #E63946`, shadow: `3px 3px 0 0 #E63946` - **disabled** — opacity: `0.4` - **error** — border: `2px solid #EF4444`, shadow: `3px 3px 0 0 #EF4444` #### Card - **hover** — shadow: `6px 8px 0 0 #0E0E0E`, transform: `translateY(-4px) rotate(-1deg)` - **selected** — border: `2px solid #E63946`, transform: `rotate(-1deg)` - **dragging** — transform: `rotate(-3deg) scale(1.05)`, opacity: `0.85` #### Tab - **hover** — color: `#E63946`, transform: `translateY(-1px)` - **focus** — outline: `3px solid #E63946`, outline-offset: `2px` - **selected** — bg: `#E63946`, color: `#0E0E0E`, transform: `rotate(-1deg)` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Bounce.** Exaggerated spring easing with a slight rotational tilt. Every interaction feels physical and playful. ```css transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1); ``` | Token | Value | |-------|-------| | duration.instant | `100ms` | | duration.fast | `200ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.34, 1.56, 0.64, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 2, 0.4, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the tone separates. | | level1 | `2px 3px 0 0 #0E0E0E` | Hard offset, slight shift. | | level2 | `4px 6px 0 0 #0E0E0E` | Cards — visible offset. | | level3 | `6px 8px 0 0 #0E0E0E` | Dialog — strong offset. | | level4 | `8px 12px 0 0 #0E0E0E` | Modal — maximum offset, scrim required. | ### Content - **measure:** `62ch` (max line length for body prose) - **paragraph spacing:** `1.25em` - **list indent:** `1.5em` - **list gap:** `0.55em` - **link:** color `#E63946`, underline `always` - **blockquote:** border `3px solid #E63946`, padding `0.8em 1.2em` - **code:** background `#E63946`, color `#0E0E0E` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 17.96:1 | AA | AAA | — | | Body text on canvas | 16.72:1 | AA | AAA | — | | Muted text on surface | 6.42:1 | AA | AA | — | | Accent on surface | 3.88:1 | AA-Large | AA-Large | — | | Accent on canvas | 3.61:1 | AA-Large | AA-Large | — | --- # SYSTEM: Neon Y2K Source: https://www.freedesignmd.com/system/neon-y2k --- name: "Neon Y2K" description: "Hot magenta and cyber-lime on absolute black. Oversized monospace, chrome gradients, hard-edged buttons, glowing accents. Built for clubs and clients with attitude." tags: [dark, maximalist, y2k, playful, modern] colors: primary: "#EAF2FF" secondary: "#7B86A8" tertiary: "#FF2E97" neutral: "#000000" surface: "#0A0A12" typography: display: "JetBrains Mono" body: "Space Grotesk" mono: "JetBrains Mono" scale: hero: "5rem / 1 / 700 / -0.02em" h1: "3rem / 1.05 / 700 / -0.015em" h2: "1.25rem / 1.2 / 600 / 0.04em" body: "1rem / 1.55 / 400 / 0" radius: sm: 0 md: 2px lg: 4px shadows: card: "0 0 0 1px rgba(255, 46, 151, 0.20), 0 12px 32px -12px rgba(255, 46, 151, 0.30)" button: "0 0 24px -4px rgba(204, 255, 0, 0.55), 0 0 0 1px rgba(204, 255, 0, 0.40)" borders: card: "1px solid rgba(255, 46, 151, 0.20)" divider: "rgba(0, 229, 255, 0.20)" buttons: primary: background: linear-gradient(180deg, #DDFF66 0%, #B8E600 100%) color: #000000 border: 1px solid #CCFF00 shape: sharp padding: 12px 22px font: mono / 700 / 0.875rem / 0.10em uppercase: true shadow: 0 0 24px -4px rgba(204, 255, 0, 0.55), 0 0 0 1px rgba(204, 255, 0, 0.40) hover: glow secondary: background: #0A0A12 color: #FF2E97 border: 1px solid #FF2E97 shape: sharp padding: 12px 22px font: mono / 700 / 0.875rem / 0.10em uppercase: true shadow: 0 0 16px -4px rgba(255, 46, 151, 0.50) outline: background: transparent color: #EAF2FF border: 1px solid rgba(234, 242, 255, 0.25) shape: sharp padding: 12px 22px font: mono / 600 / 0.875rem / 0.10em uppercase: true ghost: background: transparent color: #00E5FF border: none shape: sharp padding: 10px 4px font: mono / 600 / 0.8125rem / 0.12em uppercase: true hover: underline charts: variant: "thin-bars" gridlines: false bar_radius: 0 bar_gap: 10px highlight: all axis_color: "#7B86A8" palette: ["#FF2E97", "#CCFF00", "#00E5FF", "#FF2E97", "#CCFF00", "#00E5FF", "#FF2E97"] fonts_url: "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" dependencies: ["lucide-react"] --- # Neon Y2K ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Neon Y2K** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `linear-gradient(180deg, #DDFF66 0%, #B8E600 100%)`, text `#000000`, border `1px solid #CCFF00`, padding `12px 22px`, weight `700`, uppercased, shadow `0 0 24px -4px rgba(204, 255, 0, 0.55), 0 0 0 1px rgba(204, 255, 0, 0.40)`. - **Secondary** — sharp shape, bg `#0A0A12`, text `#FF2E97`, border `1px solid #FF2E97`, padding `12px 22px`, weight `700`, uppercased, shadow `0 0 16px -4px rgba(255, 46, 151, 0.50)`. - **Outline** — sharp shape, text `#EAF2FF`, border `1px solid rgba(234, 242, 255, 0.25)`, padding `12px 22px`, weight `600`, uppercased. - **Ghost** — sharp shape, text `#00E5FF`, padding `10px 4px`, weight `600`, uppercased. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#0A0A12` - Border: `1px solid rgba(255, 46, 151, 0.20)` - Shadow: `0 0 0 1px rgba(255, 46, 151, 0.20), 0 12px 32px -12px rgba(255, 46, 151, 0.30)` - Radius: `radius.lg` (`4px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `brutalist`. Hard rectangular tabs with thick borders. Active tab is fully filled in the primary color. Tabs are uppercased with `0.1em` tracking. #### Charts - Bar/line variant: `thin-bars` - Bar radius: `0` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `all` — emphasize a single bar/point per chart. - Use the declared palette in order: `#FF2E97`, `#CCFF00`, `#00E5FF`, `#FF2E97`, `#CCFF00`, `#00E5FF`, `#FF2E97`. #### Typography pairings - **Display (`JetBrains Mono`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Space Grotesk`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Neon Y2K is loud. It is loud on purpose. Three accents — **hot magenta #FF2E97**, **cyber lime #CCFF00**, **CRT cyan #00E5FF** — burn against absolute black, each with a defined role. The display font is oversized monospace at +10% tracking; the body is Space Grotesk for geometric edge. Corners are sharp. Glows are real. This is a system for product launches, club nights, music landings, and brands who want to be seen from across the room. ## Color (the trinity) - **Magenta #FF2E97** — secondary buttons, card border halos, primary brand accent. The everyday energy. - **Lime #CCFF00** — the primary CTA gradient. Used once per screen, max. The weapon. - **Cyan #00E5FF** — ghost links, dividers, tertiary highlights. The cool counterweight. Black is **pure #000000**. Surfaces sit at **#0A0A12** — a microscopic blue cast so cards lift without leaving the void. ## Typography - **Display: JetBrains Mono** at 5rem / 700, -2% tracking. Uppercase headlines run +4% to +10% depending on size. - **Body: Space Grotesk** at 1rem for paragraphs and UI labels. - **Mono is the lead.** Body is the supporting cast. | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | Mono | 5rem | 700 | -0.02em | | H1 | Mono | 3rem | 700 | -0.015em | | H2 | Body | 1.25rem | 600 | +0.04em UPPER | | Body | Body | 1rem | 400 | 0 | | Label | Mono | 0.875rem | 700 | +0.10em UPPER | ## Buttons - **Primary** — chrome-lime gradient (180° lime to deep-lime), 1px lime border, **24px lime glow** + 1px ring. Sharp corners, mono uppercase, +10% tracking. The single loudest element on any screen. - **Secondary** — void fill with **magenta neon outline** + 16px magenta glow. Use for high-engagement secondary calls. - **Outline** — cool blue-white 25% hairline, no glow. Tertiary actions. - **Ghost** — cyan mono label, hover underline. For chrome and inline links. All buttons are **sharp** (0–4px radius). Pills are forbidden — they don't belong in the Y2K language. ## Cards **Surface #0A0A12** with a **1px magenta-20% border** and a **12px magenta drop-shadow at 30% opacity**. The card looks lit from within. Radius is **4px maximum**. ## Charts & Data Bars rotate through the trinity — magenta, lime, cyan, repeat. No gridlines (the void is the grid). Bar gap 10px. Sharp 0px corners. Axis labels in cool blue-grey #7B86A8. ## Do's and Don'ts - ✅ Use the trinity: magenta + lime + cyan. Each has a defined role; don't substitute. - ✅ Glow your primary CTA. The 24px lime halo is the system's signature. - ✅ Keep monospace as the display family. It IS the Y2K voice. - ✅ Sharp corners. 0px on bars, 0–4px on everything else. - ❌ No pill buttons. No rounded cards above 4px. - ❌ No body text in any of the three accents — they're for action and signal only. - ❌ No more than one lime CTA per view. Lime earns its loudness by being rare. - ❌ No drop-shadow without a colored ring underneath. The combo is what makes it look lit. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#EAF2FF` | | secondary | `#7B86A8` | | tertiary | `#FF2E97` | | neutral | `#000000` | | surface | `#0A0A12` | ### Typography - **Display:** JetBrains Mono - **Body:** Space Grotesk - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 5rem / 1 / 700 / -0.02em | | H1 | 3rem / 1.05 / 700 / -0.015em | | H2 | 1.25rem / 1.2 / 600 / 0.04em | | Body | 1rem / 1.55 / 400 / 0 | ### Radius - sm: `0` - md: `2px` - lg: `4px` ### Shadows - **card:** `0 0 0 1px rgba(255, 46, 151, 0.20), 0 12px 32px -12px rgba(255, 46, 151, 0.30)` - **button:** `0 0 24px -4px rgba(204, 255, 0, 0.55), 0 0 0 1px rgba(204, 255, 0, 0.40)` ### Borders - **card:** `1px solid rgba(255, 46, 151, 0.20)` - **divider:** `rgba(0, 229, 255, 0.20)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `linear-gradient(180deg, #DDFF66 0%, #B8E600 100%)` | | color | `#000000` | | border | `1px solid #CCFF00` | | padding | `12px 22px` | | fontFamily | `mono` | | fontWeight | `700` | | fontSize | `0.875rem` | | tracking | `0.10em` | | uppercase | `true` | | shadow | `0 0 24px -4px rgba(204, 255, 0, 0.55), 0 0 0 1px rgba(204, 255, 0, 0.40)` | | hoverHint | `glow` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#0A0A12` | | color | `#FF2E97` | | border | `1px solid #FF2E97` | | padding | `12px 22px` | | fontFamily | `mono` | | fontWeight | `700` | | fontSize | `0.875rem` | | tracking | `0.10em` | | uppercase | `true` | | shadow | `0 0 16px -4px rgba(255, 46, 151, 0.50)` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#EAF2FF` | | border | `1px solid rgba(234, 242, 255, 0.25)` | | padding | `12px 22px` | | fontFamily | `mono` | | fontWeight | `600` | | fontSize | `0.875rem` | | tracking | `0.10em` | | uppercase | `true` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#00E5FF` | | border | `none` | | padding | `10px 4px` | | fontFamily | `mono` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.12em` | | uppercase | `true` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | gridlines | `false` | | barRadius | `0` | | barGap | `10px` | | highlight | `all` | | axisColor | `#7B86A8` | | palette | `#FF2E97`, `#CCFF00`, `#00E5FF`, `#FF2E97`, `#CCFF00`, `#00E5FF`, `#FF2E97` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `4px 6px 0 0 #EAF2FF`, transform: `translateY(-2px) rotate(-1deg)` - **focus** — outline: `3px solid #FF2E97`, outline-offset: `3px` - **active** — shadow: `1px 2px 0 0 #EAF2FF`, transform: `translateY(1px) scale(0.96)` - **disabled** — opacity: `0.4` - **loading** — opacity: `0.7` - **selected** — bg: `#FF2E97`, color: `#EAF2FF`, transform: `rotate(-2deg)` #### Input - **hover** — border: `2px solid #FF2E97` - **focus** — border: `2px solid #FF2E97`, shadow: `3px 3px 0 0 #FF2E97` - **disabled** — opacity: `0.4` - **error** — border: `2px solid #EF4444`, shadow: `3px 3px 0 0 #EF4444` #### Card - **hover** — shadow: `6px 8px 0 0 #EAF2FF`, transform: `translateY(-4px) rotate(-1deg)` - **selected** — border: `2px solid #FF2E97`, transform: `rotate(-1deg)` - **dragging** — transform: `rotate(-3deg) scale(1.05)`, opacity: `0.85` #### Tab - **hover** — color: `#FF2E97`, transform: `translateY(-1px)` - **focus** — outline: `3px solid #FF2E97`, outline-offset: `2px` - **selected** — bg: `#FF2E97`, color: `#EAF2FF`, transform: `rotate(-1deg)` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Bounce.** Exaggerated spring easing with a slight rotational tilt. Every interaction feels physical and playful. ```css transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1); ``` | Token | Value | |-------|-------| | duration.instant | `100ms` | | duration.fast | `200ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.34, 1.56, 0.64, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 2, 0.4, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the tone separates. | | level1 | `2px 3px 0 0 #EAF2FF` | Hard offset, slight shift. | | level2 | `4px 6px 0 0 #EAF2FF` | Cards — visible offset. | | level3 | `6px 8px 0 0 #EAF2FF` | Dialog — strong offset. | | level4 | `8px 12px 0 0 #EAF2FF` | Modal — maximum offset, scrim required. | ### Content - **measure:** `62ch` (max line length for body prose) - **paragraph spacing:** `1.25em` - **list indent:** `1.5em` - **list gap:** `0.55em` - **link:** color `#FF2E97`, underline `always` - **blockquote:** border `3px solid #FF2E97`, padding `0.8em 1.2em` - **code:** background `#FF2E97`, color `#EAF2FF` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 17.5:1 | AA | AAA | — | | Body text on canvas | 18.64:1 | AA | AAA | — | | Muted text on surface | 5.46:1 | AA | AA | — | | Accent on surface | 5.72:1 | AA-Large | AA | — | | Accent on canvas | 6.09:1 | AA-Large | AA | — | --- # SYSTEM: Risograph Press Source: https://www.freedesignmd.com/system/risograph-press --- name: "Risograph Press" description: "Two-color spot print, halftone vibes. Fluorescent pink + ink-black on cream paper, 3px misregistration outlines, hand-cut chunky type." tags: [print, playful, editorial, maximalist] colors: primary: "#1A1815" secondary: "#6B665C" tertiary: "#FF4F8B" neutral: "#F4EFE3" surface: "#FBF7EC" typography: display: Fraunces body: Inter mono: "Space Mono" scale: hero: "5.5rem / 0.95 / 600 / -0.04em" h1: "3rem / 1 / 500 / -0.03em" h2: "1.5rem / 1.2 / 600 / -0.01em" body: "1.0625rem / 1.55 / 400 / 0" radius: sm: 2px md: 3px lg: 4px shadows: card: "3px 3px 0 #1A1815" button: "2px 2px 0 #1A1815" borders: card: "2px solid #1A1815" divider: "2px solid #1A1815" buttons: primary: background: #FF4F8B color: #1A1815 border: 2px solid #1A1815 shape: rounded padding: 12px 20px font: display / 600 / 0.9375rem / 0.04em uppercase: true shadow: 3px 3px 0 #1A1815 secondary: background: #FBF7EC color: #1A1815 border: 2px solid #1A1815 shape: rounded padding: 12px 20px font: display / 600 / 0.9375rem / 0.04em uppercase: true shadow: 3px 3px 0 #FF4F8B outline: background: transparent color: #1A1815 border: 2px dashed #1A1815 shape: rounded padding: 11px 20px font: mono / 700 / 0.875rem / 0.06em uppercase: true ghost: background: transparent color: #FF4F8B border: none shape: sharp padding: 10px 4px font: mono / 700 / 0.875rem / 0.06em uppercase: true hover: underline charts: variant: bars gridlines: false bar_radius: 0 bar_gap: 8px highlight: all axis_color: "#1A1815" palette: ["#FF4F8B", "#1A1815", "#FF4F8B", "#1A1815", "#FF4F8B"] fonts_url: "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap" dependencies: ["lucide-react"] --- # Risograph Press ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Risograph Press** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#FF4F8B`, text `#1A1815`, border `2px solid #1A1815`, padding `12px 20px`, weight `600`, uppercased, shadow `3px 3px 0 #1A1815`. - **Secondary** — rounded shape, bg `#FBF7EC`, text `#1A1815`, border `2px solid #1A1815`, padding `12px 20px`, weight `600`, uppercased, shadow `3px 3px 0 #FF4F8B`. - **Outline** — rounded shape, text `#1A1815`, border `2px dashed #1A1815`, padding `11px 20px`, weight `700`, uppercased. - **Ghost** — sharp shape, text `#FF4F8B`, padding `10px 4px`, weight `700`, uppercased. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FBF7EC` - Border: `2px solid #1A1815` - Shadow: `3px 3px 0 #1A1815` - Radius: `radius.lg` (`4px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `brutalist`. Hard rectangular tabs with thick borders. Active tab is fully filled in the primary color. Tabs are uppercased with `0.08em` tracking. #### Charts - Bar/line variant: `bars` - Bar radius: `0` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `all` — emphasize a single bar/point per chart. - Use the declared palette in order: `#FF4F8B`, `#1A1815`, `#FF4F8B`, `#1A1815`, `#FF4F8B`. #### Typography pairings - **Display (`Fraunces`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`Space Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Risograph Press is a love letter to the spot-color print era. Two inks — fluorescent pink and warm black — on cream uncoated paper. A 3px ink-offset shadow on every card mimics the slight misregistration of a real Riso pass. Borders are 2px solid ink, hand-cut. Display type is editorial Fraunces; body is Inter; captions are typewriter Space Mono. The system is loud where it wants to be (pink CTAs with chunky offset shadows) and quiet everywhere else (cream surfaces, ink-only meta). ## Material - **Page** is **cream #F4EFE3**, never white. The warmth matters — pure white kills the Riso illusion. - **Cards** sit on **stock #FBF7EC**, one shade lighter, with a **2px solid ink** border and a **3px 3px 0** ink-offset shadow. The shadow is the signature. - **Pink #FF4F8B** is the spot color. It appears on primary CTAs, accents, and as a misregistration shadow under secondary buttons. Never as body text. ## Typography - **Display: Fraunces** at hero (5.5rem / 600 / -0.04em). Editorial, optical-size, with a soft serif terminal that pairs with the cream paper. - **Body: Inter** at 1.0625rem for comfortable read on cream. - **Mono: Space Mono** for chunky uppercase labels and outline-button text — it reads like a typewriter ribbon. | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | Display | 5.5rem | 600 | -0.04em | | H1 | Display | 3rem | 500 | -0.03em | | H2 | Body | 1.5rem | 600 | -0.01em | | Body | Body | 1.0625rem | 400 | 0 | | Label | Mono | 0.875rem | 700 | +0.06em UPPER | ## Buttons (the centerpiece) Four variants, all uppercase, all chunky. - **Primary** — pink fill, 2px ink border, **3px 3px 0** ink shadow. Display font, +0.04em tracking. The shadow is non-negotiable. - **Secondary** — cream tile, 2px ink border, **3px 3px 0 PINK** shadow. Inverted ink relationship, same chunkiness. - **Outline** — dashed 2px ink, mono label. Reads like a paper cut-line. - **Ghost** — pink mono label with hover underline. Used inside cards only. ## Charts & Data Bar charts alternate pink and ink — the spot-color rhythm of a Riso print. **No gridlines, no rounded bars, no shadows on chart elements.** The chart's energy comes from contrast between the two passes. ## Do's and Don'ts - ✅ Always include the 3px ink-offset shadow on cards and primary CTAs. - ✅ Mix pink and ink — the system needs both passes to read as Riso. - ✅ Use cream backgrounds. Pure white breaks the print metaphor. - ✅ Let display Fraunces breathe at -3% to -4% tracking on hero sizes. - ❌ No drop-shadow blur. Riso shadows are crisp solid offsets. - ❌ No third color. Two passes — pink and ink — only. - ❌ No pill buttons. The brief is hand-cut, not pharmaceutical. - ❌ No body text in pink. Ink only for prose. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1A1815` | | secondary | `#6B665C` | | tertiary | `#FF4F8B` | | neutral | `#F4EFE3` | | surface | `#FBF7EC` | ### Typography - **Display:** Fraunces - **Body:** Inter - **Mono:** Space Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 5.5rem / 0.95 / 600 / -0.04em | | H1 | 3rem / 1 / 500 / -0.03em | | H2 | 1.5rem / 1.2 / 600 / -0.01em | | Body | 1.0625rem / 1.55 / 400 / 0 | ### Radius - sm: `2px` - md: `3px` - lg: `4px` ### Shadows - **card:** `3px 3px 0 #1A1815` - **button:** `2px 2px 0 #1A1815` ### Borders - **card:** `2px solid #1A1815` - **divider:** `2px solid #1A1815` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#FF4F8B` | | color | `#1A1815` | | border | `2px solid #1A1815` | | padding | `12px 20px` | | fontFamily | `display` | | fontWeight | `600` | | fontSize | `0.9375rem` | | tracking | `0.04em` | | uppercase | `true` | | shadow | `3px 3px 0 #1A1815` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#FBF7EC` | | color | `#1A1815` | | border | `2px solid #1A1815` | | padding | `12px 20px` | | fontFamily | `display` | | fontWeight | `600` | | fontSize | `0.9375rem` | | tracking | `0.04em` | | uppercase | `true` | | shadow | `3px 3px 0 #FF4F8B` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#1A1815` | | border | `2px dashed #1A1815` | | padding | `11px 20px` | | fontFamily | `mono` | | fontWeight | `700` | | fontSize | `0.875rem` | | tracking | `0.06em` | | uppercase | `true` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#FF4F8B` | | border | `none` | | padding | `10px 4px` | | fontFamily | `mono` | | fontWeight | `700` | | fontSize | `0.875rem` | | tracking | `0.06em` | | uppercase | `true` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `bars` | | gridlines | `false` | | barRadius | `0` | | barGap | `8px` | | highlight | `all` | | axisColor | `#1A1815` | | palette | `#FF4F8B`, `#1A1815`, `#FF4F8B`, `#1A1815`, `#FF4F8B` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(255, 79, 139, 0.92)`, shadow: `0 4px 20px -8px rgba(255, 79, 139, 0.4)` - **focus** — outline: `1.5px solid #FF4F8B`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#1A1815`, color: `#FBF7EC` #### Input - **hover** — border: `1px solid #1A1815` - **focus** — border: `1px solid #FF4F8B`, shadow: `0 1px 0 0 #FF4F8B` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #1A1815` #### Tab - **hover** — color: `#1A1815` - **focus** — outline: `1.5px solid #FF4F8B`, outline-offset: `3px` - **selected** — color: `#FF4F8B`, border: `0 0 2px 0 solid #FF4F8B` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#FF4F8B`, underline `always` - **blockquote:** border `4px solid #FF4F8B`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(26, 24, 21, 0.06)`, color `#1A1815` ### Accessibility (WCAG 2.1) **Overall:** FAIL | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 16.55:1 | AA | AAA | — | | Body text on canvas | 15.44:1 | AA | AAA | — | | Muted text on surface | 5.33:1 | AA | AA | — | | Accent on surface | 2.91:1 | AA-Large | FAIL | `#de004c` → 4.66:1 (AA) | | Accent on canvas | 2.71:1 | AA-Large | FAIL | `#d40048` → 4.7:1 (AA) | --- # SYSTEM: Mono Brutalist Source: https://www.freedesignmd.com/system/mono-brutalist --- name: "Mono Brutalist" description: "Pure black on white. Hard borders, monospace everywhere, zero compromise." tags: [brutalist, minimal, dark] colors: primary: "#000000" secondary: "#555555" tertiary: "#000000" neutral: "#FFFFFF" surface: "#FFFFFF" typography: display: "JetBrains Mono" body: "JetBrains Mono" mono: "JetBrains Mono" radius: sm: 0px md: 0px lg: 0px buttons: primary: background: #000000 color: #FFFFFF border: 2px solid #000000 shape: sharp padding: 12px 24px font: mono / 700 / 0.08em uppercase: true secondary: background: #FFFFFF color: #000000 border: 2px solid #000000 shape: sharp padding: 12px 24px font: mono / 700 / 0.08em uppercase: true outline: background: transparent color: #000000 border: 2px dashed #000000 shape: sharp padding: 12px 24px font: mono / 700 / 0.08em uppercase: true ghost: background: transparent color: #000000 border: none shape: sharp padding: 10px 0 font: mono / 700 / 0.08em uppercase: true hover: underline charts: variant: flat bar_gap: 2px highlight: all fonts_url: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&display=swap" dependencies: ["lucide-react"] --- # Mono Brutalist ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Mono Brutalist** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#000000`, text `#FFFFFF`, border `2px solid #000000`, padding `12px 24px`, weight `700`, uppercased. - **Secondary** — sharp shape, bg `#FFFFFF`, text `#000000`, border `2px solid #000000`, padding `12px 24px`, weight `700`, uppercased. - **Outline** — sharp shape, text `#000000`, border `2px dashed #000000`, padding `12px 24px`, weight `700`, uppercased. - **Ghost** — sharp shape, text `#000000`, padding `10px 0`, weight `700`, uppercased. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FFFFFF` - Radius: `radius.lg` (`0px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `brutalist`. Hard rectangular tabs with thick borders. Active tab is fully filled in the primary color. Tabs are uppercased with `0.1em` tracking. #### Charts - Bar/line variant: `flat` - Highlight strategy: `all` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`JetBrains Mono`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`JetBrains Mono`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Raw, uncompromising, system-font monospace. No color, no curves, no shadow. Structure and typography do all the work. ## Colors - **Primary #000000** — pure black. Borders, text, fills. - **Secondary #555555** — only for de-emphasized meta. - **Neutral / Surface #FFFFFF** — pure white. ## Typography **JetBrains Mono** at every level. Use weight (400/500/700/800) and uppercase for hierarchy. ## Spacing 8px grid. Sections 80px. Tight, deliberate. ## Components Hard 2px black borders. Zero border-radius. Zero shadows. Buttons uppercase. ## Icons `lucide-react` with stroke width 2. Always black. ## Do's and Don'ts - ✅ Use uppercase for buttons and labels. - ✅ Keep borders crisp at 2px. - ❌ No rounded corners, anywhere. - ❌ No grays except #555 for meta. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#000000` | | secondary | `#555555` | | tertiary | `#000000` | | neutral | `#FFFFFF` | | surface | `#FFFFFF` | ### Typography - **Display:** JetBrains Mono - **Body:** JetBrains Mono - **Mono:** JetBrains Mono ### Radius - sm: `0px` - md: `0px` - lg: `0px` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#000000` | | color | `#FFFFFF` | | border | `2px solid #000000` | | padding | `12px 24px` | | fontFamily | `mono` | | fontWeight | `700` | | tracking | `0.08em` | | uppercase | `true` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#FFFFFF` | | color | `#000000` | | border | `2px solid #000000` | | padding | `12px 24px` | | fontFamily | `mono` | | fontWeight | `700` | | tracking | `0.08em` | | uppercase | `true` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#000000` | | border | `2px dashed #000000` | | padding | `12px 24px` | | fontFamily | `mono` | | fontWeight | `700` | | tracking | `0.08em` | | uppercase | `true` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#000000` | | border | `none` | | padding | `10px 0` | | fontFamily | `mono` | | fontWeight | `700` | | tracking | `0.08em` | | uppercase | `true` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `flat` | | barGap | `2px` | | highlight | `all` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `4px 4px 0 0 #000000`, transform: `translate(-2px, -2px)` - **focus** — outline: `2px solid #000000`, outline-offset: `3px` - **active** — shadow: `none`, transform: `translate(0, 0)` - **disabled** — opacity: `0.4`, filter: `grayscale(0.4)` - **loading** — opacity: `0.6` - **selected** — bg: `#000000`, color: `#FFFFFF` #### Input - **hover** — border: `2px solid #000000` - **focus** — border: `2px solid #000000`, shadow: `4px 4px 0 0 #000000` - **disabled** — bg: `rgba(0, 0, 0, 0.05)`, opacity: `0.4` - **error** — border: `2px solid #B91C1C`, shadow: `4px 4px 0 0 #B91C1C` #### Card - **hover** — shadow: `6px 6px 0 0 #000000`, transform: `translate(-3px, -3px)` - **selected** — border: `3px solid #000000` - **dragging** — shadow: `8px 8px 0 0 #000000`, transform: `rotate(-1deg) scale(1.02)` #### Tab - **hover** — bg: `rgba(0, 0, 0, 0.08)` - **focus** — outline: `2px solid #000000`, outline-offset: `2px` - **selected** — bg: `#000000`, color: `#FFFFFF` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Hard cut.** No animation. Transitions are cuts — the state switches, the eye follows. Brutalism means no softening. ```css transition: none; ``` | Token | Value | |-------|-------| | duration.instant | `0ms` | | duration.fast | `50ms` | | duration.base | `100ms` | | duration.slow | `150ms` | | easing.standard | `linear` | | easing.decelerate | `linear` | | easing.accelerate | `linear` | | easing.spring | `steps(3, end)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the border carries the separation. | | level1 | `2px 2px 0 0 #000000` | Hard offset 2/2, no blur. | | level2 | `4px 4px 0 0 #000000` | Hard offset 4/4 — cards. | | level3 | `6px 6px 0 0 #000000` | Hard offset 6/6 — dialogs. | | level4 | `8px 8px 0 0 #000000` | Hard offset 8/8 — modals, thicker border. | ### Content - **measure:** `64ch` (max line length for body prose) - **paragraph spacing:** `1.2em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#000000`, underline `always` - **blockquote:** border `4px solid #000000`, padding `0.8em 1em` - **code:** background `#000000`, color `#FFFFFF` ### Accessibility (WCAG 2.1) **Overall:** AAA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 21:1 | AA | AAA | — | | Body text on canvas | 21:1 | AA | AAA | — | | Muted text on surface | 7.46:1 | AA | AAA | — | | Accent on surface | 21:1 | AA-Large | AAA | — | | Accent on canvas | 21:1 | AA-Large | AAA | — | --- # SYSTEM: Pierre Dev Source: https://www.freedesignmd.com/system/pierre-dev --- name: "Pierre Dev" description: "Dev-tool dark. Near-black canvas, hairline grid, mono-forward display type, one signal-cyan accent. The aesthetic of a precision instrument — built for developer platforms and infra consoles." tags: [dark, developer, minimal, modern, premium] colors: primary: "#5EE9FF" secondary: "#7B8794" tertiary: "#A6B0BC" neutral: "#0A0B0D" surface: "#101216" typography: display: "JetBrains Mono" body: Geist mono: "JetBrains Mono" scale: hero: "4.25rem / 1 / 500 / -0.04em" h1: "2.5rem / 1.05 / 500 / -0.035em" h2: "1.375rem / 1.3 / 500 / -0.015em" body: "0.9375rem / 1.6 / 400 / -0.003em" radius: sm: 4px md: 6px lg: 8px shadows: card: "0 0 0 1px rgba(255, 255, 255, 0.04), 0 1px 0 rgba(255, 255, 255, 0.02) inset" button: "0 0 0 1px rgba(94, 233, 255, 0.20), 0 0 24px -8px rgba(94, 233, 255, 0.35)" borders: card: "1px solid rgba(255, 255, 255, 0.06)" divider: "rgba(255, 255, 255, 0.06)" buttons: primary: background: #0F1418 color: #5EE9FF border: 1px solid #5EE9FF shape: sharp padding: 11px 22px font: mono / 500 / 0.8125rem / 0.02em shadow: 0 0 0 1px rgba(94, 233, 255, 0.20), 0 0 24px -8px rgba(94, 233, 255, 0.35) suffix: arrow secondary: background: transparent color: #E4E7EB border: 1px solid rgba(255, 255, 255, 0.10) shape: sharp padding: 11px 22px font: mono / 500 / 0.8125rem / 0.02em outline: background: transparent color: #7B8794 border: 1px dashed rgba(255, 255, 255, 0.14) shape: sharp padding: 10px 20px font: mono / 500 / 0.8125rem / 0.02em ghost: background: transparent color: #5EE9FF border: none shape: sharp padding: 10px 4px font: mono / 500 / 0.8125rem / 0.02em hover: underline charts: variant: stepped stroke_width: 1.5 gridlines: true highlight: last dot_marker: true axis_color: "#4A5560" palette: ["#5EE9FF", "#7B8794", "#A6B0BC"] fonts_url: "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap" dependencies: ["lucide-react"] --- # Pierre Dev ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Pierre Dev** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#0F1418`, text `#5EE9FF`, border `1px solid #5EE9FF`, padding `11px 22px`, weight `500`, shadow `0 0 0 1px rgba(94, 233, 255, 0.20), 0 0 24px -8px rgba(94, 233, 255, 0.35)`. - **Secondary** — sharp shape, text `#E4E7EB`, border `1px solid rgba(255, 255, 255, 0.10)`, padding `11px 22px`, weight `500`. - **Outline** — sharp shape, text `#7B8794`, border `1px dashed rgba(255, 255, 255, 0.14)`, padding `10px 20px`, weight `500`. - **Ghost** — sharp shape, text `#5EE9FF`, padding `10px 4px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#101216` - Border: `1px solid rgba(255, 255, 255, 0.06)` - Shadow: `0 0 0 1px rgba(255, 255, 255, 0.04), 0 1px 0 rgba(255, 255, 255, 0.02) inset` - Radius: `radius.lg` (`8px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `boxed`. Each tab is a bordered card. Active tab gets the accent border and a subtle fill. #### Charts - Bar/line variant: `stepped` - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#5EE9FF`, `#7B8794`, `#A6B0BC`. #### Typography pairings - **Display (`JetBrains Mono`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Geist`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Pierre Dev is a dev-tool dark system. Near-black canvas, mono display type, hairlines instead of shadows, and a single signal-cyan accent for active states. It is meant for developer platforms — observability dashboards, infra consoles, deploy UIs, terminal-adjacent products. The aesthetic borrows the discipline of a precision instrument: nothing is decorative, every line is information. ## Color - **Canvas #0A0B0D** — near-black page. - **Surface #101216** — barely-raised card. - **Signal Cyan #5EE9FF** — the only chromatic accent. Active links, primary CTA outline, the chart line, the cursor. - **Graphite scale #7B8794 / #A6B0BC** — secondary and tertiary text. - **Hairlines at rgba(255,255,255,0.06)** — the system's only structural element. Use them anywhere a divider would be. The cyan must remain rare — apply it to one element per region, never decoratively. ## Typography - **Display: JetBrains Mono 500** at 4.25rem with -4% tracking. - **Body: Geist 400** at 0.9375rem with 1.6 leading. - **Mono is the display face.** The "this was written by someone who writes code" signal is the entire point. | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | JetBrains Mono | 4.25rem | 500 | -0.04em | | H1 | JetBrains Mono | 2.5rem | 500 | -0.035em | | H2 | JetBrains Mono | 1.375rem | 500 | -0.015em | | Body | Geist | 0.9375rem | 400 | -0.003em / 1.6 | ## Geometry - **Radii: 4 / 6 / 8.** Sharp-modern. No pills, no soft corners. - **Spacing: strict 4px subgrid.** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96. - **Borders: 1px hairlines** at 6% white. Replace shadows with hairline halos. ## Buttons - **Primary** — dark surface, cyan hairline, cyan label, soft cyan outer glow. The single "action" moment. - **Secondary** — bare hairline against canvas. Light label. - **Outline** — 1px dashed hairline, graphite label. For tertiary actions only. - **Ghost** — bare cyan label, hover underline. All four are sharp (4px radius). Mono labels at 0.8125rem with +2% tracking — they read as commands. ## Cards Surface at #101216 with a 1px hairline halo (6% white) and a 1px inner top-edge highlight (2% white). Radius 8px. Cards never lift; depth is communicated by the hairline alone. ## Charts & Data Stepped line in signal cyan, 1.5px stroke, faint graphite gridlines. End-of-line cyan dot. The chart should read as a terminal plot, not a marketing graphic. ## Do's and Don'ts - ✅ Cyan appears once per region — primary CTA, active link, chart line. Never decoratively. - ✅ All structure is hairlines. Replace every shadow you'd reach for with a 1px halo. - ✅ Mono on display, sans on body — never the other way around. - ✅ Stick to the 4px subgrid. Off-grid spacing reads as careless. - ❌ No drop shadows. No soft corners. No gradients. - ❌ No second chromatic accent. The system is mono + cyan, period. - ❌ No marketing-style icons or illustrations. If a glyph appears, it should look like terminal output. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#5EE9FF` | | secondary | `#7B8794` | | tertiary | `#A6B0BC` | | neutral | `#0A0B0D` | | surface | `#101216` | ### Typography - **Display:** JetBrains Mono - **Body:** Geist - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.25rem / 1 / 500 / -0.04em | | H1 | 2.5rem / 1.05 / 500 / -0.035em | | H2 | 1.375rem / 1.3 / 500 / -0.015em | | Body | 0.9375rem / 1.6 / 400 / -0.003em | ### Radius - sm: `4px` - md: `6px` - lg: `8px` ### Shadows - **card:** `0 0 0 1px rgba(255, 255, 255, 0.04), 0 1px 0 rgba(255, 255, 255, 0.02) inset` - **button:** `0 0 0 1px rgba(94, 233, 255, 0.20), 0 0 24px -8px rgba(94, 233, 255, 0.35)` ### Borders - **card:** `1px solid rgba(255, 255, 255, 0.06)` - **divider:** `rgba(255, 255, 255, 0.06)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#0F1418` | | color | `#5EE9FF` | | border | `1px solid #5EE9FF` | | padding | `11px 22px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.02em` | | shadow | `0 0 0 1px rgba(94, 233, 255, 0.20), 0 0 24px -8px rgba(94, 233, 255, 0.35)` | | suffix | `arrow` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#E4E7EB` | | border | `1px solid rgba(255, 255, 255, 0.10)` | | padding | `11px 22px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.02em` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#7B8794` | | border | `1px dashed rgba(255, 255, 255, 0.14)` | | padding | `10px 20px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.02em` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#5EE9FF` | | border | `none` | | padding | `10px 4px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.02em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `stepped` | | strokeWidth | `1.5` | | gridlines | `true` | | highlight | `last` | | dotMarker | `true` | | axisColor | `#4A5560` | | palette | `#5EE9FF`, `#7B8794`, `#A6B0BC` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(166, 176, 188, 0.15)`, color: `#A6B0BC`, border: `1px solid #A6B0BC` - **focus** — outline: `1px dashed #A6B0BC`, outline-offset: `2px` - **active** — bg: `#A6B0BC`, color: `#101216` - **disabled** — opacity: `0.35` - **loading** — opacity: `0.6` - **selected** — bg: `#A6B0BC`, color: `#101216` #### Input - **hover** — border: `1px solid rgba(166, 176, 188, 0.5)` - **focus** — bg: `rgba(166, 176, 188, 0.05)`, border: `1px solid #A6B0BC` - **disabled** — opacity: `0.35` - **error** — bg: `rgba(239,68,68,0.05)`, border: `1px solid #EF4444` #### Card - **hover** — border: `1px solid #A6B0BC` - **selected** — bg: `rgba(166, 176, 188, 0.05)`, border: `1px solid #A6B0BC` - **dragging** — opacity: `0.7` #### Tab - **hover** — color: `#A6B0BC` - **focus** — outline: `1px dashed #A6B0BC`, outline-offset: `1px` - **selected** — bg: `rgba(166, 176, 188, 0.1)`, color: `#A6B0BC` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Cursor blink.** Discrete, often stepped transitions. Like a terminal cursor: on or off. Response under 120 ms. ```css transition: all 120ms linear; ``` | Token | Value | |-------|-------| | duration.instant | `0ms` | | duration.fast | `60ms` | | duration.base | `120ms` | | duration.slow | `200ms` | | easing.standard | `linear` | | easing.decelerate | `linear` | | easing.accelerate | `linear` | | easing.spring | `steps(2, end)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the stroke carries the hierarchy. | | level1 | `none` | Border tone lifts the surface. | | level2 | `0 0 0 1px rgba(166, 176, 188, 0.5)` | Ring outline — popover. | | level3 | `0 0 0 1px #A6B0BC, 0 12px 32px -16px rgba(166, 176, 188, 0.4)` | Sheet with accent ring + glow. | | level4 | `0 0 0 1px #A6B0BC, 0 24px 64px -20px rgba(166, 176, 188, 0.5)` | Modal with accent ring + glow. | ### Content - **measure:** `78ch` (max line length for body prose) - **paragraph spacing:** `1em` - **list indent:** `1.25em` - **list gap:** `0.35em` - **link:** color `#A6B0BC`, underline `always` - **blockquote:** border `1px solid rgba(166, 176, 188, 0.5)`, padding `0.7em 1em` - **code:** background `rgba(166, 176, 188, 0.12)`, color `#A6B0BC` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 13.01:1 | AA | AAA | — | | Body text on canvas | 13.67:1 | AA | AAA | — | | Muted text on surface | 5.12:1 | AA | AA | — | | Accent on surface | 8.53:1 | AA-Large | AAA | — | | Accent on canvas | 8.96:1 | AA-Large | AAA | — | --- # SYSTEM: Console Paper Source: https://www.freedesignmd.com/system/console-paper --- name: "Console Paper" description: "Coding-vibe on warm paper. Mono everywhere — display, body, captions — with a single muted terracotta accent. Hairlines instead of shadows, strict 4px subgrid. Developer discipline without the dark canvas." tags: [developer, minimal, light, paper, technical] colors: primary: "#1F1A14" secondary: "#7A7468" tertiary: "#B8553A" neutral: "#F5F1E8" surface: "#FAF7F0" typography: display: "IBM Plex Mono" body: "IBM Plex Mono" mono: "IBM Plex Mono" scale: hero: "3.5rem / 1.05 / 500 / -0.035em" h1: "2.125rem / 1.1 / 500 / -0.025em" h2: "1.25rem / 1.35 / 500 / -0.012em" body: "0.9375rem / 1.65 / 400 / -0.005em" radius: sm: 0px md: 2px lg: 4px shadows: card: "0 0 0 1px rgba(31, 26, 20, 0.08)" button: none borders: card: "1px solid rgba(31, 26, 20, 0.08)" divider: "rgba(31, 26, 20, 0.08)" buttons: primary: background: #FAF7F0 color: #B8553A border: 1.5px solid #B8553A shape: sharp padding: 11px 22px font: mono / 500 / 0.8125rem / 0.01em suffix: arrow secondary: background: #FAF7F0 color: #1F1A14 border: 1.5px solid rgba(31, 26, 20, 0.20) shape: sharp padding: 11px 22px font: mono / 500 / 0.8125rem / 0.01em outline: background: transparent color: #7A7468 border: 1px dashed rgba(31, 26, 20, 0.25) shape: sharp padding: 10px 20px font: mono / 500 / 0.8125rem / 0.01em ghost: background: transparent color: #B8553A border: none shape: sharp padding: 10px 4px font: mono / 500 / 0.8125rem / 0.01em hover: underline charts: variant: stepped stroke_width: 1.5 gridlines: true highlight: last dot_marker: true axis_color: "#7A7468" palette: ["#B8553A", "#7A7468", "#1F1A14"] fonts_url: "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&display=swap" dependencies: ["lucide-react"] --- # Console Paper ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Console Paper** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#FAF7F0`, text `#B8553A`, border `1.5px solid #B8553A`, padding `11px 22px`, weight `500`. - **Secondary** — sharp shape, bg `#FAF7F0`, text `#1F1A14`, border `1.5px solid rgba(31, 26, 20, 0.20)`, padding `11px 22px`, weight `500`. - **Outline** — sharp shape, text `#7A7468`, border `1px dashed rgba(31, 26, 20, 0.25)`, padding `10px 20px`, weight `500`. - **Ghost** — sharp shape, text `#B8553A`, padding `10px 4px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FAF7F0` - Border: `1px solid rgba(31, 26, 20, 0.08)` - Shadow: `0 0 0 1px rgba(31, 26, 20, 0.08)` - Radius: `radius.lg` (`4px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `stepped` - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#B8553A`, `#7A7468`, `#1F1A14`. #### Typography pairings - **Display (`IBM Plex Mono`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`IBM Plex Mono`)** — paragraphs, labels, button text, form inputs. - **Mono (`IBM Plex Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Console Paper is the discipline of a developer console rendered on warm paper. Mono everywhere — display, body, captions — at carefully tuned sizes. A single muted terracotta accent for active states. Hairlines, no shadows. Strict 4px subgrid. For documentation sites, technical blogs, indie dev tools, paper-feel developer products that want warmth without losing precision. ## The Conceit The page reads as printed terminal output. The mono face does the heavy lifting — there is no second typeface anywhere. The terracotta hairline on the primary button is the closest the system gets to "color"; it stands in for the cursor. ``` ┌─────────────────────────────┐ │ console.paper $ run │ │ │ │ Build precision into the │ │ paper, not the screen. │ └─────────────────────────────┘ ``` ## Color - **Coffee Ink #1F1A14** — primary text. - **Graphite #7A7468** — secondary text, captions. - **Terracotta #B8553A** — the only chromatic accent. Primary CTA hairline, active links, the chart line. - **Warm Paper #F5F1E8** — page canvas. - **Cream Card #FAF7F0** — card surface. The terracotta must remain rare — apply it to one element per region. ## Typography - **Display: IBM Plex Mono 500** at 3.5rem with -3.5% tracking. - **Body: IBM Plex Mono 400** at 0.9375rem with 1.65 leading. - Mono is the entire system. No sans, no serif anywhere. | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | IBM Plex Mono | 3.5rem | 500 | -0.035em | | H1 | IBM Plex Mono | 2.125rem | 500 | -0.025em | | H2 | IBM Plex Mono | 1.25rem | 500 | -0.012em | | Body | IBM Plex Mono | 0.9375rem | 400 | -0.005em / 1.65 | ## Geometry - **Radii: 0 / 2 / 4.** Almost-sharp. Mono on paper looks crafted at small radii. - **Borders: 1px hairlines** at 8% coffee-ink. Replace shadows with hairlines. - **Spacing: strict 4px subgrid.** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64. ## Buttons - **Primary** — cream paper surface, 1.5px terracotta hairline, terracotta mono label. Reads as a command in a prompt. - **Secondary** — cream paper, 1.5px coffee-ink hairline (20%). - **Outline** — bare 1px dashed hairline. - **Ghost** — bare terracotta label, hover underline. All four use the mono face for labels at 0.8125rem with +1% tracking. ## Cards Cream surface (#FAF7F0) over warm paper canvas, 1px coffee-ink hairline at 8%, no shadow. Radius 4px. Cards never lift; depth is communicated by the hairline alone. ## Charts & Data Stepped terracotta line over the cream card, 1.5px stroke, faint graphite gridlines. End-of-line terracotta dot. The chart should read like ASCII output, not a marketing graphic. ## Do's and Don'ts - ✅ Mono everywhere — display, body, captions, buttons. No exceptions. - ✅ Terracotta appears once per region — primary CTA, active link, chart line. - ✅ All structure is hairlines. Replace every shadow you'd reach for with a 1px line. - ✅ Stick to the 4px subgrid. Off-grid spacing reads as careless. - ❌ No sans or serif type. The system is mono-only. - ❌ No drop shadows. No gradients. No glass. - ❌ No second chromatic accent. Mono + terracotta, period. - ❌ No radii above 4px. Mono on paper at large radii reads soft and loses the "console" voice. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1F1A14` | | secondary | `#7A7468` | | tertiary | `#B8553A` | | neutral | `#F5F1E8` | | surface | `#FAF7F0` | ### Typography - **Display:** IBM Plex Mono - **Body:** IBM Plex Mono - **Mono:** IBM Plex Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 3.5rem / 1.05 / 500 / -0.035em | | H1 | 2.125rem / 1.1 / 500 / -0.025em | | H2 | 1.25rem / 1.35 / 500 / -0.012em | | Body | 0.9375rem / 1.65 / 400 / -0.005em | ### Radius - sm: `0px` - md: `2px` - lg: `4px` ### Shadows - **card:** `0 0 0 1px rgba(31, 26, 20, 0.08)` - **button:** `none` ### Borders - **card:** `1px solid rgba(31, 26, 20, 0.08)` - **divider:** `rgba(31, 26, 20, 0.08)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#FAF7F0` | | color | `#B8553A` | | border | `1.5px solid #B8553A` | | padding | `11px 22px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.01em` | | suffix | `arrow` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#FAF7F0` | | color | `#1F1A14` | | border | `1.5px solid rgba(31, 26, 20, 0.20)` | | padding | `11px 22px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.01em` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#7A7468` | | border | `1px dashed rgba(31, 26, 20, 0.25)` | | padding | `10px 20px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.01em` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#B8553A` | | border | `none` | | padding | `10px 4px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `0.01em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `stepped` | | strokeWidth | `1.5` | | gridlines | `true` | | highlight | `last` | | dotMarker | `true` | | axisColor | `#7A7468` | | palette | `#B8553A`, `#7A7468`, `#1F1A14` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(184, 85, 58, 0.15)`, color: `#B8553A`, border: `1px solid #B8553A` - **focus** — outline: `1px dashed #B8553A`, outline-offset: `2px` - **active** — bg: `#B8553A`, color: `#FAF7F0` - **disabled** — opacity: `0.35` - **loading** — opacity: `0.6` - **selected** — bg: `#B8553A`, color: `#FAF7F0` #### Input - **hover** — border: `1px solid rgba(184, 85, 58, 0.5)` - **focus** — bg: `rgba(184, 85, 58, 0.05)`, border: `1px solid #B8553A` - **disabled** — opacity: `0.35` - **error** — bg: `rgba(239,68,68,0.05)`, border: `1px solid #EF4444` #### Card - **hover** — border: `1px solid #B8553A` - **selected** — bg: `rgba(184, 85, 58, 0.05)`, border: `1px solid #B8553A` - **dragging** — opacity: `0.7` #### Tab - **hover** — color: `#B8553A` - **focus** — outline: `1px dashed #B8553A`, outline-offset: `1px` - **selected** — bg: `rgba(184, 85, 58, 0.1)`, color: `#B8553A` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Cursor blink.** Discrete, often stepped transitions. Like a terminal cursor: on or off. Response under 120 ms. ```css transition: all 120ms linear; ``` | Token | Value | |-------|-------| | duration.instant | `0ms` | | duration.fast | `60ms` | | duration.base | `120ms` | | duration.slow | `200ms` | | easing.standard | `linear` | | easing.decelerate | `linear` | | easing.accelerate | `linear` | | easing.spring | `steps(2, end)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the stroke carries the hierarchy. | | level1 | `none` | Border tone lifts the surface. | | level2 | `0 0 0 1px rgba(184, 85, 58, 0.5)` | Ring outline — popover. | | level3 | `0 0 0 1px #B8553A, 0 12px 32px -16px rgba(184, 85, 58, 0.4)` | Sheet with accent ring + glow. | | level4 | `0 0 0 1px #B8553A, 0 24px 64px -20px rgba(184, 85, 58, 0.5)` | Modal with accent ring + glow. | ### Content - **measure:** `78ch` (max line length for body prose) - **paragraph spacing:** `1em` - **list indent:** `1.25em` - **list gap:** `0.35em` - **link:** color `#B8553A`, underline `always` - **blockquote:** border `1px solid rgba(184, 85, 58, 0.5)`, padding `0.7em 1em` - **code:** background `rgba(184, 85, 58, 0.12)`, color `#B8553A` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 16.14:1 | AA | AAA | — | | Body text on canvas | 15.32:1 | AA | AAA | — | | Muted text on surface | 4.34:1 | AA | AA-Large | `#746f63` → 4.68:1 (AA) | | Accent on surface | 4.46:1 | AA-Large | AA-Large | — | | Accent on canvas | 4.24:1 | AA-Large | AA-Large | — | --- # SYSTEM: Citrine IDE Source: https://www.freedesignmd.com/system/citrine-ide --- name: "Citrine IDE" description: "Premium IDE light theme. Warm paper canvas, three syntax-color tokens (amber, teal, plum) used semantically, JetBrains Mono for structure, IBM Plex Sans for body, refined 4-6px corners. Editor-aesthetic with warmth." tags: [coding, light, developer, premium, warm] colors: primary: "#1A1814" secondary: "#5F574B" tertiary: "#B57A1A" neutral: "#FAF6EC" surface: "#FFFCF4" typography: display: "JetBrains Mono" body: "IBM Plex Sans" mono: "JetBrains Mono" scale: hero: "3.75rem / 1.05 / 500 / -0.035em" h1: "2.25rem / 1.1 / 500 / -0.03em" h2: "1.25rem / 1.3 / 500 / -0.012em" body: "1rem / 1.65 / 400 / -0.003em" radius: sm: 4px md: 6px lg: 8px shadows: card: "0 0 0 1px rgba(26, 24, 20, 0.08)" button: "0 2px 0 0 #8A5A10" borders: card: "1px solid rgba(26, 24, 20, 0.08)" divider: "rgba(26, 24, 20, 0.12)" buttons: primary: background: #B57A1A color: #FFFCF4 border: 1px solid #B57A1A shape: rounded padding: 10px 20px font: mono / 500 / 0.8125rem / -0.005em shadow: 0 2px 0 0 #8A5A10 secondary: background: #FFFCF4 color: #1A1814 border: 1px solid rgba(181, 122, 26, 0.40) shape: rounded padding: 10px 20px font: mono / 500 / 0.8125rem / -0.005em outline: background: transparent color: #1A1814 border: 1px solid rgba(26, 24, 20, 0.18) shape: rounded padding: 10px 20px font: mono / 500 / 0.8125rem / -0.005em ghost: background: transparent color: #0F8A82 border: none shape: rounded padding: 10px 4px font: mono / 500 / 0.8125rem / -0.005em hover: underline charts: variant: "rounded-bars" stroke_width: 1.5 gridlines: true bar_radius: 2px bar_gap: 8px highlight: all axis_color: "#5F574B" palette: ["#B57A1A", "#0F8A82", "#7A2E5A"] fonts_url: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap" dependencies: ["lucide-react"] --- # Citrine IDE ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Citrine IDE** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#B57A1A`, text `#FFFCF4`, border `1px solid #B57A1A`, padding `10px 20px`, weight `500`, shadow `0 2px 0 0 #8A5A10`. - **Secondary** — rounded shape, bg `#FFFCF4`, text `#1A1814`, border `1px solid rgba(181, 122, 26, 0.40)`, padding `10px 20px`, weight `500`. - **Outline** — rounded shape, text `#1A1814`, border `1px solid rgba(26, 24, 20, 0.18)`, padding `10px 20px`, weight `500`. - **Ghost** — rounded shape, text `#0F8A82`, padding `10px 4px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#FFFCF4` - Border: `1px solid rgba(26, 24, 20, 0.08)` - Shadow: `0 0 0 1px rgba(26, 24, 20, 0.08)` - Radius: `radius.lg` (`8px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `rounded-bars` - Bar radius: `2px` - Highlight strategy: `all` — emphasize a single bar/point per chart. - Use the declared palette in order: `#B57A1A`, `#0F8A82`, `#7A2E5A`. #### Typography pairings - **Display (`JetBrains Mono`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`IBM Plex Sans`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Citrine IDE is a premium light theme borrowed from the editor world. The canvas is warm paper (a faint warm tint sets it apart from bone or pure white). Type is **JetBrains Mono** for all structure — display, headings, buttons, table headers — and **IBM Plex Sans** for body. The whole page reads as a structured editor pane. The system uses **three syntax-token colors as a semantic palette**: amber (string), teal (function/identifier), plum (keyword). The amber is the chromatic accent, the teal is for ghost/link semantics, and plum appears only in charts and code-block highlights. For developer documentation that wants warmth, AI coding tools, premium code-snippet platforms, design-engineering portfolios. ## Color - **Ink #1A1814** — primary text. Deep warm graphite. - **Mid Graphite #5F574B** — secondary text, inline-code default color. - **Amber #B57A1A** — string token + primary CTA + chromatic accent. - **Teal #0F8A82** — function/identifier token + ghost-button label + link. - **Plum #7A2E5A** — keyword token + chart third-bar. - **Paper #FAF6EC** — page canvas (warm). - **Surface #FFFCF4** — card / editor pane. The three syntax colors aren't decoration — they carry semantic meaning across charts, code blocks, and interactive elements. ## Typography - **Display: JetBrains Mono 500** at 3.75rem with -3.5% tracking. Restrained — the page reads as an editor. - **Body: IBM Plex Sans 400** at 1rem with 1.65 leading. | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | JetBrains Mono | 3.75rem | 500 | -0.035em | | H1 | JetBrains Mono | 2.25rem | 500 | -0.03em | | H2 | JetBrains Mono | 1.25rem | 500 | -0.012em | | Body | IBM Plex Sans | 1rem | 400 | -0.003em / 1.65 | | Button | JetBrains Mono | 0.8125rem | 500 | -0.005em | Body copy is the only proportional type. Everything structural is mono. ## Geometry - **Radii: 4 / 6 / 8.** Editor-pane geometry. Never pill, never soft. - **4px subgrid.** - **Section gap: 96px** desktop, 64px mobile. ## Buttons - **Primary** — warm amber fill with a **2px darker-amber bottom border** (`box-shadow: 0 2px 0 0 #8A5A10`). The bottom border reads as an "active tab" indicator — the system's signature. - **Secondary** — surface paper with a 40% amber hairline. Mono label. - **Outline** — bare warm-graphite hairline at 18%. - **Ghost** — bare teal label. Hover underline. The bottom-border on primary is non-negotiable — it is what makes the button read as an editor element rather than a generic CTA. ## Cards Surface paper on the warm canvas, 1px ink hairline at 8% opacity, 6px corners, **no drop shadow**. Padding 24-32px. Editor-pane wireframes. ## Code Blocks Code blocks use the surface color with a 1px hairline; syntax tokens map to the three palette colors (amber/teal/plum) plus warm graphite for default. `Inline code` uses warm graphite on a faint amber-tinted background. ## Charts & Data Three-bar histogram in amber, teal, plum — the same syntax-token semantic. Gridlines on (developer tool — readability beats minimalism). 2px corner radius, 8px gap. Axis labels in mid-graphite mono at 11px. ## Do's and Don'ts - ✅ Mono for display and structure. Proportional only for body. - ✅ The 2px bottom border on primary CTA is the system's signature — keep it. - ✅ Three syntax-token colors used semantically (amber=string, teal=function, plum=keyword). - ✅ Warm canvas — not bone, not pure white. The warmth distinguishes it. - ❌ No second display font. JetBrains Mono carries all structure. - ❌ No pill buttons. No soft corners. - ❌ No drop shadows on cards. The bottom-border on primary is the only "shadow." - ❌ No oversized hero. The page is an editor, not a billboard. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#1A1814` | | secondary | `#5F574B` | | tertiary | `#B57A1A` | | neutral | `#FAF6EC` | | surface | `#FFFCF4` | ### Typography - **Display:** JetBrains Mono - **Body:** IBM Plex Sans - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 3.75rem / 1.05 / 500 / -0.035em | | H1 | 2.25rem / 1.1 / 500 / -0.03em | | H2 | 1.25rem / 1.3 / 500 / -0.012em | | Body | 1rem / 1.65 / 400 / -0.003em | ### Radius - sm: `4px` - md: `6px` - lg: `8px` ### Shadows - **card:** `0 0 0 1px rgba(26, 24, 20, 0.08)` - **button:** `0 2px 0 0 #8A5A10` ### Borders - **card:** `1px solid rgba(26, 24, 20, 0.08)` - **divider:** `rgba(26, 24, 20, 0.12)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#B57A1A` | | color | `#FFFCF4` | | border | `1px solid #B57A1A` | | padding | `10px 20px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `-0.005em` | | shadow | `0 2px 0 0 #8A5A10` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#FFFCF4` | | color | `#1A1814` | | border | `1px solid rgba(181, 122, 26, 0.40)` | | padding | `10px 20px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `-0.005em` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#1A1814` | | border | `1px solid rgba(26, 24, 20, 0.18)` | | padding | `10px 20px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `-0.005em` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#0F8A82` | | border | `none` | | padding | `10px 4px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.8125rem` | | tracking | `-0.005em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `rounded-bars` | | strokeWidth | `1.5` | | gridlines | `true` | | barRadius | `2px` | | barGap | `8px` | | highlight | `all` | | axisColor | `#5F574B` | | palette | `#B57A1A`, `#0F8A82`, `#7A2E5A` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(181, 122, 26, 0.15)`, color: `#B57A1A`, border: `1px solid #B57A1A` - **focus** — outline: `1px dashed #B57A1A`, outline-offset: `2px` - **active** — bg: `#B57A1A`, color: `#FFFCF4` - **disabled** — opacity: `0.35` - **loading** — opacity: `0.6` - **selected** — bg: `#B57A1A`, color: `#FFFCF4` #### Input - **hover** — border: `1px solid rgba(181, 122, 26, 0.5)` - **focus** — bg: `rgba(181, 122, 26, 0.05)`, border: `1px solid #B57A1A` - **disabled** — opacity: `0.35` - **error** — bg: `rgba(239,68,68,0.05)`, border: `1px solid #EF4444` #### Card - **hover** — border: `1px solid #B57A1A` - **selected** — bg: `rgba(181, 122, 26, 0.05)`, border: `1px solid #B57A1A` - **dragging** — opacity: `0.7` #### Tab - **hover** — color: `#B57A1A` - **focus** — outline: `1px dashed #B57A1A`, outline-offset: `1px` - **selected** — bg: `rgba(181, 122, 26, 0.1)`, color: `#B57A1A` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Cursor blink.** Discrete, often stepped transitions. Like a terminal cursor: on or off. Response under 120 ms. ```css transition: all 120ms linear; ``` | Token | Value | |-------|-------| | duration.instant | `0ms` | | duration.fast | `60ms` | | duration.base | `120ms` | | duration.slow | `200ms` | | easing.standard | `linear` | | easing.decelerate | `linear` | | easing.accelerate | `linear` | | easing.spring | `steps(2, end)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the stroke carries the hierarchy. | | level1 | `none` | Border tone lifts the surface. | | level2 | `0 0 0 1px rgba(181, 122, 26, 0.5)` | Ring outline — popover. | | level3 | `0 0 0 1px #B57A1A, 0 12px 32px -16px rgba(181, 122, 26, 0.4)` | Sheet with accent ring + glow. | | level4 | `0 0 0 1px #B57A1A, 0 24px 64px -20px rgba(181, 122, 26, 0.5)` | Modal with accent ring + glow. | ### Content - **measure:** `78ch` (max line length for body prose) - **paragraph spacing:** `1em` - **list indent:** `1.25em` - **list gap:** `0.35em` - **link:** color `#B57A1A`, underline `always` - **blockquote:** border `1px solid rgba(181, 122, 26, 0.5)`, padding `0.7em 1em` - **code:** background `rgba(181, 122, 26, 0.12)`, color `#B57A1A` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 17.29:1 | AA | AAA | — | | Body text on canvas | 16.43:1 | AA | AAA | — | | Muted text on surface | 6.94:1 | AA | AA | — | | Accent on surface | 3.55:1 | AA-Large | AA-Large | — | | Accent on canvas | 3.38:1 | AA-Large | AA-Large | — | --- # SYSTEM: Obsidian Glass Source: https://www.freedesignmd.com/system/obsidian-glass --- name: "Obsidian Glass" description: "Dark glass. Deep midnight canvas with a faint indigo-violet aurora behind; cards float as smoked glass panes with 32px backdrop-blur and a faint inset top highlight. Depth and theater without going gaudy." tags: [glass, dark, premium, minimal, modern] colors: primary: "#ECEDF2" secondary: "#9298B0" tertiary: "#8B95FF" neutral: "#0B0C14" surface: "#13141E" typography: display: "Inter Tight" body: Inter mono: "JetBrains Mono" scale: hero: "4.5rem / 1.05 / 600 / -0.035em" h1: "2.625rem / 1.1 / 600 / -0.03em" h2: "1.5rem / 1.3 / 600 / -0.015em" body: "1rem / 1.65 / 400 / -0.005em" radius: sm: 12px md: 18px lg: 24px pill: 9999px shadows: card: "0 32px 80px -32px rgba(0, 0, 0, 0.55), 0 2px 8px -4px rgba(0, 0, 0, 0.30)" button: "0 12px 32px -16px rgba(139, 149, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18)" borders: card: "1px solid rgba(255, 255, 255, 0.10)" divider: "rgba(255, 255, 255, 0.08)" glass: surface: "rgba(255, 255, 255, 0.06)" blur: 32px saturate: 180% border: "1px solid rgba(255, 255, 255, 0.10)" shadow: "0 32px 80px -32px rgba(0, 0, 0, 0.55), 0 2px 8px -4px rgba(0, 0, 0, 0.30)" inner_highlight: "inset 0 1px 0 rgba(255, 255, 255, 0.12)" backdrop: "radial-gradient(at 14% 18%, rgba(99, 102, 241, 0.32) 0px, transparent 45%), radial-gradient(at 86% 14%, rgba(139, 92, 246, 0.26) 0px, transparent 50%), radial-gradient(at 78% 88%, rgba(59, 130, 246, 0.22) 0px, transparent 55%)" buttons: primary: background: linear-gradient(180deg, #9DA6FF 0%, #6E7BFF 100%) color: #0B0C14 border: 1px solid rgba(255, 255, 255, 0.20) shape: pill padding: 12px 24px font: 600 / 0.9375rem / -0.005em shadow: 0 12px 32px -16px rgba(139, 149, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35) secondary: background: rgba(255, 255, 255, 0.06) color: #ECEDF2 border: 1px solid rgba(255, 255, 255, 0.12) shape: pill padding: 12px 24px font: 500 / 0.9375rem / -0.005em backdrop_blur: 20px backdrop_saturate: 180% outline: background: transparent color: #ECEDF2 border: 1px solid rgba(255, 255, 255, 0.18) shape: pill padding: 11px 22px font: 500 / 0.9375rem / -0.005em ghost: background: transparent color: #9298B0 border: none shape: pill padding: 11px 6px font: 500 / 0.9375rem / -0.005em hover: underline charts: variant: area stroke_width: 2 fill_opacity: 0.22 gridlines: false highlight: last dot_marker: true axis_color: "#9298B0" palette: ["#8B95FF", "#A5ADFF", "#C9CEFF"] fonts_url: "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Obsidian Glass ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Obsidian Glass** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — pill shape, bg `linear-gradient(180deg, #9DA6FF 0%, #6E7BFF 100%)`, text `#0B0C14`, border `1px solid rgba(255, 255, 255, 0.20)`, padding `12px 24px`, weight `600`, shadow `0 12px 32px -16px rgba(139, 149, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35)`. - **Secondary** — pill shape, bg `rgba(255, 255, 255, 0.06)`, text `#ECEDF2`, border `1px solid rgba(255, 255, 255, 0.12)`, padding `12px 24px`, weight `500`. - **Outline** — pill shape, text `#ECEDF2`, border `1px solid rgba(255, 255, 255, 0.18)`, padding `11px 22px`, weight `500`. - **Ghost** — pill shape, text `#9298B0`, padding `11px 6px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#13141E` - Border: `1px solid rgba(255, 255, 255, 0.10)` - Shadow: `0 32px 80px -32px rgba(0, 0, 0, 0.55), 0 2px 8px -4px rgba(0, 0, 0, 0.30)` - Radius: `radius.lg` (`24px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. > This system ships a **glass treatment** — see the Glass token table. > Apply `backdrop-filter: blur(32px)` to translucent panes. > The page must have a backdrop (gradient mesh / blurred orbs) for glass to refract. #### Charts - Bar/line variant: `area` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#8B95FF`, `#A5ADFF`, `#C9CEFF`. #### Typography pairings - **Display (`Inter Tight`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Obsidian Glass is dark glass. The page sits on a deep midnight canvas with a faint indigo-violet aurora — three soft radial blobs in indigo, violet, and blue — painted into the background. Cards float above the aurora as smoked glass panes: 32px backdrop-blur, 6% white surface, 1px white-alpha hairline, and a faint inset top highlight that reads as a top-edge gloss in the dark. The glass is the entire system. Type, color, buttons — all calibrated to let the smoked panes do the work. Built for night-mode AI tools, premium dashboards, music and media platforms, anything that wants depth and theater without going gaudy. ## The Smoked Glass Recipe Cards are not "dark with a shadow." They are smoked glass over a chromatic backdrop: ```css .obsidian-pane { background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(32px) saturate(180%); -webkit-backdrop-filter: blur(32px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 32px 80px -32px rgba(0, 0, 0, 0.55), 0 2px 8px -4px rgba(0, 0, 0, 0.30); border-radius: 24px; } ``` The page MUST have the indigo-violet aurora behind it for the glass to mean anything: ```css body { background: radial-gradient(at 14% 18%, rgba(99,102,241,0.32) 0, transparent 45%), radial-gradient(at 86% 14%, rgba(139,92,246,0.26) 0, transparent 50%), radial-gradient(at 78% 88%, rgba(59,130,246,0.22) 0, transparent 55%), #0B0C14; } ``` Without the aurora, the glass collapses to "dark grey with a border." The two are inseparable. ## Color - **Moonlight #ECEDF2** — primary text. - **Lavender-grey #9298B0** — secondary text, axis labels. - **Periwinkle #8B95FF** — the only chromatic accent. Primary CTA, link hover, chart line. - **Midnight #0B0C14** — page canvas. - **Smoked glass #FFFFFF @ 6%** — card surface (translucent over the aurora). The aurora uses three soft tints of indigo / violet / blue — never anything warm. ## Typography - **Display: Inter Tight 600** at 4.5rem with -3.5% tracking. - **Body: Inter 400** at 1rem with 1.65 leading. | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | Inter Tight | 4.5rem | 600 | -0.035em | | H1 | Inter Tight | 2.625rem | 600 | -0.03em | | H2 | Inter Tight | 1.5rem | 600 | -0.015em | | Body | Inter | 1rem | 400 | -0.005em / 1.65 | ## Geometry - **Radii: 12 / 18 / 24.** Glass needs generous corners to read as a pane. - **Pill buttons** for primary + secondary. - **Section gap: 120px** desktop, 72px mobile. The aurora needs room to breathe. ## Buttons - **Primary** — vertical periwinkle gradient with an inner top-edge gloss. Pill, midnight label at 600. - **Secondary** — smoked glass pill (the same recipe as cards, scaled down). Backdrop-blur 20px. - **Outline** — bare hairline pill at 18% white. - **Ghost** — bare lavender-grey label, hover underline. ## Cards Smoked glass panes — see the recipe above. Radius 24px. Padding 32px minimum. Cards never sit flush; always 24-32px gap so the aurora reads between them. ## Charts & Data Periwinkle area chart, 2px stroke, 22% fill opacity, no gridlines. End-of-line dot. The chart sits inside a glass card, never on the bare midnight. ## Do's and Don'ts - ✅ The indigo-violet aurora is mandatory. Without it the glass dies. - ✅ Cards always include the inner top-edge highlight at 12% — that's what reads as polished pane in the dark. - ✅ One chromatic accent only — periwinkle. Everything else is moonlight/lavender-grey. - ✅ Generous radii (18-24px). Glass at sharp corners reads as plastic. - ❌ No warm tints in the aurora. The system is strictly cool. - ❌ No solid dark cards. If a card isn't smoked glass, it's not in the system. - ❌ No hard drop shadows beyond the soft black ambient. - ❌ No second chromatic accent. Periwinkle is the only chroma allowed. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#ECEDF2` | | secondary | `#9298B0` | | tertiary | `#8B95FF` | | neutral | `#0B0C14` | | surface | `#13141E` | ### Typography - **Display:** Inter Tight - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.5rem / 1.05 / 600 / -0.035em | | H1 | 2.625rem / 1.1 / 600 / -0.03em | | H2 | 1.5rem / 1.3 / 600 / -0.015em | | Body | 1rem / 1.65 / 400 / -0.005em | ### Radius - sm: `12px` - md: `18px` - lg: `24px` - pill: `9999px` ### Shadows - **card:** `0 32px 80px -32px rgba(0, 0, 0, 0.55), 0 2px 8px -4px rgba(0, 0, 0, 0.30)` - **button:** `0 12px 32px -16px rgba(139, 149, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18)` ### Borders - **card:** `1px solid rgba(255, 255, 255, 0.10)` - **divider:** `rgba(255, 255, 255, 0.08)` ### Glass Translucent panes with backdrop-filter — the preview renders cards from these exact values. | Property | Value | |----------|-------| | surface | `rgba(255, 255, 255, 0.06)` | | blur | `32px` | | saturate | `180%` | | border | `1px solid rgba(255, 255, 255, 0.10)` | | shadow | `0 32px 80px -32px rgba(0, 0, 0, 0.55), 0 2px 8px -4px rgba(0, 0, 0, 0.30)` | | innerHighlight | `inset 0 1px 0 rgba(255, 255, 255, 0.12)` | | backdrop | `radial-gradient(at 14% 18%, rgba(99, 102, 241, 0.32) 0px, transparent 45%), radial-gradient(at 86% 14%, rgba(139, 92, 246, 0.26) 0px, transparent 50%), radial-gradient(at 78% 88%, rgba(59, 130, 246, 0.22) 0px, transparent 55%)` | ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `pill` | | background | `linear-gradient(180deg, #9DA6FF 0%, #6E7BFF 100%)` | | color | `#0B0C14` | | border | `1px solid rgba(255, 255, 255, 0.20)` | | padding | `12px 24px` | | fontWeight | `600` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | shadow | `0 12px 32px -16px rgba(139, 149, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35)` | #### Secondary | Property | Value | |----------|-------| | shape | `pill` | | background | `rgba(255, 255, 255, 0.06)` | | color | `#ECEDF2` | | border | `1px solid rgba(255, 255, 255, 0.12)` | | padding | `12px 24px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | backdropBlur | `20px` | | backdropSaturate | `180%` | #### Outline | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#ECEDF2` | | border | `1px solid rgba(255, 255, 255, 0.18)` | | padding | `11px 22px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Ghost | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#9298B0` | | border | `none` | | padding | `11px 6px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `area` | | strokeWidth | `2` | | fillOpacity | `0.22` | | gridlines | `false` | | highlight | `last` | | dotMarker | `true` | | axisColor | `#9298B0` | | palette | `#8B95FF`, `#A5ADFF`, `#C9CEFF` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 8px 24px -8px rgba(139, 149, 255, 0.35), inset 0 1px 0 rgba(255,255,255,0.18)`, transform: `translateY(-1px)`, filter: `saturate(1.15)` - **focus** — outline: `2px solid rgba(139, 149, 255, 0.5)`, outline-offset: `3px` - **active** — transform: `translateY(0) scale(0.98)`, filter: `brightness(0.96)` - **disabled** — opacity: `0.4`, filter: `saturate(0.4) blur(0.4px)` - **loading** — opacity: `0.7` - **selected** — bg: `rgba(139, 149, 255, 0.18)`, color: `#8B95FF` #### Input - **hover** — border: `1px solid rgba(139, 149, 255, 0.4)`, shadow: `inset 0 1px 0 rgba(255,255,255,0.18)` - **focus** — border: `1px solid rgba(139, 149, 255, 0.65)`, shadow: `0 0 0 4px rgba(139, 149, 255, 0.15), inset 0 1px 0 rgba(255,255,255,0.18)` - **disabled** — opacity: `0.4` - **error** — border: `1px solid rgba(248,113,113,0.7)`, shadow: `0 0 0 4px rgba(248,113,113,0.15)` #### Card - **hover** — shadow: `0 16px 48px -16px rgba(139, 149, 255, 0.25), inset 0 1px 0 rgba(255,255,255,0.18)`, transform: `translateY(-2px)`, filter: `saturate(1.1)` - **selected** — border: `1px solid rgba(139, 149, 255, 0.5)` - **dragging** — shadow: `0 24px 64px -16px rgba(0,0,0,0.4)`, transform: `scale(1.02)`, opacity: `0.85` #### Tab - **hover** — bg: `rgba(139, 149, 255, 0.08)` - **focus** — outline: `2px solid rgba(139, 149, 255, 0.5)`, outline-offset: `2px` - **selected** — bg: `rgba(139, 149, 255, 0.18)`, color: `#8B95FF` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Refract.** Long opacity- and blur-driven transitions. Not a hard move, but a shift of light across the glass surface. ```css transition: opacity 350ms cubic-bezier(0.32, 0.72, 0, 1), backdrop-filter 350ms cubic-bezier(0.32, 0.72, 0, 1), transform 350ms cubic-bezier(0.32, 0.72, 0, 1); ``` | Token | Value | |-------|-------| | duration.instant | `100ms` | | duration.fast | `200ms` | | duration.base | `350ms` | | duration.slow | `550ms` | | easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.34, 1.2, 0.64, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `inset 0 1px 0 rgba(255,255,255,0.18)` | Flat glass surface — top-edge gloss only. | | level1 | `0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Soft lift + top-edge gloss. | | level2 | `0 12px 32px -8px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255,255,255,0.18)` | Floating pane — popover. | | level3 | `0 24px 64px -16px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(139, 149, 255, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Sheet — accent rim for depth. | | level4 | `0 40px 96px -24px rgba(0, 0, 0, 0.5), 0 0 48px -12px rgba(139, 149, 255, 0.25), inset 0 1px 0 rgba(255,255,255,0.18)` | Modal — dramatic glow, scrim required. | ### Content - **measure:** `66ch` (max line length for body prose) - **paragraph spacing:** `1.25em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#8B95FF`, underline `hover` - **blockquote:** border `1px solid rgba(139, 149, 255, 0.4)`, padding `0.9em 1.2em` - **code:** background `rgba(139, 149, 255, 0.1)`, color `#8B95FF` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 15.67:1 | AA | AAA | — | | Body text on canvas | 16.68:1 | AA | AAA | — | | Muted text on surface | 6.4:1 | AA | AA | — | | Accent on surface | 6.84:1 | AA-Large | AA | — | | Accent on canvas | 7.28:1 | AA-Large | AAA | — | --- # SYSTEM: Halo Soft Source: https://www.freedesignmd.com/system/halo-soft --- name: "Halo Soft" description: "Soft-glow neon dark. Deep ink canvas with one cyan accent that radiates a soft outer glow on buttons and links. Generous corners, humanist sans, restrained — warmth in the dark without going gaudy." tags: [dark, neon, soft, premium, modern] colors: primary: "#EAEBF0" secondary: "#8B92A6" tertiary: "#7BE5FF" neutral: "#0A0E14" surface: "#10151D" typography: display: Sora body: Sora mono: "JetBrains Mono" scale: hero: "4.5rem / 1.05 / 600 / -0.035em" h1: "2.625rem / 1.1 / 600 / -0.028em" h2: "1.5rem / 1.3 / 600 / -0.015em" body: "1rem / 1.65 / 400 / -0.005em" radius: sm: 12px md: 16px lg: 20px pill: 9999px shadows: card: "0 24px 60px -28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04)" button: "0 0 0 1px rgba(123, 229, 255, 0.30), 0 0 32px -4px rgba(123, 229, 255, 0.50), 0 8px 24px -10px rgba(0, 0, 0, 0.5)" borders: card: "1px solid rgba(255, 255, 255, 0.06)" divider: "rgba(255, 255, 255, 0.08)" buttons: primary: background: #10151D color: #7BE5FF border: 1px solid rgba(123, 229, 255, 0.45) shape: pill padding: 12px 24px font: 600 / 0.9375rem / -0.005em shadow: 0 0 0 1px rgba(123, 229, 255, 0.30), 0 0 32px -4px rgba(123, 229, 255, 0.50), 0 8px 24px -10px rgba(0, 0, 0, 0.5) secondary: background: #10151D color: #EAEBF0 border: 1px solid rgba(255, 255, 255, 0.10) shape: pill padding: 12px 24px font: 500 / 0.9375rem / -0.005em outline: background: transparent color: #EAEBF0 border: 1px solid rgba(255, 255, 255, 0.18) shape: pill padding: 11px 23px font: 500 / 0.9375rem / -0.005em ghost: background: transparent color: #7BE5FF border: none shape: pill padding: 11px 6px font: 500 / 0.9375rem / -0.005em hover: underline charts: variant: line stroke_width: 2 gridlines: false highlight: last dot_marker: true axis_color: "#8B92A6" palette: ["#7BE5FF"] fonts_url: "https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Halo Soft ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Halo Soft** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — pill shape, bg `#10151D`, text `#7BE5FF`, border `1px solid rgba(123, 229, 255, 0.45)`, padding `12px 24px`, weight `600`, shadow `0 0 0 1px rgba(123, 229, 255, 0.30), 0 0 32px -4px rgba(123, 229, 255, 0.50), 0 8px 24px -10px rgba(0, 0, 0, 0.5)`. - **Secondary** — pill shape, bg `#10151D`, text `#EAEBF0`, border `1px solid rgba(255, 255, 255, 0.10)`, padding `12px 24px`, weight `500`. - **Outline** — pill shape, text `#EAEBF0`, border `1px solid rgba(255, 255, 255, 0.18)`, padding `11px 23px`, weight `500`. - **Ghost** — pill shape, text `#7BE5FF`, padding `11px 6px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#10151D` - Border: `1px solid rgba(255, 255, 255, 0.06)` - Shadow: `0 24px 60px -28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04)` - Radius: `radius.lg` (`20px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `line` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#7BE5FF`. #### Typography pairings - **Display (`Sora`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Sora`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Halo Soft is soft-glow neon — the warm middle ground between hairline-precise dev tools and loud maximalist neon. The page sits on a deep ink canvas; one halo-cyan accent appears on the primary CTA, ghost links, and chart line, and that accent radiates a soft outer glow that reads as ambient light. The glow is the entire system. Built for AI assistants with personality, music players, premium creator tools, anything that wants warmth in the dark without going gaudy. ## The Halo Recipe The button glow is the system's signature. It layers four shadows: ```css .halo-button { background: #10151D; color: #7BE5FF; border: 1px solid rgba(123, 229, 255, 0.45); border-radius: 9999px; box-shadow: 0 0 0 1px rgba(123, 229, 255, 0.30), /* inner outline */ 0 0 32px -4px rgba(123, 229, 255, 0.50), /* soft outer halo */ 0 8px 24px -10px rgba(0, 0, 0, 0.5); /* ambient drop */ } ``` The 32px halo at 50% alpha is the magic. Lower opacity dies; higher gets gaudy. 50% is the sweet spot. ## Color - **Moonlight #EAEBF0** — primary text. - **Blue-grey #8B92A6** — secondary text, axis labels. - **Halo Cyan #7BE5FF** — the only chromatic accent. Primary CTA, ghost link, chart line. - **Ink #0A0E14** — page canvas. Near-black with a faint cool bias. - **Surface #10151D** — card and button base, one notch above the canvas. One chromatic accent. Period. ## Typography **One family — Sora.** Humanist sans with personality, softer than Inter Tight, more interesting than Inter. | Role | Size | Weight | Tracking | |------|------|--------|----------| | Hero | 4.5rem | 600 | -0.035em | | H1 | 2.625rem | 600 | -0.028em | | H2 | 1.5rem | 600 | -0.015em | | Body | 1rem | 400 | -0.005em / 1.65 | The single-family decision keeps the page calm so the halo can be the loudest thing. ## Geometry - **Radii: 12 / 16 / 20, plus pill.** Generous and soft throughout. The system is rounded. - **Section gap: 120px** desktop, 72px mobile. - **12-column grid** with 28px gutters. ## Buttons - **Primary** — surface fill, cyan label, **the halo glow**. Pill shape. The glow IS the button. - **Secondary** — surface pill with a hairline. No glow. - **Outline** — bare hairline pill at 18% white. - **Ghost** — bare cyan label, hover underline. The halo appears on primary only. Adding it to secondary kills the hierarchy. ## Cards Surface cards on the ink canvas, 1px white hairline at 6% opacity, soft 16px corners, low ambient shadow. Padding 28-32px. Cards never glow — only buttons and links carry chroma. ## Charts & Data Single-color line in halo cyan, 2px stroke, end-of-line dot marker, no gridlines. The line itself can carry a soft cyan glow via SVG filter (`drop-shadow(0 0 8px rgba(123,229,255,0.4))`) so the chart matches the button's signature. ## Do's and Don'ts - ✅ The halo glow is the system's signature. Without it, this is just another dark theme. - ✅ Glow on primary CTA only. Secondary stays quiet. - ✅ One chromatic accent — halo cyan. Everything else is moonlight/blue-grey. - ✅ Generous 16-20px radii. Soft throughout. - ❌ No second chromatic accent. The cyan stands alone. - ❌ No glow on cards or surfaces. Glow is for actions, not containers. - ❌ No sharp corners. The system is soft from button to card. - ❌ No bright/saturated cyan above #7BE5FF. The halo depends on a slightly muted hue to feel premium rather than loud. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#EAEBF0` | | secondary | `#8B92A6` | | tertiary | `#7BE5FF` | | neutral | `#0A0E14` | | surface | `#10151D` | ### Typography - **Display:** Sora - **Body:** Sora - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.5rem / 1.05 / 600 / -0.035em | | H1 | 2.625rem / 1.1 / 600 / -0.028em | | H2 | 1.5rem / 1.3 / 600 / -0.015em | | Body | 1rem / 1.65 / 400 / -0.005em | ### Radius - sm: `12px` - md: `16px` - lg: `20px` - pill: `9999px` ### Shadows - **card:** `0 24px 60px -28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04)` - **button:** `0 0 0 1px rgba(123, 229, 255, 0.30), 0 0 32px -4px rgba(123, 229, 255, 0.50), 0 8px 24px -10px rgba(0, 0, 0, 0.5)` ### Borders - **card:** `1px solid rgba(255, 255, 255, 0.06)` - **divider:** `rgba(255, 255, 255, 0.08)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `pill` | | background | `#10151D` | | color | `#7BE5FF` | | border | `1px solid rgba(123, 229, 255, 0.45)` | | padding | `12px 24px` | | fontWeight | `600` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | shadow | `0 0 0 1px rgba(123, 229, 255, 0.30), 0 0 32px -4px rgba(123, 229, 255, 0.50), 0 8px 24px -10px rgba(0, 0, 0, 0.5)` | #### Secondary | Property | Value | |----------|-------| | shape | `pill` | | background | `#10151D` | | color | `#EAEBF0` | | border | `1px solid rgba(255, 255, 255, 0.10)` | | padding | `12px 24px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Outline | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#EAEBF0` | | border | `1px solid rgba(255, 255, 255, 0.18)` | | padding | `11px 23px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Ghost | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#7BE5FF` | | border | `none` | | padding | `11px 6px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `line` | | strokeWidth | `2` | | gridlines | `false` | | highlight | `last` | | dotMarker | `true` | | axisColor | `#8B92A6` | | palette | `#7BE5FF` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 8px 24px -10px rgba(123, 229, 255, 0.35)`, transform: `translateY(-1px)`, filter: `brightness(1.02)` - **focus** — outline: `2px solid rgba(123, 229, 255, 0.4)`, outline-offset: `3px` - **active** — transform: `translateY(0) scale(0.98)` - **disabled** — opacity: `0.4`, filter: `saturate(0.5)` - **loading** — opacity: `0.65` - **selected** — bg: `rgba(123, 229, 255, 0.18)`, color: `#7BE5FF` #### Input - **hover** — bg: `rgba(123, 229, 255, 0.03)`, border: `1px solid rgba(123, 229, 255, 0.4)` - **focus** — border: `1px solid rgba(123, 229, 255, 0.6)`, shadow: `0 0 0 4px rgba(123, 229, 255, 0.12)` - **disabled** — opacity: `0.4` - **error** — border: `1px solid rgba(244,114,182,0.7)`, shadow: `0 0 0 4px rgba(244,114,182,0.15)` #### Card - **hover** — shadow: `0 16px 40px -16px rgba(123, 229, 255, 0.3)`, transform: `translateY(-3px)` - **selected** — bg: `rgba(123, 229, 255, 0.04)`, border: `1px solid rgba(123, 229, 255, 0.5)` - **dragging** — transform: `scale(1.03) rotate(-0.8deg)`, opacity: `0.92` #### Tab - **hover** — bg: `rgba(123, 229, 255, 0.08)`, color: `#7BE5FF` - **focus** — outline: `2px solid rgba(123, 229, 255, 0.4)`, outline-offset: `2px` - **selected** — bg: `rgba(123, 229, 255, 0.16)`, color: `#7BE5FF` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Soft fade.** Long, gentle transitions with a symmetric easing curve. Motion is calming, never intrusive. ```css transition: all 400ms cubic-bezier(0.45, 0.05, 0.55, 0.95); ``` | Token | Value | |-------|-------| | duration.instant | `120ms` | | duration.fast | `240ms` | | duration.base | `400ms` | | duration.slow | `600ms` | | easing.standard | `cubic-bezier(0.45, 0.05, 0.55, 0.95)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.45, 1.4, 0.55, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the tone separates, not the shadow. | | level1 | `0 2px 6px -2px rgba(123, 229, 255, 0.12)` | Soft tinted lift. | | level2 | `0 8px 24px -10px rgba(123, 229, 255, 0.2)` | Floating card — pastel-tinted shadow. | | level3 | `0 16px 48px -16px rgba(123, 229, 255, 0.28)` | Sheet — visible tinted glow. | | level4 | `0 32px 80px -24px rgba(123, 229, 255, 0.4)` | Modal — tinted wash, scrim required. | ### Content - **measure:** `64ch` (max line length for body prose) - **paragraph spacing:** `1.35em` - **list indent:** `1.5em` - **list gap:** `0.6em` - **link:** color `#7BE5FF`, underline `hover` - **blockquote:** border `2px solid rgba(123, 229, 255, 0.5)`, padding `0.9em 1.2em` - **code:** background `rgba(123, 229, 255, 0.1)`, color `#EAEBF0` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 15.38:1 | AA | AAA | — | | Body text on canvas | 16.25:1 | AA | AAA | — | | Muted text on surface | 5.89:1 | AA | AA | — | | Accent on surface | 12.64:1 | AA-Large | AAA | — | | Accent on canvas | 13.35:1 | AA-Large | AAA | — | --- # SYSTEM: Spotlight Noir Source: https://www.freedesignmd.com/system/spotlight-noir --- name: "Spotlight Noir" description: "A single soft spotlight beam falls from the top-center across a near-black canvas, fading to ink at the edges. Cards float as solid surfaces in the beam. One warm-amber accent. Theatrical without being maximalist." tags: [dark, gradient, premium, cinematic, minimal] colors: primary: "#F0EDE6" secondary: "#8E8A82" tertiary: "#E5A95A" neutral: "#0B0A08" surface: "#16140F" typography: display: "Cormorant Garamond" body: Inter mono: "JetBrains Mono" scale: hero: "5.5rem / 1 / 400 / -0.025em" h1: "3.25rem / 1.05 / 400 / -0.02em" h2: "1.625rem / 1.3 / 500 / -0.012em" body: "1rem / 1.7 / 400 / -0.003em" radius: sm: 4px md: 8px lg: 12px shadows: card: "0 32px 80px -32px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(229, 169, 90, 0.06)" button: "0 8px 24px -10px rgba(229, 169, 90, 0.45), inset 0 1px 0 rgba(255, 220, 170, 0.20)" borders: card: "1px solid rgba(229, 169, 90, 0.06)" divider: "rgba(240, 237, 230, 0.08)" glass: surface: "#16140F" blur: 0px border: "1px solid rgba(229, 169, 90, 0.06)" shadow: "0 32px 80px -32px rgba(0, 0, 0, 0.65)" backdrop: "radial-gradient(ellipse 90% 70% at 50% 0%, rgba(255, 230, 190, 0.18) 0%, rgba(255, 230, 190, 0.08) 25%, transparent 60%), radial-gradient(ellipse 60% 40% at 50% 12%, rgba(255, 215, 160, 0.14) 0%, transparent 70%)" buttons: primary: background: linear-gradient(180deg, #F0BC74 0%, #E5A95A 50%, #C8893E 100%) color: #1A1408 border: 1px solid rgba(255, 220, 170, 0.25) shape: rounded padding: 12px 24px font: 600 / 0.9375rem / -0.005em shadow: 0 8px 24px -10px rgba(229, 169, 90, 0.45), inset 0 1px 0 rgba(255, 220, 170, 0.35) secondary: background: #16140F color: #F0EDE6 border: 1px solid rgba(229, 169, 90, 0.20) shape: rounded padding: 12px 24px font: 500 / 0.9375rem / -0.005em outline: background: transparent color: #F0EDE6 border: 1px solid rgba(240, 237, 230, 0.18) shape: rounded padding: 11px 23px font: 500 / 0.9375rem / -0.005em ghost: background: transparent color: #E5A95A border: none shape: rounded padding: 11px 6px font: 500 / 0.9375rem / -0.005em hover: underline charts: variant: area stroke_width: 2 fill_opacity: 0.18 gridlines: false highlight: last dot_marker: true axis_color: "#8E8A82" palette: ["#E5A95A", "#C8893E", "#9A6A2C"] fonts_url: "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Spotlight Noir ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Spotlight Noir** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `linear-gradient(180deg, #F0BC74 0%, #E5A95A 50%, #C8893E 100%)`, text `#1A1408`, border `1px solid rgba(255, 220, 170, 0.25)`, padding `12px 24px`, weight `600`, shadow `0 8px 24px -10px rgba(229, 169, 90, 0.45), inset 0 1px 0 rgba(255, 220, 170, 0.35)`. - **Secondary** — rounded shape, bg `#16140F`, text `#F0EDE6`, border `1px solid rgba(229, 169, 90, 0.20)`, padding `12px 24px`, weight `500`. - **Outline** — rounded shape, text `#F0EDE6`, border `1px solid rgba(240, 237, 230, 0.18)`, padding `11px 23px`, weight `500`. - **Ghost** — rounded shape, text `#E5A95A`, padding `11px 6px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#16140F` - Border: `1px solid rgba(229, 169, 90, 0.06)` - Shadow: `0 32px 80px -32px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(229, 169, 90, 0.06)` - Radius: `radius.lg` (`12px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. > This system ships a **glass treatment** — see the Glass token table. > Apply `backdrop-filter: blur(0px)` to translucent panes. > The page must have a backdrop (gradient mesh / blurred orbs) for glass to refract. #### Charts - Bar/line variant: `area` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#E5A95A`, `#C8893E`, `#9A6A2C`. #### Typography pairings - **Display (`Cormorant Garamond`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Spotlight Noir is built on one decision: a single soft spotlight beam falls from the top-center of the page across a near-black canvas, fading to ink at the edges. Cards float in the beam as solid graphite surfaces (not glass — solid). Type is high-contrast serif at theatrical scale. One warm-amber accent does the chromatic work. The system is theatrical without being maximalist — restraint plus one piece of stagecraft. For premium product launches, fashion, automotive, fragrance, anything cinematic. ## The Spotlight Recipe The beam is two stacked radial gradients — a wide soft outer halo and a tighter brighter core — both anchored at the top-center, fading to transparent before they reach the edges: ```css body { background: radial-gradient(ellipse 60% 40% at 50% 12%, rgba(255,215,160,0.14) 0%, transparent 70%), radial-gradient(ellipse 90% 70% at 50% 0%, rgba(255,230,190,0.18) 0%, rgba(255,230,190,0.08) 25%, transparent 60%), #0B0A08; } ``` The beam is **warm** (cream/amber), the canvas is **near-black**. The contrast is the system. Without the beam the page is just dark; without the dark the beam dies. ## Color - **Moonlight #F0EDE6** — primary text in the beam. - **Warm grey #8E8A82** — secondary text, axis labels. - **Amber #E5A95A** — the only chromatic accent. Primary CTA, ghost link, chart line. - **Ink #0B0A08** — page canvas (near-black, faint warm bias). - **Graphite #16140F** — card surface, lifted just above the canvas. The amber sits inside the beam's color family — warm cream → warm amber. They are the same world. ## Typography - **Display: Cormorant Garamond 400** at 5.5rem with -2.5% tracking. High-contrast serif, theatrical at scale, never bold. - **Body: Inter 400** at 1rem with 1.7 leading. | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | Cormorant Garamond | 5.5rem | 400 | -0.025em | | H1 | Cormorant Garamond | 3.25rem | 400 | -0.02em | | H2 | Cormorant Garamond | 1.625rem | 500 | -0.012em | | Body | Inter | 1rem | 400 | -0.003em / 1.7 | Display lives at weight 400. The serif's optical contrast does the work — bold would kill it. ## Geometry - **Radii: 4 / 8 / 12.** Refined and composed. Never pill, never sharp. - **Section gap: 144px** desktop, 80px mobile. The beam needs room. - **Hero is centered** under the beam — this is the one system where centered hero is mandatory, because the beam is the focal point. ## Buttons - **Primary** — vertical warm-amber gradient with a soft underglow + inner top gloss. The CTA reads as a polished metal handle catching the beam. - **Secondary** — solid graphite with a faint amber hairline. - **Outline** — bare hairline at 18% white. - **Ghost** — bare amber label, hover underline. ## Cards **Solid graphite surfaces**, 1px amber hairline at 6% opacity, 8-12px corners, deep dark shadow tinted slightly warm. Padding 32px. Cards are NOT glass — that's a different system. Solid surfaces in the beam. ## Charts & Data Amber area chart at 2px stroke and 18% fill opacity, no gridlines, end-of-line dot. The chart sits inside a graphite card so the page beam stays in the background. ## Do's and Don'ts - ✅ The spotlight beam is mandatory and lives at top-center. The whole identity rests on it. - ✅ Cards are solid graphite, never glass. - ✅ Hero is centered under the beam. The composition is the system. - ✅ One chromatic accent — warm amber. It sits inside the beam's color family. - ❌ No glass cards. That's a different system. - ❌ No second chromatic accent. The amber stands alone. - ❌ No bold display. Cormorant Garamond at weight 400 only. - ❌ No second light source — no rim glow at the bottom, no side light. One beam, top-center, period. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#F0EDE6` | | secondary | `#8E8A82` | | tertiary | `#E5A95A` | | neutral | `#0B0A08` | | surface | `#16140F` | ### Typography - **Display:** Cormorant Garamond - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 5.5rem / 1 / 400 / -0.025em | | H1 | 3.25rem / 1.05 / 400 / -0.02em | | H2 | 1.625rem / 1.3 / 500 / -0.012em | | Body | 1rem / 1.7 / 400 / -0.003em | ### Radius - sm: `4px` - md: `8px` - lg: `12px` ### Shadows - **card:** `0 32px 80px -32px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(229, 169, 90, 0.06)` - **button:** `0 8px 24px -10px rgba(229, 169, 90, 0.45), inset 0 1px 0 rgba(255, 220, 170, 0.20)` ### Borders - **card:** `1px solid rgba(229, 169, 90, 0.06)` - **divider:** `rgba(240, 237, 230, 0.08)` ### Glass Translucent panes with backdrop-filter — the preview renders cards from these exact values. | Property | Value | |----------|-------| | surface | `#16140F` | | blur | `0px` | | border | `1px solid rgba(229, 169, 90, 0.06)` | | shadow | `0 32px 80px -32px rgba(0, 0, 0, 0.65)` | | backdrop | `radial-gradient(ellipse 90% 70% at 50% 0%, rgba(255, 230, 190, 0.18) 0%, rgba(255, 230, 190, 0.08) 25%, transparent 60%), radial-gradient(ellipse 60% 40% at 50% 12%, rgba(255, 215, 160, 0.14) 0%, transparent 70%)` | ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `linear-gradient(180deg, #F0BC74 0%, #E5A95A 50%, #C8893E 100%)` | | color | `#1A1408` | | border | `1px solid rgba(255, 220, 170, 0.25)` | | padding | `12px 24px` | | fontWeight | `600` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | shadow | `0 8px 24px -10px rgba(229, 169, 90, 0.45), inset 0 1px 0 rgba(255, 220, 170, 0.35)` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#16140F` | | color | `#F0EDE6` | | border | `1px solid rgba(229, 169, 90, 0.20)` | | padding | `12px 24px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#F0EDE6` | | border | `1px solid rgba(240, 237, 230, 0.18)` | | padding | `11px 23px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#E5A95A` | | border | `none` | | padding | `11px 6px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `area` | | strokeWidth | `2` | | fillOpacity | `0.18` | | gridlines | `false` | | highlight | `last` | | dotMarker | `true` | | axisColor | `#8E8A82` | | palette | `#E5A95A`, `#C8893E`, `#9A6A2C` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 8px 24px -8px rgba(229, 169, 90, 0.35), inset 0 1px 0 rgba(255,255,255,0.18)`, transform: `translateY(-1px)`, filter: `saturate(1.15)` - **focus** — outline: `2px solid rgba(229, 169, 90, 0.5)`, outline-offset: `3px` - **active** — transform: `translateY(0) scale(0.98)`, filter: `brightness(0.96)` - **disabled** — opacity: `0.4`, filter: `saturate(0.4) blur(0.4px)` - **loading** — opacity: `0.7` - **selected** — bg: `rgba(229, 169, 90, 0.18)`, color: `#E5A95A` #### Input - **hover** — border: `1px solid rgba(229, 169, 90, 0.4)`, shadow: `inset 0 1px 0 rgba(255,255,255,0.18)` - **focus** — border: `1px solid rgba(229, 169, 90, 0.65)`, shadow: `0 0 0 4px rgba(229, 169, 90, 0.15), inset 0 1px 0 rgba(255,255,255,0.18)` - **disabled** — opacity: `0.4` - **error** — border: `1px solid rgba(248,113,113,0.7)`, shadow: `0 0 0 4px rgba(248,113,113,0.15)` #### Card - **hover** — shadow: `0 16px 48px -16px rgba(229, 169, 90, 0.25), inset 0 1px 0 rgba(255,255,255,0.18)`, transform: `translateY(-2px)`, filter: `saturate(1.1)` - **selected** — border: `1px solid rgba(229, 169, 90, 0.5)` - **dragging** — shadow: `0 24px 64px -16px rgba(0,0,0,0.4)`, transform: `scale(1.02)`, opacity: `0.85` #### Tab - **hover** — bg: `rgba(229, 169, 90, 0.08)` - **focus** — outline: `2px solid rgba(229, 169, 90, 0.5)`, outline-offset: `2px` - **selected** — bg: `rgba(229, 169, 90, 0.18)`, color: `#E5A95A` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Refract.** Long opacity- and blur-driven transitions. Not a hard move, but a shift of light across the glass surface. ```css transition: opacity 350ms cubic-bezier(0.32, 0.72, 0, 1), backdrop-filter 350ms cubic-bezier(0.32, 0.72, 0, 1), transform 350ms cubic-bezier(0.32, 0.72, 0, 1); ``` | Token | Value | |-------|-------| | duration.instant | `100ms` | | duration.fast | `200ms` | | duration.base | `350ms` | | duration.slow | `550ms` | | easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.34, 1.2, 0.64, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `inset 0 1px 0 rgba(255,255,255,0.18)` | Flat glass surface — top-edge gloss only. | | level1 | `0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Soft lift + top-edge gloss. | | level2 | `0 12px 32px -8px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255,255,255,0.18)` | Floating pane — popover. | | level3 | `0 24px 64px -16px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(229, 169, 90, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Sheet — accent rim for depth. | | level4 | `0 40px 96px -24px rgba(0, 0, 0, 0.5), 0 0 48px -12px rgba(229, 169, 90, 0.25), inset 0 1px 0 rgba(255,255,255,0.18)` | Modal — dramatic glow, scrim required. | ### Content - **measure:** `66ch` (max line length for body prose) - **paragraph spacing:** `1.25em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#E5A95A`, underline `hover` - **blockquote:** border `1px solid rgba(229, 169, 90, 0.4)`, padding `0.9em 1.2em` - **code:** background `rgba(229, 169, 90, 0.1)`, color `#E5A95A` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 15.74:1 | AA | AAA | — | | Body text on canvas | 16.93:1 | AA | AAA | — | | Muted text on surface | 5.35:1 | AA | AA | — | | Accent on surface | 8.9:1 | AA-Large | AAA | — | | Accent on canvas | 9.57:1 | AA-Large | AAA | — | --- # SYSTEM: Onyx Quarterly Source: https://www.freedesignmd.com/system/onyx-quarterly --- name: "Onyx Quarterly" description: "Premium dark editorial. Flat near-black canvas, oversized Fraunces variable serif at 6.5rem with opsz/SOFT axes, hairline rules between sections, one warm-cream accent for pull-words. The discipline of a printed quarterly, in the dark." tags: [dark, editorial, serif, premium, magazine] colors: primary: "#EEEAE0" secondary: "#8C857A" tertiary: "#E8C896" neutral: "#0C0B09" surface: "#15130F" typography: display: Fraunces body: Inter mono: "JetBrains Mono" scale: hero: "6.5rem / 0.98 / 400 / -0.035em" h1: "3.5rem / 1.05 / 400 / -0.028em" h2: "1.625rem / 1.3 / 500 / -0.012em" body: "1.0625rem / 1.75 / 400 / -0.003em" radius: sm: 0px md: 2px lg: 4px shadows: card: "0 0 0 1px rgba(238, 234, 224, 0.10)" button: none borders: card: "1px solid rgba(238, 234, 224, 0.10)" divider: "rgba(238, 234, 224, 0.18)" buttons: primary: background: #E8C896 color: #0C0B09 border: 1px solid #E8C896 shape: sharp padding: 14px 26px font: mono / 500 / 0.75rem / 0.14em uppercase: true suffix: arrow secondary: background: transparent color: #EEEAE0 border: 1px solid #EEEAE0 shape: sharp padding: 14px 26px font: mono / 500 / 0.75rem / 0.14em uppercase: true outline: background: transparent color: #EEEAE0 border: 1px solid rgba(238, 234, 224, 0.30) shape: sharp padding: 13px 25px font: mono / 500 / 0.75rem / 0.14em uppercase: true ghost: background: transparent color: #E8C896 border: none shape: sharp padding: 13px 4px font: mono / 500 / 0.75rem / 0.14em uppercase: true hover: underline charts: variant: "thin-bars" stroke_width: 1 gridlines: false bar_radius: 0px bar_gap: 10px highlight: last axis_color: "#8C857A" palette: ["#EEEAE0", "#EEEAE0", "#E8C896"] fonts_url: "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Onyx Quarterly ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Onyx Quarterly** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#E8C896`, text `#0C0B09`, border `1px solid #E8C896`, padding `14px 26px`, weight `500`, uppercased. - **Secondary** — sharp shape, text `#EEEAE0`, border `1px solid #EEEAE0`, padding `14px 26px`, weight `500`, uppercased. - **Outline** — sharp shape, text `#EEEAE0`, border `1px solid rgba(238, 234, 224, 0.30)`, padding `13px 25px`, weight `500`, uppercased. - **Ghost** — sharp shape, text `#E8C896`, padding `13px 4px`, weight `500`, uppercased. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#15130F` - Border: `1px solid rgba(238, 234, 224, 0.10)` - Shadow: `0 0 0 1px rgba(238, 234, 224, 0.10)` - Radius: `radius.lg` (`4px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `thin-bars` - Bar radius: `0px` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#EEEAE0`, `#EEEAE0`, `#E8C896`. #### Typography pairings - **Display (`Fraunces`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Onyx Quarterly is the dark editorial counterpart to printed-magazine systems. Where Spotlight Noir uses a top-down beam to theater the page, Onyx removes the beam entirely: the canvas is **flat near-black**, uniform across the page. The serif at 6.5rem and the hairline rules between sections do all the work. The system is the discipline of a printed quarterly, transposed into the dark. For premium magazines that ship a dark mode, fashion-week microsites, cinema/streaming brand pages, anything that should read as a monograph. ## Color - **Moonlight #EEEAE0** — primary text. Warm bias to sit on the warm-near-black. - **Warm grey #8C857A** — captions, secondary text, axis labels. - **Warm cream #E8C896** — the only chromatic accent. Pull-words, primary CTA, active links. - **Near-black #0C0B09** — page canvas. Uniform. No beam, no gradient. - **Surface #15130F** — barely lifted; cards are wireframes, not solid panes. Color is rationed: mostly moonlight on near-black with two strokes of warm cream. ## Typography **Fraunces is the entire system.** Variable axes (opsz + SOFT) give it the optical warmth that makes the serif sing in the dark. | Role | Font | Size | Weight | Tracking | opsz | SOFT | |------|------|------|--------|----------|------|------| | Hero | Fraunces | 6.5rem | 400 | -0.035em | 144 | 100 | | H1 | Fraunces | 3.5rem | 400 | -0.028em | 96 | 80 | | H2 | Fraunces | 1.625rem | 500 | -0.012em | 36 | 50 | | Body | Inter | 1.0625rem | 400 | -0.003em / 1.75 | — | — | | Caption | JetBrains Mono | 0.75rem | 500 | 0.14em uppercase | — | — | ```css .onyx-hero { font-family: "Fraunces", serif; font-size: 6.5rem; font-weight: 400; letter-spacing: -0.035em; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0; color: #EEEAE0; } ``` Captions use mono uppercase at 12px / 14% tracking — the contrast against the serif is the texture. ## Geometry - **Radii: 0 / 2 / 4.** Editorial is rectangles and hairlines. - **Hairline rules** between every section at 18% moonlight. - **Asymmetric columns.** Hero usually sits in columns 2-9; pull-quotes break into the margin. - **Section gap: 160px** desktop, 96px mobile. ## Buttons All buttons share the editorial anatomy: sharp corners, mono caps label at 12px / 14% tracking, 14px vertical padding. - **Primary** — solid warm cream, near-black label. Optional → arrow suffix. - **Secondary** — bare moonlight rectangle. - **Outline** — moonlight hairline at 30%. - **Ghost** — warm-cream label, hover underline. ## Cards Surface barely lifted (15-13-15 vs 12-11-9 canvas), 1px moonlight hairline at 10%, sharp 2-4px corners, **no shadow**. Cards are wireframes filled with content. ## Charts & Data Single-color thin bars in moonlight with the lead bar in warm cream, 1px stroke, no gridlines, no fill, 10px gap. Axis labels in warm grey at 11px mono caps. ## Do's and Don'ts - ✅ Flat uniform near-black canvas. No beam, no gradient. - ✅ Fraunces with variable axes (opsz + SOFT) at weight 400 only. - ✅ Hairline rules between every section. They are the page's spine. - ✅ One chromatic accent — warm cream. Used on lead, not everywhere. - ❌ No background gradient or beam. The canvas is uniform. - ❌ No bold display weight. Serif lives at 400. - ❌ No second chromatic accent. - ❌ No rounded corners beyond 4px. No pills, no soft. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#EEEAE0` | | secondary | `#8C857A` | | tertiary | `#E8C896` | | neutral | `#0C0B09` | | surface | `#15130F` | ### Typography - **Display:** Fraunces - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 6.5rem / 0.98 / 400 / -0.035em | | H1 | 3.5rem / 1.05 / 400 / -0.028em | | H2 | 1.625rem / 1.3 / 500 / -0.012em | | Body | 1.0625rem / 1.75 / 400 / -0.003em | ### Radius - sm: `0px` - md: `2px` - lg: `4px` ### Shadows - **card:** `0 0 0 1px rgba(238, 234, 224, 0.10)` - **button:** `none` ### Borders - **card:** `1px solid rgba(238, 234, 224, 0.10)` - **divider:** `rgba(238, 234, 224, 0.18)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#E8C896` | | color | `#0C0B09` | | border | `1px solid #E8C896` | | padding | `14px 26px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.75rem` | | tracking | `0.14em` | | uppercase | `true` | | suffix | `arrow` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#EEEAE0` | | border | `1px solid #EEEAE0` | | padding | `14px 26px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.75rem` | | tracking | `0.14em` | | uppercase | `true` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#EEEAE0` | | border | `1px solid rgba(238, 234, 224, 0.30)` | | padding | `13px 25px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.75rem` | | tracking | `0.14em` | | uppercase | `true` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#E8C896` | | border | `none` | | padding | `13px 4px` | | fontFamily | `mono` | | fontWeight | `500` | | fontSize | `0.75rem` | | tracking | `0.14em` | | uppercase | `true` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1` | | gridlines | `false` | | barRadius | `0px` | | barGap | `10px` | | highlight | `last` | | axisColor | `#8C857A` | | palette | `#EEEAE0`, `#EEEAE0`, `#E8C896` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(232, 200, 150, 0.92)`, shadow: `0 4px 20px -8px rgba(232, 200, 150, 0.4)` - **focus** — outline: `1.5px solid #E8C896`, outline-offset: `4px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.95)` - **disabled** — opacity: `0.45` - **loading** — opacity: `0.7` - **selected** — bg: `#EEEAE0`, color: `#15130F` #### Input - **hover** — border: `1px solid #EEEAE0` - **focus** — border: `1px solid #E8C896`, shadow: `0 1px 0 0 #E8C896` - **disabled** — opacity: `0.45` - **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B` #### Card - **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)` - **selected** — border: `1px solid #EEEAE0` #### Tab - **hover** — color: `#EEEAE0` - **focus** — outline: `1.5px solid #E8C896`, outline-offset: `3px` - **selected** — color: `#E8C896`, border: `0 0 2px 0 solid #E8C896` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone. ```css transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); ``` | Token | Value | |-------|-------| | duration.instant | `80ms` | | duration.fast | `180ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Hairline only — typical editorial resting state. | | level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. | | level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. | | level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. | | level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. | ### Content - **measure:** `60ch` (max line length for body prose) - **paragraph spacing:** `1.5em` - **list indent:** `1.75em` - **list gap:** `0.55em` - **link:** color `#E8C896`, underline `always` - **blockquote:** border `4px solid #E8C896`, padding `0.4em 0 0.4em 1.5em` - **code:** background `rgba(238, 234, 224, 0.06)`, color `#EEEAE0` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 15.44:1 | AA | AAA | — | | Body text on canvas | 16.38:1 | AA | AAA | — | | Muted text on surface | 5.08:1 | AA | AA | — | | Accent on surface | 11.6:1 | AA-Large | AAA | — | | Accent on canvas | 12.3:1 | AA-Large | AAA | — | --- # SYSTEM: Gunmetal Forge Source: https://www.freedesignmd.com/system/gunmetal-forge --- name: "Gunmetal Forge" description: "Dark brushed metallic. Anthracite canvas with cool brushed-steel CTAs catching a polished top-edge highlight under directional light. Premium hardware in dark theme — pro tools, audio, automotive." tags: [metallic, dark, premium, hardware, modern] colors: primary: "#E8EAEE" secondary: "#8C95A0" tertiary: "#B8C0CC" neutral: "#181B20" surface: "#22262D" typography: display: "Space Grotesk" body: Inter mono: "IBM Plex Mono" scale: hero: "4.5rem / 1.02 / 600 / -0.04em" h1: "2.75rem / 1.08 / 600 / -0.03em" h2: "1.5rem / 1.3 / 600 / -0.015em" body: "1rem / 1.6 / 400 / -0.005em" radius: sm: 4px md: 6px lg: 8px shadows: card: "0 0 0 1px rgba(255, 255, 255, 0.05), 0 12px 32px -16px rgba(0, 0, 0, 0.55)" button: "0 8px 20px -8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 -1px 0 rgba(0, 0, 0, 0.40)" borders: card: "1px solid rgba(255, 255, 255, 0.06)" divider: "rgba(255, 255, 255, 0.08)" buttons: primary: background: linear-gradient(180deg, #C8D0DC 0%, #8C95A0 50%, #4A525E 100%) color: #181B20 border: 1px solid rgba(255, 255, 255, 0.22) shape: rounded padding: 12px 22px font: 600 / 0.9375rem / -0.01em shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.40) secondary: background: #22262D color: #E8EAEE border: 1px solid rgba(255, 255, 255, 0.10) shape: rounded padding: 12px 22px font: 500 / 0.9375rem / -0.005em outline: background: transparent color: #E8EAEE border: 1px solid rgba(255, 255, 255, 0.16) shape: rounded padding: 11px 21px font: 500 / 0.9375rem / -0.005em ghost: background: transparent color: #B8C0CC border: none shape: rounded padding: 11px 6px font: 500 / 0.9375rem / -0.005em hover: underline charts: variant: "rounded-bars" stroke_width: 2 gridlines: false bar_radius: 3px bar_gap: 8px highlight: all axis_color: "#8C95A0" palette: ["#B8C0CC", "#7E8794", "#4A525E"] fonts_url: "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Gunmetal Forge ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Gunmetal Forge** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `linear-gradient(180deg, #C8D0DC 0%, #8C95A0 50%, #4A525E 100%)`, text `#181B20`, border `1px solid rgba(255, 255, 255, 0.22)`, padding `12px 22px`, weight `600`, shadow `0 8px 20px -8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.40)`. - **Secondary** — rounded shape, bg `#22262D`, text `#E8EAEE`, border `1px solid rgba(255, 255, 255, 0.10)`, padding `12px 22px`, weight `500`. - **Outline** — rounded shape, text `#E8EAEE`, border `1px solid rgba(255, 255, 255, 0.16)`, padding `11px 21px`, weight `500`. - **Ghost** — rounded shape, text `#B8C0CC`, padding `11px 6px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#22262D` - Border: `1px solid rgba(255, 255, 255, 0.06)` - Shadow: `0 0 0 1px rgba(255, 255, 255, 0.05), 0 12px 32px -16px rgba(0, 0, 0, 0.55)` - Radius: `radius.lg` (`8px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `rounded-bars` - Bar radius: `3px` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `all` — emphasize a single bar/point per chart. - Use the declared palette in order: `#B8C0CC`, `#7E8794`, `#4A525E`. #### Typography pairings - **Display (`Space Grotesk`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`IBM Plex Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Gunmetal Forge is the dark counterpart to brushed-metal systems. Anthracite canvas, polished-steel CTA, no chromatic color anywhere. The metallic surface is rationed — primary CTA + one hero badge — and on the dark canvas it catches a top-edge highlight that reads as directional light hitting machined steel. For premium hardware product pages shipping a dark theme: audio equipment, automotive interfaces, professional watches, pro tools, defense / aerospace adjacent products. ## The Metallic Recipe The brushed-steel button is a vertical 3-stop gradient with a polished top-edge highlight + bottom-edge shadow. On the dark canvas the highlight reads as light catching a real surface: ```css .gunmetal-cta { background: linear-gradient(180deg, #C8D0DC 0%, #8C95A0 50%, #4A525E 100%); color: #181B20; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), /* polished top-edge */ inset 0 -1px 0 rgba(0, 0, 0, 0.40), /* bottom-edge shadow */ 0 8px 20px -8px rgba(0, 0, 0, 0.55); /* ambient drop */ } ``` The 50% mid-stop is the brushed band — without it the gradient reads as a flat grey button. The top-edge highlight at 45% white is the key on dark backgrounds; lower opacity dies, higher reads as plastic. ## Color - **Moonlight #E8EAEE** — primary text. - **Steel #8C95A0** — secondary text, axis labels. - **Polished Steel #B8C0CC** — metallic top-stop, ghost button label. - **Anthracite #181B20** — page canvas. Deep cool grey, not pure black. - **Gunmetal #22262D** — card surface, lifted from the canvas. Three neutrals + two metal stops. No chromatic color at all. ## Typography - **Display: Space Grotesk 600** at 4.5rem with -4% tracking. Engineered neo-grotesque. - **Body: Inter 400** at 1rem with 1.6 leading. - **Mono: IBM Plex Mono 500** for spec callouts. | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | Space Grotesk | 4.5rem | 600 | -0.04em | | H1 | Space Grotesk | 2.75rem | 600 | -0.03em | | H2 | Space Grotesk | 1.5rem | 600 | -0.015em | | Body | Inter | 1rem | 400 | -0.005em / 1.6 | | Spec | IBM Plex Mono | 0.8125rem | 500 | 0 | ## Geometry - **Radii: 4 / 6 / 8.** Machined edges. Never pill, never soft. - **Section gap: 96px** desktop, 64px mobile. - **12-column grid** with 24px gutters. ## Buttons - **Primary** — brushed steel gradient, anthracite label, polished top-edge highlight. - **Secondary** — gunmetal surface, moonlight label, white hairline at 10%. - **Outline** — bare hairline rectangle at 16% white. - **Ghost** — polished-steel label, hover underline. Primary always pairs with secondary in that order. Never two primaries on the same screen. ## Cards Gunmetal surfaces on anthracite, 1px white hairline at 6% opacity, 6px corners, low cool ambient shadow. Padding 28px. Cards never use the metallic gradient — that surface belongs to the primary CTA only. ## Charts & Data Three-bar histogram in three steps of steel (polished → mid → dark), 3px corner radius, 8px gap, no gridlines. Axis labels in steel at 11px. The chart reads like a measurement readout on an instrument panel. ## Do's and Don'ts - ✅ Metallic surface only on primary CTA + one hero badge. - ✅ The 50% mid-stop in the gradient is mandatory — it is the brushed band. - ✅ Top-edge highlight at 45% white. Lower dies on the dark canvas. - ✅ No chromatic color. Steel + anthracite is the entire palette. - ❌ No metallic backgrounds. The metal is jewelry, not wallpaper. - ❌ No second chromatic accent. - ❌ No pill shape. Machined hardware doesn't round to a pill. - ❌ No warm tints. The system is strictly cool. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#E8EAEE` | | secondary | `#8C95A0` | | tertiary | `#B8C0CC` | | neutral | `#181B20` | | surface | `#22262D` | ### Typography - **Display:** Space Grotesk - **Body:** Inter - **Mono:** IBM Plex Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.5rem / 1.02 / 600 / -0.04em | | H1 | 2.75rem / 1.08 / 600 / -0.03em | | H2 | 1.5rem / 1.3 / 600 / -0.015em | | Body | 1rem / 1.6 / 400 / -0.005em | ### Radius - sm: `4px` - md: `6px` - lg: `8px` ### Shadows - **card:** `0 0 0 1px rgba(255, 255, 255, 0.05), 0 12px 32px -16px rgba(0, 0, 0, 0.55)` - **button:** `0 8px 20px -8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 -1px 0 rgba(0, 0, 0, 0.40)` ### Borders - **card:** `1px solid rgba(255, 255, 255, 0.06)` - **divider:** `rgba(255, 255, 255, 0.08)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `linear-gradient(180deg, #C8D0DC 0%, #8C95A0 50%, #4A525E 100%)` | | color | `#181B20` | | border | `1px solid rgba(255, 255, 255, 0.22)` | | padding | `12px 22px` | | fontWeight | `600` | | fontSize | `0.9375rem` | | tracking | `-0.01em` | | shadow | `0 8px 20px -8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.40)` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#22262D` | | color | `#E8EAEE` | | border | `1px solid rgba(255, 255, 255, 0.10)` | | padding | `12px 22px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#E8EAEE` | | border | `1px solid rgba(255, 255, 255, 0.16)` | | padding | `11px 21px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#B8C0CC` | | border | `none` | | padding | `11px 6px` | | fontWeight | `500` | | fontSize | `0.9375rem` | | tracking | `-0.005em` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `rounded-bars` | | strokeWidth | `2` | | gridlines | `false` | | barRadius | `3px` | | barGap | `8px` | | highlight | `all` | | axisColor | `#8C95A0` | | palette | `#B8C0CC`, `#7E8794`, `#4A525E` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 0 24px -4px rgba(184, 192, 204, 0.5), 0 8px 24px -8px rgba(0,0,0,0.6)`, filter: `brightness(1.1)` - **focus** — outline: `1.5px solid #B8C0CC`, outline-offset: `3px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.92)` - **disabled** — opacity: `0.35`, filter: `saturate(0.4)` - **loading** — opacity: `0.6` - **selected** — bg: `#B8C0CC`, color: `#0A0A0A` #### Input - **hover** — border: `1px solid rgba(184, 192, 204, 0.5)` - **focus** — border: `1px solid #B8C0CC`, shadow: `0 0 0 3px rgba(184, 192, 204, 0.2)` - **disabled** — opacity: `0.35` - **error** — border: `1px solid #F87171`, shadow: `0 0 0 3px rgba(248,113,113,0.2)` #### Card - **hover** — shadow: `0 16px 40px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(184, 192, 204, 0.18)`, transform: `translateY(-2px)` - **selected** — border: `1px solid #B8C0CC`, shadow: `0 0 0 1px #B8C0CC` - **dragging** — shadow: `0 24px 60px -16px rgba(0,0,0,0.85)`, transform: `scale(1.02)`, opacity: `0.85` #### Tab - **hover** — color: `#B8C0CC` - **focus** — outline: `1.5px solid #B8C0CC`, outline-offset: `2px` - **selected** — color: `#B8C0CC`, border: `0 0 1.5px 0 solid #B8C0CC` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Glide.** Fließende, leicht beschleunigte Übergänge mit Accent-Glow auf hover. Premium-Feeling durch kontrollierte Lichtspiele. ```css transition: all 280ms cubic-bezier(0.32, 0.72, 0, 1); ``` | Token | Value | |-------|-------| | duration.instant | `100ms` | | duration.fast | `180ms` | | duration.base | `280ms` | | duration.slow | `450ms` | | easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.25, 0.55, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — Hairline mit Accent-Hauch. | | level1 | `0 2px 4px rgba(0,0,0,0.45)` | Subtle drop — list items. | | level2 | `0 12px 28px -8px rgba(0,0,0,0.6)` | Popover — vom Canvas gelöst. | | level3 | `0 20px 48px -12px rgba(0,0,0,0.7), 0 0 32px -8px rgba(184, 192, 204, 0.25)` | Sheet — Accent-Halo. | | level4 | `0 40px 96px -16px rgba(0,0,0,0.85), 0 0 64px -12px rgba(184, 192, 204, 0.4)` | Modal — voller Accent-Rim, dramatisch. | ### Content - **measure:** `66ch` (max line length for body prose) - **paragraph spacing:** `1.3em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#B8C0CC`, underline `hover` - **blockquote:** border `2px solid #B8C0CC`, padding `0.8em 1.2em` - **code:** background `rgba(184, 192, 204, 0.12)`, color `#B8C0CC` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 12.61:1 | AA | AAA | — | | Body text on canvas | 14.33:1 | AA | AAA | — | | Muted text on surface | 5:1 | AA | AA | — | | Accent on surface | 8.28:1 | AA-Large | AAA | — | | Accent on canvas | 9.41:1 | AA-Large | AAA | — | --- # SYSTEM: Sable Hairline Source: https://www.freedesignmd.com/system/sable-hairline --- name: "Sable Hairline" description: "Precise dark surface with a faint 32px hairline grid baked into the canvas. Geist-class sans, JetBrains Mono, one desaturated violet accent. The primary CTA carries a 1px violet underline as its only chromatic mark." tags: [dark, "dev-tool", minimal, precise, hairline] colors: primary: "#9D8CFF" secondary: "#E6E5E3" tertiary: "#7A7A82" neutral: "#0A0A0B" surface: "#131316" typography: display: "Inter Tight" body: Inter mono: "JetBrains Mono" scale: hero: "3.75rem / 1.04 / 600 / -0.04em" h1: "2.25rem / 1.12 / 600 / -0.032em" h2: "1.375rem / 1.3 / 600 / -0.018em" body: "0.9375rem / 1.65 / 400 / -0.005em" radius: sm: 4px md: 6px lg: 8px pill: 9999px shadows: card: "0 0 0 1px rgba(255, 255, 255, 0.06)" button: "0 0 0 1px rgba(157, 140, 255, 0.35)" borders: card: "1px solid rgba(255, 255, 255, 0.07)" divider: "rgba(255, 255, 255, 0.07)" glass: surface: "#131316" blur: 0px border: "1px solid rgba(255, 255, 255, 0.07)" shadow: none backdrop: "linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 32px 32px, #0A0A0B" buttons: primary: background: #1B1B20 color: #F4F3F0 border: 1px solid rgba(255, 255, 255, 0.10) shape: rounded padding: 10px 18px font: 500 / 0.875rem / -0.005em shadow: inset 0 -1px 0 0 #9D8CFF secondary: background: transparent color: #E6E5E3 border: 1px solid rgba(255, 255, 255, 0.10) shape: rounded padding: 10px 18px font: 500 / 0.875rem / -0.005em outline: background: transparent color: #9D8CFF border: 1px solid rgba(157, 140, 255, 0.35) shape: rounded padding: 10px 18px font: 500 / 0.875rem / -0.005em ghost: background: transparent color: #7A7A82 border: none shape: rounded padding: 10px 6px font: mono / 400 / 0.8125rem / 0 hover: underline charts: variant: line stroke_width: 1.5 gridlines: true highlight: last dot_marker: true axis_color: "#5A5A62" palette: ["#9D8CFF", "#7A7A82", "#3F3F46"] fonts_url: "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # Sable Hairline ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Sable Hairline** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#1B1B20`, text `#F4F3F0`, border `1px solid rgba(255, 255, 255, 0.10)`, padding `10px 18px`, weight `500`, shadow `inset 0 -1px 0 0 #9D8CFF`. - **Secondary** — rounded shape, text `#E6E5E3`, border `1px solid rgba(255, 255, 255, 0.10)`, padding `10px 18px`, weight `500`. - **Outline** — rounded shape, text `#9D8CFF`, border `1px solid rgba(157, 140, 255, 0.35)`, padding `10px 18px`, weight `500`. - **Ghost** — rounded shape, text `#7A7A82`, padding `10px 6px`, weight `400`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#131316` - Border: `1px solid rgba(255, 255, 255, 0.07)` - Shadow: `0 0 0 1px rgba(255, 255, 255, 0.06)` - Radius: `radius.lg` (`8px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. > This system ships a **glass treatment** — see the Glass token table. > Apply `backdrop-filter: blur(0px)` to translucent panes. > The page must have a backdrop (gradient mesh / blurred orbs) for glass to refract. #### Charts - Bar/line variant: `line` - Highlight strategy: `last` — emphasize a single bar/point per chart. - Use the declared palette in order: `#9D8CFF`, `#7A7A82`, `#3F3F46`. #### Typography pairings - **Display (`Inter Tight`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Sable Hairline is a precise dark dev-tool surface. Near-black canvas (#0A0A0B) with a faint 32px hairline grid baked into the background — visible enough to register as engineered, quiet enough never to compete with content. One chromatic accent: a desaturated violet #9D8CFF, used only for active states and as a 1px bottom edge on the primary CTA. For developer platforms, infra dashboards, observability tools, anything that needs to read as engineered without resorting to terminal nostalgia. ## The Hairline Grid The grid is the signature. Two stacked 1px linear-gradients at 32px intervals, both at 2.5% white alpha: ```css body { background: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 32px 32px, #0A0A0B; } ``` Hold the alpha at 2.5%. At 4% the grid becomes graph paper; at 1% it disappears. The grid stays fixed during scroll on long pages. ## Color - **Violet #9D8CFF** — the only chromatic mark. Active states, CTA accent line, chart line. - **Bone #E6E5E3** — body text on near-black. - **Graphite #7A7A82** — secondary text, axis labels, grid alpha at 7%. - **Sable #0A0A0B** — page canvas, never pure #000. - **Panel #131316** — lifted surface for cards. ## Typography - **Display: Inter Tight 600** at 3.75rem with -4% tracking. - **Body: Inter 400** at 0.9375rem with 1.65 leading. - **Mono: JetBrains Mono 400** for ghost links and code — slightly smaller (0.8125rem). | Role | Font | Size | Weight | Tracking | |------|------|------|--------|----------| | Hero | Inter Tight | 3.75rem | 600 | -0.04em | | H1 | Inter Tight | 2.25rem | 600 | -0.032em | | H2 | Inter Tight | 1.375rem | 600 | -0.018em | | Body | Inter | 0.9375rem | 400 | -0.005em / 1.65 | | Mono | JetBrains Mono | 0.8125rem | 400 | 0 | ## Geometry - **Radii: 4 / 6 / 8.** Tight, precise — never soft. Pill exists only for status chips. - **Section gap: 96px** desktop, 56px mobile. - **12-column grid** with 24px gutters — aligns to the background grid module. ## Buttons - **Primary** — flat panel surface with a 1px violet inset bottom edge. The single chromatic mark. - **Secondary** — bare hairline panel. - **Outline** — hairline in violet alpha, violet label. - **Ghost** — JetBrains Mono in graphite, hover underline. ## Cards Lifted panel #131316, 6px radius, 1px hairline at 7% white. No drop shadow — depth comes from the contrast between #0A0A0B canvas and #131316 panel only. Padding 24px minimum. ## Charts & Data 1.5px violet line on a faint hairline grid (already part of the canvas). One end-of-line dot marker in violet. Axis labels in graphite at 0.75rem. No fills, no curves — straight segments. ## Do's and Don'ts - ✅ Hold the grid alpha at exactly 2.5% white. - ✅ Violet is the only color outside the grayscale ramp. - ✅ Tight radii throughout — the precision is the brand. - ✅ Inter Tight for display; never substitute a softer geometric sans. - ❌ No pure #000. Sable carries warmth. - ❌ No second chromatic accent. The system stays single-hue. - ❌ No drop shadows. Hairlines and surface contrast carry depth. - ❌ No rounded corners above 8px outside the pill chip. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#9D8CFF` | | secondary | `#E6E5E3` | | tertiary | `#7A7A82` | | neutral | `#0A0A0B` | | surface | `#131316` | ### Typography - **Display:** Inter Tight - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 3.75rem / 1.04 / 600 / -0.04em | | H1 | 2.25rem / 1.12 / 600 / -0.032em | | H2 | 1.375rem / 1.3 / 600 / -0.018em | | Body | 0.9375rem / 1.65 / 400 / -0.005em | ### Radius - sm: `4px` - md: `6px` - lg: `8px` - pill: `9999px` ### Shadows - **card:** `0 0 0 1px rgba(255, 255, 255, 0.06)` - **button:** `0 0 0 1px rgba(157, 140, 255, 0.35)` ### Borders - **card:** `1px solid rgba(255, 255, 255, 0.07)` - **divider:** `rgba(255, 255, 255, 0.07)` ### Glass Translucent panes with backdrop-filter — the preview renders cards from these exact values. | Property | Value | |----------|-------| | surface | `#131316` | | blur | `0px` | | border | `1px solid rgba(255, 255, 255, 0.07)` | | shadow | `none` | | backdrop | `linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 32px 32px, #0A0A0B` | ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#1B1B20` | | color | `#F4F3F0` | | border | `1px solid rgba(255, 255, 255, 0.10)` | | padding | `10px 18px` | | fontWeight | `500` | | fontSize | `0.875rem` | | tracking | `-0.005em` | | shadow | `inset 0 -1px 0 0 #9D8CFF` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#E6E5E3` | | border | `1px solid rgba(255, 255, 255, 0.10)` | | padding | `10px 18px` | | fontWeight | `500` | | fontSize | `0.875rem` | | tracking | `-0.005em` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#9D8CFF` | | border | `1px solid rgba(157, 140, 255, 0.35)` | | padding | `10px 18px` | | fontWeight | `500` | | fontSize | `0.875rem` | | tracking | `-0.005em` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#7A7A82` | | border | `none` | | padding | `10px 6px` | | fontFamily | `mono` | | fontWeight | `400` | | fontSize | `0.8125rem` | | tracking | `0` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `line` | | strokeWidth | `1.5` | | gridlines | `true` | | highlight | `last` | | dotMarker | `true` | | axisColor | `#5A5A62` | | palette | `#9D8CFF`, `#7A7A82`, `#3F3F46` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 8px 24px -8px rgba(122, 122, 130, 0.35), inset 0 1px 0 rgba(255,255,255,0.18)`, transform: `translateY(-1px)`, filter: `saturate(1.15)` - **focus** — outline: `2px solid rgba(122, 122, 130, 0.5)`, outline-offset: `3px` - **active** — transform: `translateY(0) scale(0.98)`, filter: `brightness(0.96)` - **disabled** — opacity: `0.4`, filter: `saturate(0.4) blur(0.4px)` - **loading** — opacity: `0.7` - **selected** — bg: `rgba(122, 122, 130, 0.18)`, color: `#7A7A82` #### Input - **hover** — border: `1px solid rgba(122, 122, 130, 0.4)`, shadow: `inset 0 1px 0 rgba(255,255,255,0.18)` - **focus** — border: `1px solid rgba(122, 122, 130, 0.65)`, shadow: `0 0 0 4px rgba(122, 122, 130, 0.15), inset 0 1px 0 rgba(255,255,255,0.18)` - **disabled** — opacity: `0.4` - **error** — border: `1px solid rgba(248,113,113,0.7)`, shadow: `0 0 0 4px rgba(248,113,113,0.15)` #### Card - **hover** — shadow: `0 16px 48px -16px rgba(122, 122, 130, 0.25), inset 0 1px 0 rgba(255,255,255,0.18)`, transform: `translateY(-2px)`, filter: `saturate(1.1)` - **selected** — border: `1px solid rgba(122, 122, 130, 0.5)` - **dragging** — shadow: `0 24px 64px -16px rgba(0,0,0,0.4)`, transform: `scale(1.02)`, opacity: `0.85` #### Tab - **hover** — bg: `rgba(122, 122, 130, 0.08)` - **focus** — outline: `2px solid rgba(122, 122, 130, 0.5)`, outline-offset: `2px` - **selected** — bg: `rgba(122, 122, 130, 0.18)`, color: `#7A7A82` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Refract.** Long opacity- and blur-driven transitions. Not a hard move, but a shift of light across the glass surface. ```css transition: opacity 350ms cubic-bezier(0.32, 0.72, 0, 1), backdrop-filter 350ms cubic-bezier(0.32, 0.72, 0, 1), transform 350ms cubic-bezier(0.32, 0.72, 0, 1); ``` | Token | Value | |-------|-------| | duration.instant | `100ms` | | duration.fast | `200ms` | | duration.base | `350ms` | | duration.slow | `550ms` | | easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.34, 1.2, 0.64, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `inset 0 1px 0 rgba(255,255,255,0.18)` | Flat glass surface — top-edge gloss only. | | level1 | `0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Soft lift + top-edge gloss. | | level2 | `0 12px 32px -8px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255,255,255,0.18)` | Floating pane — popover. | | level3 | `0 24px 64px -16px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(122, 122, 130, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Sheet — accent rim for depth. | | level4 | `0 40px 96px -24px rgba(0, 0, 0, 0.5), 0 0 48px -12px rgba(122, 122, 130, 0.25), inset 0 1px 0 rgba(255,255,255,0.18)` | Modal — dramatic glow, scrim required. | ### Content - **measure:** `66ch` (max line length for body prose) - **paragraph spacing:** `1.25em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#7A7A82`, underline `hover` - **blockquote:** border `1px solid rgba(122, 122, 130, 0.4)`, padding `0.9em 1.2em` - **code:** background `rgba(122, 122, 130, 0.1)`, color `#7A7A82` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 6.74:1 | AA | AA | — | | Body text on canvas | 7.19:1 | AA | AAA | — | | Muted text on surface | 14.73:1 | AA | AAA | — | | Accent on surface | 4.36:1 | AA-Large | AA-Large | — | | Accent on canvas | 4.65:1 | AA-Large | AA | — | --- # SYSTEM: Voidstage Source: https://www.freedesignmd.com/system/voidstage --- name: Voidstage description: "Pure black void canvas, geometric medium-weight display with extreme negative tracking, frosted glass pills, and a single electric blue accent." tags: [dark, premium, "design-tool", cinematic] colors: primary: "#ffffff" secondary: "#a6a6a6" tertiary: "#0099ff" neutral: "#000000" surface: "#090909" typography: display: Geist body: Inter mono: "JetBrains Mono" scale: hero: "4.5rem / 0.85 / 500 / -3.6px" h1: "3.875rem / 0.95 / 500 / -2.5px" h2: "2rem / 1.13 / 500 / -1px" body: "0.9375rem / 1.3 / 400 / -0.01px" radius: sm: 5px md: 8px lg: 12px pill: 9999px shadows: card: "rgba(0,153,255,0.15) 0 0 0 1px, rgba(0,0,0,0.25) 0 10px 30px" button: "rgba(0,153,255,0.15) 0 0 0 1px" buttons: primary: background: #FFFFFF color: #000000 border: none shape: pill padding: 10px 22px font: display / 500 / -0.01em secondary: background: rgba(255,255,255,0.08) color: #FFFFFF border: 1px solid rgba(255,255,255,0.16) shape: pill padding: 10px 22px font: display / 500 / -0.01em outline: background: transparent color: #FFFFFF border: 1px solid rgba(255,255,255,0.4) shape: pill padding: 10px 22px font: display / 500 / -0.01em ghost: background: transparent color: rgba(255,255,255,0.6) border: none shape: pill padding: 10px 14px font: display / 500 / -0.01em charts: variant: dots stroke_width: 1 fill_opacity: 0 bar_gap: 10px highlight: all dot_marker: true fonts_url: "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Voidstage ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Voidstage** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — pill shape, bg `#FFFFFF`, text `#000000`, padding `10px 22px`, weight `500`. - **Secondary** — pill shape, bg `rgba(255,255,255,0.08)`, text `#FFFFFF`, border `1px solid rgba(255,255,255,0.16)`, padding `10px 22px`, weight `500`. - **Outline** — pill shape, text `#FFFFFF`, border `1px solid rgba(255,255,255,0.4)`, padding `10px 22px`, weight `500`. - **Ghost** — pill shape, text `rgba(255,255,255,0.6)`, padding `10px 14px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#090909` - Shadow: `rgba(0,153,255,0.15) 0 0 0 1px, rgba(0,0,0,0.25) 0 10px 30px` - Radius: `radius.lg` (`12px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Charts - Bar/line variant: `dots` - Highlight strategy: `all` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Geist`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Voidstage is a cinematic, tool-obsessed dark canvas — the confidence of a design tool built by designers who worship craft. The entire experience is drenched in pure black (`#000000`), not warm charcoal or cozy dark gray, but an absolute void that makes every element feel like it's floating in deep space. The product UI is the hero art; full-fidelity screenshots and interactive demos are embedded directly in the narrative. The typography is the signature move. A geometric medium-weight display with aggressive negative tracking (as extreme as -5.5px on 110px headlines) creates words under pressure — compressed, kinetic, almost spring-loaded. Body type transitions to a refined neo-grotesque with extensive OpenType alternates, giving even small text a custom feel. The single accent — electric blue (`#0099ff`) — is deployed as link color, border, and ring shadow, a cold throughline against the warm-less black. **Signature moves** - Pure `#000000` void canvas — never warm or gray-tinted - Geometric display at weight 500 only, with extreme negative tracking - Electric blue (`#0099ff`) as the sole accent — interactive only - Pill-shaped buttons (40–100px radius) — no sharp corners on interactive - Frosted glass surfaces using `rgba(255,255,255,0.1)` over dark - Blue ring shadows for card containment: `rgba(0,153,255,0.15) 0 0 0 1px` ## 2. Palette ### Primary - **Void Black** `#000000` — page canvas - **Pure White** `#ffffff` — heading text, button text on accent - **Electric Blue** `#0099ff` — links, borders, focus, accent ### Surface - Void `#000000` — page - Frosted `rgba(255,255,255,0.1)` — translucent button / glass - Frosted Hover `rgba(255,255,255,0.5)` — slightly more opaque - Near Black `#090909` — elevated dark surface, ring color ### Text - Pure White `#ffffff` — headings, high-emphasis - Muted Silver `#a6a6a6` — body, descriptions - Ghost White `rgba(255,255,255,0.6)` — placeholders, tertiary ### Glow - Blue Glow `rgba(0,153,255,0.15)` — focus ring shadow, halo - Default Link Blue `#0000ee` — sparingly in content areas ## 3. Typography | Role | Size | Weight | Leading | Tracking | |------|------|--------|---------|----------| | Display Hero | 110px | 500 | 0.85 | -5.5px | | Section Display | 85px | 500 | 0.95 | -4.25px | | Section Heading | 62px | 500 | 1.00 | -3.1px | | Feature Heading | 32px | 500 | 1.13 | -1px | | Card Title | 24px | 400 | 1.30 | -0.01px | | Body L | 18px | 400 | 1.30 | -0.01px | | Body | 15px | 400 | 1.30 | -0.01px | | Nav / UI | 15px | 400 | 1.00 | -0.15px | | Caption | 14px | 400 | 1.40 | normal | | Label | 13px | 500 | 1.60 | normal | | Mono | 10.4px | 400 | 1.60 | normal | **Compression is the personality.** Display weight is fixed at 500 — never bold, never regular. Ultra-tight line-heights (0.85) at display sizes mean letters nearly overlap vertically. Intentional density that rewards reading at arm's length. ## 4. Buttons ### Solid White Pill (Primary) ```css background: #ffffff; color: #000000; padding: 10px 20px; border-radius: 9999px; ``` ### Frosted Pill - `rgba(255,255,255,0.1)` background, white text - Pill radius (40px+) - Glass effect on dark — translucent and ambient ### Ghost - No background, white text - Hover reveals subtle frosted background ## 5. Cards - **Dark surface card**: black or `#090909`, with `rgba(0,153,255,0.15) 0 0 0 1px` blue ring shadow, 10–15px radius - **Elevated card**: `rgba(255,255,255,0.1) 0 0.5px 0 0.5px` (top highlight) + `rgba(0,0,0,0.25) 0 10px 30px` (deep ambient) - Product screenshots: 8–12px radius, full-width within dark containers ## 6. Spacing - Base: 8px - Scale: `1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 20, 30, 35` - Section vertical: 80–120px - Card internal: 15–30px ## 7. Radius scale `1 / 5–7 / 8 / 10–12 / 15–20 / 30–40 / 100` — pill (100px+) is reserved for primary CTAs and tags. Cards stay at 10–15px. ## 8. Depth & elevation | Level | Treatment | Use | |-------|-----------|-----| | 0 | Pure black, no shadow | Page background | | 1 | `rgba(0,153,255,0.15) 0 0 0 1px` | Card borders, blue ring | | 2 | `#090909 0 0 0 2px` | Subtle near-black containment | | 3 | White edge highlight + deep ambient | Elevated cards, floating | **Inverted elevation.** Instead of darker shadows on lighter backgrounds, Voidstage uses blue-tinted ring shadows for containment, white edge highlights to simulate light hitting the top edge, and deep ambient shadows for true floating. There is no glassmorphism blur — translucency is achieved through simple rgba opacity. ## 9. Do's & don'ts ✅ **Do** - Use pure black (`#000000`) — never charcoal or warm dark - Apply extreme negative tracking on display (-3px to -5.5px) - Keep all buttons pill-shaped (40px+ radius) - Reserve electric blue (`#0099ff`) for interactive accents only - Apply blue ring shadows for card containment ❌ **Don't** - Use warm dark backgrounds (`#1a1a1a`, `#2d2d2d`) - Use bold (700+) on display — medium 500 only - Introduce a second accent color — single accent system - Use squared corners on interactive elements - Add decorative imagery — the product is the illustration --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#ffffff` | | secondary | `#a6a6a6` | | tertiary | `#0099ff` | | neutral | `#000000` | | surface | `#090909` | ### Typography - **Display:** Geist - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.5rem / 0.85 / 500 / -3.6px | | H1 | 3.875rem / 0.95 / 500 / -2.5px | | H2 | 2rem / 1.13 / 500 / -1px | | Body | 0.9375rem / 1.3 / 400 / -0.01px | ### Radius - sm: `5px` - md: `8px` - lg: `12px` - pill: `9999px` ### Shadows - **card:** `rgba(0,153,255,0.15) 0 0 0 1px, rgba(0,0,0,0.25) 0 10px 30px` - **button:** `rgba(0,153,255,0.15) 0 0 0 1px` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `pill` | | background | `#FFFFFF` | | color | `#000000` | | border | `none` | | padding | `10px 22px` | | fontFamily | `display` | | fontWeight | `500` | | tracking | `-0.01em` | #### Secondary | Property | Value | |----------|-------| | shape | `pill` | | background | `rgba(255,255,255,0.08)` | | color | `#FFFFFF` | | border | `1px solid rgba(255,255,255,0.16)` | | padding | `10px 22px` | | fontFamily | `display` | | fontWeight | `500` | | tracking | `-0.01em` | #### Outline | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#FFFFFF` | | border | `1px solid rgba(255,255,255,0.4)` | | padding | `10px 22px` | | fontFamily | `display` | | fontWeight | `500` | | tracking | `-0.01em` | #### Ghost | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `rgba(255,255,255,0.6)` | | border | `none` | | padding | `10px 14px` | | fontFamily | `display` | | fontWeight | `500` | | tracking | `-0.01em` | ### Charts | Property | Value | |----------|-------| | variant | `dots` | | strokeWidth | `1` | | fillOpacity | `0` | | barGap | `10px` | | highlight | `all` | | dotMarker | `true` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `0 0 24px -4px rgba(0, 153, 255, 0.5), 0 8px 24px -8px rgba(0,0,0,0.6)`, filter: `brightness(1.1)` - **focus** — outline: `1.5px solid #0099ff`, outline-offset: `3px` - **active** — transform: `translateY(1px)`, filter: `brightness(0.92)` - **disabled** — opacity: `0.35`, filter: `saturate(0.4)` - **loading** — opacity: `0.6` - **selected** — bg: `#0099ff`, color: `#0A0A0A` #### Input - **hover** — border: `1px solid rgba(0, 153, 255, 0.5)` - **focus** — border: `1px solid #0099ff`, shadow: `0 0 0 3px rgba(0, 153, 255, 0.2)` - **disabled** — opacity: `0.35` - **error** — border: `1px solid #F87171`, shadow: `0 0 0 3px rgba(248,113,113,0.2)` #### Card - **hover** — shadow: `0 16px 40px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(0, 153, 255, 0.18)`, transform: `translateY(-2px)` - **selected** — border: `1px solid #0099ff`, shadow: `0 0 0 1px #0099ff` - **dragging** — shadow: `0 24px 60px -16px rgba(0,0,0,0.85)`, transform: `scale(1.02)`, opacity: `0.85` #### Tab - **hover** — color: `#0099ff` - **focus** — outline: `1.5px solid #0099ff`, outline-offset: `2px` - **selected** — color: `#0099ff`, border: `0 0 1.5px 0 solid #0099ff` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Glide.** Fließende, leicht beschleunigte Übergänge mit Accent-Glow auf hover. Premium-Feeling durch kontrollierte Lichtspiele. ```css transition: all 280ms cubic-bezier(0.32, 0.72, 0, 1); ``` | Token | Value | |-------|-------| | duration.instant | `100ms` | | duration.fast | `180ms` | | duration.base | `280ms` | | duration.slow | `450ms` | | easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 1.25, 0.55, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — Hairline mit Accent-Hauch. | | level1 | `0 2px 4px rgba(0,0,0,0.45)` | Subtle drop — list items. | | level2 | `0 12px 28px -8px rgba(0,0,0,0.6)` | Popover — vom Canvas gelöst. | | level3 | `0 20px 48px -12px rgba(0,0,0,0.7), 0 0 32px -8px rgba(0, 153, 255, 0.25)` | Sheet — Accent-Halo. | | level4 | `0 40px 96px -16px rgba(0,0,0,0.85), 0 0 64px -12px rgba(0, 153, 255, 0.4)` | Modal — voller Accent-Rim, dramatisch. | ### Content - **measure:** `66ch` (max line length for body prose) - **paragraph spacing:** `1.3em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#0099ff`, underline `hover` - **blockquote:** border `2px solid #0099ff`, padding `0.8em 1.2em` - **code:** background `rgba(0, 153, 255, 0.12)`, color `#0099ff` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 19.91:1 | AA | AAA | — | | Body text on canvas | 21:1 | AA | AAA | — | | Muted text on surface | 8.18:1 | AA | AAA | — | | Accent on surface | 6.64:1 | AA-Large | AA | — | | Accent on canvas | 7:1 | AA-Large | AAA | — | --- # SYSTEM: Dark Terminal Source: https://www.freedesignmd.com/system/dark-terminal --- name: "Dark Terminal" description: "Emerald on near-black. Monospace developer aesthetic with thin borders." tags: [dark, minimal, brutalist] colors: primary: "#E8E8E8" secondary: "#7A7A7A" tertiary: "#10B981" neutral: "#0A0A0A" surface: "#141414" typography: display: "JetBrains Mono" body: Inter mono: "JetBrains Mono" radius: sm: 2px md: 4px lg: 4px buttons: primary: background: #00FF88 color: #000000 border: none shape: sharp padding: 10px 20px font: mono / 700 / 0.06em uppercase: true secondary: background: #0A0A0A color: #00FF88 border: 1px solid #00FF88 shape: sharp padding: 10px 20px font: mono / 600 / 0.06em uppercase: true outline: background: transparent color: #7A7A7A border: 1px solid #2A2A2A shape: sharp padding: 10px 20px font: mono / 500 / 0.06em uppercase: true ghost: background: transparent color: #00FF88 border: none shape: sharp padding: 10px 0 font: mono / 500 hover: underline charts: variant: "thin-bars" gridlines: true bar_gap: 10px highlight: all fonts_url: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600&display=swap" dependencies: ["lucide-react"] --- # Dark Terminal ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Dark Terminal** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#00FF88`, text `#000000`, padding `10px 20px`, weight `700`, uppercased. - **Secondary** — sharp shape, bg `#0A0A0A`, text `#00FF88`, border `1px solid #00FF88`, padding `10px 20px`, weight `600`, uppercased. - **Outline** — sharp shape, text `#7A7A7A`, border `1px solid #2A2A2A`, padding `10px 20px`, weight `500`, uppercased. - **Ghost** — sharp shape, text `#00FF88`, padding `10px 0`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#141414` - Radius: `radius.lg` (`4px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `boxed`. Each tab is a bordered card. Active tab gets the accent border and a subtle fill. Tabs are uppercased with `0.06em` tracking. #### Charts - Bar/line variant: `thin-bars` - Highlight strategy: `all` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`JetBrains Mono`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Inspired by terminal emulators and developer tooling. Quiet near-black background, emerald accent for action and status, monospace for headers. ## Colors - **Primary #E8E8E8** — body text. - **Secondary #7A7A7A** — meta. - **Tertiary #10B981** — emerald. Buttons, success, links. - **Neutral #0A0A0A** — page background. - **Surface #141414** — cards. ## Typography **JetBrains Mono** for headlines and code. **Inter** for prose to keep readability. ## Spacing 4px grid, 80px sections. ## Components Thin 1px borders (#262626). 4px radii. No shadows. ## Icons `lucide-react`, stroke width 1.5, inheriting text color. Use emerald only on status icons (check, success). ## Do's and Don'ts - ✅ Use emerald for active/success states. - ✅ Keep contrast high — never gray-on-gray text. - ❌ Don't introduce a second accent color. - ❌ Don't use shadows on dark surfaces. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#E8E8E8` | | secondary | `#7A7A7A` | | tertiary | `#10B981` | | neutral | `#0A0A0A` | | surface | `#141414` | ### Typography - **Display:** JetBrains Mono - **Body:** Inter - **Mono:** JetBrains Mono ### Radius - sm: `2px` - md: `4px` - lg: `4px` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#00FF88` | | color | `#000000` | | border | `none` | | padding | `10px 20px` | | fontFamily | `mono` | | fontWeight | `700` | | tracking | `0.06em` | | uppercase | `true` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#0A0A0A` | | color | `#00FF88` | | border | `1px solid #00FF88` | | padding | `10px 20px` | | fontFamily | `mono` | | fontWeight | `600` | | tracking | `0.06em` | | uppercase | `true` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#7A7A7A` | | border | `1px solid #2A2A2A` | | padding | `10px 20px` | | fontFamily | `mono` | | fontWeight | `500` | | tracking | `0.06em` | | uppercase | `true` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#00FF88` | | border | `none` | | padding | `10px 0` | | fontFamily | `mono` | | fontWeight | `500` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | gridlines | `true` | | barGap | `10px` | | highlight | `all` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `4px 4px 0 0 #E8E8E8`, transform: `translate(-2px, -2px)` - **focus** — outline: `2px solid #E8E8E8`, outline-offset: `3px` - **active** — shadow: `none`, transform: `translate(0, 0)` - **disabled** — opacity: `0.4`, filter: `grayscale(0.4)` - **loading** — opacity: `0.6` - **selected** — bg: `#E8E8E8`, color: `#141414` #### Input - **hover** — border: `2px solid #E8E8E8` - **focus** — border: `2px solid #E8E8E8`, shadow: `4px 4px 0 0 #E8E8E8` - **disabled** — bg: `rgba(232, 232, 232, 0.05)`, opacity: `0.4` - **error** — border: `2px solid #B91C1C`, shadow: `4px 4px 0 0 #B91C1C` #### Card - **hover** — shadow: `6px 6px 0 0 #E8E8E8`, transform: `translate(-3px, -3px)` - **selected** — border: `3px solid #E8E8E8` - **dragging** — shadow: `8px 8px 0 0 #E8E8E8`, transform: `rotate(-1deg) scale(1.02)` #### Tab - **hover** — bg: `rgba(232, 232, 232, 0.08)` - **focus** — outline: `2px solid #E8E8E8`, outline-offset: `2px` - **selected** — bg: `#E8E8E8`, color: `#141414` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Hard cut.** No animation. Transitions are cuts — the state switches, the eye follows. Brutalism means no softening. ```css transition: none; ``` | Token | Value | |-------|-------| | duration.instant | `0ms` | | duration.fast | `50ms` | | duration.base | `100ms` | | duration.slow | `150ms` | | easing.standard | `linear` | | easing.decelerate | `linear` | | easing.accelerate | `linear` | | easing.spring | `steps(3, end)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the border carries the separation. | | level1 | `2px 2px 0 0 #E8E8E8` | Hard offset 2/2, no blur. | | level2 | `4px 4px 0 0 #E8E8E8` | Hard offset 4/4 — cards. | | level3 | `6px 6px 0 0 #E8E8E8` | Hard offset 6/6 — dialogs. | | level4 | `8px 8px 0 0 #E8E8E8` | Hard offset 8/8 — modals, thicker border. | ### Content - **measure:** `64ch` (max line length for body prose) - **paragraph spacing:** `1.2em` - **list indent:** `1.5em` - **list gap:** `0.5em` - **link:** color `#E8E8E8`, underline `always` - **blockquote:** border `4px solid #E8E8E8`, padding `0.8em 1em` - **code:** background `#E8E8E8`, color `#141414` ### Accessibility (WCAG 2.1) **Overall:** AA-Large | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 15.04:1 | AA | AAA | — | | Body text on canvas | 16.16:1 | AA | AAA | — | | Muted text on surface | 4.29:1 | AA | AA-Large | `#7f7f7f` → 4.6:1 (AA) | | Accent on surface | 7.26:1 | AA-Large | AAA | — | | Accent on canvas | 7.8:1 | AA-Large | AAA | — | --- # SYSTEM: DBase Console Source: https://www.freedesignmd.com/system/dbase-console --- name: "DBase Console" description: "Dark-mode-native developer platform. Emerald (#3ecf8e) as identity marker, 1.00 line-height hero, depth from layered borders not shadows, mono uppercase labels." tags: [developer, dark, minimal, saas] colors: primary: "#fafafa" secondary: "#b4b4b4" tertiary: "#3ecf8e" neutral: "#171717" surface: "#0f0f0f" typography: display: Manrope body: Manrope mono: "Source Code Pro" scale: hero: "4.5rem / 1 / 400 / 0" h1: "3rem / 1 / 400 / 0" h2: "2.25rem / 1.25 / 400 / 0" body: "1rem / 1.5 / 400 / 0" radius: sm: 6px md: 8px lg: 16px pill: 9999px shadows: button: "rgba(0,0,0,0.1) 0 4px 12px" borders: card: "1px solid #2e2e2e" divider: "#242424" buttons: primary: background: #0f0f0f color: #fafafa border: 1px solid #fafafa shape: pill padding: 10px 32px font: 500 secondary: background: #0f0f0f color: rgba(250,250,250,0.8) border: 1px solid #2e2e2e shape: pill padding: 10px 32px font: 500 outline: background: transparent color: #3ecf8e border: 1px solid rgba(62,207,142,0.3) shape: pill padding: 10px 32px font: 500 ghost: background: transparent color: #b4b4b4 border: 1px solid transparent shape: rounded padding: 8px 12px font: 500 charts: variant: area stroke_width: 2 fill_opacity: 0.18 gridlines: true highlight: all dot_marker: true axis_color: "#898989" fonts_url: "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&family=Source+Code+Pro:wght@400;500&display=swap" dependencies: ["lucide-react"] --- # DBase Console ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **DBase Console** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — pill shape, bg `#0f0f0f`, text `#fafafa`, border `1px solid #fafafa`, padding `10px 32px`, weight `500`. - **Secondary** — pill shape, bg `#0f0f0f`, text `rgba(250,250,250,0.8)`, border `1px solid #2e2e2e`, padding `10px 32px`, weight `500`. - **Outline** — pill shape, text `#3ecf8e`, border `1px solid rgba(62,207,142,0.3)`, padding `10px 32px`, weight `500`. - **Ghost** — rounded shape, text `#b4b4b4`, border `1px solid transparent`, padding `8px 12px`, weight `500`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#0f0f0f` - Border: `1px solid #2e2e2e` - Radius: `radius.lg` (`16px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `boxed`. Each tab is a bordered card. Active tab gets the accent border and a subtle fill. Tabs are uppercased with `0.08em` tracking. #### Charts - Bar/line variant: `area` - Highlight strategy: `all` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Manrope`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Manrope`)** — paragraphs, labels, button text, form inputs. - **Mono (`Source Code Pro`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere DBase Console is a dark-mode-native developer platform that channels the aesthetic of a premium code editor — deep blacks (`#0f0f0f`, `#171717`) with an emerald accent (`#3ecf8e`, `#00c573`) that reads as Postgres-green identity, never decoration. The system feels like it was born in a terminal window and matured into a marketing surface without losing its developer soul. The display typography runs on a geometric sans with rounded terminals (humanizing the technical edge), compressed to a **1.00 line-height** at hero scale — text packed to its absolute minimum vertical space, dense and purposeful like a CLI command. A monospace companion (Source Code Pro) appears sparingly in **uppercase with 1.2px letter-spacing**, marking the "developer console" voice that ties marketing to product. What distinguishes DBase Console is its **HSL+alpha layered border system**. Instead of shadows, depth is created through translucent border hierarchies — `#242424` (barely visible) → `#2e2e2e` (standard) → `#363936` (prominent), capped by an emerald `rgba(62,207,142,0.3)` for branded elevation. The brand color itself becomes the elevation signal. **Signature moves** - Dark-mode-native: never pure black, always `#0f0f0f` / `#171717` - Emerald (`#3ecf8e`) as identity marker, used sparingly - Hero line-height **1.00** — zero leading, terminal density - Source Code Pro uppercase with 1.2px tracking — developer console labels - Pill buttons (9999px) for primary CTAs, 6px radius for ghosts - **Layered borders, not shadows** — depth from line not blur - Weight 400 dominant; weight 500 only on nav and buttons - HSL+alpha translucent layering for atmospheric depth ## 2. Palette ### Brand - **DBase Green** `#3ecf8e` — logo, accent borders - **Link Green** `#00c573` — interactive green - **Emerald Border** `rgba(62,207,142,0.3)` — accent containment ### Neutral Scale (Dark) - Near Black `#0f0f0f` · Page Dark `#171717` - Border progression `#242424` → `#2e2e2e` → `#363636` → `#393939` - Text scale: Mid `#898989` · Light `#b4b4b4` · Off-White `#fafafa` ### Surface & Overlay - Glass Dark `rgba(41,41,41,0.84)` - Slate Alpha `hsla(210,87.8%,16.1%,0.031)` ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Display Hero | Display | 72px | 400 | **1.00** | 0 | | Section | Display | 36px | 400 | 1.25 | 0 | | Card title | Display | 24px | 400 | 1.33 | -0.16px | | Sub-heading | Display | 18px | 400 | 1.56 | 0 | | Body | Display | 16px | 400 | 1.50 | 0 | | Nav / Button | Display | 14px | 500 | 1.00–1.43 | 0 | | Caption | Display | 14px | 400–500 | 1.43 | 0 | | Code Label | Mono | 12px | 400 | 1.33 | +1.2px UPPERCASE | **Weight 400 dominates.** Hierarchy from size, not weight. Hero leading 1.00 is the signature — the terminal density. ## 4. Buttons ### Primary Pill (Dark) ```css background: #0f0f0f; color: #fafafa; padding: 10px 32px; border-radius: 9999px; border: 1px solid #fafafa; ``` ### Secondary Pill - Same shape, border `1px solid #2e2e2e`, opacity 0.8 ### Ghost - Transparent, 6px radius, 1px transparent border ## 5. Cards - Background `#171717` (or slightly lighter) - Border `1px solid #2e2e2e` - Radius 8–16px - **No shadow** — border is the edge ## 6. Charts **Emerald area chart with dashed gridlines and end-of-line dot marker** — a live-deploy/console aesthetic. The 18% fill opacity creates a glow rather than a fill. Axis labels in muted gray (`#898989`). ## 7. Spacing - Base 8px - Scale: `1, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 90, 96, 128` - Section spacing 90–128px — cinematic dark-void pacing ## 8. Depth & elevation | Level | Treatment | Use | |-------|-----------|-----| | 0 | Border `#2e2e2e` | Default | | 1 | Border `#363636` | Hover | | 2 | `rgba(0,0,0,0.1) 0 4px 12px` | Focus only | | 3 | Border `rgba(62,207,142,0.3)` | Brand-elevated | **Borders are the depth system.** Shadows are nearly invisible on dark canvas anyway. ## 9. Do's & don'ts ✅ **Do** - Use `#0f0f0f` / `#171717` — never pure black - Apply emerald (`#3ecf8e`) sparingly as identity marker - Set hero line-height to 1.00 — the typographic signature - Build depth through border hierarchy - Use pill (9999px) for primary, 6px for ghost — no in-between ❌ **Don't** - Add box-shadows — invisible on dark, breaks border depth - Use bold (700) — system is 400 / 500 only - Apply emerald to large backgrounds — borders/links/small accents only - Lighten background above `#171717` — darkness is structural - Increase hero leading above 1.00 — density is intentional --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#fafafa` | | secondary | `#b4b4b4` | | tertiary | `#3ecf8e` | | neutral | `#171717` | | surface | `#0f0f0f` | ### Typography - **Display:** Manrope - **Body:** Manrope - **Mono:** Source Code Pro | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.5rem / 1 / 400 / 0 | | H1 | 3rem / 1 / 400 / 0 | | H2 | 2.25rem / 1.25 / 400 / 0 | | Body | 1rem / 1.5 / 400 / 0 | ### Radius - sm: `6px` - md: `8px` - lg: `16px` - pill: `9999px` ### Shadows - **button:** `rgba(0,0,0,0.1) 0 4px 12px` ### Borders - **card:** `1px solid #2e2e2e` - **divider:** `#242424` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `pill` | | background | `#0f0f0f` | | color | `#fafafa` | | border | `1px solid #fafafa` | | padding | `10px 32px` | | fontWeight | `500` | #### Secondary | Property | Value | |----------|-------| | shape | `pill` | | background | `#0f0f0f` | | color | `rgba(250,250,250,0.8)` | | border | `1px solid #2e2e2e` | | padding | `10px 32px` | | fontWeight | `500` | #### Outline | Property | Value | |----------|-------| | shape | `pill` | | background | `transparent` | | color | `#3ecf8e` | | border | `1px solid rgba(62,207,142,0.3)` | | padding | `10px 32px` | | fontWeight | `500` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#b4b4b4` | | border | `1px solid transparent` | | padding | `8px 12px` | | fontWeight | `500` | ### Charts | Property | Value | |----------|-------| | variant | `area` | | strokeWidth | `2` | | fillOpacity | `0.18` | | gridlines | `true` | | highlight | `all` | | dotMarker | `true` | | axisColor | `#898989` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(62, 207, 142, 0.15)`, color: `#3ecf8e`, border: `1px solid #3ecf8e` - **focus** — outline: `1px dashed #3ecf8e`, outline-offset: `2px` - **active** — bg: `#3ecf8e`, color: `#0f0f0f` - **disabled** — opacity: `0.35` - **loading** — opacity: `0.6` - **selected** — bg: `#3ecf8e`, color: `#0f0f0f` #### Input - **hover** — border: `1px solid rgba(62, 207, 142, 0.5)` - **focus** — bg: `rgba(62, 207, 142, 0.05)`, border: `1px solid #3ecf8e` - **disabled** — opacity: `0.35` - **error** — bg: `rgba(239,68,68,0.05)`, border: `1px solid #EF4444` #### Card - **hover** — border: `1px solid #3ecf8e` - **selected** — bg: `rgba(62, 207, 142, 0.05)`, border: `1px solid #3ecf8e` - **dragging** — opacity: `0.7` #### Tab - **hover** — color: `#3ecf8e` - **focus** — outline: `1px dashed #3ecf8e`, outline-offset: `1px` - **selected** — bg: `rgba(62, 207, 142, 0.1)`, color: `#3ecf8e` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Cursor blink.** Discrete, often stepped transitions. Like a terminal cursor: on or off. Response under 120 ms. ```css transition: all 120ms linear; ``` | Token | Value | |-------|-------| | duration.instant | `0ms` | | duration.fast | `60ms` | | duration.base | `120ms` | | duration.slow | `200ms` | | easing.standard | `linear` | | easing.decelerate | `linear` | | easing.accelerate | `linear` | | easing.spring | `steps(2, end)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the stroke carries the hierarchy. | | level1 | `none` | Border tone lifts the surface. | | level2 | `0 0 0 1px rgba(62, 207, 142, 0.5)` | Ring outline — popover. | | level3 | `0 0 0 1px #3ecf8e, 0 12px 32px -16px rgba(62, 207, 142, 0.4)` | Sheet with accent ring + glow. | | level4 | `0 0 0 1px #3ecf8e, 0 24px 64px -20px rgba(62, 207, 142, 0.5)` | Modal with accent ring + glow. | ### Content - **measure:** `78ch` (max line length for body prose) - **paragraph spacing:** `1em` - **list indent:** `1.25em` - **list gap:** `0.35em` - **link:** color `#3ecf8e`, underline `always` - **blockquote:** border `1px solid rgba(62, 207, 142, 0.5)`, padding `0.7em 1em` - **code:** background `rgba(62, 207, 142, 0.12)`, color `#3ecf8e` ### Accessibility (WCAG 2.1) **Overall:** AAA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 18.36:1 | AA | AAA | — | | Body text on canvas | 17.18:1 | AA | AAA | — | | Muted text on surface | 9.24:1 | AA | AAA | — | | Accent on surface | 9.6:1 | AA-Large | AAA | — | | Accent on canvas | 8.98:1 | AA-Large | AAA | — | --- # SYSTEM: Inkwell IDE Source: https://www.freedesignmd.com/system/inkwell-ide --- name: "Inkwell IDE" description: "Warm cream canvas with yellow-undertone ink, gothic compressed display, literary serif body, and warm crimson hover — code-editor elegance as print publication." tags: [warm, editorial, code, premium] colors: primary: "#26251e" secondary: "#5a5a52" tertiary: "#f54e00" neutral: "#f2f1ed" surface: "#ebeae5" typography: display: "Space Grotesk" body: Fraunces mono: "JetBrains Mono" scale: hero: "4.5rem / 1.1 / 500 / -2.16px" h1: "2.25rem / 1.2 / 500 / -0.72px" h2: "1.625rem / 1.25 / 500 / -0.325px" body: "1.08rem / 1.35 / 400 / 0" radius: sm: 2px md: 8px lg: 10px pill: 9999px shadows: card: "rgba(38,37,30,0.1) 0 0 0 1px, rgba(0,0,0,0.02) 0 0 16px, rgba(0,0,0,0.008) 0 0 8px" button: "rgba(0,0,0,0.1) 0 4px 12px" buttons: primary: background: #C13B27 color: #FFFEF8 border: none shape: rounded padding: 11px 20px font: display / 600 secondary: background: #FFFEF8 color: #1A1612 border: 1px solid #E8E0D0 shape: rounded padding: 11px 20px font: display / 600 outline: background: transparent color: #1A1612 border: 1px solid #1A1612 shape: rounded padding: 11px 20px font: display / 600 ghost: background: transparent color: #C13B27 border: none shape: rounded padding: 10px 12px font: display / 600 hover: underline charts: variant: stepped stroke_width: 2 fill_opacity: 0.1 gridlines: false bar_gap: 0px highlight: single dot_marker: false fonts_url: "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Fraunces:opsz,wght@9..144,400;9..144,500&family=JetBrains+Mono:wght@400&display=swap" dependencies: ["lucide-react"] --- # Inkwell IDE ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Inkwell IDE** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — rounded shape, bg `#C13B27`, text `#FFFEF8`, padding `11px 20px`, weight `600`. - **Secondary** — rounded shape, bg `#FFFEF8`, text `#1A1612`, border `1px solid #E8E0D0`, padding `11px 20px`, weight `600`. - **Outline** — rounded shape, text `#1A1612`, border `1px solid #1A1612`, padding `11px 20px`, weight `600`. - **Ghost** — rounded shape, text `#C13B27`, padding `10px 12px`, weight `600`. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#ebeae5` - Shadow: `rgba(38,37,30,0.1) 0 0 0 1px, rgba(0,0,0,0.02) 0 0 16px, rgba(0,0,0,0.008) 0 0 8px` - Radius: `radius.lg` (`10px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `boxed`. Each tab is a bordered card. Active tab gets the accent border and a subtle fill. #### Charts - Bar/line variant: `stepped` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Space Grotesk`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Fraunces`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Inkwell IDE is warm minimalism meets code-editor elegance. The entire experience is built on a warm off-white canvas (`#f2f1ed`) with dark warm-brown ink (`#26251e`) — not pure black, not neutral gray, but a deeply warm near-black with a yellow undertone that evokes old paper, ink, and craft. The warmth permeates every surface: cream backgrounds (`#e6e5e0`, `#ebeae5`), borders dissolve into transparent warm overlays, and even the error state (`#cf2d56`) carries warmth rather than clinical red. The result feels more like a premium print publication than a tech website. The typographic signature is a compressed gothic sans for display — at 72px with -2.16px letter-spacing, headlines feel precision-engineered. As secondary voice, a literary serif provides editorial counterpoint for body copy, with contextual swash alternates that bring a calligraphic quality to long-form reading. A monospace voice handles code and technical labels, connecting the marketing surface to the IDE's core identity. The border system uses warm brown at varying alpha levels (0.1, 0.2, 0.55) — borders that feel organic rather than mechanical. **Signature moves** - Compressed gothic display with aggressive negative tracking (-2.16px at 72px, -0.72px at 36px) - Literary serif body with swash alternates — editorial warmth - Warm off-white canvas (`#f2f1ed`) — never pure white - Warm near-black ink (`#26251e`) with yellow undertone - Accent crimson-orange (`#f54e00`) for brand and links - Hover state shifts text to warm crimson (`#cf2d56`) — the signature interaction - Diffused atmospheric shadows: 28px / 70px blur at moderate opacity ## 2. Palette ### Primary - **Ink Dark** `#26251e` — text, headings, dark surfaces - **Cream** `#f2f1ed` — page background - **Light Cream** `#e6e5e0` — secondary surface, button background - Pure White `#ffffff` — sparingly for max-contrast highlights ### Accent - **Ember Orange** `#f54e00` — brand, primary CTA, active links - Gold `#c08532` — premium / highlighted contexts ### Semantic - Error / Hover `#cf2d56` — warm crimson, the interaction signal - Success `#1f8a65` — muted teal-green ### Timeline colors - Thinking `#dfa88f` (peach) - Grep `#9fc9a2` (sage) - Read `#9fbbe0` (soft blue) - Edit `#c0a8dd` (lavender) ### Surface scale - 100 `#f7f7f4` / 200 `#f2f1ed` / 300 `#ebeae5` / 400 `#e6e5e0` / 500 `#e1e0db` ### Borders - Standard `rgba(38,37,30,0.1)` (warm brown 10%) - Medium `rgba(38,37,30,0.2)` - Strong `rgba(38,37,30,0.55)` ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Display | Gothic | 72px | 500 | 1.10 | -2.16px | | Section | Gothic | 36px | 500 | 1.20 | -0.72px | | Sub-heading | Gothic | 26px | 500 | 1.25 | -0.325px | | Title S | Gothic | 22px | 500 | 1.30 | -0.11px | | Body Serif | Serif | 19.2px | 500 | 1.50 | normal | | Body | Serif | 17.28px | 400 | 1.35 | normal | | UI | Gothic | 16px | 400 | 1.50 | 0.08px | | Button | Gothic | 14px | 500 | 1.00 | normal | | Caption | Gothic | 11px | 400 | 1.50 | normal | | Mono | Mono | 12px | 400 | 1.67 | normal | **Three voices, three jobs.** Gothic for display and UI. Serif for editorial body. Mono for code. Hierarchy comes from size and tracking — the display font stays at weight 500 across the board, never bolder. ## 4. Buttons ### Primary (Warm Surface) ```css background: #ebeae5; color: #26251e; padding: 10px 12px 10px 14px; border-radius: 8px; ``` Hover: text shifts to `#cf2d56`. ### Secondary Pill - `#e6e5e0` background, `rgba(38,37,30,0.6)` text - Padding 3px 8px, full pill (9999px) - For tags and filters ### Ghost - `rgba(38,37,30,0.06)` background, `rgba(38,37,30,0.55)` text - 6px 12px padding — for tertiary actions ## 5. Cards - Background: `#e6e5e0` or `#f2f1ed` - Border: `1px solid rgba(38,37,30,0.1)` - Radius: 8px standard, 4px compact, 10px featured - Elevated: `rgba(0,0,0,0.14) 0 28px 70px, rgba(0,0,0,0.1) 0 14px 32px` ## 6. Spacing - Base: 8px - Fine: `1.5, 2, 2.5, 3, 4, 5, 6` — sub-8px for icon/text micro-alignment - Standard: `8, 10, 12, 14, 16, 24, 32, 48, 64, 96` - Section vertical: 80px+ ## 7. Radius scale `1.5 / 2 / 3 / 4 / 8 / 10 / 9999` — pill for tags and filters, 8px for primary buttons and cards. ## 8. Depth & elevation | Level | Treatment | Use | |-------|-----------|-----| | 0 | Flat | Page, text blocks | | 1 | `rgba(38,37,30,0.1) 0 0 0 1px` | Standard card border | | 2 | `rgba(0,0,0,0.02) 0 0 16px` | Floating, subtle glow | | 3 | `rgba(0,0,0,0.14) 0 28px 70px` + `rgba(0,0,0,0.1) 0 14px 32px` | Modals, elevated cards | | Focus | `rgba(0,0,0,0.1) 0 4px 12px` | Interactive focus | **Atmospheric depth.** Shadows use dramatically large blur (28px, 70px) at moderate opacity (0.14, 0.1) — diffused, atmospheric lift rather than hard-edged drops. Cards don't float above the page; the page gently opens space for them. ## 9. Do's & don'ts ✅ **Do** - Use `#f2f1ed` cream as the page foundation - Apply aggressive negative tracking on gothic display (-2.16px at 72px) - Use the literary serif for body copy — editorial warmth - Shift hover text to `#cf2d56` warm crimson — the signature interaction - Use `rgba(38,37,30, α)` for warm brown borders ❌ **Don't** - Use pure white (`#ffffff`) as primary surface - Use cold blue focus rings — keep the warm tone - Reach for bold (700+) display weight — 500 is the cap - Apply 9999px radius to rectangular buttons — pills are for tags only - Use neutral gray borders — they kill the warmth --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#26251e` | | secondary | `#5a5a52` | | tertiary | `#f54e00` | | neutral | `#f2f1ed` | | surface | `#ebeae5` | ### Typography - **Display:** Space Grotesk - **Body:** Fraunces - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 4.5rem / 1.1 / 500 / -2.16px | | H1 | 2.25rem / 1.2 / 500 / -0.72px | | H2 | 1.625rem / 1.25 / 500 / -0.325px | | Body | 1.08rem / 1.35 / 400 / 0 | ### Radius - sm: `2px` - md: `8px` - lg: `10px` - pill: `9999px` ### Shadows - **card:** `rgba(38,37,30,0.1) 0 0 0 1px, rgba(0,0,0,0.02) 0 0 16px, rgba(0,0,0,0.008) 0 0 8px` - **button:** `rgba(0,0,0,0.1) 0 4px 12px` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#C13B27` | | color | `#FFFEF8` | | border | `none` | | padding | `11px 20px` | | fontFamily | `display` | | fontWeight | `600` | #### Secondary | Property | Value | |----------|-------| | shape | `rounded` | | background | `#FFFEF8` | | color | `#1A1612` | | border | `1px solid #E8E0D0` | | padding | `11px 20px` | | fontFamily | `display` | | fontWeight | `600` | #### Outline | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#1A1612` | | border | `1px solid #1A1612` | | padding | `11px 20px` | | fontFamily | `display` | | fontWeight | `600` | #### Ghost | Property | Value | |----------|-------| | shape | `rounded` | | background | `transparent` | | color | `#C13B27` | | border | `none` | | padding | `10px 12px` | | fontFamily | `display` | | fontWeight | `600` | | hoverHint | `underline` | ### Charts | Property | Value | |----------|-------| | variant | `stepped` | | strokeWidth | `2` | | fillOpacity | `0.1` | | gridlines | `false` | | barGap | `0px` | | highlight | `single` | | dotMarker | `false` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — bg: `rgba(245, 78, 0, 0.15)`, color: `#f54e00`, border: `1px solid #f54e00` - **focus** — outline: `1px dashed #f54e00`, outline-offset: `2px` - **active** — bg: `#f54e00`, color: `#ebeae5` - **disabled** — opacity: `0.35` - **loading** — opacity: `0.6` - **selected** — bg: `#f54e00`, color: `#ebeae5` #### Input - **hover** — border: `1px solid rgba(245, 78, 0, 0.5)` - **focus** — bg: `rgba(245, 78, 0, 0.05)`, border: `1px solid #f54e00` - **disabled** — opacity: `0.35` - **error** — bg: `rgba(239,68,68,0.05)`, border: `1px solid #EF4444` #### Card - **hover** — border: `1px solid #f54e00` - **selected** — bg: `rgba(245, 78, 0, 0.05)`, border: `1px solid #f54e00` - **dragging** — opacity: `0.7` #### Tab - **hover** — color: `#f54e00` - **focus** — outline: `1px dashed #f54e00`, outline-offset: `1px` - **selected** — bg: `rgba(245, 78, 0, 0.1)`, color: `#f54e00` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Cursor blink.** Discrete, often stepped transitions. Like a terminal cursor: on or off. Response under 120 ms. ```css transition: all 120ms linear; ``` | Token | Value | |-------|-------| | duration.instant | `0ms` | | duration.fast | `60ms` | | duration.base | `120ms` | | duration.slow | `200ms` | | easing.standard | `linear` | | easing.decelerate | `linear` | | easing.accelerate | `linear` | | easing.spring | `steps(2, end)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the stroke carries the hierarchy. | | level1 | `none` | Border tone lifts the surface. | | level2 | `0 0 0 1px rgba(245, 78, 0, 0.5)` | Ring outline — popover. | | level3 | `0 0 0 1px #f54e00, 0 12px 32px -16px rgba(245, 78, 0, 0.4)` | Sheet with accent ring + glow. | | level4 | `0 0 0 1px #f54e00, 0 24px 64px -20px rgba(245, 78, 0, 0.5)` | Modal with accent ring + glow. | ### Content - **measure:** `78ch` (max line length for body prose) - **paragraph spacing:** `1em` - **list indent:** `1.25em` - **list gap:** `0.35em` - **link:** color `#f54e00`, underline `always` - **blockquote:** border `1px solid rgba(245, 78, 0, 0.5)`, padding `0.7em 1em` - **code:** background `rgba(245, 78, 0, 0.12)`, color `#f54e00` ### Accessibility (WCAG 2.1) **Overall:** FAIL | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 12.76:1 | AA | AAA | — | | Body text on canvas | 13.6:1 | AA | AAA | — | | Muted text on surface | 5.77:1 | AA | AA | — | | Accent on surface | 2.92:1 | AA-Large | FAIL | `#b83b00` → 4.76:1 (AA) | | Accent on canvas | 3.11:1 | AA-Large | AA-Large | — | --- # SYSTEM: Pace Athletic Source: https://www.freedesignmd.com/system/pace-athletic --- name: "Pace Athletic" description: "A training platform with the discipline of a stopwatch. Near-black surfaces with a single chartreuse PB indicator, Archivo Black for split times at oversized scale, Inter for prose, JetBrains Mono with tabular-nums for every pace and heart-rate. Built for endurance training apps, gym programming, and athlete-facing dashboards where the only thing that matters is the next interval." tags: [fitness, dark, modern, minimal, saas] colors: primary: "#f5f5f3" secondary: "#8a8a86" tertiary: "#f5f5f3" neutral: "#1c1c1a" surface: "#0e0e0c" typography: display: "Archivo Black" body: Inter mono: "JetBrains Mono" scale: hero: "9rem / 0.88 / 900 / -0.05em" h1: "4rem / 0.95 / 900 / -0.035em" h2: "1.75rem / 1.18 / 700 / -0.015em" body: "1rem / 1.55 / 400 / -0.005em" radius: sm: 2px md: 4px lg: 6px pill: 9999px shadows: card: none button: none borders: card: "1px solid rgba(245,245,243,0.10)" divider: rgba(245,245,243,0.12) buttons: primary: background: #d4ff3a color: #0e0e0c border: none shape: sharp padding: 14px 24px font: 700 / 0.8125rem / 0.10em uppercase: true secondary: background: #1c1c1a color: #f5f5f3 border: 1px solid rgba(245,245,243,0.16) shape: sharp padding: 14px 24px font: 600 / 0.8125rem / 0.10em uppercase: true outline: background: transparent color: #f5f5f3 border: 1px solid rgba(245,245,243,0.20) shape: sharp padding: 14px 24px font: 600 / 0.8125rem / 0.10em uppercase: true ghost: background: transparent color: #8a8a86 border: none shape: sharp padding: 14px 16px font: 600 / 0.8125rem / 0.10em uppercase: true charts: variant: "thin-bars" stroke_width: 1.5 fill_opacity: 0 gridlines: false bar_gap: 3px highlight: single dot_marker: true fonts_url: "https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" dependencies: ["lucide-react"] --- # Pace Athletic ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Pace Athletic** as its design system. Treat `DESIGN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Component recipes Use these recipes verbatim when building the corresponding component. #### Buttons Four variants are defined. Pick one — never blend variants or invent a fifth. - **Primary** — sharp shape, bg `#d4ff3a`, text `#0e0e0c`, padding `14px 24px`, weight `700`, uppercased. - **Secondary** — sharp shape, bg `#1c1c1a`, text `#f5f5f3`, border `1px solid rgba(245,245,243,0.16)`, padding `14px 24px`, weight `600`, uppercased. - **Outline** — sharp shape, text `#f5f5f3`, border `1px solid rgba(245,245,243,0.20)`, padding `14px 24px`, weight `600`, uppercased. - **Ghost** — sharp shape, text `#8a8a86`, padding `14px 16px`, weight `600`, uppercased. Reach for **primary** as the single dominant CTA per screen. **Secondary** for the supporting action. **Outline** for tertiary actions in toolbars. **Ghost** for inline links and table actions. #### Cards - Background: `#0e0e0c` - Border: `1px solid rgba(245,245,243,0.10)` - Shadow: `none` - Radius: `radius.lg` (`6px`) - Internal padding: `20px` for compact cards, `24–28px` for content cards. #### Tabs Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill. #### Charts - Bar/line variant: `thin-bars` - No gridlines — let the bars/lines carry the data. - Highlight strategy: `single` — emphasize a single bar/point per chart. #### Typography pairings - **Display (`Archivo Black`)** — h1, h2, hero headlines, brand wordmarks. - **Body (`Inter`)** — paragraphs, labels, button text, form inputs. - **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## 1. Atmosphere Pace Athletic is a training platform with the discipline of a stopwatch. The page surface is near-black `#0e0e0c` — closer to charred matte than to true black, never blue-grey. Split times and PRs run in Archivo Black at 144px — the heavy industrial sans hits like a foot strike. Body sits in Inter at 16px on a 1.55 leading. Every pace, heart-rate, distance, split runs in JetBrains Mono with tabular-nums — column-aligned to the millisecond. The single accent is electric chartreuse `#d4ff3a` that appears only on the Start Workout CTA, the active interval indicator, and PR-broken markers — the moments when the athlete actually performs. The discipline is in the contrast: Archivo Black at huge scale on near-black, no glow, no gradient — the chartreuse alone carries every moment of intensity. **Signature moves** - Archivo Black at 144px for split times and PRs — heavy industrial sans, foot-strike weight - Near-black surface `#0e0e0c` — charred matte, never blue-grey - Chartreuse `#d4ff3a` exclusively on Start Workout CTA + active interval + PR markers - JetBrains Mono with tabular-nums on every pace, heart-rate, distance, split - Sharp 2-6px radius — the stopwatch voice, never pill, never rounded ## 2. Palette ### Surfaces - **Charcoal Matte** `#0e0e0c` — page background (near-black, warm undertone) - **Lift** `#1c1c1a` — secondary surfaces, secondary button - **Hairline** `rgba(245,245,243,0.10)` — every divider ### Ink - **Bone** `#f5f5f3` — text, headings, primary text on charcoal - **Ink 50** `#8a8a86` — secondary text, mono labels ### Accent - **Chartreuse** `#d4ff3a` — Start Workout CTA, active interval indicator, PR markers - **Chartreuse Soft** `rgba(212,255,58,0.12)` — focus ring, active interval row background ## 3. Typography | Role | Font | Size | Weight | Leading | Tracking | |------|------|------|--------|---------|----------| | Split Time (Hero) | Archivo Black | 144px | 900 | 0.88 | -0.05em | | H1 / Workout Title | Archivo Black | 64px | 900 | 0.95 | -0.035em | | H2 | Inter | 28px | 700 | 1.18 | -0.015em | | Body | Inter | 16px | 400 | 1.55 | -0.005em | | UI / Button | Inter | 13px | 700 | 1.4 | 0.10em uppercase | | Pace / HR / Distance | JetBrains Mono | 14px | 500 | 1.0 | 0 tabular-nums | | Big Metric | JetBrains Mono | 32px | 700 | 1.0 | 0 tabular-nums | | Label | JetBrains Mono | 11px | 500 | 1.0 | 0.12em uppercase | Archivo Black is reserved for split times and workout titles — the heavy weight is the typographic equivalent of a personal best. ## 4. Buttons ### Primary (Chartreuse — Start Workout only) ```css background: #d4ff3a; color: #0e0e0c; padding: 14px 24px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.10em; font-weight: 700; ``` The chartreuse on near-black is high-contrast on purpose — a Start button must read in peripheral vision when the athlete is mid-warm-up. ### Secondary (Lift Sharp) - `#1c1c1a` background, 1px hairline at 16% bone, bone text — same sharp shape ### Outline & Ghost - Outline: transparent, 1px hairline at 20% bone - Ghost: no border, ink-50 uppercase, hover lifts to bone ## 5. Cards ```css background: #1c1c1a; border: 1px solid rgba(245,245,243,0.10); border-radius: 6px; box-shadow: none; ``` NO shadows. The active interval card adds a 2px chartreuse left border — the only place chartreuse appears as a card edge. PR-broken cards add a chartreuse top hairline. ## 6. Charts Thin precise bars (4px wide, 3px gap) — used for pace splits and heart-rate-zone time. One bar in chartreuse (the PR / target-zone interval), others in 22% bone. Line charts at 1.5px bone, ending in a chartreuse dot marker (current pace). NO gridlines. Y-axis labels in JetBrains Mono uppercase 11px. ## 7. Tabs Underline 2px in chartreuse for the active state. Inactive tabs are ink-50 in JetBrains Mono uppercase 0.12em. Reads like a stopwatch lap selector. ## 8. Spacing - Base 4px (interval-tick aware) - Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96` - Section padding: 64px desktop, 32px mobile — dense, never airy ## 9. Do's & don'ts ✅ **Do** - Use Archivo Black for split times and workout titles only — the heavy weight IS the PR - Hold the near-black charcoal — true black reads as console, blue-grey reads as fintech - Reserve chartreuse for Start CTA + active interval + PR markers exclusively - Put every pace, heart-rate, distance, split in JetBrains Mono with tabular-nums ❌ **Don't** - Use Archivo Black for body or H2 — the heavy weight only works at 64px+ - Use chartreuse for decoration, secondary CTAs, or progress bars — three surfaces only - Use rounded or pill buttons — sharp 4px is the stopwatch voice - Add glows, neon shadows, or gradient overlays — chartreuse on charcoal alone carries the energy --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Colors | Role | Value | |-----------|-------| | primary | `#f5f5f3` | | secondary | `#8a8a86` | | tertiary | `#f5f5f3` | | neutral | `#1c1c1a` | | surface | `#0e0e0c` | ### Typography - **Display:** Archivo Black - **Body:** Inter - **Mono:** JetBrains Mono | Role | size / leading / weight / tracking | |------|------------------------------------| | Hero | 9rem / 0.88 / 900 / -0.05em | | H1 | 4rem / 0.95 / 900 / -0.035em | | H2 | 1.75rem / 1.18 / 700 / -0.015em | | Body | 1rem / 1.55 / 400 / -0.005em | ### Radius - sm: `2px` - md: `4px` - lg: `6px` - pill: `9999px` ### Shadows - **card:** `none` - **button:** `none` ### Borders - **card:** `1px solid rgba(245,245,243,0.10)` - **divider:** `rgba(245,245,243,0.12)` ### Buttons Four variants, each fully tokenized. The preview renders from these exact values. #### Primary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#d4ff3a` | | color | `#0e0e0c` | | border | `none` | | padding | `14px 24px` | | fontWeight | `700` | | fontSize | `0.8125rem` | | tracking | `0.10em` | | uppercase | `true` | #### Secondary | Property | Value | |----------|-------| | shape | `sharp` | | background | `#1c1c1a` | | color | `#f5f5f3` | | border | `1px solid rgba(245,245,243,0.16)` | | padding | `14px 24px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.10em` | | uppercase | `true` | #### Outline | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#f5f5f3` | | border | `1px solid rgba(245,245,243,0.20)` | | padding | `14px 24px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.10em` | | uppercase | `true` | #### Ghost | Property | Value | |----------|-------| | shape | `sharp` | | background | `transparent` | | color | `#8a8a86` | | border | `none` | | padding | `14px 16px` | | fontWeight | `600` | | fontSize | `0.8125rem` | | tracking | `0.10em` | | uppercase | `true` | ### Charts | Property | Value | |----------|-------| | variant | `thin-bars` | | strokeWidth | `1.5` | | fillOpacity | `0` | | gridlines | `false` | | barGap | `3px` | | highlight | `single` | | dotMarker | `true` | --- ## Pro tokens > Production-fidelity tokens. States, density, motion, elevation, > content rules and a measured WCAG contract — derived from the > resting tokens unless explicitly authored. ### States #### Button - **hover** — shadow: `4px 6px 0 0 #f5f5f3`, transform: `translateY(-2px) rotate(-1deg)` - **focus** — outline: `3px solid #f5f5f3`, outline-offset: `3px` - **active** — shadow: `1px 2px 0 0 #f5f5f3`, transform: `translateY(1px) scale(0.96)` - **disabled** — opacity: `0.4` - **loading** — opacity: `0.7` - **selected** — bg: `#f5f5f3`, color: `#f5f5f3`, transform: `rotate(-2deg)` #### Input - **hover** — border: `2px solid #f5f5f3` - **focus** — border: `2px solid #f5f5f3`, shadow: `3px 3px 0 0 #f5f5f3` - **disabled** — opacity: `0.4` - **error** — border: `2px solid #EF4444`, shadow: `3px 3px 0 0 #EF4444` #### Card - **hover** — shadow: `6px 8px 0 0 #f5f5f3`, transform: `translateY(-4px) rotate(-1deg)` - **selected** — border: `2px solid #f5f5f3`, transform: `rotate(-1deg)` - **dragging** — transform: `rotate(-3deg) scale(1.05)`, opacity: `0.85` #### Tab - **hover** — color: `#f5f5f3`, transform: `translateY(-1px)` - **focus** — outline: `3px solid #f5f5f3`, outline-offset: `2px` - **selected** — bg: `#f5f5f3`, color: `#f5f5f3`, transform: `rotate(-1deg)` ### Density | Mode | padding × | row × | body | radius × | Use for | |------|-----------|-------|------|----------|---------| | compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards | | comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI | | spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings | ### Motion **Signature — Bounce.** Exaggerated spring easing with a slight rotational tilt. Every interaction feels physical and playful. ```css transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1); ``` | Token | Value | |-------|-------| | duration.instant | `100ms` | | duration.fast | `200ms` | | duration.base | `320ms` | | duration.slow | `500ms` | | easing.standard | `cubic-bezier(0.34, 1.56, 0.64, 1)` | | easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` | | easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` | | easing.spring | `cubic-bezier(0.5, 2, 0.4, 1)` | ### Elevation Five-level scale, system-specific recipe. | Level | Shadow | Recipe | |-------|--------|--------| | level0 | `none` | Flat — the tone separates. | | level1 | `2px 3px 0 0 #f5f5f3` | Hard offset, slight shift. | | level2 | `4px 6px 0 0 #f5f5f3` | Cards — visible offset. | | level3 | `6px 8px 0 0 #f5f5f3` | Dialog — strong offset. | | level4 | `8px 12px 0 0 #f5f5f3` | Modal — maximum offset, scrim required. | ### Content - **measure:** `62ch` (max line length for body prose) - **paragraph spacing:** `1.25em` - **list indent:** `1.5em` - **list gap:** `0.55em` - **link:** color `#f5f5f3`, underline `always` - **blockquote:** border `3px solid #f5f5f3`, padding `0.8em 1.2em` - **code:** background `#f5f5f3`, color `#f5f5f3` ### Accessibility (WCAG 2.1) **Overall:** AA | Pair | Ratio | Required | Grade | Suggested fix | |------|-------|----------|-------|---------------| | Body text on surface | 17.7:1 | AA | AAA | — | | Body text on canvas | 15.64:1 | AA | AAA | — | | Muted text on surface | 5.58:1 | AA | AA | — | | Accent on surface | 17.7:1 | AA-Large | AAA | — | | Accent on canvas | 15.64:1 | AA-Large | AAA | — | --- # PATTERN: Full-bleed Grid with Dividers Source: https://www.freedesignmd.com/pattern/full-bleed-grid --- name: "Full-bleed Grid with Dividers" description: "Vertical column hairlines that span the entire viewport height, paired with horizontal section dividers. Content sits inside a centered max-width while the grid lives in the page background." tags: [layout, grid, editorial, minimal] type: pattern container: "full-bleed" content_max_width: 1200px page_padding: 0px grid: columns: 6 max_columns: 6 line_color: "rgba(15, 15, 15, 0.06)" line_width: 1px line_style: solid edge_lines: true sections: padding_y: 96px divider_color: "rgba(15, 15, 15, 0.08)" divider_width: 1px divider_style: solid band_fill: "repeating-linear-gradient(135deg, rgba(15,15,15,0.04) 0 1px, transparent 1px 8px)" intersections: style: none color: "rgba(15, 15, 15, 0.10)" size: 6px design: colors: ink: "#0a0a0a" surface: "#ffffff" accent: "#0a0a0a" muted: "#737373" hairline: "#e5e5e5" fonts: display: Geist body: Geist mono: "Geist Mono" radius: 0px google_fonts_url: "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" --- # Full-bleed Grid with Dividers ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Full-bleed Grid with Dividers** as its design system. Treat `PATTERN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Build recipes #### Page skeleton (the layout contract) - Container: `full-bleed` - Content max-width: `1200px` (typography respects this even when the page is full-bleed). - Vertical grid: **6 column hairlines** (capped at 6 on wide viewports), drawn with `1px solid rgba(15, 15, 15, 0.06)`. - Draw lines on the outer left and right edges of the page. - Section padding: `96px` top + bottom inside every section. - Section divider: `1px solid rgba(15, 15, 15, 0.08)` between sections. - Use the diagonal-stripe band fill **at most once per page** as a section opener. #### Primary CTA Exactly **one** primary CTA per page or section. The pattern's discipline depends on this. - Background: `#0a0a0a` · Color: `#ffffff` - Padding: `11px 22px` · Weight: `500` - Shape: `sharp` (radius: `0px`) #### Headlines - Family: `Geist` · Size: `clamp(2.25rem, 4vw, 3.25rem)` · Leading: `1` · Weight: `600` - Tracking: `-0.04em` #### Body copy - Family: `Geist` · Size: `0.9375rem` · Leading: `1.55` · Color: `#737373` - Max line length: 60–66 characters. Never let prose stretch the full content width. #### Eyebrows / metadata - Family: `Geist Mono` · Size: `0.6875rem` · Letter-spacing: `0.16em` - Uppercased. Color: `#0a0a0a`. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. - Break the layout contract: the column count, divider rhythm, and content max-width are part of the pattern. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] The page respects the pattern's grid (column count + content max-width). - [ ] Section dividers use the declared color, width, and style. - [ ] Exactly one primary CTA per section — never duplicate. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview The full-bleed grid is a structural device, not a decoration. Vertical hairlines run from the top of the viewport to the footer; horizontal hairlines mark the boundaries between sections. Together they create a steady rhythm and a "calibrated instrument" feel that suits SaaS, fintech, and developer tooling. Content stays inside a centered max-width column for readability. The grid itself sits behind the content, painted into the page background, and is never allowed to crop or break the typography. ## When to use it - Marketing homepages where the product is technical and trust matters. - Long landing pages with several distinct sections that benefit from clear separation. - Pricing, docs, and feature pages where a measured, surveyed feel is on-brand. ## When to avoid it - Heavily illustrated pages or pages with full-bleed imagery — the lines compete with the visuals. - Mobile-first apps where viewport width is too narrow to make the columns legible. Drop to 2 columns or hide them entirely below 768px. ## Do - Keep the lines low-contrast (4–8% opacity over the page background). - Use the same column count globally so the grid feels like architecture, not decoration. - Align important hero elements (logo, CTA) to a column line for a crafted feel. ## Don't - Don't draw the grid above z-index 0 — it must read as background, not foreground. - Don't mix multiple column counts on the same page. - Don't use the diagonal stripe band more than once per page; it loses meaning if repeated. ## Notes - The pattern works with any color system. The hairline color should be derived from the system's foreground at 6–10% alpha so it sits naturally over the surface tone. - Pair with sans-serif or mono typography for the strongest "instrument" effect. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Container | Property | Value | |----------|-------| | container | `full-bleed` | | contentMaxWidth | `1200px` | | pagePadding | `0px` | ### Vertical Grid | Property | Value | |----------|-------| | columns | `6` | | maxColumns | `6` | | lineColor | `rgba(15, 15, 15, 0.06)` | | lineWidth | `1px` | | lineStyle | `solid` | | edgeLines | `true` | ### Section Dividers | Property | Value | |----------|-------| | paddingY | `96px` | | dividerColor | `rgba(15, 15, 15, 0.08)` | | dividerWidth | `1px` | | dividerStyle | `solid` | | bandFill | `repeating-linear-gradient(135deg, rgba(15,15,15,0.04) 0 1px, transparent 1px 8px)` | ### Intersections | Property | Value | |----------|-------| | style | `none` | | color | `rgba(15, 15, 15, 0.10)` | | size | `6px` | ## Design Identity > This pattern ships with its own typography, color, and CTA tokens. > Use the values below verbatim — they are the system, not a starting point. ### Colors | Token | Value | |-------|-------| | ink (primary text) | `#0a0a0a` | | surface (page background) | `#ffffff` | | accent (single moment per page) | `#0a0a0a` | | muted (metadata, captions) | `#737373` | | hairline (rules and dividers) | `#e5e5e5` | ### Typography Load via Google Fonts: ```html ``` | Role | Family | |------|--------| | display (headlines) | `Geist` | | body (prose) | `Geist` | | mono (metadata, numerals) | `Geist Mono` | ### Type Scale | Role | Size | Leading | Weight | Tracking | |------|------|---------|--------|----------| | Hero / H1 | `clamp(2.25rem, 4vw, 3.25rem)` | `1` | `600` | `-0.04em` | | Body | `0.9375rem` | `1.55` | `400` | — | | Eyebrow | `0.6875rem` | — | `500` | `0.16em` | ### Primary CTA | Property | Value | |----------|-------| | shape | `sharp` | | background | `#0a0a0a` | | color | `#ffffff` | | padding | `11px 22px` | | fontWeight | `500` | | radius | `0px` | > One CTA per page. The pattern's discipline depends on this — never duplicate. --- ## Reference Implementation Copy-paste-ready HTML + CSS that renders this pattern with the exact token values declared above. Theme the colors against your system's hairline tone. ### HTML ```html

Page title

…

``` ### CSS ```css :root { --content-max: 1200px; --grid-line: rgba(15, 15, 15, 0.06); --divider: rgba(15, 15, 15, 0.08); --section-y: 96px; } .page { position: relative; min-height: 100vh; } /* Full-height vertical hairlines. Drawn with a 6-column flex container that fills the viewport. */ .grid-overlay { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); pointer-events: none; z-index: 0; } .grid-overlay span { border-right: 1px solid var(--grid-line); } .grid-overlay span:first-child { border-left: 1px solid var(--grid-line); } /* Sections sit above the grid, with a horizontal hairline between them. */ .section { position: relative; z-index: 1; padding: var(--section-y) 0; border-bottom: 1px solid var(--divider); } /* Content stays centered, never full-bleed. */ .content { max-width: var(--content-max); margin: 0 auto; padding: 0 24px; } /* Optional diagonal-stripe band — use sparingly. */ .section--band { background-image: repeating-linear-gradient( 135deg, rgba(15,15,15,0.04) 0 1px, transparent 1px 8px ); } ``` --- # PATTERN: Asymmetric Editorial Split Source: https://www.freedesignmd.com/pattern/asymmetric-split --- name: "Asymmetric Editorial Split" description: "A 1/3 + 2/3 vertical split with a single hairline running the full page height. The narrow column carries metadata and eyebrow type; the wide column carries the lead. Classic magazine architecture for landing pages." tags: [layout, editorial, split, asymmetric] type: pattern container: "full-bleed" content_max_width: 1280px page_padding: 0px grid: columns: 2 max_columns: 2 line_color: "rgba(15, 15, 15, 0.10)" line_width: 1px line_style: solid edge_lines: false sections: padding_y: 120px divider_color: "rgba(15, 15, 15, 0.08)" divider_width: 1px divider_style: solid intersections: style: none color: "rgba(15, 15, 15, 0.10)" size: 4px design: colors: ink: "#0c1a2c" surface: "#f7f8fa" accent: "#1f4ed8" muted: "#6b7585" hairline: "#e3e6ec" fonts: display: "Inter Tight" body: Inter mono: "JetBrains Mono" radius: 8px google_fonts_url: "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" --- # Asymmetric Editorial Split ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Asymmetric Editorial Split** as its design system. Treat `PATTERN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Build recipes #### Page skeleton (the layout contract) - Container: `full-bleed` - Content max-width: `1280px` (typography respects this even when the page is full-bleed). - Vertical grid: **2 column hairlines** (capped at 2 on wide viewports), drawn with `1px solid rgba(15, 15, 15, 0.10)`. - Section padding: `120px` top + bottom inside every section. - Section divider: `1px solid rgba(15, 15, 15, 0.08)` between sections. #### Primary CTA Exactly **one** primary CTA per page or section. The pattern's discipline depends on this. - Background: `#0c1a2c` · Color: `#ffffff` - Padding: `12px 24px` · Weight: `600` - Shape: `rounded` (radius: `8px`) #### Headlines - Family: `Inter Tight` · Size: `clamp(2.5rem, 4.5vw, 3.75rem)` · Leading: `1.02` · Weight: `700` - Tracking: `-0.035em` #### Body copy - Family: `Inter` · Size: `1rem` · Leading: `1.6` · Color: `#6b7585` - Max line length: 60–66 characters. Never let prose stretch the full content width. #### Eyebrows / metadata - Family: `JetBrains Mono` · Size: `0.6875rem` · Letter-spacing: `0.16em` - Uppercased. Color: `#1f4ed8`. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. - Break the layout contract: the column count, divider rhythm, and content max-width are part of the pattern. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] The page respects the pattern's grid (column count + content max-width). - [ ] Section dividers use the declared color, width, and style. - [ ] Exactly one primary CTA per section — never duplicate. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview The asymmetric editorial split is the oldest layout in print — and still the strongest for marketing pages that have something to say. A single vertical hairline runs the full page height at the 33.33% mark, dividing every section into a narrow left column (metadata, eyebrow, captions, dates) and a wide right column (lead headline, body, the actual argument). Unlike a symmetric two-column split, the asymmetry forces hierarchy. The narrow column reads as instrument panel; the wide column reads as voice. The eye lands on the wide column first every time. ## When to use it - Editorial landing pages where copy is the protagonist. - Long-form launches, manifestos, brand pages. - Pricing pages where the narrow column carries plan name + price and the wide column carries the feature argument. - Article and case-study templates. ## When to avoid it - Dashboards or app surfaces — the asymmetry wastes screen real estate. - Heavily illustrated pages where each section needs the full bleed. - Mobile-first builds where the 1/3 column collapses to nothing useful. Stack vertically below 768px and treat the eyebrow as a leading label. ## Do - Anchor the narrow column to the top of every section so the eye scans down a consistent spine. - Use the narrow column for typographic discipline: eyebrow caps, dates, authors, section numbers, mono labels. - Keep the hairline at 8–12% foreground alpha so it reads as architecture, never as a border. - Allow the wide column to break the grid for hero imagery or pull-quotes — the asymmetry tolerates one bold violation per page. ## Don't - Don't put body paragraphs in the narrow column. The line length is wrong. - Don't move the split line between sections — it must be a single continuous hairline from the top of the page to the bottom. - Don't add a second vertical hairline. The whole point is the single split. - Don't widen the narrow column past 40%. Past that, the hierarchy collapses and the layout reads as a weak two-up. ## Notes - The hairline color should be derived from the foreground at ~10% alpha so it sits inside the system rather than on top of it. - Pair with serif display + sans body for maximum editorial register, or with sans display + mono captions for a quieter modern feel. - The pattern is composable with any color system in the catalog. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Container | Property | Value | |----------|-------| | container | `full-bleed` | | contentMaxWidth | `1280px` | | pagePadding | `0px` | ### Vertical Grid | Property | Value | |----------|-------| | columns | `2` | | maxColumns | `2` | | lineColor | `rgba(15, 15, 15, 0.10)` | | lineWidth | `1px` | | lineStyle | `solid` | | edgeLines | `false` | ### Section Dividers | Property | Value | |----------|-------| | paddingY | `120px` | | dividerColor | `rgba(15, 15, 15, 0.08)` | | dividerWidth | `1px` | | dividerStyle | `solid` | ### Intersections | Property | Value | |----------|-------| | style | `none` | | color | `rgba(15, 15, 15, 0.10)` | | size | `4px` | ## Design Identity > This pattern ships with its own typography, color, and CTA tokens. > Use the values below verbatim — they are the system, not a starting point. ### Colors | Token | Value | |-------|-------| | ink (primary text) | `#0c1a2c` | | surface (page background) | `#f7f8fa` | | accent (single moment per page) | `#1f4ed8` | | muted (metadata, captions) | `#6b7585` | | hairline (rules and dividers) | `#e3e6ec` | ### Typography Load via Google Fonts: ```html ``` | Role | Family | |------|--------| | display (headlines) | `Inter Tight` | | body (prose) | `Inter` | | mono (metadata, numerals) | `JetBrains Mono` | ### Type Scale | Role | Size | Leading | Weight | Tracking | |------|------|---------|--------|----------| | Hero / H1 | `clamp(2.5rem, 4.5vw, 3.75rem)` | `1.02` | `700` | `-0.035em` | | Body | `1rem` | `1.6` | `400` | — | | Eyebrow | `0.6875rem` | — | `600` | `0.16em` | ### Primary CTA | Property | Value | |----------|-------| | shape | `rounded` | | background | `#0c1a2c` | | color | `#ffffff` | | padding | `12px 24px` | | fontWeight | `600` | | radius | `8px` | > One CTA per page. The pattern's discipline depends on this — never duplicate. --- ## Reference Implementation Copy-paste-ready HTML + CSS that renders this pattern with the exact token values declared above. Theme the colors against your system's hairline tone. ### HTML ```html

The argument starts here.

Lead paragraph in the wide column. The narrow column carries metadata.

Section heading.

Body copy lives in the wide column only.

``` ### CSS ```css :root { --content-max: 1280px; --split-line: rgba(15, 15, 15, 0.10); --divider: rgba(15, 15, 15, 0.08); --section-y: 120px; --gap: 48px; } .page { position: relative; min-height: 100vh; } /* Single full-height hairline at 33.33%. */ .split-line { position: absolute; top: 0; bottom: 0; left: 33.3333%; width: 1px; background: var(--split-line); pointer-events: none; z-index: 0; } /* Sections are two-column grids that align to the split line. */ .section { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 2fr; column-gap: var(--gap); max-width: var(--content-max); margin: 0 auto; padding: var(--section-y) 32px; border-bottom: 1px solid var(--divider); } .col-narrow { /* Metadata, eyebrows, captions only — never body copy. */ font-size: 0.8125rem; } .eyebrow { text-transform: uppercase; letter-spacing: 0.10em; font-family: ui-monospace, "JetBrains Mono", monospace; } .col-wide h1 { font-size: clamp(2.25rem, 4vw, 4rem); line-height: 1.05; } .col-wide p { max-width: 64ch; line-height: 1.65; } /* Mobile: collapse to a single column, eyebrow becomes a leading label. */ @media (max-width: 768px) { .split-line { display: none; } .section { grid-template-columns: 1fr; row-gap: 16px; padding: 64px 24px; } } ``` --- # PATTERN: Marginalia Notes Source: https://www.freedesignmd.com/pattern/marginalia-notes --- name: "Marginalia Notes" description: "A narrow left margin carries mono caps section numbers, dates, and inline footnotes alongside a wide reading column. Inspired by scholarly typesetting — perfect for documentation, case studies, and long-form essays." tags: [layout, docs, "long-read", editorial] type: pattern container: centered content_max_width: 1080px page_padding: 64px grid: columns: 2 max_columns: 2 line_color: "rgba(15, 15, 15, 0.06)" line_width: 1px line_style: solid edge_lines: false sections: padding_y: 72px divider_color: "rgba(15, 15, 15, 0.06)" divider_width: 1px divider_style: solid intersections: style: none color: "rgba(15, 15, 15, 0.10)" size: 4px design: colors: ink: "#1c1815" surface: "#f5efe4" accent: "#9a3a1a" muted: "#7a7068" hairline: "#ddd4c5" fonts: display: "Source Serif 4" body: "Source Serif 4" mono: "JetBrains Mono" radius: 2px google_fonts_url: "https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&family=JetBrains+Mono:wght@400;500&display=swap" --- # Marginalia Notes ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Marginalia Notes** as its design system. Treat `PATTERN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Build recipes #### Page skeleton (the layout contract) - Container: `centered` - Content max-width: `1080px` (typography respects this even when the page is full-bleed). - Vertical grid: **2 column hairlines** (capped at 2 on wide viewports), drawn with `1px solid rgba(15, 15, 15, 0.06)`. - Section padding: `72px` top + bottom inside every section. - Section divider: `1px solid rgba(15, 15, 15, 0.06)` between sections. #### Primary CTA Exactly **one** primary CTA per page or section. The pattern's discipline depends on this. - Background: `#1c1815` · Color: `#f5efe4` - Padding: `10px 20px` · Weight: `500` - Shape: `rounded` (radius: `2px`) #### Headlines - Family: `Source Serif 4` · Size: `clamp(2rem, 3.5vw, 2.75rem)` · Leading: `1.12` · Weight: `600` - Tracking: `-0.015em` - The pattern's signature: split the headline so the **second clause is italic in the accent color**. Example: "A clearer way to *say less.*" #### Body copy - Family: `Source Serif 4` · Size: `1rem` · Leading: `1.7` · Color: `#7a7068` - Max line length: 60–66 characters. Never let prose stretch the full content width. #### Eyebrows / metadata - Family: `JetBrains Mono` · Size: `0.6875rem` · Letter-spacing: `0.14em` - Uppercased. Color: `#9a3a1a`. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. - Break the layout contract: the column count, divider rhythm, and content max-width are part of the pattern. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] The page respects the pattern's grid (column count + content max-width). - [ ] Section dividers use the declared color, width, and style. - [ ] Exactly one primary CTA per section — never duplicate. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Marginalia Notes borrows from scholarly typesetting: a narrow column on the left carries mono caps section numbers, dates, source references, and short inline footnotes; the wide column on the right carries the reading material. The two columns share a baseline grid so that every margin annotation aligns to the heading or paragraph it annotates. Unlike the Asymmetric Split, this pattern has no hairline between columns — the separation is purely typographic. The mono caps in the margin do all the work; they read as instrument labels next to the prose. ## When to use it - Documentation pages, technical references, API docs. - Long-form essays and case studies where source citations and side notes belong next to the paragraph rather than at the end. - Changelogs where each entry needs a date stamp in the margin. - Brand stories and manifestos that benefit from a "studied" feel. ## When to avoid it - Marketing landing pages where the lead needs the full width. - Pages without a strong reason to use the margin — empty marginalia reads as a layout mistake. - Mobile views below 768px. Collapse to a single column and inline the margin notes as small caps eyebrows above each paragraph. ## Do - Use mono caps at 0.10–0.12em tracking for every margin label. The caps voice is the entire visual signature. - Keep the reading column line length between 60–75ch. The pattern only works if the prose is comfortable to read. - Align margin notes to the top of the paragraph they reference, never centered vertically. - Use margin labels for: section numbers (01, 02), dates, source refs, glossary terms, footnote markers. ## Don't - Don't put paragraphs of body copy in the margin. Maximum 2 lines per note. - Don't draw a hairline between the columns. The separation is typographic. - Don't mix mono caps with sans caps in the margin — pick one and hold it. - Don't let the margin column exceed 220px. Past that, the wide column narrows past comfortable reading width. ## Notes - Pair with a serif body face for the strongest scholarly register, or with a modern sans for documentation feel. - The mono in the margin should be the same family used everywhere else mono appears in the system — consistency is what makes the marginalia read as intentional rather than decorative. - The pattern composes with any color system; use foreground at ~50% alpha for the margin labels so they recede from the prose. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Container | Property | Value | |----------|-------| | container | `centered` | | contentMaxWidth | `1080px` | | pagePadding | `64px` | ### Vertical Grid | Property | Value | |----------|-------| | columns | `2` | | maxColumns | `2` | | lineColor | `rgba(15, 15, 15, 0.06)` | | lineWidth | `1px` | | lineStyle | `solid` | | edgeLines | `false` | ### Section Dividers | Property | Value | |----------|-------| | paddingY | `72px` | | dividerColor | `rgba(15, 15, 15, 0.06)` | | dividerWidth | `1px` | | dividerStyle | `solid` | ### Intersections | Property | Value | |----------|-------| | style | `none` | | color | `rgba(15, 15, 15, 0.10)` | | size | `4px` | ## Design Identity > This pattern ships with its own typography, color, and CTA tokens. > Use the values below verbatim — they are the system, not a starting point. ### Colors | Token | Value | |-------|-------| | ink (primary text) | `#1c1815` | | surface (page background) | `#f5efe4` | | accent (single moment per page) | `#9a3a1a` | | muted (metadata, captions) | `#7a7068` | | hairline (rules and dividers) | `#ddd4c5` | ### Typography Load via Google Fonts: ```html ``` | Role | Family | |------|--------| | display (headlines) | `Source Serif 4` | | body (prose) | `Source Serif 4` | | mono (metadata, numerals) | `JetBrains Mono` | ### Type Scale | Role | Size | Leading | Weight | Tracking | |------|------|---------|--------|----------| | Hero / H1 | `clamp(2rem, 3.5vw, 2.75rem)` | `1.12` | `600` | `-0.015em` | | Body | `1rem` | `1.7` | `400` | — | | Eyebrow | `0.6875rem` | — | `500` | `0.14em` | > The hero pairs roman + italic — split the headline so the secondary clause renders italic in the accent color. ### Primary CTA | Property | Value | |----------|-------| | shape | `rounded` | | background | `#1c1815` | | color | `#f5efe4` | | padding | `10px 20px` | | fontWeight | `500` | | radius | `2px` | > One CTA per page. The pattern's discipline depends on this — never duplicate. --- ## Reference Implementation Copy-paste-ready HTML + CSS that renders this pattern with the exact token values declared above. Theme the colors against your system's hairline tone. ### HTML ```html

The reading column carries the lead.

Body paragraphs stay between 60 and 75 characters per line. The margin column on the left carries section numbers, dates, and short inline footnotes that align to the paragraph they annotate.

Subsection heading.

Margin notes never exceed two short lines. Anything longer belongs in the prose itself.

``` ### CSS ```css :root { --content-max: 1080px; --margin-w: 180px; --gap: 48px; --divider: rgba(15, 15, 15, 0.06); --margin-fg: rgba(15, 15, 15, 0.55); } .doc { max-width: var(--content-max); margin: 0 auto; padding: 64px 32px; } /* Two-column block: narrow margin + wide prose. No hairline between them. */ .block { display: grid; grid-template-columns: var(--margin-w) 1fr; column-gap: var(--gap); padding: 72px 0; border-bottom: 1px solid var(--divider); } /* Margin column — mono caps voice for every label. */ .margin { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 0.75rem; color: var(--margin-fg); line-height: 1.5; } .margin .label { text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 6px; } .margin .date, .margin .note { font-size: 0.6875rem; } /* Reading column — comfortable line length. */ .prose { max-width: 65ch; } .prose h1 { font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.1; } .prose h2 { font-size: 1.5rem; line-height: 1.3; } .prose p { line-height: 1.7; } /* Mobile: collapse to single column, margin labels become eyebrows. */ @media (max-width: 768px) { .block { grid-template-columns: 1fr; row-gap: 12px; padding: 48px 0; } .margin .date, .margin .note { display: none; } } ``` --- # PATTERN: Stacked Hero Bands Source: https://www.freedesignmd.com/pattern/stacked-bands --- name: "Stacked Hero Bands" description: "Full-bleed horizontal sections stacked floor-to-ceiling, alternating between plain surface and a diagonal-stripe band. No vertical grid — the rhythm comes from the section heights and the hard hairline between them." tags: [layout, hero, "full-bleed", rhythm] type: pattern container: "full-bleed" content_max_width: 1200px page_padding: 0px grid: columns: 0 max_columns: 0 line_color: transparent line_width: 0px line_style: solid edge_lines: false sections: padding_y: 160px divider_color: "rgba(15, 15, 15, 0.12)" divider_width: 1px divider_style: solid band_fill: "repeating-linear-gradient(135deg, rgba(15,15,15,0.045) 0 1px, transparent 1px 10px)" intersections: style: none color: transparent size: 0px design: colors: ink: "#1a1817" surface: "#ede9e3" accent: "#d94a2b" muted: "#7a746e" hairline: "#cfc8be" fonts: display: Archivo body: Archivo mono: "JetBrains Mono" radius: 4px google_fonts_url: "https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;800;900&family=JetBrains+Mono:wght@400;500&display=swap" --- # Stacked Hero Bands ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Stacked Hero Bands** as its design system. Treat `PATTERN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Build recipes #### Page skeleton (the layout contract) - Container: `full-bleed` - Content max-width: `1200px` (typography respects this even when the page is full-bleed). - Vertical grid: **0 column hairlines**, drawn with `0px solid transparent`. - Section padding: `160px` top + bottom inside every section. - Section divider: `1px solid rgba(15, 15, 15, 0.12)` between sections. - Use the diagonal-stripe band fill **at most once per page** as a section opener. #### Primary CTA Exactly **one** primary CTA per page or section. The pattern's discipline depends on this. - Background: `#1a1817` · Color: `#ede9e3` - Padding: `13px 24px` · Weight: `700` - Shape: `sharp` (radius: `0px`) - Uppercase, tracking: `0.06em` #### Headlines - Family: `Archivo` · Size: `clamp(2.75rem, 5vw, 4.25rem)` · Leading: `0.95` · Weight: `800` - Tracking: `-0.04em` #### Body copy - Family: `Archivo` · Size: `1rem` · Leading: `1.55` · Color: `#7a746e` - Max line length: 60–66 characters. Never let prose stretch the full content width. #### Eyebrows / metadata - Family: `JetBrains Mono` · Size: `0.6875rem` · Letter-spacing: `0.18em` - Uppercased. Color: `#d94a2b`. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. - Break the layout contract: the column count, divider rhythm, and content max-width are part of the pattern. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] The page respects the pattern's grid (column count + content max-width). - [ ] Section dividers use the declared color, width, and style. - [ ] Exactly one primary CTA per section — never duplicate. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Stacked Hero Bands is the inverse of a vertical-grid layout. There is no column hairline anywhere on the page. Instead the entire visual rhythm comes from full-bleed horizontal sections stacked floor-to-ceiling, alternating between a plain surface and a band filled with a diagonal stripe pattern. A single hairline divides each band from the next. Each band is tall — 160px+ vertical padding — so it reads as a "floor" of the page rather than a section. Content lives inside a centered max-width column within each band, but the band itself bleeds to the viewport edges. The diagonal-stripe fill on alternating bands gives the page a steady "ledger" or "engineered surface" texture without ever crowding the content. ## When to use it - Marketing homepages where each section is a discrete idea. - Product pages where features stack as parallel arguments. - Brand pages and case studies that benefit from a strong horizontal rhythm. - Anywhere "calibrated instrument" is the desired feel but the system already has a complex column structure that would clash with vertical hairlines. ## When to avoid it - Long documentation or article pages — the tall bands waste vertical space and break reading rhythm. - Dashboards and app surfaces — the alternating fills compete with data. - Pages with full-bleed photography, since the photo wants to be the band. ## Do - Hold the diagonal-stripe alpha at 4–5% foreground. Past that the texture becomes graph paper and overpowers the content. - Use the same diagonal angle (135°) throughout. Mixing angles destroys the rhythm. - Keep the divider hairline at 10–14% foreground alpha so the band-to-band transition reads as architecture. - Alternate strictly: plain → band → plain → band. Two plain bands in a row read as a layout mistake. ## Don't - Don't introduce a vertical column hairline — the whole point of this pattern is horizontal-only rhythm. - Don't change the stripe angle, spacing, or alpha between bands. Consistency is the entire device. - Don't shrink the section padding below 96px. The bands need height to read as floors rather than rows. - Don't stack three or more bands in a row without a plain surface between them. The texture loses meaning. ## Notes - The diagonal-stripe band can be replaced with any subtle texture (cross-hatch, dot grid, halftone) as long as it stays at 4–5% foreground alpha and uses a single repeating angle. - The pattern composes with any color system. The hairline divider and stripe fill should be derived from the system foreground so the rhythm carries the system tone. - Pair with bold display type — the bands give large headlines room to breathe. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Container | Property | Value | |----------|-------| | container | `full-bleed` | | contentMaxWidth | `1200px` | | pagePadding | `0px` | ### Vertical Grid | Property | Value | |----------|-------| | columns | `0` | | maxColumns | `0` | | lineColor | `transparent` | | lineWidth | `0px` | | lineStyle | `solid` | | edgeLines | `false` | ### Section Dividers | Property | Value | |----------|-------| | paddingY | `160px` | | dividerColor | `rgba(15, 15, 15, 0.12)` | | dividerWidth | `1px` | | dividerStyle | `solid` | | bandFill | `repeating-linear-gradient(135deg, rgba(15,15,15,0.045) 0 1px, transparent 1px 10px)` | ### Intersections | Property | Value | |----------|-------| | style | `none` | | color | `transparent` | | size | `0px` | ## Design Identity > This pattern ships with its own typography, color, and CTA tokens. > Use the values below verbatim — they are the system, not a starting point. ### Colors | Token | Value | |-------|-------| | ink (primary text) | `#1a1817` | | surface (page background) | `#ede9e3` | | accent (single moment per page) | `#d94a2b` | | muted (metadata, captions) | `#7a746e` | | hairline (rules and dividers) | `#cfc8be` | ### Typography Load via Google Fonts: ```html ``` | Role | Family | |------|--------| | display (headlines) | `Archivo` | | body (prose) | `Archivo` | | mono (metadata, numerals) | `JetBrains Mono` | ### Type Scale | Role | Size | Leading | Weight | Tracking | |------|------|---------|--------|----------| | Hero / H1 | `clamp(2.75rem, 5vw, 4.25rem)` | `0.95` | `800` | `-0.04em` | | Body | `1rem` | `1.55` | `400` | — | | Eyebrow | `0.6875rem` | — | `600` | `0.18em` | ### Primary CTA | Property | Value | |----------|-------| | shape | `sharp` | | background | `#1a1817` | | color | `#ede9e3` | | padding | `13px 24px` | | fontWeight | `700` | | uppercase | `true` | | tracking | `0.06em` | | radius | `0px` | > One CTA per page. The pattern's discipline depends on this — never duplicate. --- ## Reference Implementation Copy-paste-ready HTML + CSS that renders this pattern with the exact token values declared above. Theme the colors against your system's hairline tone. ### HTML ```html

Hero headline lives here.

The first band is plain — bleed-to-bleed surface with no texture.

Second band carries the diagonal texture.

Alternating bands give the page its rhythm.

Third band returns to plain surface.

Fourth band carries the texture again.

``` ### CSS ```css :root { --content-max: 1200px; --section-y: 160px; --divider: rgba(15, 15, 15, 0.12); --stripe-fill: repeating-linear-gradient( 135deg, rgba(15, 15, 15, 0.045) 0 1px, transparent 1px 10px ); } .page { position: relative; } /* Each band is full-bleed and tall. Hairline divider on the bottom. */ .band { width: 100%; padding: var(--section-y) 0; border-bottom: 1px solid var(--divider); } /* Alternating fill — plain surface vs diagonal-stripe texture. */ .band--plain { background: transparent; } .band--stripe { background-image: var(--stripe-fill); } /* Content stays inside a centered max-width column. */ .content { max-width: var(--content-max); margin: 0 auto; padding: 0 32px; } .content h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.05; } .content h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; } .content p { max-width: 60ch; line-height: 1.65; margin-top: 16px; } /* Mobile: shorter bands, narrower padding. The alternation still reads. */ @media (max-width: 768px) { .band { padding: 96px 0; } .content { padding: 0 24px; } } ``` --- # PATTERN: Centered Single Column Source: https://www.freedesignmd.com/pattern/centered-column --- name: "Centered Single Column" description: "One narrow centered column on a clean canvas. No grid, no dividers, no chrome — the entire rhythm comes from generous vertical spacing between blocks. The most disciplined layout in the catalog." tags: [layout, minimal, centered, "long-read"] type: pattern container: centered content_max_width: 640px page_padding: 120px grid: columns: 0 max_columns: 0 line_color: transparent line_width: 0px line_style: solid edge_lines: false sections: padding_y: 96px divider_color: transparent divider_width: 0px divider_style: solid intersections: style: none color: transparent size: 0px design: colors: ink: "#1a1614" surface: "#fbf8f3" accent: "#b8422e" muted: "#857d76" hairline: "#e8e2d8" fonts: display: Fraunces body: "Source Serif 4" mono: "JetBrains Mono" radius: 999px google_fonts_url: "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500&family=JetBrains+Mono:wght@400;500&display=swap" --- # Centered Single Column ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Centered Single Column** as its design system. Treat `PATTERN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Build recipes #### Page skeleton (the layout contract) - Container: `centered` - Content max-width: `640px` (typography respects this even when the page is full-bleed). - Vertical grid: **0 column hairlines**, drawn with `0px solid transparent`. - Section padding: `96px` top + bottom inside every section. - Section divider: `0px solid transparent` between sections. #### Primary CTA Exactly **one** primary CTA per page or section. The pattern's discipline depends on this. - Background: `#b8422e` · Color: `#ffffff` - Padding: `12px 22px` · Weight: `500` - Shape: `pill` (radius: `999px`) #### Headlines - Family: `Fraunces` · Size: `clamp(2.25rem, 4vw, 3.25rem)` · Leading: `1.06` · Weight: `600` - Tracking: `-0.02em` - The pattern's signature: split the headline so the **second clause is italic in the accent color**. Example: "A clearer way to *say less.*" #### Body copy - Family: `Source Serif 4` · Size: `1.0625rem` · Leading: `1.7` · Color: `#857d76` - Max line length: 60–66 characters. Never let prose stretch the full content width. #### Eyebrows / metadata - Family: `JetBrains Mono` · Size: `0.6875rem` · Letter-spacing: `0.18em` - Uppercased. Color: `#b8422e`. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. - Break the layout contract: the column count, divider rhythm, and content max-width are part of the pattern. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] The page respects the pattern's grid (column count + content max-width). - [ ] Section dividers use the declared color, width, and style. - [ ] Exactly one primary CTA per section — never duplicate. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview The centered single column is the most disciplined layout pattern in the catalog. One narrow column — 640px max-width — sits centered on the page. There is no vertical grid, no horizontal divider, no surface fill, no chrome of any kind. Every block of content (heading, paragraph, image, quote) stacks vertically with generous space between them. The rhythm of that spacing is the entire layout. This pattern works because removing every visual scaffold forces the typography and the spacing to carry the page. If the type scale is wrong or the vertical spacing is timid, the layout collapses. When both are right, the result reads as the most premium thing on the screen. ## When to use it - Long-form writing: essays, manifestos, announcements, release notes. - Author pages, single-purpose landing pages, "now" pages. - Brand stories where the prose is the entire product. - Documentation index pages (not nested doc bodies — those want marginalia). ## When to avoid it - Marketing homepages with multiple parallel arguments — the single column cannot carry side-by-side comparison. - Pricing pages, feature grids, anything that needs columns. - Dashboards or any application surface. ## Do - Hold the column at 600–680px max-width. Past 720px the line length becomes uncomfortable; below 560px the prose feels cramped. - Use 96px+ vertical padding between major sections. The whitespace IS the divider. - Set body line-height to 1.65–1.75. Tight leading kills this layout. - Allow images and pull-quotes to break out of the column to a wider band (~880px) for visual rhythm — but never to full-bleed. ## Don't - Don't add any divider — hairline, dotted line, decorative rule, or background fill. The discipline IS the brand. - Don't introduce a second column for sidenotes or asides. Use Marginalia Notes if you need that. - Don't shrink the section padding below 64px. The rhythm dies immediately. - Don't justify the body text. Left-aligned, ragged right — always. ## Notes - Pair with serif body for editorial register, or sans body for modern feel. Either works; what matters is that one face carries the entire page. - The pattern composes with any color system. The canvas should be solid — no gradient, no glass, no texture. The page is the type and the space. - For dates, authors, metadata: stack them above the title in a single small line of mono caps — never in a sidebar. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Container | Property | Value | |----------|-------| | container | `centered` | | contentMaxWidth | `640px` | | pagePadding | `120px` | ### Vertical Grid | Property | Value | |----------|-------| | columns | `0` | | maxColumns | `0` | | lineColor | `transparent` | | lineWidth | `0px` | | lineStyle | `solid` | | edgeLines | `false` | ### Section Dividers | Property | Value | |----------|-------| | paddingY | `96px` | | dividerColor | `transparent` | | dividerWidth | `0px` | | dividerStyle | `solid` | ### Intersections | Property | Value | |----------|-------| | style | `none` | | color | `transparent` | | size | `0px` | ## Design Identity > This pattern ships with its own typography, color, and CTA tokens. > Use the values below verbatim — they are the system, not a starting point. ### Colors | Token | Value | |-------|-------| | ink (primary text) | `#1a1614` | | surface (page background) | `#fbf8f3` | | accent (single moment per page) | `#b8422e` | | muted (metadata, captions) | `#857d76` | | hairline (rules and dividers) | `#e8e2d8` | ### Typography Load via Google Fonts: ```html ``` | Role | Family | |------|--------| | display (headlines) | `Fraunces` | | body (prose) | `Source Serif 4` | | mono (metadata, numerals) | `JetBrains Mono` | ### Type Scale | Role | Size | Leading | Weight | Tracking | |------|------|---------|--------|----------| | Hero / H1 | `clamp(2.25rem, 4vw, 3.25rem)` | `1.06` | `600` | `-0.02em` | | Body | `1.0625rem` | `1.7` | `400` | — | | Eyebrow | `0.6875rem` | — | `500` | `0.18em` | > The hero pairs roman + italic — split the headline so the secondary clause renders italic in the accent color. ### Primary CTA | Property | Value | |----------|-------| | shape | `pill` | | background | `#b8422e` | | color | `#ffffff` | | padding | `12px 22px` | | fontWeight | `500` | | radius | `999px` | > One CTA per page. The pattern's discipline depends on this — never duplicate. --- ## Reference Implementation Copy-paste-ready HTML + CSS that renders this pattern with the exact token values declared above. Theme the colors against your system's hairline tone. ### HTML ```html

April 2026 · 6 min read

The title sits at the top of the column.

The body paragraphs sit in the same 640px column. There is no grid, no divider, no chrome of any kind. The vertical spacing between blocks carries the entire rhythm of the page.

A second paragraph follows naturally. Line height is generous so the prose has air. Left-aligned, ragged right.

A subheading.

Subheadings get the same column. They use a slightly larger leading above to mark the section break — there is no rule, no hairline.

Images may break out to a wider 880px band, but never to full bleed.

``` ### CSS ```css :root { --col: 640px; --break-out: 880px; --gap: 96px; --gap-tight: 48px; --page-pad: 120px; } .page { max-width: var(--col); margin: 0 auto; padding: var(--page-pad) 24px; } /* Every block stacks in the same column with generous space between. */ .block + .block { margin-top: var(--gap); } /* Headings get slightly more air above than paragraphs do. */ h1 { font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1.1; } h2 { font-size: 1.5rem; line-height: 1.3; margin-top: var(--gap-tight); } p { line-height: 1.7; max-width: 100%; } .meta { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.10em; opacity: 0.55; margin-bottom: 16px; } /* Optional break-out for images and pull-quotes — wider than the column, never full-bleed. */ .break-out { width: var(--break-out); max-width: calc(100vw - 48px); margin-left: 50%; transform: translateX(-50%); } .break-out img { width: 100%; display: block; } .break-out figcaption { font-size: 0.875rem; opacity: 0.6; margin-top: 12px; text-align: center; } /* Mobile: tighter padding, same single column. */ @media (max-width: 768px) { .page { padding: 64px 20px; } .block + .block { margin-top: 64px; } } ``` --- # PATTERN: Bento Quiet Source: https://www.freedesignmd.com/pattern/bento-quiet --- name: "Bento Quiet" description: "A 12-column bento grid where every module shares the same radius, the same hairline, and the same surface tone. Variation comes only from module size and content — never from styling. The discipline is the design." tags: [layout, bento, grid, minimal] type: pattern container: centered content_max_width: 1280px page_padding: 80px grid: columns: 12 max_columns: 12 line_color: transparent line_width: 0px line_style: solid edge_lines: false sections: padding_y: 80px divider_color: transparent divider_width: 0px divider_style: solid intersections: style: none color: transparent size: 0px design: colors: ink: "#1a1d24" surface: "#f4f3ef" accent: "#3552d4" muted: "#6b6f78" hairline: "#dcdad4" fonts: display: "Plus Jakarta Sans" body: "Plus Jakarta Sans" mono: "JetBrains Mono" radius: 16px google_fonts_url: "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" --- # Bento Quiet ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Bento Quiet** as its design system. Treat `PATTERN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Build recipes #### Page skeleton (the layout contract) - Container: `centered` - Content max-width: `1280px` (typography respects this even when the page is full-bleed). - Vertical grid: **12 column hairlines** (capped at 12 on wide viewports), drawn with `0px solid transparent`. - Section padding: `80px` top + bottom inside every section. - Section divider: `0px solid transparent` between sections. #### Primary CTA Exactly **one** primary CTA per page or section. The pattern's discipline depends on this. - Background: `#3552d4` · Color: `#ffffff` - Padding: `11px 22px` · Weight: `600` - Shape: `pill` (radius: `999px`) #### Headlines - Family: `Plus Jakarta Sans` · Size: `clamp(2rem, 3.5vw, 2.875rem)` · Leading: `1.08` · Weight: `600` - Tracking: `-0.025em` #### Body copy - Family: `Plus Jakarta Sans` · Size: `0.9375rem` · Leading: `1.6` · Color: `#6b6f78` - Max line length: 60–66 characters. Never let prose stretch the full content width. #### Eyebrows / metadata - Family: `JetBrains Mono` · Size: `0.6875rem` · Letter-spacing: `0.14em` - Uppercased. Color: `#3552d4`. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. - Break the layout contract: the column count, divider rhythm, and content max-width are part of the pattern. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] The page respects the pattern's grid (column count + content max-width). - [ ] Section dividers use the declared color, width, and style. - [ ] Exactly one primary CTA per section — never duplicate. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview Bento Quiet is the disciplined version of the bento grid. A 12-column underlying grid hosts modules that span 4, 6, 8, or 12 columns wide. Every module shares exactly the same treatment: the same radius, the same 1px hairline at low foreground alpha, the same surface tone, the same internal padding. Variation comes only from module size and content — never from styling. Most bento layouts fail because each module tries to differentiate itself with color, fill, or chrome. The result reads as a busy product page. Bento Quiet inverts that: by holding every module identical, the eye reads the composition as a single calm surface and the content of each module gets to do the talking. ## When to use it - Feature grids on marketing pages where each module describes one capability. - Dashboards where parallel widgets need to feel unified. - Portfolio pages where each module is a project tile. - About pages with mixed content types (stat, quote, image, link). ## When to avoid it - Single-narrative pages — bento implies parallel content. If the page tells one story top-to-bottom, use Centered Column or Stacked Hero Bands. - Documentation, articles, anything long-form. - Pages where modules genuinely need different visual weight (use a hero band followed by a quiet bento instead). ## Do - Hold every module to identical radius, border, surface, and padding. The uniformity IS the design. - Use only four module spans on desktop: 4, 6, 8, 12 columns. Anything else breaks the grid feel. - Keep the gutter at 16–24px. Tighter and the modules merge; wider and the composition fragments. - Vary content types freely: a stat module, a quote module, an image module — all sharing the same chrome. ## Don't - Don't tint individual modules. One surface tone across the whole grid. - Don't shadow some modules and not others. One shadow rule (or none) across the grid. - Don't introduce a fifth column span. 4/6/8/12 only. - Don't put bento inside bento. Nested grids destroy the calm. ## Notes - The hairline color should be derived from the system foreground at 6–10% alpha so the modules feel architectural rather than boxed. - Pair with restrained typography — the bento is the structure; the type inside each module should be a half-step quieter than on a single-column page so the composition reads as one surface. - On mobile, collapse to 1 column (12-span). Two-column mobile bento always reads as cramped. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Container | Property | Value | |----------|-------| | container | `centered` | | contentMaxWidth | `1280px` | | pagePadding | `80px` | ### Vertical Grid | Property | Value | |----------|-------| | columns | `12` | | maxColumns | `12` | | lineColor | `transparent` | | lineWidth | `0px` | | lineStyle | `solid` | | edgeLines | `false` | ### Section Dividers | Property | Value | |----------|-------| | paddingY | `80px` | | dividerColor | `transparent` | | dividerWidth | `0px` | | dividerStyle | `solid` | ### Intersections | Property | Value | |----------|-------| | style | `none` | | color | `transparent` | | size | `0px` | ## Design Identity > This pattern ships with its own typography, color, and CTA tokens. > Use the values below verbatim — they are the system, not a starting point. ### Colors | Token | Value | |-------|-------| | ink (primary text) | `#1a1d24` | | surface (page background) | `#f4f3ef` | | accent (single moment per page) | `#3552d4` | | muted (metadata, captions) | `#6b6f78` | | hairline (rules and dividers) | `#dcdad4` | ### Typography Load via Google Fonts: ```html ``` | Role | Family | |------|--------| | display (headlines) | `Plus Jakarta Sans` | | body (prose) | `Plus Jakarta Sans` | | mono (metadata, numerals) | `JetBrains Mono` | ### Type Scale | Role | Size | Leading | Weight | Tracking | |------|------|---------|--------|----------| | Hero / H1 | `clamp(2rem, 3.5vw, 2.875rem)` | `1.08` | `600` | `-0.025em` | | Body | `0.9375rem` | `1.6` | `400` | — | | Eyebrow | `0.6875rem` | — | `600` | `0.14em` | ### Primary CTA | Property | Value | |----------|-------| | shape | `pill` | | background | `#3552d4` | | color | `#ffffff` | | padding | `11px 22px` | | fontWeight | `600` | | radius | `999px` | > One CTA per page. The pattern's discipline depends on this — never duplicate. --- ## Reference Implementation Copy-paste-ready HTML + CSS that renders this pattern with the exact token values declared above. Theme the colors against your system's hairline tone. ### HTML ```html

01 — Stat

2.4M

Transactions cleared this quarter.

02 — Quote

"The clearest financial reporting tool we have used."

— CFO, mid-market client.

03 — Feature

Single audit trail.

04 — Feature

Real-time settlement.

05 — Feature

Composable export.

06 — Wide

One full-width module closes the composition.

``` ### CSS ```css :root { --max: 1280px; --gutter: 20px; --pad: 28px; --radius: 14px; --hairline: rgba(15, 15, 15, 0.08); --surface: transparent; } .bento { max-width: var(--max); margin: 0 auto; padding: 80px 24px; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); } /* Every cell shares the same chrome — the discipline IS the design. */ .cell { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: var(--pad); min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; } /* Only four spans exist on desktop. */ .cell--4 { grid-column: span 4; } .cell--6 { grid-column: span 6; } .cell--8 { grid-column: span 8; } .cell--12 { grid-column: span 12; } .eyebrow { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.55; } .num { font-size: 3rem; line-height: 1; font-weight: 600; } .cap { font-size: 0.875rem; opacity: 0.7; } .cell h3 { font-size: 1.25rem; line-height: 1.3; } .cell blockquote { font-size: 1rem; line-height: 1.5; } /* Mobile: collapse to a single column. Never two. */ @media (max-width: 768px) { .cell--4, .cell--6, .cell--8, .cell--12 { grid-column: span 12; } .cell { min-height: 0; padding: 24px; } } ``` --- # PATTERN: Sticky Index Rail Source: https://www.freedesignmd.com/pattern/sticky-index-rail --- name: "Sticky Index Rail" description: "A narrow sticky rail on the left holds a numbered section index that highlights the active section as the user scrolls. The right side of the page carries the actual content. Quiet, navigational, scholarly." tags: [layout, navigation, sticky, "long-read"] type: pattern container: centered content_max_width: 1080px page_padding: 80px grid: columns: 2 max_columns: 2 line_color: transparent line_width: 0px line_style: solid edge_lines: false sections: padding_y: 120px divider_color: "rgba(15, 15, 15, 0.06)" divider_width: 1px divider_style: solid intersections: style: none color: transparent size: 0px design: colors: ink: "#0e0e0e" surface: "#faf8f3" accent: "#0e0e0e" muted: "#8a8680" hairline: "#e0dcd2" fonts: display: Fraunces body: "Source Serif 4" mono: "JetBrains Mono" radius: 0px google_fonts_url: "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,700;1,9..144,400&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500&family=JetBrains+Mono:wght@400;500;600&display=swap" --- # Sticky Index Rail ## AI Build Instructions > **Read this section before writing any code.** The rules below > are non-negotiable. Every value used in the UI must come from this > file's frontmatter — never substitute, approximate, or invent new > colors, fonts, radii, or shadows. If a value is missing, ask the > user before adding one. ### 1 · Your role You are building UI for a project that has adopted **Sticky Index Rail** as its design system. Treat `PATTERN.md` as the single source of truth. Your job is to translate the user's product requirements into components and pages that look like they were designed by the same person who authored this file. ### 2 · Token compliance - Pull every color, font family, radius, shadow, and spacing value from the frontmatter at the top of this file. - Use semantic roles (e.g. `primary`, `accent`, `muted`) — never hard-code hex values that bypass the system. - When a token can be expressed as a CSS variable, declare it once in your global stylesheet and reference it everywhere downstream. - The Google Fonts `` is provided in the Typography section. Add it to `` before any component renders. ### 3 · Build recipes #### Page skeleton (the layout contract) - Container: `centered` - Content max-width: `1080px` (typography respects this even when the page is full-bleed). - Vertical grid: **2 column hairlines** (capped at 2 on wide viewports), drawn with `0px solid transparent`. - Section padding: `120px` top + bottom inside every section. - Section divider: `1px solid rgba(15, 15, 15, 0.06)` between sections. #### Primary CTA Exactly **one** primary CTA per page or section. The pattern's discipline depends on this. - Background: `#0e0e0e` · Color: `#faf8f3` - Padding: `11px 22px` · Weight: `600` - Shape: `sharp` (radius: `0px`) #### Headlines - Family: `Fraunces` · Size: `clamp(2.25rem, 4vw, 3rem)` · Leading: `1.05` · Weight: `700` - Tracking: `-0.02em` - The pattern's signature: split the headline so the **second clause is italic in the accent color**. Example: "A clearer way to *say less.*" #### Body copy - Family: `Source Serif 4` · Size: `1rem` · Leading: `1.65` · Color: `#8a8680` - Max line length: 60–66 characters. Never let prose stretch the full content width. #### Eyebrows / metadata - Family: `JetBrains Mono` · Size: `0.6875rem` · Letter-spacing: `0.18em` - Uppercased. Color: `#0e0e0e`. ### 4 · Hard constraints Never do any of the following without explicit instruction from the user: - Introduce a new color, font, radius, or shadow that isn't declared above. - Mix this system with another (e.g. don't paste in Material or Bootstrap defaults). - Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice. - Reach for emoji icons. Use a consistent icon library and size icons in line with body type. - Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle. - Break the layout contract: the column count, divider rhythm, and content max-width are part of the pattern. ### 5 · Before you finish — verify Run through this checklist for every screen you produce: - [ ] Every color used appears in the Colors table above. - [ ] Headlines use the display font; body copy uses the body font. - [ ] Buttons match one of the declared variants exactly (shape, padding, weight). - [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`. - [ ] Cards and dividers use the declared border + shadow tokens. - [ ] The page respects the pattern's grid (column count + content max-width). - [ ] Section dividers use the declared color, width, and style. - [ ] Exactly one primary CTA per section — never duplicate. - [ ] No values were invented; if you needed something missing, you stopped and asked. --- ## Overview The Sticky Index Rail mirrors the table of contents you find inside scholarly documents: a narrow rail on the left that lists every section by number and title, and that highlights the active section as the user scrolls past it. The right side of the page carries the actual content in a single comfortable reading column. The rail does three jobs at once. It tells the reader where they are in the document, it tells them how much remains, and it gives them one click to jump between sections without losing context. None of this requires JavaScript beyond a single `IntersectionObserver` to update the active item. ## When to use it - Long-form documentation, specs, RFCs, design system references. - Multi-part landing pages where the user benefits from seeing the whole argument structure at a glance. - Case studies and reports with 4–8 named sections. - Privacy policies, terms, and other dense reference content. ## When to avoid it - Pages with fewer than 3 sections — the rail looks empty. - Pages with more than ~10 sections — the rail becomes a wall of text. - Marketing pages that are meant to be read top-to-bottom in one pass. - Mobile widths below 1024px. Hide the rail and replace it with a section number eyebrow inside each section. ## Do - Number every section in mono caps (01, 02, 03). Numbers are what make the rail read as instrument, not navigation menu. - Hold the rail at 220–260px wide. Narrower and titles wrap awkwardly; wider and the content column suffers. - Use a single 2px ink bar to mark the active item. No background fill, no pill shape — just the bar. - Keep the rail `position: sticky` with `top: 96px` so it sits below any page chrome but stays visible as the user scrolls. ## Don't - Don't add icons next to the rail items. Numbers + titles only. - Don't use a colored fill to mark the active item. The 2px bar is the device. - Don't make the rail scroll-locked separately from the page. Sticky only. - Don't omit the section numbers — the numbers are the entire signature. ## Notes - The active-state mechanism is one `IntersectionObserver` watching every `

` element. When a section crosses 30% of the viewport from the top, mark its rail item active. - The rail color should be derived from the system foreground: inactive items at ~50% alpha, active item at full opacity. The bar inherits the same. - Pair with Centered Column or Marginalia Notes for the content side. --- ## Tokens > Generated from the same source the live preview renders from. > Treat the values below as the contract — never substitute approximations. ### Container | Property | Value | |----------|-------| | container | `centered` | | contentMaxWidth | `1080px` | | pagePadding | `80px` | ### Vertical Grid | Property | Value | |----------|-------| | columns | `2` | | maxColumns | `2` | | lineColor | `transparent` | | lineWidth | `0px` | | lineStyle | `solid` | | edgeLines | `false` | ### Section Dividers | Property | Value | |----------|-------| | paddingY | `120px` | | dividerColor | `rgba(15, 15, 15, 0.06)` | | dividerWidth | `1px` | | dividerStyle | `solid` | ### Intersections | Property | Value | |----------|-------| | style | `none` | | color | `transparent` | | size | `0px` | ## Design Identity > This pattern ships with its own typography, color, and CTA tokens. > Use the values below verbatim — they are the system, not a starting point. ### Colors | Token | Value | |-------|-------| | ink (primary text) | `#0e0e0e` | | surface (page background) | `#faf8f3` | | accent (single moment per page) | `#0e0e0e` | | muted (metadata, captions) | `#8a8680` | | hairline (rules and dividers) | `#e0dcd2` | ### Typography Load via Google Fonts: ```html ``` | Role | Family | |------|--------| | display (headlines) | `Fraunces` | | body (prose) | `Source Serif 4` | | mono (metadata, numerals) | `JetBrains Mono` | ### Type Scale | Role | Size | Leading | Weight | Tracking | |------|------|---------|--------|----------| | Hero / H1 | `clamp(2.25rem, 4vw, 3rem)` | `1.05` | `700` | `-0.02em` | | Body | `1rem` | `1.65` | `400` | — | | Eyebrow | `0.6875rem` | — | `600` | `0.18em` | > The hero pairs roman + italic — split the headline so the secondary clause renders italic in the accent color. ### Primary CTA | Property | Value | |----------|-------| | shape | `sharp` | | background | `#0e0e0e` | | color | `#faf8f3` | | padding | `11px 22px` | | fontWeight | `600` | | radius | `0px` | > One CTA per page. The pattern's discipline depends on this — never duplicate. --- ## Reference Implementation Copy-paste-ready HTML + CSS that renders this pattern with the exact token values declared above. Theme the colors against your system's hairline tone. ### HTML ```html

Overview

...

Architecture

...

Tokens

...

Examples

...

``` ### CSS ```css :root { --max: 1080px; --rail-w: 240px; --gap: 64px; --section-y: 120px; --divider: rgba(15, 15, 15, 0.06); --fg-mute: rgba(15, 15, 15, 0.50); --fg: rgba(15, 15, 15, 1); } .layout { max-width: var(--max); margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: var(--rail-w) 1fr; column-gap: var(--gap); } /* Sticky rail — sits below any header chrome at top: 96px. */ .rail { position: sticky; top: 96px; align-self: start; height: max-content; padding: 8px 0; } .rail ol { list-style: none; padding: 0; margin: 0; } .rail a { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 8px 0 8px 12px; text-decoration: none; color: var(--fg-mute); font-size: 0.875rem; border-left: 2px solid transparent; transition: color 120ms, border-color 120ms; } .rail .num { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 0.6875rem; letter-spacing: 0.10em; } .rail .ttl { letter-spacing: -0.005em; } .rail a:hover { color: var(--fg); } /* Active state — single 2px ink bar, full-opacity label. No fill. */ .rail a.is-active { color: var(--fg); border-left-color: var(--fg); } .content section { padding: var(--section-y) 0; border-bottom: 1px solid var(--divider); } .content h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; } .content p { line-height: 1.65; max-width: 65ch; } /* Mobile: hide the rail entirely; rely on inline section numbers. */ @media (max-width: 1024px) { .layout { grid-template-columns: 1fr; } .rail { display: none; } .content section { padding: 64px 0; } } ``` ---