A scalable, token-based design system created for Onyx AI Lesson Planning — and the foundation for every future Onyx product surface.
As Onyx grew from a single AI lesson planner into a product family, every new feature was being designed from scratch. Components drifted, colors duplicated, and engineering hand-off slowed to a crawl.
We needed a single source of truth — a system that gave the team velocity while protecting brand and accessibility standards across every screen.
A documented, token-based system spanning color, typography, spacing, iconography, and components — with responsive behavior and accessibility requirements baked in from the start.
Designers ship faster, engineers reach for the right primitives, and the Onyx brand stays consistent as the product continues to expand.
A semantic palette for surfaces, ink, and accents — paired with WCAG-checked contrast pairings for every combination.
A type scale tuned for long-form lesson content and dense data tables alike, with clear hierarchy across breakpoints.
A consistent spacing rhythm and grid system so layouts compose predictably across products and form factors.
A unified icon set sized to the type scale, with guidelines for stroke, weight, and metaphor.
Reusable shadows and motion tokens that signal hierarchy and feedback without distracting from the content.
Focus states, contrast, and keyboard behavior defined at the token level — not bolted on at the component layer.
The full Onyx style guide — color, typography, components, and patterns documented in a single reference. Click to enlarge.