---
version: alpha
name: "Daycare template by 8B"
description: "A one-page daycare and nursery website in soft pastel slabs with pill buttons and squash-and-roll scroll motion. Free HTML template by 8B, MIT."
colors:
  primary: "#7A5BD0"
  secondary: "#AE9AEA"
  tertiary: "#C93A72"
  neutral: "#F6EADA"
  surface: "#FDF8F1"
  on-surface: "#4A2A1F"
  on-primary: "#FFFFFF"
  caption: "#7B5C4F"
  accent-pink: "#E2588B"
  mint: "#BFE6B0"
  butter: "#F6D167"
  blush: "#F8C8D9"
  logo-green: "#A6D996"
typography:
  headline-lg:
    fontFamily: Gabarito
    fontSize: 68px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: -0.02em
  price:
    fontFamily: Gabarito
    fontSize: 56px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Gabarito
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.005em
  wordmark:
    fontFamily: Gabarito
    fontSize: 26px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: -0.02em
  body-lg:
    fontFamily: Google Sans
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.5
  body-md:
    fontFamily: Google Sans
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.55
  label-lg:
    fontFamily: Google Sans
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.25
  label-md:
    fontFamily: Google Sans
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.45
  label-sm:
    fontFamily: Google Sans
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.2
  button:
    fontFamily: Google Sans
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.2
rounded:
  sm: 18px
  md: 24px
  lg: 32px
  xl: 48px
  full: 999px
spacing:
  gutter: 32px
  container-max: 1240px
  gap: 22px
  slab-padding: 64px
  section-y: 140px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 9px 9px 9px 28px
    height: 62px
  button-book:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.full}"
    padding: 7px 22px 7px 7px
    height: 48px
  nav-bar-floating:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
    padding: 10px 12px 10px 20px
  nav-link-active:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.full}"
    padding: 11px 18px
  card-slab:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    padding: 34px
  room-ground-mint:
    backgroundColor: "{colors.mint}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    padding: 14px
  badge:
    backgroundColor: "{colors.butter}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 6px 14px
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    padding: 14px 18px
    height: 54px
  date-pill-selected:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.full}"
    padding: 10px 18px 10px 12px
---

## Overview

Mallow House is a one-page website for a day nursery, preschool or childminder: four rooms by age, a settling-in plan, a weekly lunch menu, three fee cards and an open-morning form. The design idea is that every surface looks pressed from soft dough. Colour comes in soft pastel slabs on a warm cream ground, every corner is round, and the heavy Gabarito headings stay friendly. The mood is warm, tidy and playful, never loud. All names, prices, hours and the address in the demo are invented.

## Colors

The page is a cream ground with four pastel grounds, a violet and a deep pink for actions, and two browns for text.

