A reusable kit modeled from rtzhope.org — a national nonprofit supporting families through pregnancy and infant loss. Soft sky-blue + warm beige + cream, Libre Baskerville + DM Sans, with the italic-inside-roman headlines, three-stage support cards, and Beacons of Love tribute wall that make the brand recognizable.
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 rtzhope.org, color tokens with HSL → hex math, 13 signature patterns, forbidden moves, business facts, full site IA across 8 clusters. |
_shared.css |
Tokens + components | ~900 lines — CSS variables, layout grid, all signature patterns. Every HTML file loads this one stylesheet. |
palettes.json |
Palette variants | 4 palettes: Daylight (default sky-blue + warm beige), Hearth (warm bronze + cream), Stillness (muted sage), Twilight (slate + sky-blue dark mode). |
design-system.html |
Foundations | Every color swatch, type spec, button variant, primitive, form field, and forbidden move. The visual API. |
sections.html |
Pattern catalog | 13 reusable sections rendered with verbatim RTZ voice — hero-photo, validation, three-stage cards, italic headlines, retreat row, philosophy, stats, memory-making grid, tribute wall, lighthouse CTA, closing triad, inclusivity, footer. |
homepage.html |
Homepage | Soft-daylight hero · validation line · three-stage support · retreat row · philosophy block · stat row · stories teaser · lighthouse CTA · closing triad · footer. |
Every page loads ../mobile-nav.js, which auto-injects ../mobile-responsive.css and a hamburger button. At ≤860px the desktop nav-links hide; at ≤768px the hamburger appears and tapping it slides a full-viewport drawer in.
| Breakpoint | Behavior |
|---|---|
≥ 1100px | Desktop · full nav, full section spacing, photo tiles in 3-up grid. |
860–1100px | Tablet · desktop layout preserved, slightly tighter nav padding. |
≤ 860px | Phone · nav-links hide, hamburger injected. Memory-grid & stat-row collapse 3→2. |
≤ 768px | Mobile drawer · tapping burger pins drawer below nav, links stack full-width with hairline separators. Body locks scroll. |
≤ 640px | Section padding shrinks to 72px. Grids collapse to single column. CTAs stack full-width. |
≤ 480px | Stat row collapses 2→1. Closing triad type shrinks. Footer to single column. |
The mobile pattern is identical to ../ps-edu/ — same drawer behavior, same hamburger transitions, same drawer top auto-pinning to the live nav height.
RTZ Hope occupies a tonal slot none of the other systems cover: literary-grief nonprofit.
Break the silence.
Nurture healing.
Inspire hope.