[
  {
    "id": "blue",
    "name": "TFF Blue",
    "hex": "#11309B",
    "rgb": "17 48 155",
    "role": "The logo’s colour. Brand moments, print, the app icon."
  },
  {
    "id": "ink",
    "name": "Ink",
    "hex": "#0A0A0A",
    "rgb": "10 10 10",
    "role": "Type, and the logo when it runs in one colour."
  },
  {
    "id": "paper",
    "name": "Paper",
    "hex": "#FFFFFF",
    "rgb": "255 255 255",
    "role": "The page. Most of what we make is ink on paper."
  },
  {
    "id": "indigo",
    "name": "Signal Indigo",
    "hex": "#1447E6",
    "rgb": "20 71 230",
    "role": "On screen only: buttons, links, focus — things you can press."
  },
  {
    "id": "mist",
    "name": "Mist",
    "hex": "#F5F5F5",
    "rgb": "245 245 245",
    "role": "Quiet surfaces behind panels and specimens."
  },
  {
    "id": "rule",
    "name": "Rule",
    "hex": "#E5E5E5",
    "rgb": "229 229 229",
    "role": "Hairlines. We separate with rules, not shadows."
  },
  {
    "id": "graphite",
    "name": "Graphite",
    "hex": "#737373",
    "rgb": "115 115 115",
    "role": "Secondary text: meta, captions, labels."
  }
]