tonal-surface with a slate-blue seed — cool tonal surfaces, full-rounded tonal buttons, Roboto Flex throughout. The trustworthy B2B tonal-surface dialect.
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.
1---2name: "Slate Material"3description: "tonal-surface with a slate-blue seed — cool tonal surfaces, full-rounded tonal buttons, Roboto Flex throughout. The trustworthy B2B tonal-surface dialect."4tags: [saas, material, minimal, modern, trustworthy, light, b2b]5colors:6 primary: "#1A1C1E"7 secondary: "#73777F"8 tertiary: "#385F9F"9 neutral: "#F4F8FB"10 surface: "#FAFCFE"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.015em"20radius:21 sm: 8px22 md: 12px23 lg: 16px24 pill: 9999px25shadows:26 card: "0 1px 2px rgba(26, 28, 30, 0.04), 0 1px 3px rgba(26, 28, 30, 0.06)"27 button: none28borders:29 card: "1px solid rgba(115, 119, 127, 0.20)"30 divider: "rgba(115, 119, 127, 0.16)"31buttons:32 primary:33 background: #385F9F34 color: #FFFFFF35 border: 1px solid #385F9F36 shape: pill37 padding: 10px 24px38 font: 500 / 0.875rem / 0.0125em39 secondary:40 background: #D6E3F741 color: #0B1B3342 border: 1px solid #D6E3F743 shape: pill44 padding: 10px 24px45 font: 500 / 0.875rem / 0.0125em46 outline:47 background: transparent48 color: #385F9F49 border: 1px solid #73777F50 shape: pill51 padding: 9px 22px52 font: 500 / 0.875rem / 0.0125em53 ghost:54 background: transparent55 color: #385F9F56 border: none57 shape: pill58 padding: 10px 12px59 font: 500 / 0.875rem / 0.0125em60 hover: underline61charts:62 variant: line63 stroke_width: 264 gridlines: false65 highlight: last66 dot_marker: true67 axis_color: "#73777F"68 palette: ["#385F9F", "#1A1C1E", "#73777F"]69fonts_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"70dependencies: ["lucide-react"]71---72 73# Slate Material74 75## AI Build Instructions76 77> **Read this section before writing any code.** The rules below78> are non-negotiable. Every value used in the UI must come from this79> file's frontmatter — never substitute, approximate, or invent new80> colors, fonts, radii, or shadows. If a value is missing, ask the81> user before adding one.82 83### 1 · Your role84 85You are building UI for a project that has adopted **Slate Material** as its86design system. Treat `DESIGN.md` as the single source of truth.87Your job is to translate the user's product requirements into88components and pages that look like they were designed by the same89person who authored this file.90 91### 2 · Token compliance92 93- Pull every color, font family, radius, shadow, and spacing value94 from the frontmatter at the top of this file.95- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never96 hard-code hex values that bypass the system.97- When a token can be expressed as a CSS variable, declare it once98 in your global stylesheet and reference it everywhere downstream.99- The Google Fonts `<link>` is provided in the Typography section.100 Add it to `<head>` before any component renders.101 102### 3 · Component recipes103 104Use these recipes verbatim when building the corresponding component.105 106#### Buttons107 108Four variants are defined. Pick one — never blend variants or invent a fifth.109 110- **Primary** — pill shape, bg `#385F9F`, text `#FFFFFF`, border `1px solid #385F9F`, padding `10px 24px`, weight `500`.111- **Secondary** — pill shape, bg `#D6E3F7`, text `#0B1B33`, border `1px solid #D6E3F7`, padding `10px 24px`, weight `500`.112- **Outline** — pill shape, text `#385F9F`, border `1px solid #73777F`, padding `9px 22px`, weight `500`.113- **Ghost** — pill shape, text `#385F9F`, padding `10px 12px`, weight `500`.114 115Reach for **primary** as the single dominant CTA per screen.116**Secondary** for the supporting action. **Outline** for tertiary117actions in toolbars. **Ghost** for inline links and table actions.118 119#### Cards120 121- Background: `#FAFCFE`122- Border: `1px solid rgba(115, 119, 127, 0.20)`123- Shadow: `0 1px 2px rgba(26, 28, 30, 0.04), 0 1px 3px rgba(26, 28, 30, 0.06)`124- Radius: `radius.lg` (`16px`)125- Internal padding: `20px` for compact cards, `24–28px` for content cards.126 127#### Charts128 129- Bar/line variant: `line`130- No gridlines — let the bars/lines carry the data.131- Highlight strategy: `last` — emphasize a single bar/point per chart.132- Use the declared palette in order: `#385F9F`, `#1A1C1E`, `#73777F`.133 134#### Typography pairings135 136- **Display (`Roboto Flex`)** — h1, h2, hero headlines, brand wordmarks.137- **Body (`Roboto Flex`)** — paragraphs, labels, button text, form inputs.138- **Mono (`Roboto Mono`)** — code, eyebrows, metadata, numerals in tables.139 140### 4 · Hard constraints141 142Never do any of the following without explicit instruction from the user:143 144- Introduce a new color, font, radius, or shadow that isn't declared above.145- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).146- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.147- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.148- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.149 150### 5 · Before you finish — verify151 152Run through this checklist for every screen you produce:153 154- [ ] Every color used appears in the Colors table above.155- [ ] Headlines use the display font; body copy uses the body font.156- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).157- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.158- [ ] Cards and dividers use the declared border + shadow tokens.159- [ ] No values were invented; if you needed something missing, you stopped and asked.160 161---162 163## Overview164Slate 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.165 166For dashboards, infrastructure tooling, fintech, and product UI that needs the tonal-surface system's accessibility scaffolding with a serious tone.167 168## Color (tonal roles)169- **on-surface #1A1C1E** — primary ink.170- **outline #73777F** — cool mid-grey.171- **primary #385F9F** — slate-blue seed. CTAs, focus.172- **secondary-container #D6E3F7** — tonal button fill.173- **surface-container-low #F4F8FB** — cool page canvas.174- **surface #FAFCFE** — base card surface.175 176## Typography177**Roboto Flex** everywhere.178 179| Role | Size | Weight | tonal-surface token |180|------|------|--------|----------|181| Hero | 3.5625rem | 400 | display-large |182| H1 | 2rem | 400 | headline-large |183| H2 | 1.375rem | 500 | title-large |184| Body | 1rem | 400 | body-large |185 186## Buttons187- **Filled (primary)** — slate-blue fill.188- **Tonal (secondary)** — sky container fill.189- **Outlined** — outline-variant border.190- **Text (ghost)** — bare slate label.191 192Full-rounded pills, no shadows.193 194## Cards195Surface fill, outline-variant border at 20%, tonal elevation level 1. Radius **16px**.196 197## Do's and Don'ts198- ✅ Full-rounded pills, tonal secondaries.199- ✅ Cool canvas (#F4F8FB) — pairs with the slate seed.200- ✅ Roboto Flex 400 on display, never 700.201- ❌ No second accent. Slate-blue is alone.202- ❌ No serifs.203- ❌ No tonal elevation level 3+ on standard cards.204 205---206 207## Tokens208 209> Generated from the same source the live preview renders from.210> Treat the values below as the contract — never substitute approximations.211 212### Colors213 214| Role | Value |215|-----------|-------|216| primary | `#1A1C1E` |217| secondary | `#73777F` |218| tertiary | `#385F9F` |219| neutral | `#F4F8FB` |220| surface | `#FAFCFE` |221 222### Typography223 224- **Display:** Roboto Flex225- **Body:** Roboto Flex226- **Mono:** Roboto Mono227 228| Role | size / leading / weight / tracking |229|------|------------------------------------|230| Hero | 3.5625rem / 1.12 / 400 / -0.015em |231| H1 | 2rem / 1.25 / 400 / 0 |232| H2 | 1.375rem / 1.27 / 500 / 0 |233| Body | 1rem / 1.5 / 400 / 0.015em |234 235### Radius236 237- sm: `8px`238- md: `12px`239- lg: `16px`240- pill: `9999px`241 242### Shadows243 244- **card:** `0 1px 2px rgba(26, 28, 30, 0.04), 0 1px 3px rgba(26, 28, 30, 0.06)`245- **button:** `none`246 247### Borders248 249- **card:** `1px solid rgba(115, 119, 127, 0.20)`250- **divider:** `rgba(115, 119, 127, 0.16)`251 252### Buttons253 254Four variants, each fully tokenized. The preview renders from these exact values.255 256#### Primary257 258| Property | Value |259|----------|-------|260| shape | `pill` |261| background | `#385F9F` |262| color | `#FFFFFF` |263| border | `1px solid #385F9F` |264| padding | `10px 24px` |265| fontWeight | `500` |266| fontSize | `0.875rem` |267| tracking | `0.0125em` |268 269#### Secondary270 271| Property | Value |272|----------|-------|273| shape | `pill` |274| background | `#D6E3F7` |275| color | `#0B1B33` |276| border | `1px solid #D6E3F7` |277| padding | `10px 24px` |278| fontWeight | `500` |279| fontSize | `0.875rem` |280| tracking | `0.0125em` |281 282#### Outline283 284| Property | Value |285|----------|-------|286| shape | `pill` |287| background | `transparent` |288| color | `#385F9F` |289| border | `1px solid #73777F` |290| padding | `9px 22px` |291| fontWeight | `500` |292| fontSize | `0.875rem` |293| tracking | `0.0125em` |294 295#### Ghost296 297| Property | Value |298|----------|-------|299| shape | `pill` |300| background | `transparent` |301| color | `#385F9F` |302| border | `none` |303| padding | `10px 12px` |304| fontWeight | `500` |305| fontSize | `0.875rem` |306| tracking | `0.0125em` |307| hoverHint | `underline` |308 309### Charts310 311| Property | Value |312|----------|-------|313| variant | `line` |314| strokeWidth | `2` |315| gridlines | `false` |316| highlight | `last` |317| dotMarker | `true` |318| axisColor | `#73777F` |319| palette | `#385F9F`, `#1A1C1E`, `#73777F` |320 # 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: '#1A1C1E', secondary: '#73777F', accent: '#385F9F', neutral: '#F4F8FB', surface: '#FAFCFE', }, borderRadius: { sm: '8px', md: '12px', lg: '16px', }, }, },};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.
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.
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.
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.