---
id: "4.11"
title: "Visual identity, Buzz"
dept: brand
status: draft
owner: Param
branded: true
direction: bee
last_verified: '2026-10-26'
sources:
  - brand-directions/bee/system.md s1, s4
  - brand-directions/bee/brand.html b4
  - brand-directions/bee/art.html a6, a7, a8
  - brand-directions/bee/kit-skin.js tokens
  - brand-directions/docs2/data/dirs.json, entry bee
  - brand-directions/book/content/f.js f-4
  - brand-directions/BRIEF.md section 2, agent colours
  - brew origin/main public/index.html line 6, public/feed-system.css line 31, public/assets/brew-mark.svg, server.js line 948
  - memory brand-directions-2026-10-25
---

# 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. [src: brand-directions/BRIEF.md section 2]
- The product loads Inter for text and Caveat for hand notes from Google Fonts. [src: brew/public/index.html:6]
- The text stack is SF Pro Text, then Inter, then system faces. [src: brew/public/feed-system.css:31]
- The tab icon and the brand book page icon are the old mark, `assets/brew-mark.svg`. [src: 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. [src: 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. [src: memory brand-directions-2026-10-25]

### Buzz's palette

| Token | Value | Use |
|---|---|---|
| Pollen yellow | #ffd60a | Owned. Buzz, the main button, focus, the active tab [src: brand-directions/bee/brand.html b4] |
| Bee ink | #17130a | Stripes, outline, text on yellow [src: brand-directions/bee/system.md s1] |
| Honey | #e9a90c | The print plate [src: brand-directions/bee/system.md s1] |
| Wing | #fff6d6 | Wings [src: brand-directions/bee/system.md s1] |
| Comb paper | #fffaea | Light page in books and marketing [src: brand-directions/bee/brand.html b4] |
| Night hive | #14110a | Dark page in books and marketing [src: brand-directions/bee/brand.html b4] |
| Dark honey | #7a5800 | Links on light [src: brand-directions/bee/brand.html b4] |
| Sun disc | #fff1b8 | Behind Buzz on dark product screens [src: brand-directions/bee/kit-skin.js charPlate] |

### Product tokens, the screen kit

| Token | Dark | Light |
|---|---|---|
| bg | #121110 | #f8f7f3 [src: brand-directions/bee/kit-skin.js tokens] |
| surface | #1a1916 | #ffffff [src: brand-directions/bee/kit-skin.js tokens] |
| surface2 | #24221d | #efede6 [src: brand-directions/bee/kit-skin.js tokens] |
| ink | #f6f3ea | #17130a [src: brand-directions/bee/kit-skin.js tokens] |
| muted | #aca796 | #5f5a4b [src: brand-directions/bee/kit-skin.js tokens] |
| line | #2e2c25 | #e3e0d6 [src: brand-directions/bee/kit-skin.js tokens] |
| hero | #ffd60a | #ffd60a [src: brand-directions/bee/kit-skin.js tokens] |
| heroInk | #17130a | #17130a [src: brand-directions/bee/kit-skin.js tokens] |
| focus | #ffe14d | #8a6a00 [src: brand-directions/bee/kit-skin.js tokens] |
| radius, radiusSm | 18px, 10px | 18px, 10px [src: brand-directions/bee/kit-skin.js tokens] |
| shadow | 0 8px 24px at 32 percent black | 0 8px 24px at 10 percent ink [src: brand-directions/bee/kit-skin.js tokens] |
| charPlate | #fff1b8 | none [src: brand-directions/bee/kit-skin.js tokens] |

- 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. [src: brand-directions/bee/system.md s1]

### Contrast

| Pair | Contrast | Use |
|---|---|---|
| Bee ink on pollen yellow | About 13 to 1 | The main button, the hero chip [src: brand-directions/bee/brand.html b4] |
| Pollen yellow on night hive | About 13 to 1 | Links and accents on dark [src: brand-directions/bee/brand.html b4] |
| Dark honey on comb paper | About 6 to 1 | Links on light [src: brand-directions/bee/brand.html b4] |
| Pollen yellow on comb paper | Under 2 to 1 | Never text. Fills only, with an ink edge [src: brand-directions/bee/brand.html b4] |

### Type

| Role | Face | Rule |
|---|---|---|
| Display | Shrikhand, one weight | Headlines and big words only. Font synthesis off, never a fake bold [src: brand-directions/bee/system.md s1] |
| Body and UI | Parkinsans 400 to 700 | Every control and every word you read. Has the rupee sign [src: brand-directions/bee/system.md s1] |
| Hand | Playpen Sans 400 to 700 | Buzz's notes in books and marketing. Never in the product [src: brand-directions/bee/system.md s1] |
| Scale | Display 50, 32, 23. Body 16, 14, 12 | Prices in the body face [src: brand-directions/bee/system.md s1] |

### 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. [src: 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. [src: 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. [src: brand-directions/bee/brand.html b4]
- One honey jar and one trail per page, hex cells only as texture or grids. [src: brand-directions/bee/brand.html b3]
- Icons: one rounded line set, 2 pixel stroke, round ends, ink or warm white. No emoji. [src: 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. [src: brand-directions/bee/brand.html b4]
- Agent colours stay as small area tags only, never a page colour and never on Buzz. [src: 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. [src: 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. [src: 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.

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

## Numbers

| Metric | Definition | Where measured | Status |
|---|---|---|---|
| Text contrast | Lowest contrast of any text pair on a skinned screen, target at least 4.5 to 1 | Screen kit audit at screens.html, both themes | Proposed |
| Off palette colours | Count of colours on a Buzz frame outside the five inks | Rig palette constants in bee/_src/rig/buzz.py | Proposed, target zero |
| Old mark left | Count of places still loading brew-mark.svg | `git grep brew-mark` on brew origin/main | Proposed |

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