FetchBuzzScoopOchoSeeti
Snapshots

One case board of parts, none built twice, in tangerine

Being built
  • Gloock sets headlines; Schibsted Grotesk sets every control, label and paragraph.
  • Tangerine sits on the main button, focus and Scoop only, never a card.
  • After a heart, Scoop says: Keep digging, noted. More like it are coming.
  • Proposed: the reveal uses the gasp pose at 160 pixels.
78Component families today
Your call

Which props for doing and reporting: a rubber stamp in v2, a tally card in v3?

Design · 3.5 · Scoop

Components, Scoop

DraftLast checked Mon Oct 26Owner Param

Answer

Brew has one component set for every screen, and in Scoop's skin it wears tangerine #ff7a1a on the main button, focus and Scoop only, Gloock for headlines and Schibsted Grotesk for everything else, so no screen ever builds a part of its own.

Today

Checked 26 October 2026.

Fact Source
The live build has 2,886 CSS classes in 78 component families; verdicts: keep 24, merge 43, relocate 3, delete or unlink 7, later 1 brand-directions/_shared/surface-map.md:424, 531
163 button classes with about 13 main styles, 23 sheet styles, 16 menus and popovers, 6 toast styles, 25 empty state classes, 12 loader kinds brand-directions/_shared/surface-map.md:445, 449-450, 453-456
Live buttons are 40 px tall with a white main fill on dark, icon buttons 36 px, chips 30 px brew origin/main public/feed-system.css:91-97, 180
The screen kit draws every part once; a direction supplies only tokens, fonts, character art, words for the slots and sounds brand-directions/_shared/kit-contract.md:3
Scoop's product skin sets bg #121215, surface #1b1b20, surface2 #25252b, ink #f2efe9, muted #aaa7b3, line #32323a in dark brand-directions/raccoon/kit-skin.js:7-20
In light: bg #f6f4f0, surface #ffffff, surface2 #eeebe5, ink #17171c, muted #585663, line #e2ded6 brand-directions/raccoon/kit-skin.js:7-20
Hero #ff7a1a with label ink #17171c in both themes; focus #ff9a4d on dark and #b34a04 on light brand-directions/raccoon/kit-skin.js:7-20
Radius 16px for cards and sheets, 10px for buttons and fields; shadow 0 8px 24px rgba(0,0,0,.32) on dark brand-directions/raccoon/kit-skin.js:7-20
Fonts: Gloock for display, Schibsted Grotesk for body, from one Google Fonts link brand-directions/raccoon/kit-skin.js:7-20
Measured: main button label 6.8 to 1 on the hero, ink 14.9 and muted 7.3 on the dark surface, muted 6.0 on the light surface2 brand-directions/docs2/data/dirs.json
Gloock has one weight and the skin turns font synthesis off, so headlines stay a high contrast newsroom serif at one weight brand-directions/raccoon/system.md:25-27
The book skin, with a two ink tabloid print: ink #17171c and tangerine on paper, every grey a 45 degree halftone of ink dots, one traced line weight and a fine paper cut line around the figure, and the Kalam hand, never enters the product brand-directions/raccoon/system.md:91

Tomorrow

Every part below is v1. Tag Changes means it merges today's families into one; New means it does not exist today.

Scoop's skin on the kit

Token Dark Light Used for
bg #121215 #f6f4f0 the page
surface #1b1b20 #ffffff rows, sheets, cards with no picture
surface2 #25252b #eeebe5 quiet buttons, tracks, empty picture slots
ink #f2efe9 #17171c text, the toast fill
muted #aaa7b3 #585663 second lines, intros, sources
line #32323a #e2ded6 hairlines, icon button rings
hero #ff7a1a #ff7a1a main button, count pill, on switch, story ring, the heart when on
heroInk #17171c #17171c text on the hero
focus #ff9a4d #b34a04 the 2 px focus ring, field focus
radius, radiusSm 16px, 10px same cards and sheets, buttons and fields

Gloock sets the greeting, screen titles, pick headlines, sheet titles, the empty state line, big numbers, story facts, prices and brief step numbers. Schibsted Grotesk sets every control, label and paragraph. brand-directions/_kit/kit.css:97-99, 182, 190, 244, 319-321, 481

Every part

