/* ============================================================ Kadmon -- Design System Tokens v1.0 Conforms to Kadmon Brandbook v1.0 (brand/kadmon-brandbook-v1.md), sha256 eb9f9acdbb135db2c56db1d4651b5972d4ffc236fd2aa2aafa719577667a30b0 The book is the authority for every rule and value; this file is its compiled form (book section 16.2). tests/brandbook-tokens.test.mjs fails when a --k-* name the book writes in code is not declared here, when a value the book's section 19 states differs here, or when the sha256 above is not the book's or not the last row of ADR-002's Pin register. Import into any product surface (the landing and its demos, the harness, any sales surface) so the identity is one system, not many. Every page under site/ loads site/assets/kadmon-tokens.css, a byte-identical copy that `npm run sync:tokens` writes from THIS file (plan-001 Step 2.2). Edit here, then sync. ============================================================ */ :root { /* --- Brand color --- */ --k-gold: #C4A867; /* Kadmon Gold -- the single accent */ --k-gold-hi: #ECDCAE; /* metallic highlight / hover */ --k-gold-lo: #8C6E38; /* metallic shadow */ --k-space: #0A0E1A; /* deep space -- primary dark ground */ --k-space-2: #10152A; /* lifted panel */ --k-vellum: #ECE6D6; /* warm off-white -- ink on dark */ --k-titanium: #8C93A6; /* cool grey-blue -- secondary text */ --k-hair: #232A42; /* hairline on dark */ /* --- Paper (book section 4.2): cool, never cream --- */ --k-paper: #F5F6F8; --k-paper-2: #EBEDF1; --k-paper-hair: #D5D9E0; --k-paper-muted: #5C6172; /* 5.70:1 on --k-paper */ /* --- State scale (book section 4.5): always with glyph and word --- */ --k-state-ok: #8FBF8F; --k-state-warn: #E0913C; /* distinct from gold */ --k-state-crit: #D08A82; --k-paper-state-ok: #2F6B3F; /* 5.89:1 on --k-paper */ --k-paper-state-warn: #9A5B12; /* 5.01:1 on --k-paper */ --k-paper-state-crit: #A6453A; /* 5.50:1 on --k-paper */ /* --- WhatsApp depiction only (book section 4.8, KB-C08) --- */ --k-wa-ground: #0B141A; --k-wa-in: #1F2C34; --k-wa-out: #005C4B; --k-wa-ink: #E9EDEF; --k-wa-green: #25D366; /* non-text details inside the depiction only */ /* --- Semantic (map any product accent to the brand) --- */ --k-accent: var(--k-gold); --k-bg: var(--k-space); --k-ink: var(--k-vellum); --k-muted: var(--k-titanium); --k-surface: var(--k-space-2); --k-line: var(--k-hair); --k-action: var(--k-gold); --k-action-ink: var(--k-space); --k-action-hover: var(--k-gold-hi); --k-focus: var(--k-gold); --k-scrim: color-mix(in srgb, var(--k-space) 80%, transparent); /* --- Control boundary --- The outline of an interactive control (input, ghost button). NOT the hairline: the hairline is a decorative divider and measures ~1.3:1, far under the 3:1 that WCAG 2.1 SC 1.4.11 asks of a control boundary. One value serves the dark and paper themes and the landing's cream surfaces; tests/tokens.test.mjs computes its contrast against each of them. */ --k-line-control: #6B7186; /* --- Type (book section 5) --- */ --k-font-display: "Michroma","Eurostile","Eurostile Extended","Helvetica Neue",system-ui,sans-serif; --k-font-serif: "Source Serif 4","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; --k-font-mono: "JetBrains Mono","SF Mono",Consolas,ui-monospace,monospace; --k-font-sans: "Source Sans 3","Source Sans Pro",system-ui,-apple-system,"Segoe UI",sans-serif; --k-font-sans-he: "Assistant","Source Sans 3",system-ui,"Segoe UI","Arial Hebrew",sans-serif; --k-font-serif-he: "Frank Ruhl Libre","Source Serif 4",Georgia,serif; --k-font-body: var(--k-font-sans); --k-font-heading: var(--k-font-serif); --k-wordmark-tracking: 0.38em; --k-text-caption: 0.8125rem; --k-text-body: clamp(1rem, 0.9452rem + 0.2247vw, 1.125rem); --k-text-lead: clamp(1.25rem, 1.1404rem + 0.4494vw, 1.5rem); --k-text-h3: clamp(1.5625rem, 1.3708rem + 0.7865vw, 2rem); --k-text-h2: clamp(2rem, 1.6713rem + 1.3483vw, 2.75rem); --k-text-h1: clamp(2.5rem, 1.8427rem + 2.6966vw, 4rem); --k-text-display: clamp(3.125rem, 2.0843rem + 4.2697vw, 5.5rem); --k-leading-body: 1.6; --k-leading-heading: 1.15; --k-leading-display: 1.05; --k-measure: 68ch; /* --- Space and layout (book section 6): 8 x Fibonacci --- */ --k-spacing-hair: 4px; --k-spacing-base: 8px; --k-spacing-tight: 16px; --k-spacing-normal: 24px; --k-spacing-loose: 40px; --k-spacing-section: 64px; --k-spacing-chapter: 104px; --k-spacing-stage: 168px; --k-container: 1180px; --k-gutter: clamp(1.5rem, 0.4045rem + 4.4944vw, 4rem); --k-header-h: 64px; --k-mobile-bar-h: 64px; --k-hit: 44px; /* --- Form language --- */ --k-radius: 2px; /* precise, not rounded -- keep corners tight */ --k-metallic: linear-gradient(135deg, var(--k-gold-hi), var(--k-gold) 50%, var(--k-gold-lo)); /* --- Motion (book section 8.2): named curves, never hand-rolled --- */ --k-ease: cubic-bezier(0.23, 1, 0.32, 1); --k-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --k-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --k-duration-press: 140ms; --k-duration-hover: 150ms; --k-duration-small: 180ms; --k-duration-menu: 200ms; --k-duration-panel: 320ms; --k-duration-reveal: 600ms; --k-duration-origin: 1800ms; --k-stagger: 60ms; --k-press-scale: 0.97; } /* Hebrew pages: the reading and headline faces switch, and the leading opens (book section 5.5). */ :root:lang(he) { --k-font-body: var(--k-font-sans-he); --k-font-heading: var(--k-font-serif-he); --k-leading-body: 1.7; --k-leading-heading: 1.25; --k-leading-display: 1.15; } /* The paper theme (book section 4.4): one theme per page, chosen by the surface table. */ [data-k-theme="paper"] { --k-bg: var(--k-paper); --k-ink: var(--k-space); --k-muted: var(--k-paper-muted); --k-accent: var(--k-gold-lo); --k-surface: var(--k-paper-2); --k-line: var(--k-paper-hair); --k-action: var(--k-space); --k-action-ink: var(--k-paper); --k-action-hover: var(--k-space-2); --k-focus: var(--k-space); --k-state-ok: var(--k-paper-state-ok); --k-state-warn: var(--k-paper-state-warn); --k-state-crit: var(--k-paper-state-crit); } /* Wordmark helper -- "KADMON" in Michroma (book section 3.5, KB-M04) */ .k-wordmark { font-family: var(--k-font-display); text-transform: uppercase; letter-spacing: var(--k-wordmark-tracking); margin-inline-end: calc(-1 * var(--k-wordmark-tracking)); font-weight: 400; } /* Real pages load Michroma (closest free Eurostile Extended) from Google Fonts: Artifacts (CSP-blocked) fall back to the system display stack above. Marks live at brand/kadmon-seal*.svg and kadmon-core*.svg, generated by generate-symbol.py. Screen floors (book section 3.3): Seal >= 375px, Core >= 48px, Core-S >= 16px. */