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

Scoop's direction, in the audition files

Product skin 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. 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. 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. 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

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.