{
 "id": "4.11",
 "title": "Visual identity",
 "department": "Brand",
 "department_slug": "brand",
 "direction": {
  "id": "raccoon",
  "name": "Scoop"
 },
 "branded": true,
 "status": "draft",
 "owner": "Param",
 "last_verified": "2026-10-26",
 "holds": "Logo and wordmark slot, colour, type, photography, illustration",
 "urls": {
  "html": "https://handbook.joinsquareup.com/brand/visual-identity/raccoon",
  "markdown": "https://handbook.joinsquareup.com/brand/visual-identity/raccoon.md",
  "json": "https://handbook.joinsquareup.com/brand/visual-identity/raccoon.json"
 },
 "other_directions": [
  {
   "id": "dog",
   "name": "Fetch",
   "json": "https://handbook.joinsquareup.com/brand/visual-identity/dog.json"
  },
  {
   "id": "bee",
   "name": "Buzz",
   "json": "https://handbook.joinsquareup.com/brand/visual-identity/bee.json"
  },
  {
   "id": "octopus",
   "name": "Ocho",
   "json": "https://handbook.joinsquareup.com/brand/visual-identity/octopus.json"
  },
  {
   "id": "cooker",
   "name": "Seeti",
   "json": "https://handbook.joinsquareup.com/brand/visual-identity/cooker.json"
  }
 ],
 "tldr": {
  "headline": "Scoop's look: tangerine, a two ink tabloid print, no gloss",
  "points": [
   {
    "icon": "spark",
    "text": "One owned colour, tangerine #ff7a1a: the notepad, pencil, tail stripes and one focus per screen."
   },
   {
    "icon": "book",
    "text": "Gloock for display and Schibsted Grotesk for body, with Kalam in books."
   },
   {
    "icon": "eye",
    "text": "The character prints as a two ink tabloid page with halftone greys."
   },
   {
    "icon": "warn",
    "text": "White on tangerine is about 2.6 to 1, so it never carries text."
   },
   {
    "icon": "flag",
    "text": "A wordmark slot stays dashed until the name is picked."
   }
  ],
  "stat": {
   "value": "6.8",
   "label": "contrast, ink on tangerine"
  },
  "decide": "Which token set is final: the calm product skin or the warmer book skin?",
  "mood": "building"
 },
 "sources": [
  "brand-directions/raccoon/system.md s1, s4",
  "brand-directions/raccoon/brand.html b4",
  "brand-directions/raccoon/kit-skin.js lines 6 to 19",
  "brand-directions/docs2/data/dirs.json, entry raccoon",
  "brand-directions/book/content/f.js f-4",
  "brand-directions/BRIEF.md sections 2 and 3.8",
  "brew origin/main a559de6 public/feed-system.css lines 10 to 65",
  "brew origin/main public/index.html line 6",
  "brew origin/main public/assets/brew-mark.svg",
  "memory brand-directions-2026-10-25"
 ],
 "open_questions": [
  "Which token set is final, the calm product skin or the warmer book skin with paper #f6efe3? Proposal: product skin in the app, book skin in marketing and print only.",
  "Do area tags keep their five colours in Scoop's skin? Proposal: draw them neutral with their shape, because storefront orange crowds tangerine.",
  "Is Kalam allowed inside the product at all? Proposal: yes, one line of Scoop's notes per screen, never on a control."
 ],
 "parts": {
  "Answer": "Scoop's look for tomorrow's product and marketing: tangerine as the one owned colour, a two ink tabloid print for the character, Gloock and Schibsted Grotesk for type, and a wordmark slot until the name is picked.",
  "Today": "### The live product\n| Part | What it is | Source |\n|---|---|---|\n| Look | Dark, quiet, photographic. The brand's own pictures carry the colour | [src: brand-directions/BRIEF.md section 2] |\n| Dark tokens | bg #0a0a0a, card #1b1b1b, surface #232323, fg #fafafa | [src: brew/public/feed-system.css:10] |\n| Light tokens | bg #f6f6f6, card #ffffff, fg #0a0a0a | [src: brew/public/feed-system.css:44] |\n| Type | Inter 400 to 600 for everything, Caveat 600 and 700 for handwritten margin notes | [src: brew/public/index.html:6] |\n| Mark | A white glyph on a #111 rounded square, the old name's mark | [src: brew/public/assets/brew-mark.svg] |\n| Area tags | Creative teal #2bb39b, performance blue #4a90f0, storefront orange #f28a3c, AI visibility purple #9a6bf0, CRM green #16a37f | [src: brand-directions/BRIEF.md section 2] |\n| Reduced motion | The loader and stories stop animating under prefers reduced motion | [src: brew/public/feed-system.css:157] |\n\n### Scoop's direction, in the audition files\n| Part | What it is | Source |\n|---|---|---|\n| Owned colour | Tangerine #ff7a1a: the notepad, pencil, tail stripes and one focus per screen | [src: brand-directions/raccoon/system.md s1] |\n| Character palette | Tangerine deep #e0600a, fur #8e8f99, fur light #b9bac2, mask ink #17171c, paper #f6efe3 | [src: brand-directions/raccoon/system.md s1] |\n| Display face | Gloock, one weight, font synthesis off | [src: brand-directions/raccoon/kit-skin.js:6] |\n| Body face | Schibsted Grotesk 400 to 800, has the rupee sign | [src: brand-directions/raccoon/system.md s1] |\n| Pencil face | Kalam 400 and 700, Scoop's own notes only, never a label | [src: brand-directions/raccoon/system.md s1] |\n| Type scale | Display 50, 32, 23. Body 16, 14, 12. Prices in the body face | [src: brand-directions/raccoon/system.md s1] |\n| Radius | 16 px, small 10 px | [src: brand-directions/raccoon/kit-skin.js:12] |\n| Character print | Two inks on paper, greys as 45 degree halftone dots, one line weight, a paper cut line only on dark | [src: brand-directions/raccoon/system.md s4] |\n| Lockup | Raccoon left of the wordmark slot, gap equal to one ear, on paper, ink or tangerine | [src: brand-directions/raccoon/brand.html b4] |\n| Small mark | Head, sly face, band and knot on a tangerine disc, the only art below 120 px | [src: brand-directions/raccoon/system.md s4] |\n\n### Product skin tokens\n| Token | Dark | Light | Source |\n|---|---|---|---|\n| bg | #121215 | #f6f4f0 | [src: brand-directions/docs2/data/dirs.json raccoon tokens] |\n| surface | #1b1b20 | #ffffff | [src: brand-directions/docs2/data/dirs.json raccoon tokens] |\n| surface2 | #25252b | #eeebe5 | [src: brand-directions/docs2/data/dirs.json raccoon tokens] |\n| ink | #f2efe9 | #17171c | [src: brand-directions/docs2/data/dirs.json raccoon tokens] |\n| muted | #aaa7b3 | #585663 | [src: brand-directions/docs2/data/dirs.json raccoon tokens] |\n| line | #32323a | #e2ded6 | [src: brand-directions/docs2/data/dirs.json raccoon tokens] |\n| hero | #ff7a1a | #ff7a1a | [src: brand-directions/docs2/data/dirs.json raccoon tokens] |\n| heroInk | #17171c | #17171c | [src: brand-directions/docs2/data/dirs.json raccoon tokens] |\n| focus | #ff9a4d | #b34a04 | [src: brand-directions/docs2/data/dirs.json raccoon tokens] |\n\n- Two token sets exist. The product skin above is calm and photographic. The book skin in the system file uses warmer tones, bg #111116 on dark and paper #f6efe3 on light. [src: brand-directions/raccoon/kit-skin.js:1; brand-directions/raccoon/system.md s1]\n- Contrast, computed from the tokens: ink #17171c on tangerine is about 6.8 to 1, white on tangerine about 2.6 to 1, light focus #b34a04 on white about 5.4 to 1. The books did not measure this. [src: brand-directions/book/content/f.js f-4; computed 26 Oct]\n- Tangerine is apart from Duolingo green and from every area colour. The nearest is storefront orange #f28a3c, softer and browner. [src: brand-directions/raccoon/brand.html b4]",
  "Tomorrow": "### Colour\n- v1, New: tangerine #ff7a1a is the hero colour, used for the main button, focus and Scoop only. One tangerine thing per screen.\n- v1, New: text and icons on tangerine are always ink #17171c, never white.\n- v1, New: tangerine never fills a background in the product. Tangerine fills belong to marketing posters.\n- v1, Changes: the dark and light surfaces change from today's neutral greys to the product skin tokens above.\n- v1, Stays: the brand's own photos carry the colour on every card.\n- v1, Changes: area tags stay small. Storefront orange sits too close to tangerine beside the main button, so area tags draw neutral in this skin.\n\n### Type\n- v1, Changes: Inter goes. Gloock for headlines and big numbers, Schibsted Grotesk for every button, card and paragraph.\n- v1, Changes: Caveat goes. Kalam is the pencil, for one line of Scoop's notes at most per screen.\n- v1, New: sentence case everywhere, no all caps labels, prices in the body face.\n\n### Shapes and motifs\n- v1, New: the clipping, torn edges and a strip of tangerine tape, for findings and quotes about the store.\n- v1, New: the notepad, spiral top and ruled lines, for Scoop's notes and plans.\n- v1, New: the tail stripe, grey, tangerine, grey, for dividers, progress bars and the read's loading bar.\n- v1, New: the stamp, Overheard or Case closed, one per screen at a moment that matters.\n- v1, New: the redaction, for reveals in marketing only. Product facts always show in full.\n- v1, New: layout on a calm grid. One clipping per row may tilt, at most two degrees. The desk lamp glow appears on the home hero only.\n\n### Character and illustration\n- v1, New: the character is printed in two inks with halftone greys. No gloss, gradients, soft shadows or white borders.\n- v1, New: invented examples use the sample candle store with a visible Sample label.\n\n### Logo\n- v1, New: a wordmark slot sits wherever the product name goes, until Param picks the name.\n- v1, New: the lockup is Scoop left of the wordmark, gap of one ear. The small mark on a tangerine disc is the app icon, avatar and favicon.\n- v1, Goes: the old mark in `public/assets/brew-mark.svg`.",
  "How we do it": "1. Take tokens only from `brand-directions/docs2/data/dirs.json` for the product and from `raccoon/system.md` s1 for books and marketing.\n2. Before any screen ships, count tangerine elements: one per screen.\n3. Check contrast for any new pair at 4.5 to 1 for body text and 3 to 1 for large text. A quick check:\n\n```\npython3 -c \"\ndef L(h):\n  c=[int(h[i:i+2],16)/255 for i in (1,3,5)];c=[x/12.92 if x<=.03928 else ((x+.055)/1.055)**2.4 for x in c];return .2126*c[0]+.7152*c[1]+.0722*c[2]\na,b=sorted([L('#17171c'),L('#ff7a1a')]);print(round((b+.05)/(a+.05),1))\"\n```\n\n4. Load fonts from Google Fonts only, with fallbacks: Gloock with Georgia, Schibsted Grotesk with system-ui, Kalam with cursive.\n5. Show the screen at 400 pixels wide in dark and light with no sideways scroll.",
  "Numbers": "| Metric | Definition | Where measured | Status |\n|---|---|---|---|\n| Tangerine count | Tangerine elements per screen, target one | Screen review of the 45 screens in the screen kit | Proposed |\n| Contrast pass rate | Share of text and icon pairs at or above 4.5 to 1 | A token check script over the skin | Proposed |\n| Old mark left | Places the old mark or name still shows | grep over brew public files before launch | Proposed |",
  "Open": "1. Which token set is final, the calm product skin or the warmer book skin with paper #f6efe3? Proposal: product skin in the app, book skin in marketing and print only.\n2. Do area tags keep their five colours in Scoop's skin? Proposal: draw them neutral with their shape, because storefront orange crowds tangerine.\n3. Is Kalam allowed inside the product at all? Proposal: yes, one line of Scoop's notes per screen, never on a control."
 }
}