Action buttons
Primary, secondary and quiet actions
HTML example
<button class="button">Start mission</button>Component library · v1.0
A consistent interface for every learning world.
Responsive, touch-sized and accessible patterns shared by the platform shell and every game. Use the preview selector to isolate a component for image capture.
Night
#071226
#071226
Quest cyan
#41D9D0
#41D9D0
Action coral
#FF6B5E
#FF6B5E
Reward gold
#FFD166
#FFD166
Story violet
#9D7BFF
#9D7BFF
Objective header
Names the learning before the task
Today's objectiveCompare equivalent fractions
HTML example
<header class="objective">...</header>Answer choices
Large targets with state beyond colour
HTML example
<button class="answer" aria-pressed="true">...</button>Feedback panel
Specific explanation and next action
✓
Your method works
3/4 × 2/2 = 6/8. Both parts changed by the same factor.
HTML example
<aside role="status" class="feedback">...</aside>Progress meter
Skill evidence, not a vague XP bar
Multiplication factsSecure in 6, 7 and 9 times tables
Growing
HTML example
<meter min="0" max="1" value=".68">68%</meter>Mission card
Choice framed by objective and duration
Science · 12 minutesBuild a flood-safe habitat
Apply knowledge of habitats and measure a perimeter.
- + design token
- 2 skills
HTML example
<article class="mission-card">...</article>Game HUD
Only essential state during play
◆ 3 blocks★ 24 m
River gardenHTML example
<header class="game-hud" aria-label="Game status">...</header>Touch controls
Thumb-reachable with keyboard equivalents
HTML example
<button data-key="ArrowUp" aria-label="Jump">↑</button>Pause modal
A natural stopping point with no pressure
Paused
Ready when you are.
Your build is saved on this device.
HTML example
<dialog aria-labelledby="pause-title">...</dialog>Learner profile
Pseudonymous and child-readable
MO
Explorer profileMoss Otter3 skills growing this week
HTML example
<article class="learner-profile">...</article>Teacher insight
Actionable evidence without child ranking
Group insightFractions · Year 4
18 learnersEquivalent fractionsRevisit 5 learners
Decimal equivalentsModel together
HTML example
<section aria-label="Group skill insight">...</section>Empty state
Inviting and informative, never blaming
⌁
Your next world starts here
Complete one short mission and your learning map will appear.
HTML example
<section class="empty-state">...</section>