# Playroom Pastel: a KoalaDigital style guide

Soft pastel bands, oversized petals, butterflies and dotted paths: playful, warm and calm.

Source: https://koaladigital.com.au/style-guides/playroom-pastel
Updated: 30 September 2026

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.

## Brief for an AI

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.

## What it looks like

- Mostly white, with long full-width bands in pastel: sky, mint, seafoam, meadow, blush, peach and lilac. Each band is one chapter.
- One oversized, pale shape per section (a five-petal flower, a cloud or a big circle), bleeding off the edge, behind the content.
- Headings 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.
- Content sits on white or pastel cards with large rounded corners, a thin lighter outline and a wide, soft shadow.
- Small, scattered delights: a blue butterfly, a kite, a balloon, a sparkle. Never more than two or three in view at once.
- Dotted and dashed curvy lines join steps together, like a path through a garden.
- Characters and photos sit inside "arch cups": a pastel circle with a white notch at the top, so the figure pops out of it.
- Band edges are wavy or softly curved, never a hard straight cut.
- Pastel pills mark steps and tags; small peach number circles mark lists.
- Tables are made of separate rounded cells with gaps between them, a pastel header row and a white body.

**Mood:** Playful, Gentle, Curious, Organised, Warm, Trustworthy for parents

**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

## Colour

### Paper and ink

White carries most of the page. Ink is a deep plum-navy, softer than black.

| Name | Token | Hex | Role |
|---|---|---|---|
| Paper White | --pp-paper | #FFFFFF | Page background, cards |
| Cream | --pp-cream | #FFFBF3 | Quiet alternate band, warm card |
| Story Ink | --pp-ink | #1E1B2E | Headings and key text |
| Slate Plum | --pp-body | #4B4760 | Body text |
| Pebble | --pp-muted | #6B6781 | Captions, meta, helper text |
| Chalk Line | --pp-line | #ECE9F3 | Hairlines and card outlines |

### Pastel grounds

For bands, cards and fills, never for text. Use one ground per section, and change it at every section.

| Name | Token | Hex | Role |
|---|---|---|---|
| Sky | --pp-sky | #DCEFFB | Research, calm information |
| Mint | --pp-mint | #D9F1E6 | Profiles, growth, success |
| Seafoam | --pp-seafoam | #B6E0D5 | Deeper mint band behind mint cards |
| Meadow | --pp-meadow | #DFF2CB | Fresh, outdoors, a second green |
| Blush | --pp-blush | #FCDDE6 | Problems, gaps, feelings |
| Peach | --pp-peach | #FEE7CC | Plans, steps, warmth |
| Lilac | --pp-lilac | #E7E5FC | Insights, ideas, quiet emphasis |
| Butter | --pp-butter | #FFF2C4 | Highlights, sunny notes |

### Crayon accents

Small amounts only. The bright versions are for shapes and large display type; the deep versions are for text.

| Name | Token | Hex | Role |
|---|---|---|---|
| Coral | --pp-coral | #E9705F | Display labels, ribbons, the one hot spot |
| Coral Deep | --pp-coral-deep | #B9473A | Coral for small text on light grounds |
| Marigold | --pp-marigold | #F2A43A | Sunny display words, stars, kites |
| Marigold Deep | --pp-marigold-deep | #8C560E | Marigold for small text |
| Lagoon | --pp-lagoon | #1C7A72 | Primary buttons, links, focus |
| Lagoon Bright | --pp-lagoon-bright | #3DB2A6 | Illustration, chart fills, outlines |
| Periwinkle | --pp-peri | #7E73E6 | Charts, doodle icons |
| Butterfly Blue | --pp-butterfly | #5AAEE3 | Butterflies, clouds, sky details |

### Step pills

A fixed sequence for five-step processes, always in this order, always with Story Ink text.

| Name | Token | Hex | Role |
|---|---|---|---|
| Step 1 · Wisteria | --pp-step-1 | #E3D3F8 | First step |
| Step 2 · Sunflower | --pp-step-2 | #FFD978 | Second step |
| Step 3 · Spearmint | --pp-step-3 | #BCE8D3 | Third step |
| Step 4 · Apricot | --pp-step-4 | #F9C9A5 | Fourth step |
| Step 5 · Bluebell | --pp-step-5 | #C6CBF7 | Fifth step |

### Text on background

