FetchBuzzScoopOchoSeeti
Snapshots

One kitchen of parts, none built twice, in chilli red

Being built
  • Bakbak One sets headlines; Anek Latin sets every control, label and paragraph.
  • Chilli red sits on the main button, focus and Seeti only, never a card.
  • After a heart, Seeti says: Ooh, good taste. More like that, coming up.
  • Order tickets and uppercase labels stay out of the product.
78Component families today
Your call

Rewrite the reading line that names AI vendors to: Asking AI answers about you?

Design · 3.5 · Seeti

Components, Seeti

DraftLast checked Mon Oct 26Owner Param

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.

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
Seeti's product skin sets bg #141416, surface #1c1d21, surface2 #26272c, ink #f3f1ec, muted #a5a8b0, line #303239 in dark brand-directions/cooker/kit-skin.js:8-21
In light: bg #f7f5f1, surface #ffffff, surface2 #efece6, ink #15161a, muted #5a5d64, line #e2ddd3 brand-directions/cooker/kit-skin.js:8-21
Hero #ff3d2e with label ink #15161a in both themes; focus #ff6a5e on dark and #c8261a on light brand-directions/cooker/kit-skin.js:8-21
Radius 16px for cards and sheets, 10px for buttons and fields; shadow 0 8px 24px rgba(0,0,0,.32) on dark brand-directions/cooker/kit-skin.js:8-21
Fonts: Bakbak One for display, Anek Latin for body, from one Google Fonts link brand-directions/cooker/kit-skin.js:8-21
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 brand-directions/docs2/data/dirs.json
Bakbak One has one weight and was drawn in India for Latin and Devanagari; the skin turns font synthesis off brand-directions/cooker/system.md:29-31
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 brand-directions/cooker/system.md:33-36
Chilli covers under ten percent of any screen, and text on chilli is ink, never white. 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.

Seeti's skin on the kit

Token Dark Light Used for
bg #141416 #f7f5f1 the page
surface #1c1d21 #ffffff rows, sheets, cards with no picture
surface2 #26272c #efece6 quiet buttons, tracks, empty picture slots
ink #f3f1ec #15161a text, the toast fill
muted #a5a8b0 #5a5d64 second lines, intros, sources
line #303239 #e2ddd3 hairlines, icon button rings
hero #ff3d2e #ff3d2e main button, count pill, on switch, story ring, the heart when on
heroInk #15161a #15161a text on the hero
focus #ff6a5e #c8261a the 2 px focus ring, field focus
radius, radiusSm 16px, 10px same cards and sheets, buttons and fields

Bakbak 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. brand-directions/_kit/kit.css:97-99, 182, 190, 244, 319-321, 481

Every part

Part Kit class Size and shape In Seeti Words Tag
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
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
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 #ff3d2e fill, #15161a label, brightens a touch on hover 3 words, a plain verb Changes
Quiet button k-btn--quiet 46 px #26272c 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 #ff3d2e 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 #15161a 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 #1c1d21 fill, solid, never glass; title in Bakbak One 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 #ff3d2e 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: "Ooh, good taste. More like that, coming up." 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 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
Number card k-figure one 64 px number and its source chip number in Bakbak One one number, its source Changes
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
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
Story ring k-ring, k-ring-pic 64 px picture, 2 px ring #ff3d2e ring while unseen label 2 words. plain word only Stays
Story viewer k-story full bleed, progress bars, fact 34 px fact in Bakbak One 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 #ff6a5e 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 #ff3d2e, knob #15161a 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 #1c1d21 label 6 words, one sub line 10 words, one action Changes
Tile k-tile 92 px or more, two columns selected tile ringed in #ff3d2e 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 Seeti wait slot beside one line Seeti in its wait pose "Another batch on the stove. You can step away." Changes
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
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
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
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
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
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
Celebration k-celebrate centred, title 26 px Seeti at 120 px in its celebrate pose one line, then the next step New
Sign off k-signoff line ringed box Seeti corner mark "Go on, lift the lid. See you 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 Bakbak One; Seeti signs off at 32 px section title 4 words, step 10 words; sign off "Cooked by Seeti. Over to 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: "The pantry: what people say about your store." Changes
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

brand-directions/_kit/kit.css:36-563 brand-directions/book/content/e.js:116-240 brand-directions/cooker/kit-skin.js:44-86

What stays out of the product

Item Why Tag
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
The Fragment Mono 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. Seeti's values come from the tokens in brand-directions/cooker/kit-skin.js.
  4. Render the part in Seeti'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. 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."
  2. 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.
  3. 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.
  4. 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.
  5. The kit's hand off line for our team still names the old company. Rewrite? Proposal: Yes: "Order up. Our team has your ticket."
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

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