The Payload Components brand
Two layers, one light page. The site is drawn like a datasheet — Archivo, Azeret Mono, and one trace green. The blocks it shows keep their own component tokens — Geist and emerald — because that is what installs. Everything here is a living reference for the tokens that ship in the codebase.
Identity
The mark and wordmark
The logo is two blocks keyed together in an emerald square, set beside the wordmark in Archivo. It reads as what the CLI does — separate blocks fitted into one page, wired rather than pasted.
The full lockup: the two-block mark, the wordmark, and the MIT badge. The blocks overlap by a quarter of their width — enough that the join survives a 16px browser tab.
Usage
- Keep the mark emerald (
--mark) on a light surface; never recolor or gradient it. It is two blocks, so it keeps the blocks' green wherever it sits. - One green per layer: trace for the site, emerald for the blocks. Never a third.
- The wordmark is set in Archivo at weight 650, at text width.
Color
Monochrome, with one green per layer
A neutral shadcn scale carries the interface. The site draws its accents in trace green — traces, pads, links, the primary action. The blocks keep emerald, the green they install with, and every preview shows it. 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
Trace · the site chrome
--trace
bg-trace
--trace-600
bg-trace-600
--trace-200
bg-trace-200
--trace-100
bg-trace-100
--wire
bg-wire
Emerald · the component tokens
--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
Archivo for the site, Geist for the blocks
Archivo sets the site, display and text alike: the headings run condensed through its width axis, so both are one file. Azeret Mono carries commands, part numbers, and labels. The blocks keep Geist Sans, Geist Mono, and an Instrument Serif italic accent — previews render them as they install.
Archivo, condensed · --font-display
Install Payload blocks wired, not pasted.
Azeret Mono · --font-spec
npx payload-components add hero-basic
Blocks · Geist Sans · --font-sans
Ship customer dashboards
Blocks · Instrument Serif · --font-serif
The one warm note
Blocks · Geist Mono · --font-mono
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, on the component tokens the blocks use.
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.