Design system: a single source of truth for the product's interfaces
A design system for a large road-anomaly monitoring product in the UAE, built in Figma on Variables. A single source of truth: primitives, semantic tokens, typography, and sizing, from which 50+ components and every interface screen are built.
Document the system in one place and connect everything with variables, so the team could use components more easily and scale the product faster:
- 377 variables across four collections;
- Dark / Light themes through semantics;
- 50+ components with variants.
Before starting, I studied other design systems and used Tailwind's color system as a base. The idea came from the design lead, then I built the system myself: the lead only stepped in occasionally.
Component library: colors, typography, inputs, navigation, controls, buttons, statuses, icons, and cards. 50+ components with variants, from which every screen is built.
The .Primitives collection, 256 variables: full color scales across 11 steps (50–950). The base layer everything else references.
Semantic, 67 tokens (text, bg, stroke, icons, btn…), linked to the primitives. Dark and Light themes switch here too.
Font, 28 tokens: sizes (12–48), weights, tracking, and line height. Typeface: Inter.
Numbers, 26 tokens: radii, border widths, blur, and the sizing scale.
Editing a token in one place applies across the whole interface: the system is used by every designer and developer on the product.
Switching themes became simple, and unlike the old UI kit, the system became easy to maintain.