# Tommy's — Brand Spec **Source:** https://www.tommys.org/ (Wayback snapshot 2026-01-01) **Captured:** 2026-05-14 **One-line:** UK's largest pregnancy & baby loss charity — research-led, hopeful, plain-spoken. --- ## At a glance Tommy's funds pregnancy research and provides midwife-led information + bereavement support across miscarriage, stillbirth, neonatal loss, premature birth, ectopic, molar, and termination for medical reasons (TFMR). Owner-operator of the London Marathon. Funds £2M+ of research every year. The brand reads as **clinical-warm**: scientific in substance, plain-spoken in tone, and unmistakably hopeful in posture — "turn heartbreak into hope." If RTZ Hope is the literary-grief sister and Sands is the UK bereavement institution, **Tommy's is the research charity that's also a kitchen-table friend.** It signposts, it informs, it asks you to act — and it never sounds clinical the way a hospital does. ## Service / content pillars 1. **Research projects** — £2M+/year into miscarriage, stillbirth, premature birth, ectopic, molar 2. **Pregnancy resources** — Midwife-led information, tools, calculators 3. **Baby loss support** — Miscarriage, stillbirth, neonatal death, ectopic, molar, TFMR; partner support; dads & partners; pregnancy loss statistics; stories 4. **Get involved** — Brighton Marathon, Royal Parks Half, Tommy's Walk of Hope, Tea for Tommy's, do-your-own fundraising, fundraise in memory 5. **Campaigns / policy** — "Projecting Life", bereavement-leave consultation responses, government policy responses 6. **Donate** — Inline £10/£20/£40 monthly + one-off £25/£50/£100, with "reason for giving" dropdown 7. **About / impact / strategy** — Our story, what we believe, midwives, research experts, ambassadors, trustees, work for us ## Voice anchors (quote verbatim) - "Saving babies' lives." *(site title cap)* - "Preventing a lifetime of loss." *(hero H1)* - "The impact of pregnancy and baby loss can last a lifetime. Our research is here to change that." - "But we can't do this alone. We need your support to fund the research and care families rely on." - "Half of UK adults have experienced baby loss or know someone who has. But it doesn't need to be this way." - "How research changes lives." *(button copy)* - "Turn heartbreak into hope." *(donate copy)* - "Each donation takes us one step closer." - "We're here for anyone who's lost a baby — whether through miscarriage, stillbirth, neonatal death or any other reason." - "Thank you to the parents who are helping to break the silence." **Tone profile** - UK English: "fundraise", "centre", "midwife-led", "£20 a month", "have your say" - Curly apostrophe in **Tommy's** (Unicode `'`, not straight `'`) - Em-dash for attribution: `—Shema Tariq` - Quotes spell out exact donation amounts (£25 / £50 / £100) - Direct second person ("your support", "you need") - Hopeful & active verbs: *preventing, saving, funding, changing, breaking* - Never euphemises loss — names it plainly (miscarriage, stillbirth, neonatal death) ## Forbidden moves - ❌ Hospital-clinical register (no "patients", no "intervention pathways") - ❌ Sympathy clichés ("sorry for your loss", "thoughts and prayers") - ❌ Squarespace-style centered hero with translucent overlay - ❌ Square buttons (radius < 24px feels off-brand) - ❌ Mixing the raspberry with a competing warm hue — raspberry stands alone - ❌ Dropping the curly apostrophe in **Tommy's** --- ## Color palette (production-extracted) | Token | Hex | RGB | Role | |---|---|---|---| | **Raspberry** | `#BD2269` | `189, 34, 105` | Primary brand. Hero color block, pills, link accents. Stands alone. | | **Navy** | `#153057` | `21, 48, 87` | Footer, body-link, primary button bg, structural. | | **Mint** | `#71EBB7` | `113, 235, 183` | Donate / primary CTA. Surprise of color in white space. | | **Lilac** | `#5E6BDE` | `94, 107, 222` | Secondary CTA. Used on Brighton Marathon style blocks. | | **Ink** | `#3A3B3C` | `58, 59, 60` | Body copy. Near-black, slightly warm. | | **White** | `#FFFFFF` | — | Page background. | | **Stone** | `#B8B8B8` | `184, 184, 184` | Card borders, hairlines. | | **Cream tint** | `#FAF3EF` | — | Optional warm-paper alternate (extracted from Plum & Ashby partnership materials). | ### Pairings (do) - Raspberry block + white text + mint button (donate, hero) - Navy block + white text + lilac button (campaign CTAs) - White card + stone border + raspberry pill tag - Navy footer + white text + mint link hover ### Pairings (don't) - Mint on raspberry (low contrast) - Lilac on raspberry (clashes) - Mint + lilac together without navy separator --- ## Typography | Role | Family | Substitute | Weight | Use | |---|---|---|---|---| | **Display** | Cera Pro | Manrope | 400 | Hero H1, all H2 | | **Body** | Soleil | Mulish | 400 / 700 | Paragraphs, UI, buttons | **Scale (from production):** - Hero H1: 40px / 46px line-height - Body: 18px / ~21px line-height (1.15) - Pill chip: 14px / 400 weight - Button: 18px / 700 weight **Hierarchy rules:** - Hero H1 is the only **40px**; everything else is 32px or smaller - H2 section headings: 32px display - H3 card headings: 22px display - Body 18px, never below 16px **Note on style:** Cera Pro is a geometric humanist sans (think Eames slightly warmed). Soleil is a humanist sans by Wolfgang Weingart's lineage (Lato-adjacent). Both feel modern + friendly + open — no editorial serifs. The visual mood is "trust-building, evidence-based, but not corporate." --- ## Spacing & rhythm - Section padding: 96px desktop / 48px mobile - Container max-width: 1200px (slim variant: 960px) - Component vertical rhythm: 64px between major widgets - Card gap: 32px (3-col grid) **Signature radius: `28px`** (pills) — applied to: - All buttons - Cards (`.card--white`) - Pill tags (`.card__pill`) - Image containers in CTA widgets - Sometimes the hero image (top-right corner only) Smaller radius `16px` used for: - Form inputs - Selects --- ## Signature patterns (extracted, in homepage order) ### 1. Superhero — Raspberry block + image **Class:** `.superhero.superhero--image.superhero--raspberry` **Pattern:** Two-column on desktop (image left, color block right) — `.superhero__media--raspberry` and `.superhero__content--raspberry`. Raspberry color block, white H1, white paragraph, mint green CTA pill. On mobile stacks: image top, raspberry block below. ``` [ research-lab photo ] [ RASPBERRY BLOCK ] [ Preventing a lifetime of loss ] [ The impact of pregnancy... ] [ ( Donate today ) ←mint pill ] ``` ### 2. Two-column campaign / "Projecting Life" **Class:** `.o-two-column-widget` Left column blank/image-anchor, right column WYSIWYG paragraph + navy pill CTA. Used for campaign storytelling. Headline appears inline within the WYSIWYG body, not as a section header. ### 3. Signposting widget — 3-column white cards **Class:** `.o-signposting-widget.o-signposting-widget--card-white.o-signposting-widget--3-column` Cards have: - 28px pill radius - 1px stone (#B8B8B8) border - Icon (52×52 PNG/SVG, rounded background) - Optional `.card__pill` (raspberry, white text) — used for "NEW" / category tags - H3 (22px display) - Body paragraph - "Read more →" navy link Three-card row examples on home: Research projects / Pregnancy resources / Baby loss stories. ### 4. CTA widget — Raspberry image-left + lilac button **Class:** `.o-cta-widget.o-cta-widget--raspberry.o-cta-widget--left` Photo card on left (28px radius), white text block on right (H2 + paragraph + lilac pill button). Used for events: "Run the 2026 Brighton Marathon for Tommy's". The raspberry suffix here doesn't always mean color block — sometimes it's just a categorical tag pulling raspberry accent into the headline rule. ### 5. Donate widget — Inline donation form **Class:** `.o-donate-widget` + `.m-donation-widget` THE most important conversion pattern. Two columns: - **Left:** small product photo, "£20 a month" + 2-line description - **Right:** Monthly / One-off tab switcher → £10/£20/£40 (monthly) or £25/£50/£100 (one-off) chip selectors → "Other amount" input → "Reason for giving" select with 6 options: 1. I was supported at a Tommy's centre/clinic 2. I was supported by your information 3. I was supported by your midwife helpline 4. In memory of a much-loved baby 5. In support of a family member, friend or colleague 6. Other - **"Secure donation"** label + green CTA "Donate now" Chip selector pattern: rounded-pill `