Chapter 05

The brand, at work

A brand is what ships. These are the standing rules for every surface we produce — the website, the product, social feeds, inboxes, and slide decks.

Website

Show the product, don't describe it

Marketing pages are light: white surfaces, hairline borders, one gradient phrase per headline. Every hero leads with a product mockup — a believable screen with real-looking data — because a mockup outsells a paragraph every time.

The page rhythm is the home page's rhythm: light hero → stat strip → proof sections → exactly one dark "replaces your stack" band → FAQ → CTA. Legal and documentation pages may run dark; anything meant to sell stays light.

app.bo.ge/workspace/crm
Deals — Q3 pipeline
14 open · $182,400 weighted
DealStageValue
Acme renewalProposal$48,000
Nordwind onboardingNegotiation$36,500
Delta logisticsQualified$21,900
Product UI

Calm chrome, loud data

The app is set in Inter on quiet neutral surfaces, in both light and dark themes. Brand color appears in the logo, primary actions, and focus states — the user's data provides the rest of the color through status tokens.

Neutral by default

Whites, grays, and hairlines. A screen someone stares at for eight hours must not compete with its own content.

Status is systematic

Success #10B981 · Info #3B82F6 · Warning #F59E0B · Error #EF4444. The same four tokens everywhere; no ad-hoc greens or reds.

Both themes, first-class

Light and dark ship together. Marketing screenshots default to the light theme unless the surface itself is dark (social, video).

Social

Two post templates, no third

Every post is either a Night card (statement + numbers) or a light product card (screenshot + one line). Mark top-left, mono URL bottom, one gradient phrase — that's the whole system.

BackOffice
Your stack: $125/user.
BackOffice: $29.
backoffice.llc Start free →

Night card — a statement with a number, on #0B0D12 with the corner glows. For claims, launches, and pricing math.

BackOffice
Kanban — Support queue
backoffice.llc New: SLA timers ↗

Product card — a real screenshot in a browser frame with one caption line. For features, tips, and release notes.

FormatSizeNotes
Link / OG card1200 × 630The canonical share card ships with the site; per-campaign cards follow the Night template.
Feed post1080 × 1080Same two templates, square crop; headline ≤ 8 words.
Story / Reel cover1080 × 1920Night template only; mark centered top, URL bottom-center.
Email & decks

Quieter surfaces, same rules

Email

Single column, 600px, white background, Ink text. One gradient primary button per email; secondary links are plain Teal text. The lockup sits top-left at 20px; the footer carries the tagline and legal links in Muted. Product emails read like a helpful colleague — short paragraphs, no hero banners, no confetti.

Presentations

Title and section-divider slides use the Night background with the white lockup and one gradient phrase. Content slides are white with Ink text, one idea per slide, data in JetBrains Mono. Charts use Teal as the primary series and neutrals for the rest — never a rainbow.

Documents & PDFs: proposals, invoices, and one-pagers follow the content-slide rules — white, Ink, hairline tables, mark top-left, mono numbers. When webfonts aren't available, use the system fallback stack; never substitute another display face.