/* ============================================================================ ON GUARD FIRE PROTECTION — token layer. Palette, type scale, spacing. THE SOURCE OF TRUTH IS THE COMPANY MARK. --------------------------------------------------------------------------- The values below were COUNTED out of static/logo.png (502x135, RGBA), not eyeballed. Opaque pixel frequency: 6993 x #000000 black — the wordmark and the swoosh 1791 x #B31F24 On Guard red — "FIRE", and nothing else ~900 x near-black antialiasing (#010101 … #161616) ~400 x near-red antialiasing (#B21C22 … #B32126) Two colours. That is the whole brand, and the ratio is roughly 4:1 in favour of black — so red is a MARK, not a field. It is spent here on exactly four things and no others: · the current item in the rail · critical severity · a breached IFC 901.7 clock · the primary action on a form A token that spends red on ordinary chrome breaks this even when the hex is right. Everything else on a view is steel and ink. WHY THE UI IS LIGHT WHEN THE MARK IS BLACK ------------------------------------------ The logo is black ink on transparency. On a dark ground it disappears, and the company has no knockout version on this disk. Inverting it with a CSS filter would turn the red half white and throw away half the mark. So the product runs on paper, which is also what the company's own site does. Do not add a hex literal to a page. Add a token here. ========================================================================== */ :root { --brand-name: "On Guard Fire Protection"; /* ---- The two brand colours, counted ---------------------------------- */ --brand-red: #B31F24; --brand-black: #000000; /* ---- Accent ramp, derived from --brand-red ---------------------------- */ --accent: #B31F24; --accent-hover: #8E1A1E; /* pressed / hover — darker, not lighter */ --accent-light: #D96F72; /* thin rules and strokes only */ --accent-wash: #FBEEEF; /* the flat fill behind a selected row */ --accent-faint: #FBEEEF; --accent-line: rgba(179, 31, 36, .26); --on-accent: #FFFFFF; /* ---- Ground ramp — page bed, recess, card ---------------------------- */ --bg: #F6F7F8; /* page background */ --canvas: #ECEEF0; /* recessed bed, the rail */ --surface: #FFFFFF; /* raised panel / card */ --surface2: #E6E9EB; /* inset well, pressed state */ --line: #DADEE2; /* border */ --hair: #E6E9EB; --track: #E6E9EB; /* ---- Ink ramp --------------------------------------------------------- MEASURED against --bg #F6F7F8: --ink #0B0E11 18.9:1 --steel #5B6570 5.6:1 the workhorse for secondary prose --faint #6B7280 4.8:1 captions, citations, basis tags — clears AA --dim #C2C4C6 1.6:1 DECORATIVE ONLY. Rules, bar tracks, disabled strokes. It must never carry a word. --ink is #0B0E11 rather than the mark's pure #000000: at body sizes pure black on paper vibrates. The mark itself is untouched. */ --ink: #0B0E11; --text: #0B0E11; --steel: #5B6570; --muted: #5B6570; --faint: #6B7280; --soft: #8B9096; --dim: #C2C4C6; /* ---- Semantic — verdicts. The WORD ships with the colour, everywhere, without exception. On a phone in a mechanical room, through safety glasses, colour alone is not a status. Note that --crit IS the brand red. On this product that is not an accident and not a collision: the one thing the company's mark is red about and the one thing a life-safety console is red about are the same thing. There is no second red. -------------------------------------------------------- */ --good: #2F6E4A; /* compliant / restored / pass */ --warn: #8A5E12; /* imminent / major / watch */ --crit: #B31F24; /* breached / critical / fail */ --info: #43566B; /* running / informational */ /* ---- Type · Montserrat for words, IBM Plex Mono for figures ---------- TWO faces, and the second one earns its place. This seat is mostly numbers that have to be read against each other at a glance — a clock against its limit, a dollar figure against yesterday's, a rank column — and Montserrat's proportional figures make a column of them ragged even with `tabular-nums` on. The Watchfloor canvas settles it: every figure on that board is Plex Mono and every word is Montserrat, and the split is what makes the numbers scan. So --font-mono is a real monospace face now, not an alias, and it is for FIGURES — never for a heading, a label or a nav item. */ --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-code: var(--font-mono); --label-weight: 700; --label-track: .08em; --kicker-track: .14em; /* One type scale for every surface. 10px uppercase, tracked labels, pills, citations 12px sans why-lines, secondary prose 13.5px sans body 15.5px sans lede 19px sans section heading 28px sans 800 page heading (one per page) clamp 32–44px the one number a section is about */ --fs-label: 10px; --fs-why: 12px; --fs-body: 13.5px; --fs-lede: 15.5px; --fs-sec: 19px; /* ---- Metrics ---------------------------------------------------------- */ --max: 1240px; --rail-w: 216px; --app-bar-h: 56px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px; --ease: cubic-bezier(.33, 0, .15, 1); --shadow: 0 1px 2px rgba(11, 14, 17, .05), 0 10px 30px rgba(11, 14, 17, .07); color-scheme: light; } /* shell.js stamps data-theme on for consistency with the other seats in the book. FireGuard is a LIGHT product for the reason in the header comment, so this block keeps the ramp identical rather than reintroducing a dark one. The attribute is honoured; nothing shifts when it lands. */ html[data-theme="dark"] { --bg: #F6F7F8; --surface: #FFFFFF; --line: #DADEE2; --ink: #0B0E11; --muted: #5B6570; }