---
id: "4.11"
title: "Visual identity, Seeti"
dept: brand
status: draft
owner: Param
branded: true
direction: cooker
last_verified: '2026-10-26'
sources:
  - "brew origin/main a559de6: public/feed-system.css:1-33, 188-193; public/index.html:6; public/assets/brew-mark.svg; server.js:948"
  - "brand-directions/cooker/system.md section 2"
  - "brand-directions/cooker/brand.html b4"
  - "brand-directions/cooker/kit-skin.js tokens and fonts"
  - "brand-directions/docs2/data/dirs.json cooker tokens"
  - "brand-directions/cooker/character.html c2, c8"
  - "brand-directions/book/content/f.js:754-918 section f-4"
  - "brand-directions/BRIEF.md section 2, agent colours"
  - "memory brand-directions-2026-10-25, fonts rule"
---

# Visual identity, Seeti

## Answer

Seeti's look is steel, chilli and ink on a dark stove top or a cream kitchen tile, with chilli red as the only loud colour and the brand's own product photos bringing every other colour; this settles the tokens, type, shapes and the wordmark slot.

## Today

### The live product

| Part | Today in the build |
|---|---|
| Look | Dark by default, light follows the OS, one 500 pixel feed column [src: brew/public/feed-system.css:1-4] |
| Dark tokens | bg #0a0a0a, card #1b1b1b, surface #232323, fg #fafafa [src: brew/public/feed-system.css:10-12] |
| Light tokens | bg #f6f6f6, card #ffffff, fg #0a0a0a [src: brew/public/feed-system.css:44-46] |
| Brand colour in chrome | Only a brand wash set per tenant from the brand's own pack [src: brew/public/feed-system.css:28] |
| Body type | SF Pro Text, then Inter [src: brew/public/feed-system.css:31] |
| Hand type | Caveat, for margin notes [src: brew/public/feed-system.css:32; brew/public/index.html:6] |
| Mono | SF Mono, JetBrains Mono [src: brew/public/feed-system.css:33] |
| Area colours | Creative teal #2bb39b, performance blue #4a90f0, storefront orange #f28a3c, visibility purple #9a6bf0, CRM green #16a37f, as small faces [src: brew/public/feed-system.css:188-193] |
| Mark | A white mark on a near black rounded square, used as the favicon [src: brew/public/assets/brew-mark.svg; brew/server.js:948] |
| Character | None in the product [src: brand-directions/BRIEF.md section 2] |

- Inter is on the owner's list of fonts that give AI work away, so it goes tomorrow. [src: memory brand-directions-2026-10-25]

### Seeti's direction files

| Part | What exists |
|---|---|
| Product skin tokens | kit-skin.js, calm neutrals with chilli for the main button, focus and Seeti only [src: brand-directions/cooker/kit-skin.js:1-3] |
| Book skin tokens | system.md section 2 and brand.html b4, warmer stove top and kitchen tile [src: brand-directions/cooker/system.md section 2] |
| Fonts loaded | Bakbak One and Anek Latin from Google Fonts [src: brand-directions/cooker/kit-skin.js fonts] |
| Screens | 108 kit screenshots, dark and light, in cooker/kit [src: brand-directions/cooker/kit listing] |

The two token sets disagree on neutrals: the product skin dark bg is #141416, the book's stove top is #121214. The product skin is what screens use. [src: brand-directions/cooker/kit-skin.js tokens.dark; brand-directions/cooker/system.md section 2]

## Tomorrow

### Colour

| Token | Value | Use | Tag |
|---|---|---|---|
| Chilli | #ff3d2e | Owned. Whistle, grips, blush, main button, focus | v1, New |
| Chilli deep | #c8261a | Links and stamps on light, light focus | v1, New |
| Steel | #c9ced6 | Seeti's body, quiet chrome | v1, New |
| Steel dark | #8d949f | Shading, brows | v1, New |
| Ink | #15161a | Outlines, text on chilli | v1, New |
| Ticket paper | #f6efe2 | Order tickets only | v1, New |
| Flame | #2f5bd8 | The gas flame under Seeti only, never UI | v1, New |

Product tokens, from the skin every screen uses:

| Token | Light | Dark |
|---|---|---|
| bg | `#f7f5f1` | `#141416` |
| surface | `#ffffff` | `#1c1d21` |
| surface2 | `#efece6` | `#26272c` |
| ink | `#15161a` | `#f3f1ec` |
| muted | `#5a5d64` | `#a5a8b0` |
| line | `#e2ddd3` | `#303239` |
| hero | `#ff3d2e` | `#ff3d2e` |
| heroInk | `#15161a` | `#15161a` |
| focus | `#c8261a` | `#ff6a5e` |
| radius, radiusSm | 16px, 10px | 16px, 10px |

