---
id: "4.11"
title: "Visual identity, Ocho"
dept: brand
status: draft
owner: Param
branded: true
direction: octopus
last_verified: '2026-10-26'
sources:
  - "brand-directions/octopus/system.md s1, s4"
  - "brand-directions/octopus/brand.html b4"
  - "brand-directions/octopus/kit-skin.js tokens and motion"
  - "brand-directions/docs2/data/dirs.json, entry octopus, tokens and fonts"
  - "brand-directions/book/content/f.js:754-918 f-4"
  - "brand-directions/BRIEF.md section 2, agent colours, and section 3.8"
  - "brew origin/main a559de6: public/feed-system.css:10,31-33; public/index.html:1,6; public/assets listing"
  - "memory brand-directions-2026-10-25, font and clean branding rules"
---

# Visual identity, Ocho

## Answer

How Ocho's direction looks: one owned colour, hot pink #ff4fa3, on quiet dark or light product screens, DynaPuff and Archivo for type, the sucker print for illustration, and the founder's own photos carrying the colour, with a wordmark slot wherever the open product name goes.

## Today

### The live product today
| Part | What it is | |
|---|---|---|
| Look | Dark first, quiet, photographic: page background #0a0a0a, cards #1b1b1b | [src: brew/public/feed-system.css:10] |
| Body face | SF Pro Text, then Inter, then system fonts | [src: brew/public/feed-system.css:31] |
| Hand face | Caveat, for margin notes | [src: brew/public/feed-system.css:32; brew/public/index.html:6] |
| Mono face | SF Mono, then JetBrains Mono | [src: brew/public/feed-system.css:33] |
| Mark and favicon | brew-mark.svg, the old name's mark | [src: brew/public/index.html:1; brew/public/assets/brew-mark.svg] |
| Area colours | Five agent shapes and colours: teal #2bb39b, blue #4a90f0, orange #f28a3c, purple #9a6bf0, green #16a37f | [src: brand-directions/BRIEF.md section 2; brew/public/assets/agent-performance.svg] |
| Character | None in the product | [src: brand-directions/BRIEF.md section 3.8] |

Inter is on the team's list of faces that read as an AI default, so today's body face goes with any direction. [src: memory brand-directions-2026-10-25]

### Ocho's direction, as drawn
#### Palette
| Token | Value | Use | |
|---|---|---|---|
| Ocho pink | #ff4fa3 | Owned. Main button, focus, active tab, Ocho. Never a card fill | [src: brand-directions/octopus/system.md s1; brand-directions/octopus/brand.html b4] |
| Belly | #ffd1e6 | Belly and the offset print plate | [src: brand-directions/octopus/brand.html b4] |
| Ink | #1a1218 | Outline, text on pink | [src: brand-directions/octopus/system.md s1] |
| Deep pink | #c81d6f | Pink text on light pages | [src: brand-directions/octopus/brand.html b4] |
| Night sea | #0b1020 | Dark book and marketing page | [src: brand-directions/octopus/system.md s1] |
| Blush paper | #fff5f9 | Light book and marketing page | [src: brand-directions/octopus/system.md s1] |
| Draft paper | #fff8ef | Frames behind Ocho | [src: brand-directions/octopus/system.md s1] |
| Sticky note | #ffd84a | One per page at most, books only | [src: brand-directions/octopus/system.md s1] |

#### Product tokens, from the kit skin
| Token | Dark | Light | |
|---|---|---|---|
| bg | #101218 | #f7f6f5 | [src: brand-directions/octopus/kit-skin.js tokens] |
| surface | #181b22 | #ffffff | [src: brand-directions/octopus/kit-skin.js tokens] |
| surface2 | #21252e | #efedec | [src: brand-directions/octopus/kit-skin.js tokens] |
| ink | #f4f1f3 | #1a1218 | [src: brand-directions/octopus/kit-skin.js tokens] |
| muted | #a9adba | #5e5862 | [src: brand-directions/octopus/kit-skin.js tokens] |
| line | #2c303a | #e2dedc | [src: brand-directions/octopus/kit-skin.js tokens] |
| hero | #ff4fa3 | #ff4fa3 | [src: brand-directions/octopus/kit-skin.js tokens] |
| heroInk | #1a1218 | #1a1218 | [src: brand-directions/octopus/kit-skin.js tokens] |
| focus | #ff7dbb | #c8146e | [src: brand-directions/octopus/kit-skin.js tokens] |
| radius, radiusSm | 16px, 10px | 16px, 10px | [src: brand-directions/octopus/kit-skin.js tokens] |
| shadow | 0 8px 24px at 30 percent black | 0 8px 24px at 10 percent ink | [src: brand-directions/octopus/kit-skin.js tokens] |

