Khan Academy recently overhauled its Wonder Blocks design system, moving away from a rigid, limited color palette toward a sophisticated semantic architecture. This rebuild was driven by the need to support diverse learners across global school districts while maintaining strict accessibility standards. By transitioning to semantic tokens—where colors are defined by their functional role rather than their specific appearance—the team created a flexible framework that adapts seamlessly between different themes and interface requirements.

The core of this new system is the Intensity Scale, a tiered approach categorizing colors as Subtle, Default, or Strong. This hierarchy ensures that visual weight and contrast remain consistent regardless of the specific background or context. The system was rigorously stress-tested against accessibility standards to maintain a minimum 4.5:1 contrast ratio for text. This mathematical approach to color allows designers to guarantee legibility for students with visual impairments or those using lower-quality displays in classroom settings.

In a notable intersection of design and artificial intelligence, the engineering team utilized Claude to develop a custom generator tool. This tool automates the creation of primitive palettes and semantic tokens based on the new schema, allowing for rapid iteration and exportable code. By leveraging AI to handle the complex calculations of HSL (Hue, Saturation, Lightness) spacing, Khan Academy has streamlined the bridge between visual design and production-ready software engineering, ensuring the system can scale as the platform grows.

Khan Academy recently overhauled its Wonder Blocks design system, moving away from a rigid, limited color palette toward a sophisticated semantic architecture. This rebuild was driven by the need to support diverse learners across global school districts while maintaining strict accessibility standards. By transitioning to semantic tokens—where colors are defined by their functional role rather than their specific appearance—the team created a flexible framework that adapts seamlessly between different themes and interface requirements.

The core of this new system is the Intensity Scale, a tiered approach categorizing colors as Subtle, Default, or Strong. This hierarchy ensures that visual weight and contrast remain consistent regardless of the specific background or context. The system was rigorously stress-tested against accessibility standards to maintain a minimum 4.5:1 contrast ratio for text. This mathematical approach to color allows designers to guarantee legibility for students with visual impairments or those using lower-quality displays in classroom settings.

In a notable intersection of design and artificial intelligence, the engineering team utilized Claude to develop a custom generator tool. This tool automates the creation of primitive palettes and semantic tokens based on the new schema, allowing for rapid iteration and exportable code. By leveraging AI to handle the complex calculations of HSL (Hue, Saturation, Lightness) spacing, Khan Academy has streamlined the bridge between visual design and production-ready software engineering, ensuring the system can scale as the platform grows.