- **Primary (#7A5BD0):** violet. The main buttons and the chosen date pill, with white text.
- **Secondary (#AE9AEA):** lilac. The first logo dot, the Buds room, the fee tray, the settling fill bar, the menu, the footer, the plus discs in the questions and the active nav link.
- **Tertiary (#C93A72):** deep pink, only for the Book a visit button in the bar and menu.
- **Neutral (#F6EADA):** the page ground.
- **Surface (#FDF8F1):** lighter cream for cards: settling steps, questions, fee plans, form fields, lunch days, date pills, the floating nav bar, the menu links and the round icon buttons.
- **On-surface (#4A2A1F):** a warm brown for headings, body text and focus outlines. **Caption (#7B5C4F)** is the softer brown for dish lines, the price units and contact facts. White (on-primary) sets the text on violet and pink buttons.
- **Mint (#BFE6B0), butter (#F6D167), blush (#F8C8D9):** the other slab grounds. Mint is the Blooms room, the garden slab and the booking form. Butter is the Meadow room, the lunch slab and the small badges. Blush is the Shoots room, the making table and the settling stage.
- **Accent pink (#E2588B):** only the second dot of the logo mark and the low wash under text links that fills on hover.
- **Logo green (#A6D996):** only the third dot of the logo mark.

A second green, #3E9A55, is declared but unused.

## Typography

Gabarito carries every heading at weight 800 (room and card titles at 700). Google Sans is the body face at 400 to 700 for text, buttons, badges and form fields (fields at 16px, weight 400). Both load as font-face files with a metric-matched fallback.

- The h1 and section headings scale from 38px to 68px (`clamp`, line height 1, tracking -0.02em). The same level at 40 to 56px sets the fee prices.
- Leads run 18 to 21px, body text 17px, notes 15px at weight 500.
- Labels, badges and button text are bold (700). Text is sentence case everywhere.
- The footer wordmark is Gabarito 800 at -0.035em, sized from the container width and the character count in `--len`.

## Layout

One centred column, 1240px wide, with a fluid gutter of 12 to 32px. Section padding runs from 32 to 160px: the coloured slabs (making table, lunch) sit closer, the open sections (garden, settling, questions) get more air. The first screen holds the h1, a lead and a Book a visit button above four room columns of rising height (76, 84, 92 and 100 percent), each a different colour. Below come a six-photo making table, a garden slab, four settling steps beside a sticky portrait stage, a lunch slab, a questions list, three fee cards on a lilac tray, and a booking form beside the contacts.

At 899px and below, columns stack. The rooms become single-row cards with a 104px photo, keeping their staggered widths (79, 86, 93 and 100 percent). At 1023px the nav links collapse into a round menu button; at 559px the bar's Book button is hidden.

## Elevation & Depth

Depth comes from soft inner shadows that read as pressed dough, not from heavy drop shadows. Slabs and cards use a white highlight on the top edge, a pale inner glow along the top left and a brown-tinted inner shadow along the lower right, plus a long soft drop. Buttons and badges use a smaller version, pressed states a flatter one, and photo frames a plain drop shadow. The garden boots photo sits rotated by 5 degrees over the corner of the main photo.

## Shapes

Pill radius (999px) on buttons, badges, the nav bar and links. Room grounds, settling steps and fee plans are 32px; the section slabs, the booking form, the fee tray, the settling stage, the big photos and the footer top are 48px; question rows, lunch days and menu links are 24px; form fields are 18px. Photos inside rooms are 22px, craft photos 28px with a 6px cream border, and the garden boots photo 30px with 8px. The lunch bowls and settling portraits are perfect circles with a white border; keep them square in the markup so the roll stays round.

## Components

- **button-primary:** violet pill with a round white arrow disc on its right; the disc turns on hover.
- **button-book:** the deep pink pill with a calendar disc.
- **nav-bar-floating:** transparent at the top, a cream pill after 40px of scrolling; a lilac pill grows behind the link of the section in view (**nav-link-active**).
- **card-slab:** cream card for steps, questions and plans; rooms and big slabs use the pastel grounds instead.
- **badge:** butter pill for ages and times; mint pills for the craft tags and the nut-free note.
- **input-field:** cream field with a 3px brown focus outline.
- **date-pill-selected:** the open-morning radio as a pill; the chosen one turns violet and squashes a little.

## Motion

The page loads GSAP 3.13, ScrollTrigger and Lenis. The one idea is squash and roll: things arrive like soft dough, overshoot and settle, on `back.out` and springy cubic-bezier easings.

- **Navigation:** the bar slides up and away when you scroll down more than 24px past the first 160px, and returns on scroll up or focus. Round icon buttons squash on hover, and buttons spring to about 1.03 wide and 0.93 tall in 0.45s.
- **Rooms:** on load the heading block rises in turn, the four grounds grow from a thin sliver (from the bottom on desktop, from the left on phones) and each room's contents rise after them, 0.16s apart.
- **Making:** six craft photos start piled at the table centre, turned and shrunk, and roll out to the grid as you scroll.
- **Garden:** the slab swells from its lower left corner; the boots photo and badges drop in with a squash.
- **Settling:** while the four steps scroll by, the parent's portrait shrinks away, the key person moves in beside the child, dashed lines stretch with them and a lilac fill runs along the active step.
- **Kitchen:** each bowl photo rolls in from the left edge of the slab, turning, then squashes as it lands.
- **Questions, form, visit photo, footer wordmark:** each presses in once when it reaches 88 percent of the viewport.
- **Fees:** the three cards start stacked as one small lump on a shrunken tray; the tray stretches and the cards slide apart and press down.

Reduced motion switches off Lenis smooth scrolling, all scroll scenes, the one-time press and swell entrances and the load-in on the first screen, and the page reads in full. It does not remove everything: the nav bar still hides on scroll down, and the spring transitions on button, link, nav and question hovers still run. 

Keep the ids, the `data-8b-section`, `data-8b-motion` and `data-8b-part` attributes, the garden's `data-swell-origin` and the scene class names listed in AGENTS.md; update `--len` when the name changes.

## Do's and Don'ts

- Do keep every corner round: pills for controls, 32px for cards, 48px for slabs.
- Do keep text in the two browns, with white only on violet and pink buttons; never use black or grey.
- Do give each new slab one pastel ground from the set, and put violet only on the main action.
- Do keep arrivals soft: squash and overshoot, then settle.
- Don't add sharp edges, thin borders, hard black shadows or uppercase labels.
- Don't add a third typeface, stock icons or gradients.
- Don't put more than one deep pink button in view.
- Don't stretch the round bowl and portrait photos into rectangles.
- Don't leave the invented ratios, fees or funding rules in a real site.