The product set and the book set are never mixed. [src: brand-directions/octopus/system.md s1]

#### Contrast, worked out from the tokens on 26 October
| Pair | Ratio | Use | |
|---|---|---|---|
| Ink #1a1218 on pink #ff4fa3 | About 6.0 to 1 | Main button label | [src: computed from brand-directions/octopus/kit-skin.js tokens] |
| Pink #ff4fa3 on dark bg #101218 | About 6.2 to 1 | Pink on dark | [src: computed from brand-directions/octopus/kit-skin.js tokens] |
| White on pink | About 3.0 to 1 | Never for text | [src: computed from brand-directions/octopus/kit-skin.js tokens] |
| Focus #c8146e on light bg #f7f6f5 | About 5.1 to 1 | Links and focus on light | [src: computed from brand-directions/octopus/kit-skin.js tokens] |

The book listed Ocho's contrast as not measured, so these numbers are a first pass to confirm with a checker. [src: brand-directions/book/content/f.js:786]

#### Type
| Role | Face | Detail | |
|---|---|---|---|
| Display | DynaPuff, 600 to 700, width 75 to 100 | Soft and squashy, like a body with no bones. Headlines, numbers, speech bubbles | [src: brand-directions/octopus/system.md s1; brand-directions/octopus/brand.html b4] |
| Body and UI | Archivo, 400 to 700, width 62 to 125 | Crisp in dense lists at 14px, has the rupee sign. Every control | [src: brand-directions/octopus/system.md s1] |
| Hand | Mali 600 | The one sticky note per page, books only, never in the product, never on a button | [src: brand-directions/octopus/system.md s1; brand-directions/octopus/brand.html b4] |
| Scale | Display 50, 32, 23. Body 16, 14, 12. Prices in the body face | | [src: brand-directions/octopus/system.md s1] |
| Fonts link | Google Fonts, DynaPuff and Archivo | | [src: brand-directions/docs2/data/dirs.json octopus.fonts] |

#### Shapes, motifs and illustration
- The curl: dividers, loaders, the end of every arm. [src: brand-directions/octopus/brand.html b4]
- Sucker dots: progress, steps, the memory meter. [src: brand-directions/octopus/brand.html b4]
- The ink puff: only for oops, never alarm. [src: brand-directions/octopus/brand.html b4]
- Sticky notes and coffee rings: desk clutter, one per screen at most. [src: brand-directions/octopus/brand.html b4]
- The sucker print, the one illustration treatment: two inks on draft paper, the belly pink plate off register by 5 pixels right and 4 down, a halftone of sucker dots on an 11 pixel grid fading from one corner, one ink weight of 5 units in a 500 unit frame. No gloss, gradients or soft shadows. [src: brand-directions/octopus/brand.html b4; brand-directions/octopus/system.md s4]
- In the kit skin the print shows as a pink drop shadow at 4 by 3 pixels, 30 percent, on every pose but the corner mark. [src: brand-directions/octopus/kit-skin.js motion]

#### Layout
- Quiet product, loud corner: product screens stay dark and photographic, Ocho lives in a fixed corner and the empty states. [src: brand-directions/octopus/brand.html b4]
- Desk pages for marketing: paper cards with ink outlines, one sticky note, one coffee ring, bubbles in the background. [src: brand-directions/octopus/brand.html b4]
- Cards are rounded with the bottom left corner tighter, like a speech bubble pointing at Ocho. [src: brand-directions/octopus/brand.html b4]

