Style
Playful rounded
Friendly and bouncy: chunky rounded type, pill-shaped buttons, bright candy colours and wobbly shapes.
See it live
Example: children's swimming school page for Pip & Paddle, a fictional brand made up for this explorer. Switch the width to see the style on a phone, a tablet and a desktop screen.
Swimming lessons for little ones
Little swimmers, big splashes!
Small, giggly classes in a warm pool, with teachers who never rush. Most children are happily floating by their fourth week — and their grown-ups are smiling by the first.
A class for every size of swimmer
Groups of four, thirty minutes, same teacher every week.
Ducklings
6 months – 3 years
You come in the water too. Songs, splashes and lots of floating, all in the warm teaching pool.
Otters
3 – 5 years
First lessons on their own. Kicking, blowing bubbles and jumping in to a big, safe catch.
Dolphins
5 – 8 years
Real strokes, little badges and the proud day they swim a whole width without a float.
What happens in a lesson?
- 1
Wiggle in
A short warm-up song on the steps, so nobody gets a cold surprise.
- 2
Play to learn
Every skill is a game: rocket pushes, starfish floats, treasure dives.
- 3
Big finish
One brave thing each week, then a sticker and a towel hug.
“She used to cry at bath time. Now she asks if it’s Pip & Paddle day yet.”
— Tilly’s dad, Otters class
Come and try a splash on us.
Your first lesson is free. Bring a swim nappy, a towel and your best bubble-blowing face.
Pick a taster timeCopy the idea
Take the style with you as a brief for a person, as instructions for an AI assistant, or as design tokens. It describes the idea and the rules — never the example's code.
The recipe
Playful rounded — style recipe: the same text the brief copies.
The idea
- Friendly and bouncy: chunky rounded type, pill-shaped buttons, bright candy colours and wobbly shapes.
Use it when
- Products for children and families
- Consumer apps that want to feel fun
- Events and community projects
Avoid it when
- The subject is serious or sensitive
- The audience expects a formal tone
Principles
- Rounded, heavy type with soft terminals
- Pill-shaped buttons and fully rounded cards
- Two bright colours that play off each other
- Blobby, hand-shaped background shapes
- Big, friendly icons and illustrations
- Copy that talks like a person
Colour
- Peach cream (background): #fff6ec
- White (surface): #ffffff
- Deep grape (text): #2a1a4a
- Plum grey (muted): #5a4a74
- Berry (accent): #c2185b
- Mint (accent-2): #2ec4b6
- Biscuit (border): #f0dcc8
- Text on background contrast: 14.61:1
Type
- Headings: Baloo 2, weights 700, 800 — Chunky and round; big sizes
- Body: Nunito, weights 400, 700 — Rounded sans that matches the headings
- Scale: 15px, 17px, 20px, 28px, 40px, 64px
- Two rounded faces; nothing sharp.
Spacing and shape
- Base unit: 8px
- Spacing steps: 8px, 16px, 24px, 40px, 64px
- Comfortable, bouncy gaps; cards overlap shapes slightly.
- Corner radii: 16px, 999px
- Borders: Rarely; colour and shape do the separating
- Shadows: Soft, tinted, slightly offset
Imagery and motion
- Imagery: Simple friendly illustrations, blobs and rounded icons.
- Motion: Springy: small bounces and wiggles on hover.
Do
- Round every corner
- Pair the berry with the mint
- Write short, friendly sentences
Don't
- No thin or condensed type
- No sharp corners
- No dark, moody colours
Palette
- Peach creambackground
#fff6ec - Whitesurface
#ffffff - Deep grapetext
#2a1a4a - Plum greymuted
#5a4a74 - Berryaccent
#c2185b - Mintaccent-2
#2ec4b6 - Biscuitborder
#f0dcc8
Text on background: 14.61:1 — passes AA
Type
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Chunky and round; big sizes
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Rounded sans that matches the headings
- 64pxThe quick brown fox jumps over the lazy dog
- 40pxThe quick brown fox jumps over the lazy dog
- 28pxThe quick brown fox jumps over the lazy dog
- 20pxThe quick brown fox jumps over the lazy dog
- 17pxThe quick brown fox jumps over the lazy dog
- 15pxThe quick brown fox jumps over the lazy dog
Spacing and shape
- 8px
- 16px
- 24px
- 40px
- 64px
Comfortable, bouncy gaps; cards overlap shapes slightly.
- 16px
- 999px
- Borders
- Rarely; colour and shape do the separating
- Shadows
- Soft, tinted, slightly offset
Do and don't
Do
- Round every corner
- Pair the berry with the mint
- Write short, friendly sentences
Don't
- No thin or condensed type
- No sharp corners
- No dark, moody colours