/* ============================================================================ BEPCO Studio — Design Tokens ---------------------------------------------------------------------------- Auto-extracted from the design files under /design. Every value below is transcribed VERBATIM from those files — nothing rounded, cleaned, or invented. SOURCE OF RECORD: the five internally-consistent mockups in /design/mockups/ (archive, grid-builder-lab, homepage, shop, substation-03). They share one palette; that palette is what's tokenized here. The three spec files at /design/*.html were used only to CROSS-CHECK roles and to surface disagreements — NOT as a value source, because they diverge from the mockups and from each other (see "CONFLICTS" at the bottom). They also contain many one-off colors that read as era/illustration artwork rather than system tokens; those were deliberately NOT promoted to tokens (flagged). RULE (per CLAUDE.md): reference these tokens; never hardcode a value, never reconstruct one from memory. NOT INCLUDED (out of the requested color/spacing/font scope, but present in the mockups if you want them next): line-height (~19 values), letter-spacing (~22 values), border-radius (only 50%). ============================================================================ */ :root { /* ========================================================================== TYPOGRAPHY — font families Three stacks, identical across all five mockups. ========================================================================== */ --font-serif: 'Libre Baskerville', serif; /* wordmark / display */ --font-sans: 'IBM Plex Sans', sans-serif; /* UI / body */ --font-mono: 'IBM Plex Mono', monospace; /* technical / archival codes */ /* Condensed stack — appears ONLY in the spec file bepco-archival-coding-system.html, not in any mockup. The type system (CLAUDE.md) does call for Plex Condensed, so it's included, but FLAG: confirm the exact stack before relying on it. */ --font-cond: 'IBM Plex Sans Condensed', var(--font-sans); /* ========================================================================== TYPOGRAPHY — font weights Only these three weights appear anywhere in the mockups. ========================================================================== */ --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; /* ========================================================================== TYPOGRAPHY — font sizes Named neutrally by pixel value: roles (body/caption/label/etc.) are NOT assignable from the CSS alone, so these are by-value, not by-role. FLAG: needs a role pass later. All values are exactly as they appear. ========================================================================== */ --fs-8: 8px; --fs-9: 9px; --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-17: 17px; --fs-18: 18px; --fs-19: 19px; --fs-20: 20px; --fs-22: 22px; --fs-24: 24px; --fs-26: 26px; --fs-32: 32px; --fs-56: 56px; /* Oversized display / watermark numerals: */ --fs-120: 120px; --fs-140: 140px; --fs-160: 160px; --fs-240: 240px; /* Fluid display sizes (clamp), named by their min–max bounds to avoid implying a scale. Roles ambiguous. FLAG: two share a 52px max but different mins. */ --fs-fluid-14-18: clamp(14px, 1.5vw, 18px); --fs-fluid-18-24: clamp(18px, 2vw, 24px); --fs-fluid-20-26: clamp(20px, 2vw, 26px); --fs-fluid-32-48: clamp(32px, 3.5vw, 48px); --fs-fluid-32-52: clamp(32px, 4vw, 52px); --fs-fluid-36-52: clamp(36px, 4vw, 52px); --fs-fluid-40-56: clamp(40px, 4vw, 56px); --fs-fluid-42-80: clamp(42px, 5.5vw, 80px); --fs-fluid-48-84: clamp(48px, 6vw, 84px); --fs-fluid-48-88: clamp(48px, 6vw, 88px); --fs-fluid-28-44: clamp(28px, 3vw, 44px); --fs-fluid-56-96: clamp(56px, 7vw, 96px); /* ========================================================================== COLOR — core palette (solid) Token names are BEPCO's own canonical names from the mockup variables (importing their roles rather than inventing generic ones). Generic role noted in comments where it's unambiguous. ========================================================================== */ /* Warm neutrals — surfaces, lightest → darkest */ --color-parchment: #F5F0E8; /* base page surface (lightest) */ --color-vellum: #EDE4D0; /* secondary surface */ --color-canvas: #E2DDD4; /* tertiary surface */ --color-charcoal: #3A3028; /* dark neutral */ --color-soot: #3C2E1E; /* dark warm brown */ --color-carbon: #1A1612; /* near-black — primary ink/text */ /* Amber — accent family */ --color-amber: #C8860A; /* primary accent */ --color-amber-lt: #E09820; /* light accent (most-used amber in mockups) */ --color-amber-dk: #8B4A08; /* dark accent */ /* Cool neutrals — used both as surfaces/UI and as era colors below */ --color-porcelain: #7A9E8A; /* muted green */ --color-steel: #6A7A7C; /* muted blue-grey */ /* ========================================================================== COLOR — era accents (semantic) In the mockups these are exact aliases of palette colors above. ========================================================================== */ --color-era-founding: var(--color-amber); /* #C8860A — 1897 */ --color-era-midcentury: var(--color-porcelain); /* #7A9E8A — 1958 */ --color-era-contemporary: var(--color-steel); /* #6A7A7C — 2026 */ /* ========================================================================== COLOR — semantic status (from bepco-shop.html stock indicators) ========================================================================== */ --color-status-instock-dot: #8FBF9F; /* "in stock" dot */ --color-status-instock-text: #B5D9C2; /* "in stock" label */ --color-status-limited-dot: #D9A9A9; /* "limited" dot */ --color-status-limited-text: #E8C5C5; /* "limited" label */ /* Rust — alert color for far-off-nominal states (e.g. the hero frequency widget's "excursion" band). *** NEW / NOT from the mockups ***: the palette had no rust. Placeholder value, flagged per "import, don't invent" — confirm or replace this hex. */ --color-status-rust: #C0512A; /* ========================================================================== COLOR — one-off UI literals (not in the shared variable set) Real UI colors, but each used once. FLAG: each sits very close to an existing token — may be intentional variants or may want consolidating. ========================================================================== */ --color-surface-card: #F0E8D2; /* homepage archive-card bg (≈ vellum) */ --color-surface-featured: #221C16; /* featured-card hover bg (≈ carbon) */ --color-ink-inverse: #F0E8D8; /* light title text on dark (≈ parchment) */ /* ========================================================================== COLOR — translucent tints (NOT enumerated — see note) The mockups use ~70 distinct rgba() values, but they are all just FOUR base colors at many different opacities. Emitting 70 tokens would bury the real palette and can't be role-named. Base colors captured here; the opacity layer is left for you to decide (a small opacity scale? keep literal in components?). FLAG / DECISION NEEDED — see summary. - rgba(26,22,18, a) = --color-carbon (ink tints/shadows) - rgba(245,240,232,a) = --color-parchment (light tints on dark) - rgba(200,134,10, a) = --color-amber (accent glows) - rgba(255,255,255,a) = pure white (highlights; no solid token) ========================================================================== */ /* ========================================================================== SPACING Distinct numeric values from padding / margin / gap across the mockups, named neutrally by pixel value. Roles NOT assignable from CSS → by-value, not a designed scale. FLAG: note the non-uniform steps (…9, 26… break an otherwise 4px-ish rhythm) — likely wants rationalizing into a real scale. ========================================================================== */ --space-1: 1px; --space-2: 2px; --space-3: 3px; --space-4: 4px; --space-5: 5px; --space-6: 6px; --space-8: 8px; --space-9: 9px; --space-10: 10px; --space-12: 12px; --space-14: 14px; --space-16: 16px; --space-18: 18px; --space-20: 20px; --space-24: 24px; --space-26: 26px; --space-28: 28px; --space-32: 32px; --space-36: 36px; --space-40: 40px; --space-48: 48px; --space-52: 52px; --space-56: 56px; --space-64: 64px; --space-80: 80px; --space-96: 96px; } /* ============================================================================ RESOLVED — source-file conflicts, decided with Kevin on 2026-07-18. Every decision kept the MOCKUP value (the 5 files in /design/mockups/ are the source of record). The active tokens above already reflect these; rejected values are recorded so we don't re-litigate. (typography = bepco-typography- specimen.html; archival = bepco-archival-coding-system.html) --color-porcelain → #7A9E8A (muted green, era-midcentury). REJECTED archival's #FBF9F5 near-white surface (role conflict — dropped as spec-only; re-add under a surface name later if a bright near-white is ever needed). --color-carbon → #1A1612. Rejected typography #1A1410, archival #0E0C0A. (Chosen value is also the base of all rgba(26,22,18,α) tints.) --color-soot → #3C2E1E. Rejected archival #1A1612 (which == carbon). --color-steel → #6A7A7C. Rejected archival #6A6E73. (Keeps era-contemporary in sync.) --color-vellum → #EDE4D0. Rejected archival #EDE6D8. --color-amber-lt → #E09820. Rejected typography #D4921C, archival #C8860A (== amber). dark/founding amber→ kept mockups only: --color-amber-dk #8B4A08, and era-founding stays aliased to base --color-amber #C8860A. REJECTED the specs' distinct "founding amber" #B87A06 (--f-amber / --amber-founding) — not used in any mockup. Untouched notes (no action taken): - Naming-only, values agree: era spec calls #F5F0E8 "--cream" (== parchment) and #1A1612 "--ink" (== carbon). No new tokens added. - Spec-only #F4F0EA page bg (16 uses in specs) NOT adopted; canonical page surface remains --color-parchment #F5F0E8. ============================================================================ */