Part II · Chapter 4 of 7

Colophon

Palette, typography, and the components we use. The visual vocabulary the brand is rendered in.

6 min read

Palette

The colors. Source of truth lives in src/styles/global.css as @theme tokens. Source files reference them via var(--color-brand-X); the tests/brand-palette.test.ts guardrail fails CI if a raw hex sneaks past the central file. One file = full rebrand.

Greens — the brand action color

#1B6B45

--color-brand-green

Primary action color. Buttons, links, CTAs.

#155538

--color-brand-green-dark

Hover state for primary buttons.

#E8F5EE

--color-brand-green-light

Backgrounds for green-accented surfaces (hero pills, tags).

#2D5016

--color-brand-forest

Darker secondary green. Section labels, internal-doc CTAs.

#7CB518

--color-brand-lime

Bright accent green. Eyebrows and stats on handbook pages.

Warms — yellows and gold

#FFE234

--color-brand-yellow

Homepage primary yellow. Hero, prominent badges.

#F5D800

--color-brand-yellow-dark

Hover for yellow buttons. Shadow base for stacked CTAs.

#F5C518

--color-brand-gold

Warmer gold accent. Pull quotes, sub-quote borders.

#FFF9E0

--color-brand-cream-warm

Warmer cream card surfaces.

Neutrals — the cream surfaces

#F7F6F1

--color-brand-cream

Default page surface. Off-white, slightly warm.

#EFEDE5

--color-brand-cream-dark

Subtle hover/pressed surfaces.

#FAFAF7

--color-brand-paper

Cleaner off-white. Long-form reading surface.

Depth — navy and accent

#0D1B2A

--color-brand-navy

Deep dark. Hero blocks, dark-mode callouts, Covenant.

#1a2d42

--color-brand-navy-soft

Lighter navy. Nested cards inside dark sections.

#E8533A

--color-brand-coral

Warm red. Voice anti-pattern cards, error accents.

Ink — text colors

#1A1A1A

--color-brand-ink

Primary headings, body emphasis.

#4B5563

--color-brand-text

Default body copy.

#6B7280

--color-brand-muted

Secondary text, captions, helper copy.

#9CA3AF

--color-brand-subtle

Tertiary text, advertisement labels.

Typography

Three families, each with one job. Loaded once from Google Fonts via font-display: optional so render isn't blocked. No swap-in flash, no layout shift.

Display · Plus Jakarta Sans

There is a solution for everything.

Weights 400 / 500 / 600 / 700 / 800 · Used for h1, h2, hero text, chapter titles, button labels.

Body · Inter

Premium quality, for everyone. Inter is the body voice — quiet, neutral, present. Reads as long-form copy at 1rem and as captions at 0.85rem without complaint. Weights 400, 500, 600.

Weights 400 / 500 / 600 · Used for body copy, captions, button text where Plus Jakarta is too loud.

Mono · JetBrains Mono

SECTION · 01 · §07 · TOOLS · MEMBERS

Weights 600 / 700 · Used for eyebrow labels, section numbers, prices, codes, keyboard shortcuts.

Components

The visual primitives that appear across the site. Each one earns its place — no decorative components, no "we might need this" abstractions.

Primary button

Green pill, white text, no border. The default call-to-action.

Ghost button

Outline only. Secondary actions, cancellations, "Maybe later."

Badge

The membership badge and its siblings. Yellow surface, ink border, monospace text, 3-pixel hard shadow. Sticker energy.

Microapp Member Become a Member

Eyebrow label

JetBrains Mono, 0.7rem, 0.12em letter-spacing, uppercase, green. Sits above section titles to give them a context line.

SECTION · 03 — Voice rules

Card

White surface, 2px ink border, 3-pixel yellow hard shadow, 0.85rem radius. Used for grouped content (account stats, voice rule rows).

PROFILE

Display name

Saved to user_metadata.full_name. Refreshes the nav avatar initials when changed.

Where to find it in code

Palette tokens: src/styles/global.css under @theme. Type rules: same file, font definitions and utility classes. Components: per-page styles for now; some (badges, buttons) repeat enough that a future PR could promote them to shared src/styles/components.css.

The palette guardrail is real: tests/brand-palette.test.ts fails CI if you write a brand-palette hex outside global.css. Use var(--color-brand-X) always; add new tokens to @theme first, then reference them.