{
 "id": "3.5",
 "title": "Components",
 "department": "Design",
 "department_slug": "design",
 "direction": {
  "id": "raccoon",
  "name": "Scoop"
 },
 "branded": true,
 "status": "draft",
 "owner": "Param",
 "last_verified": "Mon Oct 26",
 "holds": "Top bar, tabs, sheet, menu, toast, empty, error, four buttons, the pick card",
 "urls": {
  "html": "https://handbook.joinsquareup.com/design/components/raccoon",
  "markdown": "https://handbook.joinsquareup.com/design/components/raccoon.md",
  "json": "https://handbook.joinsquareup.com/design/components/raccoon.json"
 },
 "other_directions": [
  {
   "id": "dog",
   "name": "Fetch",
   "json": "https://handbook.joinsquareup.com/design/components/dog.json"
  },
  {
   "id": "bee",
   "name": "Buzz",
   "json": "https://handbook.joinsquareup.com/design/components/bee.json"
  },
  {
   "id": "octopus",
   "name": "Ocho",
   "json": "https://handbook.joinsquareup.com/design/components/octopus.json"
  },
  {
   "id": "cooker",
   "name": "Seeti",
   "json": "https://handbook.joinsquareup.com/design/components/cooker.json"
  }
 ],
 "tldr": {
  "headline": "One case board of parts, none built twice, in tangerine",
  "points": [
   {
    "icon": "book",
    "text": "Gloock sets headlines; Schibsted Grotesk sets every control, label and paragraph."
   },
   {
    "icon": "spark",
    "text": "Tangerine sits on the main button, focus and Scoop only, never a card."
   },
   {
    "icon": "chat",
    "text": "After a heart, Scoop says: Keep digging, noted. More like it are coming."
   },
   {
    "icon": "warn",
    "text": "Proposed: the reveal uses the gasp pose at 160 pixels."
   }
  ],
  "stat": {
   "value": "78",
   "label": "Component families today"
  },
  "decide": "Which props for doing and reporting: a rubber stamp in v2, a tally card in v3?",
  "mood": "building"
 },
 "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"
 ],
 "open_questions": [
  "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.",
  "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.",
  "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.",
  "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.",
  "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.",
  "The kit's hand off line for our team still names the old company. Rewrite? Proposal: Yes: \"Our team has your brief. Note passed.\""
 ],
 "parts": {
  "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.\n\n| Fact | Source |\n|---|---|\n| 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 | [src: brand-directions/_shared/surface-map.md:424, 531] |\n| 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 | [src: brand-directions/_shared/surface-map.md:445, 449-450, 453-456] |\n| Live buttons are 40 px tall with a white main fill on dark, icon buttons 36 px, chips 30 px | [src: brew origin/main public/feed-system.css:91-97, 180] |\n| The screen kit draws every part once; a direction supplies only tokens, fonts, character art, words for the slots and sounds | [src: brand-directions/_shared/kit-contract.md:3] |\n| Scoop's product skin sets bg #121215, surface #1b1b20, surface2 #25252b, ink #f2efe9, muted #aaa7b3, line #32323a in dark | [src: brand-directions/raccoon/kit-skin.js:7-20] |\n| In light: bg #f6f4f0, surface #ffffff, surface2 #eeebe5, ink #17171c, muted #585663, line #e2ded6 | [src: brand-directions/raccoon/kit-skin.js:7-20] |\n| Hero #ff7a1a with label ink #17171c in both themes; focus #ff9a4d on dark and #b34a04 on light | [src: brand-directions/raccoon/kit-skin.js:7-20] |\n| Radius 16px for cards and sheets, 10px for buttons and fields; shadow `0 8px 24px rgba(0,0,0,.32)` on dark | [src: brand-directions/raccoon/kit-skin.js:7-20] |\n| Fonts: Gloock for display, Schibsted Grotesk for body, from one Google Fonts link | [src: brand-directions/raccoon/kit-skin.js:7-20] |\n| 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 | [src: brand-directions/docs2/data/dirs.json] |\n| Gloock has one weight and the skin turns font synthesis off, so headlines stay a high contrast newsroom serif at one weight | [src: brand-directions/raccoon/system.md:25-27] |\n| 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 | [src: 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.\n\n### Scoop's skin on the kit\n\n| Token | Dark | Light | Used for |\n|---|---|---|---|\n| bg | #121215 | #f6f4f0 | the page |\n| surface | #1b1b20 | #ffffff | rows, sheets, cards with no picture |\n| surface2 | #25252b | #eeebe5 | quiet buttons, tracks, empty picture slots |\n| ink | #f2efe9 | #17171c | text, the toast fill |\n| muted | #aaa7b3 | #585663 | second lines, intros, sources |\n| line | #32323a | #e2ded6 | hairlines, icon button rings |\n| hero | #ff7a1a | #ff7a1a | main button, count pill, on switch, story ring, the heart when on |\n| heroInk | #17171c | #17171c | text on the hero |\n| focus | #ff9a4d | #b34a04 | the 2 px focus ring, field focus |\n| radius, radiusSm | 16px, 10px | same | cards and sheets, buttons and fields |\n\nGloock 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. [src: brand-directions/_kit/kit.css:97-99, 182, 190, 244, 319-321, 481]\n\n### Every part\n\n| Part | Kit class | Size and shape | In Scoop | Words | Tag |\n|---|---|---|---|---|---|\n| 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 |\n| 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 |\n| 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 |\n| Back | k-back | 36 px, arrow and one word | ink text | Back | Changes |\n| 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 |\n| Quiet button | k-btn--quiet | 46 px | #25252b fill on dark, ink label | Not now, New version | Changes |\n| Link button | k-btn--link | text height, underline offset 4 px | ink, underline at 35 percent | Close, See everything, Versions | Changes |\n| 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 |\n| Busy button | is-busy | label hidden, 18 px spinner, 0.8 s turn | spinner in #17171c on the main button | none | Changes |\n| 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 |\n| 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 |\n| 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 |\n| 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 |\n| 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 |\n| Number card | k-figure | one 64 px number and its source chip | number in Gloock | one number, its source | Changes |\n| 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 |\n| 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 |\n| Story ring | k-ring, k-ring-pic | 64 px picture, 2 px ring | #ff7a1a ring while unseen | label 2 words. plain word only | Stays |\n| Story viewer | k-story | full bleed, progress bars, fact 34 px | fact in Gloock | one fact, 8 words, one button | Stays |\n| 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 |\n| Switch and segments | k-switch, k-seg | switch 46 by 28; segment buttons 34 px | on switch in #ff7a1a, knob #17171c | 3 words | Changes |\n| Chip | k-chip | 34 px pill, line ring | on state uses the hero at 16 percent | 3 words | Changes |\n| 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 |\n| 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 |\n| 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 |\n| Tile | k-tile | 92 px or more, two columns | selected tile ringed in #ff7a1a | title 6 words, sub line 8 | Changes |\n| Meter | k-meters, k-track | 6 px track, ink fill | number in the display face | label 2 words, one fix line 10 words | Changes |\n| 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 |\n| Chat bubble | k-msg | radius 18 px; you on the right, AI wider | surface bubbles | AI reply 60 words before More | Changes |\n| Composer and tools | k-composer, k-tool | composer radius 26 px; tools 34 px pills | line ring on surface | placeholder 8 words | Changes |\n| 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 |\n| 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 |\n| 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 |\n| 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 |\n| 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 |\n| 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 |\n| 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 |\n| Celebration | k-celebrate | centred, title 26 px | Scoop at 120 px in its celebrate pose | one line, then the next step | New |\n| Sign off | k-signoff | line ringed box | Scoop corner mark | \"That is all the gossip this week. Back Monday.\" | New |\n| 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 |\n| 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 |\n| Connection chip | k-conn | 24 px pill | one word state | Connected, Needs you, Expiring, Stale, Read only | Changes |\n| Avatar | k-face | 32 px, small 26, large 40 | initials on surface2 | none | Changes |\n| 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 |\n| 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 |\n\n[src: brand-directions/_kit/kit.css:36-563] [src: brand-directions/book/content/e.js:116-240] [src: brand-directions/raccoon/kit-skin.js:42-88]\n\n### What stays out of the product\n\n| Item | Why | Tag |\n|---|---|---|\n| 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 |\n| The Kalam hand | books only, never a product label | Stays out |\n| A second character, any sidekick | one character, no cast | Stays out |\n| Hero colour as a card fill or a page wash | the brand's photos carry the colour | Goes |\n| Glass, gradients as decoration, glyph icons, logo stickers | no AI look, one icon set | Goes |\n\n### Later versions\n\n| Part | Version | Tag |\n|---|---|---|\n| Status chips Scheduled and Live, a time picker in Hand it off | v2 | New |\n| How it went status, a bar list and sparkline on results | v3 | New |\n| Rule rows with limits beside each action in Need your yes | v4 | New |\n| 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.\n2. 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.\n3. Never put a colour, size or font in a screen. Scoop's values come from the tokens in brand-directions/raccoon/kit-skin.js.\n4. Render the part in Scoop's skin at 390 and 1280 wide, light and dark:\n\n```sh\nopen /Users/param/Documents/ChatGPT/brand-directions/screens.html\n```\n\n5. Check contrast of any new pair with the script in Accessibility.\n6. Run the Design QA checklist on every screen that uses the part.",
  "Numbers": "| Number | Definition | Today | Tomorrow | Where measured | Status |\n|---|---|---|---|---|---|\n| Component families | distinct part families in the CSS | 78 | about 30 | surface map, regenerated | Measured |\n| Button classes | leading classes on buttons | 163 | 4 kinds | CSS scan | Measured |\n| Sheet styles | sheet variants | 23 | 1 | CSS scan | Measured |\n| Toast styles | toast variants | 6 | 1 | CSS scan | Measured |\n| 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.\n2. 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.\n3. 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.\n4. 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.\n5. 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.\n6. The kit's hand off line for our team still names the old company. Rewrite? Proposal: Yes: \"Our team has your brief. Note passed.\""
 }
}