{
 "id": "3.5",
 "title": "Components",
 "department": "Design",
 "department_slug": "design",
 "direction": {
  "id": "cooker",
  "name": "Seeti"
 },
 "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/cooker",
  "markdown": "https://handbook.joinsquareup.com/design/components/cooker.md",
  "json": "https://handbook.joinsquareup.com/design/components/cooker.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": "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"
  }
 ],
 "tldr": {
  "headline": "One kitchen of parts, none built twice, in chilli red",
  "points": [
   {
    "icon": "book",
    "text": "Bakbak One sets headlines; Anek Latin sets every control, label and paragraph."
   },
   {
    "icon": "spark",
    "text": "Chilli red sits on the main button, focus and Seeti only, never a card."
   },
   {
    "icon": "chat",
    "text": "After a heart, Seeti says: Ooh, good taste. More like that, coming up."
   },
   {
    "icon": "warn",
    "text": "Order tickets and uppercase labels stay out of the product."
   }
  ],
  "stat": {
   "value": "78",
   "label": "Component families today"
  },
  "decide": "Rewrite the reading line that names AI vendors to: Asking AI answers about you?",
  "mood": "building"
 },
 "sources": [
  "brand-directions/cooker/kit-skin.js",
  "brand-directions/cooker/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": [
  "Seeti's reading line for AI answers names ChatGPT, Gemini, Perplexity and Claude, and the model bans vendor names in front of a founder. Rewrite it? Proposal: Yes: \"Asking AI answers about you.\"",
  "The system file sets ticket labels in uppercase, which the writing rules ban. Keep tickets for books only? Proposal: Yes, order tickets and uppercase stay out of the product.",
  "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 Seeti'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: \"Order up. Our team has your ticket.\""
 ],
 "parts": {
  "Answer": "Brew has one component set for every screen, and in Seeti's skin it wears chilli red #ff3d2e on the main button, focus and Seeti only, Bakbak One for headlines and Anek Latin 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| Seeti's product skin sets bg #141416, surface #1c1d21, surface2 #26272c, ink #f3f1ec, muted #a5a8b0, line #303239 in dark | [src: brand-directions/cooker/kit-skin.js:8-21] |\n| In light: bg #f7f5f1, surface #ffffff, surface2 #efece6, ink #15161a, muted #5a5d64, line #e2ddd3 | [src: brand-directions/cooker/kit-skin.js:8-21] |\n| Hero #ff3d2e with label ink #15161a in both themes; focus #ff6a5e on dark and #c8261a on light | [src: brand-directions/cooker/kit-skin.js:8-21] |\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/cooker/kit-skin.js:8-21] |\n| Fonts: Bakbak One for display, Anek Latin for body, from one Google Fonts link | [src: brand-directions/cooker/kit-skin.js:8-21] |\n| Measured: main button label 5.1 to 1 on the hero, ink 14.9 and muted 7.1 on the dark surface, muted 5.6 on the light surface2 | [src: brand-directions/docs2/data/dirs.json] |\n| Bakbak One has one weight and was drawn in India for Latin and Devanagari; the skin turns font synthesis off | [src: brand-directions/cooker/system.md:29-31] |\n| The book skin, with kitchen order tickets: paper, mono type and a torn bottom edge for anything handed off, with three red whistle pills as the only progress mark, and the Fragment Mono hand, never enters the product | [src: brand-directions/cooker/system.md:33-36] |\n| Chilli covers under ten percent of any screen, and text on chilli is ink, never white. | [src: brand-directions/cooker/system.md:38] |",
  "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### Seeti's skin on the kit\n\n| Token | Dark | Light | Used for |\n|---|---|---|---|\n| bg | #141416 | #f7f5f1 | the page |\n| surface | #1c1d21 | #ffffff | rows, sheets, cards with no picture |\n| surface2 | #26272c | #efece6 | quiet buttons, tracks, empty picture slots |\n| ink | #f3f1ec | #15161a | text, the toast fill |\n| muted | #a5a8b0 | #5a5d64 | second lines, intros, sources |\n| line | #303239 | #e2ddd3 | hairlines, icon button rings |\n| hero | #ff3d2e | #ff3d2e | main button, count pill, on switch, story ring, the heart when on |\n| heroInk | #15161a | #15161a | text on the hero |\n| focus | #ff6a5e | #c8261a | the 2 px focus ring, field focus |\n| radius, radiusSm | 16px, 10px | same | cards and sheets, buttons and fields |\n\nBakbak One sets the greeting, screen titles, pick headlines, sheet titles, the empty state line, big numbers, story facts, prices and brief step numbers. Anek Latin 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 Seeti | Words | Tag |\n|---|---|---|---|---|---|\n| Top bar | k-top | 56 px; brand mark tile 30 px, your picture 32 px | the Seeti 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 #ff3d2e with #15161a digits | Today, Work, Your store. Seeti calls it The pass 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 | #ff3d2e fill, #15161a label, brightens a touch on hover | 3 words, a plain verb | Changes |\n| Quiet button | k-btn--quiet | 46 px | #26272c 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 #ff3d2e 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 #15161a 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 | #1c1d21 fill, solid, never glass; title in Bakbak One 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 #ff3d2e | 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: \"Ooh, good taste. More like that, 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 16px; headline 21 px in Bakbak One | 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 specials, ranked from your own store.\" | Changes |\n| Number card | k-figure | one 64 px number and its source chip | number in Bakbak One | one number, its source | Changes |\n| Mini card | k-mini | 84 px picture beside the same five parts | the same card, smaller | \"The full menu, ranked. The specials sit on top.\" heads See everything | Changes |\n| Need your yes row | k-yes-list, k-yes | rows on surface; Yes main, Not now quiet | no Seeti here: it is a decision | question 10 words, what happens one line. Intro: \"Only you can answer these. Yes, or not now.\". Seeti calls it Taste this first in words around it, never on the control | Changes |\n| Story ring | k-ring, k-ring-pic | 64 px picture, 2 px ring | #ff3d2e ring while unseen | label 2 words. plain word only | Stays |\n| Story viewer | k-story | full bleed, progress bars, fact 34 px | fact in Bakbak One | 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 #ff6a5e | 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 #ff3d2e, knob #15161a | 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 #1c1d21 | 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 #ff3d2e | 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 | Seeti wait slot beside one line | Seeti in its wait pose | \"Another batch on the stove. You can step away.\" | Changes |\n| Stepper and progress | k-steps, k-progress | 20 px step dots, 4 px bar | current step ringed in #ff3d2e, bar in #ff3d2e | step 6 words; read line \"Cooking your store. About 3 to 4 minutes. Nobody lifts my lid.\" | 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 cook: 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 | \"One thing I found while it cooked.\" | New |\n| First win bar | k-win | three 4 px steps | done steps in #ff3d2e | \"Good taste. One down.\", \"First batch made. Two down.\", \"First plate out. Not bad, boss.\" | New |\n| Empty state | k-empty | centred, 56 px top padding, line 22 px in the display face | Seeti 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 | Seeti error slot, never the empty look | one sentence, one button | Changes |\n| Celebration | k-celebrate | centred, title 26 px | Seeti at 120 px in its celebrate pose | one line, then the next step | New |\n| Sign off | k-signoff | line ringed box | Seeti corner mark | \"Go on, lift the lid. 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 Bakbak One; Seeti signs off at 32 px | section title 4 words, step 10 words; sign off \"Cooked by Seeti. 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: \"The pantry: what people say about your store.\" | Changes |\n| Email blocks | k-mail, k-mail-pick | one column, 56 px pick pictures, one block button | subject \"Three whistles. Your week is ready.\" | first line \"Five specials for your store, ranked and drafted. Go on, pick.\" | New |\n\n[src: brand-directions/_kit/kit.css:36-563] [src: brand-directions/book/content/e.js:116-240] [src: brand-directions/cooker/kit-skin.js:44-86]\n\n### What stays out of the product\n\n| Item | Why | Tag |\n|---|---|---|\n| Kitchen order tickets: paper, mono type and a torn bottom edge for anything handed off, with three red whistle pills as the only progress mark | book skin only; the product skin is calm and photographic | Stays out |\n| The Fragment Mono 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. Seeti's values come from the tokens in brand-directions/cooker/kit-skin.js.\n4. Render the part in Seeti'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. Seeti's reading line for AI answers names ChatGPT, Gemini, Perplexity and Claude, and the model bans vendor names in front of a founder. Rewrite it? Proposal: Yes: \"Asking AI answers about you.\"\n2. The system file sets ticket labels in uppercase, which the writing rules ban. Keep tickets for books only? Proposal: Yes, order tickets and uppercase stay out of the product.\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 Seeti'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: \"Order up. Our team has your ticket.\""
 }
}