Fjord.
Loud at the edges.
A working showcase of the design system. Tokens are locked in — everything below is built from them.
Three families, one voice.
Massive, tight, unflinching.
Geometric warmth that reads at length. Used for paragraphs, form fields, and most of the interface text. Pairs cleanly against Archivo without competing.
labels, code, captions, status · tabular numbers 0123456789
Type scale — ratio 1.383
Body specimen
Setting body text against thick rules and oversized display creates a hierarchy that doesn’t need decoration. Adjust line-height and tracking to find the breathing room that works for your specific font pairing — then leave it alone.
Brutalist accents are for emphasis, not ornament. One hot color can cover primary action, focus state, and active selection. If you find yourself reaching for a second, ask whether the first one is doing enough.
Cream, ink, one hot accent.
The accent is reserved. Primary action, focus, single emphasis — never decoration.
Buttons, inputs, controls.
Buttons
Form fields
Breadcrumbs & pagination
Progress
Stepper
Avatars
Tooltip
Tabs
Overview — tabs use the same thick rule as section dividers, anchored to a 12px baseline. Active state inverts to ink.
Activity — auto-pairing by source order. Each <section> after the <header> binds to the button at the same index.
Settings — arrow keys, Home, and End move between tabs and switch the panel in one step (auto-activation).
Billing — full ARIA: role=tablist/tab/tabpanel, aria-selected, aria-controls, and roving tabindex.
Badges
Callouts
Keep accents reserved for primary attention. The thick left bar already pulls the eye.
Accent variant for higher-priority callouts — warnings, blocking issues, important context.
Cards, tables, numbers.
Stat cards
| 1 | 9200 |
| 2 | 10400 |
| 3 | 11200 |
| 4 | 10800 |
| 5 | 12100 |
| 6 | 11900 |
| 7 | 12840 |
| 1 | 4.21 |
| 2 | 4.08 |
| 3 | 4.17 |
| 4 | 3.96 |
| 5 | 4.02 |
| 6 | 3.88 |
| 7 | 3.91 |
| 1 | 32100 |
| 2 | 28400 |
| 3 | 35200 |
| 4 | 41800 |
| 5 | 38600 |
| 6 | 44900 |
| 7 | 48200 |
Sparklines (inline)
Word-sized trends sit next to numbers without breaking line height —
signups +12.4%
Data table
| Project | Owner | Status | Tasks | Updated |
|---|---|---|---|---|
| Specimen sheet | jane | Active | 28 | 2h |
| Token export pipeline | kai | Review | 11 | 6h |
| Dark variant audit | mira | Draft | 4 | 1d |
| Component coverage | jane | Done | 62 | 3d |
Bar chart
Line chart
| Day | Users |
|---|---|
| Mon | 8420 |
| Tue | 11180 |
| Wed | 9640 |
| Thu | 12800 |
| Fri | 17640 |
| Sat | 10400 |
| Sun | 7620 |
| Wk | Revenue |
|---|---|
| W1 | 32100 |
| W2 | 28400 |
| W3 | 35200 |
| W4 | 41800 |
| W5 | 38600 |
| W6 | 48200 |
| W7 | 44900 |
| W8 | 52700 |
| Day | Users |
|---|---|
| Mon | 8420 |
| Tue | 11180 |
| Wed | 9640 |
| Thu | 12800 |
| Fri | 17640 |
| Sat | 10400 |
| Sun | 7620 |
| Wk | Revenue |
|---|---|
| W1 | 32100 |
| W2 | 28400 |
| W3 | 35200 |
| W4 | 41800 |
| W5 | 38600 |
| W6 | 48200 |
| W7 | 44900 |
| W8 | 52700 |
Pie chart
| Status | Count |
|---|---|
| Complete | 61 |
| In progress | 27 |
| Blocked | 12 |
Donut (progress ring)
Gauge (filled level)
Lists
- Cream base, ink rules
- Single hot accent for primary action
- No radius, no soft shadows
- Mono for labels and captions
- Pick the type stack first
- Lock the scale ratio
- Choose one accent — only one
- Build components from there
Overlays & empty states.
Modal
Loader
Empty state
No projects yet
Create your first project to see it appear here. You can spin one up from the dashboard or import an existing token sheet.
Tokens in a single sheet.
/* drop into any page */ :root { --font-display: "Archivo", system-ui, sans-serif; --font-body: "Space Grotesk", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --fs-base: 16px; --fs-ratio: 1.383; --wt-display: 800; --lh-tight: 0.95; --lh-body: 1.55; --tr-display: -0.035em; --tr-caption: 0.12em; --sp: 8px; --rule: 2px; --rule-thick: 12px; --radius: 0px; --bg: #f1ece1; --surface: #e6dfcd; --ink: #16130f; --muted: #6e6555; --accent: #ff4314; --accent-ink: #ffffff; }