Mocha Trade
Brand Guidelines

Standard light and dark, slightly warm. Neutrals do the work so the product stays calm at speed.

Mocha is the one accent: one action, one selected state, one highlight. Scarcity is what keeps it legible.

Tokens stay locked. If every element shouts, none of them will be heard.

01Logo02Typography03Color
02 · Typography

Typography

Four faces, four jobs. Geist runs the product, including titles. Source Serif Pro is editorial pull. Geist Mono holds numbers. Geist Pixel, dotted, marks the system. The pairing works only while each face keeps its lane — the moment two share a job, hierarchy collapses.

02 · Typography

Faces

Weight, kerning, and leading are paired with the face — treat each card as one locked setting, not a menu. If a face feels wrong at its settings, the face is wrong for the job.

Source Serif Pro

RegularItalic

Use this typeface for editorial pull and display moments. Never for UI titles, body, or controls.

Letter spacing
−2%
Line height
102%
Weight
400

Geist

RegularMedium

Use this typeface for UI titles, body text, nav, buttons, and forms. The whole product runs on it.

Letter spacing
−2%
Line height
150%
Weights
400 / 500

Geist Mono

142.80 · #C4552D

Use this typeface for hex, prices, and timestamps. Tabular figures, so columns never wobble while numbers move.

Letter spacing
0%
Line height
130%
Features
tnum on

Geist Pixel

Open · AAPL · 02

Use this typeface for indexes, kickers, status, and tickers. Label size only — it marks the system, it never speaks for it.

Letter spacing
+6%
Case
uppercase
Dot shape
ELSH 20
02 · Typography

System

Same sample, four jobs. The scale is the hierarchy: when something needs more emphasis, change the level, not the face.

Headline

Brand Guidelines

Geist 500kerning −3%leading 100%
Body

Neutrals do the work. Mocha is the one accent.

Geist 400kerning −2%leading 150%
Data

142.80 · #C4552D

Geist Mono 400kerning 0%leading 130%
Label

Open · 02 Type

Geist Pixel dottedkerning +6%uppercase
02 · Typography

Do & don’t

Keep UI titles in Geist and prices in Mono — tabular figures keep columns steady while numbers move. Source Serif is for editorial moments, never controls. Pixel stays at label size. And never mix all four faces in one component; three voices in one card is already an argument.

Open · AAPLOrder filled100 × 142.80
Each face in its lane
Open · AAPLOrder filled100 × 142.80
Don’t swap the jobs
03 · Color

Color

Think rhythm, not rainbow. Gray ramp first, mocha once; status for forms, signals for charts. Values are locked — don’t interpolate new grays or invent a second accent. Restraint is the mechanism: the accent means something because it is rare.

03 · Color

Mocha

The one accent: a single action, a selected state, or a highlight, never the page fill. Mocha lite is the type that sits on mocha: posters, lockups, a button label. Same pair in both themes. Click to copy.

03 · Color

Dark · HEX, RGB

Product default. Near-black ground, near-white type, the same mocha. Click a field to copy the hex.

Core

Page, type, accent

Start here. Background is the canvas. Foreground is body and the default button. Mocha is the one action that isn’t neutral.

Ramp

Gray 0–100

Borders, muted type, hairlines, disabled states. Stay on the ramp instead of mixing a new gray: eight steps everyone shares beat a hundred grays nobody can name. Standard UI values, barely warm. Mocha is the accent, not the gray.

Surfaces

Layers and hover

Cards sit on Elevated. Hover is the lift. Muted is secondary type. Foreground hover is the text state over a control.

States

Controls and focus

Border at rest. Input is the field fill. Pressed is the down state. Selected and accent muted are thin mocha washes on the gray, not terracotta fills. Focus and accent hover are mocha. Disabled is ramp gray. Overlay is the modal scrim.

Status

Success, warning, danger, info

Forms, toasts, banners. Pair the solid with its muted well. Danger is validation and destructive, not P&L. Clay stays on the chart — if danger also meant loss, neither signal could be trusted.

Signals

Charts and tags only

Sky, tan, gold, sage, lime, clay, rose. The secondary set. Sage is profit, clay is loss. Never a primary button, never the brand: the moment a signal becomes a control, the chart loses its language.

03 · Color

Light · HEX, RGB

Near-white canvas, near-black type, the same accent. Light is a remap of the same roles — nothing new is invented on the way over.

Core

Page, type, accent

Start here. Background is the canvas. Foreground is body and the default button. Mocha is the one action that isn’t neutral.

Ramp

Gray 0–100

Borders, muted type, hairlines, disabled states. Stay on the ramp instead of mixing a new gray: eight steps everyone shares beat a hundred grays nobody can name. Standard UI values, barely warm. Mocha is the accent, not the gray.

Surfaces

Layers and hover

Cards sit on Elevated. Hover is the lift. Muted is secondary type. Foreground hover is the text state over a control.

States

Controls and focus

Border at rest. Input is the field fill. Pressed is the down state. Selected and accent muted are thin mocha washes on the gray, not terracotta fills. Focus and accent hover are mocha. Disabled is ramp gray. Overlay is the modal scrim.

Status

Success, warning, danger, info

Forms, toasts, banners. Pair the solid with its muted well. Danger is validation and destructive, not P&L. Clay stays on the chart — if danger also meant loss, neither signal could be trusted.

Signals

Charts and tags only

Sky, tan, gold, sage, lime, clay, rose. The secondary set. Sage is profit, clay is loss. Never a primary button, never the brand: the moment a signal becomes a control, the chart loses its language.

03 · Color

Misuse

Four ways the palette breaks. Each one looks fine in isolation; each one spends the accent’s scarcity or the chart’s vocabulary, and neither comes back cheap.

Confirm
Don’t fill the page with mocha
BuySell
Don’t make signals into buttons
Confirm
Don’t gradient the accent
ConfirmDetails
Don’t add a second accent
Copied