/* Hive Architect — tokens. Lifted from the design-system project (Brand Manual v2.2.1) and extended with the dark layer. Where this file and the manual disagree, the manual is correct. Two additions live here and nowhere in the manual: §D — the dark layer. Every dark value is either an existing swatch, a swatch the manual already computed (ink-raised, water-light), or the same mix arithmetic the manual uses to compute those. No new hues. The fluid type ramp — the manual gives a 1440 value and a <768 value for each role; the clamp() between them is interpolated, so the two comps are exact and every width in between lands on the line joining them. */ /* ── fonts ─────────────────────────────────────────────────────────────────── */ @font-face{font-family:'Saira Semi Condensed';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/SairaSemiCondensed-Regular.ttf') format('truetype');} @font-face{font-family:'Saira Semi Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/SairaSemiCondensed-Medium.ttf') format('truetype');} @font-face{font-family:'Saira Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/SairaSemiCondensed-SemiBold.ttf') format('truetype');} @font-face{font-family:'Saira Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/SairaSemiCondensed-Bold.ttf') format('truetype');} @font-face{font-family:'Saira Semi Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/SairaSemiCondensed-ExtraBold.ttf') format('truetype');} @font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/SplineSansMono%5Bwght%5D.ttf') format('truetype-variations');} :root { /* ── §3.1 the eight swatches — light ─────────────────────────────────────── */ --paper: #F1F2EC; --ink: #1B231F; --grid: #C9CEC0; --red: #BE3436; --water: #3D6B82; --khaki: #A9A883; --slate: #77878E; /* §3.3 computed tints, not new swatches */ --ink-raised: #2C342F; --water-light: #6A8D9C; --panel: #E9EAE2; /* Command red does two jobs with opposite contrast needs, so it gets two values. --red is the thin one: a 2px chart line, a 3px progress rule. On an ink ground it has to be lifted to stay visible. --cta is the filled one: a plate carrying type. Lifting it would push the label under 4.5:1, so on ink it goes the other way — barely, and only enough to clear 3:1 against the page it sits on. The label is a constant, never the paper token, because paper and ink trade places and a red plate never carries dark type. */ --cta: #BE3436; /* 5.00:1 under the label · 5.00:1 against paper */ --cta-hover: #A62B2D; /* 6.21:1 under the label */ --cta-ink: #F1F2EC; /* constant — a red plate never carries dark type */ /* Quiet type — the 11–12px mono labels that name a thing without competing with it. They used to be Ink at 55–60% opacity, which measures 3,64:1 and 4,13:1 on paper: under AA at that size, and the measured cause of "hard to see". This is a real colour instead, from `brand-overrides.md` 01 — Slate + 28% Ink. Light 4,91:1 on paper · dark 5,55:1 on the page field. */ --quiet: #5D6B6F; /* chart-specific reads of the palette */ --chart-line: var(--red); /* the series the chart is about (§3.5 data-1) */ --chart-ghost: var(--slate); /* the series it is being compared against */ --chart-grid: var(--grid); /* §4.2 strokes, web */ --stroke-hair: 1px; --stroke-light: 1px; --stroke-med: 2px; --stroke-heavy: 4px; --stroke-command: 6px; --draw-stroke: 2px; --draw-second-pass-opacity: 0.4; --radius: 0; --shadow: none; /* §10.4 interaction floors */ --hit-target-min: 44px; --focus-width: 2px; --focus-offset: 2px; --focus-ring: var(--ink); /* ── §1 type ─────────────────────────────────────────────────────────────── */ --font-sans: "Saira Semi Condensed", "Saira SemiCondensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif; --font-mono: "Spline Sans Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* Fluid ramp. Each clamp is the straight line through the two comps — the mobile value at 390 and the desktop value at 1440 — so both comps are exact and every width between them lands on the line joining the two. Slope and intercept are computed, not eyeballed; the bounds are the two endpoints, never a guess. slope(vw) = (desktop − mobile) / (1440 − 390) × 100 intercept(rem) = (mobile − slope/100 × 390) / 16 Worked, role by role (px): Display slope 28/10.5 = 2.6667 · intercept (44 − 10.4)/16 = 2.1 H1 slope 22/10.5 = 2.0952 · intercept (34 − 8.1714)/16 = 1.6143 H2 slope 12/10.5 = 1.1429 · intercept (28 − 4.4571)/16 = 1.4714 H3 slope 6/10.5 = 0.5714 · intercept (22 − 2.2286)/16 = 1.2357 Lead slope 3/10.5 = 0.2857 · intercept (19 − 1.1143)/16 = 1.1179 Body slope 1/10.5 = 0.0952 · intercept (17 − 0.3714)/16 = 1.0393 Small slope 1/10.5 = 0.0952 · intercept (15 − 0.3714)/16 = 0.9143 Number slope 16/10.5 = 1.5238 · intercept (48 − 5.9429)/16 = 2.6286 Coefficients are carried to four decimals, as everywhere else in this file; the residual at each endpoint is under 0.001px and the clamp bound is the true value. */ --size-display: clamp(2.75rem, 2.1rem + 2.6667vw, 4.5rem); /* 44 → 72 */ --size-h1: clamp(2.125rem, 1.6143rem + 2.0952vw, 3.5rem); /* 34 → 56 */ --size-h2: clamp(1.75rem, 1.4714rem + 1.1429vw, 2.5rem); /* 28 → 40 */ --size-h3: clamp(1.375rem, 1.2357rem + 0.5714vw, 1.75rem); /* 22 → 28 */ --size-lead: clamp(1.1875rem, 1.1179rem + 0.2857vw, 1.375rem);/* 19 → 22 */ --size-body: clamp(1.0625rem, 1.0393rem + 0.0952vw, 1.125rem);/* 17 → 18 */ --size-small: clamp(0.9375rem, 0.9143rem + 0.0952vw, 1rem); /* 15 → 16 */ --size-label: 0.75rem; /* 12 — Label, 12/16 +0.08em UPPER */ --size-data: 0.8125rem; /* 13 — Data inline at its floor */ --size-nav: 1rem; /* 16 — Nav, one size at every width (see .rail-nav a) */ --size-button: 1rem; /* 16 — Button, 16/16 +0.04em UPPER */ /* 11/15 +0.04em is the manual's *Source* role, not its Caption (13/18 +0.02em). Every use of `.caption` in this build is a source or a meta line — the axis names on the chart, the field hints, the CUI block, the footer legal — so the role is right and only the token's name was wrong. Renaming it would touch nine files for nothing; the metric is what has to be correct, and it is. */ --size-caption: 0.6875rem; /* 11 — Source, 11/15 +0.04em, min 10 */ /* The §04 figures support the claim above them; they are not the claim. At the manual's 120 they outran the display ramp and read as the headline of the section, and 120px of Spline is five characters wider than the 248px column they sit in — so the top of the ramp stays at 64. That departure was already taken and it stands. The bottom was not a departure, it was a miss: at 44 the figure sat under the manual's hard floor of 48 at every width below 600. The floor is now the floor. The manual's mobile value for this role is 64, which belongs to the 120px treatment this build does not use; 48 is the stated minimum and is what a 64px cap ramps to. */ --size-number: clamp(3rem, 2.6286rem + 1.5238vw, 4rem); /* 48 → 64 */ --line-display: 1.06; --line-h1: 1.07; --line-h2: 1.15; --line-h3: 1.21; --line-lead: 1.45; /* 22 / 32 */ --line-body: 1.67; /* 18 / 30 */ --line-small: 1.5; /* 16 / 24 */ --line-label: 1.34; --line-data: 1.385; --line-caption: 1.36; --line-number: 0.92; --track-display: -0.02em; --track-h1: -0.015em; --track-h2: -0.01em; --track-h3: -0.005em; --track-label: 0.08em; --track-caption: 0.04em; /* Source, +0.04em — see --size-caption */ --track-nav: 0.02em; --track-button: 0.04em; --track-number: -0.02em; --track-lockup: 0.14em; /* ── §2 spacing ──────────────────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* §2.3 measure — ch is 1.46x its number in characters in this face */ --measure-body: 53ch; --measure-max: 57ch; --measure-lead: 45ch; /* layout */ --rail-w: 264px; --content-max: 1176px; /* the widest the reading column ever gets */ --page-x: clamp(1.25rem, -0.1429rem + 5.7143vw, 5rem); /* 20 → 80 */ --section-gap: clamp(4rem, 3.2571rem + 3.0476vw, 6rem); /* 64 → 96 */ --header-h: 48px; --dock-h: 56px; /* ── §9.1 motion ─────────────────────────────────────────────────────────── */ --motion-1: 120ms; --motion-2: 240ms; --motion-3: 400ms; --motion-4: 800ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --ease-chart: linear; color-scheme: light; } /* ── §D the dark layer ────────────────────────────────────────────────────── Paper and Ink trade places. Everything else is the manual's own arithmetic: grid becomes ink + 14% paper so a hairline still reads as a hairline rather than as body copy; panel becomes ink + 4% paper; links take water-light, which the manual already publishes for exactly this ground; red takes the same lift water did, so the command line clears 4:1 on ink. One deliberate departure, 04.08: the *page field* is not Ink. Ink is #1B231F — R27 G35 B31, green eight above red. At swatch size that reads as a warm near-black; filling an entire screen with it, it reads green. So the field is neutralised to #1E211F, which is R30 G33 B31 — the same hue family, a third of the cast — at a relative luminance of 0.01460 against Ink's 0.01458. Identical luminance is the point: every contrast figure computed against the old field still holds, re-measured, not assumed: ink on field 14,44:1 · slate on field 5,55:1 link on field 4,55:1 · CTA plate on field 3,18:1 (was 3,13) Ink itself is unchanged and still the colour of every mark. Grid and Panel move with the field, by the same method and at the same luminance. */ [data-theme="dark"] { --paper: #1E211F; --ink: #F1F2EC; --grid: #414341; --red: #D65254; /* Water is lifted past the manual's #6A8D9C. That value clears 4,5:1 against the page field (4,55) but only 4,08:1 against Panel, and the legal pages set links inside panel-backed callouts — so a link was legible on the page and not in a box. #7FA0AE measures 5,82:1 on the field and 5,13:1 on Panel, so it clears on both. On a dark layer a lighter link can only ever raise contrast; nothing regresses. */ --water: #7FA0AE; --khaki: #A9A883; --slate: #8B9A9F; --ink-raised: #DCDDD6; /* the hover of an ink plate, inverted */ --water-light: #3D6B82; --panel: #272A28; /* Ink+4% paper, neutralised with the field · L 0.02328 */ --quiet: #8B9A9F; /* Slate reads quiet on ink without help · 5,55:1 */ /* On ink the plate is squeezed from both sides: light enough to clear 3:1 against the page, dark enough to keep 4.5:1 under a constant Paper label. That leaves a band of about 0.146–0.157 relative luminance, and this sits in it. Hover goes deeper rather than lighter — lighter would take the label to 3.6:1. */ --cta: #C63B3D; /* 4.56:1 under the label · 3.13:1 against the ink page */ --cta-hover: #A8292C; /* 6.18:1 under the label · hover only, pointer already there */ --chart-ghost: #7C8A85; color-scheme: dark; } /* No-JS fallback: honour the OS when nothing has been chosen. */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { --paper: #1E211F; --ink: #F1F2EC; --grid: #414341; --red: #D65254; --water: #7FA0AE; --slate: #8B9A9F; --ink-raised: #DCDDD6; --water-light: #3D6B82; --panel: #272A28; --quiet: #8B9A9F; --cta: #C63B3D; --cta-hover: #A8292C; --chart-ghost: #7C8A85; color-scheme: dark; } }