---
id: "4.11"
title: "Visual identity, Scoop"
dept: brand
status: draft
owner: Param
branded: true
direction: raccoon
last_verified: '2026-10-26'
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
---

# Visual identity, Scoop

## 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
| Part | What it is | Source |
|---|---|---|
| Look | Dark, quiet, photographic. The brand's own pictures carry the colour | [src: brand-directions/BRIEF.md section 2] |
| Dark tokens | bg #0a0a0a, card #1b1b1b, surface #232323, fg #fafafa | [src: brew/public/feed-system.css:10] |
| Light tokens | bg #f6f6f6, card #ffffff, fg #0a0a0a | [src: brew/public/feed-system.css:44] |
| Type | Inter 400 to 600 for everything, Caveat 600 and 700 for handwritten margin notes | [src: brew/public/index.html:6] |
| Mark | A white glyph on a #111 rounded square, the old name's mark | [src: brew/public/assets/brew-mark.svg] |
| 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] |
| Reduced motion | The loader and stories stop animating under prefers reduced motion | [src: brew/public/feed-system.css:157] |

### Scoop's direction, in the audition files
| Part | What it is | Source |
|---|---|---|
| Owned colour | Tangerine #ff7a1a: the notepad, pencil, tail stripes and one focus per screen | [src: brand-directions/raccoon/system.md s1] |
| Character palette | Tangerine deep #e0600a, fur #8e8f99, fur light #b9bac2, mask ink #17171c, paper #f6efe3 | [src: brand-directions/raccoon/system.md s1] |
| Display face | Gloock, one weight, font synthesis off | [src: brand-directions/raccoon/kit-skin.js:6] |
| Body face | Schibsted Grotesk 400 to 800, has the rupee sign | [src: brand-directions/raccoon/system.md s1] |
| Pencil face | Kalam 400 and 700, Scoop's own notes only, never a label | [src: brand-directions/raccoon/system.md s1] |
| Type scale | Display 50, 32, 23. Body 16, 14, 12. Prices in the body face | [src: brand-directions/raccoon/system.md s1] |
| Radius | 16 px, small 10 px | [src: brand-directions/raccoon/kit-skin.js:12] |
| 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] |
| Lockup | Raccoon left of the wordmark slot, gap equal to one ear, on paper, ink or tangerine | [src: brand-directions/raccoon/brand.html b4] |
| 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] |

### Product skin tokens
| Token | Dark | Light | Source |
|---|---|---|---|
| bg | #121215 | #f6f4f0 | [src: brand-directions/docs2/data/dirs.json raccoon tokens] |
| surface | #1b1b20 | #ffffff | [src: brand-directions/docs2/data/dirs.json raccoon tokens] |
| surface2 | #25252b | #eeebe5 | [src: brand-directions/docs2/data/dirs.json raccoon tokens] |
| ink | #f2efe9 | #17171c | [src: brand-directions/docs2/data/dirs.json raccoon tokens] |
| muted | #aaa7b3 | #585663 | [src: brand-directions/docs2/data/dirs.json raccoon tokens] |
| line | #32323a | #e2ded6 | [src: brand-directions/docs2/data/dirs.json raccoon tokens] |
| hero | #ff7a1a | #ff7a1a | [src: brand-directions/docs2/data/dirs.json raccoon tokens] |
| heroInk | #17171c | #17171c | [src: brand-directions/docs2/data/dirs.json raccoon tokens] |
| focus | #ff9a4d | #b34a04 | [src: brand-directions/docs2/data/dirs.json raccoon tokens] |

- 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]
- 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]
- 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
- v1, New: tangerine #ff7a1a is the hero colour, used for the main button, focus and Scoop only. One tangerine thing per screen.
- v1, New: text and icons on tangerine are always ink #17171c, never white.
- v1, New: tangerine never fills a background in the product. Tangerine fills belong to marketing posters.
- v1, Changes: the dark and light surfaces change from today's neutral greys to the product skin tokens above.
- v1, Stays: the brand's own photos carry the colour on every card.
- 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.

### Type
- v1, Changes: Inter goes. Gloock for headlines and big numbers, Schibsted Grotesk for every button, card and paragraph.
- v1, Changes: Caveat goes. Kalam is the pencil, for one line of Scoop's notes at most per screen.
- v1, New: sentence case everywhere, no all caps labels, prices in the body face.

### Shapes and motifs
- v1, New: the clipping, torn edges and a strip of tangerine tape, for findings and quotes about the store.
- v1, New: the notepad, spiral top and ruled lines, for Scoop's notes and plans.
- v1, New: the tail stripe, grey, tangerine, grey, for dividers, progress bars and the read's loading bar.
- v1, New: the stamp, Overheard or Case closed, one per screen at a moment that matters.
- v1, New: the redaction, for reveals in marketing only. Product facts always show in full.
- 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.

### Character and illustration
- v1, New: the character is printed in two inks with halftone greys. No gloss, gradients, soft shadows or white borders.
- v1, New: invented examples use the sample candle store with a visible Sample label.

### Logo
- v1, New: a wordmark slot sits wherever the product name goes, until Param picks the name.
- 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.
- 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.
2. Before any screen ships, count tangerine elements: one per screen.
3. Check contrast for any new pair at 4.5 to 1 for body text and 3 to 1 for large text. A quick check:

```
python3 -c "
def L(h):
  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]
a,b=sorted([L('#17171c'),L('#ff7a1a')]);print(round((b+.05)/(a+.05),1))"
```

4. Load fonts from Google Fonts only, with fallbacks: Gloock with Georgia, Schibsted Grotesk with system-ui, Kalam with cursive.
5. Show the screen at 400 pixels wide in dark and light with no sideways scroll.

## Numbers

| Metric | Definition | Where measured | Status |
|---|---|---|---|
| Tangerine count | Tangerine elements per screen, target one | Screen review of the 45 screens in the screen kit | Proposed |
| Contrast pass rate | Share of text and icon pairs at or above 4.5 to 1 | A token check script over the skin | Proposed |
| 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.
2. Do area tags keep their five colours in Scoop's skin? Proposal: draw them neutral with their shape, because storefront orange crowds tangerine.
3. Is Kalam allowed inside the product at all? Proposal: yes, one line of Scoop's notes per screen, never on a control.