/* ============================================================ MotoGP Data — Base Visual System / Design Tokens ------------------------------------------------------------ Vanilla CSS custom properties. No framework, no build. All colours defined in OKLCH for perceptual coherence. Philosophy: a sober, honest data product. Typography and whitespace do the work; colour is rationed. ONE blue is the data voice across the entire product. ONE warm amber accent for emphasis + attention. A single vivid magenta-red is reserved EXCLUSIVELY for a future blog section and must never appear elsewhere. Colour never encodes sections or phases. ============================================================ */ /* ------------------------------------------------------------ FONTS — self-hosting recipe (see note) ------------------------------------------------------------ The live style guide loads Inter + Space Grotesk from the Google Fonts CDN. To self-host (recommended for production): drop the woff2 files in /fonts and add an @font-face rule per family whose src points to the local file, then remove the in . Both families cover Latin Extended — Catalan ç and l·l, accents. Inter weights 300–700 src → /fonts/Inter-Variable.woff2 format woff2 Space Grotesk weights 400–700 src → /fonts/SpaceGrotesk-Variable.woff2 format woff2 (font-display: swap) ------------------------------------------------------------ */ :root { /* ========================================================== 1 · COLOUR PRIMITIVES (all OKLCH: lightness chroma hue) ========================================================== */ /* --- Blue — the data voice. Used product-wide: links, primary action, charts, focus. One hue (~254) anchors everything. --- */ --blue-50: oklch(0.971 0.013 254); --blue-100: oklch(0.936 0.030 254); --blue-200: oklch(0.884 0.052 254); --blue-300: oklch(0.804 0.084 254); --blue-400: oklch(0.690 0.123 254); --blue-500: oklch(0.560 0.150 254); /* base data blue (charts) */ --blue-600: oklch(0.488 0.146 255); /* links, primary button */ --blue-700: oklch(0.412 0.124 257); /* pressed, deep accents */ --blue-800: oklch(0.330 0.092 259); --blue-900: oklch(0.262 0.064 261); /* --- Amber — the warm accent. Complementary of the blue (hue ~70). Muted, controlled chroma — never neon. Two jobs: (1) emphasise ONE series among blues in a chart, (2) attention states in UI. --- */ --amber-50: oklch(0.972 0.020 75); --amber-100: oklch(0.940 0.042 74); --amber-200: oklch(0.895 0.072 73); --amber-300: oklch(0.835 0.100 72); --amber-400: oklch(0.795 0.118 71); --amber-500: oklch(0.740 0.130 70); /* accent base (fills/markers) */ --amber-600: oklch(0.660 0.125 66); /* accent strong */ --amber-700: oklch(0.530 0.102 58); /* amber-as-text, AA on light */ /* --- Magenta-red — BLOG ONLY. Vivid, clean, high chroma. Deliberately distinct from amber: red-magenta hue (~10), far more chroma. Must never appear outside the blog. --- */ --magenta-50: oklch(0.962 0.034 12); --magenta-100: oklch(0.912 0.070 12); --magenta-500: oklch(0.602 0.224 12); /* blog accent (bright) */ --magenta-600: oklch(0.552 0.218 11); /* blog accent base */ --magenta-700: oklch(0.478 0.190 10); /* blog link/text, AA */ /* --- Neutrals — cool, hue locked to the blue (254) with chroma ≈ 0 so the greys read as "the same family" as the data blue. NEVER warm. neutral-0 is pure white. --- */ --neutral-0: oklch(1 0 254); /* pure white */ --neutral-50: oklch(0.985 0.002 254); --neutral-100: oklch(0.967 0.003 254); --neutral-150: oklch(0.948 0.004 254); --neutral-200: oklch(0.912 0.005 254); --neutral-300: oklch(0.858 0.006 254); --neutral-400: oklch(0.730 0.008 254); --neutral-500: oklch(0.616 0.010 254); --neutral-600: oklch(0.516 0.011 255); --neutral-700: oklch(0.412 0.011 256); --neutral-800: oklch(0.302 0.010 258); --neutral-900: oklch(0.224 0.008 260); --neutral-950: oklch(0.170 0.007 262); /* ========================================================== 2 · SURFACES (background elevation scale) Base is a faintly blue-tinted off-white (never pure white, never warm). Raised is pure white — cards pop by being cleaner/brighter than the base, no border or shadow needed. Sunken recedes — table headers, methodology, code. ========================================================== */ --surface-base: var(--neutral-50); /* page background */ --surface-raised: var(--neutral-0); /* cards, findings, tiles */ --surface-sunken: var(--neutral-100); /* table head, method, code */ --surface-inset: var(--neutral-150); /* wells, deeper insets */ --surface-inverse: var(--neutral-950); /* tooltips, inverted chips */ /* ========================================================== 3 · TEXT / INK ========================================================== */ --text-primary: var(--neutral-900); --text-secondary: var(--neutral-700); --text-muted: var(--neutral-500); --text-faint: var(--neutral-400); --text-inverse: var(--neutral-50); --text-inverse-muted: var(--neutral-300); --text-link: var(--blue-600); --text-link-hover: var(--blue-700); --text-on-accent: var(--neutral-900); /* dark ink on amber fills */ --text-on-blue: var(--neutral-0); /* white on blue fills */ /* ========================================================== 4 · BORDERS / RULES (hairlines do the work) ========================================================== */ --border-subtle: var(--neutral-200); --border-default: var(--neutral-300); --border-strong: var(--neutral-400); --border-ink: var(--neutral-900); --rule: var(--neutral-200); /* printer-style hairline */ --focus-ring: var(--blue-500); /* ========================================================== 5 · SEMANTIC ACCENTS ========================================================== */ --accent: var(--amber-500); /* emphasis / attention */ --accent-strong: var(--amber-600); --accent-text: var(--amber-700); /* amber that must be text */ --accent-surface: var(--amber-50); /* faint attention wash */ --accent-border: var(--amber-400); --blog-accent: var(--magenta-600); /* blog section ONLY */ --blog-accent-text: var(--magenta-700); --blog-surface: var(--magenta-50); /* Functional signals — desaturated, rare. NOT the blog red. Warning/attention is the amber accent's job. */ --signal-positive: oklch(0.560 0.095 152); --signal-error: oklch(0.520 0.140 28); /* muted oxblood, ≠ blog */ /* ========================================================== 6 · CHARTING RAMPS (reusable tokens — feed Highcharts/D3, never bake colour into a chart component) ========================================================== */ /* Sequential — single-hue blue, light → dark. Choropleths, heat scales, ordered magnitudes. */ --chart-seq-1: oklch(0.930 0.030 252); --chart-seq-2: oklch(0.852 0.062 253); --chart-seq-3: oklch(0.760 0.098 253); --chart-seq-4: oklch(0.658 0.132 254); --chart-seq-5: oklch(0.552 0.150 255); --chart-seq-6: oklch(0.430 0.126 257); /* Categorical — 6 series, distinguishable over light surfaces AND as 1px lines. Tuned for contrast: every member sits dark enough to read as a hairline. cat-2 (amber) is the lightest; for hairline use give it ≥1.5px or use --accent-strong. */ --chart-cat-1: oklch(0.500 0.150 254); /* blue */ --chart-cat-2: oklch(0.620 0.122 68); /* amber */ --chart-cat-3: oklch(0.560 0.098 200); /* teal */ --chart-cat-4: oklch(0.470 0.140 293); /* violet */ --chart-cat-5: oklch(0.545 0.108 150); /* green */ --chart-cat-6: oklch(0.455 0.030 256); /* slate */ /* Emphasis pattern — de-emphasised greys + one amber that pops. Use when ONE series carries the story. */ --chart-emphasis: var(--amber-500); --chart-muted: oklch(0.790 0.010 254); /* quiet line */ --chart-muted-strong: oklch(0.640 0.011 254); /* quiet but legible */ /* Chart furniture */ --chart-grid: var(--neutral-200); --chart-axis: var(--neutral-400); --chart-ink: var(--neutral-700); /* in-chart labels */ /* ========================================================== 7 · TYPOGRAPHY Inter for text/UI/data. Three role tokens. Tabular figures are mandatory on everything numeric — pair --font-data with --num-tabular. ========================================================== */ --font-display: 'Inter', system-ui, sans-serif; /* variant A */ --font-display-alt: 'Space Grotesk', 'Inter', system-ui, sans-serif; /* variant B */ --font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-data: 'Inter', system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Numeric feature sets — apply on ALL figures */ --num-tabular: "tnum" 1, "lnum" 1; /* tables, axes, values */ --num-tabular-ss: "tnum" 1, "lnum" 1, "ss01" 1;/* + Inter alt glyphs */ /* Weights */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Size scale (rem; 1rem = 16px) */ --fs-10: 0.625rem; --fs-11: 0.6875rem; --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem; --fs-15: 0.9375rem; /* UI / body default */ --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-22: 1.375rem; --fs-24: 1.5rem; --fs-30: 1.875rem; --fs-36: 2.25rem; --fs-48: 3rem; --fs-60: 3.75rem; --fs-72: 4.5rem; /* Line-heights */ --lh-tight: 1.08; /* display */ --lh-snug: 1.22; /* headlines */ --lh-normal: 1.45; /* UI */ --lh-relaxed: 1.6; /* body */ --lh-data: 1.3; /* tables, figures */ /* Tracking */ --tr-display: -0.03em; --tr-tight: -0.018em; --tr-normal: 0; --tr-caps: 0.13em; /* eyebrows, labels, set-caps */ --tr-caps-sm: 0.08em; /* ========================================================== 8 · SPACING (4px base, 8pt rhythm) ========================================================== */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* ========================================================== 9 · RADII (sharp by default) ========================================================== */ --r-0: 0; --r-1: 2px; /* inputs, chips */ --r-2: 4px; /* cards, tiles */ --r-pill: 999px; /* status chips */ /* ========================================================== 10 · SHADOWS (almost never; elevation is rules + cleanliness) ========================================================== */ --shadow-none: none; --shadow-1: 0 1px 2px oklch(0.262 0.064 261 / 0.05); --shadow-2: 0 2px 8px oklch(0.262 0.064 261 / 0.07); --shadow-modal: 0 16px 48px oklch(0.262 0.064 261 / 0.16); /* ========================================================== 11 · MOTION (short, unobtrusive — no bounce, no spring) ========================================================== */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ========================================================== 12 · LAYOUT ========================================================== */ --container-text: 680px; --container-base: 960px; --container-wide: 1200px; }