Sprout

Best for

• Childcare centres, kindergartens and family day care. It's written to the Child Care Subsidy, National Quality Framework and child safety expectations (see "Childcare: what we build in").
• Anyone who groups little ones (or not-so-little ones) by age and books by the day:
  • dog daycare (Waggle: groups by age, a handler for every eight dogs, days with room)
  • swim schools (Splash: levels by age with teacher ratios, afternoons with places)
  • outside school hours care, playgroups, holiday programs, kids' sport
• Audiences: parents comparing centres on real costs, and families who want to see the rooms, the ratios and the rating before they visit.

Less suited to: a school's whole website, an online course (Primer), or a children's health clinic (Pebble).

Personality and voice

Warm and reassuring, like the educator who greets you at the gate, and straight about money and quality.

• Headlines: "A second home, with a big backyard." · "A room for every age." · "How we're rated."
• Buttons: "Check places" · "Tour the rooms" · "Join the waitlist"
• Microcopy:
  • "You'd pay about $34.37 a day."
  • "At the start date they'll be 2 years 6 months old: the Possums room."
  • "Friday: waitlist, about 3 families ahead. Saying no keeps your spot."
• Words to avoid: "free childcare" when it isn't, "only $X a day" without the income it assumes, a rating without the date it was assessed, and "limited places!" that aren't.

Colour

Measured contrast (WCAG).

• Playtime:
  • ink on paper 15.3:1
  • muted on paper 6.0:1 (5.5:1 on well)
  • pond on paper 7.0:1 (6.5:1 on well, 6.2:1 on its soft fill), white on pond 7.2:1
  • ink on sunshine 11.0:1, ink on coral 8.0:1; sunshine text 6.1:1
  • alert on paper 5.9:1
• Nap time:
  • ink 16.2:1
  • muted 7.8:1 (7.0:1 on card)
  • pond 10.5:1, text on pond 8.7:1, pond on its soft fill 7.9:1
  • sunshine 12.8:1, alert 9.0:1
• Example dials: grass (Waggle), pool blue (Splash) and gum-leaf green (Treetops) all meet AA, and so does each closing card.

Typography

• Display: Nunito, 500–900. Rounded and friendly; headlines, room names, the gap fee.
• Body: Be Vietnam Pro, 400–700. Clear for reading, forms and buttons.
• Mono: Sono, 400–600. Fees, times, ratios.

The signature move: the lit words turn pond blue and a wobbly sunshine crayon line scribbles itself in underneath.

Layout

• Frame: a 1200px wrap with a max(20px, 4vw) gutter. An ink top line with a sunshine pill for tours or places; a sticky header with the sprout mark.
• Hero: copy on the left; the subsidy estimate on the right.
• Then: rooms with the birthday finder; the places board beside a day in the room; the quality rating; child safety; straight answers; and a deep closing card with painted blobs bobbing along the bottom.

Shape

• Round and soft: --r-s 12px, --r-m 18px, --r-l 28px.
• Rooms: a painted blob of colour with the room's initial, like a name card on a cubby.
• The mark: a sprout, two leaves on a stem.

Motion language

• Estimate: the gap fee pops when anything changes.
• Rooms: the matching room lifts with a "Your child's room" tag; the others fade back; blobs wobble on hover.
• Places: chosen days get a tick.
• Elsewhere: the crayon line scribbles under the headline, the closing card's blobs bob, sections reveal with a 14px rise over 650ms, and the phone menu drops in.
• Motion switch in the footer ([data-motion-toggle], html.calm, remembered as site-motion, with the default from prefers-reduced-motion). Calm stops the scribble, pops, wobble and bobbing.
• Nap time switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

Photos of children only with their families' written consent, taken on the service's own devices, and never with names or faces that identify them without permission. The template uses painted shapes instead, and no invented parent testimonials.

Signature components

• Estimate: .ccs[data-ccs] with data-cap, data-base, data-step, data-guarantee, data-higher, data-hours, data-withhold and data-for="<places id>", containing input[data-income], button[data-days], input[data-fee], input[data-younger], input[data-active], [data-gap-day] and [data-ccs-lines].
• Rooms: [data-rooms] with input[data-dob], input[data-start], [data-age-out] and .room[data-min-months][data-max-months] (--rc for its colour), each with .blob, .ages, h3 and .ratio (.dots).
• Places: .places[data-places] (optional data-pick) with script[data-places-data] (places per room per weekday and families ahead), select[data-places-room], [data-days-out] and [data-places-out].
• Rating: .nqs with .nqs-overall and .qa (each area's rating as em.ex, em.me or em.wt).
• Supporting pieces: .dayline, .pricelist, .card, .facts, .notice, .side-box, .faq, .close-card (--close-bg, --close-em).

Multi-page kit

• Phone menu: .menu-btn[aria-controls] opens .site-menu. Escape, an outside click or choosing a link closes it, and Tab stays inside while it's open.
• Current page: aria-current="page", shown as a pond-soft pill.
• Inner pages: .page-head (a sunshine glow and two painted circles), .crumbs, a .tag and a smaller .h1.
• Fields: .field, .fields, .field-wide, fieldset.field-set, .check, .form-card, [aria-invalid="true"]; form[data-template].
• Tiles, segmented control, gate, slider, switch, tables: .choices, .seg, [data-gate], input.range, .switch[role=switch], .table.
• Events: ccs (pct, days, gapDay, gapFortnight), room (months, room), places (room, days).
• Helper: Sprout.refresh(root).

Childcare: what we build in

We checked these for Australian early childhood services in October 2026:

• The Child Care Subsidy, 2026–27. The estimate uses the centre-based day care hourly cap of $15.19 from 6 July 2026; 90% for family incomes up to $88,520, falling 1% for each $5,000 above and reaching nothing at $538,520; 30 percentage points more (up to 95%) for younger children when an older one aged 5 or under is in care; at least 72 subsidised hours a fortnight for everyone under the 3 Day Guarantee (from 5 January 2026), and up to 100 with the activity test; and the 5% Services Australia withholds. It's labelled an estimate: the real figure comes from Services Australia.
• Ratings, shown properly. Services must display their National Quality Standard rating. The rating card shows the overall rating, the date, and all seven quality areas, including any "Working Towards".
• Ratios. National ratios are 1:4 from birth to 24 months, 1:5 from 24 to 36 months, and 1:11 for over-threes in most states (1:10 in New South Wales). Rooms show their ratio.
• Child safety. Working with Children Checks (a Blue Card in Queensland) for every adult, photos only on service devices, and a clear way to raise concerns, including directly with the regulator.

These notes are design guidance, not legal or financial advice.

• CCS income thresholds 2026–27 (CCS Checker, citing the Department of Education)
• How the Child Care Subsidy works, 2025–26 (Childcare Estimator)
• 2026 hourly rate cap increase (Rise and Shine)
• Display of information (Queensland early childhood regulation)

Do and don't

• Do show the gap fee for a real family, with the income it assumes.
• Do show the whole rating, not just the best areas.
• Do tell families how many are ahead on the waitlist.
• Don't call care "free" unless it is.
• Don't use children's photos without written consent.
• Don't put text on sunshine or coral in anything but ink.

Accessibility

• AA contrast throughout (measured above), a skip link and a 3px focus ring.
• Estimate: labelled sliders with their values, the days as a segmented control, and the result announced politely.
• Rooms: labelled date fields; the result names the room in words.
• Places: each day is a toggle button whose label says the places or the waitlist position; the summary is announced.
• Rating: a list with each area's rating in words.
• Testing: responsive to 360px, and tested with motion on and off, in Playtime and Nap time.

How to make it yours