Design system · v1.0 · Living document
Every token, type style, component and play piece that makes WONDERKID feel like WONDERKID — rendered live from the same CSS the site uses.
colour tokens
type styles
line icons
shape reveals
01
Cream is the canvas, cobalt is the big moment, lime and coral are the spark. Every swatch below is a project colour style — edit it once in Framer and the whole site follows.
Cream
44%
Cobalt
22%
Ink
16%
Lime
10%
Coral
8%
Hierarchy — roughly how much of each colour a page uses.
Primary
/Brand/Cobalt
#3157D5
Big graphic moments: heroes, CTA sections, the footer wordmark, focus of a page.
Base
/Surface/Cream
#F7F4EB
The canvas. Default page background — warmer and calmer than white.
Text
/Surface/Ink
#20231F
Body copy, headings, ink buttons and dark sections. Never pure black.
Highlight
/Brand/Lime
#D8F36A
Primary buttons, dots, progress, accents on cobalt. Use small and bright.
Secondary accent
/Brand/Coral
#FF795D
Stickers, Fraunces accents on cream, focus rings, hover fills.
Surface
/Surface/Cream Deep
#EFEADC
Alternate section background and quiet panels.
Surface
/Surface/White
#FFFFFF
Cards and notes that sit on cream.
Support
/Brand/Cobalt Deep
#2346B8
Pressed states and shadows within cobalt areas.
Muted text
/Text/Ink Muted
rgba(32,35,31,.62)
Captions, meta, secondary paragraphs.
Divider
/Line/Ink
rgba(32,35,31,.14)
Hairlines, table rules and card borders.
02
Space Grotesk for display and labels, DM Sans for reading, Fraunces italic for one warm accent word. Every sample uses a project text style — change the style and the whole site follows.
Display Hero
/Display/Hero Ink
Space Grotesk 600 · −5%
128px / 1.00
Display Large
/Display/Large Ink + /Accent/Large Cobalt
Space Grotesk 600 + Fraunces italic
88px / 1.00
Heading 1
/Heading/H1 Ink + /Accent/H1 Cobalt
Space Grotesk 600 · −3%
60px / 1.04
Heading 2
/Heading/H2 Ink
Space Grotesk 600 · −2.5%
40px / 1.06
Heading 3
/Heading/H3 Ink
Space Grotesk 600 · −2.5%
26px / 1.15
Body Large
/Body/Large Ink
DM Sans 400 · 1.45
19px / 1.45
A creative world where curious minds explore, experiment and discover what they can become.
Body Regular
/Body/Regular Ink
DM Sans 400 · 1.6
16px / 1.60
Over eight Saturdays children sketch, model and test real structures — towers, bridges, cantilevers and a final collaborative cardboard city that parents walk through on the last day.
Body Small
/Body/Small Muted
DM Sans 400 · 1.5
14px / 1.50
Materials included. Low-temperature glue guns only. Two educators per group of ten.
Eyebrow
/Label/Eyebrow Ink
Space Grotesk 600 · +14% · uppercase
12px / 1.20
Creative enrichment · Ages 3–12
Label
/Label/Button Ink
Space Grotesk 600 · +6% · uppercase
14px / 1.00
Explore programs
Caption
/Label/Caption
Space Grotesk 600 · +10% · uppercase
11px / 1.30
Photo: Tower test #14, First Robots, autumn term.
Accent & Note
/Note/Coral
Fraunces italic 400 — one word per heading, annotations
18px / 1.15
curious mind, age six →
03
Pill buttons with a sliding fill and a jelly bounce on hover. Lime is the primary action; ink for cream backgrounds; ghost for the second choice. Every button is one WKButton component — pick the style and size in the right panel.
variant: lime
Lime · primary
variant: ink
Ink · on cream
variant: coral
Coral · accent
variant: cobalt
Cobalt · bold moments
variant: ghost
Ghost · secondary
variant: ghostLight
Ghost light · on cobalt
04
Cards are fed by the CMS. Program cards carry an age badge; journal cards lead with the image; testimonials are fridge notes held by a magnet.
Program card · CMS Programs
Build
6–9
Years
Cardboard cities, bridges that hold a teddy bear and the joy of a structure that stands up on its own.
8 weeks · Saturdays
Enroll
→
Journal card · CMS Articles
Parents
4 min read
Oct 21, 2026
Five weekend projects that turn a tablet-lover into a tinkerer.
Testimonial notes · drag them
05
Soft cream fields with a 2px ink focus ring. Errors are coral with a plain-language message underneath — never just a red border.
Text input
Jordan Ellis
Focused
Maya
Select
Ages 6–8
▾
Error state
maya@family
!
That email looks a little wobbly — check the ending?
Disabled
Spring term (full)
Textarea
Tell us anything we should know…
Interest chips
multi-select
✓ CREATE
+ DISCOVER
✓ BUILD
+ MOVE
Radio cards
Saturday morning
10:00–12:00 · 4 spots
Saturday afternoon
13:30–15:30 · 7 spots
Wednesday after school
16:00–17:30 · 2 spots
06
A floating pill that turns frosted cream on scroll and hides when you read down. Below 820px it becomes a lime burger that opens a cobalt circle-wipe menu.
Over a cobalt hero
WONDERKID
Scrolled · solid pill
WONDERKID
Mobile bar + menu
WONDERKID
=
01
02
03
04
Breadcrumb · footer links · back to top
← Journal
/
Approach
Privacy
Terms
Back to top ↑
Filter chips · age
ALL AGES
3–5
6–8
9–12
Article pager
← Previous
The case for a little boredom
Next →
A day at Wonder Camp, hour by hour
07
An 8-point scale. Sections breathe with 96–176px of padding; the page gutter runs 16–48px. Radii come in five friendly shapes.
--s1
8px
--s2
16px
--s3
24px
--s4
32px
--s6
48px
--s8
64px
--s12
96px
--s16
128px
--r
20px · cards, photos
--r-lg
32px · large cards, panels
Pill
99px · buttons, chips, nav
Arch
arch · portraits, heroes
Circle
circle · stickers, avatars
Blob
blob · playful accents
08
Ten original line icons on a 24px grid with 2px rounded strokes. Each one is an SvgArt layer — paste any SVG markup to swap it.
arrow
star
play
calendar
clock
pin
phone
users
check
Play pieces are draggable toy shapes — give it a go. Photo masks frame people; hand-drawn strokes point, underline and circle.
Play pieces · drag them
psst — drag me
Photo masks
.arch
.circle
.blob
Hand-drawn strokes
10
Letters land like toy blocks, photos open through brand shapes, pieces wobble with scroll. On the live site motion is driven by layer names — Drop, Rise, Reveal, Curve — and respects reduced-motion settings.
Block-drop heading · Drop layers
Shape reveal · Reveal layers
CIRCLE
ARCH
DIAMOND
BURST
--ease
cubic-bezier(.22, 1, .36, 1) — reveals, wipes
--spring
cubic-bezier(.34, 1.56, .64, 1) — buttons, pieces, stickers