{
 "id": "3.6",
 "title": "Tokens",
 "department": "Design",
 "department_slug": "design",
 "direction": {
  "id": "octopus",
  "name": "Ocho"
 },
 "branded": true,
 "status": "generated",
 "owner": "Param",
 "last_verified": "2026-10-26",
 "holds": "Colour, type, space, radius, motion for each direction, light and dark",
 "urls": {
  "html": "https://handbook.joinsquareup.com/design/tokens/octopus",
  "markdown": "https://handbook.joinsquareup.com/design/tokens/octopus.md",
  "json": "https://handbook.joinsquareup.com/design/tokens/octopus.json"
 },
 "other_directions": [
  {
   "id": "dog",
   "name": "Fetch",
   "json": "https://handbook.joinsquareup.com/design/tokens/dog.json"
  },
  {
   "id": "bee",
   "name": "Buzz",
   "json": "https://handbook.joinsquareup.com/design/tokens/bee.json"
  },
  {
   "id": "raccoon",
   "name": "Scoop",
   "json": "https://handbook.joinsquareup.com/design/tokens/raccoon.json"
  },
  {
   "id": "cooker",
   "name": "Seeti",
   "json": "https://handbook.joinsquareup.com/design/tokens/cooker.json"
  }
 ],
 "tldr": {
  "headline": "Ocho wears hot pink and two fonts, nothing else",
  "points": [
   {
    "icon": "spark",
    "text": "Hero colour #ff4fa3 for the character, main button and focus."
   },
   {
    "icon": "book",
    "text": "DynaPuff for headlines and Archivo for everything else."
   },
   {
    "icon": "check",
    "text": "Ink and muted text pass contrast, and the pink button label sits at 6.0 to 1."
   },
   {
    "icon": "lock",
    "text": "Never a card fill: the brand's own photos carry the colour."
   }
  ],
  "stat": {
   "value": "#ff4fa3",
   "label": "Hero colour"
  },
  "decide": null,
  "mood": "solid"
 },
 "sources": [
  "brand-directions/docs2/data/dirs.json"
 ],
 "open_questions": [],
 "parts": {
  "Answer": "Ocho's colour and type tokens, light and dark.",
  "Today": "Not applicable to a generated document: it is rewritten from its sources on every build.",
  "Tomorrow": "| Token | Light | Dark |\n|---|---|---|\n| bg | `#f7f6f5` | `#101218` |\n| surface | `#ffffff` | `#181b22` |\n| surface2 | `#efedec` | `#21252e` |\n| ink | `#1a1218` | `#f4f1f3` |\n| muted | `#5e5862` | `#a9adba` |\n| line | `#e2dedc` | `#2c303a` |\n| hero | `#ff4fa3` | `#ff4fa3` |\n| heroInk | `#1a1218` | `#1a1218` |\n| focus | `#c8146e` | `#ff7dbb` |\n| radius | `16px` | `16px` |\n| radiusSm | `10px` | `10px` |\n| shadow | `0 8px 24px rgba(26,18,24,.10)` | `0 8px 24px rgba(0,0,0,.30)` |\n\n| Role | Face |\n|---|---|\n| Display | DynaPuff |\n| Body | Archivo |\n\n[src: brand-directions/docs2/data/dirs.json]",
  "How we do it": "Generated by `handbook/tools/gen.mjs` on every build. Change the source, never this file. The hero colour is for the character, the main button and focus, never a card fill.",
  "Numbers": "Not applicable to a generated document: it is rewritten from its sources on every build.",
  "Open": "Not applicable to a generated document: it is rewritten from its sources on every build."
 }
}