Bellroy — design system & UI screens

E-commerce · 1 screen · 11 sections · https://bellroy.com/

Bold DTC hero; a parkour athlete mid-leap with a Bellroy bag against a bright sky, chunky uppercase type, a Bestsellers tag and a product-category tile row.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/bellroy.

Decoded design system

Bellroy's decoded design system: background #BFBFBF, text #0A0A0B, accent #CD4C20, link #0000EE, primary #CD4C20; type scale h1 70px / h2 21px / body 13px; 4px spacing base; 0px base radius. The single interactive/action color is #CD4C20 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#BFBFBF`
surface	`#B4B4B4`
border	`#A3A3A4`
text	`#0A0A0B`
text_muted	`#4E4E4F`
primary	`#CD4C20`
accent	`#CD4C20`
link	`#0000EE`
secondary	`#B85021`
button_bg	`#CD4C20`
button_text	`#FFFFFF`

Using these colors

Action color #CD4C20 — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, button_bg are all #CD4C20 — one role, not several (the action color).
accent #CD4C20 — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
link #0000EE — inline text links and link-styled controls.
secondary #B85021 — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: GTUltra
Body: Lato
h1: 70px
h2: 21px
body: 13px

Spacing

base unit: 4px
scale: 2px, 3px, 4px, 5px, 7px, 11px, 14px, 18px, 21px, 28px

Radii

base: 0px
button: 4px

Shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.3) 0px 27px 15px -30px, rgba(0, 0, 0, 0.5) 0px 11px 9px -10px

Shadows (elevation)

subtle: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.3) 0px 27px 15px -30px, rgba(0, 0, 0, 0.5) 0px 11px 9px -10px
card: rgba(0, 0, 0, 0.5) 0px 17px 9px -15px

Motion

Micro-interactions run at 150ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).

durations: 150ms · 200ms · 300ms
easings: cubic-bezier(0.4, 0, 0.2, 1) · ease
animated properties: transform, background-color, opacity, color

Native design tokens

Token	Value
`--color-surface-primary`	`#f7f7f7`
`--modal-header-color`	`#CD4C20`
`--color-grey-200`	`#efefef`
`--link-color-text`	`#CD4C20`
`--color-text-brand`	`#CD4C20`
`--color-grey-100`	`#f7f7f7`
`--color-grey-600`	`#333333`
`--color-text-inverted`	`#ffffff`
`--color-text-secondary`	`#666666`
`--color-text-tertiary`	`#9b9b9b`

…and 14 more measured on the page.

Button states (measured)

primary hover: box-shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.3) 0px 20px 10px -35px, rgba(0, 0, 0, 0.5) 0px 4px 9px -5px · background #B85021
primary focus: outline 2px solid rgba(0, 0, 0, 0)

Layout (measured)

container max-width: 1202px
nav: 30px absolute

Motion choreography (measured)

Load order: button.hidden

Overlay recipe (measured)

dialog panel: #FFFFFF · radius 0px

Input (measured)

height 34px · radius 0px

Responsive (measured)

breakpoints: 480px · 527px · 549px · 768px · 930px · 980px
mobile (390px): hero 32px · nav inline

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Bellroy - Carry Smart, Move Free, Go Far