Design Tokens & Dev Guide

{
  "color": {
    "steel": {
      "50":  "#F2F4F5",
      "100": "#E3E7E9",
      "200": "#C8CED2",
      "300": "#A7AFB5",
      "400": "#8A9299",
      "500": "#697279",
      "600": "#505960",
      "700": "#3A4248",
      "800": "#262D32",
      "900": "#161B1E"
    },
    "crimson": {
      "50":  "#FEF0F1",
      "100": "#FDDCDE",
      "200": "#FAB3B8",
      "300": "#F47D85",
      "400": "#E74552",
      "500": "#BF1D2D",
      "600": "#96161E",
      "700": "#6E1017",
      "800": "#480B0F",
      "900": "#250508"
    },
    "gold": {
      "300": "#E0C88A",
      "400": "#CDB268",
      "500": "#C9A74C",
      "600": "#A58840",
      "700": "#8C7030"
    },
    "cream": {
      "default": "#F4EFE6",
      "dark":    "#EDE4CC"
    },
    "neutral": {
      "50":  "#F4F6FA",
      "200": "#E2E8F0",
      "400": "#94A3B8",
      "500": "#64748B",
      "600": "#475569",
      "700": "#334155",
      "900": "#091628"
    },
    "semantic": {
      "success": "#00C853",
      "warning": "#FFB300",
      "error":   "#FF1744",
      "info":    "#697279"
    }
  },
  "spacing": {
    "1": "4px",  "2": "8px",
    "3": "12px", "4": "16px",
    "6": "24px", "8": "32px",
    "12": "48px","16": "64px"
  },
  "radius": {
    "sm":   "6px",
    "md":   "10px",
    "lg":   "16px",
    "pill": "100px"
  },
  "typography": {
    "family": {
      "display": "Barlow Condensed",
      "heading": "Barlow Condensed",
      "body":    "Inter"
    },
    "scale": {
      "display-xl":  "clamp(52px, 10vw, 104px)",
      "display-lg":  "clamp(40px, 8vw, 88px)",
      "display":     "clamp(36px, 7vw, 76px)",
      "display-sm":  "clamp(28px, 5vw, 56px)",
      "score":       "clamp(48px, 10vw, 80px)",
      "h1":          "clamp(28px, 4.5vw, 48px)",
      "h2":          "clamp(20px, 3.5vw, 36px)",
      "h3":          "24px",
      "h4":          "20px",
      "body-l":      "18px",
      "body":        "15px",
      "small":       "13px",
      "caption":     "11px"
    }
  }
}

:root {
  /* Color — Primary */
  --cpsl-steel-50:  #F2F4F5;
  --cpsl-steel-500: #697279;
  --cpsl-steel-600: #505960;
  --cpsl-steel-900: #161B1E;

  /* Color — Crimson (accent) */
  --cpsl-crimson-400: #E74552;
  --cpsl-crimson-500: #BF1D2D;
  --cpsl-crimson-600: #96161E;

  /* Color — Gold */
  --cpsl-gold-500: #C9A74C;
  --cpsl-gold-600: #A58840;
  --cpsl-gold-300: #E0C88A;

  /* Color — Cream */
  --cpsl-cream:      #F4EFE6;
  --cpsl-cream-dark: #EDE4CC;

  /* Color — Neutral */
  --cpsl-neutral-50:  #F4F6FA;
  --cpsl-neutral-200: #E2E8F0;
  --cpsl-neutral-400: #94A3B8;
  --cpsl-neutral-600: #475569;
  --cpsl-neutral-900: #091628;

  /* Semantic */
  --cpsl-success: #00C853;
  --cpsl-warning: #FFB300;
  --cpsl-error:   #FF1744;
  --cpsl-info:    #697279;

  /* Surface tokens (swap in dark mode) */
  --surface-1:     #FFFFFF;
  --surface-2:     #F4F6FA;
  --surface-3:     #E2E8F0;
  --surface-warm:  #F4EFE6;
  --text-primary:  #091628;
  --text-secondary:#475569;
  --text-muted:    #94A3B8;
  --border:        #E2E8F0;

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;
  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px;
  --space-12: 48px; --space-16: 64px;

  /* Border radius */
  --radius-sm:   6px;  --radius-md: 10px;
  --radius-lg:   16px; --radius-pill: 100px;

  /* Type scale */
  --text-display-xl:  clamp(52px, 10vw, 104px);
  --text-display-lg:  clamp(40px, 8vw, 88px);
  --text-display:     clamp(36px, 7vw, 76px);
  --text-display-sm:  clamp(28px, 5vw, 56px);
  --text-score:       clamp(48px, 10vw, 80px);
  --text-h1:          clamp(28px, 4.5vw, 48px);
  --text-h2:          clamp(20px, 3.5vw, 36px);
  --text-h3:          24px;
  --text-h4:          20px;
  --text-body-l:      18px;
  --text-body:        15px;
  --text-small:       13px;
  --text-caption:     11px;

  /* Typefaces */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-body:    'Inter', sans-serif;
}

/* Dark mode */
[data-theme="dark"] {
  --surface-1:     #0A1628;
  --surface-2:     #091628;
  --surface-3:     #1E2D45;
  --text-primary:  #F4F6FA;
  --text-secondary:#94A3B8;
  --text-muted:    #475569;
  --border:        #1E2D45;
}