Design Tokens · v1.0.0

Design Tokens

120+ semantic tokens for every design decision — color, typography, spacing, radius, shadows, and motion. Reference them as CSS variables, Tailwind classes, or raw values.

Color System

Semantic, theme-aware color tokens. Click any swatch to inspect.

Primary — Schoolasium Yellow

Brand anchor. Use for CTAs, focus rings, logo moments.

Secondary — Tech Cyan

Technology, links, live data, action affordances.

Accent — Creator Violet

Creative, premium, AI suggestions, achievements.

Neutrals — Slate Foundation

Backgrounds, surfaces, text, borders — the IDE feel.

Semantic

Communicating state — success, warning, error, info.

Typography Scale

Modular scale based on 1rem = 16px, ratio ~1.25. Roboto (UI), Open Sans (docs), JetBrains Mono (code).

Aa
--text-display-2xl
4.5rem / lh 1.05
Marketing hero
Aa
--text-display-xl
3.75rem / lh 1.1
Section hero
Aa
--text-display-lg
3rem / lh 1.15
Page hero
Aa
--text-heading-xl
2.25rem / lh 1.2
Page title
Aa
--text-heading-lg
1.875rem / lh 1.25
Section title
Aa
--text-heading-md
1.5rem / lh 1.3
Card title
Aa
--text-heading-sm
1.25rem / lh 1.35
Sub-section
Aa
--text-body-lg
1.125rem / lh 1.6
Intro, lesson body
Aa
--text-body-md
1rem / lh 1.55
Default body
Aa
--text-body-sm
0.875rem / lh 1.5
Secondary, captions
Aa
--text-body-xs
0.75rem / lh 1.45
Labels, badges
Aa
--text-code-md
0.875rem / lh 1.6
Code preview

Spacing Scale

4px base unit with a non-linear scale for IDE-density UIs.

--space-1
4px0.25rem
--space-2
8px0.5rem
--space-3
12px0.75rem
--space-4
16px1rem
--space-5
20px1.25rem
--space-6
24px1.5rem
--space-8
32px2rem
--space-10
40px2.5rem
--space-12
48px3rem
--space-16
64px4rem
--space-20
80px5rem
--space-24
96px6rem
--space-32
128px8rem

Border Radius

From sharp to pill. The signature block radius is 10px.

none
0
No rounding
xs
2px
Code tokens, micro-tags
sm
4px
Inputs, small chips
md
6px
Buttons, dropdowns
lg
8px
Cards, panels
xl
12px
Modals, large surfaces
2xl
16px
Hero cards, features
3xl
24px
Marketing visuals
block
10px
Visual programming blocks (signature)
full
9999px
Pills, avatars

Shadows & Glows

Light theme uses physical drop shadows. Dark theme uses brand glows for elevation.

--shadow-xs
light mode
0 1px 2px rgba(15,23,42,0.05)
--shadow-sm
light mode
0 1px 3px rgba(15,23,42,0.08)
--shadow-md
light mode
0 4px 6px rgba(15,23,42,0.07)
--shadow-lg
light mode
0 10px 15px rgba(15,23,42,0.08)
--shadow-xl
light mode
0 20px 25px rgba(15,23,42,0.10)
--shadow-dark-sm
dark mode
0 1px 2px rgba(0,0,0,0.4)
--shadow-dark-md
dark mode
0 4px 12px rgba(0,0,0,0.5)
--shadow-dark-lg
dark mode
0 10px 30px rgba(0,0,0,0.6)
--shadow-glow-primary
dark mode
0 0 24px rgba(234,179,8,0.35)
--shadow-glow-secondary
dark mode
0 0 24px rgba(6,182,212,0.35)
--shadow-glow-accent
dark mode
0 0 24px rgba(139,92,246,0.35)

Motion System

Smooth, energetic, purposeful. Every animation has a reason: feedback, continuity, or delight.

Duration

--duration-instant
Tooltips, color shifts
--duration-fast
Hover, focus rings
--duration-base
Default UI motion
--duration-slow
Modals, drawers
--duration-slower
Page transitions, hero
--duration-deliberate
Onboarding, ta-da moments

Easing

--ease-out
Default — snappy settle
--ease-in-out
Symmetric motion
--ease-spring
Block snap — playful overshoot
--ease-decel
Decelerate