/* ============================================================================ VARIGRID — colors_and_type.css The single source of truth for color + type tokens. Direction: "Paper & Signal" — warm editorial neutrals, one deep signal green, copper for heritage warmth, data as the hero. Built to read like a precision instrument, not a generic SaaS app. Fonts (all OFL / open-source, loaded from Google Fonts): IBM Plex Sans — UI, labels, body Source Serif 4 — editorial display, headlines, pull quotes IBM Plex Mono — all data: KPI values, axes, codes, tabular numerals NOTE: production currently ships Inter + JetBrains Mono. This file proposes the upgraded type system. Load the fonts once per document, e.g.: ========================================================================== */ :root { /* ── Neutrals — warm paper & ink ──────────────────────────────────────── */ --paper: #FBFAF6; /* page background — warm off-white */ --paper-2: #F3F1EA; /* subtle / nested sections */ --paper-3: #ECE9DF; /* inputs, hover fills */ --card: #FFFFFF; /* elevated surfaces */ --ink: #17150F; /* primary text + dark surfaces (warm near-black) */ --ink-2: #3C3A31; /* secondary text */ --ink-3: #6B675C; /* tertiary text / labels */ --ink-4: #9A968A; /* captions / disabled */ --line: #E5E2D8; /* hairline borders */ --line-2: #D6D2C5; /* stronger borders */ --line-3: #C2BDAD; /* strongest / focus rings on paper */ /* ── Signal — the one primary accent (deep, measured green) ───────────── */ --signal: #15734A; /* buttons, links, positive — deep green for light bg */ --signal-press: #105C3B; /* pressed / hover-darken */ --signal-lo: rgba(21,115,74,0.10); --signal-line: rgba(21,115,74,0.28); --live: #1FA463; /* brighter green — live dots, chart lines, on dark */ /* ── Copper — heritage warmth, used sparingly ─────────────────────────── */ --copper: #B45309; /* secondary accent, editorial highlights */ --copper-lo: rgba(180,83,9,0.10); --copper-line: rgba(180,83,9,0.26); /* ── Semantic data states (measured, never neon) ──────────────────────── */ --positive: #15734A; /* = signal */ --warning: #C2790B; /* amber */ --warning-lo: rgba(194,121,11,0.12); --critical: #B23B2E; /* brick red */ --critical-lo: rgba(178,59,46,0.10); --info: #2F5D8C; /* slate blue */ --info-lo: rgba(47,93,140,0.10); /* ── Vertical accents — one core identity that flexes per industry. Use ONLY as a tag/tint to mark a site's industry, never as page color. ── */ --v-datacenter: #2F5D8C; /* data centres — slate blue */ --v-cold: #0E7C8C; /* cold storage — teal / ice */ --v-mfg: #B45309; /* manufacturing — copper */ --v-warehouse: #8A6D3B; /* warehousing — bronze */ --v-crypto: #565C66; /* crypto mining — graphite */ --v-office: #5A6E4A; /* commercial buildings — olive */ /* ── Dark "terminal" data surface — honors the product's dark heritage as a DATA surface (hero dashboards, key metric walls), not page chrome. */ --term-bg: #17150F; /* warm near-black panel */ --term-2: #211E16; /* nested panel */ --term-3: #2C2920; /* hover / chips */ --term-line: rgba(255,255,255,0.10); --term-line-2: rgba(255,255,255,0.18); --term-text: #F4F2EA; /* primary on dark */ --term-text-2: #B9B4A6; /* secondary on dark */ --term-text-3: #847F71; /* tertiary on dark */ /* ── Fonts ────────────────────────────────────────────────────────────── */ --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ── Type scale (px) — editorial, generous. Tabular numerals on all data ─ */ --fs-display: 60px; /* hero headlines (serif) */ --fs-h1: 40px; /* page titles */ --fs-h2: 28px; /* section heads */ --fs-h3: 20px; /* card / sub heads */ --fs-h4: 17px; /* dense section heads (app) */ --fs-lead: 19px; /* lead paragraphs */ --fs-body: 16px; /* default reading */ --fs-ui: 15px; /* app UI body */ --fs-meta: 13px; /* captions, timestamps */ --fs-eyebrow: 12px; /* uppercase tracked labels */ --fs-kpi: 40px; /* KPI values (mono) */ --lh-tight: 1.08; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.6; --track-eyebrow: 0.08em; --track-tight: -0.02em; /* display / large serif */ --track-snug: -0.01em; /* ── Spacing (4px base) ───────────────────────────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-24: 96px; /* ── Radii — restrained, not over-rounded ─────────────────────────────── */ --r-sm: 4px; --r: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; /* ── Elevation — hairline + soft warm lift. Light only; dark uses borders. */ --shadow-sm: 0 1px 2px rgba(23,21,15,0.05); --shadow: 0 1px 2px rgba(23,21,15,0.05), 0 4px 16px rgba(23,21,15,0.06); --shadow-lg: 0 2px 6px rgba(23,21,15,0.06), 0 24px 48px -12px rgba(23,21,15,0.14); /* ── Layout widths ────────────────────────────────────────────────────── */ --w-text: 700px; --w-page: 1140px; --w-wide: 1280px; --sidebar: 232px; --topbar: 60px; /* ── Motion — quick, mechanical, no bounce ────────────────────────────── */ --ease: cubic-bezier(0.2, 0, 0, 1); --dur-fast: 0.12s; --dur: 0.18s; } /* ============================================================================ SEMANTIC TYPE CLASSES — apply directly or copy the rules. ========================================================================== */ .vg-display { font-family: var(--font-serif); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--track-tight); font-weight: 600; color: var(--ink); } .vg-h1 { font-family: var(--font-serif); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--track-tight); font-weight: 600; color: var(--ink); } .vg-h2 { font-family: var(--font-sans); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--track-snug); font-weight: 600; color: var(--ink); } .vg-h3 { font-family: var(--font-sans); font-size: var(--fs-h3); line-height: 1.3; letter-spacing: var(--track-snug); font-weight: 600; color: var(--ink); } .vg-h4 { font-family: var(--font-sans); font-size: var(--fs-h4); line-height: 1.35; font-weight: 600; color: var(--ink); } .vg-eyebrow { font-family: var(--font-sans); font-size: var(--fs-eyebrow); line-height: 1.2; letter-spacing: var(--track-eyebrow); text-transform: uppercase; font-weight: 600; color: var(--signal); } .vg-lead { font-family: var(--font-sans); font-size: var(--fs-lead); line-height: var(--lh-normal); color: var(--ink-2); } .vg-body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--ink-2); } .vg-meta { font-family: var(--font-sans); font-size: var(--fs-meta); line-height: var(--lh-normal); color: var(--ink-3); } /* Data: KPI values, axes, codes, any number that must line up. */ .vg-kpi { font-family: var(--font-mono); font-size: var(--fs-kpi); line-height: 1.05; letter-spacing: -0.01em; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); } .vg-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: 'zero' on; } .tnum, .tnum * { font-variant-numeric: tabular-nums; }