#### Logo and wordmark slot
- The lockup is the small mark on the left and the product name on the right, cap height equal to the eyes. Clear space is one arm curl on every side. On pink grounds the icon sits on a blush circle. [src: brand-directions/octopus/brand.html b4]
- The small mark is shown at 24, 40 and 72 pixels for app icon, favicon and avatar. The 16 pixel cut is the head alone. [src: brand-directions/octopus/brand.html b4; brand-directions/octopus/system.md s4]
- The product name is open, so a dashed wordmark slot sits wherever it would go. [src: brand-directions/octopus/system.md s0 line 5]

#### Icons and photography
- One rounded line icon set, 2 pixel stroke, round ends, ink or white. No emoji, no glyphs. [src: brand-directions/octopus/brand.html b4]
- Area colours stay small chips as tags, never an icon fill, never a page colour, never on Ocho. [src: brand-directions/octopus/system.md s1; brand-directions/octopus/brand.html b4]
- The founder's own product photos, untouched, edge to edge in picks. No pink tints, no tentacle frames, Ocho never drawn over a brand's photo. Samples use the candle store. [src: brand-directions/octopus/brand.html b4]

#### Light and dark
- Dark is the default: night sea, white text, pink only for Ocho, primary buttons and the active tab. [src: brand-directions/octopus/brand.html b4]
- Light: blush paper, ink text, pink text becomes deep pink #c81d6f. Ocho never changes colour. [src: brand-directions/octopus/brand.html b4]

## Tomorrow

- v1 Changes: the product takes Ocho's kit skin tokens for dark and light, replacing today's neutral set. Restyle only.
- v1 Goes: Inter and Caveat leave the product. DynaPuff and Archivo replace them, and Mali never enters the product.
- v1 Changes: brew-mark.svg, the favicon and the home screen icon become Ocho's small mark beside the wordmark slot, then the chosen name.
- v1 Stays: the five area colours, only as small tags.
- v1 Stays: the founder's photos carry the colour and are never tinted.
- v1 New: the sucker print on every pose of 120 pixels and up, the plain small mark below that.
- v2 New: a clock and approve stamp join the prop set for posting and scheduling after a yes, drawn in the same six inks.
- v3 New: a scorecard and magnifier for How it went, drawn the same way.
- v4 Stays: no new colour, no new face, no second character.

## How we do it

1. Owned pink goes on the main button, focus, the active tab and Ocho. Nothing else, and never a card fill.
2. Take product values only from brand-directions/octopus/kit-skin.js. Take book and marketing values from system.md s1.
3. Check text pairs before any build with a contrast checker; white on pink is never text.
4. Load fonts from Google Fonts:
   ```
   https://fonts.googleapis.com/css2?family=DynaPuff:wdth,wght@75..100,400..700&family=Archivo:wdth,wght@62..125,400..800&display=swap
   ```
5. Below 120 pixels place char-mark.svg, at 16 pixels char-mark-16.svg. Never scale the full figure down.
6. Render every screen at 400 and 1280 pixels in dark and light, and confirm no sideways scroll and Ocho off every control.

## Numbers

| Metric | Definition | Where measured | Status |
|---|---|---|---|
| Text contrast | Every text pair at 4.5 to 1 or more | A contrast check over the kit skin tokens | Proposed; first pass on 26 October above |
| Owned colour discipline | Screens where pink appears on anything other than the main button, focus, active tab or Ocho | A screenshot audit of the 45 screens | Proposed |
| Untinted photos | Picks where a founder's photo has any overlay or tint | The same audit | Proposed, target zero |

## Open

1. Is hot pink the colour you want to own for years, given it reads playful in serious rooms? Proposal: yes inside the product and marketing, and turn Ocho down to the small mark in investor and partner decks.
2. Should Mali stay as the books' hand face, or should the product keep a hand face for margin notes like Caveat today? Proposal: keep Mali in books only and set margin notes in Archivo, as the system file says.
3. Who confirms contrast before the build? Proposal: Arvind runs one contrast check over the kit skin and logs the pairs here.