Visual identity, Buzz

Answer

Buzz's look: one owned colour, pollen yellow, with ink stripes on comb paper and night hive, two typefaces, the honeycomb print, and a wordmark slot until the product has a name.

Today

Today's product look

• Today's product is dark, quiet and photographic: the brand's own pictures carry the colour. brand-directions/BRIEF.md section 2
• The product loads Inter for text and Caveat for hand notes from Google Fonts. brew/public/index.html:6
• The text stack is SF Pro Text, then Inter, then system faces. brew/public/feed-system.css:31
• The tab icon and the brand book page icon are the old mark, assets/brew-mark.svg. brew/public/index.html:1; brew/server.js:948
• Five agent shapes and colours sit in the product: creative teal #2bb39b, performance blue #4a90f0, storefront orange #f28a3c, AI visibility purple #9a6bf0, CRM green #16a37f. brand-directions/BRIEF.md section 2
• Inter is on the owner's list of fonts that read as an AI giveaway, so no direction keeps it. memory brand-directions-2026-10-25

Buzz's palette

Product tokens, the screen kit

• Product tokens and book tokens are two sets, never mixed. The book set uses night hive and comb paper pages with link #ffd60a on dark and #7a5800 on light. brand-directions/bee/system.md s1

Contrast

Type

Illustration, shapes and photography

• The honeycomb print is the one illustration treatment: a honey plate copy of the body printed 9 pixels right and 8 down at 55 percent behind every full frame, on comb paper, with honey hex outlines fading in from one corner, never across a face. brand-directions/bee/brand.html b4; brand-directions/bee/art.html a7
• Five inks only: pollen, honey, ink, paper, wing. Never gloss, gradients, soft shadows, white sticker borders or sparkles. brand-directions/bee/art.html a7; brand-directions/bee/brand.html b4
• Motifs: the flat topped hex for chapter numbers, step badges and the honey jar meter; the dotted waggle trail for dividers and pointing at the best thing; the jar label panel for anything Buzz made or kept; the window pane only for oops. brand-directions/bee/brand.html b4
• One honey jar and one trail per page, hex cells only as texture or grids. brand-directions/bee/brand.html b3
• Icons: one rounded line set, 2 pixel stroke, round ends, ink or warm white. No emoji. brand-directions/bee/brand.html b4
• Photography: the founder's own product photos, untouched, edge to edge in picks. No yellow tints, no bee over a brand's photo. Samples use the candle store with a Sample label. brand-directions/bee/brand.html b4
• Agent colours stay as small area tags only, never a page colour and never on Buzz. brand-directions/bee/system.md s1

Logo and wordmark slot

• The small mark sits left, the product name right, with cap height equal to Buzz's eyes. Clear space is one feeler length on every side. On yellow, the mark sits on a sun disc. brand-directions/bee/brand.html b4; brand-directions/book/content/f.js f-4
• Mark sizes drawn: 16, 24, 32, 48 and 96 pixels, on light and dark. brand-directions/bee/art.html a6

Tomorrow

• v1, Changes: the product switches from Inter and Caveat to Shrikhand and Parkinsans, loaded from https://fonts.googleapis.com/css2?family=Shrikhand&family=Parkinsans:wght@400..700&display=swap. Restyle only.
• v1, Changes: today's tokens are replaced by the bee kit skin tokens, dark first with a working light theme.
• v1, Stays: the brand's own photos carry the colour. Pollen yellow is for Buzz, the main button, focus and the active tab, never a card fill or text on light.
• v1, Stays: agent colours as small area tags only.
• v1, New: the wordmark slot replaces the old mark and the old name in every place a name goes. The favicon becomes bee/char-mark-16.svg.
• v1, Goes: Caveat hand notes in the product. Playpen Sans stays in books and marketing only.
• v2 to v4, Stays: the palette and type do not change as the product posts, measures and runs ads. New abilities arrive as Buzz props, never new colours.

How we do it

1. Use product tokens in the product and book tokens in books, site and marketing. Never mix.
2. Yellow never carries text on light. Use dark honey #7a5800 for links on light.
3. Below 120 pixels use char-mark.svg, below 20 use char-mark-16.svg.
4. On dark product screens set the charPlate disc behind Buzz.
5. Check every page at 400 pixels wide in dark and light, no sideways scroll.

--hero: #ffd60a; --heroInk: #17130a; --charPlate: #fff1b8;
--fontDisplay: "Shrikhand", Georgia, serif;
--fontBody: "Parkinsans", "Helvetica Neue", system-ui, sans-serif;

Numbers

Open

1. Does the product use Shrikhand on phone headers too, or only on big words? Proposal: big words only, such as the greeting and empty states; tab titles stay in Parkinsans.
2. Should the wordmark slot hold a placeholder name in mocks before the name is picked? Proposal: no, keep the dashed slot until the name is chosen.