design.md
Back to directory
saas · material · minimal · modern · trustworthy · light · b2b

Slate Material.

tonal-surface with a slate-blue seed — cool tonal surfaces, full-rounded tonal buttons, Roboto Flex throughout. The trustworthy B2B tonal-surface dialect.

01 · Preview

The kitchen sink.

Slate.app
ProductPricingDocsAbout
Sign inGet started
saas · material · minimal

Build with Slate Material.

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.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational
01 · Color

Palette

primary
#1A1C1E
secondary
#73777F
tertiary
#385F9F
neutral
#F4F8FB
surface
#FAFCFE
02 · Typography

Type scale

display
The quick brown fox
h1
A major section heading
h2
A subsection title
body
Body copy in the system's body font.
03 · Buttons

Buttons

PrimarySecondaryOutlineGhostText link →
Disabled
04 · Inputs

Form controls

Email
iris@studio.com
Password
••••••••••••
Bio
Designing for long-form publications. Based in Kyoto.
05 · Choices

Select & toggle

Plan
Starter
Free forever
Pro
$18 / month
Team
$48 / month
Toggles
Public profile
Require two-factor
Auto-accept invites
06 · Tags & badges

Labeling

NeutralAccentSolidWith dot
NEWBETAv2.0LIVE
07 · Cards

Cards

Feature
Editorial rigor

Prose-first token file — decisions live next to their reasoning.

Learn more →
Metric
24,810
▲ +12.4% vs last week
08 · Navigation

Tabs & breadcrumb

Overview
Analytics
Members
Workspace/Projects/Heritage System
09 · Spacing

Spacing scale

Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.

1px
2px
5px
8px · base
10px
12px
14px
16px
18px
20px
21px
10 · Radius

Border radius scale

The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.

sm
8px
md
12px
lg
16px
pill
9999px
11 · Elevation

Depth & elevation

00 · Flat
Elevation 00
01 · Low
Elevation 01
02 · Medium
Elevation 02
03 · High
Elevation 03
12 · Data

Charts

Weekly revenue
$48,210
M
T
W
T
F
S
S
Active sessions
2,184
02 · Pro tokens

The states behind the resting style.

ArchetypeMaterial

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.

Button

resting → state delta
resting
hover
focus
active
disabled
loading
selected

Input

resting → state delta
resting
hover
focus
disabled
error

Card

resting → state delta
Account
sam@studio.com
resting
Account
sam@studio.com
hover
Account
sam@studio.com
selected
Account
sam@studio.com
dragging

Tab

resting → state delta
Overview
resting
Overview
hover
Overview
focus
Overview
selected
03 · The file

DESIGN.md

