/* tokens.css — the website's design tokens. * * Structure and vocabulary derive from the TNC-M34 controller UI stylesheet, so the * website and the controller UI share one visual language: the axis colours, the mono * treatment of numbers, the hairline-and-lip depth model. A spec table here should read * like the DRO on the machine. * * Two deliberate departures from that file: * - the page surface is a near-neutral warm grey, not the controller's #ede9e0 bone, * which read too warm at full-page scale; * - there is no dark theme. Dropped on purpose — see the note at the bottom. */ :root { /* ---- surface ------------------------------------------------------------ * Near-neutral with about four points of warmth (bone had thirteen). Enough to * read as paper rather than as a UI chrome grey, without the yellow cast. */ --page-bg: #f2f1ee; --page-fg: #262624; --page-muted: #6b6b67; --page-hair: #dcdad5; --page-raised: #faf9f7; /* cards sit ABOVE the page by tone, not by shadow */ --page-sunk: #e9e7e2; /* spec strips, table headers, top bar */ /* Product photography is shot on white. Tinting the tile behind it would make every * photo read as a white rectangle floating inside a grey box, so image tiles are * white and the hairline border supplies the edge instead. */ --media-bg: #ffffff; /* ---- brand ------------------------------------------------------------- * The mark is scarlet + International Klein Blue. Scarlet #d10400 was measured off the * print master (Backup_of_newcolor-m34..png, in the print artwork archive) after * unpremultiplying its white background — scripts/build_brand_assets.py. Do NOT sample * colours off the live website: its GIF palette degrades the scarlet to #c83808. * * The mark's original second ink was indigo #070060, replaced by Klein Blue #002FA7 in * August 2026. The logo PNGs were recoloured by RGB substitution with the alpha channel * left untouched — the master is flat ink with all antialiasing carried in alpha, so a * hue rotation would have fringed every curve. * * KLEIN BLUE IS THE ACCENT: buttons, links, current-nav, focus rings. It measures * 9.5:1 on the page background and 10.7:1 under white — roughly double the old scarlet * accent's 5.0:1, so every interactive element gained contrast in this change. * * SCARLET IS NOW A SIGNATURE INK, not a control colour: the logo's swoosh and the * eyebrow rule above section titles. It stays because it is what people recognise; it * no longer competes with the accent for "this is clickable". */ --brand: #002FA7; /* Klein Blue — the accent (9.5:1 on page) */ --brand-ink: #00237F; /* hover / pressed on a fill (13.6:1 under white) */ --brand-on: #ffffff; /* text on a brand fill (10.7:1) */ --brand-wash: #e3e9f8; /* tinted background block (8.8:1 for accent text) */ --brand-on-dim: #c8d6ff; /* secondary text ON a brand fill (7.4:1) */ --brand-2: #d10400; /* scarlet — the signature ink (5.0:1 on page) */ /* ---- axis vocabulary, straight from the controller UI ------------------- */ --axis-x: #E4574C; --axis-y: #5FB962; --axis-z: #4D97E0; --axis-a: #D8A748; /* ---- semantic ---------------------------------------------------------- */ --ok: #2f6b38; /* in stock (LCD light --scr-green) */ --info: #2c6ea8; /* links (LCD light --scr-blue) */ --warn: #8d6a24; /* lead time, made to order */ --danger: #a83b31; /* ---- enclosure finishes, for hero and feature panels -------------------- */ --anod-graphite: #2b2e34; --anod-bronze: #3a2f24; --anod-black: #1a1c1f; --anod-etch: #c8cad0; /* laser-etched legend on a dark face */ --anod-etch-dim: #7f8288; --anod-hair: #30343a; /* a seam in an anodised face */ /* ---- dark slab --------------------------------------------------------- * The hero and the DRO panel sit on a dark ground. These are the anodised finishes * above shifted a few points cooler, because a full-bleed slab at hero scale reads * brown at --anod-bronze's warmth and the accent glow is blue. * * The foreground set exists because the page-level tokens do not survive the flip. * Measured against --slab-bg-1, --brand falls from 9.5:1 on paper to 1.7:1 and --brand-2 * scarlet to 3.2:1 — neither is usable for text. --slab-accent is that scarlet lifted * until it passes (6.2:1), which is why the hero eyebrow is a different red from the * logo's; the logo itself is artwork, not text, and keeps the real ink. * * Ratios below are computed, not estimated — see the check in scripts/test_tokens.php. */ --slab-bg-1: #11151d; /* gradient start */ --slab-bg-2: #191f2b; /* gradient midpoint, 58% */ --slab-bg-3: #10131a; /* gradient end */ --slab-fg: #f4f5f7; /* body text on the slab (16.8:1) */ --slab-muted: #b8bfcc; /* lede, secondary (9.9:1) */ --slab-hair: #3c4452; /* divider inside the slab */ --slab-edge: #505866; /* panel border */ --slab-hi: #8daeff; /* hover / focus border on the slab */ --slab-accent: #ff625d; /* the eyebrow — scarlet, lifted (6.2:1) */ --slab-glow: rgba(35, 93, 235, 0.30); /* The one status light on the site. Green because it means the same thing here as * it does on the machine: powered and talking. */ --led: #72d578; --led-glow: rgba(114, 213, 120, 0.8); /* A product photograph inside the dark panel needs a light tile to sit on — a * white-background photo cannot float on charcoal. */ --tile-bg: #f7f8fa; --tile-hair: #d9dce1; /* ---- footer: graphite ------------------------------------------------- * A machined panel closing the page, not a lighter shade of it. The gradient is what * makes it read as anodised metal rather than a flat dark box — a real graphite face * catches light unevenly, and two stops plus the blueprint grid is enough to suggest * that without becoming a decoration. * * Ratios are measured against --graphite-1, the LIGHTEST end of the gradient, which is * the worst case for light text. --anod-etch-dim measures 3.1 there and is therefore * NOT used for text anywhere in the footer; --graphite-muted exists because of it. * * The logo used to sit here and does not any more. It is flat scarlet-and-blue ink on * transparency, so on a dark ground the scarlet drops to about 3:1 and the blue to * under 2 — it would have needed a light variant, which is a second asset to keep in * step with the first for no gain. */ --graphite-1: #33373e; /* gradient start, the lit edge */ --graphite-2: #22252a; /* gradient end */ --graphite-fg: #e8eaee; /* links and body (9.9:1 on graphite) */ --graphite-muted: #adb3bd; /* addresses, legal line (5.7:1 on graphite) */ --graphite-hair: #4a4f57; /* divider — non-text */ --graphite-grid: rgba(255, 255, 255, 0.022); --footer-bg: #e7e9ed; /* retained: still the light-panel reference */ --footer-hair: #c7cbd2; --footer-muted: #5b6069; /* Faint engineering-paper grid, tinted with the accent rather than neutral grey so * it belongs to the brand instead of looking like a rendering artefact. Two * strengths: the page carries the lighter one, the footer the heavier. */ --blueprint: rgba(0, 47, 167, 0.018); --blueprint-firm: rgba(0, 47, 167, 0.022); --blueprint-size: 32px; /* --page-hair is warm, to match the paper. Components drawn against white or against * the cool slab need a neutral one or the seam goes pink. Same reasoning for the * surface: a section that sits between two white blocks reads yellow at --page-bg's * warmth, so the banded sections use the cool one. */ --page-hair-cool: #ccd1db; --page-cool: #f7f8fb; --page-cool-lift: #f8f9fc; /* ---- type -------------------------------------------------------------- * Space Grotesk carries the headings; the body stays on the system UI face. * * The stack used to name "Inter" and then "Roboto" while loading NEITHER, so on every * machine without Inter installed — which is nearly all of them — the site silently * rendered in Segoe UI. It was paying the readability cost of a generic UI face while * believing it had a typeface. Both names are gone. * * Only the display face is self-hosted. A second webfont for body copy would roughly * triple the font payload to dress text that is already perfectly legible in the * system face, and body copy is where a swap flash is most visible. One deliberate * face where it shows, system metrics where it does not. */ --font-display: "Space Grotesk", var(--font-sans); --font-sans: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; /* A restrained 1.200 minor third. Industrial documents do not shout. */ --t-xs: 0.75rem; /* 12px eyebrow, table meta */ --t-sm: 0.8125rem; /* 13px captions, spec labels */ --t-base: 1rem; /* 16px body */ --t-md: 1.0625rem; /* 17px lead paragraph */ --t-lg: 1.3125rem; /* 21px h3 */ --t-xl: 1.625rem; /* 26px h2 */ --t-2xl: 2.125rem; /* 34px h1 */ --t-3xl: 2.875rem; /* 46px hero */ /* 500 is the working weight, 600 the display ceiling. 700 reads as marketing; * this catalogue is a datasheet with a shop attached. */ --w-normal: 400; --w-medium: 500; --w-display: 600; --lh-tight: 1.15; --lh-snug: 1.35; --lh-body: 1.6; --ls-eyebrow: 0.14em; /* uppercase labels, widely tracked */ --ls-display: -0.015em; /* large type tightens slightly */ /* ---- space (4px base) --------------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* ---- form -------------------------------------------------------------- */ --r-sm: 2px; --r-md: 4px; /* the ceiling. 16px radii read as consumer software. */ --hair: 1px solid var(--page-hair); /* Depth is a hairline plus an inset lip, never a blurred drop shadow — the way a * machined panel reads rather than the way a web card does. */ --lip: inset 0 1px 0 rgba(255, 255, 255, 0.7); /* ---- layout ------------------------------------------------------------ */ --measure: 68ch; /* prose column */ --w-content: 1180px; /* standard page */ --w-wide: 1400px; /* product grids, comparison tables */ /* Document pages — policy, contact, application notes, individual tool pages. Derived * from --measure plus the gutters, so the column interior IS one prose measure and * every element in it shares the same centred edges. Raise --measure to widen it. */ --w-doc: calc(var(--measure) + 2 * var(--s-5)); --nav-h: 68px; /* tall enough for the full logo lockup */ } /* No dark theme. * * Dropped deliberately rather than never built: it existed and worked, and was removed * to halve the visual QA on every template and every one of the 152 product pages. * If it ever comes back, the work is a `:root[data-theme="dark"]` block overriding the * surface, brand and semantic groups above, plus the dark logo variant that * scripts/build_brand_assets.py used to emit. Nothing else in the CSS assumes a theme — * every component reads these tokens and none hard-codes a colour. Keep it that way. */