Design Tokens & UI System
Design System Living Spec
Official design language for Exceltrickytricks featuring all 70 rainbow color shades, semantic tokens, glassmorphic surfaces, and reusable UI components.
7 Rainbow Hues (50–900 Scale)
Each course level maps strictly to one rainbow hue. Click any swatch to copy its variable name.
red HueLevels 1–7 design tokens
orange HueLevels 1–7 design tokens
yellow HueLevels 1–7 design tokens
green HueLevels 1–7 design tokens
blue HueLevels 1–7 design tokens
indigo HueLevels 1–7 design tokens
violet HueLevels 1–7 design tokens
Semantic Status Tokens
Success (Green)
Used for quiz passes, active enrollments, and completed steps.
Warning (Yellow/Orange)
Used for pending actions, expiring access, and streak freezes.
Destructive (Red)
Used for access revocation, failed checks, and account deletion.
Information (Blue)
Used for curriculum notes, tips, and metadata hints.