{
 "id": "3.5",
 "title": "Components",
 "department": "Design",
 "department_slug": "design",
 "direction": {
  "id": "bee",
  "name": "Buzz"
 },
 "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/bee",
  "markdown": "https://handbook.joinsquareup.com/design/components/bee.md",
  "json": "https://handbook.joinsquareup.com/design/components/bee.json"
 },
 "other_directions": [
  {
   "id": "dog",
   "name": "Fetch",
   "json": "https://handbook.joinsquareup.com/design/components/dog.json"
  },
  {
   "id": "raccoon",
   "name": "Scoop",
   "json": "https://handbook.joinsquareup.com/design/components/raccoon.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 hive of parts, no part built twice, in pollen yellow",
  "points": [
   {
    "icon": "book",
    "text": "Shrikhand sets headlines; Parkinsans sets every control, label and paragraph."
   },
   {
    "icon": "spark",
    "text": "Pollen yellow sits on the main button, focus and Buzz only, never a card."
   },
   {
    "icon": "chat",
    "text": "After a heart, Buzz says: You danced for that one. More like it, coming up."
   },
   {
    "icon": "warn",
    "text": "The Buzz sun disc is drawn only in dark."
   }
  ],
  "stat": {
   "value": "78",
   "label": "Component families today"
  },
  "decide": "Buzz's light focus colour is the lowest of five at 4.7 to 1: keep it?",
  "mood": "building"
 },
 "sources": [
  "brand-directions/bee/kit-skin.js",
  "brand-directions/bee/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": [
  "Buzz's light focus colour is #8a6a00 at 4.7 to 1 on the page, the lowest of the five. Keep it? Proposal: Keep it; it passes the 3 to 1 a focus ring needs.",
  "The sun disc is drawn only in dark. Does Buzz need it in light? Proposal: No, the ink limbs read on the light page.",
  "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 Buzz'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. Pollen passed.\""
 ],
 "parts": {
  "Answer": "Brew has one component set for every screen, and in Buzz's skin it wears pollen yellow #ffd60a on the main button, focus and Buzz only, Shrikhand for headlines and Parkinsans 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| Buzz's product skin sets bg #121110, surface #1a1916, surface2 #24221d, ink #f6f3ea, muted #aca796, line #2e2c25 in dark | [src: brand-directions/bee/kit-skin.js:5-19] |\n| In light: bg #f8f7f3, surface #ffffff, surface2 #efede6, ink #17130a, muted #5f5a4b, line #e3e0d6 | [src: brand-directions/bee/kit-skin.js:5-19] |\n| Hero #ffd60a with label ink #17130a in both themes; focus #ffe14d on dark and #8a6a00 on light | [src: brand-directions/bee/kit-skin.js:5-19] |\n| Radius 18px for cards and sheets, 10px for buttons and fields; shadow `0 8px 24px rgba(0,0,0,.32)` on dark | [src: brand-directions/bee/kit-skin.js:5-19] |\n| Fonts: Shrikhand for display, Parkinsans for body, from one Google Fonts link | [src: brand-directions/bee/kit-skin.js:5-19] |\n| On dark screens Buzz sits on a pale sun disc, #fff1b8, padded by 14 percent of the slot, so the ink limbs stay visible. | [src: brand-directions/bee/kit-skin.js:5-19] |\n| Measured: main button label 13.1 to 1 on the hero, ink 15.8 and muted 7.3 on the dark surface, muted 5.9 on the light surface2 | [src: brand-directions/docs2/data/dirs.json] |\n| Shrikhand has one weight and the skin turns font synthesis off, so every display line renders at its one weight, never a fake bold | [src: brand-directions/bee/system.md:38-40] |\n| The book skin, with the honeycomb print: the honey plate printed 9 px right and 8 px down behind the body, a comb of 22 px hex cells and the dotted waggle trail, and the Playpen Sans hand, never enters the product | [src: brand-directions/bee/system.md:33-36] |",
  "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### Buzz's skin on the kit\n\n| Token | Dark | Light | Used for |\n|---|---|---|---|\n| bg | #121110 | #f8f7f3 | the page |\n| surface | #1a1916 | #ffffff | rows, sheets, cards with no picture |\n| surface2 | #24221d | #efede6 | quiet buttons, tracks, empty picture slots |\n| ink | #f6f3ea | #17130a | text, the toast fill |\n| muted | #aca796 | #5f5a4b | second lines, intros, sources |\n| line | #2e2c25 | #e3e0d6 | hairlines, icon button rings |\n| hero | #ffd60a | #ffd60a | main button, count pill, on switch, story ring, the heart when on |\n| heroInk | #17130a | #17130a | text on the hero |\n| focus | #ffe14d | #8a6a00 | the 2 px focus ring, field focus |\n| radius, radiusSm | 18px, 10px | same | cards and sheets, buttons and fields |\n\nShrikhand sets the greeting, screen titles, pick headlines, sheet titles, the empty state line, big numbers, story facts, prices and brief step numbers. Parkinsans 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 Buzz | Words | Tag |\n|---|---|---|---|---|---|\n| Top bar | k-top | 56 px; brand mark tile 30 px, your picture 32 px | the Buzz 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 #ffd60a with #17130a digits | Today, Work, Your store. Buzz calls it Today's flight 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 | #ffd60a fill, #17130a label, brightens a touch on hover | 3 words, a plain verb | Changes |\n| Quiet button | k-btn--quiet | 46 px | #24221d 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 #ffd60a 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 #17130a 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 18px plus 8 px, grab bar 38 px | #1a1916 fill, solid, never glass; title in Shrikhand 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 #ffd60a | 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: \"You danced for that one. More like it, coming up.\" | 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 18px; headline 21 px in Shrikhand | 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 from your store, most with a first draft.\" | Changes |\n| Number card | k-figure | one 64 px number and its source chip | number in Shrikhand | one number, its source | Changes |\n| Mini card | k-mini | 84 px picture beside the same five parts | the same card, smaller | \"Everything else I found, ranked. The whole meadow.\" heads See everything | Changes |\n| Need your yes row | k-yes-list, k-yes | rows on surface; Yes main, Not now quiet | no Buzz here: it is a decision | question 10 words, what happens one line. Intro: \"Only you can answer these. One nod each.\". Buzz 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 | #ffd60a ring while unseen | label 2 words. Buzz calls it Flutters in words around it, never on the control | Stays |\n| Story viewer | k-story | full bleed, progress bars, fact 34 px | fact in Shrikhand | 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 #ffe14d | 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 #ffd60a, knob #17130a | 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 #1a1916 | 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 #ffd60a | 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 | Buzz wait slot beside one line | Buzz in its wait pose | \"Making honey. You can leave, I will keep it.\" | Changes |\n| Stepper and progress | k-steps, k-progress | 20 px step dots, 4 px bar | current step ringed in #ffd60a, bar in #ffd60a | step 6 words; read line \"Buzzing round your store. 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: \"While I fly round: which of these do you handle?\" | Changes |\n| Reveal card | k-reveal | 5 to 4 picture, 58 px number | the only card with the kit shadow | \"Found this one first. Follow my dance.\" | New |\n| First win bar | k-win | three 4 px steps | done steps in #ffd60a | \"You danced for one. That is one.\", \"First batch made. That is two.\", \"Pollen passed. First win.\" | New |\n| Empty state | k-empty | centred, 56 px top padding, line 22 px in the display face | Buzz 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 | Buzz error slot, never the empty look | one sentence, one button | Changes |\n| Celebration | k-celebrate | centred, title 26 px | Buzz at 120 px in its celebrate pose | one line, then the next step | New |\n| Sign off | k-signoff | line ringed box | Buzz corner mark | \"I am napping in the comb. See you 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 Shrikhand; Buzz signs off at 32 px | section title 4 words, step 10 words; sign off \"Drafted by Buzz. Over to 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: \"What customers, rivals and AI answers say about your store.\" | Changes |\n| Email blocks | k-mail, k-mail-pick | one column, 56 px pick pictures, one block button | subject \"Best blooms: five picks for this week\" | first line \"Morning. Five picks for your store, drafted and waiting.\" | New |\n\n[src: brand-directions/_kit/kit.css:36-563] [src: brand-directions/book/content/e.js:116-240] [src: brand-directions/bee/kit-skin.js:47-89]\n\n### What stays out of the product\n\n| Item | Why | Tag |\n|---|---|---|\n| The honeycomb print: the honey plate printed 9 px right and 8 px down behind the body, a comb of 22 px hex cells and the dotted waggle trail | book skin only; the product skin is calm and photographic | Stays out |\n| The Playpen Sans 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. Buzz's values come from the tokens in brand-directions/bee/kit-skin.js.\n4. Render the part in Buzz'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. Buzz's light focus colour is #8a6a00 at 4.7 to 1 on the page, the lowest of the five. Keep it? Proposal: Keep it; it passes the 3 to 1 a focus ring needs.\n2. The sun disc is drawn only in dark. Does Buzz need it in light? Proposal: No, the ink limbs read on the light page.\n3. 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.\n4. The five area colours stay as small dots beside the area name. Keep them in Buzz's skin? Proposal: Yes, as dots only, never as text or fills.\n5. The kit's hand off line for our team still names the old company. Rewrite? Proposal: Yes: \"Our team has your brief. Pollen passed.\""
 }
}