A reusable kit modelled from tommys.org — the UK’s largest pregnancy & baby loss charity. Raspberry + navy + mint + lilac, Cera Pro display + Soleil body, 28 px pill radius, with the signposting cards, donate widget, pregnancy week-by-week grid, and Memory Sky memorial that make the brand recognisable.
Six files. One system. Every page is standalone — open and view in a browser.
| File | Role | What it gives you |
|---|---|---|
brand-spec.md |
Source narrative | Voice anchors verbatim from tommys.org, color tokens (DOM-probed), 24 signature patterns, forbidden moves, business facts, full site IA across 5 clusters. |
_shared.css |
Tokens + components | ~1500 lines — CSS variables, layout grid, all signature patterns plus DS chrome. Every HTML file loads this one stylesheet. |
palettes.json |
Palette variants | 4 palettes: Default (raspberry hero + navy footer), Inverted Navy, Mint Spotlight, Lilac Quiet. |
design-system.html |
Foundations | Every colour swatch, type spec, button variant, radius rule, voice anchor and forbidden move. The visual API. |
sections.html |
Pattern catalog | 24 reusable sections rendered with verbatim Tommy’s voice — superhero, info-hero, signposting cards, donate widget, helpline, calculators, week-by-week, pull quote, topics hub, image links, Memory Sky, news grid, footer. |
homepage.html |
Homepage | Announcement · raspberry superhero · campaign two-col · What we do · Brighton Marathon CTA · donate widget · helpline · pull quote · midwife-led topics · ways to get involved · stats · newsletter · news · footer. |
UK’s largest pregnancy and baby-loss charity. Funds £2m+ of research every year across five UK centres. Research-led, plain-spoken, unmistakably hopeful.
| Token | Value | Used for |
|---|---|---|
| Raspberry | #BD2269 | Hero colour block, pills, link accent. The signature colour. |
| Navy | #153057 | Footer, body links, structural buttons, helpline band. |
| Mint | #71EBB7 | Primary CTA (Donate today, Sign up now). |
| Lilac | #5E6BDE | Secondary CTA (campaign / events / inclusivity). |
| Display font | Cera Pro · Manrope | All headings. Geometric humanist sans. |
| Body font | Soleil · Mulish | Body, UI, buttons. |
| Pill radius | 28px | Buttons, cards, chips, image containers. |
| Section padding | 96px (56px mobile) | Default block rhythm. |
HTML scraped from web.archive.org snapshot. Colour tokens captured live with Playwright DOM getComputedStyle() probes — raspberry rgb(189, 34, 105), navy rgb(21, 48, 87), mint rgb(113, 235, 183), lilac rgb(94, 107, 222). 12 photo assets archived from the Drupal image styles. Logo SVG sourced from themes/custom/tommys/images/ — logo fill #bd2269 confirms the raspberry hex exactly.