Fjord.
Loud at the edges.

Three rules. Print them. Tape them to the monitor.

Three faces, same jaw.

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

Badges

Callouts

Cards, tables, numbers.

Stat cards

Sparklines (inline)

Word-sized trends sit next to numbers without breaking line height — signups +12.4% · churn −0.4pt · uptime 99.97%

Data table

Bar chart

Line chart

Pie chart

Donut (progress ring)

Gauge (filled level)

Lists

Overlays & empty states.

Modal

Loader

Empty state

Tokens in a single sheet.

: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;
        }