The Scenario
A SaaS product is launching a white-label version that clients can brand with their own colours. The current design uses hardcoded hex values throughout. The team needs a token system that separates raw values from semantic meaning.
The Brief
Design a design token architecture with three levels: primitive tokens (raw values), semantic tokens (purpose-based), and component tokens (specific to components). Show how theming works.
Deliverables
- Primitive tokens: colour palette (at least 10 colours with shades), spacing scale (4px base), typography scale
- Semantic tokens: surface, text, border, interactive, feedback colours mapped to primitives
- A theming example: show how 2 different brand themes use the same semantic tokens with different primitive values
- A naming convention with clear rules (e.g., color.surface.primary, not color.white)
Submission Guidance
color.blue-500 is a primitive token. color.interactive.primary is a semantic token. The semantic token REFERENCES the primitive. Theming swaps primitives; semantics stay the same.
Submit Your Work
Your submission is graded against the rubric on the right. If you pass, you get a public Badge URL you can share on LinkedIn. There is no draft save, so work offline first and paste your finished response here.