| Background | Text | Contrast | Use |
|---|---|---|---|
| Paper White #FFFFFF | Story Ink #1E1B2E | 16.8:1 (AAA) | Headings and body anywhere |
| Paper White #FFFFFF | Slate Plum #4B4760 | 8.9:1 (AAA) | Long body text |
| Paper White #FFFFFF | Pebble #6B6781 | 5.4:1 (AA) | Captions and meta |
| Paper White #FFFFFF | Coral #E9705F | 3.0:1 (Large only) | Display labels only: 24px and up, bold |
| Paper White #FFFFFF | Coral Deep #B9473A | 5.2:1 (AA) | Small coral text, links in a coral section |
| Paper White #FFFFFF | Lagoon #1C7A72 | 5.2:1 (AA) | Links and text buttons |
| Sky #DCEFFB | Story Ink #1E1B2E | 14.2:1 (AAA) | Everything on a sky band |
| Mint #D9F1E6 | Slate Plum #4B4760 | 7.5:1 (AAA) | Body text on a mint card |
| Blush #FCDDE6 | Story Ink #1E1B2E | 13.3:1 (AAA) | Everything on a blush band |
| Peach #FEE7CC | Marigold Deep #8C560E | 5.1:1 (AA) | Warm small labels on peach |
| Lilac #E7E5FC | Slate Plum #4B4760 | 7.2:1 (AAA) | Insight lists on lilac |
| Lagoon #1C7A72 | Paper White #FFFFFF | 5.2:1 (AA) | Primary button |
| Coral #E9705F | Story Ink #1E1B2E | 5.6:1 (AA) | Coral button, coral ribbon |
| Marigold #F2A43A | Story Ink #1E1B2E | 8.1:1 (AAA) | Sunny badge, sticker |

## Type

- **Display:** Fredoka (500, 600, 700), fallback 'Baloo 2', 'Nunito', system-ui, sans-serif. Rounded terminals and chunky weight: friendly without being childish.
- **Body:** Nunito (400, 600, 700, 800), fallback system-ui, -apple-system, 'Segoe UI', sans-serif. Rounded, open and very readable at small sizes; sits happily under Fredoka.
- **Hand:** Caveat (500, 700), fallback 'Patrick Hand', cursive. For notes in the margin, arrows and scribbles, like the brainstorming pages. One or two lines at a time.

| Token | Font | Size | Line height | Weight | Use |
|---|---|---|---|---|---|
| display-xl | display | 64px | 1.02 | 700, tracking -0.02em | Hero headline, one per page |
| display | display | 44px | 1.08 | 700, tracking -0.01em | Section headline |
| title | display | 30px | 1.15 | 600 | Card group heading, poster subhead |
| heading | display | 22px | 1.25 | 600 | Card title |
| label | display | 14px | 1.2 | 600, tracking 0.22em, uppercase | Coral labels: SAYS, THINKS, MEET OUR HERO |
| lead | body | 20px | 1.6 | 400 | Intro paragraph |
| body | body | 17px | 1.65 | 400 | Paragraphs and lists (16px minimum on phones) |
| small | body | 14px | 1.5 | 600 | Captions, meta, table cells |
| hand | hand | 26px | 1.2 | 500 | Margin notes, arrows, stickers |

## Shape, shadow and space

