/* Office Installation Company — design tokens "Cranes, dollies, and level lines." — Nova, 2026-09-30 Drop into the build as-is. Every value here is a decision, not a suggestion. */ :root { /* ---- Core neutrals: the floor, ~80% of any surface ---- */ /* STACE 2026-09-30: the dark ground is now brand navy #233b77, taken from the original palette. It was near-black #1c1e1f, which was my invention. white on it = 10.70:1. On the kraft band it measures 4.79:1 — still an AA pass, but see the SURFACE RULE below: the kraft pairing note is updated. */ --oic-concrete-900: #233b77; /* brand navy — body/heading ink on light, hero + footer ground */ --oic-concrete-700: #363a3c; /* secondary text, icon strokes — 10.10:1 on ground, 5.15:1 on kraft */ --oic-concrete-500: #63686b; /* meta text, captions, attribution — 4.96:1 on --oic-concrete-050 */ --oic-concrete-300: #a9adae; /* rules, dividers, disabled */ --oic-concrete-100: #e4e2dd; /* panel fills, card borders */ --oic-concrete-050: #f2f0ec; /* page background */ --oic-kraft: #c9a882; /* warm secondary surface, texture fields — SEE SURFACE RULE BELOW */ /* ---- SURFACE RULE: kraft is a distinct surface class ---- (Nova, 2026-09-30. Approved by Carl, 2026-09-30. Corrected same day.) PAIRING ON --oic-kraft — the permitted ladder: --oic-concrete-900 headings, emphasis, table headers 4.79:1 PASS (brand navy) --oic-concrete-700 body copy, captions, table cells 5.15:1 PASS --oic-concrete-500 PROHIBITED as text 2.53:1 FAIL --oic-concrete-300 PROHIBITED as text 1.01:1 FAIL --oic-caution PROHIBITED as text 2.61:1 FAIL --oic-verify PROHIBITED as text 2.82:1 FAIL WHY a surface constraint and not a token value: kraft (#c9a882) sits close in luminance to the mid-ramp, so 500 and lighter cannot clear AA on it at ANY value — darkening 500 walks it toward 700/900 and it stops being the token it exists to be. The fix exists only at the PAIRING layer. WHY 700 is permitted, and the earlier rule was wrong: an earlier version said "anything lighter than 900 is a border, rule, or large numeral — never caption text." That was MY error, not a paraphrase of it. I wrote the rule without measuring 700. Measured, #3a3e40 on kraft is 4.84:1 — a real AA pass. A spec-sheet table needs two levels of hierarchy; flattening 17 cells to 900 would have cost the table its structure to satisfy a rule that was never grounded in a measurement. Rules written from unmeasured assumptions are worse than no rule at all. NOTE (Stace, 2026-09-30): concrete-900 is now brand NAVY #233b77, not near-black. On kraft it measures 4.79:1 — still a clear AA pass, but with less headroom than the 7.50:1 it had as near-black. If anything on the kraft band ever looks thin, this is the value to re-check first. WHY 700 was darkened from #3a3e40 to #363a3c: 4.84:1 was measured against a FLAT nominal kraft. The live band is the field-b texture asset, whose local lightness varies across the image, so a nominal pass is a best case rather than a typical one. #363a3c buys +0.65 of headroom over AA on kraft and costs nothing on the light ground (9.50 -> 10.10, both pass). One value, more robust on both surfaces. The visual difference is negligible; the robustness difference is not. ENFORCEMENT: this is a PAIRING rule and must be checked against the SERVED DOM and computed colour per text node, never against this file. A token-only check goes green while non-conforming markup is live, because the defect class is the pairing — and a pairing does not exist inside a token file. That is precisely how 21 nodes shipped non-conforming. Pixel's contrast guard must enforce this as a PAIRING rule, not a comment: a future change can move a caption onto the kraft band and no single-token check will catch it. The failure mode is invisible to any check that validates tokens in isolation. */ /* ---- Accent: brand blue, earned not sprinkled ---- One CTA + at most one accent rule per viewport. Two adjacent accent elements is a mistake, not a style. HISTORY (2026-09-30) — recorded because the numbers matter, not the colours. 1. This token was ORANGE (#e2551f). Stace ruled the site must keep the ORIGINAL blue; I had replaced a 35-year-old brand colour on my own judgment without checking it. Measured off the live old site instead of guessing: #6f88fc primary, #3454a4 medium, #233b77 navy. 2. Before that it was darkened, because the CTA measures 15.2px/600 in the built site — NOT "large text" under WCAG (18.66px bold), so the 3:1 allowance never applied and 4.5:1 did. 3. RENAMED from --oic-safety to --oic-accent. The old name said "orange" while the value was blue, which is exactly how a wrong decision gets inherited by someone who trusts the label. #6f88fc is the original primary blue and is retained at --oic-accent-light for detail and accent only. It CANNOT be a button ground: white on it is 3.18:1. The CTA uses #3454a4 (7.12:1 with white). */ /* STACE 2026-09-30: restored to the ORIGINAL blue palette. Measured from the live old site (Duda stylesheet ab55331a_home_withFlex_1.min.css), not guessed: #6f88fc 8 uses — primary blue, detail/accent #3454a4 medium blue #233b77 dark navy I had replaced a 35-year-old blue with orange on my own judgment without ever checking what the brand colour was. That was the mistake. #6f88fc CANNOT be the CTA ground: white on it is 3.18:1, well short of the 4.5 the CTA size demands. So the ramp keeps its hierarchy and its hue: CTA bg #3454a4 7.12:1 with white hover/pressed #233b77 10.70:1 accent/detail #6f88fc 8 uses in the original — the one place it belongs */ --oic-accent: #3454a4; /* 7.12:1 with white — CTA background */ --oic-accent-deep: #233b77; /* 10.70:1 — hover/pressed, and safe as a bg */ --oic-accent-soft: #dde4fa; /* tint background only, never a text colour */ --oic-accent-light: #6f88fc; /* the original primary blue — detail/accent only, NEVER a text colour and NEVER a button ground */ /* ---- Semantic: sparse and specific ---- */ --oic-verify: #2e6b4f; /* verified testimonial / archival flag only */ /* DARKENED 2026-09-30 (Nova). Was #8a6a1f at 4.43:1, short of AA. This carries storage and lead-time notes, which are load-bearing information on a site about schedules — recessive-by-design was the wrong call for text that tells someone their furniture will be there on a date. */ --oic-caution: #80601a; /* 5.12:1 on --oic-concrete-050 */ /* ---- Type ---- */ --font-display: "Archivo", "Inter Tight", "Helvetica Neue", Arial, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-data: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --tracking-display: -0.02em; /* headlines */ --tracking-label: 0.08em; /* mono labels, uppercase */ /* ---- Layout ---- */ --measure: 68ch; /* body copy, hard cap */ --grid-gap: clamp(1rem, 2.5vw, 2rem); --section-pad: clamp(3rem, 8vw, 7rem); --radius: 2px; /* this is a trades company. no rounded cards. */ /* Stace, 2026-09-30: rounded buttons. The 2px card radius STAYS — a rounded card on a drafting-grid system reads as consumer SaaS, and the tiles/table are structural. Rounding the ACTION surfaces only is the line: pills say "press this", squares say "this is a drawing". */ --radius-pill: 999px; /* buttons, CTA, nav toggle */ --radius-md: 8px; /* inputs, selects, textareas */ --hairline: 1px solid var(--oic-concrete-300); } /* ---- Slot aspect ratios (match SLOTS.md) ---- */ :root { --slot-hero: 16 / 9; /* A, G, M */ --slot-hero-mob: 4 / 5; /* A mobile crop */ --slot-service: 3 / 2; /* B1–B6, C pair */ --slot-band: 21 / 9; /* D, N, H1–H2 */ --slot-location: 4 / 3; /* E1–E4 */ --slot-macro: 1 / 1; /* F1–F6 */ } /* ---- Eyebrow label: the one place all-caps is allowed ---- */ .oic-eyebrow { font-family: var(--font-data); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--oic-concrete-500); } /* ---- Mono is our "this is a fact, not a feeling" signal ---- Locations, phone, "35 years". Use only on verifiable numbers. */ .oic-fact { font-family: var(--font-data); font-weight: 500; letter-spacing: var(--tracking-label); font-variant-numeric: tabular-nums; } /* ---- Verified testimonial flag (re-verified + attributable only) ---- No portrait, no initials avatar. See BRIEF.md §Imagery rules 3. */ .oic-quote-verified { border-left: 2px solid var(--oic-verify); }