Design system — every value generated from the logo artwork.
These are the only fills in the logo. Every other colour in the platform is a perceptually even OKLCH ramp built around them, and both are pinned into the palette unmodified.
#5F644A
sage.500 — the "95" wordmark and rosetta mark
#EFE7DF
sand.100 — the badge disc and outer ring
primary is the
anchor itself rather than a darker step of the ramp. Body text is still
sage.900, which measures 13.88:1 on white.
Eighteen SVG variants are extracted straight from the master artwork. Pick the one whose tone suits the ground it sits on — never recolour the files by hand.
The rosetta's nested leaves stop resolving below roughly 40px, so the mark
ships two reductions. build_raster.py selects by pixel size —
micro at 20px and under, simple to 40px, full detail above.
Six ramps of eleven steps. Sage and sand carry the brand; the four status hues stay distinguishable side by side on a busy operations screen.
Jost for display — it matches the logo's geometric, single-storey numerals. Inter for UI and body, where a geometric face gets tiring. Cairo covers Arabic.
Colour never carries the meaning alone: every status ships an icon name and a text label alongside its colours, so the chips stay readable for colour-blind staff and in bright daylight at a counter.
Tabular figures keep the digits from shifting width as the countdown runs.
Pulses until a member of staff acknowledges. The animation is replaced with a
static outline under prefers-reduced-motion.