A unified visual language for the learning platform — covering all foundations, components, and interaction patterns.


Design Principles

These four principles guide every decision in the design system.

<aside>

🌑 Dark-First

The platform is optimized for long work sessions. A near-black base keeps eye strain low while surface layers create clear hierarchy.

</aside>

<aside>

🎯 Focus Over Flash

Accent color is used sparingly — for primary actions and active states only. Everything else recedes so the work takes centre stage.

</aside>

<aside>

📐 Consistent Density

Spacing follows an 8-point grid. Compact but never cramped — components breathe at predictable intervals so scanning is effortless.

</aside>

<aside>

🔗 Token-Driven

Every visual decision — color, radius, shadow — maps to a named token. Swapping a token updates the whole system without a search-and-replace.

</aside>

Design System Database