Preview image. Unlock full-res
Monochrome Utility, Human Touch. A system that prioritizes clarity and function with a stark black-and-white palette, but softens it with friendly typography and rounded forms.
The design feels like a pragmatic, high-precision instrument. It's built on a strict and disciplined monochrome palette of black, white, and echelon grays, where color is intentionally excluded from the core UI to emphasize function. The custom font, 'Cal Sans', defines the visual identity with its geometric yet open letterforms, giving headlines a technical but approachable character. Nearly all interactive elements are either solid black or pill-shaped outlines, creating a binary system of action. Cards are the fundamental building block, using soft 8-12px radii and extremely subtle shadows to create a quiet, layered topology on a light gray background.
Use 'Cal Sans' weight 600 exclusively for headings (size 20px and above).
Employ a strict monochrome palette (Ink, Graphite, Slate, Paper, White) for 99% of the UI.
Use pill-shaped buttons (9999px radius) for all primary and secondary page CTAs.
Apply a 12px border radius to all content cards and large containers.
Use subtle, diffuse shadows (rgba(36, 36, 36, 0.05) 0px 4px 8px 0px) for elevation.
Set body copy in 'Cal Sans UI Variable Light' with tight negative letter-spacing.
Reserve the single 'Action Blue' (#0099ff) for secondary links or informational highlights.
Do not introduce any new colors to the core UI; confine color to logos and the single blue accent.
Do not use sharp corners on buttons or cards.
Do not use font weights heavier than 600.
Do not use traditional outlined buttons; use either solid 'Ink' or 'ghost' pill buttons.
Do not use gradients on any buttons or card backgrounds.
Do not use borders on cards; use shadows for separation.
Do not set body text in 'Cal Sans'; it is for headlines only.
