# Brand colours & design tone

**Audience = parents (the decision-makers); child-friendly, not childish.**
The look should feel like a grown-up, trustworthy travel/lifestyle site
(Airbnb / National Trust quality) that happens to be about family days out:
warm, welcoming, calm and premium — NOT a primary-colour playground.

## Tone principles
- **Editorial & photographic** — real photos lead; emoji/illustration are
  light accents, never the main visual language.
- **Calm & confident** — generous whitespace, refined type, restrained colour.
- **Warm, not loud** — muted, natural, sophisticated warmth (earthy, outdoorsy)
  over bright saturated kid colours.
- **Trustworthy** — parents rely on this; it must look credible + well-made.

## Palette (sophisticated-but-warm)
| Role | Colour | Hex | Why |
|---|---|---|---|
| **Primary — Forest teal** | 🟢 | `#0F766E` | Trust, calm, nature, the outdoors. Grown-up + dependable; the brand anchor. |
| **Accent — Warm terracotta** | 🟧 | `#E2725B` | Warmth, friendliness, invitation, energy — used for CTAs + highlights, sparingly. Earthy, not neon. |
| **Soft gold** | 🟡 | `#E9B949` | Sunshine/optimism + ratings, as a refined highlight (not bright yellow). |
| **Go / free** | 🟩 | `#2F9E68` | "Free", nature, positive. |
| **Heart / save** | ❤️ | `#E2725B` | Favourite uses the terracotta accent (cohesive, warm, not alarm-red). |
| **Canvas — Warm cream** | ⬜ | `#FBF7F0` | Cosy, premium, welcoming — not clinical white. |
| **Surface — White** | ⬜ | `#FFFFFF` | Cards on the cream canvas. |
| **Text — Deep ink** | ⬛ | `#1F2A30` | Soft near-black, high readability, never harsh pure black. |
| **Muted text** | — | `#5C6B73` | Secondary info. |

## Why this works (psychology, grown-up framing)
- **Teal/green** = the most trustworthy + calming family of colours, and it
  signals nature/outdoors — perfect for "days out". Reads adult + credible.
- **Terracotta** delivers warmth + friendliness (the "come in, you're welcome"
  feeling) without the childish loudness of bright orange.
- **Cream canvas** feels cosy and premium (hospitality/travel sites use warm
  off-whites), softening the whole page.
- **Avoid:** saturated primary orange/red/yellow blocks, cartoonish gradients,
  heavy emoji — they read "for kids" not "for parents".
- Child-friendliness comes from **warmth, rounded shapes, friendly photos and
  copy** — not from bright kindergarten colours.

## Accessibility & seasonal
- High contrast; colour never the only signal (helps SEND persona + WCAG AA).
- Seasonal accent shifts (festive, spring pastels, autumn ambers) stay as
  accents; the teal/terracotta/cream core is constant.
- **Text-safe ink variants (warp#10596):** `--free` (#2F9E68) and `--terra`
  (#E2725B) are the brand hues for fills / chips / tints, but as TEXT on the
  cream canvas they fall below WCAG AA (--free 3.4:1, --terra 3.1:1). The
  darker `--free-ink` (#0F7E48) and `--terra-ink` (#C2523B) keep the hue and
  lift text usages to AA: 5.1:1 / 4.6:1 on cream; `--free-ink` on
  `--free-tint` 4.6:1; `--terra-ink` on `--terra-tint` 4.2:1 — that last pair
  is large/bold-text-only (≥3:1), not body copy. Rule: use the brand hue for
  fills/backgrounds; use the `-ink` variant when the colour is the text
  colour. Cream ink on a `--terra` fill (CTA pills) stays 3.1:1 — a darker
  CTA fill is an open design decision; until then the affected stories keep
  their axe color-contrast scoping (see PillButton.stories.ts).

## Tokens
All become `--ds-*` tokens; no raw hex in components (gyrum design discipline).