- v1, Changes: today's neutral black and white tokens give way to these. Restyle only, no logic change.
- v1, New: chilli covers under ten percent of any screen. About 70 percent stove or tile, 20 percent steel and surfaces. [src: brand-directions/cooker/brand.html b4]
- v1, New: ink on chilli for text, 5.4 to 1. Never white on chilli. [src: brand-directions/cooker/brand.html b4]
- v1, Stays: the five area colours stay as small chips only. Chilli never touches an area tag. [src: brand-directions/cooker/system.md section 2]
- v1, Stays: the brand wash from the partner's own pack stays the only brand colour in chrome around their work. The partner's photos carry the colour.

### Type

| Role | Face | Use | Tag |
|---|---|---|---|
| Display | Bakbak One, one weight | Headlines, Seeti's big lines, numbers. Drawn in India for Latin and Devanagari. Font synthesis off | v1, New |
| Body | Anek Latin, 400 to 700, width 75 to 125 | Every control, card and paragraph. Has the rupee sign | v1, New |
| Ticket | Fragment Mono, one weight | Order tickets, counts, timers. Nowhere else | v1, New |
| Hand | Caveat | Goes with Inter; margin notes take Anek Latin or a hand face picked for Seeti | v1, Goes |

- Scale: display 50, 32, 23. Body 16, 14, 12. Ticket 13. Prices in the body face. [src: brand-directions/cooker/system.md section 2]
- v1, Changes: Fragment Mono is in system.md but not in the kit-skin font link. Add it when the ticket ships.

### Shapes, layout and motifs

- v1, New: whistle pills, three red rounded bars, the only progress mark. Three pills means ready. [src: brand-directions/cooker/brand.html b4]
- v1, New: a torn ticket edge, only on things that get handed off. [src: brand-directions/cooker/system.md section 2]
- v1, New: steam puffs, three flat circles with an ink outline, for emotion and loading. Never soft gradient blobs. [src: brand-directions/cooker/review.md Major 3]
- v1, New: cards are a lid in a rim: 14 to 20 px radius, 1.5 to 2 px borders, offset ink shadows on hero items only. [src: brand-directions/cooker/system.md section 2]
- v1, New: a kitchen tile grid of 44 pixel squares at 2 to 4 percent ink behind everything. One hero per screen: Seeti, a big number or a ticket, never all three. One column on phones. [src: brand-directions/cooker/brand.html b4]

### Illustration and photography

- v1, New: Seeti is flat 2D, one ink outline weight, four inks, no shine, no shadow, no real fire. [src: brand-directions/cooker/character.html c2, c8]
- v1, Stays: the brand's own product photos are the hero and bring every colour. Seeti never sits over them. [src: brand-directions/cooker/system.md section 5]
- v1, New: invented examples use the sample candle store, with a visible Sample label. [src: brand-directions/cooker/system.md section 8]

### Logo and wordmark slot

- v1, New: a dashed wordmark slot wherever the product name goes, until the name is chosen. [src: brand-directions/cooker/system.md section 1]
- v1, New: lockup is Seeti's head at the cap height of the wordmark, a gap of one whistle width. On chilli, ink wordmark only, never white. Chilli is the app icon ground. [src: brand-directions/cooker/brand.html b4]
- v1, Goes: today's mark in public/assets/brew-mark.svg is replaced by the small mark, svg/icon.svg, once the name is set.
- v2 to v4, Stays: the identity does not change as the product grows. New abilities arrive as props.

## How we do it

1. Every colour is a token. Use the kit-skin.js values for product screens and system.md values for books and marketing until one set is chosen.
2. Before a screen ships, check chilli is under ten percent of the area, text on chilli is ink, and the partner's photos are untouched.
3. Check type: no Inter, no system fallback showing, Bakbak One never synthesised bold.
4. Check both themes and 400 pixels wide with no sideways scroll.
5. Run the direction checker:

```
cd /Users/param/Documents/ChatGPT/brand-directions && node _tools/check.mjs cooker
```

## Numbers

| Metric | Definition | Where measured | Status |
|---|---|---|---|
| Chilli share | Share of screen pixels in chilli, target under 10 percent | Screenshot audit of the 45 kit screens | Proposed |
| Contrast pass | Text pairs at or above 4.5 to 1, ink on chilli measured at 5.4 to 1 | Kit screens, both themes | Proposed |
| Font giveaways | Count of screens rendering Inter or a system fallback, target zero | Headless audit of the product | Proposed |

## Open

1. Which neutral set wins, the product skin or the warmer book skin? Proposal: the product skin from kit-skin.js, with the book's ticket paper and flame kept as accents.
2. Keep Fragment Mono for tickets, or use Anek Latin narrow? Proposal: keep Fragment Mono, only on tickets and counts.
3. Does the kitchen tile grid belong in the product or only in books and marketing? Proposal: books and marketing only, so the product stays quiet.