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

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

Ocho's direction, as drawn

Palette

Product tokens, from the kit skin

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

Contrast, worked out from the tokens on 26 October

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

Type

Shapes, motifs and illustration

• The curl: dividers, loaders, the end of every arm. brand-directions/octopus/brand.html b4
• Sucker dots: progress, steps, the memory meter. brand-directions/octopus/brand.html b4
• The ink puff: only for oops, never alarm. brand-directions/octopus/brand.html b4
• Sticky notes and coffee rings: desk clutter, one per screen at most. 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. 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. 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. 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. brand-directions/octopus/brand.html b4
• Cards are rounded with the bottom left corner tighter, like a speech bubble pointing at Ocho. 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. 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. 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. 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. brand-directions/octopus/brand.html b4
• Area colours stay small chips as tags, never an icon fill, never a page colour, never on Ocho. 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. 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. brand-directions/octopus/brand.html b4
• Light: blush paper, ink text, pink text becomes deep pink #c81d6f. Ocho never changes colour. 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

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.