Single source of truth for every brand token, primitive, and shell piece used in the prototype. Use this page to look up a color variable, find a component variant, or verify how a pattern is supposed to look. Click any color swatch to copy its CSS variable name.
Defined in lib/tokens/tokens.css.
Use these for sidebar / topbar / cards-inside-the-shell so the platform-admin dark mode (.theme-platform) flips them automatically. Defaults match the existing light look — using them on school / teacher / student pages produces no visual change.
Display = Outfit. Body = Urbanist. Both via next/font.
Display 5xl extraboldDisplay 4xl boldDisplay 3xl boldDisplay 2xl boldDisplay xl semiboldBody base regularBody sm regularBody xs mediumEyebrow 10px uppercaseUsed on hero cards, persona avatars, and the login brand panel. Mirror these in any new persona-themed surface.
from-ink-700 via-ink-900 to-deep-900from-electric-700 via-electric-900 to-ink-900from-gold-500 via-orange-500 to-orange-700from-purple-500 via-purple-700 to-electric-700Phosphor icons. Use weight="regular" for defaults, weight="fill" for accents and brand marks. Sizes: 14 (inline), 16 (default), 20 (toolbars), 24 (page-level).
LightbulbHouseUsersThreeChalkboardTeacherGraduationCapBooksBookOpenCalendarCheckSparkleShieldCheckClipboardTextMedalMapTrifoldArrowUUpLeftEvery variant + state of components in components/ui/.
The chrome that wraps every persona shell. Each is shown in isolation here; in the app they're composed inside components/shell/shell.tsx and globally in app/layout.tsx.
components/shell/sidebar.tsx. Persona-aware nav. To preview live, sign in as any persona via the demo console and look at the left rail.components/shell/topbar.tsx. Search + notifications + user menu.components/shell/lang-toggle.tsx. Prototype-only review-language switcher.components/shell/demo-console-chip.tsx. Returns to the demo console mid-demo. Sits below LangToggle.Recurring compositions used across the prototype.