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.
#797F6F
sage.500 — the "95" wordmark and rosetta mark
#F6ECE0
sand.100 — the badge disc and outer ring
sage.900 and interactive surfaces use
sage.600; the logo colour stays reserved for the logo, display
type and decorative fills.
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.