---
version: alpha
name: "Speech therapist template by 8B"
description: "Children's speech and language therapy practice site in sky blue, deep indigo and cream, with serif headlines, pill buttons, arch-shaped photo windows and pinned scroll scenes. Free HTML template by 8B, MIT."
colors:
  primary: "#2f29a6"
  secondary: "#47457c"
  tertiary: "#c9dcf2"
  neutral: "#e6f0fb"
  surface: "#ffffff"
  on-surface: "#1d1b5e"
  cream: "#f2e8e0"
  mist: "#eef1f8"
typography:
  headline-display:
    fontFamily: Platypi
    fontSize: 57.6px
    fontWeight: 400
    lineHeight: 1.12
    letterSpacing: -0.015em
  headline-lg:
    fontFamily: Platypi
    fontSize: 54.4px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.015em
  headline-word:
    fontFamily: Platypi
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.02
    letterSpacing: -0.02em
  headline-sm:
    fontFamily: Miranda Sans
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Miranda Sans
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.5
  body-md:
    fontFamily: Miranda Sans
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: Miranda Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
  button:
    fontFamily: Miranda Sans
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1
  wordmark:
    fontFamily: Platypi
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.02em
rounded:
  sm: 16px
  md: 24px
  lg: 32px
  full: 999px
spacing:
  panel-inset: 12px
  card-gap: 12px
  gutter: 24px
  gutter-phone: 16px
  max-width: 1180px
  nav-height: 56px
  section-padding: 160px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: "0 25px"
    height: 52px
  button-primary-hover:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.on-surface}"
  button-small:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.full}"
    padding: "0 17px"
    height: 40px
  nav-link:
    backgroundColor: "{colors.mist}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
    padding: "0 13px"
    height: 34px
  card-help:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 26px
  card-quote-cream:
    backgroundColor: "{colors.cream}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    padding: 26px
  bubble-therapist:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "20px"
    padding: "12px 16px"
  bubble-parent:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.on-surface}"
    rounded: "20px"
    padding: "12px 16px"
  chip-day:
    backgroundColor: "{colors.mist}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
    height: 28px
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    padding: "12px 16px"
    height: 50px
---

# Pipit

## Overview

Pipit is a one-page site for a small children's speech therapy practice that books by phone. The idea is play, not clinic: a child's old word sits struck through beside the word it is heading for, with big soft panels, round windows and one indigo for every action. It is written for parents who are worried but not in a hurry, so it reads warm, calm and honest. All names, fees, registrations and the Exeter address are invented demo content.

## Colors

Sky blue and white, with one deep indigo for action.

