OATMEAL-WARM · DEFAULT
Hearth, being-held.
For US orgs with a comfort-box or support-center focus. The warmest of the three.
bg#F4EFE7
surface#E5DDD0
accent#C28F7C
accent deep#8C7B6B
ink#3B3F44
hairline#D8CFC1
Foundations
Every color, type sample, and component this system exposes. Use this page when implementing a build or evaluating a fit. Every block on this page is also a valid pattern in a real page.
Pick one variant per build via data-palette on <html>. Background stays warm cream across all three; only the accent family changes. Never mix variants within a single site.
OATMEAL-WARM · DEFAULT
For US orgs with a comfort-box or support-center focus. The warmest of the three.
SAGE
For retreat-program orgs and gardener-voice founders. Reads quietest of the three.
DUSTY-BLUE
For virtual-program orgs and reflective (not maternal) voices. Reads the most distance-bridging.
The type pair does not vary by build. Newsreader carries serif warmth without the fragility of Cormorant or the editorial heaviness of DM Serif. Inter is used only for UI metadata, never for body prose.
H1 · NEWSREADER 500 · CLAMP(2.25REM, 4VW, 3.5REM) / 1.18
A community of parents who've lost a pregnancy or baby, here to support yours.
H2 · NEWSREADER 500 · CLAMP(1.5REM, 3VW, 2.25REM) / 1.25
H3 · NEWSREADER 500 · CLAMP(1.25REM, 2VW, 1.5REM) / 1.3
LEAD · NEWSREADER 400 · 1.25REM / 1.6
Whatever you're feeling right now is allowed. There's no timeline on this. We're here when you're ready.
BODY · NEWSREADER 400 · 1.0625REM / 1.75
Our support circles meet weekly. Some are open groups you can drop into; others are six-week cohorts that move through grief together. We have groups for mothers, partners, grandparents, and friends. We have groups for early loss, late loss, and infant death. We have a group for loss after fertility treatment, and one for parents whose loss happened during a previous pregnancy. Every group is led by a peer who has been there, and a licensed grief counselor.
SMALL · NEWSREADER 400 · 0.9375REM / 1.6
Hawthorn House is a 501(c)(3) nonprofit. EIN 00-0000000. All gifts are tax-deductible to the extent allowed by law.
UI · INTER 500 · 0.875REM / 1.4 (FOOTER, METADATA, BUTTONS ONLY)
CONTACT · PROGRAMS · ABOUT · GET INVOLVED
Two variants. Primary uses the accent-deep color and is reserved for the single most important action on the page. Quiet is for secondary paths. No pill buttons, no rounded-corner SaaS register. Hairline radius only.
Note on CTA copy: the primary button text changes by data-primary-path.
The four valid values are read-newly-grieving (default), find-group,
comfort-box, and speak-peer. Switching the value rewrites the button
via CSS custom properties. No HTML change required.
Used in the "What we offer" section on the homepage. Plain-named, no marketing language, no icons.
Small groups of bereaved parents meeting in person and online. Led by peers and a licensed counselor.
Sent to a family in the first month after loss. Includes a journal, candle, soft blanket, and a hand-written note from someone who has been there.
Free, professional photography at the hospital, arranged through partner volunteer photographers. Available 24 hours a day.
Two related patterns. Pull-quote is for visitor stories or partner statements. Reassurance is the single most important line on the site, used exactly once, on the newly-grieving page.
Stories rule: pull-quotes attributed to a person require explicit written consent on file. Anonymize as requested. Never illustrate stories with a photo of the person. Never use a story as a marketing device (donation page, fundraising appeal, social ad). If consent has not been cleared, attribute the line to "A parent" or omit the quote entirely.
There's no timeline. We're here when you're ready.
Used on the /newly-grieving hero. Once. Never as a marketing line.
Fixed top-right of every page on the site. Tab-focusable, keyboard-activatable. Visible at every
scroll position. Target URL is configurable per build via the --qc-exit-url CSS var;
default is https://www.weather.com, a neutral, plausible site that won't raise
questions if the visitor is searching at work or in front of family who don't know about the loss.
This pattern is always on. It is not a flex point. It comes from the same playbook DV-shelter and crisis-line sites use, for the same reason: someone might be reading this when they can't be seen reading this.
A JavaScript ESC-key fallback can be added per-client on request. Default ships pure CSS+HTML.