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.
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: "Lumen Material"3description: "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."4tags: [saas, material, playful, minimal, modern]5colors:6 primary: "#1D1B20"7 secondary: "#79747E"8 tertiary: "#6750A4"9 neutral: "#F7F2FA"10 surface: "#FEF7FF"11typography:12 display: "Roboto Flex"13 body: "Roboto Flex"14 mono: "Roboto Mono"15 scale:16 hero: "3.5625rem / 1.12 / 400 / -0.015em"17 h1: "2rem / 1.25 / 400 / 0"18 h2: "1.375rem / 1.27 / 500 / 0"19 body: "1rem / 1.5 / 400 / 0.03125em"20radius:21 sm: 8px22 md: 12px23 lg: 16px24 pill: 9999px25shadows:26 card: "0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15)"27 button: "0 1px 3px rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15)"28borders:29 card: "1px solid #CAC4D0"30 divider: "#CAC4D0"31buttons:32 primary:33 background: #6750A434 color: #FFFFFF35 border: none36 shape: pill37 padding: 10px 24px38 font: body / 500 / 0.875rem / 0.00714em39 shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15)40 hover: lift41 secondary:42 background: #E8DEF843 color: #1D192B44 border: none45 shape: pill46 padding: 10px 24px47 font: body / 500 / 0.875rem / 0.00714em48 outline:49 background: transparent50 color: #6750A451 border: 1px solid #79747E52 shape: pill53 padding: 9px 24px54 font: body / 500 / 0.875rem / 0.00714em55 ghost:56 background: transparent57 color: #6750A458 border: none59 shape: pill60 padding: 10px 12px61 font: body / 500 / 0.875rem / 0.00714em62 hover: glow63charts:64 variant: "rounded-bars"65 gridlines: true66 bar_radius: 4px67 bar_gap: 12px68 highlight: single69 axis_color: "#79747E"70 palette: ["#6750A4", "#625B71", "#7D5260"]71fonts_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"72dependencies: ["lucide-react"]73---74 75# Lumen Material76 77## AI Build Instructions78 79> **Read this section before writing any code.** The rules below80> are non-negotiable. Every value used in the UI must come from this81> file's frontmatter — never substitute, approximate, or invent new82> colors, fonts, radii, or shadows. If a value is missing, ask the83> user before adding one.84 85### 1 · Your role86 87You are building UI for a project that has adopted **Lumen Material** as its88design system. Treat `DESIGN.md` as the single source of truth.89Your job is to translate the user's product requirements into90components and pages that look like they were designed by the same91person who authored this file.92 93### 2 · Token compliance94 95- Pull every color, font family, radius, shadow, and spacing value96 from the frontmatter at the top of this file.97- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never98 hard-code hex values that bypass the system.99- When a token can be expressed as a CSS variable, declare it once100 in your global stylesheet and reference it everywhere downstream.101- The Google Fonts `<link>` is provided in the Typography section.102 Add it to `<head>` before any component renders.103 104### 3 · Component recipes105 106Use these recipes verbatim when building the corresponding component.107 108#### Buttons109 110Four variants are defined. Pick one — never blend variants or invent a fifth.111 112- **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)`.113- **Secondary** — pill shape, bg `#E8DEF8`, text `#1D192B`, padding `10px 24px`, weight `500`.114- **Outline** — pill shape, text `#6750A4`, border `1px solid #79747E`, padding `9px 24px`, weight `500`.115- **Ghost** — pill shape, text `#6750A4`, padding `10px 12px`, weight `500`.116 117Reach for **primary** as the single dominant CTA per screen.118**Secondary** for the supporting action. **Outline** for tertiary119actions in toolbars. **Ghost** for inline links and table actions.120 121#### Cards122 123- Background: `#FEF7FF`124- Border: `1px solid #CAC4D0`125- Shadow: `0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15)`126- Radius: `radius.lg` (`16px`)127- Internal padding: `20px` for compact cards, `24–28px` for content cards.128 129#### Charts130 131- Bar/line variant: `rounded-bars`132- Bar radius: `4px`133- Highlight strategy: `single` — emphasize a single bar/point per chart.134- Use the declared palette in order: `#6750A4`, `#625B71`, `#7D5260`.135 136#### Typography pairings137 138- **Display (`Roboto Flex`)** — h1, h2, hero headlines, brand wordmarks.139- **Body (`Roboto Flex`)** — paragraphs, labels, button text, form inputs.140- **Mono (`Roboto 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## Overview166Lumen 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.167 168This 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.169 170## Color (tonal palette)171The system is built on the seven-role color spec. Surface tones replace the old opacity-overlay elevation model.172 173| Role | Token | Hex |174|------|-------|-----|175| Primary | `primary` | `#6750A4` |176| On-Primary | `on-primary` | `#FFFFFF` |177| Primary Container | `primary-container` | `#EADDFF` |178| On-Primary Container | `on-primary-container` | `#21005D` |179| Secondary | `secondary` | `#625B71` |180| Secondary Container | `secondary-container` | `#E8DEF8` |181| On-Secondary Container | `on-secondary-container` | `#1D192B` |182| Surface | `surface` | `#FEF7FF` |183| Surface Container Low | `surface-container-low` | `#F7F2FA` |184| On-Surface | `on-surface` | `#1D1B20` |185| Outline | `outline` | `#79747E` |186| Outline Variant | `outline-variant` | `#CAC4D0` |187 188## Typography189**Roboto Flex** at every level. The type scale follows the published display/headline/title/body roles.190 191| Role | Size | Weight | Leading | Tracking |192|------|------|--------|---------|----------|193| Display Large | 3.5625rem | 400 | 1.12 | -0.015em |194| Headline Large | 2rem | 400 | 1.25 | 0 |195| Title Large | 1.375rem | 500 | 1.27 | 0 |196| Body Large | 1rem | 400 | 1.50 | +0.03125em |197| Label Large | 0.875rem | 500 | 1.43 | +0.00714em |198 199Display and headline run at **weight 400** — the spec is intentionally light at the top of the scale.200 201## Shape202- **Small:** 8px (chips, dense buttons)203- **Medium:** 12px (cards, sheets)204- **Large:** 16px (dialogs, large cards)205- **Full:** 9999px (buttons, FAB)206 207Buttons are **pills**. Cards are **12px medium**. Sharp corners are out of system.208 209## Elevation (tonal)210The system uses tonal surface colors for elevation rather than opacity overlays. Six elevation levels exist; the resting card uses Level 1.211 212- **Level 0:** `surface` — flat213- **Level 1:** key shadow `0 1px 2px rgba(0,0,0,0.30)` + ambient `0 1px 3px 1px rgba(0,0,0,0.15)`214- **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 actions215 216## Buttons217Five canonical variants exist in the spec; this system ships four:218 219- **Filled** (primary) — purple background, white ink, level-1 shadow, full-rounded. The default high-emphasis CTA.220- **Filled tonal** (secondary) — `secondary-container` fill #E8DEF8 with on-secondary-container ink #1D192B. No shadow. Use when filled would compete with another primary.221- **Outlined** — 1px `outline` border #79747E, primary-color label. Medium emphasis.222- **Text** (ghost) — bare label in primary color with state-layer hover. Lowest emphasis, used inline.223 224All four are **full-rounded pills** (9999px). Touch height 40px. Label-large typography (14/500/+0.7px tracking).225 226## Charts & Data227Rounded 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.228 229## State Layers230Interactive 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.231 232## Do's and Don'ts233- ✅ Use tonal surface containers for elevation. Never use opacity overlays.234- ✅ Full-rounded pills for all buttons. 9999px is the spec.235- ✅ Keep Roboto Flex for both display and body — single-typeface clarity is intentional.236- ✅ Use `outline-variant` #CAC4D0 for hairline borders, never `outline` #79747E (that's for emphasis).237- ✅ Apply label-large typography on buttons (14/500/+0.7px). Don't shrink it.238- ❌ No sharp corners on buttons or cards. 8px is the floor.239- ❌ No bold display headlines — weight 400 is correct at hero size.240- ❌ Don't use the primary purple as a body color. It is for action and brand identity.241- ❌ Don't add drop-shadows beyond the published elevation levels.242 243---244 245## Tokens246 247> Generated from the same source the live preview renders from.248> Treat the values below as the contract — never substitute approximations.249 250### Colors251 252| Role | Value |253|-----------|-------|254| primary | `#1D1B20` |255| secondary | `#79747E` |256| tertiary | `#6750A4` |257| neutral | `#F7F2FA` |258| surface | `#FEF7FF` |259 260### Typography261 262- **Display:** Roboto Flex263- **Body:** Roboto Flex264- **Mono:** Roboto Mono265 266| Role | size / leading / weight / tracking |267|------|------------------------------------|268| Hero | 3.5625rem / 1.12 / 400 / -0.015em |269| H1 | 2rem / 1.25 / 400 / 0 |270| H2 | 1.375rem / 1.27 / 500 / 0 |271| Body | 1rem / 1.5 / 400 / 0.03125em |272 273### Radius274 275- sm: `8px`276- md: `12px`277- lg: `16px`278- pill: `9999px`279 280### Shadows281 282- **card:** `0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15)`283- **button:** `0 1px 3px rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15)`284 285### Borders286 287- **card:** `1px solid #CAC4D0`288- **divider:** `#CAC4D0`289 290### Buttons291 292Four variants, each fully tokenized. The preview renders from these exact values.293 294#### Primary295 296| Property | Value |297|----------|-------|298| shape | `pill` |299| background | `#6750A4` |300| color | `#FFFFFF` |301| border | `none` |302| padding | `10px 24px` |303| fontFamily | `body` |304| fontWeight | `500` |305| fontSize | `0.875rem` |306| tracking | `0.00714em` |307| shadow | `0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15)` |308| hoverHint | `lift` |309 310#### Secondary311 312| Property | Value |313|----------|-------|314| shape | `pill` |315| background | `#E8DEF8` |316| color | `#1D192B` |317| border | `none` |318| padding | `10px 24px` |319| fontFamily | `body` |320| fontWeight | `500` |321| fontSize | `0.875rem` |322| tracking | `0.00714em` |323 324#### Outline325 326| Property | Value |327|----------|-------|328| shape | `pill` |329| background | `transparent` |330| color | `#6750A4` |331| border | `1px solid #79747E` |332| padding | `9px 24px` |333| fontFamily | `body` |334| fontWeight | `500` |335| fontSize | `0.875rem` |336| tracking | `0.00714em` |337 338#### Ghost339 340| Property | Value |341|----------|-------|342| shape | `pill` |343| background | `transparent` |344| color | `#6750A4` |345| border | `none` |346| padding | `10px 12px` |347| fontFamily | `body` |348| fontWeight | `500` |349| fontSize | `0.875rem` |350| tracking | `0.00714em` |351| hoverHint | `glow` |352 353### Charts354 355| Property | Value |356|----------|-------|357| variant | `rounded-bars` |358| gridlines | `true` |359| barRadius | `4px` |360| barGap | `12px` |361| highlight | `single` |362| axisColor | `#79747E` |363| palette | `#6750A4`, `#625B71`, `#7D5260` |364 365---366 367## Pro tokens368 369> Production-fidelity tokens. States, density, motion, elevation,370> content rules and a measured WCAG contract — derived from the371> resting tokens unless explicitly authored.372 373### States374 375#### Button376 377- **hover** — shadow: `0 4px 12px -2px rgba(15,23,42,0.18)`, filter: `brightness(0.97)`378- **focus** — outline: `2px solid rgba(103, 80, 164, 0.5)`, outline-offset: `2px`379- **active** — shadow: `0 1px 2px rgba(15,23,42,0.1)`, transform: `scale(0.98)`380- **disabled** — opacity: `0.4`, filter: `saturate(0.5)`381- **loading** — opacity: `0.7`382- **selected** — bg: `#6750A4`, color: `#FEF7FF`383 384#### Input385 386- **hover** — border: `1px solid rgba(103, 80, 164, 0.5)`387- **focus** — border: `1.5px solid #6750A4`, shadow: `0 0 0 4px rgba(103, 80, 164, 0.15)`388- **disabled** — bg: `rgba(29, 27, 32, 0.04)`, opacity: `0.4`389- **error** — border: `1.5px solid #DC2626`, shadow: `0 0 0 4px rgba(220,38,38,0.15)`390 391#### Card392 393- **hover** — shadow: `0 12px 28px -12px rgba(15,23,42,0.18)`, transform: `translateY(-2px)`394- **selected** — bg: `rgba(103, 80, 164, 0.04)`, border: `1.5px solid #6750A4`395- **dragging** — shadow: `0 20px 48px -16px rgba(15,23,42,0.3)`, transform: `scale(1.02) rotate(-0.5deg)`, opacity: `0.9`396 397#### Tab398 399- **hover** — bg: `rgba(103, 80, 164, 0.06)`, color: `#6750A4`400- **focus** — outline: `2px solid rgba(103, 80, 164, 0.5)`, outline-offset: `2px`401- **selected** — color: `#6750A4`, border: `0 0 2px 0 solid #6750A4`402 403### Density404 405| Mode | padding × | row × | body | radius × | Use for |406|------|-----------|-------|------|----------|---------|407| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |408| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |409| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |410 411### Motion412 413**Signature — Quiet ease.** 240 ms ease-out for all standard transitions. Reliable, invisible — motion stays out of the way.414 415```css416transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1);417```418 419| Token | Value |420|-------|-------|421| duration.instant | `80ms` |422| duration.fast | `160ms` |423| duration.base | `240ms` |424| duration.slow | `380ms` |425| easing.standard | `cubic-bezier(0.4, 0, 0.2, 1)` |426| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |427| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |428| easing.spring | `cubic-bezier(0.34, 1.4, 0.64, 1)` |429 430### Elevation431 432Five-level scale, system-specific recipe.433 434| Level | Shadow | Recipe |435|-------|--------|--------|436| level0 | `none` | Flat — hairline border separates. |437| level1 | `0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04)` | List rows, resting cards. |438| level2 | `0 4px 12px -2px rgba(15,23,42,0.1), 0 2px 6px rgba(15,23,42,0.06)` | Hover cards, popover. |439| level3 | `0 12px 32px -8px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.08)` | Sheets, side panels. |440| level4 | `0 28px 64px -16px rgba(15,23,42,0.28), 0 8px 24px rgba(15,23,42,0.12)` | Modals — scrim required. |441 442### Content443 444- **measure:** `68ch` (max line length for body prose)445- **paragraph spacing:** `1.2em`446- **list indent:** `1.5em`447- **list gap:** `0.5em`448- **link:** color `#6750A4`, underline `hover`449- **blockquote:** border `3px solid rgba(103, 80, 164, 0.6)`, padding `0.5em 0 0.5em 1.25em`450- **code:** background `rgba(29, 27, 32, 0.06)`, color `#1D1B20`451 452### Accessibility (WCAG 2.1)453 454**Overall:** AA-Large455 456| Pair | Ratio | Required | Grade | Suggested fix |457|------|-------|----------|-------|---------------|458| Body text on surface | 16.23:1 | AA | AAA | — |459| Body text on canvas | 15.48:1 | AA | AAA | — |460| Muted text on surface | 4.33:1 | AA | AA-Large | `#746f79` → 4.65:1 (AA) |461| Accent on surface | 6.12:1 | AA-Large | AA | — |462| Accent on canvas | 5.84:1 | AA-Large | AA | — |463 # 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=Roboto+Flex:opsz,wght@8..144,400;8..144,500;8..144,600;8..144,700&family=Roboto+Mono:wght@400;500&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Roboto Flex"', 'serif'], sans: ['"Roboto Flex"', 'sans-serif'], mono: ['"Roboto Mono"', 'monospace'], }, colors: { primary: '#1D1B20', secondary: '#79747E', accent: '#6750A4', neutral: '#F7F2FA', surface: '#FEF7FF', }, borderRadius: { sm: '8px', md: '12px', lg: '16px', }, }, },};