Quiet, considered carry-goods retail where the chrome deliberately recedes and photography carries everything. A neutral grey ladder does the structural work — #f7f7f7 surface, #000000 headings, #333333 body that doubles as the 2px border colour, #666666 and #9b9b9b secondaries, #dbdbdb hairlines and #222222 dark bands — with a single rust #cd4c20 reserved strictly for state (sale, active, cart badge) rather than decoration. The typographic idea is an extreme contrast held inside one family, GTUltra: a 70/77 UPPERCASE display at weight 900 laid over the hero image, set against UI text that is deliberately TINY at 11 to 13px and carries POSITIVE tracking (+0.325px at 13, +1px at 11) to stay legible, running weights from 300 for product names to 700 for labels. Its radius scale is unusual and easy to get wrong: fractional, built on a 3.5px base, giving 3.5, 5.25 (dominant), 7 and 10.5px. Buttons are outline-led at 1-2px #333333 with uppercase +1px labels, switching to a 2px #cd4c20 border when active. Shadows are nearly absent — only two real ones, both directional, for lifted overlays — and the newsletter input does something distinctive by filling with rust on focus instead of drawing a ring. Motion is restrained to three keyframes and a slow 16.8s hero carousel, with scrims running on a 208deg diagonal rather than a flat vertical fade.
Browse Bellroy 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: bellroy.com (live DOM, computed styles), 2026-07-25. 0 stylesheets blocked. No :root custom properties at all (varCount:0) — the theme predates token-based CSS — so §2 is read entirely from computed fills/text. The#0000eeseen ~123x is browser-default link colour on unstyled anchors, excluded as leakage;Latoappears only in the third-party cookie banner. Reality check: the hint is accurate but understated. "Clean, tactile product photography" is right — the page is photography-led on a near-white grey ladder. Two things it misses: the UI type is remarkably small (11–13px with positive tracking) set against a weight-900 UPPERCASE 70px display, an extreme contrast; and the radius scale is fractional, built on a 3.5px base (3.5 / 5.25 / 7 / 10.5), which is unusual and easy to get wrong.
Quiet, considered carry-goods retail. The chrome is a near-white grey ladder that recedes almost entirely, letting full-bleed lifestyle and product photography do the talking. Nearly all UI text is small — 11 to 13px with open tracking — which makes the interface feel precise and unobtrusive, and throws the one heavy gesture into relief: a 70px UPPERCASE display at weight 900 set over the hero image. A hand-drawn owl wordmark supplies the only warmth in the chrome, and a single rust-orange accent marks sale and active states. Feels: quiet, considered, photographic, precise.
| Token | Hex / value | Role / usage |
|---|---|---|
| black | #000000 | primary headings (553 uses) |
| ink | #333333 | body text + the 2px border colour (436 uses) |
| grey | #666666 | secondary text (344 uses) |
| grey-mid | #7f7f7f | nav utility text |
| grey-light | #9b9b9b | tertiary text |
| white | #ffffff | text over photography, card fills |
| surface | #f7f7f7 | THE page surface (161 uses) |
| surface-2 | #f8f8f8 | alt surface |
| surface-3 | #efefef | inset surface |
| border-grey | #dbdbdb | hairline / section fill |
| border-2 | #d7d7d7 | alt hairline |
| divider | #ececec | faint divider |
| divider-2 | #eeeeee | faint divider alt |
| disabled | #aaaaaa | disabled text |
| dark | #222222 | dark section fill |
| dark-2 | #111111 | darkest fill |
| rust | #cd4c20 | THE accent — sale, active, cart badge |
| rust-deep | #b85021 | rust hover/focus fill |
| teal | #5e7c7a | rare secondary fill |
| scrim | rgba(16,16,16,.3) | image scrim |
Rules: the chrome is a neutral grey ladder and should stay recessive — colour belongs to the photography. Rust #cd4c20 is the only accent and marks state (sale, active, cart), never decoration.
One family carries the site: GTUltra, used across an extreme weight range — 300 for product names, 400 for nav, 700 for labels, and 900 for the display. The display is 70/77 UPPERCASE at normal tracking; everything else is tiny (11–13px) with *positive* tracking (+0.325px at 13px, +1px at 11px) to keep small text legible. That inversion — huge-and-heavy against small-and-open — is the whole typographic idea.
Specimen substitution: previews load Archivo (a grotesque with a true 900)
as the open stand-in; the site ships the licensed GTUltra.
| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Display (h2, hero) | GTUltra | 70/77 | 900 | normal, UPPERCASE |
| Label / emphasis | GTUltra | 13/21 | 700 | +0.325px |
| Product name (h3) | GTUltra | 13/16 | 300 | +0.325px |
| Body | GTUltra | 13/21 | 400 | +0.325px |
| Nav / category | GTUltra | 13/50 | 400–700 | +0.325px |
| Utility nav | GTUltra | 11/26 | 400 | +1px |
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.