- **Primary (#2f29a6):** every button, the therapist's message bubbles and the avatar, the tick icons, the lit word in the first-visit heading, the current place in the index, focus rings and the favicon.
- **Secondary (#47457c):** a muted indigo for leads, captions, age ranges, the speech half of the wordmark and the struck-through old words. It keeps above 6:1 contrast even on the sky tint.
- **Tertiary (#c9dcf2):** the top of the sky gradients (opening, menu overlay, contact panel), the button hover fill, form field borders (only about 1.4:1 on white, so darken them if the form must pass non-text contrast) and link underlines.
- **Neutral (#e6f0fb):** the bottom of those gradients, the first-visit panel, the parent's bubbles, the tint under each therapist card and the footer's base text.
- **Surface (#ffffff):** page background, nav bar, cards and form fields.
- **On-surface (#1d1b5e):** body text, headings and the footer background.
- **Cream (#f2e8e0):** the one warm note, used behind three of the six family quote cards.
- **Mist (#eef1f8):** the message-thread and fee panels, photo placeholders, icon buttons, weekday chips and card hairlines.

## Typography

Two faces carry the whole page. **Platypi**, a friendly serif, sets the wordmark, section headings, the child's words on the help cards, the price figures and the large menu links. **Miranda Sans** sets everything else: card titles, body, buttons, badges and form fields. Both load in a 400 to 600 range; headings use 400, titles and buttons 500, and 600 only the wordmark's first half.

Headings are sentence case with slight negative tracking and a line height near 1.1; there are no uppercase or tracked labels. Sizes use `clamp()`: the main heading runs from 32px on phones to 57.6px, section headings from 36px to 54.4px, the child's word on large help cards from 38px to 56px, card titles 20px to 24px, leads 17px to 19px. Captions are 14px, day chips 13px, fee prices Platypi at 28px.

## Layout

Content sits in a centered wrapper 1180px wide with 24px side gutters (16px under 600px). Bands alternate: ordinary sections have 96px to 160px of vertical padding, and six "panels" (the opening sky, first visit, message thread, places, fees and contact) are rounded fields inset 12px from the viewport edge.

Help is a six-column bento: two wide cards on top, three narrower below, 12px gaps. Therapists are four equal cards; places are four columns when the scroll scene is off; the play section is an offset twelve-column grid where the third photo drops 60px. Family quotes are three columns, the middle one starting 72px lower. At 1023px the nav links fold into a menu overlay and bentos become two columns; at 899px two-column sections stack; at 599px everything is one column, panel corners tighten to 26px and the inset to 8px.

## Elevation & Depth

Depth comes from soft tinted fields layered on white, then a single shadow token for lifted pieces: `0 14px 34px -18px` in the indigo at 45 percent. It lifts the nav bar, first-visit cards, the message thread, the fee list and the contact form. Help and therapist cards use a 1px mist border. Two soft radial glows drift inside the opening panel.

## Shapes

Shape is the signature. Buttons, the nav bar and chips are full pills. Panels are 32px, cards 24px, quote cards 32px, form fields 16px, message bubbles 20px with one 6px corner. Photos sit in windows: a stadium oval (an elliptical 40% / 50% radius), an arch with a fully rounded top and either a flat or a 24px-cornered base, a circle and a plain 24px rounded rectangle. Therapist portraits rise from the card base as arches. Cards and photos never have square corners.

## Components

- **button-primary:** 52px pill, indigo with white label and a small arrow. On hover a sky fill grows from the middle of the button and the arrow nudges right.
- **button-small:** the 40px nav and menu version.
- **nav-link:** 34px mist pills; a sky fill rises from the bottom on hover.
- **card-help:** white 24px card with a mist hairline, holding a serif child's word pair and an age line.
- **card-quote-cream:** quote notes in cream or a sky gradient, 32px corners.
- **bubble-therapist and bubble-parent:** right-aligned indigo against left-aligned pale blue.
- **chip-day:** 28px mist pills for working days.
- **input-field:** 50px white fields with a sky border; focus switches the border and ring to indigo.

## Motion

The page loads GSAP with ScrollTrigger and SplitText, plus Lenis for smooth scrolling. One idea runs through it: things settle into place, like pieces on a play mat.

- **Nav:** the pill bar slides up out of view after about 30px of downward scroll past 120px and returns after about 30px of upward scroll, near the top or on focus.
- **Opening:** the heading, lead and button rise 22px into place in turn on load, while two soft glows drift in a looping animation that pauses off screen.
- **Help:** each card travels in from below, tilted, and straightens as you scroll, then the old word is struck through and the new word rises.
- **First visit:** the section is pinned for about three screens. Each step card slides up over the one before, which shrinks slightly, and the matching word in the heading fills with indigo.
- **Play and team:** headings and captions rise once; each photo opens from a small pill window to full size while the image settles. Weekday chips pop in.
- **Message thread:** from 900px wide it is pinned for two screens; the first bubble is shown and the other five pop in one by one while the list lifts. On phones each bubble pops in as it scrolls into view.
- **Places:** pinned for three screens; each photo opens from a small pill while the previous text fades and a four-name index lights the current place.
- **Family quotes:** from 600px the three columns start 220, 60 and 320px low and rise at different speeds; on phones notes and photos slide in from alternating sides.
- **Contact:** the sky panel grows from a small stadium window to the full panel as you scroll, while the details and form rise.

With reduced motion the entrance, scroll and pinned animations switch off, the loops stop and Lenis is never created, so the page reads as a plain stack. Not everything stops: the nav still hides on downward scroll and returns on upward scroll, with its 0.5s slide, and the hover fills, link underlines, field borders and the open-and-close turn of the question icons still use CSS transitions. Keep the ids and classes AGENTS.md lists, and four word spans for four step cards.

## Do's and Don'ts

- Do use the one indigo for every button, bubble and highlight; let sky blue be background and hover fill only.
- Do keep headings in Platypi at regular weight and the rest in Miranda Sans.
- Do keep pills for controls and arches, circles and ovals for photos.
- Do keep the child's old word struck through beside the new one on help cards.
- Don't add uppercase labels, a third typeface or stock icons.
- Don't add square corners, hard shadows or dark panels beyond the footer.
- Don't add a second accent colour; cream is the only warm tone.
- Don't add a shared scroll effect on top of the scenes; each section already has its own.