Card title
Short supporting text.
Catalog
Every component.
One page with each token, size, and component in the system. Markup for each lives in components/. Use the theme control to see the accent change.
Foundations
Color, type, space, shape
Tokens only. Anything not on this page is not in the system.
Color
--bg
Page--surface
Cards, inputs, code--sand
Secondary fills--ink
Text, focus--ink-soft
Secondary text--olive
Captions--stone
Meta--line
Hairline--accent
Links, primary, overlines--accent-ink
Text on accent--accent-hover
Primary hover--tag-quiet
Quiet tag, notice--tag
Tag--danger
Errors only--dark
Dark band--dark-surface
Dark containers--accent-on-dark
Accent on dark
Type
--text-displaySerif 48 / 1.10 · 36 under 768
Warm paper
--text-h1Serif 32 / 1.20
Heading one
--text-h2Serif 22 / 1.25 · pull quote
Heading two
--text-h3Serif 18 / 1.30
Heading three
--text-metricSerif 32 / 1.10 · accent
1,284
--text-bodySans 17 / 1.60
Body text is a sans at screen size.
--text-controlSans 16
Button label
--text-captionSans 14 / 1.45
Caption, tag, code, error
--text-labelSans 12 · 500 · tracking 0.06em
OVERLINE OR FIELD LABEL
Space
--space-4--space-8--space-12--space-16--space-24--space-32--space-48--space-64--space-96Radius and depth
Flat by default. --shadow-floating only on menus and dialogs.
Actions
Buttons and links
One primary button per view. No other button styles.
Button
Link
Links stay ink green, with the underline 3px off the text. Read the rules.
Forms
Inputs and choices
44px minimum height. Labels are tracked sans. Errors use --danger and appear only when invalid.
Enter a value.
Plain text. 500 characters at most.
Feedback
Messages, tags, progress
Quiet by default. Red only for failures.
Notice
Saved
Your changes are live.
Could not save
Check the highlighted fields and try again.
Tag
QuietDefault
Progress
Content
Type blocks, cards, data
Serif for display only. Cards have no border and no shadow.
Overline, heading, lede
Overline
Section title
One or two sentences, at most 66 characters wide.
Metric
94%
Matched
3 hrs
To close
Pull quote
Size and space create hierarchy. Color does not.
Card
List
- First item.
- Second item.
- Third item.
Table
| Name | Status | Total |
|---|---|---|
| First | Paid | $12.00 |
| Second | Due | $39.00 |
Code
--bg: #F5F4ED;
--accent: #1C3D32;Hairline
Whitespace separates regions.
A hairline only when the boundary has to be explicit.
Layers
Menu, dialog, dark band
The only things allowed a shadow, and the dark band only when a brief asks.
Menu
Dialog (static preview)