/* Happy Grieving - brand design tokens (SHARED by website + app) Single source of truth for the Happy Grieving master brand's colour, type, shape and depth. Both the website (../website) and the app (../app) import THIS file so the two products stay visually identical. Master brand only. Grief Trips is a separate sub-brand: it inherits these tokens and adds its own trip accents (Portugal slate, Maldives teal), which deliberately do NOT live here. See ./BRAND-BOOK.md. --------------------------------------------------------------------------- 25 Jul 2026: adopted wholesale from the member webapp (happy-grieving-content, webapp/src/app/globals.css), which is CANONICAL for these values. The webapp shipped this system first; happygrieving.org was the product out of step. Confirming signal: brand/icon.svg here already used #f5f2f0 / #e2dde0 / #2b2a2e / #d3a6b1 - i.e. this palette's paper, line, ink and rose-tint - so the logo had been from this system all along. Closes the mark/treatment drift tracked in operations GAPS.md #23. Do NOT source values from happy-grieving-content/UI_REDESIGN_PLAN.md: that is the original proposal and roughly a third of its hexes were changed during implementation. The *-deep steps were TUNED by an automated contrast gate, not picked by eye. Nudging one by hand can silently break AA across eight hues at once. Run `node website/tools/check-contrast.mjs` after any colour edit; the site build runs it automatically. --------------------------------------------------------------------------- Grief-aware design system: calm, warm, low-alarm, legible. Eight tonal hues, each owning a feature area in the app (wayfinding by colour): ochre = journal, sage = circles + all primary actions, rose = people/buddies, moss = goals, powder = events, clay = resources, plum = remembrance, lilac = membership/welcome. The marketing site uses a subset (sage for actions, lilac/rose/sage for section washes) but carries the whole system so the two products never fork. Steps per hue: wash (panel bg) -> tint (chips/selected) -> base (decorative mid-tone, never body text) -> deep (text-capable, AA on paper and on its own wash). Font requests live as a discoverable in the document head (website/tools/build.mjs), not an @import here - an @import inside a stylesheet is only discovered after the stylesheet itself downloads and parses, adding a full extra round-trip on the render-blocking path. Both this file and the head link must be updated together if the font set changes. */ :root { color-scheme: light dark; /* ---- neutrals: warm paper ground, pure white cards ---- */ --paper: #f5f2f0; --surface: #ffffff; --ink: #2b2a2e; --muted: #57535a; --faint: #9c96a2; --line: #e2dde0; /* ---- eight hues, four steps each ---- */ --sage-wash: #cfe3da; --sage-tint: #a7cec9; --sage: #94baaf; --sage-deep: #3a5851; --lilac-wash: #d9dae9; --lilac-tint: #bcbed8; --lilac: #a6a8c2; --lilac-deep: #4a4c65; --powder-wash: #cddced; --powder-tint: #a3bfd8; --powder: #6e8fac; --powder-deep: #384e60; --ochre-wash: #ead9ba; --ochre-tint: #dabf8d; --ochre: #c2a066; --ochre-deep: #654b1b; --clay-wash: #e9d2c1; --clay-tint: #d6ae90; --clay: #bc8a64; --clay-deep: #683c1a; --rose-wash: #e8cfd5; --rose-tint: #d3a6b1; --rose: #bb8290; --rose-deep: #683541; --moss-wash: #dbe2c4; --moss-tint: #bfcd97; --moss: #9cb06e; --moss-deep: #485920; --plum-wash: #e0cde0; --plum-tint: #c5a3c5; --plum: #a783a7; --plum-deep: #583658; /* A ninth hue, added 28 Sep 2026 (not part of the 25 Jul 2026 webapp adoption below - this one exists ONLY here, not yet mirrored into happy-grieving-content/webapp/src/app/globals.css, so it is a new, deliberate divergence from that canonical source, not an oversight). Built for a pink+yellow homepage-hero option that wouldn't collide with ochre's two existing jobs (the "Time" pillar accent and the disclosure-box background) - same wash/tint/base/deep structure and contrast pass as the other eight (6.3:1 deep-on-wash). */ --marigold-wash: #fbe8a6; --marigold-tint: #f3d271; --marigold: #e0b23e; --marigold-deep: #6b4e09; /* Each -deep was a few points of lightness short of AA on its OWN tint, which is the pair every tonal button and every selected chip renders (rose 3.71, plum 3.82, lilac 3.90, clay 3.92, sage 3.96, moss 4.28, ochre 4.30, powder 4.33). Found by the member app's audit on 15 Sep 2026 and fixed in its globals.css, which these tokens were adopted from; the same values were wrong here, so the same failure was live on happygrieving.org and in the embedded tools. Darkened just far enough to clear 4.5; hue and saturation untouched, dark mode was always fine. No automated sync between the two files, so they are changed together by hand. */ --ring: #4c7268; /* ---- type ---- One literary serif for display, one humanist grotesque for body AND UI (the app deliberately does not split body from UI). */ --display: 'Newsreader', Georgia, 'Times New Roman', serif; --serif: 'Newsreader', Georgia, 'Times New Roman', serif; --head: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Fluid display sizes: type breathes with the viewport instead of jumping at breakpoints. */ --text-display: clamp(1.625rem, 1.15rem + 2.1vw, 2.375rem); --text-title: clamp(1.75rem, 1.45rem + 1.4vw, 2.25rem); /* ---- shape ---- Pills for everything interactive; 16px cards; 12px inputs. */ --radius-pill: 999px; --radius-sm: 12px; --radius: 16px; --radius-lg: 24px; /* ---- depth ---- Exactly two elevations: card (resting) and float (sticky nav, sheets, popovers). Warm umber rather than neutral grey, so cards feel lifted off warm paper rather than cut into cold light. Two layers each: a tight contact shadow and a soft ambient one. */ --elevation-card: 0 1px 2px rgb(62 46 38 / 0.05), 0 12px 32px -20px rgb(62 46 38 / 0.16); --elevation-float: 0 4px 14px rgb(62 46 38 / 0.07), 0 28px 56px -26px rgb(62 46 38 / 0.22); /* ---- motion ---- One signature curve and two durations, mirrored from the member webapp's globals.css (canonical for these values, like the palette above). That file names the curve --ease-soft; this one names it --ease, and there is no automated sync between them, so both names are defined in both places. A rule copied in either direction keeps working, and the two names stay one curve. */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: var(--ease); --dur-quick: 0.2s; --dur-settle: 0.4s; --lift: translateY(-2px); } /* Dark mode keeps a quieter palette: deeply desaturated washes rather than the brand mid-tones, which read too loud on dark. NOTE *-deep inverts meaning here - it becomes the LIGHT, text-capable tone. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #1e1d21; --surface: #262429; --ink: #e8e4e6; --muted: #a49ea9; /* 5.2:1 on paper, 4.8:1 on surface. The old #767078 measured 3.5:1 and 3.2:1, under AA for the placeholders and disabled links it colours (webapp audit, 13 Sep 2026, P2.8). */ --faint: #948d99; --line: #37343e; --sage-wash: #26312b; --sage-tint: #31413a; --sage: #94baaf; --sage-deep: #a9c9bc; --lilac-wash: #2b2837; --lilac-tint: #383350; --lilac: #b3a4d4; --lilac-deep: #c3b5e0; --powder-wash: #232e36; --powder-tint: #2c3d4a; --powder: #8fb4cd; --powder-deep: #a4c3d8; --ochre-wash: #322c1f; --ochre-tint: #443b26; --ochre: #cfae72; --ochre-deep: #d9be8a; --clay-wash: #33281f; --clay-tint: #463327; --clay: #cf9c82; --clay-deep: #dcae92; --rose-wash: #322629; --rose-tint: #453036; --rose: #cc97a2; --rose-deep: #dbaab4; --moss-wash: #292f1e; --moss-tint: #363f28; --moss: #a8bc7d; --moss-deep: #becf97; --plum-wash: #2f2530; --plum-tint: #402f41; --plum: #b28cb2; --plum-deep: #cfaacf; --marigold-wash: #322c1b; --marigold-tint: #483f23; --marigold: #e7be55; --marigold-deep: #f4d07b; --ring: #a9c9bc; --elevation-card: 0 1px 2px rgb(0 0 0 / 0.35), 0 10px 30px -18px rgb(0 0 0 / 0.5); --elevation-float: 0 4px 12px rgb(0 0 0 / 0.4), 0 24px 48px -24px rgb(0 0 0 / 0.6); } } /* Explicit dark choice. Duplicated from the media block above rather than shared, because the website carries a manual theme toggle that must beat the OS preference in both directions (the app is media-query-only). Keep the two blocks in lockstep. */ :root[data-theme="dark"] { --paper: #1e1d21; --surface: #262429; --ink: #e8e4e6; --muted: #a49ea9; --faint: #948d99; --line: #37343e; --sage-wash: #26312b; --sage-tint: #31413a; --sage: #94baaf; --sage-deep: #a9c9bc; --lilac-wash: #2b2837; --lilac-tint: #383350; --lilac: #b3a4d4; --lilac-deep: #c3b5e0; --powder-wash: #232e36; --powder-tint: #2c3d4a; --powder: #8fb4cd; --powder-deep: #a4c3d8; --ochre-wash: #322c1f; --ochre-tint: #443b26; --ochre: #cfae72; --ochre-deep: #d9be8a; --clay-wash: #33281f; --clay-tint: #463327; --clay: #cf9c82; --clay-deep: #dcae92; --rose-wash: #322629; --rose-tint: #453036; --rose: #cc97a2; --rose-deep: #dbaab4; --moss-wash: #292f1e; --moss-tint: #363f28; --moss: #a8bc7d; --moss-deep: #becf97; --plum-wash: #2f2530; --plum-tint: #402f41; --plum: #b28cb2; --plum-deep: #cfaacf; --marigold-wash: #322c1b; --marigold-tint: #483f23; --marigold: #e7be55; --marigold-deep: #f4d07b; --ring: #a9c9bc; --elevation-card: 0 1px 2px rgb(0 0 0 / 0.35), 0 10px 30px -18px rgb(0 0 0 / 0.5); --elevation-float: 0 4px 12px rgb(0 0 0 / 0.4), 0 24px 48px -24px rgb(0 0 0 / 0.6); } /* --------------------------------------------------------------------------- Legacy aliases. The website's stylesheet was written against an older vocabulary (--ground/--panel/--forest/...). Rather than rewrite 460 lines of CSS in one unreviewable diff, the old names are mapped onto the new system here and retired as each section of style.css migrates. Anything still referencing a name in this block has not been migrated yet. Because these are defined in terms of var(), they follow the theme automatically - no dark-mode duplicate is needed. Three names are deliberately absent, because the light footer removes their only consumers: --forest-ink, --on-dark, --on-dark-faint. --------------------------------------------------------------------------- */ :root { --ground: var(--paper); --panel: var(--surface); --panel-2: var(--sage-wash); --ground-soft: var(--paper); --ink-soft: var(--muted); --ink-faint: var(--faint); --forest: var(--sage-deep); /* primary action colour */ --forest-deep: var(--sage-deep); --sage-soft: var(--sage-tint); --taupe: var(--line); /* was the input + ghost-button border */ --gold: var(--ochre-deep); --shadow: var(--elevation-card); --shadow-lg: var(--elevation-float); }