Part Kit class Size and shape In Scoop Words Tag
Top bar k-top 56 px; brand mark tile 30 px, your picture 32 px the Scoop corner mark at 44 px on Today only brand name, never the product name Changes
Tabs, phone k-tabs, k-tab, k-count three equal tabs, 11.5 px labels; count pill 18 px count pill in #ff7a1a with #17171c digits Today, Work, Your store. Scoop calls it The dish in words around it, never on the control Changes
Rail, laptop k-rail, k-rail-item 236 px wide, items 42 px, Settings at its foot active item in ink on surface2 the same three tabs Changes
Back k-back 36 px, arrow and one word ink text Back Changes
Main button k-btn--main 46 px tall, radius 10px #ff7a1a fill, #17171c label, brightens a touch on hover 3 words, a plain verb Changes
Quiet button k-btn--quiet 46 px #25252b fill on dark, ink label Not now, New version Changes
Link button k-btn--link text height, underline offset 4 px ink, underline at 35 percent Close, See everything, Versions Changes
Icon button k-btn--icon 46 px circle, 1 px line ring; small 36 px ring and icon turn #ff7a1a when on named in 3 words: Heart, Not for me, More Changes
Busy button is-busy label hidden, 18 px spinner, 0.8 s turn spinner in #17171c on the main button none Changes
Bottom bar k-bar one main button filling the bar, 28 px bottom padding bg with a line on top Make it on a pick, Hand it off in Make it Changes
Sheet k-sheet, k-scrim slides up, at most 88 percent tall, top radius 16px plus 8 px, grab bar 38 px #1b1b20 fill, solid, never glass; title in Gloock 22 px title 6 words, one line, one main button, Close Changes
Menu k-menu, k-menu-item at least 240 px wide, items 44 px tick on the item that is on, in #ff7a1a items of 4 words Changes
Toast k-toast 52 px or more, radius 14 px, 96 px above the bottom ink fill with bg text, flipped so it reads 10 words; after a heart: "Keep digging, noted. More like it are coming." Changes
Pick card k-pick, k-thing, k-pick-title, k-why, k-pick-acts picture square, 4 to 5 or 16 to 10, radius 16px; headline 21 px in Gloock no hero colour on the card; the brand photo carries the colour 25 words: area and source 5, headline 8, why 12, one button. Above the five: "Five picks, ranked. Each one says where I heard it." Changes
Number card k-figure one 64 px number and its source chip number in Gloock one number, its source Changes
Mini card k-mini 84 px picture beside the same five parts the same card, smaller "The whole notepad, ranked. The top five come first." heads See everything Changes
Need your yes row k-yes-list, k-yes rows on surface; Yes main, Not now quiet no Scoop here: it is a decision question 10 words, what happens one line. Intro: "Only you can answer these. I just take the notes.". Scoop calls it Your nod in words around it, never on the control Changes
Story ring k-ring, k-ring-pic 64 px picture, 2 px ring #ff7a1a ring while unseen label 2 words. plain word only Stays
Story viewer k-story full bleed, progress bars, fact 34 px fact in Gloock one fact, 8 words, one button Stays
Field and paste field k-input, k-paste field 48 px; paste field 60 px with a 54 px button focus ring in #ff9a4d label 3 words, hint 6 words Changes
Switch and segments k-switch, k-seg switch 46 by 28; segment buttons 34 px on switch in #ff7a1a, knob #17171c 3 words Changes
Chip k-chip 34 px pill, line ring on state uses the hero at 16 percent 3 words Changes
Tags k-area, k-src, k-confirm, k-sample source chip 22 px; To confirm dashed in warn; Sample dashed pill area dot keeps the five area colours, small only area 1 to 3 words, source 3, To confirm, Sample Changes
Status chip k-status 12 px dot that fills as work goes on ink dot; sub line muted, warn for Needs something from you Idea, In the works, Handed off Changes
Row k-row 58 px or more, icon tile 36 px, picture 44 px rows on #1b1b20 label 6 words, one sub line 10 words, one action Changes
Tile k-tile 92 px or more, two columns selected tile ringed in #ff7a1a title 6 words, sub line 8 Changes
Meter k-meters, k-track 6 px track, ink fill number in the display face label 2 words, one fix line 10 words Changes
Versions strip k-vers, k-ver 52 by 64 px pictures, current marked muted labels, current in ink v plus a number and 3 words Changes
Chat bubble k-msg radius 18 px; you on the right, AI wider surface bubbles AI reply 60 words before More Changes
Composer and tools k-composer, k-tool composer radius 26 px; tools 34 px pills line ring on surface placeholder 8 words Changes
Long wait card k-wait Scoop wait slot beside one line Scoop in its wait pose "Scribbling. You can leave, it will be here." Changes
Stepper and progress k-steps, k-progress 20 px step dots, 4 px bar current step ringed in #ff7a1a, bar in #ff7a1a step 6 words; read line "Reading your public pages. About 3 to 4 minutes." Changes
Finding and question k-finding, k-q 64 px picture beside a 12 word finding; question card with a line ring surface question lead in: "So I know which gossip is yours." Changes
Reveal card k-reveal 5 to 4 picture, 58 px number the only card with the kit shadow "Gasp. Here is one thing I overheard." New
First win bar k-win three 4 px steps done steps in #ff7a1a "Noted. Digging up more like it.", "Look at you, scribbling.", "First note passed. You are in the loop." New
Empty state k-empty centred, 56 px top padding, line 22 px in the display face Scoop at 96 px, drawn as the small mark 12 words, one button Changes
Error state k-error surface panel with a 3 px warn edge on the left Scoop error slot, never the empty look one sentence, one button Changes
Celebration k-celebrate centred, title 26 px Scoop at 120 px in its celebrate pose one line, then the next step New
Sign off k-signoff line ringed box Scoop corner mark "That is all the gossip this week. Back Monday." New
Brief blocks and stamp k-brief, k-brief-list, k-stamp, k-files numbered steps 34 px gutter, a stamp tilted 4 degrees, files in threes step numbers in Gloock; Scoop signs off at 32 px section title 4 words, step 10 words; sign off "Read by Scoop. Shipped by you." Changes
Paid confirm k-price, k-facts price 40 px in the display face, three facts main button Make it price once, one line on what happens Changes
Connection chip k-conn 24 px pill one word state Connected, Needs you, Expiring, Stale, Read only Changes
Avatar k-face 32 px, small 26, large 40 initials on surface2 none Changes
Your store blocks k-theme, k-rival, k-ans, k-plan-group theme rows, rival card 190 px with days running, answer rows mood chips good, mixed, sore theme 4 words, count, mood. Intro: "Everything everyone says about your store, in one place." Changes
Email blocks k-mail, k-mail-pick one column, 56 px pick pictures, one block button subject "Psst. Five fresh picks for your store" first line "Morning. I went through what people said this week." New

