Design system
The code version of docs/design-system.html. Tokens live in src/styles/tokens.css.
Colour
6 accents · 2 neutralsAccents are soft fills with ink on top. Ink carries all text and icons; paper is the resting surface.
Aa
bg-sky#B7D9F2
Aa
bg-lime#C0EFA2
Aa
bg-coral#E88C7C
Aa
bg-butter#F1EE9F
Aa
bg-mist#D2F0EA
Aa
bg-peach#F4E0CB
Aa
Ink#16150F
Aa
Paper#F4F3EE
Semantic tokens
bg-{token} · text-{token}-foregroundAa
bg-backgroundpaper
Aa
bg-cardpaper-2
Aa
bg-primaryink
Aa
bg-highlightcoral
Aa
bg-mutedpaper-2
Aa
bg-accentline-soft
Aa
bg-destructivecoral-deep
Aa
bg-successlime
Aa
bg-warningbutter
Colour in use
flat blocking, no gradientsFill a whole card with one accent. Composed with className, not a variant.
Build a robot
Assemble, wire and program a working bot in a weekend.
Track progress
See skills grow across projects with a simple dashboard.
Earn badges
Mark milestones and share what you've mastered.
Typography
Archivo · Google FontsDisplay72 / 0.95 · Medium
Innovation Inside
Heading 148 / 1.0 · Medium
Learn by building
Heading 236 / 1.05 · Medium
Robotics for every classroom
Heading 328 / 1.1 · Medium
Kits, courses and tools
Subhead22 / 1.3 · Regular
A hands-on path from first circuit to first robot.
Body18 / 1.5 · Regular
Students move from curiosity to capability through short, guided projects. Each one ends with something that runs, lights up, or moves.
Caption14 / 1.45 · Regular
Supporting detail, captions, and metadata.
Space
4px base · 0.25rem per step2xs10.25rem
xs20.5rem
sm30.75rem
md41rem
lg61.5rem
xl82rem
2xl123rem
3xl164rem
s9246rem
Radius
rounded-input10px
rounded-card16px
rounded-tile20px
rounded-panel24px
rounded-pill999px
Button
pill radiusInk is primary, outline is secondary, and coral (highlight) carries a single high-intent action per view.
Badge
pill radius · accent fillColour is composed with className. Text and icons stay ink.
CompletedNewFeaturedDefault
Card, field, input and textarea
Composed from parts. No title, label or error props.
Create account
Start with your name and email.
We'll never share it.
Must be at least 8 characters.
Tag input
Enter or comma adds a tag; backspace on an empty field removes the last one.
PlayfulWarm