{
 "id": "3.6",
 "title": "Tokens",
 "department": "Design",
 "department_slug": "design",
 "direction": {
  "id": "raccoon",
  "name": "Scoop"
 },
 "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/raccoon",
  "markdown": "https://handbook.joinsquareup.com/design/tokens/raccoon.md",
  "json": "https://handbook.joinsquareup.com/design/tokens/raccoon.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": "octopus",
   "name": "Ocho",
   "json": "https://handbook.joinsquareup.com/design/tokens/octopus.json"
  },
  {
   "id": "cooker",
   "name": "Seeti",
   "json": "https://handbook.joinsquareup.com/design/tokens/cooker.json"
  }
 ],
 "tldr": {
  "headline": "Scoop wears tangerine and two fonts, nothing else",
  "points": [
   {
    "icon": "spark",
    "text": "Hero colour #ff7a1a for the character, main button and focus."
   },
   {
    "icon": "book",
    "text": "Gloock for headlines and Schibsted Grotesk for everything else."
   },
   {
    "icon": "check",
    "text": "Ink and muted text pass contrast on every surface, in light and dark."
   },
   {
    "icon": "lock",
    "text": "Never a card fill: the brand's own photos carry the colour."
   }
  ],
  "stat": {
   "value": "#ff7a1a",
   "label": "Hero colour"
  },
  "decide": null,
  "mood": "solid"
 },
 "sources": [
  "brand-directions/docs2/data/dirs.json"
 ],
 "open_questions": [],
 "parts": {
  "Answer": "Scoop'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 | `#f6f4f0` | `#121215` |\n| surface | `#ffffff` | `#1b1b20` |\n| surface2 | `#eeebe5` | `#25252b` |\n| ink | `#17171c` | `#f2efe9` |\n| muted | `#585663` | `#aaa7b3` |\n| line | `#e2ded6` | `#32323a` |\n| hero | `#ff7a1a` | `#ff7a1a` |\n| heroInk | `#17171c` | `#17171c` |\n| focus | `#b34a04` | `#ff9a4d` |\n| radius | `16px` | `16px` |\n| radiusSm | `10px` | `10px` |\n| shadow | `0 8px 24px rgba(23,23,28,.10)` | `0 8px 24px rgba(0,0,0,.32)` |\n\n| Role | Face |\n|---|---|\n| Display | Gloock |\n| Body | Schibsted Grotesk |\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."
 }
}