A living reference for designers and engineers: structural brutalism meets editorial clarity — raw borders, honest shadows, and authoritative typography so data feels secure and inspectable.
Foundations
Principles
How we balance weight, hierarchy, and trust across the product.
- Structure. Visible frames, square corners, and offset shadows signal transparency — nothing is implied; everything is declared.
- Editorial. Monospace headings, restrained scale, and generous vertical rhythm echo high-end print and audit reports.
- Authority. Primary blue for core actions, yellow secondary for highlights, and deep green tertiary for confirmation — paired with warm neutrals.
Tokens
Color
OKLCH tokens in globals.css — light and dark share hue semantics.
Primary
oklch(0.537 0.257 262.47)
Secondary
oklch(0.917 0.192 101.41)
Tertiary
oklch(0.399 0.083 166.14)
Background
oklch(0.957 0.012 79.78)
Foreground
oklch(0.145 0 0)
Muted
muted
Destructive
destructive
Typography
Type roles
Sans for UI, monospace for headings and technical authority.
Heading — JetBrains Mono
Balances & obligations
Body — Inter
Use this style for explanations, table captions, and helper copy. Line length stays comfortable for financial comprehension.
Mono — Geist Mono
txn_8f2a · 2026-04-03 · ISO 4217
Depth
Neobrutalist elevation
Hard shadows use foreground ink (light) or cream (dark) — no soft ambient blur.
default
secondary
outline
ghost
destructive
link
Surfaces
Cards
Editorial blocks for summaries, insights, and actions.
Input
Forms
Inputs and brutal Select — same border weight and shadows as cards; dropdown panel uses shadow-brutal.
Use variant="brutal" on SelectTrigger and SelectContent. Keep value aligned with item values — no placeholder when a default is always selected.
Labels
Badges
Status and taxonomy — tertiary uses brand green with brutal frame.