`outputs/figma-tokens.json`

110 lines
{
  "$schema": "https://schemas.figma.com/tokens/v1.json",
  "name": "Brand Selector — Figma Build Source",
  "description": "Design tokens for the Brand Selector. Paste into Figma Tokens / Variables plugin.",
  "version": "1.0.0",
  "color": {
    "bg": {
      "base":   { "value": "#0b0b0d" },
      "panel":  { "value": "#131318" },
      "raised": { "value": "#1a1a22" }
    },
    "line":     { "value": "#2a2a35" },
    "text": {
      "primary":   { "value": "#f4f4f5" },
      "secondary": { "value": "#9c9caa" },
      "inverse":   { "value": "#111111" }
    },
    "accent": {
      "gold":     { "value": "#d4af37" },
      "goldDeep": { "value": "#c89b3d" }
    },
    "state": {
      "success": { "value": "#4ade80" },
      "danger":  { "value": "#f87171" }
    }
  },
  "typography": {
    "display": {
      "family":   { "value": "Didot" },
      "weight":   { "value": 400 },
      "size":     { "value": "48px" },
      "tracking": { "value": "-0.5px" },
      "leading":  { "value": "1.05" }
    },
    "title": {
      "family":  { "value": "Didot" },
      "weight":  { "value": 400 },
      "size":    { "value": "32px" },
      "leading": { "value": "1.1" }
    },
    "subhead": {
      "family":  { "value": "Cormorant Garamond" },
      "weight":  { "value": 400 },
      "italic":  { "value": true },
      "size":    { "value": "16px" }
    },
    "eyebrow": {
      "family":   { "value": "Inter" },
      "weight":   { "value": 500 },
      "size":     { "value": "10px" },
      "tracking": { "value": "3px" },
      "case":     { "value": "uppercase" }
    },
    "body": {
      "family":  { "value": "Inter" },
      "weight":  { "value": 400 },
      "size":    { "value": "13px" },
      "leading": { "value": "1.5" }
    },
    "tag": {
      "family":   { "value": "Inter" },
      "weight":   { "value": 500 },
      "size":     { "value": "9.5px" },
      "tracking": { "value": "1.2px" },
      "case":     { "value": "uppercase" }
    }
  },
  "radius": {
    "card":   { "value": "14px" },
    "pill":   { "value": "999px" },
    "swatch": { "value": "4px" }
  },
  "spacing": {
    "xs":  { "value": "4px" },
    "sm":  { "value": "8px" },
    "md":  { "value": "14px" },
    "lg":  { "value": "24px" },
    "xl":  { "value": "40px" },
    "2xl": { "value": "64px" }
  },
  "components": {
    "BrandCard": {
      "default": {
        "background": "{color.bg.panel}",
        "border":     "1px solid {color.line}",
        "radius":     "{radius.card}",
        "padding":    "18px"
      },
      "selected": {
        "background": "linear-gradient(135deg, rgba(212,175,55,0.08), {color.bg.raised})",
        "border":     "1px solid {color.accent.gold}",
        "shadow":     "inset 0 0 0 1px {color.accent.gold}"
      }
    },
    "Dock": {
      "background": "rgba(11,11,13,0.92)",
      "blur":       "14px",
      "border":     "1px solid {color.line}",
      "padding":    "14px 40px"
    },
    "PrimaryCTA": {
      "background": "{color.accent.gold}",
      "color":      "{color.text.inverse}",
      "radius":     "{radius.pill}",
      "padding":    "8px 14px"
    }
  },
  "schema_handoff": "figma-build/brand-selection.v1"
}