brand-directions/_kit/kit.css:36-563 brand-directions/book/content/e.js:116-240 brand-directions/raccoon/kit-skin.js:42-88

What stays out of the product

Item Why Tag
A two ink tabloid print: ink #17171c and tangerine on paper, every grey a 45 degree halftone of ink dots, one traced line weight and a fine paper cut line around the figure book skin only; the product skin is calm and photographic Stays out
The Kalam hand books only, never a product label Stays out
A second character, any sidekick one character, no cast Stays out
Hero colour as a card fill or a page wash the brand's photos carry the colour Goes
Glass, gradients as decoration, glyph icons, logo stickers no AI look, one icon set Goes

Later versions

Part Version Tag
Status chips Scheduled and Live, a time picker in Hand it off v2 New
How it went status, a bar list and sparkline on results v3 New
Rule rows with limits beside each action in Need your yes v4 New
Brand switcher caret on the brand mark v2 New

How we do it

  1. Look for the part in the table above. Use it as it is.
  2. If a screen needs something new, add it to _kit/kit.css with a k- class, its states and a word budget, then draw it in _kit/screens.js.
  3. Never put a colour, size or font in a screen. Scoop's values come from the tokens in brand-directions/raccoon/kit-skin.js.
  4. Render the part in Scoop's skin at 390 and 1280 wide, light and dark:
open /Users/param/Documents/ChatGPT/brand-directions/screens.html
  1. Check contrast of any new pair with the script in Accessibility.
  2. Run the Design QA checklist on every screen that uses the part.

Numbers

Number Definition Today Tomorrow Where measured Status
Component families distinct part families in the CSS 78 about 30 surface map, regenerated Measured
Button classes leading classes on buttons 163 4 kinds CSS scan Measured
Sheet styles sheet variants 23 1 CSS scan Measured
Toast styles toast variants 6 1 CSS scan Measured
Raw values in screens colours or sizes written outside the tokens and scale not measured 0 lint on _kit/screens.js Proposed

Open

  1. The system file says the small mark is for anything under 48 px, the kit swaps at 120 px. Which? Proposal: Follow the kit: under 120 px, so the 96 px empty and error slots show the mark.
  2. Scoop has a gasp pose for the reveal, but the kit draws the reveal with the celebrate pose. Switch? Proposal: Yes, use char-gasp.svg at 160 px on the reveal.
  3. No props are drawn yet for doing and reporting. Which ones? Proposal: A rubber stamp for doing in v2 and a tally card for reporting in v3, drawn from the master.
  4. Small buttons, chips, tools and segments are 34 to 36 px, under the 44 px phone target. Grow them? Proposal: Keep the look and give each a 44 px hit area.
  5. The five area colours stay as small dots beside the area name. Keep them in Scoop's skin? Proposal: Yes, as dots only, never as text or fills.
  6. The kit's hand off line for our team still names the old company. Rewrite? Proposal: Yes: "Our team has your brief. Note passed."
Sources
  • brand-directions/raccoon/kit-skin.js
  • brand-directions/raccoon/system.md
  • brand-directions/docs2/data/dirs.json
  • brand-directions/_kit/kit.css
  • brand-directions/_shared/kit-contract.md:1-37
  • brand-directions/_shared/ia.md:147-153
  • brand-directions/_shared/surface-map.md:425-505
  • brand-directions/book/content/e.js:116-240
  • brew origin/main b91e364: public/feed-system.css:91-97, 180, 291

Source file content/design/components.raccoon.md · For agents: Markdown · JSON