/* -------------------------------------------------------------------------- VENDORED COPY. Do not edit here. version 0.4.0 warning An edit made in this copy is lost on the next sync. -------------------------------------------------------------------------- */ [data-style="editorial"] { color-scheme: light; --palette-paper: #FAF8F3; --palette-peach: #F5E2D5; --palette-peach-deep: #EDD3BF; --palette-ink: #1A1A1A; --palette-ink-soft: #3D3A35; --palette-ink-faint: #6B655B; --palette-line: #E5DFD2; --palette-line-deep: #D9D0BD; --palette-accent: #8C4A2C; --palette-accent-deep: #6E3A22; --palette-accent-soft: #F5E9DF; /* GATE CORRECTION 2026-09-21. DESIGN.md Part 2.2 proposed #FB7185 for the focus ring. Measured against --color-bg it is 2.54:1 and the CONTRACT requires 3:1, so the proposal is corrected to the nearest rose that clears: #F43F5E at 3.46:1. The source site shipped no focus token, so nothing live changed colour. */ --palette-rose: #F43F5E; --palette-shadow: #1A1A1A; /* shadows mix from this, never from ink, which flips */ } /* ---- TOKEN SET 2 · primitives, dark ---------------------------------------- The same names as set 1. The page writes data-theme on before first paint. Measured on --color-bg #17150F: text 15.94:1, muted 11.37, faint 6.98, accent 6.52, accent-deep 8.96, focus 6.78; paper on accent 6.52. */ [data-style="editorial"][data-theme="dark"] { color-scheme: dark; --palette-paper: #17150F; --palette-peach: #241E18; --palette-peach-deep: #2E271F; --palette-ink: #F4EFE6; --palette-ink-soft: #D4CBBD; --palette-ink-faint: #A89F91; --palette-line: #2F2A23; --palette-line-deep: #4A4238; --palette-accent: #D08A64; --palette-accent-deep: #E6A886; /* the higher-contrast step, so lighter here */ --palette-accent-soft: #2B2019; --palette-rose: #FB7185; --palette-shadow: #000000; } /* ---- TOKEN SET 3 · semantic, written once for both modes ------------------ */ [data-style="editorial"] { /* ---- layer 2 · surface and text -------------------------------------- */ --color-bg: var(--palette-paper); --color-surface: var(--palette-paper); --color-surface-alt: var(--palette-peach); --color-surface-media: var(--palette-peach-deep); --color-text: var(--palette-ink); --color-text-muted: var(--palette-ink-soft); --color-text-faint: var(--palette-ink-faint); --color-text-inverse: var(--palette-paper); --color-accent: var(--palette-accent); --color-accent-deep: var(--palette-accent-deep); --color-accent-soft: var(--palette-accent-soft); --color-border: var(--palette-line); --color-border-strong: var(--palette-line-deep); --color-focus: var(--palette-rose); /* ---- layer 2 · type --------------------------------------------------- */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --font-hand: "Caveat", "Bradley Hand", cursive; --display-axes: "opsz" 144, "SOFT" 0, "WONK" 0; /* TYPE SCALE, regenerated 2026-09-21 per styles/CONTRACT.md. base 16px at 375 and 17px at 1440 · ratio 1.18 small, 1.26 large anchors 375px and 1440px · every fluid step is a linear interpolation between them, so the ladder cannot cross at any width. The values DESIGN.md 2.2 recorded were not a scale: their step ratios ran 1.70, 1.14, 1.47, 1.25, 1.34, and --text-body-lg collapsed into --text-body at 375px. Display topped out at 92px; it now tops out at 68. */ --text-display: clamp(2.7rem, 2.153rem + 2.332vw, 4.252rem); /* 43.2 to 68.0 */ --text-heading-xl: clamp(2.288rem, 1.905rem + 1.632vw, 3.374rem); /* 36.6 to 54.0 */ --text-heading-lg: clamp(1.939rem, 1.678rem + 1.111vw, 2.678rem); /* 31.0 to 42.8 */ --text-heading-md: clamp(1.643rem, 1.473rem + 0.7247vw, 2.125rem); /* 26.3 to 34.0 */ --text-card: clamp(1.392rem, 1.289rem + 0.4423vw, 1.687rem); /* 22.3 to 27.0 */ --text-body-lg: clamp(1.18rem, 1.124rem + 0.2385vw, 1.339rem); /* 18.9 to 21.4 */ --text-body: 16px; /* fixed: base */ --text-body-sm: 14px; /* fixed */ --text-caption: 12px; /* fixed */ --text-eyebrow: 11px; /* fixed */ --leading-display: 1.05; --leading-body: 1.6; --tracking-display: -0.02em; --tracking-body: 0em; --tracking-eyebrow: 0.18em; --eyebrow-case: uppercase; /* the source site sets eyebrows uppercase */ /* ---- layer 2 · shape --------------------------------------------------- */ --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 22px; --radius-full: 999px; --border-width: 1px; --border-style: solid; /* ---- layer 2 · depth --------------------------------------------------- */ --shadow-rest: none; --shadow-raise: 0 10px 22px color-mix(in oklch, var(--palette-shadow) 12%, transparent); --shadow-high: 0 18px 36px color-mix(in oklch, var(--palette-shadow) 18%, transparent); --shadow-modal: 0 32px 64px color-mix(in oklch, var(--palette-shadow) 50%, transparent); /* ---- layer 2 · rhythm -------------------------------------------------- */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-base: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 72px; --max: 1240px; --reading: 720px; --gutter: 24px; /* ---- layer 2 · motion --------------------------------------------------- */ --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 320ms; --ease: ease; --lift: -3px; /* ---- layer 2 · atmosphere ------------------------------------------------ */ --atmosphere: field-v2; --field-bg: #0B0D10; --field-particle: var(--palette-rose); /* ---- layer 3 · component bends ------------------------------------------- */ /* editorial bends nothing. Every component token falls back to its layer 2 default, which is what makes it the reference style. */ } [data-style="civic"] { /* ---- layer 1 · palette primitives ------------------------------------ */ --palette-paper: #F2E8D4; --palette-cream: #FBF6EA; --palette-sage: #A7B0A0; --palette-clay: #C57B57; --palette-brass: #B08D4F; --palette-ink: #23291F; --palette-line: #D8C9AC; /* GATE CORRECTION 2026-09-21, two steps. The artifact's stone is #7A7166, which measures 3.94:1 against --color-bg, below the AA 4.5:1 the CONTRACT requires of --color-text-muted. The toggle frame is still shipping that failing value. Darkening it alone was not enough. Option A carries one muted grey, and the CONTRACT asks for three text levels (text, muted, faint) legible over three surface levels (cream, paper, wheat). Read on the darkest of those, faint came in at 4.20:1. Lightening the wheat instead would have fixed the text and destroyed the panel, dropping it to 1.04:1 against bg. So the ramp is rebuilt with two stops rather than one, keeping the hue and the ladder order (muted more prominent than faint): stone #5F5649 muted, 5.93:1 on bg stone-soft #665D51 faint, 5.31:1 on bg and 4.75:1 on wheat This is the largest departure from the artifact in this file and the reason is recorded here rather than buried. */ --palette-stone: #5F5649; --palette-stone-soft: #665D51; --palette-clay-deep: #8A4A2B; --palette-clay-soft: #F1DDD0; --palette-wheat: #E8DCC0; --palette-wheat-deep:#DCCDA9; /* ---- layer 2 · surface and text -------------------------------------- */ --color-bg: var(--palette-paper); --color-surface: var(--palette-cream); --color-surface-alt: var(--palette-wheat); --color-surface-media: var(--palette-wheat-deep); --color-text: var(--palette-ink); --color-text-muted: var(--palette-stone); --color-text-faint: var(--palette-stone-soft); --color-text-inverse: var(--palette-cream); --color-accent: var(--palette-clay); --color-accent-deep: var(--palette-clay-deep); --color-accent-soft: var(--palette-clay-soft); --color-border: var(--palette-line); --color-border-strong: var(--palette-sage); --color-focus: var(--palette-clay-deep); /* ---- layer 2 · type --------------------------------------------------- */ --font-display: "Gulax", "Fraunces", Georgia, serif; --font-body: "Space Grotesk", system-ui, sans-serif; --font-eyebrow: "Aldrich", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* TYPE SCALE, regenerated 2026-09-21 per styles/CONTRACT.md. base 17px at both anchors * ratio 1.16 small, 1.24 large anchors 375px and 1440px * every fluid step is a linear interpolation between them, so the ladder cannot cross at any width. The toggle frame's values were not a scale: step ratios ran 1.52, 1.53, 1.25, 1.18, 1.07, and --text-card (20.8px) overtook --text-heading-md (20px) at 375px, inverting the ladder. */ --text-display: clamp(2.589rem, 2.14rem + 1.914vw, 3.862rem); /* 41.4 to 61.8 */ --text-heading-xl: clamp(2.232rem, 1.921rem + 1.327vw, 3.115rem); /* 35.7 to 49.8 */ --text-heading-lg: clamp(1.924rem, 1.717rem + 0.8836vw, 2.512rem); /* 30.8 to 40.2 */ --text-heading-md: clamp(1.658rem, 1.529rem + 0.5519vw, 2.026rem); /* 26.5 to 32.4 */ --text-card: clamp(1.43rem, 1.358rem + 0.3065vw, 1.634rem); /* 22.9 to 26.1 */ --text-body-lg: clamp(1.232rem, 1.203rem + 0.1277vw, 1.317rem); /* 19.7 to 21.1 */ --text-body: 17px; /* fixed: base */ --text-body-sm: 15px; /* fixed */ --text-caption: 13px; /* fixed */ --text-eyebrow: 12px; /* fixed */ --leading-display: 1.06; --leading-body: 1.6; --tracking-display: 0em; --tracking-body: 0em; --tracking-eyebrow: 0.28em; --eyebrow-case: uppercase; /* Option A sets eyebrows uppercase */ /* ---- layer 2 · shape --------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 28px; --radius-full: 999px; --border-width: 1px; --border-style: solid; /* ---- layer 2 · depth --------------------------------------------------- */ --shadow-rest: none; --shadow-raise: 0 8px 20px color-mix(in oklch, var(--palette-ink) 10%, transparent); --shadow-high: 0 16px 34px color-mix(in oklch, var(--palette-ink) 16%, transparent); --shadow-modal: 0 30px 60px color-mix(in oklch, var(--palette-ink) 44%, transparent); /* ---- layer 2 · rhythm -------------------------------------------------- */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-base: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --max: 1160px; --reading: 720px; --gutter: clamp(1rem, 3.5vw, 4rem); /* ---- layer 2 · motion --------------------------------------------------- */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 300ms; --ease: ease; --lift: 0px; /* ---- layer 2 · atmosphere ------------------------------------------------ */ --atmosphere: warm-radial; --atmosphere-layer: radial-gradient(120% 80% at 100% 0%, color-mix(in oklab, var(--palette-brass) 8%, transparent), transparent 60%), radial-gradient(100% 70% at 0% 100%, color-mix(in oklab, var(--palette-ink) 4%, transparent), transparent 55%); /* ---- layer 3 · component bends ------------------------------------------- */ /* The artifact bent these with body[data-option="a"] selector overrides. DESIGN.md Part 2.1 names that as its one flaw, so they move into tokens. */ --heading-weight: 400; /* Gulax ships one weight; the artifact reset h1-h4 from 700 to 400 */ --nav-bg: color-mix(in oklab, var(--color-bg) 91%, transparent); --nav-blur: 8px; --nav-border: var(--border-width) var(--border-style) var(--color-border); --nav-radius: 0px; --nav-shadow: none; --nav-link-font: var(--font-body); --card-radius: var(--radius-lg); --card-shadow: var(--shadow-rest); --card-border: var(--border-width) var(--border-style) var(--color-border); --btn-border: var(--border-width) var(--border-style) var(--color-border-strong); --btn-shadow-rest: none; --btn-radius: var(--radius-full); --btn-weight: 600; --badge-font: var(--font-eyebrow); --badge-border: var(--border-width) var(--border-style) var(--color-border); } [data-style="grid"] { color-scheme: light; --palette-cream: #F4EFE3; --palette-surface: #FEFEFB; --palette-navy: #2B3A8C; --palette-orange: #E8743B; --palette-ink: #26262E; --palette-slate: #5A5A66; --palette-slate-faint: #63636F; --palette-border: #E3D9C6; --palette-orange-deep: #A8481B; --palette-orange-soft: #FBE4D8; --palette-shell: #EDE6D6; --palette-shell-deep: #E0D7C2; --palette-band: #26262E; /* the dark section; the ink it borrowed until 2026-09-29 */ --palette-band-ink: #FEFEFB; /* the hub hues, carried because the artifact defines them and a later component may need a categorical ramp */ --palette-hub-green: #5BA86B; --palette-hub-teal: #3FA6A0; --palette-hub-purple: #8A6FB0; --palette-hub-yellow: #F2C14E; --palette-hub-red: #D9534F; } /* ---- TOKEN SET 2 · primitives, dark ---------------------------------------- The same names as set 1. Measured on --color-bg #13151F: text 15.14:1, heading 7.42, muted 10.52, faint 6.88, accent 6.06, accent-deep 9.11. */ [data-style="grid"][data-theme="dark"] { color-scheme: dark; --palette-cream: #13151F; --palette-surface: #1B1E2B; --palette-navy: #93A1EE; /* periwinkle: headings, offsets and dots read on dark */ --palette-ink: #EEEAE0; --palette-slate: #C4C4CF; --palette-slate-faint: #9E9EAD; --palette-border: #2F3448; --palette-orange-deep: #F5A574; /* the higher-contrast step, so lighter here */ --palette-orange-soft: #3A2418; --palette-shell: #222637; --palette-shell-deep: #2A2F45; --palette-band: #0C0E15; /* stays darker than the page, so the band still reads as a band */ --palette-band-ink: #EEEAE0; } /* ---- TOKEN SET 3 · semantic, written once for both modes ------------------ */ [data-style="grid"] { /* ---- layer 2 · surface and text -------------------------------------- */ --color-bg: var(--palette-cream); --color-surface: var(--palette-surface); --color-surface-alt: var(--palette-shell); --color-surface-media: var(--palette-shell-deep); --color-text: var(--palette-ink); --color-heading: var(--palette-navy); --color-text-muted: var(--palette-slate); --color-text-faint: var(--palette-slate-faint); --color-text-inverse: var(--palette-surface); --color-accent: var(--palette-orange); --color-accent-deep: var(--palette-orange-deep); --color-accent-soft: var(--palette-orange-soft); --color-border: var(--palette-border); --color-border-strong: var(--palette-navy); --color-focus: var(--palette-orange-deep); /* the dark band hosts paint behind featured work. Declared 2026-09-29: without it a host fell back to --color-text, which turns cream in dark mode. */ --field-bg: var(--palette-band); --field-ink: var(--palette-band-ink); --field-particle: var(--palette-orange); /* ---- layer 2 · type --------------------------------------------------- */ /* Option B's own type set, from applyPresetFonts() in the source frame. The first extraction read the :root block and took the fonts declared there, which are Option A's. The source applies each option's faces from a JS preset at runtime, so the CSS alone shows one type system where the artifact has two. Corrected 2026-09-21 after a review asked why grid was using civic's typeface. */ --font-display: "Outfit", system-ui, sans-serif; --font-body: "DM Sans", system-ui, sans-serif; --font-eyebrow: "Familjen Grotesk", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* TYPE SCALE, regenerated 2026-09-21 per styles/CONTRACT.md. base 17px at both anchors * ratio 1.16 small, 1.24 large anchors 375px and 1440px * every fluid step is a linear interpolation between them, so the ladder cannot cross at any width. The toggle frame's values were not a scale: step ratios ran 1.52, 1.53, 1.25, 1.18, 1.07, and --text-card (20.8px) overtook --text-heading-md (20px) at 375px, inverting the ladder. */ --text-display: clamp(2.589rem, 2.14rem + 1.914vw, 3.862rem); /* 41.4 to 61.8 */ --text-heading-xl: clamp(2.232rem, 1.921rem + 1.327vw, 3.115rem); /* 35.7 to 49.8 */ --text-heading-lg: clamp(1.924rem, 1.717rem + 0.8836vw, 2.512rem); /* 30.8 to 40.2 */ --text-heading-md: clamp(1.658rem, 1.529rem + 0.5519vw, 2.026rem); /* 26.5 to 32.4 */ --text-card: clamp(1.43rem, 1.358rem + 0.3065vw, 1.634rem); /* 22.9 to 26.1 */ --text-body-lg: clamp(1.232rem, 1.203rem + 0.1277vw, 1.317rem); /* 19.7 to 21.1 */ --text-body: 17px; /* fixed: base */ --text-body-sm: 15px; /* fixed */ --text-caption: 13px; /* fixed */ --text-eyebrow: 12px; /* fixed */ --leading-display: 1.06; --leading-body: 1.6; --tracking-display: 0em; --tracking-body: 0em; --tracking-eyebrow: 0.02em; /* Option B, against civic's 0.28em */ /* --eyebrow-case is not in styles/CONTRACT.md layer 2 and carries a real difference: civic sets eyebrows uppercase, grid leaves them as written. Flattening it was half of why the two styles looked alike. Reported in FEEDBACK.md rather than hidden. */ --eyebrow-case: none; /* ---- layer 2 · shape --------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 28px; --radius-full: 999px; --border-width: 2px; --border-style: solid; /* ---- layer 2 · depth, hard offset rather than ambient ------------------- */ --shadow-rest: 2px 2px 0 var(--palette-navy); --shadow-raise: 4px 4px 0 var(--palette-navy); --shadow-high: 6px 6px 0 var(--palette-navy); --shadow-modal: 10px 10px 0 var(--palette-navy); /* ---- layer 2 · rhythm -------------------------------------------------- */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-base: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --max: 1160px; --reading: 720px; --gutter: clamp(1rem, 3.5vw, 4rem); /* ---- layer 2 · motion --------------------------------------------------- */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 300ms; --ease: ease; --lift: 0px; /* ---- layer 2 · atmosphere ------------------------------------------------ */ --atmosphere: dot-grid; --atmosphere-layer: radial-gradient(color-mix(in oklab, var(--palette-navy) 16%, transparent) 1.2px, transparent 1.3px); --atmosphere-size: 26px 26px; --atmosphere-position: -13px -13px; /* ---- layer 3 · component bends ------------------------------------------- */ /* The artifact bent these with body[data-option="b"] selector overrides, including the mono nav. DESIGN.md Part 2.1 names that as its one flaw, so each one moves into a token here. */ --heading-weight: 700; --nav-bg: var(--color-surface); --nav-blur: 0px; --nav-border: var(--border-width) var(--border-style) var(--color-heading); --nav-radius: var(--radius-full); --nav-shadow: var(--shadow-high); --nav-link-font: var(--font-mono); /* the mono nav, as a token */ --card-radius: var(--radius-md); --card-shadow: var(--shadow-rest); --card-border: var(--border-width) var(--border-style) var(--color-heading); --btn-border: var(--border-width) var(--border-style) var(--color-heading); --btn-shadow-rest: var(--shadow-rest); --btn-radius: var(--radius-md); --btn-weight: 700; --badge-font: var(--font-mono); --badge-border: var(--border-width) var(--border-style) var(--color-heading); } [data-style="ember"] { color-scheme: light; --palette-brand: #FE6A45; /* the mark. Fills and graphics, never text here */ --palette-paper: #FBF7F3; --palette-card: #FFFDFB; --palette-blush: #FCEAE2; --palette-blush-deep: #F7D8CB; --palette-ink: #1D1512; --palette-ink-soft: #4B3F39; --palette-ink-faint: #6B5D55; --palette-on-accent: #FFFFFF; --palette-ember: #CA2901; /* solved: 4.6:1 minimum on paper, card, blush, wash */ --palette-ember-deep: #A32000; --palette-wash: #FFE6DD; --palette-line: #EEE2D9; --palette-line-deep: #D7C3B6; --palette-band: #141211; /* near-neutral: a brown band under orange read as dusty */ --palette-band-ink: #FBF1EC; } /* ---- TOKEN SET 2 · primitives, dark -------------------------------------- The same names as set 1, dark values. The page writes data-theme on before first paint: the visitor's stored choice, else their system setting. */ [data-style="ember"][data-theme="dark"] { color-scheme: dark; --palette-paper: #121110; --palette-card: #1A1817; --palette-blush: #24201E; --palette-blush-deep: #2E2926; --palette-ink: #F7EFEA; --palette-ink-soft: #D2C4BB; --palette-ink-faint: #AE9F96; --palette-on-accent: #121110; --palette-ember: #FE6A45; --palette-ember-deep: #FF8A6B; --palette-wash: #33201A; --palette-line: #2F2B29; --palette-line-deep: #4D4744; --palette-band: #0A0909; --palette-band-ink: #F7EFEA; } /* ---- TOKEN SET 3 · semantic, one set for both themes ---------------------- Components read only these. Each points at a primitive by name, so the same line resolves to the light value or the dark value depending on which primitive set is active. Nothing below this line changes between themes. */ [data-style="ember"] { /* surface and text */ --color-bg: var(--palette-paper); --color-surface: var(--palette-card); --color-surface-alt: var(--palette-blush); --color-surface-media: var(--palette-blush-deep); --color-text: var(--palette-ink); --color-text-muted: var(--palette-ink-soft); --color-text-faint: var(--palette-ink-faint); --color-text-inverse: var(--palette-on-accent); --color-accent: var(--palette-ember); --color-accent-deep: var(--palette-ember-deep); --color-accent-text: var(--palette-ember); /* accent text and the outline around it */ --color-brand: var(--palette-brand); /* the logo; equals the text orange in dark mode */ --color-accent-soft: var(--palette-wash); --color-border: var(--palette-line); --color-border-strong: var(--palette-line-deep); --color-focus: var(--palette-ember); /* type */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --display-axes: "opsz" 144, "SOFT" 0, "WONK" 0; /* Same ladder as editorial (375px and 1440px anchors, 1.18 and 1.26), so the type-scale gate holds by construction. Copied, not inherited. */ --text-display: clamp(2.7rem, 2.153rem + 2.332vw, 4.252rem); --text-heading-xl: clamp(2.288rem, 1.905rem + 1.632vw, 3.374rem); --text-heading-lg: clamp(1.939rem, 1.678rem + 1.111vw, 2.678rem); --text-heading-md: clamp(1.643rem, 1.473rem + 0.7247vw, 2.125rem); --text-card: clamp(1.392rem, 1.289rem + 0.4423vw, 1.687rem); --text-body-lg: clamp(1.18rem, 1.124rem + 0.2385vw, 1.339rem); --text-body: 16px; --text-body-sm: 14px; --text-caption: 12px; --text-eyebrow: 11px; --leading-display: 1.05; --leading-body: 1.6; --tracking-display: -0.02em; --tracking-body: 0em; --tracking-eyebrow: 0.14em; --eyebrow-case: uppercase; /* shape */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 24px; --radius-full: 999px; --border-width: 1px; --border-style: solid; /* depth. Shadows mix from the band colour, which stays dark in both modes, so depth still reads on the dark paper. */ --shadow-rest: none; --shadow-raise: 0 10px 22px color-mix(in oklch, var(--palette-band) 14%, transparent); --shadow-high: 0 18px 40px color-mix(in oklch, var(--palette-band) 22%, transparent); --shadow-modal: 0 32px 64px color-mix(in oklch, var(--palette-band) 55%, transparent); /* rhythm */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-base: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 72px; --max: 1240px; --reading: 720px; --gutter: 24px; /* motion */ --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 320ms; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --lift: -4px; /* atmosphere. The band is the dark section; it stays dark in both modes and its particles are the brand orange, which clears 6.4:1 on it. */ --atmosphere: field-v2; --field-bg: var(--palette-band); --field-particle: var(--palette-brand); --field-ink: var(--palette-band-ink); } [data-style="galaxy"] { color-scheme: light; --palette-violet: #6C5CE7; /* the brand. Fills and outlines here */ --palette-violet-deep: #5443C9; --palette-violet-text: #5443C9; /* 4.5:1 or better on paper, card and lavender */ --palette-lavender: #C4B5FD; --palette-paper: #FAFAFA; --palette-card: #FFFFFF; --palette-mist: #EDE9FE; --palette-mist-deep: #DDD6FE; --palette-ink: #09090B; --palette-ink-soft: #3F3F46; --palette-ink-faint: #52525B; --palette-on-accent: #FFFFFF; --palette-line: #E4E4E7; --palette-line-deep: #C4B5FD; --palette-star: #6C5CE7; /* stars on paper: violet, and mixed down hard below */ --palette-star-alpha: 22%; --palette-space: #0F0F23; /* the dark band; stays deep space in both modes */ --palette-space-ink: #EDE9FE; } /* ---- TOKEN SET 2 · primitives, dark: the galaxy ---------------------------- Measured on --color-bg #0B0A18: text 17.85:1, muted 11.86, faint 7.83, violet 6.93, inverse on violet 6.93, focus 6.93. */ [data-style="galaxy"][data-theme="dark"] { color-scheme: dark; --palette-violet: #9B8AFB; --palette-violet-deep: #B9ADFF; /* the higher-contrast step, so lighter here */ --palette-violet-text: #9B8AFB; --palette-lavender: #C4B5FD; /* same value: particles on the band in both modes */ --palette-paper: #0B0A18; --palette-card: #13122A; --palette-mist: #1A1A2E; --palette-mist-deep: #232244; --palette-ink: #F4F3FF; --palette-ink-soft: #C9C6E6; --palette-ink-faint: #A3A0C4; --palette-on-accent: #0B0A18; --palette-line: #25243F; --palette-line-deep: #3B3966; --palette-star: #F4F3FF; --palette-star-alpha: 55%; --palette-space: #06060F; --palette-space-ink: #EDE9FE; } /* ---- TOKEN SET 3 · semantic, written once for both modes ------------------ */ [data-style="galaxy"] { /* surface and text */ --color-bg: var(--palette-paper); --color-surface: var(--palette-card); --color-surface-alt: var(--palette-mist); --color-surface-media: var(--palette-mist-deep); --color-text: var(--palette-ink); --color-text-muted: var(--palette-ink-soft); --color-text-faint: var(--palette-ink-faint); --color-text-inverse: var(--palette-on-accent); --color-accent: var(--palette-violet); --color-accent-deep: var(--palette-violet-deep); --color-accent-text: var(--palette-violet-text); /* violet text and the outline around it */ --color-accent-soft: var(--palette-mist); --color-border: var(--palette-line); --color-border-strong: var(--palette-line-deep); --color-focus: var(--palette-violet); /* type. A heavy geometric sans for display, a grotesk for reading, and the source's retro face for the small caps line above a title. */ --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-body: "Space Grotesk", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-eyebrow: "Aldrich", "Space Grotesk", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* Same ladder as editorial (375px and 1440px anchors, 1.18 and 1.26), so the type-scale gate holds by construction. Copied, not inherited. */ --text-display: clamp(2.7rem, 2.153rem + 2.332vw, 4.252rem); --text-heading-xl: clamp(2.288rem, 1.905rem + 1.632vw, 3.374rem); --text-heading-lg: clamp(1.939rem, 1.678rem + 1.111vw, 2.678rem); --text-heading-md: clamp(1.643rem, 1.473rem + 0.7247vw, 2.125rem); --text-card: clamp(1.392rem, 1.289rem + 0.4423vw, 1.687rem); --text-body-lg: clamp(1.18rem, 1.124rem + 0.2385vw, 1.339rem); --text-body: 16px; --text-body-sm: 14px; --text-caption: 12px; --text-eyebrow: 12px; --leading-display: 1.04; --leading-body: 1.6; --tracking-display: -0.035em; --tracking-body: 0em; --tracking-eyebrow: 0.12em; --eyebrow-case: uppercase; /* shape. Soft, rounder than ember: the source's pills and nodes. */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 28px; --radius-full: 999px; --border-width: 1px; --border-style: solid; /* depth. Shadows mix from deep space, which stays dark in both modes; the raised step adds a faint violet glow, the source's node halo. */ --shadow-rest: none; --shadow-raise: 0 10px 24px color-mix(in oklch, var(--palette-space) 16%, transparent), 0 0 0 1px color-mix(in oklch, var(--palette-violet) 18%, transparent); --shadow-high: 0 18px 40px color-mix(in oklch, var(--palette-space) 24%, transparent), 0 0 24px color-mix(in oklch, var(--palette-violet) 22%, transparent); --shadow-modal: 0 32px 64px color-mix(in oklch, var(--palette-space) 60%, transparent); /* rhythm */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-base: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 72px; --max: 1240px; --reading: 720px; --gutter: 24px; /* motion */ --dur-fast: 150ms; --dur-base: 240ms; --dur-slow: 360ms; --ease: cubic-bezier(0.22, 0.8, 0.24, 1); --lift: -3px; /* atmosphere. A starfield: one 280px tile of scattered points at three sizes, repeated. Violet and faint on paper, near-white on deep space. */ --atmosphere: starfield; --atmosphere-layer: radial-gradient(1.4px 1.4px at 22px 34px, color-mix(in oklch, var(--palette-star) var(--palette-star-alpha), transparent) 50%, transparent 51%), radial-gradient(1px 1px at 96px 142px, color-mix(in oklch, var(--palette-star) var(--palette-star-alpha), transparent) 50%, transparent 51%), radial-gradient(1.8px 1.8px at 178px 58px, color-mix(in oklch, var(--palette-star) var(--palette-star-alpha), transparent) 50%, transparent 51%), radial-gradient(1px 1px at 240px 210px, color-mix(in oklch, var(--palette-star) var(--palette-star-alpha), transparent) 50%, transparent 51%), radial-gradient(1.2px 1.2px at 58px 236px, color-mix(in oklch, var(--palette-star) var(--palette-star-alpha), transparent) 50%, transparent 51%), radial-gradient(1px 1px at 138px 20px, color-mix(in oklch, var(--palette-star) var(--palette-star-alpha), transparent) 50%, transparent 51%), radial-gradient(1.4px 1.4px at 206px 160px, color-mix(in oklch, var(--palette-star) var(--palette-star-alpha), transparent) 50%, transparent 51%); --atmosphere-size: 280px 280px; --atmosphere-position: 0 0; --field-bg: var(--palette-space); --field-particle: var(--palette-lavender); --field-ink: var(--palette-space-ink); } [data-style="bloom"] { color-scheme: light; --palette-brand: #00B183; /* the wordmark green. Fills and graphics, never text */ --palette-green: #01805F; /* green/800. Carries text and outlines */ --palette-green-deep: #01634A; --palette-green-wash: #DDF1E8; --palette-paper: #FBFAF5; --palette-card: #FFFFFF; --palette-mist: #F2F8F4; /* the alt surface; green/800 holds 4.59:1 on it */ --palette-mist-deep: #D5E8DE; --palette-ink: #14231D; --palette-ink-soft: #3D4F46; --palette-ink-faint: #55665D; --palette-on-green: #FFFFFF; --palette-line: #DCE6DF; --palette-line-deep: #B4C9BC; --palette-band: #0C2A21; /* the dark section; brand green holds 5.56:1 on it */ --palette-band-ink: #F1F7F3; --palette-purple: #65308F; /* the mark's own colours, held for later */ --palette-pink: #E21C6A; --palette-magenta: #981F60; } /* ---- TOKEN SET 2 · semantic ------------------------------------------------- */ [data-style="bloom"] { /* surface and text */ --color-bg: var(--palette-paper); --color-surface: var(--palette-card); --color-surface-alt: var(--palette-mist); --color-surface-media: var(--palette-mist-deep); --color-text: var(--palette-ink); --color-text-muted: var(--palette-ink-soft); --color-text-faint: var(--palette-ink-faint); --color-text-inverse: var(--palette-on-green); --color-accent: var(--palette-green); --color-accent-deep: var(--palette-green-deep); --color-accent-text: var(--palette-green); --color-brand: var(--palette-brand); --color-accent-soft: var(--palette-green-wash); --color-border: var(--palette-line); --color-border-strong: var(--palette-line-deep); --color-focus: var(--palette-green); /* type */ --font-display: "Quicksand", "Nunito", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-body: "Quicksand", "Nunito", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* Same ladder as editorial and ember (375px and 1440px anchors, 1.18 and 1.26), so the type-scale gate holds by construction. Copied, not inherited. */ --text-display: clamp(2.7rem, 2.153rem + 2.332vw, 4.252rem); --text-heading-xl: clamp(2.288rem, 1.905rem + 1.632vw, 3.374rem); --text-heading-lg: clamp(1.939rem, 1.678rem + 1.111vw, 2.678rem); --text-heading-md: clamp(1.643rem, 1.473rem + 0.7247vw, 2.125rem); --text-card: clamp(1.392rem, 1.289rem + 0.4423vw, 1.687rem); --text-body-lg: clamp(1.18rem, 1.124rem + 0.2385vw, 1.339rem); --text-body: 16px; --text-body-sm: 14px; --text-caption: 12px; --text-eyebrow: 11px; --leading-display: 1.08; --leading-body: 1.65; --tracking-display: -0.01em; --tracking-body: 0em; --tracking-eyebrow: 0.12em; --eyebrow-case: uppercase; --heading-weight: 700; /* shape */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 28px; --radius-full: 999px; --border-width: 1px; --border-style: solid; /* depth. Shadows mix from the band colour so they stay green-black. */ --shadow-rest: none; --shadow-raise: 0 10px 22px color-mix(in oklch, var(--palette-band) 12%, transparent); --shadow-high: 0 18px 40px color-mix(in oklch, var(--palette-band) 20%, transparent); --shadow-modal: 0 32px 64px color-mix(in oklch, var(--palette-band) 50%, transparent); /* rhythm */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-base: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 72px; --max: 1240px; --reading: 720px; --gutter: 24px; /* motion */ --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 320ms; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --lift: -3px; /* atmosphere. The band is the dark section; brand green particles clear 5.56:1 on it. */ --atmosphere: field-v2; --field-bg: var(--palette-band); --field-particle: var(--palette-brand); --field-ink: var(--palette-band-ink); /* ---- layer 3 · the button, written for what each control does ------------- The lead action is the brand green with ink on it. Ink on #00b183 is 5.91:1; white on it would be 2.76:1. The hover step is green/800 with white text (4.94:1). Outline and clear read the text-safe green, so they inherit from --color-accent-text and need no bend here. */ --btn-default-fill: var(--color-brand); --btn-default-text: var(--color-text); --btn-default-fill-hover: var(--color-accent); --btn-default-text-hover: var(--color-text-inverse); --btn-default-fill-inverse: var(--color-brand); --btn-default-text-inverse: var(--palette-band); --btn-default-fill-hover-inverse: var(--palette-green-wash); --btn-default-text-hover-inverse: var(--palette-band); --btn-weight: 700; }