Components · Handbook

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.

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
Buzz's product skin sets bg #121110, surface #1a1916, surface2 #24221d, ink #f6f3ea, muted #aca796, line #2e2c25 in dark	brand-directions/bee/kit-skin.js:5-19
In light: bg #f8f7f3, surface #ffffff, surface2 #efede6, ink #17130a, muted #5f5a4b, line #e3e0d6	brand-directions/bee/kit-skin.js:5-19
Hero #ffd60a with label ink #17130a in both themes; focus #ffe14d on dark and #8a6a00 on light	brand-directions/bee/kit-skin.js:5-19
Radius 18px for cards and sheets, 10px for buttons and fields; shadow `0 8px 24px rgba(0,0,0,.32)` on dark	brand-directions/bee/kit-skin.js:5-19
Fonts: Shrikhand for display, Parkinsans for body, from one Google Fonts link	brand-directions/bee/kit-skin.js:5-19
On dark screens Buzz sits on a pale sun disc, #fff1b8, padded by 14 percent of the slot, so the ink limbs stay visible.	brand-directions/bee/kit-skin.js:5-19
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	brand-directions/docs2/data/dirs.json
Shrikhand has one weight and the skin turns font synthesis off, so every display line renders at its one weight, never a fake bold	brand-directions/bee/system.md:38-40
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	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.

Buzz's skin on the kit

Token	Dark	Light	Used for
bg	#121110	#f8f7f3	the page
surface	#1a1916	#ffffff	rows, sheets, cards with no picture
surface2	#24221d	#efede6	quiet buttons, tracks, empty picture slots
ink	#f6f3ea	#17130a	text, the toast fill
muted	#aca796	#5f5a4b	second lines, intros, sources
line	#2e2c25	#e3e0d6	hairlines, icon button rings
hero	#ffd60a	#ffd60a	main button, count pill, on switch, story ring, the heart when on
heroInk	#17130a	#17130a	text on the hero
focus	#ffe14d	#8a6a00	the 2 px focus ring, field focus
radius, radiusSm	18px, 10px	same	cards and sheets, buttons and fields

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

Every part

Part	Kit class	Size and shape	In Buzz	Words	Tag
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
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
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	#ffd60a fill, #17130a label, brightens a touch on hover	3 words, a plain verb	Changes
Quiet button	k-btn--quiet	46 px	#24221d 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 #ffd60a 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 #17130a 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	#1a1916 fill, solid, never glass; title in Shrikhand 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 #ffd60a	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: "You danced for that one. More like it, 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 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
Number card	k-figure	one 64 px number and its source chip	number in Shrikhand	one number, its source	Changes
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
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
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
Story viewer	k-story	full bleed, progress bars, fact 34 px	fact in Shrikhand	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 #ffe14d	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 #ffd60a, knob #17130a	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 #1a1916	label 6 words, one sub line 10 words, one action	Changes
Tile	k-tile	92 px or more, two columns	selected tile ringed in #ffd60a	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	Buzz wait slot beside one line	Buzz in its wait pose	"Making honey. You can leave, I will keep it."	Changes
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
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
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
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
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
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
Celebration	k-celebrate	centred, title 26 px	Buzz at 120 px in its celebrate pose	one line, then the next step	New
Sign off	k-signoff	line ringed box	Buzz corner mark	"I am napping in the comb. 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 Shrikhand; Buzz signs off at 32 px	section title 4 words, step 10 words; sign off "Drafted by Buzz. 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: "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 "Best blooms: five picks for this week"	first line "Morning. Five picks for your store, drafted and waiting."	New

brand-directions/_kit/kit.css:36-563 brand-directions/book/content/e.js:116-240 brand-directions/bee/kit-skin.js:47-89

What stays out of the product

Item	Why	Tag
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
The Playpen 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. Buzz's values come from the tokens in brand-directions/bee/kit-skin.js.
Render the part in Buzz'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

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."

Components, Buzz