The Scenario
A South African educational platform, "EduSouth", is standardizing its design system across web and mobile. To comply with accessibility guidelines and support white-labelling for corporate clients, the design team must establish a formal token structure. They need a system that translates Figma variables into developer-friendly JSON structures.
The Brief
Architect a scalable 3-tier design token structure (Global/Primitive -> Alias/Semantic -> Component) in JSON format. Provide documentation on how colors, spacing, and typography resolve across themes.
Deliverables
- A JSON representation of the Primitive color and spacing palettes
- A JSON representation of the Semantic tokens showing references to Primitive tokens
- A table demonstrating theme mapping: how variables change when switching between light, dark, and high-contrast modes
- Handoff workflow guidelines explaining how designers and engineers sync token updates
Submission Guidance
Use standard JSON structure. Verify that token reference variables follow a strict naming convention (e.g., `{color.brand.primary}`).
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.