The Payload Components brand
A light-first, shadcn-monochrome system with exactly one accent: emerald. Geist does the work; an italic serif carries the single warm note. Everything here is a living reference for the tokens that ship in the codebase.
Identity
The mark and wordmark
The logo is a monospace prompt glyph in an emerald square, set beside the wordmark in Geist. It reads as a terminal — the place the CLI lives.
The full lockup: the > prompt mark, the wordmark, and the MIT badge.
Usage
- Keep the mark emerald (
--brand) on a light surface; never recolor or gradient it. - Emerald is the only accent — don't introduce a second brand color.
- The wordmark stays in Geist at its semibold tracking-tight weight.
Color
Monochrome, with one emerald accent
A neutral shadcn scale carries the interface. Emerald and its tints appear sparingly — slugs, checks, active dots, the hero bloom. The terminal product-frame keeps its own dark surface regardless of page theme.
Base & monochrome
--background
bg-background
--foreground
bg-foreground
--primary
bg-primary
--secondary
bg-secondary
--muted
bg-muted
--border
bg-border
Emerald accent & tints
--brand
bg-brand
--brand-600
bg-brand-600
--brand-200
bg-brand-200
--brand-100
bg-brand-100
--brand-50
bg-brand-50
Status
--destructive
bg-destructive
--success
bg-success
Terminal surfaces
--terminal
bg-terminal
--terminal-chrome
bg-terminal-chrome
Typography
Geist, with an italic serif accent
Geist Sans is the workhorse for headings and body; Geist Mono carries commands, tokens, and eyebrows. Instrument Serif italic is the single warm note — one accent word per heading, never a paragraph.
Geist Sans · --font-sans
Install Payload blocks wired, not pasted.
Instrument Serif italic · --font-serif
The one warm typographic note
Geist Mono · --font-mono
npx payload-components add hero-basic
Tokens
Tracking, radius, and shadow scales
Named utilities replace one-off arbitraries across the blocks. The samples here are rendered by the live tokens in globals.css.
Letter-spacing
- Wired, not pasted--tracking-display · tracking-display
- Install Payload blocks--tracking-title · tracking-title
- One reviewable git diff--tracking-snug · tracking-snug
- From catalog to commit--tracking-heading · tracking-heading
- Read the contract first--tracking-micro · tracking-micro
- THE GRUNT-WORK TAX--tracking-eyebrow · tracking-eyebrow
Radius
- --radius · rounded-lg
- --radius-inset · rounded-inset
- --radius-card · rounded-card
- --radius-panel · rounded-panel
- --radius-frame · rounded-frame
Shadow
Voice
Plain, honest, receipts over claims
Payload Components is community-first and MIT-licensed end to end. The copy reflects that: no marketing fluff, no fabricated quotes, no roadmap theater. Every claim is something you can verify in the repository.
Write like the docs — direct, specific, and technical without being cold. Show the receipts: link to the source, the manifest, the test, the diff. When something is in development, say so plainly rather than dressing it up.
The product earns trust by letting you read it — the brand should too.