# Bellroy — Marketing site Design Spec

> 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
> `#0000ee` seen ~123x is browser-default link colour on unstyled anchors,
> excluded as leakage; `Lato` appears 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

| 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.

## 3. Typography Rules

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 |

## 4. Component Stylings

Buttons are small and outline-led: a **1px or 2px #333333 border** at a fractional
**3.5–5.25px** radius, 26–50px tall, with UPPERCASE labels at +1px tracking.
Active/sale states switch the border to **2px #cd4c20**. The search field is a
full-width open input under the nav. Cards are borderless photographic tiles.
Shadows are almost entirely absent — the two that exist are directional and
heavy (`rgba(0,0,0,.2) -5px 11px 14px` and `rgba(0,0,0,.5) 0 17px 9px -15px`),
reserved for lifted overlays.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Outline button | 1–2px #333333, 3.5–5.25px, UPPER +1px | `color/background/border 0.2s cubic-bezier(.4,0,.2,1)` | mini-cart close sets `outline:none` (anti-pattern) | border → 2px #cd4c20 | #aaaaaa text |
| Newsletter input | open field | — | **background → #b85021** (rust fill on focus) | — | — |
| Express-checkout tile | flat | `box-shadow: rgba(0,0,0,.3) 0 20px 15px -17px, 0 1px 2px` | same shadow as hover | — | — |
| Nav item | 13/400, #666666 | colour → #333333 | — | — | — |

Focus notes, two of them. The newsletter input does something distinctive —
**it fills with rust #b85021 on focus** rather than drawing a ring. But
`.MiniCart_Cart_CloseButton:focus` sets `outline:none` with no replacement, which
is an **anti-pattern**: supply a visible ring (e.g. `0 0 0 2px #cd4c20`).

## 5. Layout Principles

A tall white header: hand-drawn owl wordmark left, seven category links, utility
links and cart right, with a full-width search field beneath. Below it, a
full-bleed photographic hero carousel (16.8s cycle) with the 900-weight display
overlaid bottom-left under a directional scrim. Content then stacks as
photographic tiles on the #f7f7f7 surface.

## 6. Depth & Elevation

The radius scale is **fractional and built on a 3.5px base**: 3.5px, **5.25px**
(dominant, 45 uses), 7px, **10.5px**, plus 3px/4px strays and 50%/9999px for
round controls. Shadows: 23 elements carry a fully *transparent* placeholder
shadow, and only two real shadows exist — both directional and strong, for lifted
overlays. Borders do the structural work: 2px #333333 (10 uses), 2px #cd4c20 for
active, 1px #ffffff over photography, plus a 16px transparent border used as
spacing.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| color, background, border, fill, stroke | 0.2s | cubic-bezier(0.4, 0, 0.2, 1) | chrome (dominant, 43x) |
| …plus opacity, box-shadow | 0.2s | cubic-bezier(0.4, 0, 0.2, 1) | richer control set |
| opacity | 0.2s | cubic-bezier(0.4, 0, 0.2, 1) | fades |
| opacity, transform | 0.5s | ease | scroll reveals |
| all | 0.2s | cubic-bezier(0.4, 0, 0.2, 1) | misc controls |
| transform | 0.3s | cubic-bezier(0.4, 0, 0.2, 1) | hover nudges |

House transition: **0.2s cubic-bezier(.4,0,.2,1)**. The keyframe set is
deliberately tiny — only three: `fadeInAnimation` and two tilts, `rotate--2` and
`rotate--3` (small angled reveals, a nod to laid-out product photography). The
one continuous animation is the hero carousel, `slide-cycle3` /
`slide-cycle3-body` at **16.8s infinite** — unusually slow, which is what keeps
the page feeling calm. No animation library. **No `prefers-reduced-motion` block**
(`reducedMotionBlocks:0`) — worth adding for the auto-advancing carousel.

## 8. Backgrounds, Effects & WebGL

