/* KRM brand tokens — v2.2, 29 September 2026 (the values are v2.1's) ========================================================================== THE AUTHORITY, AND IT IS NOT EDITED. css/styles.css extends this file, and a page-level problem is solved there, never here. The rule was lifted once, for the seven-phase v2.1 colour migration, which landed this palette beside v2.0 rather than over it; THE SWITCH phase 7 retired the v2.0 half on 26 September 2026. Brand v2.2 made the second sanctioned edit, to these COMMENTS ONLY — no token's name or value changed — and homepage v2.3 the third, comments only again, when the green ground moved to the Custom Agents tile. The rule stands again. docs/DECISIONS.md, "Brand — v2.1", "Brand — v2.2" and "Homepage v2.3", has the history. v2.1 demotes green to the mark alone and makes orange the single interface colour, at two stops that are never swapped. v2.2 adds two exceptions, each spent in exactly one place in css/styles.css: green as ONE feature ground, the homepage Custom Agents tile's since homepage v2.3, and one control orange at rest, "Learn more". Every value below is measured, not chosen. Ratios are WCAG 2.x. Font: */ :root { /* ---- Grounds ---- */ --paper: #FFFFFF; /* every page */ --panel: #F5F5F3; /* alternating bands, cards */ --hairline: #EDEDEA; /* 1px borders and dividers — 1.17:1, DECORATIVE */ --ink: #2E2E2B; /* dark bands, primary button fill */ --hairline-ink: #4A4A45; /* 1px dividers on ink — 1.53:1, DECORATIVE ONLY. Never a control boundary: that needs 3:1. */ /* ---- Text on light grounds ---- --text-mute FAILS AA for small text (3.47:1 on paper, 3.18:1 on panel). It is legal only for non-text: a control border, where 3:1 applies. Every caption, label and piece of metadata takes --text-soft. */ --text: #2E2E2B; /* headings and body 13.62 paper / 12.48 panel */ --text-soft: #5A5A54; /* secondary, nav 6.94 paper / 6.36 panel */ --text-mute: #8A8A83; /* borders only 3.47 paper / 3.18 panel */ /* ---- Text on the ink ground ---- */ --sand: #F4F0E8; /* headings and body on ink 11.98:1 */ --sand-soft: #A8A49B; /* secondary text on ink 5.48:1 also the ink-ground control border, which clears the 3:1 that #6B6B65 (2.54:1) does not */ /* ---- Orange — the only interface color, two stops of one hue (~25 deg) ---- THE STOPS ARE NEVER SWAPPED. A single value cannot clear 4.5:1 on both grounds: --orange on ink is 2.51:1 and --orange-on-ink on paper is 2.50:1. Both are failures, and both look plausible on screen. */ --orange: #AD4E0C; /* on paper 5.42:1 · on panel 4.97:1 */ --orange-on-ink: #F08A3C;/* on ink 5.45:1 · takes INK text, never white (white on it is 2.50:1) */ --orange-hover: #8E3F09; /* pressed, light grounds — 7.33:1 on paper */ /* ---- The mark — identity, and (v2.2) one feature ground; never an interface color ---- */ --mark: #1C3A30; /* the logo artwork: the green wordmark and the favicons in assets/img/brand/ — and, since v2.2, the ground of one homepage tile, Custom Agents since homepage v2.3 (.tile--feature, the one rule that may read it) */ /* ---- Primary button, pressed ---- v2.1 bans green from buttons and gives orange to the OUTLINE button's hover, so the solid primary needs a neutral of its own: one step darker than --ink, no hue. White on it is 16.51:1. On the ink ground the primary is a --sand fill, so it presses to --paper (ink on white, 13.62:1) and needs no second token. */ --ink-press: #1F1F1D; /* Type */ --sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif; --fs-page: clamp(34px, 5vw, 56px); --fs-section: clamp(19px, 3vw, 24px); --fs-body: 15px; --fs-label: 12px; --fs-ui: 13px; --track-page: -0.03em; --track-section: -0.02em; --lh-body: 1.65; /* Layout */ --wrap: 980px; /* maximum content width */ --radius: 6px; /* all surfaces */ --radius-pill: 999px; /* buttons only */ --radius-chip: 5px; /* chips only — today that is the launch line on a product page, one per page */ /* Motion — low intensity, never bouncing */ --dur: 140ms; --ease: cubic-bezier(0.2, 0, 0.2, 1); } /* Rules this file assumes - Headings are Instrument Sans 500. Never bold, never a serif, never all caps. - Fraunces appears only inside the logo artwork. Do not load it as a webfont. - Sentence case everywhere. No uppercase letterspaced labels — the logo descriptor is the single exception and lives inside the logo files. - Primary buttons are ink-filled pills — except "Learn more" on the homepage tiles and the lineup cards, filled in its ground's orange stop (v2.2); secondary are hairline, no fill. - No gradients — except inside a device screen, which draws the customer's software (v2.2) — and no drop shadows. - Honor prefers-reduced-motion. - GREEN IS THE MARK — and, since v2.2, the one feature ground of one homepage tile, Custom Agents since homepage v2.3. Never a link, a button, a label or any other fill. - Orange has two stops and they are never swapped: --orange on paper and panel, --orange-on-ink on ink. The base `a` and :focus-visible below take --orange, the light-ground stop, because nearly everything sits on paper or panel; a component on ink states its own colour and wins. - Orange goes on: small labels above cards (.eyebrow, defined in css/styles.css and carrying the product's name on each product page), one phrase per page at most, links, the hover fill of outline buttons, the chip, and (v2.2) the "Learn more" primary. It never goes on headlines, body text or backgrounds, and never on more than one thing in an eyeful — the "Learn more" buttons excepted. Target roughly 90% white and ink. - Buttons are neutral at rest, "Learn more" excepted (v2.2). Orange is what happens when you touch one. */ body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-weight: 500; letter-spacing: var(--track-section); text-wrap: balance; } h1 { font-size: var(--fs-page); letter-spacing: var(--track-page); line-height: 1.13; } a { color: var(--orange); text-decoration: none; transition: color var(--dur) var(--ease); } a:hover { text-decoration: underline; text-underline-offset: 3px; } .btn-primary { background: var(--ink); color: var(--paper); font: 500 var(--fs-ui)/1 var(--sans); padding: 11px 24px; border: 0; border-radius: var(--radius-pill); cursor: pointer; } .btn-secondary { background: transparent; color: var(--ink); font: 500 var(--fs-ui)/1 var(--sans); padding: 10px 23px; border: 1px solid var(--text-mute); border-radius: var(--radius-pill); cursor: pointer; } .surface { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius); } .panel { background: var(--panel); border-radius: var(--radius); } :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }