Components · Handbook

Answer

Brew has one component set for every screen, and in Fetch's skin it wears tennis ball green #aee32f on the main button, focus and Fetch only, Grandstander for headlines and Commissioner 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
Fetch's product skin sets bg #111410, surface #191d17, surface2 #22271f, ink #f3f5ee, muted #a7ad9f, line #2d3329 in dark	brand-directions/dog/kit-skin.js:5-18
In light: bg #f6f6f2, surface #ffffff, surface2 #eeeee8, ink #16180f, muted #5a5e54, line #e0e0d8	brand-directions/dog/kit-skin.js:5-18
Hero #aee32f with label ink #16180f in both themes; focus #c6f05a on dark and #446605 on light	brand-directions/dog/kit-skin.js:5-18
Radius 18px for cards and sheets, 11px for buttons and fields; shadow `0 8px 24px rgba(0,0,0,.30)` on dark	brand-directions/dog/kit-skin.js:5-18
Fonts: Grandstander for display, Commissioner for body, from one Google Fonts link	brand-directions/dog/kit-skin.js:5-18
Measured: main button label 11.8 to 1 on the hero, ink 15.5 and muted 7.4 on the dark surface, muted 5.7 on the light surface2	brand-directions/docs2/data/dirs.json
Grandstander loads at weights 500 to 800, so the kit's 600 and 650 render true	brand-directions/dog/system.md:36-39
The book skin, with the felt plate: a green disc set 8 px right and 6 px down behind Fetch, 20 percent on dark and 38 percent on light, and the Shantell Sans hand, never enters the product	brand-directions/dog/system.md:34

Tomorrow

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

Fetch's skin on the kit

Token	Dark	Light	Used for
bg	#111410	#f6f6f2	the page
surface	#191d17	#ffffff	rows, sheets, cards with no picture
surface2	#22271f	#eeeee8	quiet buttons, tracks, empty picture slots
ink	#f3f5ee	#16180f	text, the toast fill
muted	#a7ad9f	#5a5e54	second lines, intros, sources
line	#2d3329	#e0e0d8	hairlines, icon button rings
hero	#aee32f	#aee32f	main button, count pill, on switch, story ring, the heart when on
heroInk	#16180f	#16180f	text on the hero
focus	#c6f05a	#446605	the 2 px focus ring, field focus
radius, radiusSm	18px, 11px	same	cards and sheets, buttons and fields

Grandstander sets the greeting, screen titles, pick headlines, sheet titles, the empty state line, big numbers, story facts, prices and brief step numbers. Commissioner 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 Fetch	Words	Tag
Top bar	k-top	56 px; brand mark tile 30 px, your picture 32 px	the Fetch 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 #aee32f with #16180f digits	Today, Work, Your store. Fetch calls it The doorstep 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 11px	#aee32f fill, #16180f label, brightens a touch on hover	3 words, a plain verb	Changes
Quiet button	k-btn--quiet	46 px	#22271f 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 #aee32f 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 #16180f 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 18px plus 8 px, grab bar 38 px	#191d17 fill, solid, never glass; title in Grandstander 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 #aee32f	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: "Good pick. Fetching more like it."	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 18px; headline 21 px in Grandstander	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
Number card	k-figure	one 64 px number and its source chip	number in Grandstander	one number, its source	Changes
Mini card	k-mini	84 px picture beside the same five parts	the same card, smaller	"Everything else I brought back, best first." heads See everything	Changes
Need your yes row	k-yes-list, k-yes	rows on surface; Yes main, Not now quiet	no Fetch here: it is a decision	question 10 words, what happens one line. Intro: "Only you can answer these. I will sit here.". Fetch calls it Paws up in words around it, never on the control	Changes
Story ring	k-ring, k-ring-pic	64 px picture, 2 px ring	#aee32f ring while unseen	label 2 words. Fetch calls it Sniffs in words around it, never on the control	Stays
Story viewer	k-story	full bleed, progress bars, fact 34 px	fact in Grandstander	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 #c6f05a	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 #aee32f, knob #16180f	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 #191d17	label 6 words, one sub line 10 words, one action	Changes
Tile	k-tile	92 px or more, two columns	selected tile ringed in #aee32f	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	Fetch wait slot beside one line	Fetch in its wait pose	"Making it now. You can go, I will stay."	Changes
Stepper and progress	k-steps, k-progress	20 px step dots, 4 px bar	current step ringed in #aee32f, bar in #aee32f	step 6 words; read line "Sniffing round your store. 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: "While I sniff: 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	"Brought this back first. Have a look."	New
First win bar	k-win	three 4 px steps	done steps in #aee32f	"Fetching more like it. That is one.", "Chewed on and ready. That is two.", "Dropped it off. First win."	New
Empty state	k-empty	centred, 56 px top padding, line 22 px in the display face	Fetch 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	Fetch error slot, never the empty look	one sentence, one button	Changes
Celebration	k-celebrate	centred, title 26 px	Fetch at 120 px in its celebrate pose	one line, then the next step	New
Sign off	k-signoff	line ringed box	Fetch corner mark	"I am keeping the ball now. 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 Grandstander; Fetch signs off at 32 px	section title 4 words, step 10 words; sign off "Fetched for you. Over to you now."	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: "What customers, rivals and AI answers say about your store."	Changes
Email blocks	k-mail, k-mail-pick	one column, 56 px pick pictures, one block button	subject "Five picks, dropped at your feet"	first line "Morning. Five picks for your store, most already drafted."	New

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

What stays out of the product

Item	Why	Tag
The felt plate: a green disc set 8 px right and 6 px down behind Fetch, 20 percent on dark and 38 percent on light	book skin only; the product skin is calm and photographic	Stays out
The Shantell Sans 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

Look for the part in the table above. Use it as it is.
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.
Never put a colour, size or font in a screen. Fetch's values come from the tokens in brand-directions/dog/kit-skin.js.
Render the part in Fetch's skin at 390 and 1280 wide, light and dark:

open /Users/param/Documents/ChatGPT/brand-directions/screens.html

Check contrast of any new pair with the script in Accessibility.
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

Fetch has extra poses for heart, drop and handoff that the kit never calls. Use them? Proposal: Use the heart pose on the first heart celebration at 120 px and drop on the Monday greeting; leave handoff for marketing.
The felt plate is a book treatment. Should it sit behind Fetch in the product too? Proposal: No, keep the product calm; the plate stays in books, the site and marketing.
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 Fetch'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 now."

Components, Fetch