/* ================================================================ ZIPTEL DESIGN TOKENS — Slice 2 shared foundation ================================================================ Source of truth: design/ZIPTEL_UI_HANDOFF_2026-08-22/ (owner-approved visual canon). Values below are either (a) sampled directly from pixels in the approved PNG renders via Pillow, coordinates/method documented per token, or (b) taken verbatim from the hex literals declared in the approved HTML mockups (ziptel-s2-type-system.html, ziptel-s2-red-green-badges.html), or (c) mathematically derived from (a) to clear WCAG AA contrast where the raw sampled value did not (documented inline; see reports/2026-08-22_SLICE2_FOUNDATION/CONTRAST_REPORT.md for the full computed ratio table). Per blueprint §3.3 / handoff §3.3: three color systems, kept separate and never confused with one another — 1) BRAND/UI — navy, ivory, ink, one warm accent 2) MAP ENCODING — blue-to-gray choropleth ramp + orange selection (tokens only in this slice; NOT wired into the map's JS-computed fill colors until S4, per S2 packet §4/W1) 3) PERFORMANCE TIERS — seven ordered semantic stops + unavailable ================================================================ */ :root { /* ---- 1) BRAND / UI --------------------------------------------- */ /* Navy shell. Sampled: 01-landing-purpose.png, navbar pixel (10,10) and (700,60), both #0b1932 — direct pixel read, no interpolation. */ --z-navy: #0b1932; /* Ivory canvas. Sampled: 01-landing-purpose.png, body background pixel (100,400) = #fdfcf9. */ --z-ivory: #fdfcf9; /* Dark ink body text. Sampled: 01-landing-purpose.png, search-icon glyph pixel (170,585) = #141c2a (near-identical to production's existing --ink:#1a2332 already in frontend/*.html — continuity, not a swap). */ --z-ink: #141c2a; /* Secondary navy text/links. Derived: blend(--z-navy, --z-ivory, 28%). Contrast on ivory = 6.89:1 (AAA for normal text). */ --z-navy-700: #4f596a; /* Muted navy text (labels, meta). Derived: blend(--z-navy, --z-ivory, 40%) — chosen at 40% rather than a lighter blend specifically because 46%+ drops below 4.5:1 or normal text; 40% clears at 4.59:1 (AA). */ --z-navy-500: #6c7482; /* Warm accent. Raw sampled value (dominant saturated color across 01-landing-purpose.png; matches the "How it works" button and PURPOSE kicker) = #cf4d2a, but that clears only 4.31:1 on ivory (fails AA 4.5:1 for normal text) and 4.42:1 for white-on-fill (also just under 4.5:1). Handoff §2 explicitly calls for a "restrained warm dark orange" — so the production accent token is the sampled hue darkened 12% toward black, which both matches that brief and clears AA: 5.33:1 text-on- ivory, 5.47:1 white-on-accent-fill. The raw sampled value is kept below for reference/large-decorative use only (never as small text). */ --z-accent: #b64425; --z-accent-raw-sampled: #cf4d2a; /* decorative/large-only; see note above */ /* Borders / light fills, tinted into the navy hue family rather than the old arbitrary cool grays. Derived: blend(--z-navy, --z-ivory, 86%/94%). */ --z-border: #dbdcdd; --z-fill: #eeeeed; /* Unavailable / neutral semantic (distinct from the tier ramp; see §3 below). Derived pair clears 5.40:1. */ --z-unavailable-fg: #565c66; --z-unavailable-bg: #e7e6e3; /* ---- 2) MAP ENCODING (tokens defined now; NOT applied to the live choropleth in this slice — that is explicit S4 scope, S2 packet §4/W1 and §5 non-goals) -------------------------------------------------- */ --z-map-blue-100: #45618e; /* sampled: 01-landing-purpose.png thumbnail */ --z-map-blue-300: #627eaa; /* sampled: 01-landing-purpose.png thumbnail */ --z-map-blue-500: #879db8; /* sampled: 01-landing-purpose.png thumbnail */ --z-map-gray: #d9dde3; /* existing production --nodata, unchanged */ --z-map-selected: var(--z-accent-raw-sampled); /* orange selected geography */ /* ---- 3) PERFORMANCE TIERS — seven ordered stops + unavailable ------ Verbatim from the approved badge mockup (ZIPTEL_UI_INTERACTIVE_MOCKUPS/ziptel-s2-red-green-badges.html), cross-validated by direct pixel sampling of 06-shared-semantic-tier-badges.png (greens sampled ~#17653b/#397d51, within normal render-compression variance of the mockup's declared #155d3a/#3f7f56 — the mockup's authored hex values are used as the canonical source since they are the exact declared intent, not a compressed raster of it). Order, high to low: Exceptional > Excellent > Strong (green ×3) > Typical > Limited (amber ×2) > Low > Very low (red ×2). "Leading tier" reuses the Exceptional fill as its top-alias — it is not an eighth stop. Unavailable sits outside the ordered scale (handled by --z-unavailable-fg/bg above, never part of this ramp). Correction (2026-08-23, owner-authorized, independent review finding): the mockup's verbatim Low fill (#b95d50) measured 4.43:1 with white text — 0.07 under WCAG AA's 4.5:1 for normal-size text, confirmed by two independent implementations (contrast_calc.py and Fable's review). Karan authorized darkening it 2% (#b95d50 → #b55b4e) to clear AA while preserving the approved appearance — every other tier stop is untouched, and this is the only value in this file changed by owner instruction rather than sampled/derived. New ratio: 4.59:1 (AA). */ --z-tier-exceptional-fg: #ffffff; --z-tier-exceptional-bg: #155d3a; /* 7.90:1 */ --z-tier-excellent-fg: #ffffff; --z-tier-excellent-bg: #3f7f56; /* 4.79:1 */ --z-tier-strong-fg: var(--z-navy); --z-tier-strong-bg: #a9bd91; /* 8.65:1 */ --z-tier-typical-fg: var(--z-navy); --z-tier-typical-bg: #d6b45a; /* 8.78:1 */ --z-tier-limited-fg: var(--z-navy); --z-tier-limited-bg: #d28a3f; /* 6.21:1 */ --z-tier-low-fg: #ffffff; --z-tier-low-bg: #b55b4e; /* 4.59:1 — corrected from #b95d50 (4.43:1), see note above */ --z-tier-verylow-fg: #ffffff; --z-tier-verylow-bg: #8f3f39; /* 7.15:1 */ /* ---- Spacing scale (4/8px) ---------------------------------------- */ --z-space-1: 4px; --z-space-2: 8px; --z-space-3: 12px; --z-space-4: 16px; --z-space-5: 24px; --z-space-6: 32px; --z-space-7: 48px; --z-space-8: 64px; --z-radius-sm: 6px; --z-radius-md: 10px; --z-radius-pill: 999px; /* ---- Type scale (fluid, ~1.25 modular; dedicated feature-numeral size for score digits / stat counters) ----------------------------- */ --z-text-xs: clamp(0.6875rem, 0.66rem + 0.1vw, 0.75rem); --z-text-sm: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem); --z-text-base: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem); --z-text-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); --z-text-xl: clamp(1.4rem, 1.25rem + 0.6vw, 1.75rem); --z-text-2xl: clamp(1.9rem, 1.6rem + 1.2vw, 2.5rem); --z-text-feature: clamp(2.5rem, 2rem + 2vw, 3.75rem); /* score numerals */ /* ---- Fonts (declared here; @font-face rules live in ziptel.css so this tokens file stays values-only) --------------------------------- */ --z-font-display: "Newsreader", Georgia, "Times New Roman", serif; --z-font-ui: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* ^ FONT-1 (2026-08-22 owner ruling, RESOLVED 2026-08-23): the original ruling named Anthropic Sans as the approved primary UI/body face, but no legitimately obtainable asset existed (full research trail in frontend/assets/fonts/PROVENANCE.md) — the binary was never packaged and the system fallback shipped instead. Karan's 2026-08-23 decision approved Instrument Sans as the replacement primary UI/body face (SIL OFL, official rightsholder repository, same Google Fonts pipeline as Newsreader — see PROVENANCE.md's "Resolution" section). The @font-face binary IS packaged as of this change and Instrument Sans genuinely renders in-browser (verified by glyph-width comparison, not document.fonts.check() alone — see the S2 typography-completion evidence). The system-font stack after it remains an ordinary fallback for browsers/environments where the webfont hasn't loaded yet. */ /* ---- Focus ring (single token; matches Slice-1's shipped :focus-visible treatment) ------------------------------------------- */ --z-focus-ring: 0 0 0 3px rgba(182, 68, 37, 0.35); --z-focus-outline: 2px solid var(--z-accent); }