Brand Guidelines

• Achromatic interface. Black, white, and the surface tokens carry the UI. Blue is a spot color at roughly 7% of what you see.
• Two-surface system with token-flipping — never mix light and dark within one section.
• Geist Sans for everything readable; JetBrains Mono for code and chrome.
• Sans never goes bold — emphasis comes from size, not weight.
• One spot blue — #51a2ff on both surfaces. On dark, hover and active are #51a2ff too; only light mode darkens them.

FOR YOU — consumer, light. Off-white surfaces (#f6f6f6), generous space, the spot blue #51a2ff on marks and interactive state. Marketing, onboarding, the consumer product.

DEV — developer, dark. Warm near-black surfaces (#0f0f0f / #1e1e1e), tight chrome, the same spot blue #51a2ff which reads cleanly against the dark at 7.27:1. Docs, dashboards, code, the developer product.

Use the black logo on FOR YOU (light) surfaces and the white logo on DEV (dark) surfaces. The logomark (icon only) is for tight spaces; the full logo everywhere else.

Clear space: keep a margin of x on all sides, where x equals the width of the logomark. Never crowd it.

Build with neutrals. Surfaces are deliberately off-pure: background #f6f6f6 / #0f0f0f, card #ffffff / #1e1e1e, popover #fafafa / #2a2a2a, with hairline borders #eaeaea / #2c2c2c. Hierarchy comes from alpha on black or white, not from hue. Every primary CTA is a black fill on light or a white fill on dark. Every secondary is a white fill with a black/15 hairline, or its inverse.

Blue is a spot color, not a UI color. It does three named jobs: the eyebrow mark, the eyebrow label, and interactive state such as a focus ring, a checked control, or a selected row. It is not what you build interfaces with, and a section that feels plain is not a reason to reach for it. Plain is the house style.

There is one brand blue, #51a2ff, and it does not flip. It clears contrast on both surfaces, 7.27:1 on the dark page and legible as a fill on light, so a second hue was never needed. The retired dark value #0007cd was 1.75:1 and effectively invisible, which is the only reason the brand ever appeared to need two. --brand is a fill, and the only text allowed on it is --brand-on-brand. It is never a text color on light: #51a2ff there is 2.44:1 and fails.

When blue has to be read rather than seen, use --brand-ink (#0b6fd6 on light, 4.56:1). Links, focus rings and selected rows take ink. This is the token that did not exist before, which is why the old rule about using the brand for links was unfollowable.

Semantic colors (destructive, success, warning) mean what they say. Use them only for errors, confirmations, and cautions, never as a generic accent.

Note that --accent means something different in the product repos, where it is a neutral interaction surface (#f5f5f5 / #262626) used for hover. It carries no brand color. Do not reach for it expecting blue.

Geist Sans by Vercel is the primary typeface for headings, body, and UI. JetBrains Mono carries code, terminal text, badges, eyebrow labels, and version chips.

Sans never goes bold. Use weight 400 or 500 only — display and h1 are normal weight, and h2 is the only medium-weight heading. Emphasis comes from size, not weight.

Mono can be any weight. The eyebrow signature — mono, uppercase, wide tracking (text-mono-sm uppercase tracking-wider) — labels categories throughout the brand.

Page content sits within a 1240px max width; long-form columns at 720px, forms at 520px, single CTAs at 380px. Don't hardcode pixel widths — use the container tokens.

Elevation has one signature: a two-layer card shadow (shadow-elevated) for primary surface cards, with the standard shadow scale for ordinary lifts. Lead with whitespace and surface contrast before adding decoration.

• Clear over clever — say the thing plainly.
• Technical, not cold — precise, never jargon for its own sake.
• Confident, not loud — let size and space carry emphasis, the way the type system does.