How to structure a token system for education products where each course might need its own visual identity while sharing core brand foundations.
Education platforms often want each course or subject to feel distinct. Build this into your token system: a global token layer holds brand colors, typography tokens, and semantic feedback colors. A course-level layer overrides only the accent/theme tokens. When a student enters a math course, the accent might shift to blue; in a creative writing course, it shifts to warm amber. The underlying components stay identical — only the accent tokens change.
Students and instructors interact with the same platform but have different needs. Instructor dashboards emphasize data and analytics (needing chart colors and status indicators), while student interfaces emphasize content and progress. Define shared base tokens plus role-specific extensions: instructor.chart.1 through instructor.chart.8 for analytics views, student.progress.active and student.progress.complete for learning paths.
Bake accessibility into the token system itself. Every text token should reference a background token it's been validated against. Include contrast ratio metadata in your token definitions. When designers or developers create new components, the tokens themselves guide them toward accessible combinations. Export your tokens from ColorArchive with this metadata, and integrate contrast validation into your CI pipeline.
Move from the guide into a concrete palette lane
Guides explain the use case. Collections prove the taste. Pro handles the export and implementation layer.
