/* ========================================================================== CLINICLY ONE — DESIGN TOKENS v2.0 · Phase 0 deliverable Supersedes v1.0 (adds layered governance + liquid glass system) ────────────────────────────────────────────────────────────────────── READ THIS FIRST — THIS FILE IS A BOUNDARY, NOT A CAGE ────────────────────────────────────────────────────────────────────── This file is written to be handed to a design agent (Impeccable, or any other skill or reference-driven pass) that will legitimately want to change things. That is expected and welcome. A token file that forbids all change gets ignored on day two; a token file with no limits produces four pages that look like four different companies. So the tokens are split into three layers: LAYER 0 · CONSTITUTION Never changes. Derived from the logo itself. LAYER 1 · CORE May change, but only inside a stated range. LAYER 2 · EXPRESSION Free. This is where the creative work lives. An agent working on this site should read Layer 0, respect Layer 1's ranges, and treat Layer 2 as its own. If a change requires breaking Layer 0, it is the wrong change — find another way to get the same feeling. Every colour in Layer 0 and Layer 1 was measured, not chosen: sampled from the logo file (alpha-composited, gradient endpoints extracted) and from the four approved page mockups. ========================================================================== */ /* ========================================================================== ██ LAYER 0 · CONSTITUTION ██ Immutable. Do not edit these values. Ever. ========================================================================== */ :root { /* ---------------------------------------------------------------------- 0.1 · THE LOGO GRADIENT These three stops ARE the brand. They are lifted pixel-for-pixel from the infinity mark. Everything else on the site is downstream of them. ---------------------------------------------------------------------- */ --c1-logo-start: #0B0761; /* oklch(23.7% 0.145 269deg) */ --c1-logo-mid: #7C4DFB; /* oklch(57.5% 0.242 289deg) */ --c1-logo-end: #C77BFA; /* oklch(71.4% 0.191 310deg) */ /* ---------------------------------------------------------------------- 0.2 · THE BRAND HUE WINDOW Measured across every chromatic colour in the mark and the mockups. The brand lives in a 40-degree arc of indigo -> violet -> orchid. floor 269deg (logo start) ceil 310deg (logo end) safe 265deg - 315deg <- any new brand colour must land in here A colour outside this window does not read as Clinicly One. It reads as a different company using our layout. Teal, magenta, coral and amber-as-a-primary are all outside it. ---------------------------------------------------------------------- */ --c1-hue-floor: 265; --c1-hue-ceil: 315; --c1-hue-core: 288; /* the mark's own centre of gravity */ /* ---------------------------------------------------------------------- 0.3 · THE NEUTRAL CAST - the least obvious, most important rule Our greys are not grey. Measured chroma: ink-900 0.044 ink-800 0.054 body text 0.049 paper-tint 0.007 all sitting at hue 268-286deg. That faint violet in the neutrals is what makes the dark sections feel like *this* brand rather than a default dark theme. Strip it to chroma 0 and the site goes cold and generic instantly - it is the single easiest way to accidentally destroy the identity while thinking you are "cleaning up the palette". Legal range, dark neutrals: chroma 0.03 - 0.07, hue 265 - 290 Legal range, light neutrals: chroma 0.00 - 0.02, hue 270 - 295 ---------------------------------------------------------------------- */ --c1-neutral-chroma-min: 0.03; --c1-neutral-chroma-max: 0.07; /* ---------------------------------------------------------------------- 0.4 · THE CONTRAST FLOOR Not a colour rule - an outcome rule. Any palette is acceptable if it still clears these. Our audience is doctors reading on a phone between patients, frequently outdoors. This is the one place where taste loses to measurement. body text on its surface .................. >= 4.5 : 1 headings on their surface ................. >= 4.5 : 1 muted / caption text ...................... >= 4.5 : 1 button label on button fill ............... >= 4.5 : 1 icons, stars, bars, borders that carry meaning ................................. >= 3.0 : 1 decorative-only shapes .................... no floor Re-measure after any Layer 1 change. Do not eyeball it. ---------------------------------------------------------------------- */ /* ---------------------------------------------------------------------- 0.5 · THE SEVEN INVARIANTS Everything else is negotiable. These are not. 1. The logo gradient stops never change. 2. New brand colours land inside the 265-315deg hue window. 3. Neutrals keep their violet cast (chroma 0.03-0.07 on dark). 4. The contrast floor holds after every change. 5. Mint, gold and WhatsApp green keep their narrow jobs - mint for positives only, gold for review stars only, WhatsApp green for WhatsApp only. The moment mint becomes decorative, the palette reads as generic AI purple-and-teal. 6. One signature moment per page. Not three. 7. Reduced motion is respected everywhere, always. ---------------------------------------------------------------------- */ } /* ========================================================================== ██ LAYER 1 · CORE ██ Change if you have a reason - but stay inside the stated range, ██ and re-run the contrast check afterwards. ========================================================================== */ :root { /* ---------------------------------------------------------------------- 1.1 · BRAND CORE RANGE: hue must stay 265-315deg. Chroma and lightness are yours. ---------------------------------------------------------------------- */ --c1-indigo-deep: #0B0761; --c1-indigo: #2D2A98; --c1-violet: #7C4DFB; --c1-orchid: #C77BFA; /* ---------------------------------------------------------------------- 1.2 · ACTION - the interactive violet Deliberately NOT the same as --c1-violet. Sampled from the mockup CTA buttons, which measured brighter and bluer than the logo's mid-tone. Identity and interaction are different jobs; keep them separate. RANGE: hue 275-300deg, oklch lightness 48-62%, chroma >= 0.20. Below chroma 0.20 the buttons stop feeling clickable. ---------------------------------------------------------------------- */ --c1-action: #6C3FF5; /* oklch(53.9% 0.251 286deg) */ --c1-action-hover: #5A31E0; --c1-action-press: #4C27C4; --c1-action-soft: #EEE9FE; --c1-action-border: #D6CBFC; /* Informational blue. Sits at 270deg - the low edge of the window - so it reads as a sibling of the violet, not a second brand colour. RANGE: hue 262-278deg. Any bluer and it fights the brand. */ --c1-blue: #4A63F5; --c1-blue-soft: #E8ECFE; /* ---------------------------------------------------------------------- 1.3 · SURFACES Mockups measured 47% white / 36.5% deep navy. The page alternates, light slightly dominant. Keep that ratio roughly intact - it is what stops the site feeling like a heavy dark-mode SaaS template. RANGE: dark neutrals keep chroma 0.03-0.07 at hue 265-290. ---------------------------------------------------------------------- */ --c1-ink-900: #04081C; --c1-ink-800: #070C26; --c1-ink-700: #0D1435; --c1-ink-600: #171E42; --c1-ink-500: #262E58; --c1-paper: #FFFFFF; --c1-paper-tint: #F8F8FD; --c1-paper-tint-2: #F1EEFB; --c1-paper-border: #E7E4F5; --c1-paper-line: #EFEDF8; /* ---------------------------------------------------------------------- 1.4 · TEXT RANGE: any value that clears the contrast floor. Never pure black, never pure white for body copy on dark. ---------------------------------------------------------------------- */ --c1-text-strong: #0B1020; --c1-text: #39405C; --c1-text-muted: #6B718E; --c1-text-faint: #9DA2BC; --c1-oninv-strong: #FFFFFF; --c1-oninv: #C6C9E0; --c1-oninv-muted: #8A8FB4; --c1-oninv-faint: #646A90; /* ---------------------------------------------------------------------- 1.5 · SEMANTIC - narrow jobs, non-negotiable (Invariant 5) The hues here sit OUTSIDE the brand window on purpose. That is what makes them read as signals rather than decoration. Their exact values can shift; their jobs cannot. ---------------------------------------------------------------------- */ --c1-mint: #5DE0AF; /* positives on DARK only */ --c1-mint-deep: #198663; /* positives as TEXT on light - 4.53:1 */ --c1-mint-soft: #E6FBF3; --c1-gold: #F5B942; /* review stars on DARK sections */ --c1-gold-deep: #BB8D32; /* review stars on LIGHT - the bright gold hits only 1.76:1 on white, invisible to low-vision users. Do not use it there. */ --c1-whatsapp: #25D366; --c1-whatsapp-dark: #1DA65A; --c1-amber: #B98631; /* "Coming Soon" text and lock icons */ --c1-amber-bright: #E0A33C; /* on dark sections / large fills only */ --c1-amber-soft: #FFF6E8; --c1-alert: #E4655C; --c1-alert-soft: #FFF2F1; /* ---------------------------------------------------------------------- 1.6 · TYPOGRAPHY Outfit's geometric roundness echoes the logo's continuous loop - that pairing is reasoned, not arbitrary, so changing the display face means re-arguing it against the mark. The SCALE below is Layer 2. Change it freely. The FACES are Layer 1: swap them only with a stated reason, and never to a face that fights the mark's geometry (no high-contrast didone, no condensed grotesque). ---------------------------------------------------------------------- */ --c1-font-head: 'General Sans', 'Outfit', system-ui, -apple-system, sans-serif; --c1-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --c1-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --c1-w-regular: 400; --c1-w-medium: 500; --c1-w-semibold: 600; --c1-w-bold: 700; --c1-w-black: 700; /* General Sans tops out at 700 — 800 would faux-bold */ /* ---------------------------------------------------------------------- 1.7 · LAYOUT 1140px is load-bearing: the calculator widget is already built to it. Changing the container breaks the calculator's edge alignment against its neighbouring sections. If you change it, change the calculator's --c1g-maxw to match in the same commit. ---------------------------------------------------------------------- */ --c1-container: 1140px; --c1-container-narrow: 760px; --c1-gutter: clamp(1rem, 0.5rem + 2vw, 1.5rem); --c1-grid-gap: clamp(1rem, 0.5rem + 1.5vw, 1.5rem); } /* ========================================================================== ██ LAYER 2 · EXPRESSION ██ Free. This is the sandbox. Reinterpret any of it. ██ ██ Everything below exists so there is a sensible default on day one - ██ not because these are the only right answers. A design pass should ██ feel entitled to rewrite this entire layer, as long as Layer 0 holds ██ and Layer 1's ranges are respected. ========================================================================== */ :root { /* ---------------------------------------------------------------------- 2.1 · GRADIENTS Three by default, because more than three per page goes muddy fast. That is a guideline, not an invariant - if a direction genuinely needs a fourth, take it, but retire one of these rather than adding to them. ---------------------------------------------------------------------- */ --c1-grad-identity: linear-gradient(118deg, #0B0761 0%, #7C4DFB 55%, #C77BFA 100%); --c1-grad-action: linear-gradient(100deg, #6C3FF5 0%, #A971FD 100%); --c1-grad-positive: linear-gradient(90deg, #4A63F5 0%, #5DE0AF 100%); --c1-grad-dark: linear-gradient(155deg, #04081C 0%, #0D1038 52%, #16104A 100%); /* Mesh / aurora field for hero backgrounds. Free to reinterpret entirely. */ --c1-grad-mesh: radial-gradient(at 18% 12%, rgba(124,77,251,.28) 0px, transparent 52%), radial-gradient(at 82% 8%, rgba(199,123,250,.20) 0px, transparent 48%), radial-gradient(at 62% 78%, rgba(74,99,245,.22) 0px, transparent 55%), radial-gradient(at 8% 72%, rgba(11,7,97,.35) 0px, transparent 50%); /* ---------------------------------------------------------------------- 2.2 · LIQUID GLASS The mockups already lean on floating translucent cards, and the brand is literally a loop of light - so glass is a natural fit here rather than a trend graft. Built as a system so five different glass implementations don't end up on five different sections. Three densities: thin -> floating chips, badges, small labels over imagery regular -> the default. Nav bar, hero cards, stat tiles. thick -> modal surfaces, anything that must stay readable A convincing glass surface is FIVE things layered, not one: 1. backdrop blur (the frost) 2. saturation boost (stops it going grey and dead) 3. a translucent tint (the body of the material) 4. a specular top edge (the light catching the rim) 5. a soft outer shadow (lift off the page) Miss the specular edge and it reads as "blurry box", not glass. ---------------------------------------------------------------------- */ /* blur + saturation */ --c1-glass-blur-thin: blur(8px) saturate(150%); --c1-glass-blur: blur(18px) saturate(170%); --c1-glass-blur-thick: blur(32px) saturate(185%); /* tints - the body of the material */ --c1-glass-on-dark: rgba(255, 255, 255, 0.06); --c1-glass-on-dark-2: rgba(255, 255, 255, 0.10); --c1-glass-on-light: rgba(255, 255, 255, 0.62); --c1-glass-on-light-2: rgba(255, 255, 255, 0.80); --c1-glass-brand: rgba(124, 77, 251, 0.14); --c1-glass-brand-deep: rgba(11, 7, 97, 0.42); /* rim + specular highlight - the part that sells it */ --c1-glass-rim-dark: 1px solid rgba(255, 255, 255, 0.14); --c1-glass-rim-light: 1px solid rgba(255, 255, 255, 0.70); --c1-glass-rim-brand: 1px solid rgba(167, 139, 250, 0.32); --c1-glass-specular: inset 0 1px 0 rgba(255, 255, 255, 0.42); --c1-glass-specular-soft: inset 0 1px 0 rgba(255, 255, 255, 0.22); --c1-glass-inner-glow: inset 0 0 40px rgba(167, 139, 250, 0.10); /* lift */ --c1-glass-shadow: 0 8px 32px rgba(11, 7, 97, 0.20); --c1-glass-shadow-lg: 0 20px 60px -12px rgba(11, 7, 97, 0.34); /* ---------------------------------------------------------------------- 2.3 · SIGNATURE - the orbit glow The logo is a continuous loop. Every hero in the mockups repeats it: a lit centre with nodes orbiting on thin luminous arcs. This is the device the site is remembered by. Free to reinterpret the FORM - the loop could become an arc, a field, a slow-drifting constellation, a light that traces the infinity path. Keep the IDEA: one continuous, softly-lit loop, once per page. Its whole value is rarity (Invariant 6). ---------------------------------------------------------------------- */ --c1-orbit-line: rgba(167, 139, 250, 0.28); --c1-orbit-node: rgba(167, 139, 250, 0.95); --c1-orbit-halo: radial-gradient(circle, rgba(124,77,251,.42) 0%, rgba(124,77,251,0) 68%); --c1-glow-violet: 0 0 60px rgba(124, 77, 251, 0.45); --c1-glow-soft: 0 0 32px rgba(167, 139, 250, 0.28); --c1-glow-node: 0 0 12px rgba(167, 139, 250, 0.85); /* ---------------------------------------------------------------------- 2.4 · SHADOWS Violet-tinted, never neutral grey. Grey shadows under a violet brand read as dirt. Sampled tint: rgba(46,21,80,·). ---------------------------------------------------------------------- */ --c1-shadow-xs: 0 1px 2px rgba(46,21,80,.06); --c1-shadow-sm: 0 2px 6px rgba(46,21,80,.06), 0 1px 2px rgba(46,21,80,.04); --c1-shadow-md: 0 4px 14px rgba(46,21,80,.08), 0 2px 4px rgba(46,21,80,.04); --c1-shadow-lg: 0 2px 6px rgba(46,21,80,.05), 0 24px 60px -18px rgba(46,21,80,.18); --c1-shadow-xl: 0 4px 10px rgba(46,21,80,.06), 0 40px 90px -24px rgba(46,21,80,.26); --c1-shadow-action: 0 8px 24px rgba(108,63,245,.42); --c1-shadow-action-hover: 0 12px 30px rgba(108,63,245,.52); --c1-edge-dark: inset 0 1px 0 rgba(255,255,255,.06); /* ---------------------------------------------------------------------- 2.5 · TYPE SCALE - fluid. Rewrite freely. ---------------------------------------------------------------------- */ --c1-t-display: clamp(2.75rem, 1.6rem + 4.6vw, 4.5rem); --c1-t-h2: clamp(1.95rem, 1.3rem + 2.6vw, 3rem); --c1-t-h3: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); --c1-t-h4: 1.175rem; --c1-t-lead: clamp(1.05rem, 1rem + .3vw, 1.2rem); --c1-t-body: 1rem; --c1-t-sm: 0.9375rem; --c1-t-xs: 0.8125rem; --c1-t-micro: 0.6875rem; --c1-t-eyebrow: 0.75rem; --c1-lh-display: 1.06; --c1-lh-head: 1.18; --c1-lh-body: 1.62; --c1-lh-tight: 1.4; --c1-ls-display: -0.028em; --c1-ls-head: -0.016em; --c1-ls-body: 0; --c1-ls-eyebrow: 0.18em; /* ---------------------------------------------------------------------- 2.6 · SPACING - 4px base ---------------------------------------------------------------------- */ --c1-sp-1: .25rem; --c1-sp-2: .5rem; --c1-sp-3: .75rem; --c1-sp-4: 1rem; --c1-sp-5: 1.25rem; --c1-sp-6: 1.5rem; --c1-sp-8: 2rem; --c1-sp-10: 2.5rem; --c1-sp-12: 3rem; --c1-sp-16: 4rem; --c1-sp-20: 5rem; --c1-sp-24: 6rem; --c1-section-y: clamp(4rem, 2.5rem + 5vw, 6.5rem); --c1-section-y-lg: clamp(5rem, 3rem + 7vw, 8.5rem); /* ---------------------------------------------------------------------- 2.7 · RADII ---------------------------------------------------------------------- */ --c1-r-xs: 6px; --c1-r-sm: 10px; --c1-r-md: 14px; --c1-r-lg: 20px; --c1-r-xl: 28px; --c1-r-2xl: 36px; --c1-r-pill: 999px; /* ---------------------------------------------------------------------- 2.8 · BORDERS & FOCUS Focus visibility is a quality floor, not a style choice - keep it obvious whatever else changes. ---------------------------------------------------------------------- */ --c1-border: 1px solid var(--c1-paper-border); --c1-border-dark: 1px solid var(--c1-ink-600); --c1-border-focus: 2px solid var(--c1-action); --c1-ring-focus: 0 0 0 4px rgba(108,63,245,.18); /* ---------------------------------------------------------------------- 2.9 · MOTION Restrained by default: the orbit glow is the only ambient animation, everything else responds to input. A direction that wants a richer motion language is welcome to take it - orchestrate one moment well rather than scattering effects. ---------------------------------------------------------------------- */ --c1-dur-fast: 140ms; --c1-dur-base: 220ms; --c1-dur-slow: 420ms; --c1-dur-count: 520ms; /* calculator count-up - do not change */ --c1-ease: cubic-bezier(.2,.7,.2,1); --c1-ease-out: cubic-bezier(.16,1,.3,1); --c1-ease-inout: cubic-bezier(.65,0,.35,1); --c1-lift: translateY(-2px); /* 2.10 · Z-INDEX */ --c1-z-base: 1; --c1-z-raised: 10; --c1-z-sticky: 100; --c1-z-nav: 500; --c1-z-overlay: 900; --c1-z-modal: 1000; } /* ========================================================================== LIQUID GLASS - READY-MADE RECIPES Use these rather than reassembling glass by hand each time. Restyle them freely; just keep everyone using the same three. ========================================================================== */ .c1-glass, .c1-glass-dark, .c1-glass-light { border-radius: var(--c1-r-lg); position: relative; isolation: isolate; } /* Default - cards floating over dark sections and hero imagery */ .c1-glass { background: var(--c1-glass-on-dark); -webkit-backdrop-filter: var(--c1-glass-blur); backdrop-filter: var(--c1-glass-blur); border: var(--c1-glass-rim-dark); box-shadow: var(--c1-glass-specular), var(--c1-glass-shadow); color: var(--c1-oninv); } /* Brand-tinted - hero feature cards, the orbit centre */ .c1-glass-dark { background: var(--c1-glass-brand); -webkit-backdrop-filter: var(--c1-glass-blur-thick); backdrop-filter: var(--c1-glass-blur-thick); border: var(--c1-glass-rim-brand); box-shadow: var(--c1-glass-specular-soft), var(--c1-glass-inner-glow), var(--c1-glass-shadow-lg); color: var(--c1-oninv-strong); } /* Frosted white - sticky nav, chips over light imagery */ .c1-glass-light { background: var(--c1-glass-on-light); -webkit-backdrop-filter: var(--c1-glass-blur); backdrop-filter: var(--c1-glass-blur); border: var(--c1-glass-rim-light); box-shadow: var(--c1-glass-specular), var(--c1-shadow-md); color: var(--c1-text); } /* FALLBACK - Elementor previews, older Android browsers and a slice of real traffic have no backdrop-filter. Without this the cards render as nearly invisible transparent boxes with unreadable text. Non-optional. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .c1-glass { background: rgba(13, 20, 53, 0.92); } .c1-glass-dark { background: rgba(22, 16, 74, 0.94); } .c1-glass-light { background: rgba(255, 255, 255, 0.96); } } /* ========================================================================== GLASS - THE FOUR RULES Ignore them and glass turns a premium site into a slow, illegible one. 1 · READABILITY BEATS THE EFFECT Body text never sits directly on glass over a photograph. Either add a scrim behind the text, or thicken the tint until the contrast floor is met. Glass over a flat gradient is safe; glass over a busy clinic photo is not. 2 · MAXIMUM 3 GLASS SURFACES PER VIEWPORT backdrop-filter forces the browser to re-composite everything behind the element on every frame. Four or more in view together will visibly stutter mid-range Android phones on scroll - which is most of the doctors reading this site. 3 · NEVER NEST GLASS INSIDE GLASS The blurs stack, the tints compound, and the result is a grey smear. If a glass card needs an inner panel, make the inner panel solid. 4 · GLASS NEEDS SOMETHING BEHIND IT Over a flat white background it is invisible - cost for nothing. Glass belongs over the mesh gradient, over the orbit glow, or over photography. Nowhere else. ========================================================================== */ /* ========================================================================== REDUCED MOTION - Invariant 7. Not negotiable. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --c1-dur-fast: 0ms; --c1-dur-base: 0ms; --c1-dur-slow: 0ms; --c1-dur-count: 0ms; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== CALCULATOR THEME-SYNC MAPPING Paste over the calculator's existing THEME SYNC LAYER. Nothing else in that widget gets touched - engine, copy, IDs and input names stay as they are. If Layer 1 colours change, regenerate this block to match. ========================================================================== */ .c1g-scope { --c1g-ink: #04081C; --c1g-body: #39405C; --c1g-muted: #6B718E; --c1g-violet: #6C3FF5; --c1g-lilac: #A971FD; --c1g-blue: #4A63F5; --c1g-mint: #5DE0AF; --c1g-bg: #FFFFFF; --c1g-surface: #F8F8FD; --c1g-line: rgba(11,16,32,.09); --c1g-grad: linear-gradient(100deg, #6C3FF5 0%, #A971FD 100%); --c1g-grad-bar: linear-gradient(90deg, #4A63F5, #5DE0AF); --c1g-radius: 20px; --c1g-radius-sm: 10px; --c1g-shadow: 0 2px 6px rgba(46,21,80,.05), 0 24px 60px -18px rgba(46,21,80,.18); --c1g-font-head: 'Outfit','Poppins',system-ui,sans-serif; --c1g-font-body: 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --c1g-maxw: 1140px; --c1g-section-pad: 88px; } /* ========================================================================== NOTE TO THE DESIGN AGENT You have real room here, and you are meant to use it. Layer 2 is yours outright - gradients, glass, glow, motion, type scale, spacing, radii. Reinterpret the signature. Propose a bolder hero. Take one real risk. What the brief is actually asking for: · Premium, calm, expensive. Not loud. The audience is a doctor deciding whether to trust a stranger with their clinic's reputation. · Indian healthcare, not Silicon Valley SaaS. Warmth matters. The festival-creatives section should feel genuinely celebratory, not a dashboard with a diya icon dropped into it. · Trust over polish where the two conflict. A real screenshot beats a beautiful illustration. The honesty blocks in the copy deck are load-bearing - design them to be read, not skimmed past. Where the risk is best spent: the hero's signature loop, and the proof section. Those two carry the page. Everything between them should be quiet and disciplined enough to make them land. What would make this stop being Clinicly One: · Any primary colour outside 265-315deg · Neutralised greys (chroma 0) - the fastest route to generic · Mint used decoratively · More than one signature moment per page · Glass everywhere instead of glass somewhere HOW TO PROPOSE A CHANGE Change the value in Layer 1 or 2, then append one line to the CHANGELOG at the bottom of this file saying what changed and why. That is the whole process - but do it, so the four pages stay in sync and the next pass knows what has already been tried and rejected. If a change needs Layer 0 to move, don't. Find another way to get the same feeling. That constraint is the entire reason four separately built pages will look like one company. ========================================================================== */ /* ========================================================================== CONTRAST RECORD - measured, not assumed (WCAG 2.1) Re-run after any Layer 1 colour change. text-strong on paper .................. 18.93 : 1 AAA text on paper .................. 10.18 : 1 AAA text on paper-tint ............. 9.62 : 1 AAA text-muted on paper .................. 4.80 : 1 AA text-muted on paper-tint ............. 4.53 : 1 AA oninv-strong on ink-800 ................ 19.27 : 1 AAA oninv on ink-800 ................ 11.78 : 1 AAA oninv-muted on ink-800 ................ 6.12 : 1 AA white on action button .......... 5.73 : 1 AA action as link on paper .......... 5.73 : 1 AA blue as link on paper .......... 4.78 : 1 AA mint-deep on paper .................. 4.53 : 1 AA mint on ink-800 ................ 11.70 : 1 AAA orchid on ink-800 ................ 7.01 : 1 AA gold-deep on paper .................. 3.01 : 1 AA (graphic) amber on amber-soft ............. 3.01 : 1 AA (graphic) alert on alert-soft ............. 3.04 : 1 AA (graphic) Five values were darkened from the raw mockup samples to reach these: text-muted, mint-deep, gold (light-surface variant) and amber. The sampled originals looked correct on a designer's monitor and failed on a phone in daylight - which is where most doctors will open this site. ========================================================================== */ /* ========================================================================== CHANGELOG One line per change. Append, never rewrite. 2026-07-24 · v1.0 · Tokens extracted from logo + four approved mockups. 2026-07-24 · v1.1 · text-muted, mint-deep, gold, amber darkened to clear the contrast floor on light surfaces. 2026-07-24 · v2.0 · Restructured into Layer 0/1/2 governance. Added the brand hue window (265-315deg), the neutral-cast rule, the liquid glass system with fallback, and the creative licence for the design pass. 2026-07-27 · v2.1 · Display face Outfit → General Sans (client-locked Fontshare pairing with Inter, hero build decision). --c1-w-black 800 → 700: General Sans ships no 800, prevents browser faux-bold. Geometry argument holds — General Sans is a clean geometric-humanist that echoes the mark's loop as well as Outfit did. ========================================================================== */