/* Brand tokens. THE ONLY FILE IN THIS PROTOTYPE THAT MAY CONTAIN A HEX CODE. * * Everything visual that differs between Keune and miiki differs here and nowhere else, keyed * off [data-brand] - on in the questionnaire, on the card frame alone in the builder, * which is why the selector is the bare attribute and not html[data-brand] as in v1. That is * the whole multi-brand story in one file: survey.css and * the JS never learn which brand they are rendering. If a colour ever appears outside this * file, the next brand costs a search-and-replace instead of eight lines. * * Values were read off the live sites on 2026-08-27: * keune.ch -> /css/custom.min.css (FuturaPT faces, .button--colorContrast coral gradient) * miiki.com -> Poppins, ink #191919, accent #108474 */ :root { /* Shared spacing + motion. Brand-neutral on purpose: the two brands differ in colour, type and corner radius, not in rhythm. */ --gap-1: 6px; --gap-2: 12px; --gap-3: 20px; --gap-4: 32px; --gap-5: 52px; --gap-6: 84px; --measure: 20ch; /* eyebrow / helper text */ --measure-q: 20ch; /* the question headline wants to break early, not run wide */ --ease: cubic-bezier(.22, .61, .36, 1); --ease-settle: cubic-bezier(.34, 1.32, .64, 1); /* slight overshoot, used by the liquid */ --t-fast: 140ms; --t-med: 320ms; --t-slow: 900ms; --focus: 2px; /* Neutral ramp, shared. Both brands sit on near-black-on-near-white, so one ramp serves. */ --n-0: #ffffff; --n-5: #f6f5f4; --n-10: #ececea; --n-20: #d8d7d4; --n-40: #a9a8a5; --n-60: #757575; --n-90: #1f1f1f; } /* ---------------------------------------------------------------- Keune * Futura PT is a paid Adobe family and cannot ship in a prototype. Jost is the standard free * Futura revival: same geometric skeleton, same wide capitals. The fallback chain then reaches * for real Futura if the viewer's machine has it, before giving up on Century Gothic. */ [data-brand="keune"] { --font-display: "Jost", "Futura PT", Futura, "Century Gothic", "Trebuchet MS", sans-serif; --font-body: "Jost", "Futura PT", Futura, "Century Gothic", "Trebuchet MS", sans-serif; --weight-display: 300; /* Keune sets headlines light and lets the tracking do the work */ --weight-strong: 500; --track-wordmark: .30em; --track-eyebrow: .20em; --radius: 0px; /* squared, editorial — matches keune.ch's buttons and tiles */ --radius-lg: 0px; --surface: #ffffff; --surface-2: #f7f6f5; --ink: #1a1a1a; --ink-2: #6b6b6b; --ink-3: #a9a8a5; --line: #e4e2e0; --accent: #fe7370; --accent-2: #ffab8f; --accent-3: #fbbb92; --accent-ink: #ffffff; /* text that sits on --accent */ --accent-wash: #fff1ef; /* accent at ~8%, pre-mixed for flat fills */ --accent-grad: linear-gradient(15deg, #fe7370 0%, #ffab8f 73%, #fbbb92 100%); /* The vessel is drawn after Keune's Radiant Gloss: clear glass, white dropper cap, and the glass pipette visible inside. Liquid stays the brand accent rather than the product's own amber, so the fill matches the button the reader is about to press. */ --liquid-top: #ffab8f; --liquid-bottom: #fe7370; --glass: #d1cecb; --cap: #ffffff; --cap-2: #f4f1ee; --cap-line: #cbc7c3; /* Keune sets every button in wide-tracked caps, which is most of what makes the shop look like Keune. Carried as a token so survey.css never asks which brand it is rendering. */ --weight-wordmark: 400; --btn-transform: uppercase; --btn-track: .12em; --btn-size: 13px; } /* ---------------------------------------------------------------- miiki * Poppins is the real thing here — miiki.com loads it from Google Fonts, so the prototype * matches the shop exactly rather than approximating it. */ [data-brand="miiki"] { --font-display: "Poppins", "Helvetica Neue", Arial, sans-serif; --font-body: "Poppins", "Helvetica Neue", Arial, sans-serif; --weight-display: 600; /* miiki sets headlines heavy and tight — the opposite of Keune */ --weight-strong: 500; --track-wordmark: .02em; --track-eyebrow: .16em; --radius: 8px; /* soft, Shopify-modern — matches miiki.com's controls */ --radius-lg: 18px; --surface: #faf9f8; --surface-2: #f2f0ee; --ink: #191919; --ink-2: #6f6f6f; --ink-3: #a5a3a1; --line: #e5e2df; --accent: #108474; --accent-2: #14a08c; --accent-3: #6fc0b3; --accent-ink: #ffffff; --accent-wash: #eaf4f2; --accent-grad: linear-gradient(15deg, #0d6f62 0%, #108474 62%, #14a08c 100%); /* Drawn after miiki's PDRN Active Boost Serum: frosted white body, tall gloss-black pump. Frosted glass genuinely obscures what is inside, so the fill sits under a white veil — still readable as progress, hazy the way the real bottle is. */ --liquid-top: #35a795; --liquid-bottom: #0d6f62; --glass: #cdcac6; --cap: #171717; --cap-2: #2c2c2c; --cap-line: #171717; /* miiki sets buttons in sentence case at reading size — the opposite convention. */ --weight-wordmark: 700; --btn-transform: none; --btn-track: .01em; --btn-size: 15px; } /* ================================================================= the console * Tokens for dashboard.html. Keyed off [data-theme] on , which theme.js sets * synchronously in — see the flash warning there. * * WHY THE BRAND HUES HERE ARE NOT --accent: * --accent (#fe7370 / #108474) was chosen by each shop to sit on white paper. Dropped onto a * near-black console, coral glares and miiki's teal goes muddy — it loses the chroma that makes * it read as a colour at all. So the console carries its own *relatives* of those hues, * re-stepped for each surface. They are meant to differ. Do not "fix" them back to --accent. * * Every value below was computed, not picked, and validated against the surface it sits on with * the dataviz validator (OKLCH lightness band, chroma floor, protan/deutan separation, WCAG * contrast). Three results are load-bearing: * * 1. Marks on a dark surface belong at OKLCH L 0.48–0.67. Brighter "neon" values (L 0.73+) * fail the band: they bloom on black instead of reading as data. * 2. There is NO room for a promoter-green while both brand hues are reserved — every * candidate landed within deltaE 7.3 of miiki's teal for NORMAL vision, and shifting it * yellow collided with Keune's coral under deuteranopia (deltaE 3.7). * 3. Dark is a SELECTED set, not a flip of light. The light band poles need different hues * entirely; an auto-darkened green/red pair fails deuteranopia at deltaE 5.9. * * ⇒ THE CONTAINMENT RULE, which result 2 forces and which the panels must keep: * a brand hue and a band hue NEVER appear in the same panel. * Brand hues => the Keune-vs-miiki panel and its legend. Band hues => everywhere the * promoter/passive/detractor split is drawn. Breaking this puts two colours a colour-blind * reader cannot separate side by side. * * Re-run the validator if you touch any of these: * node /scripts/validate_palette.js "#EE5A52,#0EA88F" --mode dark --surface "#0B0C0F" */ html[data-theme="dark"] { --dash-bg: #0B0C0F; --dash-panel: #131519; --dash-panel-2: #1A1D23; --dash-line: #262A32; --dash-ink: #E9ECF1; --dash-ink-2: #A0A7B4; --dash-ink-3: #6C7381; /* Brand-neutral on purpose: the console's own controls must not look like they belong to Keune or to miiki, or a reader will think the page is filtered when it is not. */ --dash-accent: #4DA3FF; --dash-accent-ink: #06131F; /* The console's one status hue: a missing translation, a Draft question, an unsaved edit. It is NOT a series colour and must never be used as one. Validated on the dark surface — L 0.617 (inside the 0.48–0.67 band for marks on near-black), chroma clears the floor, and it separates from --dash-accent at ΔE 28.8 under protanopia, which is the only other chromatic thing it ever shares a screen with. It collides badly with two hues, and both collisions are avoided by containment rather than by re-picking: against --series-keune it is ΔE 3.5 under deuteranopia, and against --band-promoter ΔE 9.0 — clearing the 8 target but not comfortably. So admin.html carries NO brand hue and NO band hue at all: the brand toggle there is a plain segmented button and identity is carried by the words "Keune" and "miiki". That is the containment rule in CLAUDE.md applied to a third page, not an exception to it. */ --dash-warn: #C4801A; --dash-warn-ink: #FFFFFF; --series-keune: #EE5A52; --series-miiki: #0EA88F; --band-promoter: #34A870; --band-passive: #8A9099; --band-detractor: #C0344F; /* Source mix is ORDINAL, not categorical — the sources are ranked by volume, so one hue at five lightness steps carries the order. A rainbow here would imply a difference in kind. */ --ramp-1: #BBD3FA; --ramp-2: #8FB2F0; --ramp-3: #6690E2; --ramp-4: #4570C8; --ramp-5: #3A5FA8; --dash-grid: #1E222A; --dash-hatch: #3A404B; --dash-shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35); } html[data-theme="light"] { --dash-bg: #F7F7F5; --dash-panel: #FFFFFF; --dash-panel-2: #F1F1EE; --dash-line: #E2E2DE; --dash-ink: #16181C; --dash-ink-2: #5C626C; --dash-ink-3: #8A9099; --dash-accent: #2B6CD4; --dash-accent-ink: #FFFFFF; /* Selected for the light surface, not derived by lightening the dark one — the same reason the band poles are chosen twice. Darker than its dark-mode twin because a mark on paper-white has to go down to be seen, where a mark on near-black has to come up. ΔE 27.3 from the light accent under protanopia. */ --dash-warn: #9A6410; --dash-warn-ink: #FFFFFF; --series-keune: #D64B43; --series-miiki: #0A8C76; /* ⚠ --band-promoter is 2.33:1 against this surface — under the 3:1 mark floor. The validator reports that as a WARN, and a WARN here is an OBLIGATION, not a note: every band segment must carry a visible direct label so identity never rests on the fill alone. Darkening it far enough to clear 3:1 pushes it into --band-detractor's deuteranopia neighbourhood, which is the worse failure. Labels are the cheaper half of that trade. */ --band-promoter: #45B87E; --band-passive: #8A9099; --band-detractor: #A32240; --ramp-1: #7FA3EA; --ramp-2: #5A83D8; --ramp-3: #4063B4; --ramp-4: #2E4A8C; --ramp-5: #213866; --dash-grid: #EAEAE6; --dash-hatch: #C9C9C3; --dash-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05); } /* The console's own type. Neither brand's face — this is an internal tool, and dressing it as Keune would imply the miiki numbers on the same screen are Keune's too. Inter if the machine has it, then the system UI stack; tabular figures everywhere numbers are compared. */ :root { --dash-font: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif; --dash-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; }