Design System

A cheerful classroom
wrapped in
playful geometry.

Clean white canvas punctuated by unmistakable lime green. Rounded typefaces, pill-shaped buttons, and gamification-driven accent spectrum make education feel like play.

15 color tokens 8 type steps 4px grid 3 gradients 5 shadows
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Warm neutrals with a vivid gamification accent spectrum. Green (#58CC02) is the brand's most recognizable signal — reserved for primary actions and progress.

White
#FFFFFF
Primary background, card surfaces
Snow
#F7F7F7
Secondary background, section fills
Eel
#3C3C3C
Primary text, headings
Slug
#777777
Secondary text, placeholders
Swan
#E5E5E5
Borders, dividers, disabled
Green
#58CC02
Primary CTA, progress, success
Green Hover
#4CAF00
Hover state for green elements
Green Dark
#46A302
Pressed state, 3D shadow
Bee
#FFC800
Streaks, XP badges, warning
Fox
#FF9600
Streak fire, orange accent
Cardinal
#FF4B4B
Errors, hearts, destructive
Macaw
#1CB0F6
Info, links, blue accent
Regalia
#CE82FF
Super badge, premium
Basil
#1899D6
Info background, blue dark

Gradients

green
Primary button gradient, progress fills
super
Super/Premium badges and accents
warm
Streak fire, warm decorative backgrounds
Typography

Type Scale

Nunito (Feather substitute) as primary typeface. Rounded letterforms with generous weights project friendly authority.

Display Learn a language 32px / 1.17 / −0.02em
Heading-lg Start your journey 28px / 1.2 / −0.02em
Heading Section heading 24px / 1.2 / −0.02em
Body-lg Larger body text for descriptions 20px / 1.4 / —
Body Default body text for readable content 16px / 1.5 / −0.01em
Body-sm Dense data, comparison rows 15px / 1.5 / −0.01em
Body-xs Compact body, lesson text 14px / 1.5 / −0.01em
Caption Meta info · Labels · Badges 12px / 1.5 / —

Fonts

Display Feather Bold 700–800 · 24–32px · Nunito substitute
Body Feather 400–700 · 14–20px · Nunito substitute
Mono Source Code Pro 400–500 · 14–16px · Code snippets
Layout

Spacing & Shapes

4px base unit. Comfortable density with 11-step spacing scale. Full pill buttons and soft 16px cards.

Spacing Scale (4px base)

44px
88px
1212px
1616px
2424px
3232px
4848px
8080px

Border Radius

sm 8px
md / inputs 12px
lg / cards 16px
2xl 24px
pill 9999px

Shadows

shadow-sm subtle card lift
shadow-md card elevation
shadow-lg modal overlay
shadow-button 3D button depth
Elevation

Depth & Surfaces

Light, clean surfaces with minimal elevation. Cards float on subtle shadows; sections alternate between White and Snow.

Depth Levels

White
Primary page background — the clean canvas
Level 0
Snow
Secondary sections, alternating fills
Level 1
Elevated Card
Cards with shadow-md for floating effect
Level 2
Modal/Overlay
Modals, dialogs, popovers
Level 3

Surface System

White #FFFFFF
Snow #F7F7F7
Swan #E5E5E5
Components

Component Library

All buttons use pill radius. The signature 3D shadow (`0 4px 0 #46A302`) simulates physical depth on primary green buttons.

Primary Action Button
Main CTA — 3D depth effect
.btn-primary
Green (#58CC02) gradient, White text, 9999px pill, 13px/24px padding, 3D shadow effect.
Secondary Action Button
Outlined — lower emphasis
.btn-secondary
Transparent background, Green text, 2px Green border, 9999px pill.
Ghost / Text Button
Text-only — minimal presence
.btn-ghost
Macaw (#1CB0F6) text, transparent, hover adds underline. For links and tertiary actions.
Badge
Gamification indicator
.badge
+15 XP 🔥 7 days ❤️ 5 Super
Color-coded pill badges. Green=XP, Bee=streak, Cardinal=hearts, Super gradient=premium.
Form Input Field
User text input
input
White background, 2px Swan border, 12px radius, 14px/16px padding. Focus uses Green border + green glow ring.
Progress Bar
Learning progress indicator
.progress
25%
60%
90%
Swan track, Green fill, 8px height, pill radius. Animated fill transition.
Card (Lesson)
Interactive lesson tile
.card
🦉
Basics 1
Learn basic greetings
White background, 16px radius, shadow-md, 24px padding. Contains skill icon, title, description, progress bar.
Guidelines

Do's & Don'ts

Do — Embrace
  • Green (#58CC02) exclusively for primary CTAs and progress
  • 9999px pill radius on all buttons and badges
  • 3D button shadow (`0 4px 0 #46A302`) on green buttons
  • Warm accents (Bee, Fox, Cardinal) for gamification only
  • Snow (#F7F7F7) for section alternation on White canvas
  • Feather Bold at 24–32px with tight line-height (1.17–1.2)
  • 16px element gaps and 48px section gaps for friendly density
Don't — Avoid
  • Green (#58CC02) for text — reserved for interactive elements
  • Flattening the 3D button shadow — it's a core brand interaction
  • Sharp corners (0px radius) — even cards use 16px minimum
  • Green + Cardinal in the same context — success vs. error conflict
  • Thin font weights (200, 300) — brand voice requires 400+
  • Dark surfaces (#1a1a1a) — the brand is fundamentally light
  • Macaw (#1CB0F6) for primary actions — info/link only