our logo, dressed for the playroom
Playroom Pastel
Soft pastel bands, oversized petals, butterflies and dotted paths: playful, warm and calm.
A white page broken into chapters of soft pastel colour, each with one big, gentle shape behind it. Rounded display type, white cards with soft shadows, and small hand-drawn touches such as butterflies, dotted paths and doodles make it feel like a well-kept playroom: bright, but never loud.
The style in words
What you see
Read this first. It is the style described plainly, the way you would brief a designer over coffee.
- 1Mostly white, with long full-width bands in pastel: sky, mint, seafoam, meadow, blush, peach and lilac. Each band is one chapter.
- 2One oversized, pale shape per section (a five-petal flower, a cloud or a big circle), bleeding off the edge, behind the content.
- 3Headings are chunky, rounded and near-black; labels such as SAYS, THINKS and MEET OUR HERO are in coral, spaced out, sometimes set on an arch.
- 4Content sits on white or pastel cards with large rounded corners, a thin lighter outline and a wide, soft shadow.
- 5Small, scattered delights: a blue butterfly, a kite, a balloon, a sparkle. Never more than two or three in view at once.
- 6Dotted and dashed curvy lines join steps together, like a path through a garden.
- 7Characters and photos sit inside "arch cups": a pastel circle with a white notch at the top, so the figure pops out of it.
- 8Band edges are wavy or softly curved, never a hard straight cut.
- 9Pastel pills mark steps and tags; small peach number circles mark lists.
- 10Tables are made of separate rounded cells with gaps between them, a pastel header row and a white body.
Mood
Best for
- Early learning centres, childcare, kids' classes and play centres
- Education apps, storybooks and learning platforms
- Family services, parenting products and paediatric health
- Case studies and research write-ups that should feel friendly
- Flyers, open-day invitations and social posts for families
Avoid for
- Finance, legal or enterprise software, where it reads as unserious
- Dense data dashboards: the pastel grounds lose meaning under many series
- Anything urgent or safety-critical, which needs stronger contrast
Palette
Colour
Four families. White and ink do the reading; pastels make the chapters; crayon accents are the sparkle; step pills mark a sequence. Tap a hex to copy it.
Paper and ink
White carries most of the page. Ink is a deep plum-navy, softer than black.
Paper White
--pp-paperPage background, cards
Cream
--pp-creamQuiet alternate band, warm card
Story Ink
--pp-inkHeadings and key text
Slate Plum
--pp-bodyBody text
Pebble
--pp-mutedCaptions, meta, helper text
Chalk Line
--pp-lineHairlines and card outlines
Pastel grounds
For bands, cards and fills, never for text. Use one ground per section, and change it at every section.
Sky
--pp-skyResearch, calm information
Mint
--pp-mintProfiles, growth, success
Seafoam
--pp-seafoamDeeper mint band behind mint cards
Meadow
--pp-meadowFresh, outdoors, a second green
Blush
--pp-blushProblems, gaps, feelings
Peach
--pp-peachPlans, steps, warmth
Lilac
--pp-lilacInsights, ideas, quiet emphasis
Butter
--pp-butterHighlights, sunny notes
Crayon accents
Small amounts only. The bright versions are for shapes and large display type; the deep versions are for text.
Coral
--pp-coralDisplay labels, ribbons, the one hot spot
Coral Deep
--pp-coral-deepCoral for small text on light grounds
Marigold
--pp-marigoldSunny display words, stars, kites
Marigold Deep
--pp-marigold-deepMarigold for small text
Lagoon
--pp-lagoonPrimary buttons, links, focus
Lagoon Bright
--pp-lagoon-brightIllustration, chart fills, outlines
Periwinkle
--pp-periCharts, doodle icons
Butterfly Blue
--pp-butterflyButterflies, clouds, sky details
Step pills
A fixed sequence for five-step processes, always in this order, always with Story Ink text.
Step 1 · Wisteria
--pp-step-1First step
Step 2 · Sunflower
--pp-step-2Second step
Step 3 · Spearmint
--pp-step-3Third step
Step 4 · Apricot
--pp-step-4Fourth step
Step 5 · Bluebell
--pp-step-5Fifth step
How much of each
By area on a typical page.
Accessibility
Which text goes on which colour
Pastels are for grounds, never for words. Every pair below is approved, with its contrast worked out from the hex values. AA is fine for any text; Large only means bold display text of 24px and up.
Once upon a time
A small story about a big idea, told gently.
Story Ink on Paper White
Headings and body anywhere
Once upon a time
A small story about a big idea, told gently.
Slate Plum on Paper White
Long body text
Once upon a time
A small story about a big idea, told gently.
Pebble on Paper White
Captions and meta
Big and bold
Coral on Paper White
Display labels only: 24px and up, bold
Once upon a time
A small story about a big idea, told gently.
Coral Deep on Paper White
Small coral text, links in a coral section
Once upon a time
A small story about a big idea, told gently.
Lagoon on Paper White
Links and text buttons
Once upon a time
A small story about a big idea, told gently.
Story Ink on Sky
Everything on a sky band
Once upon a time
A small story about a big idea, told gently.
Slate Plum on Mint
Body text on a mint card
Once upon a time
A small story about a big idea, told gently.
Story Ink on Blush
Everything on a blush band
Once upon a time
A small story about a big idea, told gently.
Marigold Deep on Peach
Warm small labels on peach
Once upon a time
A small story about a big idea, told gently.
Slate Plum on Lilac
Insight lists on lilac
Once upon a time
A small story about a big idea, told gently.
Paper White on Lagoon
Primary button
Once upon a time
A small story about a big idea, told gently.
Story Ink on Coral
Coral button, coral ribbon
Once upon a time
A small story about a big idea, told gently.
Story Ink on Marigold
Sunny badge, sticker
Never
All under 3:1. Hard to read for everyone, impossible for some.
Instead
Colour lives in the ground and the shapes; words stay dark.
Typography
Round letters, friendly words
Three families: a chunky rounded display face, a soft readable body face, and a hand for notes. Sizes are for desktop; on phones, take display sizes down about a third and keep body at 16px or more.
Display
Aa
Fredoka
Weights 500, 600, 700
Rounded terminals and chunky weight: friendly without being childish.
Body
Aa
Nunito
Weights 400, 600, 700, 800
Rounded, open and very readable at small sizes; sits happily under Fredoka.
Hand
Aa
Caveat
Weights 500, 700
For notes in the margin, arrows and scribbles, like the brainstorming pages. One or two lines at a time.
display-xl64px · 700 · 1.02 · -0.02em
Hero headline, one per page
Welcome to the playroom
display44px · 700 · 1.08 · -0.01em
Section headline
Welcome to the playroom
title30px · 600 · 1.15
Card group heading, poster subhead
Welcome to the playroom
heading22px · 600 · 1.25
Card title
Welcome to the playroom
label14px · 600 · 1.2 · 0.22em
Coral labels: SAYS, THINKS, MEET OUR HERO
Meet our hero
lead20px · 400 · 1.6
Intro paragraph
Every child learns best when the story feels like theirs.
body17px · 400 · 1.65
Paragraphs and lists (16px minimum on phones)
Every child learns best when the story feels like theirs.
small14px · 600 · 1.5
Captions, meta, table cells
Every child learns best when the story feels like theirs.
hand26px · 500 · 1.2
Margin notes, arrows, stickers
look here, this is the good bit →
Together
Little stories, big ideas
A label, a headline with one warm word, and a calm paragraph. That is the whole hierarchy. Resist a fourth level.
one coral word per headline, max ✿
Corners, depth, space
Shape and shadow
Everything is rounded, and shadows are wide, soft and faintly plum, never grey or hard. Think of paper cut-outs lifted a few millimetres off the table.
Corner radius
radius-chip
12px
Small tags, table cells, inputs
radius-tile
20px
Icon tiles, small cards
radius-card
28px
Cards and panels
radius-band
48px
Inset bands and big feature panels
radius-pill
999px
Buttons, pills, step tags
radius-arch
50%
Arch cups, avatars, number circles
Shadows
shadow-soft
Default card on white
0 1px 2px rgba(30,27,46,.04), 0 10px 28px -12px rgba(30,27,46,.14)shadow-float
The one card that should lift: a hero device, a modal
0 2px 4px rgba(30,27,46,.04), 0 24px 48px -20px rgba(30,27,46,.24)shadow-plinth
Big feature panels; a solid step under the card like a toy block
0 6px 0 rgba(30,27,46,.06), 0 18px 34px -18px rgba(30,27,46,.22)shadow-tint
Coloured cards: the shadow takes the card's colour (coral shown)
0 14px 28px -14px rgba(233,112,95,.45)shadow-ring
Charts, avatars and round badges: a thick white ring plus a soft drop
0 0 0 10px #FFFFFF, 0 22px 44px -18px rgba(30,27,46,.22)shadow-press
Buttons: a soft bottom lip, removed when pressed
inset 0 -3px 0 rgba(30,27,46,.14)Space
space-section
clamp(72px, 10vw, 128px)Top and bottom of every band
space-card
clamp(20px, 3vw, 32px)Card padding
space-gap
clamp(16px, 2.4vw, 28px)Grid gaps
gutter
16px on phones, 24px at 768px, 40px at 1200pxPage side gutter
Surfaces
Texture
Flat colour is the default. Three quiet textures add a printed, hand-made feel, each with a job, each barely there.
Doodle wallpaper
A repeating pattern of tiny line doodles at 6 to 8% opacity, laid over a mint or seafoam card.
- Only on profile and persona cards.
- Never under body text that is smaller than 16px.
Dot grid
A 22px grid of 1.5px dots in Chalk Line, like squared paper.
- For planning, timeline and process sections on white.
feels like paper
Paper grain
A very faint noise (3 to 4%) over pastel bands, so large flat colour feels like printed paper.
- Pastel bands only, never on white or cards.
What makes it playful
Graphic elements
Colour alone makes a page pastel; these make it Playroom. Big soft shapes sit behind the sections, small friends drift in the gaps, and paths tie things together.
Heading
Oversized petal flower
A five-petal flower in a pale ground colour, 360 to 720px wide, bleeding off a corner behind the section heading.
- One per section at most; alternate corners down the page.
- Use the next section's ground colour, or Sky on white.
- Always behind content, never overlapping text by more than a petal.
Puffy cloud
A white or sky cloud with a soft Butterfly Blue underside, used where a section talks about ideas, sky or imagination.
- Pairs well with Sky bands.
- Keep it flat: two tones, no outline.
Quiet
Big soft disc
A plain circle in a ground colour, 400px and up, half off the edge. The quietest of the big shapes.
- Use it when a section already has busy content.
Butterflies and small friends
Tiny Butterfly Blue butterflies (20 to 32px), with the odd kite, balloon or sparkle, tilted and scattered in the white space between sections.
- Two or three in view at a time, never in a row.
- Tilt each one between -20 and 20 degrees.
- Place them in gutters and gaps, never on top of text.
Dotted path
A curvy dotted or dashed line (2 to 3px, round caps) that links steps or divides quadrants, like a trail through a garden.
- Dots in Pebble at 40% on white; in white on pastel cards.
- Curves, never straight segments. End at an element, never mid-air.
Discover
Arch cup
A pastel circle with a white half-circle notch at the top, holding an illustration or photo that pops out above the rim.
- Use the step colours in order for a sequence.
- The figure overlaps the rim; the label sits inside the cup.
A peach band
Wavy band edge
Band tops and bottoms are a slow, low wave (20 to 40px tall), or a gentle convex curve.
- Never two different waves on one band.
- Match the wave colour exactly to the band.
Coral ribbon
A short coral banner with folded tails, holding two to four words under an avatar.
- One per card. Story Ink text on coral.
Arched heading
A spaced-out coral label set on a gentle arc over a centred avatar, such as MEET OUR HERO.
- Three words or fewer.
- Only above a centred, round element.
Doodle icons
Thin line icons (a star, a book, a pencil, a lightbulb) drawn in Periwinkle, used as a sticker in the corner of an insight card.
- One per card, top-right, slightly tilted.
Building blocks
Components
The standard set. Build new things from these before inventing a new one; when you do invent one, give it round corners, a soft shadow and one pastel.
Buttons
- Pill shape, 52px tall (44px small), 24px side padding, Fredoka 600 at 17px.
- Primary: Lagoon with white text and shadow-press. Secondary: white with a 2px Chalk Line outline and Story Ink text. Playful: Coral with Story Ink text.
- Hover lifts 2px; pressed removes the lip. Focus: a 3px Lagoon Bright ring offset by 3px.
Pills and tags
- Pill shape, 34px tall, Fredoka 500 at 15px, Story Ink on a step or ground colour.
- Outlined variant: white fill, 1.5px outline in the ground's accent.
Cards
Standard card
White, outline, soft shadow. The default container for anything.
Key insight
- Kids remember stories
- Parents want calm screens
Feature panel
A pastel fill and a plinth, like a toy block. Use one per section.
- radius-card, space-card padding, white fill, 1px Chalk Line outline, shadow-soft.
- Insight card: Lilac or Blush fill, no outline, a doodle sticker top-right.
- Feature panel: a pastel fill, radius-band, shadow-plinth.
Icon tiles
Learning through play
How children think
Interactive design
Content gaps
Big ideas
- Square white tile, radius-tile, shadow-soft, an illustration or icon on a small pastel square, a two-line label underneath.
- Lay them out in a row of four to six inside a peach or sky feature panel.
Numbered steps
- 1Visit the centre
- 2Meet the educators
- 3Try a play session
- 4Start the journey
- A 36px Peach circle, Marigold Deep number in Fredoka 600, the step text beside it.
Tabs
- A white pill track with a Chalk Line outline; the active tab is a filled pastel pill with shadow-soft.
Accordion
A hat, a water bottle and a change of clothes. We provide the rest.
- Each item is its own white card (radius-tile) with a 12px gap, not a divided list.
- The toggle is a 32px pastel circle with a plus, which turns into a minus. The open item takes a ground colour.
Form fields
- 52px tall, radius-chip, a Cream fill, 2px Chalk Line outline, Nunito at 17px.
- Focus: the outline turns Lagoon and a 4px Lagoon at 15% glow appears.
Comparison table
- Separate cells with 8px gaps: header cells in Sky, row heads in Peach, body cells white with shadow-soft.
- Every cell radius-chip; text Nunito 14px, centred.
Journey header
- Chevron tabs in Peach, overlapping like arrows, Fredoka 600 labels, the first tab flat on the left.
Charts
Stories
Games
Videos
Books
- Donuts with shadow-ring, segments in Lagoon Bright, Coral, Marigold and Periwinkle with 2px white gaps.
- Bars are rounded pills in Periwinkle on a Lilac track.
Quote
“The more you know about the past, the better prepared you are for the future.”
- Centred, Nunito 22px, key words in Fredoka 700 with a small drawn highlight; attribution in Pebble.
Put together
Section recipes
Where the style earns “premium”: not new effects, but the right few, layered with care. Each recipe below is a full section, built live, with its recipe beside it.
Process garden
- On white with the dot grid: five arch cups in step colours, zig-zagged, joined by a dotted path.
- Each cup: a character, a Fredoka label, and two to four small white chips.
How we learn together
Five small steps, one big adventure.
Discover
Define
Dream
Design
Develop
Peach plan band
- A Peach band with wavy top and bottom edges and paper grain.
- A white intro card, a row of icon tiles, then numbered steps in two columns.
- A dashed Marigold line runs down the left edge like a kite string.
Our plan for term one
Five focus areas
Stories
Feelings
Making
Wonder
Ideas
- 1Settling in (weeks 1–2)
- 2Our families (weeks 3–4)
- 3Growing things (weeks 5–7)
- 4Show and share (weeks 8–10)
Meet our hero
- A Seafoam band; inside it a Mint card with the doodle wallpaper and shadow-plinth.
- An arched coral heading over a round avatar with shadow-ring and a ribbon beneath.
- White notes around the avatar: facts, likes, needs and challenges.
About
Likes
Needs
Challenges
Says, thinks, does, feels
- A Mint card split into four by two white dotted curves that cross behind a central avatar.
- Coral labels in each corner, three short quotes under each.
Says
- “Read it again!”
- “Can it move or talk?”
Thinks
- Learning is fun when it's a game
- Pictures help me understand
Does
- Taps everything on the screen
- Gets bored with plain text
Feels
- Excited by colour and sound
- Proud when she gets it right
Gaps cloud
- A Blush band; outlined white pills scattered in two loose columns around a central figure.
- Each pill states one problem in a short line.
What gets in the way
Few stories in the child's own culture
Hard to explain the past to a four-year-old
Screens that shout instead of teach
Little link between history and feelings
No offline or multilingual options
Parents can't see progress
Sunny call to action
- A Butter panel with radius-band and plinth shadow, a big soft disc bleeding off one corner, a hand-written kicker, a display headline with one coral word, and one Lagoon button.
come and play!
Book a visit, bring your curiosity
Tours every weekday morning. Stay for a play session with your child.
Book a tourThe short version
Do and don't
Do
- ✓Keep the page mostly white; let one pastel band carry each chapter.
- ✓Change the ground colour at every section so the page reads as chapters.
- ✓Give every section one big soft shape, and keep it behind the content.
- ✓Use Story Ink for text on every pastel, and the deep accents for any small coloured text.
- ✓Round everything: corners, line caps and letterforms.
- ✓Leave generous space. Pastel needs air to look intentional.
Don't
- ✕Don't set body text in a pastel or in bright Coral or Marigold: it fails contrast.
- ✕Don't use pure black, hard drop shadows or sharp corners.
- ✕Don't put two big shapes in one section, or more than three small friends in view.
- ✕Don't use gradients between pastels; the style is flat colour with soft shadows.
- ✕Don't use neon or saturated primaries except in photographs.
- ✕Don't use straight connector lines; paths curve.
Hand it to an AI
Use this guide to make something new
The whole guide is also published as plain Markdown, with every colour, size, shadow and rule, for an AI to read. Give it the link below with a request such as “design an open-day flyer in this style”.
The brief
Design in the Playroom Pastel style: a mostly white layout split into chapters, each on its own flat pastel band (Sky #DCEFFB, Mint #D9F1E6, Seafoam #B6E0D5, Meadow #DFF2CB, Blush #FCDDE6, Peach #FEE7CC, Lilac #E7E5FC, Butter #FFF2C4) with wavy edges. Put one oversized pale shape (a five-petal flower, a cloud or a big disc) behind each section, bleeding off the edge. Headings in Fredoka 600 to 700, Story Ink #1E1B2E; body in Nunito, Slate Plum #4B4760; spaced-out coral (#E9705F) uppercase labels. White cards with 28px corners, a 1px #ECE9F3 outline and a soft wide shadow; pill buttons in Lagoon #1C7A72 with white text. Add small delights sparingly: tiny blue butterflies (#5AAEE3), curvy dotted paths joining steps, arch cups holding characters, a coral ribbon, doodle icons. Flat colour, round everything, lots of white space, no gradients, no black, no hard shadows.
Source: A children's history-learning case study (UX research and app design), seen as one long illustrated page. Published 30 September 2026.