Design system
Every visible rule has a name. This is the reference I use when I change the site.
Type
Literata is for the words.
Space Mono is for the useful labels.
Body copy stays comfortable at 17.5px with a generous line height. Strong text is quiet. Small text is still readable.
Color
Paper
Page surface.
Ink
Primary text.
Muted
Supporting text.
Line
Hairlines.
Fairway
The only brand accent.
Danger
Errors only.
Warn
Warnings.
Info
Information.
Code panel
Fixed dark panel.
Semantic elements
Lists
- One thing at a time.
- Write it down.
- Move on.
- Read the docs.
- Try the small version.
- Keep the useful part.
Definition list
- Watching
- Formula 1 — forza Ferrari
- Playing
- Golf
- Building
- Small tools for my own use.
Scorecard table
| Hole | Plan | Par |
|---|---|---|
| 01 | Keep it small | 3 |
| 02 | Ship the useful bit | 4 |
| Out | Two holes | 7 |
Quote, code, and rule
The best default is the one I stop thinking about.
Doug, probably
# one small command
pnpm build
echo "done"Inline code, ⌘ K, and a semantic rule follow.
Open the small print
I prefer boring infrastructure and readable pages.
Core components
Card
A hairline gives the content a boundary.
Aside card
A dashed rule says this is supporting material.
Badge
MutedFairway Warning
Buttons
Forms
Spacing and motifs
Modes
Use the night/day control above to inspect the same page in light and dark.