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.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
Prose-first token file — decisions live next to their reasoning.
Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.
The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.
Tokens describe the resting state. A real product needs every interaction state. Hover, focus, active, disabled, loading — all derived from the system's resting tokens.
1---2name: "Mistveil Gradient"3description: "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."4tags: [gradient, minimal, modern, premium, saas]5colors:6 primary: "#181d24"7 secondary: "#6a7283"8 tertiary: "#181d24"9 neutral: "#e2e7ef"10 surface: "#eef2f8"11typography:12 display: Inter13 body: Inter14 mono: "IBM Plex Mono"15 scale:16 hero: "5rem / 1.04 / 600 / -0.035em"17 h1: "3rem / 1.12 / 600 / -0.025em"18 h2: "1.625rem / 1.25 / 600 / -0.012em"19 body: "1.0625rem / 1.62 / 400 / -0.005em"20radius:21 sm: 6px22 md: 10px23 lg: 16px24 pill: 9999px25shadows:26 card: "rgba(24,29,36,0.04) 0 1px 2px, rgba(24,29,36,0.04) 0 8px 28px -10px"27 button: none28borders:29 card: "1px solid rgba(24,29,36,0.08)"30 divider: rgba(24,29,36,0.10)31buttons:32 primary:33 background: #181d2434 color: #eef2f835 border: none36 shape: rounded37 padding: 10px 20px38 font: 600 / 0.875rem39 secondary:40 background: rgba(255,255,255,0.70)41 color: #181d2442 border: 1px solid rgba(24,29,36,0.10)43 shape: rounded44 padding: 10px 20px45 font: 500 / 0.875rem46 outline:47 background: transparent48 color: #181d2449 border: 1px solid rgba(24,29,36,0.16)50 shape: rounded51 padding: 10px 20px52 font: 500 / 0.875rem53 ghost:54 background: transparent55 color: #6a728356 border: none57 shape: rounded58 padding: 10px 14px59 font: 500 / 0.875rem60charts:61 variant: "thin-bars"62 stroke_width: 1.563 fill_opacity: 0.0664 gridlines: false65 bar_gap: 5px66 highlight: single67 dot_marker: true68fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap"69dependencies: ["lucide-react"]70---71 72# Mistveil Gradient73 74## AI Build Instructions75 76> **Read this section before writing any code.** The rules below77> are non-negotiable. Every value used in the UI must come from this78> file's frontmatter — never substitute, approximate, or invent new79> colors, fonts, radii, or shadows. If a value is missing, ask the80> user before adding one.81 82### 1 · Your role83 84You are building UI for a project that has adopted **Mistveil Gradient** as its85design system. Treat `DESIGN.md` as the single source of truth.86Your job is to translate the user's product requirements into87components and pages that look like they were designed by the same88person who authored this file.89 90### 2 · Token compliance91 92- Pull every color, font family, radius, shadow, and spacing value93 from the frontmatter at the top of this file.94- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never95 hard-code hex values that bypass the system.96- When a token can be expressed as a CSS variable, declare it once97 in your global stylesheet and reference it everywhere downstream.98- The Google Fonts `<link>` is provided in the Typography section.99 Add it to `<head>` before any component renders.100 101### 3 · Component recipes102 103Use these recipes verbatim when building the corresponding component.104 105#### Buttons106 107Four variants are defined. Pick one — never blend variants or invent a fifth.108 109- **Primary** — rounded shape, bg `#181d24`, text `#eef2f8`, padding `10px 20px`, weight `600`.110- **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`.111- **Outline** — rounded shape, text `#181d24`, border `1px solid rgba(24,29,36,0.16)`, padding `10px 20px`, weight `500`.112- **Ghost** — rounded shape, text `#6a7283`, padding `10px 14px`, weight `500`.113 114Reach for **primary** as the single dominant CTA per screen.115**Secondary** for the supporting action. **Outline** for tertiary116actions in toolbars. **Ghost** for inline links and table actions.117 118#### Cards119 120- Background: `#eef2f8`121- Border: `1px solid rgba(24,29,36,0.08)`122- Shadow: `rgba(24,29,36,0.04) 0 1px 2px, rgba(24,29,36,0.04) 0 8px 28px -10px`123- Radius: `radius.lg` (`16px`)124- Internal padding: `20px` for compact cards, `24–28px` for content cards.125 126#### Tabs127 128Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.129 130#### Charts131 132- Bar/line variant: `thin-bars`133- No gridlines — let the bars/lines carry the data.134- Highlight strategy: `single` — emphasize a single bar/point per chart.135 136#### Typography pairings137 138- **Display (`Inter`)** — h1, h2, hero headlines, brand wordmarks.139- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.140- **Mono (`IBM Plex Mono`)** — code, eyebrows, metadata, numerals in tables.141 142### 4 · Hard constraints143 144Never do any of the following without explicit instruction from the user:145 146- Introduce a new color, font, radius, or shadow that isn't declared above.147- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).148- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.149- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.150- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.151 152### 5 · Before you finish — verify153 154Run through this checklist for every screen you produce:155 156- [ ] Every color used appears in the Colors table above.157- [ ] Headlines use the display font; body copy uses the body font.158- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).159- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.160- [ ] Cards and dividers use the declared border + shadow tokens.161- [ ] No values were invented; if you needed something missing, you stopped and asked.162 163---164 165## 1. Atmosphere166 167Mistveil 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.168 169The 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.170 171**Signature moves**172- Single-hue tonal gradient: pale mist `#eef2f8` → bone-white `#fafbfd`, 5% lightness shift173- Glass cards (`rgba(255,255,255,0.70)`) — pick up the steel-blue field through the white tint174- Inter 600 at 80px display — calm authority175- IBM Plex Mono with tabular-nums on every number, timestamp, percentage176- Graphite `#181d24` doubles as text + primary CTA + active step — no separate accent hue177- Soft 16px card radius, 10px button radius — calm and modern, never pill, never sharp178 179## 2. Palette180 181### Surfaces182- **Mist Top** `#eef2f8` — page top183- **Bone Bottom** `#fafbfd` — page bottom (the gradient endpoint)184- **Lift** `#e2e7ef` — secondary tonal surface185- **Glass** `rgba(255,255,255,0.70)` — card tint186 187### Ink188- **Graphite** `#181d24` — text, headings, primary CTA fill, active step189- **Ink 50** `#6a7283` — secondary text, mono labels190 191### There is no accent hue.192Graphite carries every "look here" moment — the discipline is using one value for both prose and the CTA.193 194## 3. Typography195 196| Role | Font | Size | Weight | Leading | Tracking |197|------|------|------|--------|---------|----------|198| Hero | Inter | 80px | 600 | 1.04 | -0.035em |199| H1 | Inter | 48px | 600 | 1.12 | -0.025em |200| H2 | Inter | 26px | 600 | 1.25 | -0.012em |201| Body | Inter | 17px | 400 | 1.62 | -0.005em |202| UI / Button | Inter | 14px | 600 | 1.4 | 0 |203| Number / Metric | IBM Plex Mono | 14px | 500 | 1.0 | 0 tabular-nums |204| Big KPI | IBM Plex Mono | 28px | 600 | 1.0 | 0 tabular-nums |205| Label | IBM Plex Mono | 11px | 500 | 1.0 | 0.06em uppercase |206 207Inter for prose; IBM Plex Mono for every numeric or ID string. The tabular-nums variant lets KPI rows column-align cleanly.208 209## 4. Buttons210 211### Primary (Graphite Rounded)212```css213background: #181d24;214color: #eef2f8;215padding: 10px 20px;216border-radius: 10px;217font-weight: 600;218```219 220The graphite-on-mist reads as a precision instrument tile — the only solid surface besides the cards.221 222### Secondary (Glass)223```css224background: rgba(255,255,255,0.70);225border: 1px solid rgba(24,29,36,0.10);226```227 228The white tint picks up the mist field — secondary buttons read as soft frosted tiles.229 230### Outline & Ghost231- Outline: transparent, 1px hairline at 16% graphite232- Ghost: no border, ink-50, hover lifts to graphite233 234## 5. Cards235 236```css237background: rgba(255,255,255,0.70);238border: 1px solid rgba(24,29,36,0.08);239border-radius: 16px;240box-shadow: rgba(24,29,36,0.04) 0 1px 2px, rgba(24,29,36,0.04) 0 8px 28px -10px;241```242 243Glass 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.244 245## 6. Charts246 247Thin 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.248 249## 7. Tabs250 251Underline 1.5px in graphite for the active state. Inactive tabs are ink-50 in Inter 600. Hover lifts to graphite.252 253## 8. Spacing254 255- Base 4px256- Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128`257- Section padding: 96px desktop, 48px mobile258 259## 9. Do's & don'ts260 261✅ **Do**262- Use the single-hue gradient: pale mist → bone-white, 5% lightness shift, never sunset263- Use glass cards that pick up the gradient through the white tint264- Use graphite as both primary text and primary CTA fill — one value, two roles265- Use IBM Plex Mono with tabular-nums on every number, timestamp, percentage266 267❌ **Don't**268- Use a two-hue gradient (peach→pink, purple→blue) — single-hue tonal only269- Add a third accent color — graphite carries every "look here" moment270- Use solid white cards — the white tint that bleeds the gradient is the system's signature271- Use a serif for display — Inter calm-authority is the system voice272 273---274 275## Tokens276 277> Generated from the same source the live preview renders from.278> Treat the values below as the contract — never substitute approximations.279 280### Colors281 282| Role | Value |283|-----------|-------|284| primary | `#181d24` |285| secondary | `#6a7283` |286| tertiary | `#181d24` |287| neutral | `#e2e7ef` |288| surface | `#eef2f8` |289 290### Typography291 292- **Display:** Inter293- **Body:** Inter294- **Mono:** IBM Plex Mono295 296| Role | size / leading / weight / tracking |297|------|------------------------------------|298| Hero | 5rem / 1.04 / 600 / -0.035em |299| H1 | 3rem / 1.12 / 600 / -0.025em |300| H2 | 1.625rem / 1.25 / 600 / -0.012em |301| Body | 1.0625rem / 1.62 / 400 / -0.005em |302 303### Radius304 305- sm: `6px`306- md: `10px`307- lg: `16px`308- pill: `9999px`309 310### Shadows311 312- **card:** `rgba(24,29,36,0.04) 0 1px 2px, rgba(24,29,36,0.04) 0 8px 28px -10px`313- **button:** `none`314 315### Borders316 317- **card:** `1px solid rgba(24,29,36,0.08)`318- **divider:** `rgba(24,29,36,0.10)`319 320### Buttons321 322Four variants, each fully tokenized. The preview renders from these exact values.323 324#### Primary325 326| Property | Value |327|----------|-------|328| shape | `rounded` |329| background | `#181d24` |330| color | `#eef2f8` |331| border | `none` |332| padding | `10px 20px` |333| fontWeight | `600` |334| fontSize | `0.875rem` |335 336#### Secondary337 338| Property | Value |339|----------|-------|340| shape | `rounded` |341| background | `rgba(255,255,255,0.70)` |342| color | `#181d24` |343| border | `1px solid rgba(24,29,36,0.10)` |344| padding | `10px 20px` |345| fontWeight | `500` |346| fontSize | `0.875rem` |347 348#### Outline349 350| Property | Value |351|----------|-------|352| shape | `rounded` |353| background | `transparent` |354| color | `#181d24` |355| border | `1px solid rgba(24,29,36,0.16)` |356| padding | `10px 20px` |357| fontWeight | `500` |358| fontSize | `0.875rem` |359 360#### Ghost361 362| Property | Value |363|----------|-------|364| shape | `rounded` |365| background | `transparent` |366| color | `#6a7283` |367| border | `none` |368| padding | `10px 14px` |369| fontWeight | `500` |370| fontSize | `0.875rem` |371 372### Charts373 374| Property | Value |375|----------|-------|376| variant | `thin-bars` |377| strokeWidth | `1.5` |378| fillOpacity | `0.06` |379| gridlines | `false` |380| barGap | `5px` |381| highlight | `single` |382| dotMarker | `true` |383 384---385 386## Pro tokens387 388> Production-fidelity tokens. States, density, motion, elevation,389> content rules and a measured WCAG contract — derived from the390> resting tokens unless explicitly authored.391 392### States393 394#### Button395 396- **hover** — shadow: `0 4px 12px -2px rgba(15,23,42,0.18)`, filter: `brightness(0.97)`397- **focus** — outline: `2px solid rgba(24, 29, 36, 0.5)`, outline-offset: `2px`398- **active** — shadow: `0 1px 2px rgba(15,23,42,0.1)`, transform: `scale(0.98)`399- **disabled** — opacity: `0.4`, filter: `saturate(0.5)`400- **loading** — opacity: `0.7`401- **selected** — bg: `#181d24`, color: `#eef2f8`402 403#### Input404 405- **hover** — border: `1px solid rgba(24, 29, 36, 0.5)`406- **focus** — border: `1.5px solid #181d24`, shadow: `0 0 0 4px rgba(24, 29, 36, 0.15)`407- **disabled** — bg: `rgba(24, 29, 36, 0.04)`, opacity: `0.4`408- **error** — border: `1.5px solid #DC2626`, shadow: `0 0 0 4px rgba(220,38,38,0.15)`409 410#### Card411 412- **hover** — shadow: `0 12px 28px -12px rgba(15,23,42,0.18)`, transform: `translateY(-2px)`413- **selected** — bg: `rgba(24, 29, 36, 0.04)`, border: `1.5px solid #181d24`414- **dragging** — shadow: `0 20px 48px -16px rgba(15,23,42,0.3)`, transform: `scale(1.02) rotate(-0.5deg)`, opacity: `0.9`415 416#### Tab417 418- **hover** — bg: `rgba(24, 29, 36, 0.06)`, color: `#181d24`419- **focus** — outline: `2px solid rgba(24, 29, 36, 0.5)`, outline-offset: `2px`420- **selected** — color: `#181d24`, border: `0 0 2px 0 solid #181d24`421 422### Density423 424| Mode | padding × | row × | body | radius × | Use for |425|------|-----------|-------|------|----------|---------|426| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |427| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |428| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |429 430### Motion431 432**Signature — Quiet ease.** 240 ms ease-out for all standard transitions. Reliable, invisible — motion stays out of the way.433 434```css435transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1);436```437 438| Token | Value |439|-------|-------|440| duration.instant | `80ms` |441| duration.fast | `160ms` |442| duration.base | `240ms` |443| duration.slow | `380ms` |444| easing.standard | `cubic-bezier(0.4, 0, 0.2, 1)` |445| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |446| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |447| easing.spring | `cubic-bezier(0.34, 1.4, 0.64, 1)` |448 449### Elevation450 451Five-level scale, system-specific recipe.452 453| Level | Shadow | Recipe |454|-------|--------|--------|455| level0 | `none` | Flat — hairline border separates. |456| level1 | `0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04)` | List rows, resting cards. |457| level2 | `0 4px 12px -2px rgba(15,23,42,0.1), 0 2px 6px rgba(15,23,42,0.06)` | Hover cards, popover. |458| level3 | `0 12px 32px -8px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.08)` | Sheets, side panels. |459| level4 | `0 28px 64px -16px rgba(15,23,42,0.28), 0 8px 24px rgba(15,23,42,0.12)` | Modals — scrim required. |460 461### Content462 463- **measure:** `68ch` (max line length for body prose)464- **paragraph spacing:** `1.2em`465- **list indent:** `1.5em`466- **list gap:** `0.5em`467- **link:** color `#181d24`, underline `hover`468- **blockquote:** border `3px solid rgba(24, 29, 36, 0.6)`, padding `0.5em 0 0.5em 1.25em`469- **code:** background `rgba(24, 29, 36, 0.06)`, color `#181d24`470 471### Accessibility (WCAG 2.1)472 473**Overall:** AA-Large474 475| Pair | Ratio | Required | Grade | Suggested fix |476|------|-------|----------|-------|---------------|477| Body text on surface | 15.07:1 | AA | AAA | — |478| Body text on canvas | 13.64:1 | AA | AAA | — |479| Muted text on surface | 4.3:1 | AA | AA-Large | `#656d7d` → 4.63:1 (AA) |480| Accent on surface | 15.07:1 | AA-Large | AAA | — |481| Accent on canvas | 13.64:1 | AA-Large | AAA | — |482 # CLAUDE.md Reference @DESIGN.md for all styling decisions. Apply tokens strictly — do not introduce colors, fonts, or radii outside the system. When in doubt, prefer the values declared in DESIGN.md frontmatter.<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Inter"', 'serif'], sans: ['"Inter"', 'sans-serif'], mono: ['"IBM Plex Mono"', 'monospace'], }, colors: { primary: '#181d24', secondary: '#6a7283', accent: '#181d24', neutral: '#e2e7ef', surface: '#eef2f8', }, borderRadius: { sm: '6px', md: '10px', lg: '16px', }, }, },};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.
Near-white canvas with warm stone undertones, ethereal light-weight display type, and whisper-soft multi-layer shadows.