Design style
Playful rounded
Friendly and bouncy: chunky rounded type, pill-shaped buttons, bright candy colours and wobbly shapes.
See it live
Pip & Paddle is a fictional children's swimming school page, written for this library to show the Playful roundedstyle. Switch the width to see it at phone, tablet and desktop size.
Pip & Paddle
Swimming school for little ones
Swimming lessons that feel like playtime.
Small groups of four, a warm pool at 32 degrees and teachers who are very good at silly voices. Your child learns to love the water first. The strokes come after.
A class for every size of swimmer
Groups go by age, but nobody moves up until they are ready and happy.
Splashers
6 months to 2 years
You get in the water too. Songs, floating on your arm and the first brave blow of bubbles.
Bubblers
3 to 5 years
Kicking with a noodle, faces in the water and jumping in from the side into a teacher’s hands.
Paddlers
6 to 9 years
Real strokes, a first width on their own and a badge for every new thing they can do.
How the first lesson goes
Thirty minutes, in this order, and you are on the poolside the whole time.
Say hello
Meet your teacher on the poolside and pick a float to hold.
Sit and splash
Legs in, a few big kicks, and nobody has to go under.
Little steps in
Down the steps holding hands, into water no deeper than a tummy.
Sticker time
Every swimmer leaves with a sticker and a note of what they tried.
What a parent said
Noor used to cry at bath time. Six weeks in, she asks if it is Saturday yet so she can jump in to Teacher Sam.
Adaeze, mum of a very proud Bubbler
Try a lesson for free
After that, lessons are £13 each, paid by the term. Weekday afternoons and weekend mornings, with a family changing room right by the pool.
- Groups of four
- Swim nappies on us
- Free parking
Copy the idea
The Playful rounded recipe — its principles, palette, type, spacing and rules — ready to paste into a design tool or an AI assistant.
The recipe
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 — passes AA
Type
- Headings: Baloo 2, weights 700 and 800 — Chunky and round; big sizes
- Body: Nunito, weights 400 and 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 cream
- White
- Deep grape
- Plum grey
- Berry
- Mint
- Biscuit
Text on background: 14.61:1 — passes AA
Type
The quick brown fox jumps over the lazy dog
Chunky and round; big sizes
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
Two rounded faces; nothing sharp.
Spacing and shape
Spacing on a 8px base
Comfortable, bouncy gaps; cards overlap shapes slightly.
Corners, borders and shadows
- 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