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', }, }, },};Dark-mode-native developer platform. Emerald (#3ecf8e) as identity marker, 1.00 line-height hero, depth from layered borders not shadows, mono uppercase labels.
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.
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é.
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.