FetchBuzzScoopOchoSeeti
Snapshots

One tank of parts, none built twice, in hot pink

Being built
  • DynaPuff sets headlines; Archivo sets every control, label and paragraph.
  • Hot pink sits on the main button, focus and Ocho only, never a card.
  • After a heart, Ocho says: Stuck it. More like it, coming up.
  • Need your yes is One arm up in words, never on the control.
78Component families today
Your call

Keep one pink in both themes, since the label passes at 6.0 to 1?

Design · 3.5 · Ocho

Components, Ocho

DraftLast checked Mon Oct 26Owner Param

Answer

Brew has one component set for every screen, and in Ocho's skin it wears hot pink #ff4fa3 on the main button, focus and Ocho only, DynaPuff for headlines and Archivo 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
Ocho's product skin sets bg #101218, surface #181b22, surface2 #21252e, ink #f4f1f3, muted #a9adba, line #2c303a in dark brand-directions/octopus/kit-skin.js:5-18
In light: bg #f7f6f5, surface #ffffff, surface2 #efedec, ink #1a1218, muted #5e5862, line #e2dedc brand-directions/octopus/kit-skin.js:5-18
Hero #ff4fa3 with label ink #1a1218 in both themes; focus #ff7dbb on dark and #c8146e on light brand-directions/octopus/kit-skin.js:5-18
Radius 16px for cards and sheets, 10px for buttons and fields; shadow 0 8px 24px rgba(0,0,0,.30) on dark brand-directions/octopus/kit-skin.js:5-18
Fonts: DynaPuff for display, Archivo for body, from one Google Fonts link brand-directions/octopus/kit-skin.js:5-18
Measured: main button label 6.0 to 1 on the hero, ink 15.4 and muted 7.7 on the dark surface, muted 5.9 on the light surface2 brand-directions/docs2/data/dirs.json
DynaPuff loads at weights 400 to 700 and widths 75 to 100, Archivo at widths 62 to 125, so dense lists can narrow without a third face brand-directions/octopus/system.md:37-39
The book skin, with the sucker print: two inks on draft paper, the belly pink plate printed 5 px right and 4 px down, and a halftone of sucker dots fading in from one corner, and the Mali hand, never enters the product brand-directions/octopus/system.md:33-35

Tomorrow

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

Ocho's skin on the kit

Token Dark Light Used for
bg #101218 #f7f6f5 the page
surface #181b22 #ffffff rows, sheets, cards with no picture
surface2 #21252e #efedec quiet buttons, tracks, empty picture slots
ink #f4f1f3 #1a1218 text, the toast fill
muted #a9adba #5e5862 second lines, intros, sources
line #2c303a #e2dedc hairlines, icon button rings
hero #ff4fa3 #ff4fa3 main button, count pill, on switch, story ring, the heart when on
heroInk #1a1218 #1a1218 text on the hero
focus #ff7dbb #c8146e the 2 px focus ring, field focus
radius, radiusSm 16px, 10px same cards and sheets, buttons and fields

DynaPuff sets the greeting, screen titles, pick headlines, sheet titles, the empty state line, big numbers, story facts, prices and brief step numbers. Archivo 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 Ocho Words Tag
Top bar k-top 56 px; brand mark tile 30 px, your picture 32 px the Ocho 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 #ff4fa3 with #1a1218 digits Today, Work, Your store. Ocho calls it On my arms 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 #ff4fa3 fill, #1a1218 label, brightens a touch on hover 3 words, a plain verb Changes
Quiet button k-btn--quiet 46 px #21252e 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 #ff4fa3 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 #1a1218 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 #181b22 fill, solid, never glass; title in DynaPuff 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 #ff4fa3 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: "Stuck it. 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 16px; headline 21 px in DynaPuff 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 DynaPuff 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 tank." heads See everything Changes
Need your yes row k-yes-list, k-yes rows on surface; Yes main, Not now quiet no Ocho here: it is a decision question 10 words, what happens one line. Intro: "Only you can answer these. I will keep holding them up.". Ocho calls it One arm up in words around it, never on the control Changes
Story ring k-ring, k-ring-pic 64 px picture, 2 px ring #ff4fa3 ring while unseen label 2 words. Ocho calls it Bubbles in words around it, never on the control Stays
Story viewer k-story full bleed, progress bars, fact 34 px fact in DynaPuff 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 #ff7dbb 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 #ff4fa3, knob #1a1218 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 #181b22 label 6 words, one sub line 10 words, one action Changes
Tile k-tile 92 px or more, two columns selected tile ringed in #ff4fa3 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 Ocho wait slot beside one line Ocho in its wait pose "Ink drying. 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 #ff4fa3, bar in #ff4fa3 step 6 words; read line "Eight arms reading 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 read: 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 with arm four. Proud of it." New
First win bar k-win three 4 px steps done steps in #ff4fa3 "Stuck it. That is one.", "Fresh ink. That is two.", "One arm free. First win." New
Empty state k-empty centred, 56 px top padding, line 22 px in the display face Ocho 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 Ocho error slot, never the empty look one sentence, one button Changes
Celebration k-celebrate centred, title 26 px Ocho at 120 px in its celebrate pose one line, then the next step New
Sign off k-signoff line ringed box Ocho corner mark "I am getting in the coffee. 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 DynaPuff; Ocho signs off at 32 px section title 4 words, step 10 words; sign off "Drafted by Ocho. 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 "Arms full: 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/octopus/kit-skin.js:42-84

What stays out of the product

Item Why Tag
The sucker print: two inks on draft paper, the belly pink plate printed 5 px right and 4 px down, and a halftone of sucker dots fading in from one corner book skin only; the product skin is calm and photographic Stays out
The Mali 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. Ocho's values come from the tokens in brand-directions/octopus/kit-skin.js.
  4. Render the part in Ocho'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. The print shadow on full poses is a drop shadow filter. Does it pass the no soft shadow rule? Proposal: Yes, it has no blur; keep it.
  2. Ocho's main button label is 6.0 to 1 on pink. Darker pink for light theme? Proposal: Keep #ff4fa3 in both themes; the label passes.
  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 Ocho'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: "Our team has your brief. One arm free."
Sources
  • brand-directions/octopus/kit-skin.js
  • brand-directions/octopus/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.octopus.md · For agents: Markdown · JSON