{
  "name": "STRK20 Design Tokens",
  "description": "Machine-readable design tokens for the STRK20 brand. Aesthetic: dark, terminal/industrial, near-black canvas with a single vivid orange accent, mono labels, sharp corners. Source of truth: styles.css :root on strk20.starknet.io. Use these to build UIs that match strk20.",
  "version": "1.0.0",
  "url": "https://strk20.starknet.io/brand",
  "color": {
    "bg": {
      "base": "#0d0d0d",
      "raised": "#141414",
      "raised2": "#1a1a1a",
      "panel": "#141414"
    },
    "line": {
      "default": "#262626",
      "subtle": "rgba(250,250,250,0.05)"
    },
    "text": {
      "default": "#fafafa",
      "dim": "rgba(250,250,250,0.65)",
      "faint": "#616161",
      "ghost": "#3a3a3a"
    },
    "accent": {
      "orange": "#c53400",
      "orangeDark": "#a02a00",
      "glow": "rgba(197,52,0,0.55)",
      "_note": "One accent only. Orange is used for every interactive/brand highlight — CTAs, links, eyebrows' tick, focus. Do not introduce a second hue."
    },
    "selection": { "bg": "#c53400", "text": "#1a0a04" }
  },
  "font": {
    "display": {
      "family": "Unison Pro",
      "stack": "\"Unison Pro\", \"Neue Montreal\", \"Helvetica Neue\", sans-serif",
      "weight": 800,
      "textTransform": "uppercase",
      "letterSpacing": "-0.025em",
      "lineHeight": 1.0,
      "usage": "Headlines (H1–H4). Big, tight, uppercase.",
      "license": "Fontfabric (commercial) — reference only, do not redistribute the font files."
    },
    "body": {
      "family": "Neue Montreal",
      "stack": "\"Neue Montreal\", \"Helvetica Neue\", Arial, sans-serif",
      "weight": 400,
      "lineHeight": 1.6,
      "usage": "Paragraphs and UI copy.",
      "license": "Pangram Pangram (commercial)."
    },
    "mono": {
      "family": "GT America Mono",
      "stack": "\"GT America Mono\", ui-monospace, \"SFMono-Regular\", monospace",
      "textTransform": "uppercase",
      "letterSpacing": "0.22em to 0.32em on labels; 0.04em on buttons",
      "usage": "Eyebrow labels, buttons, tags, technical accents.",
      "license": "Grilli Type (commercial)."
    },
    "_fallbackNote": "The three brand faces are licensed/paid. If you cannot license them, the fallback stacks above render the site faithfully; free stand-ins: display → 'Archivo Expanded'/'Space Grotesk', mono → 'Space Mono'/'IBM Plex Mono'."
  },
  "radius": {
    "sharp": "0px",
    "sm": "2px",
    "md": "5px",
    "lg": "10px",
    "xl": "12px",
    "pill": "999px",
    "_note": "Corners are mostly sharp. Buttons use 2px; cards use 10–12px; pills for small status chips."
  },
  "space": {
    "gutter": "clamp(20px, 5vw, 72px)",
    "maxWidth": "1280px",
    "sectionMaxWidth": "1680px",
    "_scale": "Sections use clamp()-based fluid padding; page content is capped at 1280px inside a clamp() gutter."
  },
  "shadow": {
    "glowOrange": "0 0 30px rgba(197,52,0,0.55)",
    "card": "0 40px 70px -30px rgba(0,0,0,0.7)",
    "cardLift": "0 30px 60px -30px rgba(0,0,0,0.7)"
  },
  "gradient": {
    "orangeRadialGlow": "radial-gradient(ellipse 70% 80% at <corner>, rgba(197,52,0,0.13), transparent 60%)",
    "cardFill": "linear-gradient(165deg, #181818 0%, #141414 48%, #100c0a 100%)"
  },
  "effect": {
    "filmGrain": { "opacity": 0.04, "method": "fixed fractalNoise SVG overlay, animated jitter (grainShift)" },
    "scanlines": { "opacity": 0.35, "method": "repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,0.18) 3px 4px); mix-blend-mode: multiply" }
  },
  "motion": {
    "hoverLift": "translateY(-1px) on buttons, translateY(-4px) on cards",
    "easing": "ease; cards use cubic-bezier(0.4, 0, 0.2, 1)",
    "duration": "0.15s–0.35s",
    "reveal": "sections fade + rise in on scroll (Reveal wrapper)"
  }
}