/* ============================================================================= UNLOCK YOU — Design tokens v0.1 (provisional, pending client approval W2-03) ----------------------------------------------------------------------------- Canonical source. Every Unlock You surface reads its values from here. Companion doc: ./DESIGN.md (roles, rationale, contrast ratios, component specs) Concept: "Field Notes" — a naturalist's journal. Warm paper ground, literary serif, and a hairline technical-annotation layer that reframes measurement as *observation, not judgment*. HARD BANS (agency-wide + client preference): · No teal. No violet. Ever. · No dark default. Light ground is a stated client preference. · No diet tropes in imagery: no scales, tape measures, before/after. DEPLOY NOTE: `apps/website-unlock/dist/assets/tokens.css` is a deployed COPY of this file, and `index-new.html` inlines the :root block to keep the hero paint off a second round-trip. When you change a value here, update both. See DESIGN.md § "Token sync". ========================================================================== */ :root { /* --------------------------------------------------------------------------- 1. COLOR Ground is a warm *greige* paper, deliberately cooler and less sugary than a wellness cream. Warmth arrives through clay and the photography, not the bg. Ratios below are measured against --paper (#F4F1EA, rel. luminance 0.8807). ------------------------------------------------------------------------ */ /* Ground */ --paper: #F4F1EA; /* page canvas — warm greige paper */ --paper-raised: #FAF8F3; /* lifted panels, note blocks, sticky header */ --paper-sunk: #EAE5DA; /* recessed bands, quiet fills */ --paper-edge: #DED7C9; /* decorative hairlines, section rules */ /* Ink — all AA or better on --paper */ --ink: #23201B; /* primary text 14.4:1 AAA */ --ink-2: #4A443B; /* secondary / body prose 8.5:1 AAA */ --ink-3: #6B6357; /* annotation, captions 5.3:1 AA */ /* Clay — the single accent. Terracotta; carries action + emphasis. */ --clay-text: #8F4426; /* italic accent word, links 6.2:1 AA */ --clay: #A24D2B; /* button fill, focus ring 5.1:1 AA(ui) */ --clay-hover: #8A4123; /* button hover */ --clay-wash: #F0E4DC; /* faintest clay tint, fills only */ /* Sage — tertiary, sparing. Sampled from the sprout leaves. */ --sage-text: #5A6B4E; /* small labels 5.1:1 AA */ --sage-wash: #E6E9DF; /* fills only */ /* Brass — DECORATIVE ONLY. Never text, never a meaningful boundary. */ --brass: #C8B48A; /* hairline rules, tick marks 1.8:1 */ /* Boundaries + focus */ --border: #DED7C9; /* decorative / low-stakes edges */ --border-strong: #8B8175; /* interactive edges, inputs 3.4:1 AA(ui) */ --focus: #A24D2B; /* focus ring — clay 5.1:1 AA(ui) */ --focus-offset: #FAF8F3; /* halo between ring and element */ /* Feedback — form validation only. Clay is the ACTION colour, so an error must not be clay or a failed field reads like a call to action. */ --danger: #A32B1F; /* error text + border 6.4:1 AA */ --danger-wash: #F7E6E3; /* error field fill */ --success-text: #46663F; /* success text 5.8:1 AA */ --success-wash: #E7EDE4; /* success panel fill */ /* Text ON clay fills */ --on-clay: #FAF8F3; /* 5.5:1 on --clay AA */ /* --------------------------------------------------------------------------- 2. TYPE Three registers, each on a genuine contrast axis: serif Fraunces — old-style soft serif; warmth + a live italic sans Instrument Sans — neo-grotesque with humanist warmth; body/UI mono IBM Plex Mono — the "field notes" annotation voice Rationale in DESIGN.md § Typography. ------------------------------------------------------------------------ */ --font-serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-sans: "Instrument Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Scale — fluid, ~1.25 ratio. Display capped at 5.2rem (doctrine max 6rem). */ --fs-display: clamp(2.6rem, 7vw, 5.2rem); --fs-h1: clamp(2.1rem, 5vw, 3.4rem); --fs-h2: clamp(1.6rem, 3.4vw, 2.3rem); --fs-h3: clamp(1.2rem, 2.2vw, 1.45rem); --fs-lead: clamp(1.06rem, 1.8vw, 1.28rem); --fs-body: 1.0625rem; /* 17px */ --fs-sm: 0.9375rem; /* 15px */ --fs-note: 0.8125rem; /* 13px — mono annotation */ --fs-micro: 0.6875rem; /* 11px — tick labels, eyebrows */ /* Leading */ --lh-display: 1.02; --lh-heading: 1.14; --lh-body: 1.62; --lh-note: 1.5; /* Tracking — floor is -0.03em; never below -0.04em (doctrine) */ --tr-display: -0.028em; --tr-heading: -0.016em; --tr-body: 0; --tr-eyebrow: 0.22em; /* mono uppercase labels */ --tr-wordmark: 0.38em; /* Weights (Fraunces + Instrument Sans are variable) */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Fraunces variable axes — SOFT rounds the terminals; keep WONK at 0. */ --serif-soft: 36; /* Measure */ --measure: 68ch; /* long-form prose */ --measure-tight: 46ch; /* lead paragraphs, hero subheads */ /* --------------------------------------------------------------------------- 3. SPACE — 4px base, non-linear at the top so section rhythm can vary ------------------------------------------------------------------------ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10:128px; /* Section rhythm — deliberately varied, not one uniform gap */ --sect-tight: clamp(56px, 8vw, 96px); --sect: clamp(88px, 12vw, 152px); --sect-open: clamp(120px,18vw, 232px); /* the Whyte "breathe" gaps */ /* Gutters + shell */ --gutter: clamp(20px, 5vw, 56px); --shell: 1180px; /* max content width */ --shell-slim: 780px; /* centred prose column */ /* --------------------------------------------------------------------------- 4. RADIUS — soft but not pill-everywhere. Pill is reserved for the CTA. ------------------------------------------------------------------------ */ --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px; --r-circle: 50%; /* --------------------------------------------------------------------------- 5. ELEVATION — warm-tinted shadows only. Never neutral grey/black. ------------------------------------------------------------------------ */ --shadow-sm: 0 1px 2px rgba(35,32,27,.06), 0 2px 6px rgba(35,32,27,.05); --shadow-md: 0 2px 4px rgba(35,32,27,.06), 0 10px 26px rgba(35,32,27,.09); --shadow-lg: 0 4px 8px rgba(35,32,27,.07), 0 22px 52px rgba(35,32,27,.13); --shadow-inset-paper: inset 0 1px 0 rgba(255,255,255,.85); /* --------------------------------------------------------------------------- 6. MOTION — ease-out only. No bounce, no elastic (doctrine). Every animation MUST ship a prefers-reduced-motion alternative. ------------------------------------------------------------------------ */ --ease: cubic-bezier(.22,.68,.24,1); /* quart-out — the default */ --ease-soft: cubic-bezier(.32,.72,.30,1); /* gentler, for large moves */ --ease-out-expo: cubic-bezier(.16,1,.30,1); /* reveals */ --dur-fast: 160ms; /* hover, focus, colour */ --dur-base: 280ms; /* buttons, small transforms */ --dur-slow: 620ms; /* section reveals */ --dur-scene: 900ms; /* aperture crossfades */ --stagger: 70ms; /* per-item delay inside a group */ /* --------------------------------------------------------------------------- 7. Z-INDEX — semantic scale, never 9999 ------------------------------------------------------------------------ */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-overlay: 300; --z-modal: 400; /* The HighLevel chat widget mounts above everything; leave >1000 free. */ } /* ----------------------------------------------------------------------------- BREAKPOINTS (documentation only — custom properties cannot be used in media queries; these are the literal values every UY surface must use) --bp-sm: 560px single → two column for small pairs --bp-md: 780px stage layouts split image/copy --bp-lg: 1040px sticky rails and side annotation appear --bp-xl: 1280px max shell reached -------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- OPTIONAL DARK MODE — NOT the default, and not implemented in v0.1. Client preference is an explicitly light ground. If a dark surface is ever approved it must be opt-in ([data-theme="dark"]), never prefers-color-scheme, so the light ground stays the default for everyone. -------------------------------------------------------------------------- */