/* ========================================================================== BRAND SKIN - CANONICAL DESIGN TOKENS (tokens.css) Current skin: KETRON ROOFING. Architecture: SWAPPABLE. ========================================================================== ARCHITECTURE LAW (session-decided 2026-07-04, per team-lead direction): All markup consumes SEMANTIC variables only (--brand-*). This file assigns Ketron values to those semantic names. On Lake Life flip day, a lake-life-tokens.css that redefines the same --brand-* names drops in with ZERO markup changes. Never hardcode a hex in markup; never reference a --kr-* raw token in markup (those exist for provenance + compat only). PROVENANCE - core hexes SAMPLED from real pixels of the mitch-approved 2026 badge: ~/.claude/skills/shared-references/brand/ketron-badge-2026.png (470x239). Method: PIL cluster analysis, 2026-07-04, dominant exact pixel per cluster: navy (shield fill) #275388 (32,002 px, largest color cluster) deep navy (outline/shade) #233D5D (2,278 px cluster) orange (ROOFING bar) #F98A49 (top exact orange pixel, 11k+ cluster) white (KETRON lettering) #FFFFFF (21,752 px, pure white) bevel highlights #9DB2D1 / #C2CEE8 (sampled badge bevel tints) The badge contains NO true off-white; letter white is pure #FFFFFF, so the off-white surface below is DERIVED (navy-tinted white), not sampled. All scale steps are mathematically derived from the sampled values (tints mix toward #FFFFFF, shades mix toward ink #0A0E14). RECONCILIATION vs THE PROPOSAL DESIGN SYSTEM (mitch-approved): ~/.claude/skills/ketron-replacement-proposal/references/design-system.md uses --blue #1E4B7A and --orange #D4722A with Playfair/Inter/JetBrains. Delta measured this session: proposal blue #1E4B7A ~= derived navy-600 #234977 (near match) proposal orange #D4722A ~= derived orange-600 #D57741 (same register, proposal orange is more saturated/burnt) Read: the proposal palette is a darker PRINT REGISTER of the same brand, not a competing palette. CANONICAL SET = the badge pixels (this file). The proposal system keeps its exact values, exposed here as the --brand-*-print aliases; per fix-the-skill law the proposal skill is not silently mutated by this file. Full note: BRAND-DECISIONS.md. KICKCHARGE ALIGNMENT (KETRON-OS/lake-life/research/KICKCHARGE-RESEARCH- PACKET_v1.md): flat saturated fields, high contrast, no gradients/bevels/ glows on brand surfaces; the badge is the hero. Tokens here bias to flat fills and hard-offset shadows for that reason. No em dashes. ASCII only. Never delete; supersede as _vN_PREV. ========================================================================== */ :root { /* ==================================================================== LAYER 1 - RAW KETRON VALUES (provenance layer, --kr-*) Do not use in markup. These document what was sampled/derived. ==================================================================== */ --kr-navy: #275388; /* SAMPLED shield fill */ --kr-navy-deep: #233D5D; /* SAMPLED shield outline/shadow */ --kr-orange: #F98A49; /* SAMPLED ROOFING bar */ --kr-white: #FFFFFF; /* SAMPLED KETRON lettering */ --kr-sky: #9DB2D1; /* SAMPLED badge bevel highlight */ --kr-sky-light: #C2CEE8; /* SAMPLED badge bevel highlight, lighter */ --kr-ink: #0A0E14; /* derived near-black shade anchor */ /* ==================================================================== LAYER 2 - SEMANTIC BRAND TOKENS (--brand-*). MARKUP USES ONLY THESE. Lake Life flip day: redefine everything below in lake-life-tokens.css. ==================================================================== */ /* --- Core roles ----------------------------------------------------- */ --brand-primary: var(--kr-navy); /* the brand's home base color */ --brand-primary-deep: var(--kr-navy-deep); /* depth: outlines, footers, headline-on-light */ --brand-accent: var(--kr-orange); /* action: CTAs, phone, highlights. Keep it loud, use it sparingly */ --brand-on-primary: var(--kr-white); /* lettering color on primary fields */ --brand-highlight: var(--kr-sky); /* subtle accent on primary fields */ --brand-highlight-2: var(--kr-sky-light); /* hairlines/dividers on primary fields */ --brand-ink: var(--kr-ink); /* max-contrast anchor */ /* --- Primary scale (500 = sampled badge navy) ----------------------- */ --brand-primary-50: #F2F5F8; /* faint wash, table stripes */ --brand-primary-100: #E1E7EE; /* light fills, hover on white */ --brand-primary-200: #BECBDB; /* borders, disabled */ --brand-primary-300: #93A9C4; /* muted icons, placeholders */ --brand-primary-400: #5D7EA6; /* secondary text on white (large sizes) */ --brand-primary-500: #275388; /* = --kr-navy, SAMPLED */ --brand-primary-600: #234977; /* hover (also ~= proposal print blue) */ --brand-primary-700: #1E3E65; /* active/pressed */ --brand-primary-800: #1A3454; /* deep section fills */ --brand-primary-900: #162A42; /* darkest, high-contrast headline on light */ /* --- Accent scale (500 = sampled badge orange) ----------------------- */ --brand-accent-50: #FFF8F4; /* tinted callout background */ --brand-accent-100: #FEEFE6; /* light highlight fills */ --brand-accent-200: #FDDCC8; /* soft callout borders */ --brand-accent-300: #FCC4A4; /* decorative accents */ --brand-accent-400: #FAA776; /* hover tint on light */ --brand-accent-500: #F98A49; /* = --kr-orange, SAMPLED. Buttons, phone. */ --brand-accent-600: #D57741; /* button hover (~= proposal print orange register) */ --brand-accent-700: #B16539; /* button active */ --brand-accent-800: #8D5231; /* accent text on light that must pass contrast */ --brand-accent-900: #6A4029; /* darkest usable accent */ /* --- Deep shades (derived from sampled #233D5D) ---------------------- */ --brand-deep-600: #1C2F47; /* footer gradients, pressed dark surfaces */ --brand-deep-700: #152335; /* darkest brand surface before ink */ /* --- Surfaces --------------------------------------------------------- */ --brand-off-white: #F5F7FA; /* DERIVED paper tone (97% white over navy). Default page bg. */ --brand-surface: #FFFFFF; /* cards/panels sit white on off-white */ --brand-surface-dark: var(--brand-primary-deep); /* hero bands, footers */ /* --- Print register (the mitch-approved proposal document palette) --- SAMPLED from ketron-replacement-proposal/references/design-system.md. Documents (proposals, planners, invoices) keep these exact values; web/brand surfaces use the badge-sampled canonicals above. ---------- */ --brand-primary-print: #1E4B7A; /* proposal --blue */ --brand-accent-print: #D4722A; /* proposal --orange */ --brand-card-print: #F8F7F5; /* proposal warm off-white card */ /* --- Semantic text ----------------------------------------------------- */ --brand-text: var(--brand-primary-900); /* body on light: navy-black, never pure black */ --brand-text-muted: var(--brand-primary-400); --brand-text-on-dark: var(--brand-on-primary); --brand-text-on-dark-muted: var(--brand-highlight-2); --brand-text-on-accent: var(--brand-primary-900); /* badge precedent: navy lettering on the orange bar */ --brand-link: var(--brand-primary-500); --brand-link-hover: var(--brand-accent-600); /* ==================================================================== TYPOGRAPHY Brand display face: chunky slab caps matching the badge KETRON lettering energy. Alfa Slab One (OFL, free, self-hostable) is the match; Archivo Black (OFL) the heavy geometric fallback; Arial Black the zero-download system fallback. No CDN required at runtime. Body face: system UI stack, maximum readability, zero load cost. Document register (proposals) stays Playfair/Inter/JetBrains per the mitch-approved proposal design system; exposed as --brand-*-doc. ==================================================================== */ --brand-display-font: "Alfa Slab One", "Archivo Black", "Arial Black", "Segoe UI", system-ui, sans-serif; --brand-body-font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, system-ui, sans-serif; --brand-mono-font: Consolas, "SF Mono", Menlo, monospace; /* hexes, specs, data */ --brand-serif-doc: "Playfair Display", Georgia, serif; /* document titles (print register) */ --brand-mono-doc: "JetBrains Mono", Consolas, monospace; /* document labels (print register) */ /* Type scale (1.25 major third, 16px base) */ --brand-text-xs: 0.75rem; /* 12px captions, legal */ --brand-text-sm: 0.875rem; /* 14px secondary UI */ --brand-text-base: 1rem; /* 16px body */ --brand-text-lg: 1.25rem; /* 20px lead paragraph */ --brand-text-xl: 1.5625rem; /* 25px card titles */ --brand-text-2xl: 1.953rem; /* 31px section headings */ --brand-text-3xl: 2.441rem; /* 39px page headlines */ --brand-text-4xl: 3.052rem; /* 49px hero display */ --brand-text-5xl: 3.815rem; /* 61px billboard/truck-scale display */ --brand-leading-tight: 1.1; /* display headlines */ --brand-leading-body: 1.6; /* body copy */ --brand-tracking-display: 0.01em; /* slab caps need a hair of air */ --brand-tracking-caps: 0.08em; /* small all-caps labels (ROOFING-bar energy) */ /* ==================================================================== SPACING (4px base) ==================================================================== */ --brand-space-1: 0.25rem; /* 4px icon gaps */ --brand-space-2: 0.5rem; /* 8px tight padding */ --brand-space-3: 0.75rem; /* 12px button padding vertical */ --brand-space-4: 1rem; /* 16px default gap */ --brand-space-6: 1.5rem; /* 24px card padding */ --brand-space-8: 2rem; /* 32px between related blocks */ --brand-space-12: 3rem; /* 48px section padding vertical (mobile) */ --brand-space-16: 4rem; /* 64px section padding vertical (desktop) */ --brand-space-24: 6rem; /* 96px hero breathing room */ /* ==================================================================== RADIUS - the badge silhouette is chunky with softened corners. Sturdy, friendly, never bubbly. ==================================================================== */ --brand-radius-sm: 4px; /* inputs, chips */ --brand-radius: 8px; /* buttons, cards */ --brand-radius-lg: 14px; /* feature panels, images */ --brand-radius-xl: 22px; /* hero cards, big callouts */ --brand-radius-full: 999px;/* pills - use sparingly */ /* ==================================================================== SHADOWS - navy-tinted, never gray. KickCharge rule: no glows/bevels on brand surfaces; the hard offset is the badge's own drop-shadow language and the only "effect" allowed at wrap scale. ==================================================================== */ --brand-shadow-sm: 0 1px 2px rgba(35, 61, 93, 0.10); --brand-shadow: 0 2px 8px rgba(35, 61, 93, 0.14); --brand-shadow-lg: 0 8px 24px rgba(35, 61, 93, 0.18); --brand-shadow-hard: 0 4px 0 var(--brand-primary-deep); /* hard offset for buttons/badges */ /* ==================================================================== BORDERS AND FOCUS ==================================================================== */ --brand-border: 1px solid var(--brand-primary-200); --brand-border-heavy: 3px solid var(--brand-primary-deep); /* badge outline weight, scaled to UI */ --brand-focus-ring: 0 0 0 3px rgba(249, 138, 73, 0.45); /* accent focus, visible on dark and light */ /* ==================================================================== BRAND CONSTANTS (non-color truths every surface repeats) ==================================================================== */ /* Phone (customer main line): (208) 508-ROOF -> tel:12085087663 */ /* Toll-free: 833-CDA-ROOF -> tel:8332327663 */ /* Email: mitch@ketronroofing.com */ /* Taglines in live use: "With Us, It's a Family Affair" and */ /* "A Customer Service Company that Does Roofing." */ /* Logo law (LOGO-STANDARD.md, mitch-approved): badge = every document */ /* header, top-left, ~0.6in; lockup (two-brothers mascot) = WHITE */ /* backgrounds only, hero/cover moments only, never over a photo. */ }