- **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
- **shadow-soft** `0 1px 2px rgba(30,27,46,.04), 0 10px 28px -12px rgba(30,27,46,.14)`: Default card on white
- **shadow-float** `0 2px 4px rgba(30,27,46,.04), 0 24px 48px -20px rgba(30,27,46,.24)`: The one card that should lift: a hero device, a modal
- **shadow-plinth** `0 6px 0 rgba(30,27,46,.06), 0 18px 34px -18px rgba(30,27,46,.22)`: Big feature panels; a solid step under the card like a toy block
- **shadow-tint** `0 14px 28px -14px rgba(233,112,95,.45)`: Coloured cards: the shadow takes the card's colour (coral shown)
- **shadow-ring** `0 0 0 10px #FFFFFF, 0 22px 44px -18px rgba(30,27,46,.22)`: Charts, avatars and round badges: a thick white ring plus a soft drop
- **shadow-press** `inset 0 -3px 0 rgba(30,27,46,.14)`: Buttons: a soft bottom lip, removed when pressed
- **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 1200px`: Page side gutter

## Graphic elements

### 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.

### 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.

### 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.

### 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.

## Textures

### 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.

### 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.

## Components

### 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

- 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

- 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

- A 36px Peach circle, Marigold Deep number in Fredoka 600, the step text beside it.

### Accordion

- 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.

### Tabs

- A white pill track with a Chalk Line outline; the active tab is a filled pastel pill with shadow-soft.

### 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

- 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

- Centred, Nunito 22px, key words in Fredoka 700 with a small drawn highlight; attribution in Pebble.

## Section recipes

### Petal hero

- White background; a huge Sky petal flower bleeding off the top-left.
- A centred quote or promise, then a display-xl headline with one word in Coral.
- Two butterflies and a sparkle in the margins. One primary and one secondary button.

### 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.

### 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.

### 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.

### 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.

### 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.

### 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.

## 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.

## Tokens as CSS

```css
:root {
  --pp-paper: #FFFFFF; /* Paper White: Page background, cards */
  --pp-cream: #FFFBF3; /* Cream: Quiet alternate band, warm card */
  --pp-ink: #1E1B2E; /* Story Ink: Headings and key text */
  --pp-body: #4B4760; /* Slate Plum: Body text */
  --pp-muted: #6B6781; /* Pebble: Captions, meta, helper text */
  --pp-line: #ECE9F3; /* Chalk Line: Hairlines and card outlines */
  --pp-sky: #DCEFFB; /* Sky: Research, calm information */
  --pp-mint: #D9F1E6; /* Mint: Profiles, growth, success */
  --pp-seafoam: #B6E0D5; /* Seafoam: Deeper mint band behind mint cards */
  --pp-meadow: #DFF2CB; /* Meadow: Fresh, outdoors, a second green */
  --pp-blush: #FCDDE6; /* Blush: Problems, gaps, feelings */
  --pp-peach: #FEE7CC; /* Peach: Plans, steps, warmth */
  --pp-lilac: #E7E5FC; /* Lilac: Insights, ideas, quiet emphasis */
  --pp-butter: #FFF2C4; /* Butter: Highlights, sunny notes */
  --pp-coral: #E9705F; /* Coral: Display labels, ribbons, the one hot spot */
  --pp-coral-deep: #B9473A; /* Coral Deep: Coral for small text on light grounds */
  --pp-marigold: #F2A43A; /* Marigold: Sunny display words, stars, kites */
  --pp-marigold-deep: #8C560E; /* Marigold Deep: Marigold for small text */
  --pp-lagoon: #1C7A72; /* Lagoon: Primary buttons, links, focus */
  --pp-lagoon-bright: #3DB2A6; /* Lagoon Bright: Illustration, chart fills, outlines */
  --pp-peri: #7E73E6; /* Periwinkle: Charts, doodle icons */
  --pp-butterfly: #5AAEE3; /* Butterfly Blue: Butterflies, clouds, sky details */
  --pp-step-1: #E3D3F8; /* Step 1 · Wisteria: First step */
  --pp-step-2: #FFD978; /* Step 2 · Sunflower: Second step */
  --pp-step-3: #BCE8D3; /* Step 3 · Spearmint: Third step */
  --pp-step-4: #F9C9A5; /* Step 4 · Apricot: Fourth step */
  --pp-step-5: #C6CBF7; /* Step 5 · Bluebell: Fifth step */
  --radius-chip: 12px;
  --radius-tile: 20px;
  --radius-card: 28px;
  --radius-band: 48px;
  --radius-pill: 999px;
  --radius-arch: 50%;
  --shadow-soft: 0 1px 2px rgba(30,27,46,.04), 0 10px 28px -12px rgba(30,27,46,.14);
  --shadow-float: 0 2px 4px rgba(30,27,46,.04), 0 24px 48px -20px rgba(30,27,46,.24);
  --shadow-plinth: 0 6px 0 rgba(30,27,46,.06), 0 18px 34px -18px rgba(30,27,46,.22);
  --shadow-tint: 0 14px 28px -14px rgba(233,112,95,.45);
  --shadow-ring: 0 0 0 10px #FFFFFF, 0 22px 44px -18px rgba(30,27,46,.22);
  --shadow-press: inset 0 -3px 0 rgba(30,27,46,.14);
  --space-section: clamp(72px, 10vw, 128px);
  --space-card: clamp(20px, 3vw, 32px);
  --space-gap: clamp(16px, 2.4vw, 28px);
}
```