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, 4px, 6px, 8px, 12px, 16px, 24px, 32px

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

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