Two gradients, both legibility scrims over photography rather than decoration:
`linear-gradient(208deg, transparent 39.8%, rgba(0,0,0,.48) 83.32%)` — note the
**208deg diagonal**, not a flat vertical — and a standard
`to top, rgba(0,0,0,.6) → transparent`. **7 raster layers** carry the imagery. No
backdrop-filter, no canvas/WebGL, no video, no grain.

## 9. Do's and Don'ts

### Do
- Keep chrome on a recessive neutral grey ladder; let photography carry the colour.
- Set UI text small — 11–13px — with *positive* tracking (+0.325 / +1px).
- Reserve weight 900 for the single UPPERCASE display moment at 70/77.
- Use the fractional 3.5px-base radius scale (3.5 / 5.25 / 7 / 10.5).
- Build buttons from 1–2px #333333 outlines, switching to 2px #cd4c20 when active.
- Use rust #cd4c20 for state only — sale, active, cart badge.
- Use a diagonal (208deg) scrim over hero imagery, not a flat vertical fade.

### Don't
- Don't scale UI text up to conventional 16px; the small scale is the character.
- Don't use mid weights for the display — it is 900 or nothing.
- Don't round to whole numbers; the scale is fractional.
- Don't let rust become decorative.
- Don't copy the `outline:none` on the mini-cart close button — supply a ring.

## 10. Responsive Behavior

A notably sparse ladder for a retail site — six steps, three real seams:

| Breakpoint | What changes |
|---|---|
| max 767px / 768px | phone → tablet: nav collapses, search moves |
| max 1199px / 1200px | tablet → desktop grid |
| max 1200px / 1280px | desktop → wide |

No dark-scheme blocks (`darkSchemeBlocks:0`), no container queries, no
reduced-motion block. Layout between tiers is fluid rather than stepped.

## 11. Agent Prompt Guide

- Surface `#f7f7f7` · Text `#000000` / `#333333` / `#666666` · Border `2px #333333` / `#dbdbdb` · Accent `#cd4c20` (state only) · Dark `#222222`
- Font: GTUltra (Archivo stand-in) — display **70/77 weight 900 UPPERCASE**, UI **11–13px** at +0.325/+1px tracking · Radius: **3.5 / 5.25 / 7 / 10.5px** · Control height: 26–50px
- Focus: newsletter input fills `#b85021`; mini-cart sets `outline:none` — add `0 0 0 2px #cd4c20` · Motion: 0.2s cubic-bezier(.4,0,.2,1), 16.8s hero cycle

<bellroy_design_language>
Quiet, considered carry-goods retail where the chrome recedes and photography
carries everything. A neutral grey ladder does the work — #f7f7f7 surface,
#000000 headings, #333333 body (which is also the 2px border colour), #666666 and
#9b9b9b secondaries, #dbdbdb hairlines, #222222 dark bands — with ONE rust accent
#cd4c20 reserved strictly for state (sale, active, cart badge), deepening to
#b85021. The typographic idea is an extreme contrast within a single family,
GTUltra (stand-in Archivo): a 70/77 UPPERCASE display at weight 900 over
photography, against UI text that is deliberately TINY — 11 to 13px — carrying
POSITIVE tracking (+0.325px at 13, +1px at 11) and running weights 300 to 700.
The radius scale is fractional and built on a 3.5px base: 3.5, 5.25 (dominant), 7
and 10.5px. Buttons are outline-led, 1-2px #333333 at 26-50px with UPPERCASE +1px
labels, switching to a 2px #cd4c20 border when active. Shadows are nearly absent
(two directional ones for lifted overlays); borders and photography supply the
structure. Motion is 0.2s cubic-bezier(.4,0,.2,1) with only three keyframes —
fadeInAnimation and two small tilts, rotate--2 and rotate--3 — plus a slow 16.8s
hero carousel, and scrims run on a 208deg diagonal rather than a flat vertical.
Feels: quiet, considered, photographic, precise. Avoid: scaling UI text up to
16px, mid weights on the display, whole-number radii, decorative use of rust,
copying the outline:none on the mini-cart close.
</bellroy_design_language>