Brand kit · v0.1

Product Brain

The visual identity system for the coherence layer. Zen instrument aesthetic — calm, precise, information-dense.

Click any color swatch or hex value on this page to copy it.

Logo marks

v0.1 · 6 variants

Each card previews the same file you download. "On light" uses a light well so the mark reads in its intended context.

Primary instrument

Production community header + `MarketingSiteHeader.svelte`. Matches `prototype/community-site/01-homepage.html`.

product-brain-mark-v0.1-primary.svg

SVG 16px 32px 48px 64px 128px 180px 512px

White core

Higher contrast on void backgrounds; same geometry as primary.

product-brain-mark-v0.1-white-core.svg

SVG 128px

On light

Docs / slides / email (see `docs/system/design/brand-voice.md` light context).

product-brain-mark-v0.1-on-light.svg

SVG 128px

Zen shell diamond

`prototype/community-site/css/shell.css` + many Cortex prototypes (rotated gradient square + inner cutout).

product-brain-mark-v0.1-diamond-shell.svg

SVG 128px

Core only

Minimal glyph — use only when the frame is redundant (e.g. dense favicon stack).

product-brain-mark-v0.1-core-only.svg

SVG 128px

Sharp frame

A/B: smaller radius reads more "instrument panel", less "app icon".

product-brain-mark-v0.1-square-sharp.svg

SVG 128px

Clear space

Keep the area around the mark free of type and competing graphics. Use ≥ cap height of "P" in "Product" as minimum padding when the wordmark is set in the same semibold stack.

Dashed region = keep clear · ticks = "P" cap-height padding (informal v0.1) · hover to highlight guides

Minimum digital size: prefer ≥24px frame for the bordered mark in UI; favicon uses 16px with the primary SVG — validate legibility on retina.

Wordmark & lockups

Outlined SVG wordmark not bundled in v0.1 — set type in design tools using the stacks below.

Display

Product Brain

Header

Product Brain

Body

Product Brain

Horizontal lockup

Product Brain

Vertical stack

Product Brain

Footer scale

Usage guidelines

Do

Use SVG masters from static/brand/
Keep zen-accent on dark; use on-light asset on light fields
Pair with Inter / IBM Plex Sans stacks already in product + community CSS
Reserve bright green for status, not the logomark

Don't

Stretch, rotate, or add drop-shadow / rainbow glow to the mark
Place the dark-field mark on busy photography without a calm plate
Substitute decorative "AI sparkles" or brain illustrations for the instrument mark
Recolor the core to random accent hues without a governance decision

Typography

Three font families serve distinct roles: Inter for UI and marketing, JetBrains Mono for instruments and data, Source Serif 4 for editorial long-form.

Display / hero Inter · Community home h1

Product Brain

Section heading Inter · Major section titles

Coherence layer for agentic teams

Header / nav Inter · Site header

Strategy. Roadmap. Execution.

Body Inter · Supporting copy

The thinking layer that turns fragmented product decisions into a living, connected system your whole team can navigate.

Instruments JetBrains Mono · Labels, metrics, CLI chrome

WP-130 · confidence: 0.82 · 3 slices shipped

Editorial Source Serif 4 · Blog, long-form, pull quotes

Every decision has a reason. Every tension has an owner.

Token palette

The zen instrument palette. Surfaces build depth through layering, not color. Accent recedes; signal colors carry meaning.

Surfaces

Text

Accent & signals

≠

Terminal green is for status signals only — not the brand core. The logomark stays on zen-accent unless a future DEC locks otherwise.

Downloads

SVG masters live in static/brand/. PNGs generated via npm run brand:png (Sharp).

Mark	SVG	PNG
Primary instrument	Download	16w 32w 48w 64w 128w 180w 512w
White core	Download	128w
On light	Download	128w
Zen shell diamond	Download	128w
Core only	Download	128w
Sharp frame	Download	128w

Favicon & app icons

Tab icon: SVG primary mark. PNG fallbacks and apple-touch-icon from generated rasters.

180 (touch)

SVG favicon PNG 32 PNG 512

Layout foundations

Spacing, radius, and elevation tokens from tokens.css. Values shown are the production scale.

Spacing scale

1 (xs)

4px

2 (sm)

8px

12px

4 (md)

16px

6 (lg)

24px

8 (xl)

32px

48px

16 (2xl)

64px

Border radius

4px

--radius-sm

7px

--radius-md

10px

--radius-lg

12px

--radius-xl

2xl

16px

tailwind

full

9999px

tailwind

Elevation

0 1px 3px rgba(0,0,0,0.06)

Subtle lift — buttons, pills

0 4px 12px rgba(0,0,0,0.08)

Cards, dropdowns

0 8px 24px rgba(0,0,0,0.1)

Modals, elevated panels

What this kit contains

Identity & logo

Primary lockup (icon + wordmark) and icon-only mark
Approved color treatments (default, inverse, on-light)
Minimum size and legibility at favicon scale
Clear space proportional to cap height (see brand voice)

Color & typography

Core palette tied to design tokens (surfaces, text, accent)
Type stack for marketing vs product UI
Semantic / signal colors (status, success) — not interchangeable with logomark colors

Usage & governance

Do / don’t examples (distortion, busy backgrounds, off-palette glow)
File formats: SVG master; raster exports derived for legacy contexts
Version label (e.g. v0.1) until a Chain decision locks the mark