/* ============================================================================ * Kuickr LANDING design tokens * ---------------------------------------------------------------------------- * Design-system library member: kuickr-landing (spec 35.5). * * REPLACES the "Signal" direction (ink + electric violet, version c119dc7c), * rejected by the founder. That snapshot stays retained and addressable; this is * the current identity. * * DERIVED FROM A MEASURED REVIEW of poolside.ai and speakeasy.com — read at the * stylesheet level, not by impression. Six mechanisms both sites share, all of * them load-bearing below. * * fal.ai was the third reference and could not be fetched (Vercel bot gate), so * the first cut of this file attributed nothing to it. The founder then supplied * a full screenshot, and the decorative palette and hero band below ARE from * fal — read from that image rather than from its stylesheet, which is a weaker * source and is why only the coarse decisions (hue family, blob texture, cool * pale ground) are taken from it and none of the fine ones. * * 1. ONE REVERSIBLE NEUTRAL RAMP, semantics as aliases. Dark mode falls out of * swapping two values; there is no second palette to maintain. * 2. WARM NEUTRALS. Near-black is never #000 and paper is never #fff-only — * both grounds carry a yellow-brown cast. * 3. STRUCTURE IS INK AT ALPHA. Hairlines are the ink colour at 12%/24%, not * grey hexes. Cards are a 1px ring, never a blurred drop shadow. * 4. UPPERCASE IS QUARANTINED to mono micro-type at +0.08em. Headlines are * sentence case with NEGATIVE tracking. Tracking is a function of size: * negative above ~20px, exactly zero at or below 16px. * 5. GRAPHICS ARE CONSTRUCTED, not screenshotted — built from the same * material as the page, so they theme and stay crisp at any DPI. * 6. MOTION IS ENTRY-ONLY and staggered. Nothing loops in the background. * * LIGHT IS PRIMARY, as on both references, with dark as an explicit opt-in via * data-theme (three states: system / light / dark) rather than bare * prefers-color-scheme. * * Scoped: apply class="ks-tokens" to the page root. * * FIVE RULES OF USE, shipped as part of the system: * 1. Terracotta marks RECEIPT and nothing else — the inbound marker, the * running total, the comment anchor, the winning column, and exactly one * primary CTA per band. Never headlines, never section grounds, never * decoration. If a colour is not reporting that something came back from a * stranger, it is ink or stone. * 2. One accent object per band, maximum. Scope it at section level. If two * things in one viewport are terracotta, one of them is wrong. * 3. The accent NEVER changes hue between themes — only --ks-accent-text is * re-tuned for legibility. A signal that means something must stay the same * colour in both. * 4. Structure is never accent-coloured. Borders, rules and card edges use the * hairline roles only. No coloured borders, no gradient as structure, and * --ks-shadow may appear at most twice on a page. * 5. The decorative palette is ORNAMENT AND NOTHING ELSE. --ks-deco-* may * only ever be a background shape. It may not colour text, a border, an * icon, a chart, a state or a control, and no product concept may be * identified by one of these hues. This rule is what keeps rule 1 true: * the moment a decorative colour means something, terracotta stops being * the thing that means "received". * Every --ks-deco-* value is light enough to carry --ks-ink at AA, because * the reference this came from lets shapes sit behind text — legibility, * not avoidance, is what makes that safe. * ========================================================================== */ .ks-tokens { /* ── Type ────────────────────────────────────────────────────────────── TWO REGISTERS, and the choice is live. The serif says "this is a page with prose in it", which is what Kuickr publishes; the bold grotesque is fal's register, which the founder chose for the landing. --ks-display is the serif because that is the system's default voice; a surface that wants the fal register overrides it with --ks-sans at weight 700 rather than introducing a third family. */ --ks-display: "Instrument Serif", ui-serif, Georgia, serif; --ks-display-alt: "Instrument Sans", ui-sans-serif, system-ui, sans-serif; --ks-display-weight-alt: 700; --ks-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; --ks-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* The hero reads as a thesis — 40px phone to 72px desktop. Not 24 (the claim goes unread), not 104 (a frontier-lab flex on a $149 product). */ --ks-size-hero: clamp(2.5rem, 5vw, 4.5rem); --ks-size-section: clamp(2rem, 3.6vw, 3rem); --ks-size-feature: clamp(1.5rem, 2.2vw, 2rem); --ks-size-lead: clamp(1.125rem, 1.4vw, 1.3125rem); --ks-size-body: 1rem; --ks-size-micro: 0.875rem; /* mono uppercase: eyebrow = button = label = meta */ --ks-size-detail: 0.75rem; --ks-track-display: -0.035em; --ks-track-feature: -0.02em; --ks-track-body: 0em; --ks-track-micro: 0.08em; --ks-lh-hero: 1.02; --ks-lh-head: 1.15; --ks-lh-body: 1.6; --ks-lh-micro: 1.2; /* ── Ground — light is primary ─────────────────────────────────────── */ --ks-bone: #faf8f5; /* page ground */ --ks-paper: #ffffff; /* raised band / card */ --ks-ink: #17120e; /* warm near-black — 17.7:1 on bone */ --ks-stone: #5c5550; /* secondary text — 6.8:1 on bone */ /* Structure: ink at alpha, never a grey hex. */ --ks-hairline: rgba(23, 18, 14, 0.12); --ks-rule: rgba(23, 18, 14, 0.24); --ks-shadow: 0 20px 50px rgba(23, 18, 14, 0.07); /* ── Accent — one hue, and it means "received" ─────────────────────── */ --ks-accent: #c04a2a; /* fill; white on it = 4.97:1 */ --ks-accent-text: #a33d20; /* accent AS TEXT on bone = 6.11:1 */ --ks-on-accent: #ffffff; /* ── Decoration (added 2026-08-16, founder instruction) ───────────── Large dithered pixel-blobs bleeding off the band edges, after fal.ai. The four hues exist so texture can be multi-coloured WITHOUT the accent losing its job — see rule 5. Contrast of --ks-ink over each, measured: lime 13.1:1 · cyan 11.1:1 · amber 11.5:1 · violet 8.5:1. */ --ks-deco-lime: #c6e64f; --ks-deco-violet: #b9a3f5; --ks-deco-cyan: #7fd4ee; --ks-deco-amber: #f5c542; --ks-deco-opacity: 1; /* dark mode dims the set rather than restating it */ /* The pale band the hero sits on. Cool on purpose: warm pastels only read as texture against a cool ground, which is why the warm tint failed. */ --ks-hero: #eaf4fa; /* ── Rhythm ────────────────────────────────────────────────────────── */ --ks-max: 1280px; --ks-measure: 640px; --ks-band-y: clamp(4rem, 8vw, 7rem); --ks-pad-x: clamp(1.25rem, 4vw, 3rem); --ks-radius: 6px; /* near-square; nothing rounder than 8px */ --ks-ease: cubic-bezier(.16, 1, .3, 1); --ks-dur: 420ms; } /* Dark: the SAME two values with their roles exchanged. No second palette. */ .ks-tokens[data-theme="dark"], [data-theme="dark"] .ks-tokens { --ks-bone: #17120e; --ks-paper: #201a15; /* raised stays LIGHTER than ground, as in light mode */ --ks-ink: #faf8f5; --ks-stone: #a8a09a; /* 7.3:1 on the dark ground */ /* Hairline opacity RISES in dark — 12%→16%, 24%→30% — or structure vanishes. */ --ks-hairline: rgba(250, 248, 245, 0.16); --ks-rule: rgba(250, 248, 245, 0.30); --ks-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); --ks-accent: #c04a2a; /* rule 3: the hue does not move */ --ks-accent-text: #f08a67; /* re-tuned only for legibility — 7.64:1 */ --ks-on-accent: #ffffff; /* The decorative hues keep their values and lose their intensity: at full strength on a dark ground they stop being texture and become the subject. */ --ks-deco-opacity: .42; --ks-hero: #141b21; } /* A band that stays dark in BOTH themes. Not a mode — a material. Used for the hero and for the RECEIVE step, so the one-directional → bidirectional turn is a change the eye registers before a word is read. */ .ks-inverted { --ks-bone: #17120e; --ks-paper: #201a15; --ks-ink: #faf8f5; --ks-stone: #a8a09a; --ks-hairline: rgba(250, 248, 245, 0.16); --ks-rule: rgba(250, 248, 245, 0.30); --ks-accent-text: #f08a67; }