Pure black and strictly square, drawn like a wireframe. The layout is a visible grid of rgba(255,255,255,.13) hairline rails, and the hero is assembled from stacked full-width CELLS rather than a headline plus buttons — the install command sits in a 68px mono row and Get a Demo in a 72px row beneath it, so the calls to action are grid cells you click. There is effectively no radius scale, only five radii in the whole document and none of them structural, and separation is never a drop shadow: depth steps through the elevation COLOURS #000000, #070707, #141414, #222222, which is literally what the published --theme-elevation-* tokens name, that set being the --color-base-* ramp reversed for dark mode. One family, Untitled Sans, capped at weight 500, with tracking applied mechanically at -5% of font size on every display role — 64/64 at -3.2px, 48/48 at -2.4px, 24/28.8 at -1.2px — and normal below 16px. The chrome carries no accent colour at all: emphasis is inversion to white, blue #001923 appears only as the announcement banner, and the full published hue ramps wait in reserve as matched bg/border/text triples for status. Motion is an expo-out cubic-bezier(.165,.84,.44,1).
Browse Payload in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: payloadcms.com (live DOM, computed styles + the published--color-base-*/--theme-*token set), 2026-07-21. Coverage: banner, nav, hero grid, CTA cells, colour/type/radius/shadow/motion census across the document. Admin panel not captured (needs login). Responsive: breakpoint tokens exist but resolve to unsubstituted SCSS variables; actual behaviour not captured.
Pure black, and square. The whole page is drawn as a visible grid of rgba(255,255,255,.13) hairline rails, and the hero is assembled from stacked full-width *cells* rather than from a headline plus buttons — the install command and "Get a Demo" are grid rows, 68px and 72px tall, that you click. There is essentially no border-radius in the system (five radii across the entire document, none of them structural), no accent hue in the chrome, and no shadow doing separation work: everything reads as a wireframe drawn in white on black. Type is one family, Untitled Sans, held at weight 500 with a consistent -5% tracking at every display size. Colour exists only as a published, fully-laddered token system waiting to be used by status states.
Feels: architectural, precise, engineered, quiet.
The site ships a complete token system: a neutral --color-base-0…1000 ramp in 5% steps, hue ramps for blue / purple / error / success / warning, semantic -bg/-border/-text pairs in light and dark variants, and a --theme-* set that is the base ramp reversed for the dark theme — so --theme-elevation-0 is #000000 and --theme-elevation-1000 is #ffffff. "Elevation" here is a *colour step*, not a shadow.
Text
| Token | Hex | Role / usage |
|---|---|---|
--theme-elevation-1000 | #ffffff | All headings, body, nav, CTA labels |
--text-dark | rgba(255,255,255,.50) | Muted text on dark |
--text-light | rgba(0,0,0,.50) | Muted text on light |
Surfaces & borders
| Token | Hex | Role / usage |
|---|---|---|
--theme-bg / --theme-elevation-0 | #000000 | Page canvas |
--theme-elevation-50 | #070707 | The most-used panel fill (15 blocks) |
--theme-elevation-100 | #141414 | Raised cell |
--theme-elevation-150 | #222222 | Next step |
| rail | rgba(255,255,255,.13) | The grid hairline — 22 uses, the primary structural device |
| soft rail | rgba(255,255,255,.05) | Interior sub-divider |
| solid rule | #ffffff | Emphasis rule (11 uses) |
| tint | rgba(255,255,255,.10) | Hover / chip wash |
| inverse | #ffffff | Inverted button and inverted sections |
Neutral ramp (--color-base-*, 5% steps): 0 #ffffff · 50 #f5f5f5 · 100 #ebebeb · 150 #dddddd · 200 #d0d0d0 · 250 #c3c3c3 · 300 #b5b5b5 · 350 #a8a8a8 · 400 #9a9a9a · 450 #8d8d8d · 500 #808080 · 550 #727272 · 600 #656565 · 650 #575757 · 700 #4a4a4a · 750 #3c3c3c · 800 #2f2f2f · 850 #222222 · 900 #141414 · 950 #070707 · 1000 #000000.
Hues (published ramps; on the marketing page only the deep end appears)
| Family | Key steps | Role / usage |
|---|---|---|
| blue | 50 #e5f2f7 → 500 #007fae → 900 #001923 | Brand/info; #001923 is the announcement-banner ground with #e5f2f7 text |
| purple | 50 #fef5fe → 500 #f799f7 → 900 #311f31 | Secondary hue, unused in chrome |
| error / red | 500 #ff876f; bg-dark #331b16, text-dark #ffd5cc | Destructive |
| warning / orange | 500 #f4ac4f; bg-dark #332d21, text-dark #ffe1a4 | Warning |
| success | 500 #007fae | Success — the same blue as info |
Every hue also ships an on-dark and on-light -bg / -border / -text triple, so a status chip is three matched tokens rather than an improvised alpha.
Rules: the chrome has no accent colour at all — emphasis is inversion to #ffffff. Blue only appears as the announcement banner and in status roles. Text is #ffffff or a 50%-alpha of it, never a grey from the ramp.
One family: untitledSans, "untitledSans Fallback". One mono, GeistMono, used only for the install command.
| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| h1 | 64 / 64 | 500 | -3.2px |
| h2 | 48 / 48 | 500 | -2.4px |
| h3 | 24 / 28.8 | 500 | -1.2px |
| Body | 16 / 22.4 | 400 | normal |
| Nav link | 16 / 22.4 | 500 | normal |
| Small / meta | 15 / 18 | 400 | normal |
| Install command (GeistMono) | 14 / 19.6 | 400 | normal |
Patterns: tracking is exactly -5% of font size at every display role (-3.2 at 64, -2.4 at 48, -1.2 at 24) and returns to normal at 16px and below — a mechanical rule, not a hand-tuned scale. Display line-height is 1.0 at 64 and 48. Nothing goes above weight 500; nothing is uppercase or tracked positive.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.