{
  "color": {
    "brand": {
      "1000": { "value": "#062b2c", "description": "Darkest teal" },
      "900":  { "value": "#083a3c" },
      "800":  { "value": "#0a4c4d" },
      "700":  { "value": "#0d6163" },
      "600":  { "value": "#117a7c" },
      "500":  { "value": "#16c9cc", "description": "Primary accent" },
      "400":  { "value": "#4ddadd" },
      "300":  { "value": "#8ee8ea" },
      "200":  { "value": "#c2f3f4" },
      "100":  { "value": "#e6fafa" },
      "50":   { "value": "#f2fdfc", "description": "Lightest teal / near-white" }
    },
    "neutral": {
      "1000": { "value": "#1f1d1a", "description": "Near black / primary text" },
      "900":  { "value": "#2f2c28" },
      "800":  { "value": "#5f5b55" },
      "700":  { "value": "#5f5b55", "description": "Note: same hex as 800 — verify" },
      "600":  { "value": "#7d7871" },
      "500":  { "value": "#9f9a94" },
      "400":  { "value": "#bab6b1" },
      "300":  { "value": "#d2cfcb" },
      "200":  { "value": "#e4e2de" },
      "100":  { "value": "#f6f5f3" },
      "50":   { "value": "#faf9f7" },
      "0":    { "value": "#ffffff", "description": "White" }
    }
  },
  "typography": {
    "fontFamily": {
      "display": { "value": "'Neue Haas Grotesk Display Pro', sans-serif" },
      "text":    { "value": "'Neue Haas Grotesk Text Pro', sans-serif" }
    },
    "desktop": {
      "h1": { "fontSize": 68, "lineHeight": 76, "letterSpacing": -1, "fontWeight": 500, "fontFamily": "display" },
      "h2": { "fontSize": 56, "lineHeight": 64, "letterSpacing": -1, "fontWeight": 500, "fontFamily": "display" },
      "h3": { "fontSize": 48, "lineHeight": 56, "letterSpacing": -0.5, "fontWeight": 500, "fontFamily": "display" },
      "h4": { "fontSize": 32, "lineHeight": 40, "letterSpacing": 0, "fontWeight": 500, "fontFamily": "display" },
      "h5": { "fontSize": 24, "lineHeight": 32, "letterSpacing": 0, "fontWeight": 500, "fontFamily": "display" },
      "h6": { "fontSize": 20, "lineHeight": 28, "letterSpacing": 0, "fontWeight": 500, "fontFamily": "display" },
      "bodyXL": { "fontSize": 20, "lineHeight": 32, "letterSpacing": 0, "fontWeight": 400, "fontFamily": "text" },
      "bodyL":  { "fontSize": 18, "lineHeight": 28, "letterSpacing": 0, "fontWeight": 400, "fontFamily": "text" },
      "bodyM":  { "fontSize": 16, "lineHeight": 26, "letterSpacing": 0, "fontWeight": 450, "fontFamily": "display" },
      "bodyS":  { "fontSize": 14, "lineHeight": 22, "letterSpacing": 0, "fontWeight": 400, "fontFamily": "text" },
      "bodyXS": { "fontSize": 12, "lineHeight": 20, "letterSpacing": 0, "fontWeight": 400, "fontFamily": "text" }
    },
    "tablet": {
      "h1": { "fontSize": 44, "lineHeight": 52, "letterSpacing": -1, "fontWeight": 500, "fontFamily": "display" },
      "h2": { "fontSize": 36, "lineHeight": 44, "letterSpacing": -1, "fontWeight": 500, "fontFamily": "display" },
      "h3": { "fontSize": 32, "lineHeight": 40, "letterSpacing": -0.5, "fontWeight": 500, "fontFamily": "display" },
      "h4": { "fontSize": 28, "lineHeight": 32, "letterSpacing": 0, "fontWeight": 500, "fontFamily": "display" },
      "h5": { "fontSize": 20, "lineHeight": 28, "letterSpacing": 0, "fontWeight": 500, "fontFamily": "display" },
      "h6": { "fontSize": 16, "lineHeight": 26, "letterSpacing": 0, "fontWeight": 500, "fontFamily": "display" },
      "bodyXL": { "fontSize": 16, "lineHeight": 28, "letterSpacing": 0, "fontWeight": 400, "fontFamily": "text" },
      "bodyL":  { "fontSize": 14, "lineHeight": 26, "letterSpacing": 0, "fontWeight": 400, "fontFamily": "text" },
      "bodyM":  { "fontSize": 14, "lineHeight": 22, "letterSpacing": 0, "fontWeight": 450, "fontFamily": "display" },
      "bodyS":  { "fontSize": 12, "lineHeight": 20, "letterSpacing": 0, "fontWeight": 400, "fontFamily": "text" },
      "bodyXS": { "fontSize": 10, "lineHeight": 18, "letterSpacing": 0, "fontWeight": 400, "fontFamily": "text" }
    },
    "mobile": {
      "$comment": "Same as tablet",
      "h1": { "fontSize": 44, "lineHeight": 52, "letterSpacing": -1, "fontWeight": 500, "fontFamily": "display" },
      "h2": { "fontSize": 36, "lineHeight": 44, "letterSpacing": -1, "fontWeight": 500, "fontFamily": "display" },
      "h3": { "fontSize": 32, "lineHeight": 40, "letterSpacing": -0.5, "fontWeight": 500, "fontFamily": "display" },
      "h4": { "fontSize": 28, "lineHeight": 32, "letterSpacing": 0, "fontWeight": 500, "fontFamily": "display" },
      "h5": { "fontSize": 20, "lineHeight": 28, "letterSpacing": 0, "fontWeight": 500, "fontFamily": "display" },
      "h6": { "fontSize": 16, "lineHeight": 26, "letterSpacing": 0, "fontWeight": 500, "fontFamily": "display" },
      "bodyXL": { "fontSize": 16, "lineHeight": 28, "letterSpacing": 0, "fontWeight": 400, "fontFamily": "text" },
      "bodyL":  { "fontSize": 14, "lineHeight": 26, "letterSpacing": 0, "fontWeight": 400, "fontFamily": "text" },
      "bodyM":  { "fontSize": 14, "lineHeight": 22, "letterSpacing": 0, "fontWeight": 450, "fontFamily": "display" },
      "bodyS":  { "fontSize": 12, "lineHeight": 20, "letterSpacing": 0, "fontWeight": 400, "fontFamily": "text" },
      "bodyXS": { "fontSize": 10, "lineHeight": 18, "letterSpacing": 0, "fontWeight": 400, "fontFamily": "text" }
    },
    "ui": {
      "button": { "fontSize": 18, "lineHeight": 24, "fontWeight": 700, "fontFamily": "text" },
      "link":   { "fontSize": 18, "lineHeight": 24, "fontWeight": 700, "fontFamily": "text" }
    }
  },
  "components": {
    "Button": {
      "variants": ["Primary", "Secondary", "Tertiary"],
      "sizes": ["Large", "Medium", "Small"],
      "states": ["Default", "Hover"]
    },
    "Link": {
      "variants": ["Default", "Light"],
      "sizes": ["Large", "Small"],
      "states": ["Default", "Hover"]
    },
    "InputField": {
      "states": ["Default", "Error", "Disabled"],
      "valueTypes": ["Placeholder", "Default"]
    },
    "CheckboxField": {
      "states": ["Default", "Disabled"],
      "valueTypes": ["Checked", "Unchecked", "Indeterminate"]
    },
    "Quote": {
      "elements": ["Highlight"]
    }
  }
}