brand-spec.md
The source narrative. Tone, palette rules, faith on/off, the four flex points, microcopy, anti-patterns, imagery rules, privacy posture.
Design system ยท 2026-05-18
Quiet Circle is one design system for miscarriage, pregnancy loss, and infant loss nonprofits. Three palette variants, faith framing on or off, and a fixed page structure built for a visitor who is grieving. Not a clone of any one org.
Eight files. One system. Every page is standalone, open and view in a browser.
The source narrative. Tone, palette rules, faith on/off, the four flex points, microcopy, anti-patterns, imagery rules, privacy posture.
Three palette variants: oatmeal-warm (default), sage, dusty-blue. Plus type pair, scale, radius, and quick-exit defaults.
Tokens, base typography, components, and the four flex-point CSS switches that drive faith / stories / palette / primary path without forking HTML.
The visual reference. Every palette swatch in all three variants, type scale, buttons, cards, pull-quotes, the quick-exit, the footer. Next turn.
The section library: quiet acknowledgment, primary path, what we offer, newly grieving, for supporters, faith disclosure, stories, quiet giving, footer. Next turn.
A complete sample homepage demonstrating the fixed scroll order with default flex points. Next turn.
Every build configures these on the <html> element. Nothing else changes.
oatmeal-warm · sage · dusty-blue.
Picks the accent family. Background stays warm cream across all three.
off · on.
When on, the homepage discloses the faith framing. No bait-and-switch.
omit · include.
The Stories section renders only with permission-cleared content. Never half-built with placeholders.
read-newly-grieving · find-group · comfort-box · speak-peer.
Picks the hero CTA verb to match what the org actually offers.
Pick Quiet Circle whenever the org does not have a strong existing visual identity, or when the build should establish one from scratch. The system handles the heavy lifting of a register that is unusually easy to get wrong. Visitors are grieving, and a single misjudged image or microcopy choice can break the trust that the rest of the site has to earn.
For organizations with an established brand worth preserving (their own logo, photography, palette that matters), use a client-specific design system instead. The sibling replicas rtz-hope and tommys are examples of that pattern.