markdown
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: 8px
22  md: 12px
23  lg: 16px
24  pill: 9999px
25shadows:
26  card:   "0 1px 2px rgba(26, 28, 30, 0.04), 0 1px 3px rgba(26, 28, 30, 0.06)"
27  button: none
28borders:
29  card:    "1px solid rgba(115, 119, 127, 0.20)"
30  divider: "rgba(115, 119, 127, 0.16)"
31buttons:
32  primary:
33    background: #385F9F
34    color: #FFFFFF
35    border: 1px solid #385F9F
36    shape: pill
37    padding: 10px 24px
38    font: 500 / 0.875rem / 0.0125em
39  secondary:
40    background: #D6E3F7
41    color: #0B1B33
42    border: 1px solid #D6E3F7
43    shape: pill
44    padding: 10px 24px
45    font: 500 / 0.875rem / 0.0125em
46  outline:
47    background: transparent
48    color: #385F9F
49    border: 1px solid #73777F
50    shape: pill
51    padding: 9px 22px
52    font: 500 / 0.875rem / 0.0125em
53  ghost:
54    background: transparent
55    color: #385F9F
56    border: none
57    shape: pill
58    padding: 10px 12px
59    font: 500 / 0.875rem / 0.0125em
60    hover: underline
61charts:
62  variant: line
63  stroke_width: 2
64  gridlines: false
65  highlight: last
66  dot_marker: true
67  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 Material
74 
75## AI Build Instructions
76 
77> **Read this section before writing any code.** The rules below
78> are non-negotiable. Every value used in the UI must come from this
79> file's frontmatter — never substitute, approximate, or invent new
80> colors, fonts, radii, or shadows. If a value is missing, ask the
81> user before adding one.
82 
83### 1 · Your role
84 
85You are building UI for a project that has adopted **Slate Material** as its
86design system. Treat `DESIGN.md` as the single source of truth.
87Your job is to translate the user's product requirements into
88components and pages that look like they were designed by the same
89person who authored this file.
90 
91### 2 · Token compliance
92 
93- Pull every color, font family, radius, shadow, and spacing value
94  from the frontmatter at the top of this file.
95- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
96  hard-code hex values that bypass the system.
97- When a token can be expressed as a CSS variable, declare it once
98  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 recipes
103 
104Use these recipes verbatim when building the corresponding component.
105 
106#### Buttons
107 
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 tertiary
117actions in toolbars. **Ghost** for inline links and table actions.
118 
119#### Cards
120 
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#### Charts
128 
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 pairings
135 
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 constraints
141 
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 — verify
151 
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## Overview
164Slate 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## Typography
177**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## Buttons
187- **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## Cards
195Surface fill, outline-variant border at 20%, tonal elevation level 1. Radius **16px**.
196 
197## Do's and Don'ts
198- ✅ 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## Tokens
208 
209> Generated from the same source the live preview renders from.
210> Treat the values below as the contract — never substitute approximations.
211 
212### Colors
213 
214| Role      | Value |
215|-----------|-------|
216| primary   | `#1A1C1E` |
217| secondary | `#73777F` |
218| tertiary  | `#385F9F` |
219| neutral   | `#F4F8FB` |
220| surface   | `#FAFCFE` |
221 
222### Typography
223 
224- **Display:** Roboto Flex
225- **Body:** Roboto Flex
226- **Mono:** Roboto Mono
227 
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### Radius
236 
237- sm: `8px`
238- md: `12px`
239- lg: `16px`
240- pill: `9999px`
241 
242### Shadows
243 
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### Borders
248 
249- **card:** `1px solid rgba(115, 119, 127, 0.20)`
250- **divider:** `rgba(115, 119, 127, 0.16)`
251 
252### Buttons
253 
254Four variants, each fully tokenized. The preview renders from these exact values.
255 
256#### Primary
257 
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#### Secondary
270 
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#### Outline
283 
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#### Ghost
296 
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### Charts
310 
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 
321---
322 
323## Pro tokens
324 
325> Production-fidelity tokens. States, density, motion, elevation,
326> content rules and a measured WCAG contract — derived from the
327> resting tokens unless explicitly authored.
328 
329### States
330 
331#### Button
332 
333- **hover** — shadow: `0 4px 12px -2px rgba(15,23,42,0.18)`, filter: `brightness(0.97)`
334- **focus** — outline: `2px solid rgba(56, 95, 159, 0.5)`, outline-offset: `2px`
335- **active** — shadow: `0 1px 2px rgba(15,23,42,0.1)`, transform: `scale(0.98)`
336- **disabled** — opacity: `0.4`, filter: `saturate(0.5)`
337- **loading** — opacity: `0.7`
338- **selected** — bg: `#385F9F`, color: `#FAFCFE`
339 
340#### Input
341 
342- **hover** — border: `1px solid rgba(56, 95, 159, 0.5)`
343- **focus** — border: `1.5px solid #385F9F`, shadow: `0 0 0 4px rgba(56, 95, 159, 0.15)`
344- **disabled** — bg: `rgba(26, 28, 30, 0.04)`, opacity: `0.4`
345- **error** — border: `1.5px solid #DC2626`, shadow: `0 0 0 4px rgba(220,38,38,0.15)`
346 
347#### Card
348 
349- **hover** — shadow: `0 12px 28px -12px rgba(15,23,42,0.18)`, transform: `translateY(-2px)`
350- **selected** — bg: `rgba(56, 95, 159, 0.04)`, border: `1.5px solid #385F9F`
351- **dragging** — shadow: `0 20px 48px -16px rgba(15,23,42,0.3)`, transform: `scale(1.02) rotate(-0.5deg)`, opacity: `0.9`
352 
353#### Tab
354 
355- **hover** — bg: `rgba(56, 95, 159, 0.06)`, color: `#385F9F`
356- **focus** — outline: `2px solid rgba(56, 95, 159, 0.5)`, outline-offset: `2px`
357- **selected** — color: `#385F9F`, border: `0 0 2px 0 solid #385F9F`
358 
359### Density
360 
361| Mode | padding × | row × | body | radius × | Use for |
362|------|-----------|-------|------|----------|---------|
363| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
364| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
365| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
366 
367### Motion
368 
369**Signature — Quiet ease.** 240 ms ease-out for all standard transitions. Reliable, invisible — motion stays out of the way.
370 
371```css
372transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1);
373```
374 
375| Token | Value |
376|-------|-------|
377| duration.instant | `80ms` |
378| duration.fast | `160ms` |
379| duration.base | `240ms` |
380| duration.slow | `380ms` |
381| easing.standard | `cubic-bezier(0.4, 0, 0.2, 1)` |
382| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
383| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
384| easing.spring | `cubic-bezier(0.34, 1.4, 0.64, 1)` |
385 
386### Elevation
387 
388Five-level scale, system-specific recipe.
389 
390| Level | Shadow | Recipe |
391|-------|--------|--------|
392| level0 | `none` | Flat — hairline border separates. |
393| level1 | `0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04)` | List rows, resting cards. |
394| level2 | `0 4px 12px -2px rgba(15,23,42,0.1), 0 2px 6px rgba(15,23,42,0.06)` | Hover cards, popover. |
395| level3 | `0 12px 32px -8px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.08)` | Sheets, side panels. |
396| level4 | `0 28px 64px -16px rgba(15,23,42,0.28), 0 8px 24px rgba(15,23,42,0.12)` | Modals — scrim required. |
397 
398### Content
399 
400- **measure:** `68ch` (max line length for body prose)
401- **paragraph spacing:** `1.2em`
402- **list indent:** `1.5em`
403- **list gap:** `0.5em`
404- **link:** color `#385F9F`, underline `hover`
405- **blockquote:** border `3px solid rgba(56, 95, 159, 0.6)`, padding `0.5em 0 0.5em 1.25em`
406- **code:** background `rgba(26, 28, 30, 0.06)`, color `#1A1C1E`
407 
408### Accessibility (WCAG 2.1)
409 
410**Overall:** AA-Large
411 
412| Pair | Ratio | Required | Grade | Suggested fix |
413|------|-------|----------|-------|---------------|
414| Body text on surface | 16.62:1 | AA | AAA | — |
415| Body text on canvas | 16.01:1 | AA | AAA | — |
416| Muted text on surface | 4.37:1 | AA | AA-Large | `#6e727a` → 4.69:1 (AA) |
417| Accent on surface | 6.18:1 | AA-Large | AA | — |
418| Accent on canvas | 5.95:1 | AA-Large | AA | — |
419
04 · How to use it

Wire it into your agent.

markdown
# 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.
05 · Required setup

Three snippets.

Google Fonts link

html
<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" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export 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',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Argent Machined

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.

metallicpremiumcoolminimalhardware
Argent.app
ProductPricingDocsAbout
Sign inGet started
metallic · premium · cool

Build with Argent Machined.

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.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational

Hôtel Rivière

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.

hospitalityeditorialpremiumwarmminimal
Hôtel.app
ProductPricingDocsAbout
Sign inGet started
hospitality · editorial · premium

Build with Hôtel Rivière.

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.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational