/* ============================================================ lp-kit tokens — GENERATED, DO NOT EDIT BY HAND. Regenerate: node design-system/lp-kit/generate-tokens.mjs Verify: node design-system/lp-kit/generate-tokens.mjs --check Every value here is copied verbatim from an authoritative source. Nothing is converted, rounded or retyped, so this file cannot disagree with the design system without the generator failing first. Sources mono/gooddesign-system/src/_base.css brand scales + font stacks mono/web-app/app/theme/primitives.css taupe neutrals + numeric scales They share 71 tokens and agreed on all 71 when this was generated. Authority chain: _base.css -> Webflow variables -> this kit -> a page. check-palette.mjs guards the first link; check-lp-page.mjs guards the last. THE ONE THING TO GET RIGHT Body text is taupe-800 (#2b2422). Webflow publishes that same colour under the name DS/Taupe/900, one step higher. Taking "900" from this file gives you #1d1816 — a different, darker colour that looks plausible and is wrong. Use the semantic aliases at the bottom and the question does not arise. Colours are oklch because that is how the sources hold them. The hex in the comment is the documented sRGB value, also verbatim; it is what you type into a Webflow variable. Do not compute one from the other — they disagree on 26 of 70 tokens, in both directions. ============================================================ */ :host, :root { /* ---- Brand scales ---- ---------------------------------------------- */ /* clay */ --clay-100: oklch(0.9095 0.0393 74.779); /* #f1dec5 */ --clay-200: oklch(0.9008 0.0372 66.011); /* #f0dac5 */ --clay-300: oklch(0.7886 0.0779 57.277); /* #e1ae89 */ --clay-500: oklch(0.6006 0.1138 43.755); /* #b86845 */ --clay-700: oklch(0.4261 0.1542 33.762); /* #901d00 */ --clay-800: oklch(0.3524 0.1190 30.115); /* #6c180f */ --clay-900: oklch(0.2897 0.0737 35.667); /* #491b0f */ /* canopy */ --canopy-100: oklch(0.98 0.024 119); /* #f7fcea */ --canopy-300: oklch(0.79 0.086 146); /* #97ca9a */ --canopy-600: oklch(0.68 0.096 147); /* #6ea774 */ --canopy-800: oklch(0.48 0.100 148); /* #306d3c */ --canopy-900: oklch(0.38 0.103 141); /* #1d4e13 */ /* cream */ --cream-0: oklch(1.0 0.0 0); /* #ffffff */ --cream-50: oklch(0.9976 0.0031 99.782); /* #fffef8 */ --cream-100: oklch(0.9868 0.0079 73.746); /* #fefaf5 */ --cream-200: oklch(0.9562 0.0176 73.076); /* #f8efe4 */ --cream-300: oklch(0.9144 0.027 69.278); /* #efe0d0 */ --cream-400: oklch(0.8444 0.0382 75.102); /* #dbc9b1 */ --cream-500: oklch(0.7956 0.0433 75.325); /* #cdb99e */ --cream-600: oklch(0.6849 0.0443 72.898); /* #ab967c */ --cream-700: oklch(0.5687 0.045 71.593); /* #88735a */ --cream-800: oklch(0.4273 0.0378 72.748); /* #5c4c38 */ --cream-900: oklch(0.2729 0.0303 74.571); /* #302516 */ /* gw-grey */ --gw-grey-100: oklch(0.9467 0.0096 74.756); /* #f3eee7 */ --gw-grey-200: oklch(0.9053 0.0088 79.936); /* #e3e0da */ --gw-grey-300: oklch(0.8475 0.0079 70.361); /* #cfcbc5 */ --gw-grey-400: oklch(0.7802 0.0060 73.174); /* #b7b4af */ --gw-grey-500: oklch(0.6968 0.0058 68.692); /* #999793 */ --gw-grey-600: oklch(0.5948 0.0064 54.282); /* #7b7976 */ --gw-grey-700: oklch(0.4946 0.0053 54.919); /* #5f5d5b */ --gw-grey-800: oklch(0.3865 0.0054 68.692); /* #444341 */ --gw-grey-900: oklch(0.3088 0.0133 95.500); /* #2e2d27 */ /* inkstone */ --inkstone-100: oklch(0.9607 0.0188 279.532); /* #eff1ff */ --inkstone-300: oklch(0.7885 0.0699 279.213); /* #b0b6e7 */ --inkstone-600: oklch(0.6736 0.1096 278.303); /* #878fd9 */ --inkstone-800: oklch(0.4801 0.0996 277.079); /* #505795 */ /* grain */ --grain-100: oklch(0.9683 0.0264 87.852); /* #fcf4e1 */ --grain-200: oklch(0.979 0.0164 91.549); /* #fcf8ec */ --grain-300: oklch(0.9426 0.0418 87.365); /* #f8ebcd */ --grain-600: oklch(0.7285 0.1015 86.698); /* #c3a358 */ --grain-800: oklch(0.5166 0.1014 81.654); /* #85610f */ /* peach */ --peach-50: oklch(0.96 0.021 36); /* #ffede8 */ --peach-100: oklch(0.90 0.051 36); /* #ffd4c8 */ --peach-300: oklch(0.73 0.120 40); /* #e88d6d */ --peach-600: oklch(0.62 0.143 39); /* #cb623f */ --peach-800: oklch(0.50 0.129 50); /* #9b4805 */ /* teal */ --teal-50: oklch(0.96 0.025 181); /* #e1f8f3 */ --teal-100: oklch(0.92 0.070 182); /* #b2f6e9 */ --teal-300: oklch(0.80 0.138 190); /* #02d9d1 */ --teal-600: oklch(0.72 0.110 190); /* #39bab4 */ --teal-800: oklch(0.50 0.087 189); /* #00736e */ /* sage */ --sage-100: oklch(0.92 0.046 121); /* #e0eac8 */ --sage-300: oklch(0.80 0.080 121); /* #b6c68c */ --sage-600: oklch(0.68 0.099 119); /* #91a158 */ --sage-800: oklch(0.50 0.070 119); /* #5f693a */ /* pink */ --pink-50: oklch(0.96 0.025 349); /* #ffebf4 */ --pink-100: oklch(0.91 0.054 349); /* #ffd4e8 */ --pink-300: oklch(0.80 0.095 0); /* #f1a4bb */ --pink-600: oklch(0.70 0.135 3); /* #e27896 */ --pink-800: oklch(0.51 0.115 6); /* #9b465c */ /* apricot */ --apricot-50: oklch(0.96 0.020 75); /* #faf0e3 */ --apricot-100: oklch(0.92 0.071 78); /* #ffdfaf */ --apricot-300: oklch(0.80 0.120 78); /* #e8b45e */ --apricot-600: oklch(0.68 0.140 78); /* #c78b0a */ --apricot-800: oklch(0.50 0.107 73); /* #885800 */ /* wisteria */ --wisteria-50: oklch(0.96 0.025 314); /* #f8edfe */ --wisteria-100: oklch(0.92 0.060 315); /* #f3d8ff */ --wisteria-300: oklch(0.82 0.122 310); /* #dbadff */ --wisteria-600: oklch(0.72 0.150 305); /* #bb8aef */ --wisteria-800: oklch(0.50 0.120 302); /* #70509b */ /* ---- Taupe neutrals ---- -------------------------------------------- Surfaces are cream; TEXT IS TAUPE. Not gw-grey — they look alike and sit on opposite sides of neutral, so gw-grey gives subtly cool text on a warm page. */ --taupe-50: oklch(0.986 0.002 67.8); --taupe-100: oklch(0.96 0.002 17.2); --taupe-200: oklch(0.922 0.005 34.3); --taupe-300: oklch(0.868 0.007 39.5); --taupe-400: oklch(0.714 0.014 41.2); /* #aba09c DS/Taupe/500 muted — 2.55:1, decoration only */ --taupe-500: oklch(0.547 0.021 43.1); --taupe-600: oklch(0.438 0.017 39.3); /* #5b4f4b DS/Taupe/700 secondary text */ --taupe-700: oklch(0.367 0.016 35.7); --taupe-800: oklch(0.268 0.011 36.5); /* #2b2422 DS/Taupe/900 PRIMARY TEXT */ --taupe-900: oklch(0.214 0.009 43.1); --taupe-950: oklch(0.147 0.004 49.3); /* ---- Status ---- --------------------------------------------------- Functional states only. Never a brand moment, never a CTA. */ /* error — error-50, error-200, error-600 point at Tailwind's palette and are not resolvable here */ --error-100: #fff3f3; --error-300: #f2b8b5; --error-500: #ff8983; --error-700: #da1e28; --error-900: #8a1a16; /* success — success-200, success-400, success-600 point at Tailwind's palette and are not resolvable here */ --success-100: #f2fcef; --success-300: #beefbb; --success-500: #44c265; --success-700: #128937; --success-900: #00522c; /* ---- Declared exceptions ---- --------------------------------------- Not brand colours. Each one is a decision, not an accident. The page check reads this section, so anything here passes and anything else fails. */ /* Anthropic accent on one card. Kept as an exception, decided 2026-08-16 (Chris). Nothing in the palette is near it: the closest brand purple is wisteria-600 at dE76 30.6 and inkstone-600 at 45.6, against ~2.3 for "only visible side by side". Converging is a redesign of the card, not a token swap — and wisteria is categorical-only per DESIGN.md. */ --claude-purple: oklch(0.55 0.20 295); /* ---- Type ---- ----------------------------------------------------- */ --font-sans: "Haas Grotesk Text Web", ui-sans-serif, system-ui, sans-serif; --font-serif: "Domaine Text", ui-serif, Georgia, serif; --font-serif-display: "Domaine Display", ui-serif, Georgia, serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --text-1: 14px; --text-2: 16px; --text-3: 18px; --text-4: 20px; --text-5: 24px; --text-6: 28px; --text-7: 32px; --text-8: 36px; --text-9: 40px; --leading-1: 20px; --leading-2: 24px; --leading-3: 26px; --leading-4: 28px; --leading-5: 32px; --leading-6: 36px; --leading-7: 40px; --leading-8: 44px; --leading-9: 48px; /* ---- Radius ---- --------------------------------------------------- 44px is the signature pill for every interactive primary surface. */ --radius-sm: 4px; /* --radius-1 */ --radius-md: 8px; /* --radius-2 */ --radius-lg: 12px; /* --radius-3 */ --radius-xl: 16px; /* --radius-4 */ --radius-2xl: 20px; /* --radius-5 */ --radius-3xl: 24px; /* _base.css calc only — no numeric counterpart */ --radius-4xl: 44px; /* --radius-11 */ --radius-full: 9999px; /* --radius-full */ /* ---- Semantic aliases ---- ------------------------------------------ Use these, not the raw steps. They are the whole reason the taupe numbering trap cannot bite you: say what the colour is for and the step is already chosen. Raw steps are for the cases these do not cover. */ --lp-canvas: var(--cream-100); --lp-raised: var(--cream-200); --lp-card: var(--taupe-50); --lp-border: var(--cream-300); --lp-text: var(--taupe-800); --lp-text-secondary: var(--taupe-600); --lp-text-muted: var(--taupe-400); --lp-text-on-clay: var(--cream-100); --lp-action: var(--clay-700); --lp-action-hover: var(--clay-800); --lp-accent: var(--canopy-900); --lp-info: var(--inkstone-800); --lp-font-heading: var(--font-serif-display); --lp-font-heading-small: var(--font-serif); --lp-font-body: var(--font-sans); }