/* ============================================================================ Sobbr Life — Design Tokens "One butterfly, one sunrise, two temperaments." The tribute is the sky (expressive). The dashboard is the room the next morning (calm). The public site is the doorway between them. Source of truth: Module Build Specs Part 4 §4.4 + Part 5 §5.1–5.4. --------------------------------------------------------------------------- PALETTE, July 2026 — rebuilt around the Sobbr Life mark. Lyla asked for the site to carry her logo's colours ("I am not a purple/pink person"). Every value in layer 1 was SAMPLED from the artwork, not eyeballed: deep teal-navy #004960 (the SOBBR wordmark, the trunk, the figure), mid teal #00697B (the leaves), orange #FA7612 (the LIFE wordmark and the hearts), warm sand #FCB87C, cream #FEF7EE (the ground the badge sits on). Two tiers, deliberately: · TEAL + ORANGE — the organisation. Chrome, actions, headings, dashboard. · ROSE — the houses, and Skyelar. Each house's own badge is rose and plum; so is the tribute. Forcing teal onto those would put the site at war with her own artwork. CONTRAST IS NOT NEGOTIABLE. The logo orange is beautiful and it FAILS as text: 2.58:1 on cream, 2.74:1 under white. So it is a decorative fill only, and two darkened siblings carry any orange that has to be read. Measured ratios are in the comments; re-run packages/shared/scripts/check-contrast.mjs after edits. --------------------------------------------------------------------------- Layers: 1. Brand core — the mark's colours + the sunrise ramp built from them 1b. Houses — the rose tier the three house badges live in 2. Dashboard — "dawn light on paper" (calm, flat, light) 3. Public — the "Everlight" world (night→sunrise, the --dawn token) 4. Type / space / radius / elevation 5. Motion + haptic (ease-out only) + reduced-motion overrides ============================================================================ */ :root { /* -- 1. BRAND CORE — sampled from the Sobbr Life mark ---------------------- */ --brand-navy: #00304a; /* 12.98:1 on cream — the body ink of the brand */ --brand-teal-deep: #004960; /* 9.31:1 on cream · 9.90:1 under white text */ --brand-teal: #00697b; /* 5.97:1 on cream */ --brand-teal-soft: #277d85; /* 4.53:1 on cream — the floor for teal text */ --brand-teal-pale: #468c9d; /* decorative / borders only */ /* Orange, three jobs. Never use --brand-orange for anything that must be READ. */ --brand-orange: #fa7612; /* DECORATIVE ONLY — 2.58:1 on cream, 2.74:1 under white */ --brand-orange-ink: #b24f09; /* text-safe — 4.92:1 on cream */ --brand-orange-fill: #c2540a; /* button-safe — 4.60:1 with white text */ --brand-sand: #fcb87c; --brand-sand-pale: #fed5a9; --brand-cream: #fef7ee; /* The Sunrise — one ramp, three doses (site wash / hero sky / dashboard chip). Same token names as the old dawn ramp, so every existing gradient keeps working; only the values moved from plum/rose to navy/teal/orange. */ --dawn-night: #00161f; /* blue-black, not purple-black */ --dawn-indigo: #002333; --dawn-plum: #00304a; /* (kept name) deep navy */ --dawn-violet: #004960; /* (kept name) deep teal */ --dawn-magenta:#00697b; /* (kept name) mid teal */ --dawn-rose: #f07a1e; /* (kept name) the warm accent — used on DARK grounds */ --dawn-ember: #fa7612; --dawn-coral: #f98a40; --dawn-gold: #fcb87c; --dawn-amber: #fed5a9; --dawn-peach: #fee8d2; --dawn-cream: #fef7ee; /* -- 1b. THE HOUSES — their badges are rose and plum, so rose stays -------- */ /* Sampled from the three house marks: Starfish #bc316b, Skye's Everlight #f0739c, Phoenix Rising #d0385f. Used to frame each card so the mark sits in its own colour instead of fighting the teal chrome. */ --house-rose: #c2497f; --house-rose-deep: #a6376a; /* 5.4:1 on cream — safe for a house name */ --house-rose-wash: #fbeef3; --house-plum: #5c2a55; --house-starfish: #bc316b; --house-everlight: #be3a6e; /* the badge's pink, darkened to a readable 4.91:1 */ --house-phoenix: #c63359; /* the badge's rose at a readable 4.92:1 */ /* Semantic — muted, never gaudy, never colour-alone (always icon + word too) */ --ok-ink: #2f6a4d; --ok-wash: #e7f0ea; /* sage — on-track / good (AA on its wash) */ --attn-ink: #8a5010; --attn-wash: #f6ead6; /* amber — needs-you (AA on its wash) */ --urgent-ink: #b23a2e; --urgent-wash: #f7e4e0; /* warm brick — used RARELY */ /* -- 2. DASHBOARD SKIN — "dawn light on paper" ---------------------------- The paper stays warm on purpose: this is the screen a woman's whole record lives on, and cold grey reads as clinical. Only the ACTION colour moved, from rose to the brand's deep teal — calmer than orange, and it is the colour of the wordmark itself. */ --db-canvas: #faf7f3; /* warm oat — never clinical white, never cold gray */ --db-surface: #fffdfb; /* cards lift a hair off the oat */ --db-hairline: #eae2d8; /* warm sand borders */ --db-ink: #2a2320; /* warm espresso, ~13:1 on oat */ --db-ink-soft: #6b615a; /* taupe, ~5:1 (body-safe) */ --db-ink-hint: #8a8079; /* on white only */ --db-accent: #005d75; /* 7.44:1 under white text */ --db-accent-press: #004a5e; --db-accent-wash: #e6f0f3; --db-sober-chip: #fbefe2; /* the days-sober number sits on this sand wash */ /* Deprecated aliases. `--rose` used to be the action colour on both surfaces; ten rules in the public stylesheet and thirteen in the dashboard still name it. Keep them pointed at the action colour and retire them as those files are touched — a token called "rose" that holds teal is a trap for whoever reads this next. */ --rose: var(--db-accent); --rose-pressed: var(--db-accent-press); --rose-wash: var(--db-accent-wash); /* -- 3. PUBLIC SKIN — the "Everlight" ------------------------------------- --dawn is the single control token (0 = night, 1 = full morning). A page or a scroll position sets it; ink/accent/butterfly tint follow. Reduced motion + low-end freeze it at each section's assigned value (a still sky). */ --dawn: 0; --pub-ink-on-night: #f2f7f9; --pub-ink-on-night-soft: #c3d4da; --pub-ink-on-dawn: #14303d; /* deep navy-teal, 13:1 on cream */ --pub-ink-on-dawn-soft: #4a6570; /* 5.8:1 on cream */ --pub-accent: var(--dawn-rose); /* accent on dark grounds */ --pub-accent-warm: var(--dawn-gold); /* decorative highlight only — NEVER text */ /* Required scrim wherever LIGHT ink sits over sunrise imagery. This token claimed to guarantee 4.5:1 and did not: it was flat until 62% of the hero's height and then reached only .30, while the sunrise ramp is at its BRIGHTEST in exactly that lower band. Measured on /our-houses/, cream lede text over the gold band came out at 1.81:1 — visibly hard to read, not a rounding error. The ramp below is derived, not eyeballed: 0.55 over the worst band (--dawn-gold #fcb87c) puts #f0e4d6 at 5.09:1 and white at 6.37:1. If the sunrise ramp is ever re-tuned, re-derive these stops. */ --pub-scrim: linear-gradient(180deg, rgba(0,12,20,0) 18%, rgba(0,12,20,.30) 48%, rgba(0,12,20,.52) 74%, rgba(0,12,20,.62) 100%); /* -- 4. TYPE -------------------------------------------------------------- Fraunces (OFL, variable) for headings + the days-sober number ONLY. Atkinson Hyperlegible Next (OFL) for ALL body/data — the accessibility mandate made visible. Mono = system stack (0 web-font bytes) for labels. */ --font-display: "Fraunces", "Fraunces-fallback", Georgia, "Times New Roman", serif; --font-body: "Atkinson Hyperlegible Next", "Atkinson-fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace; /* type scale — body floor 16px, default 18px; never below 14 */ --fs-display-xl: clamp(3.5rem, 12vw, 9rem); --fs-display-l: clamp(2.5rem, 7vw, 5rem); --fs-h1: clamp(1.6rem, 5vw, 2.6rem); --fs-h2: clamp(1.35rem, 4vw, 1.9rem); --fs-lead: clamp(1.25rem, 3.5vw, 1.6rem); --fs-sober: clamp(3rem, 9vw, 4rem); /* the days-sober number */ --fs-body: 1.125rem; /* 18px */ --fs-body-sm: 1rem; /* 16px floor */ --fs-meta: 0.9375rem; /* 15px */ --fs-label: 0.72rem; /* mono eyebrows */ --lh-tight: 0.98; --lh-body: 1.55; --tracking-label: 0.28em; /* Fraunces variable-axis presets (display = airy, high optical size) */ --fraunces-display: "opsz" 144, "wght" 320, "SOFT" 0, "WONK" 0; --fraunces-title: "opsz" 72, "wght" 500, "SOFT" 40, "WONK" 0; --fraunces-italic: "opsz" 72, "wght" 300, "SOFT" 45, "WONK" 0; /* -- 4b. SPACE / RADIUS / ELEVATION --------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --radius-card: 16px; --radius-btn: 12px; --radius-pill: 999px; --radius-input:12px; --tap-min: 48px; /* exceeds WCAG 2.5.8 (24px) + matches Material 48dp */ /* one soft, warm-tinted shadow — "paper, not glass". Selected = an accent border, not a bigger shadow. */ --shadow-card: 0 1px 2px rgba(42,35,32,.06), 0 2px 8px rgba(42,35,32,.05); --shadow-accent: 0 6px 20px rgba(0,73,96,.24); --focus-ring: 0 0 0 3px rgba(0,93,117,.45); --border-selected: 1.5px solid var(--db-accent); /* -- 5. MOTION — ease-out only, NO overshoot/spring/bounce anywhere -------- */ --dur-press: 120ms; /* press / toggle / micro */ --dur-state: 180ms; /* color / opacity state change */ --dur-move: 260ms; /* drill-in / sheets / drawers */ --dur-toast-in: 200ms; --dur-toast-out: 150ms; --ease-standard: cubic-bezier(.4, 0, .2, 1); --ease-out-soft: cubic-bezier(.32, .72, 0, 1); /* public-site expressive easings (entrances only) */ --ease-expo: cubic-bezier(.19, 1, .22, 1); --ease-quart: cubic-bezier(.165, .84, .44, 1); } /* Reduced motion: remove MOVEMENT (translate/scale/rotate) and looping/canvas, but keep short opacity fades — a hard cut can itself feel broken. Every animated moment must have a static, meaning-preserving equivalent. */ @media (prefers-reduced-motion: reduce) { :root { --dur-press: 1ms; --dur-move: 1ms; --dur-state: 100ms; /* keep fades <=100ms */ } } /* Metric-matched fallback faces so the webfont swap causes no layout shift (CLS). Real @font-face src declarations live in each app; these only fix metrics. */ @font-face { font-family: "Fraunces-fallback"; src: local("Georgia"); size-adjust: 96%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; } @font-face { font-family: "Atkinson-fallback"; src: local("Arial"); size-adjust: 100%; ascent-override: 94%; descent-override: 24%; line-gap-override: 0%; }