Design language
Foundations
Every value on these pages is read from the brand tokens at build time.
- ColourBrand colours, semantic roles in light and dark, status tones and live contrast ratios.
- TypographyBricolage Grotesque, Figtree and Geist Mono, the type scale and tabular numbers.
- Space and layoutThe 4-point spacing scale, control heights, touch targets, breakpoints and window classes.
- ShapeSquare corners on the web, capsules for pills and avatars, and the native radius scale.
- Elevation and layersFive elevation levels and the z-index ladder that keeps selects above dialogs.
- MotionDurations, easing curves and springs, with live demos that stop under reduced motion.
- IconographyThe brand icon map: Lucide on the web, SF Symbols on iOS, Material Symbols on Android.
- StatusEvery domain status map rendered: visit stages, tests, requests, alerts and code severities.