Production-extracted via getComputedStyle() on tommys.org. Raspberry leads; navy carries weight; mint and lilac are the CTA + secondary; the rest support. Every variable below is wired into _shared.css as a custom property.
Twelve tokens. Raspberry stands alone — never paired with another warm hue. Mint pairs with navy. Lilac is a quieter cousin of raspberry for secondary buttons and inclusivity callouts.
Display: Cera Pro with Manrope fallback. Body: Soleil with Mulish fallback. Both geometric humanist sans — friendly, evidence-based, no editorial serifs.
Preventing a lifetime of loss
Fund vital research into miscarriage, stillbirth and premature birth.
Tommy's is the leading charity funding pregnancy research in the UK. With your support, we're able to carry out more than £2 million worth of ground-breaking research every year.
Projecting Life · Campaign
Registered as a charity in England & Wales (no. 1060508) and Scotland (SC039280).
All pill-shaped (28 px radius). Mint is primary conversion. Navy is structural. Lilac is secondary or campaign. Ghost variants on light or dark.
14 px / 400 / 999 px radius. Used on cards as category tags, on news cards as type indicators, and inline as labels.
Signature radius is 28 px (pill). 16 px for form inputs. 50% for avatars and icon circles. Don’t go below 16 px — square buttons feel off-brand.
Line icons on a cream circle. Single-stroke raspberry or navy. Used sparingly — one icon per card.
UK English. Curly apostrophe in Tommy’s. Em-dash for attribution. Names loss plainly — never euphemises.
Generous section padding (96 px desktop / 56 px mobile). Container 1200 px; slim 960 px; narrow 720 px. 32 px card gap. Pages breathe more than typical Drupal sites.
| Token | Value |
|---|---|
--section | 96 px desktop / 56 px mobile |
--section-tight | 64 px desktop / 40 px mobile |
--gutter | 32 px (card & column gap) |
--container | 1200 px max-width |
--container-slim | 960 px max-width |
--container-narrow | 720 px max-width |