A structured, modernist design language built for precision interfaces. Maximum clarity, minimum decoration. Every decision is deliberate — every pixel accountable.
Five scales. One accent. Semantic colours map to function, not decoration. The palette inverts cleanly for dark contexts without introducing new hues.
Two fonts, clear roles. Array owns display and structural hierarchy. Khand handles information density — body copy, labels, metadata, and interface text.
4px base unit. All spacing derives from this grid. Consistency here creates the quiet rhythm that makes structured interfaces feel inevitable.
12-column grid with 24px gutters. The grid provides structural scaffolding — content aligns to columns, never floats freely.
Four shadow levels. Shadows are warm-tinted to match the Bone palette — never blue-grey. Elevation communicates hierarchy and interactivity.
Core interface primitives. Each component inherits from the token system — no hardcoded values, no exceptions.
The palette inverts without introducing new hues. Char 950 becomes the canvas. Vermilion retains its role. No additional colours needed.
The complete token API. Every value in the system traces back to this table. No magic numbers, no hardcoded values.
| Token | Value | Role |
|---|---|---|
| --f-display | Array Regular | Display headings, section titles |
| --f-body | Khand Regular | Body, labels, interface text |
| --bone-100 | #FAFAF6 | Page background (light) |
| --bone-200 | #F0F0E8 | Surface, card background |
| --bone-300 | #E4E4DC | Borders, dividers |
| --char-900 | #1C1C18 | Primary text, dark canvas |
| --char-950 | #121210 | Dark mode background |
| --verm-500 | #C4392D | Primary accent, CTA |
| --r-sm | 4px | Buttons, inputs |
| --r-md | 8px | Cards, tiles |
| --r-lg | 12px | Panels, containers |
| --r-xl | 16px | Modals, hero blocks |
| --ease | cubic-bezier(0.4, 0, 0.2, 1) | Standard transitions |
| --ease-out | cubic-bezier(0, 0, 0.2, 1) | Enter / reveal animations |
| --dur-fast | 150ms | Hover, focus states |
| --dur-base | 250ms | Standard transitions |
| --dur-slow | 400ms | Complex animations |