CURATED · OPEN · FREE

Bellroy

Premium carry goods designed for the modern traveler, blending utility with understated style.

accessoriesecommerce

↓ Download design system (39 MB)Open in OpenDesign

Visit: https://bellroy.com

📦 Browse pack contents →

Identity DNA

adventurefunctionalitysustainabilitypremium carry

A premium outdoor brand meets minimalist Japanese engineering

Color

#cd4c20Accent

#333333Ink

#666666Ink soft

#f7f7f7BG

#ffffffBG soft

#efefefBG quiet

#999999Muted

rgba(0,0,0,0.08)Line

Clean, light backgrounds with strong photography and a single burnt-orange accent for key actions.

Typography

display-sans · humanist-sans · monospace

display64px · 900
heading32px · 700
body16px · 400
small13px · 400

Spacing

3px

7px

14px

21px

28px

42px

56px

84px

3.5px base unit scales up to handle layout and component spacing

Surfaces

sm · 5px

md · 10px

lg · 14px

pill · 9999px

Subtle 1px borders using low-opacity black or theme grays.

card: None · elevated: None

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Standard 12-column grid with a max-width container and consistent gutter spacing.

Motion & Interaction

150msmicro

200mssmall

400msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth color and background transitions on hover and focus · Subtle opacity and transform changes for interactive elements

Subtle color shifts or background transitions · Immediate visual feedback via standard browser interactions

Components

button Solid filled buttons with pill radius and uppercase text
card Image-forward cards with rounded corners and subtle drop shadows
chip Small rounded tags for categories
input Clean search bar with placeholder text and a search icon
hero Full-width lifestyle photography with bold overlaid typography and a primary action button

Voice & Don'ts

Tone Confident, capable, and purpose-driven
Headlines Short, punchy, all-caps statements that emphasize utility and movement
CTAs Action-oriented, uppercase, and direct

Don't use bright neon or high-saturation color palettes — the site relies on muted, natural tones with a single burnt-orange accent.
Don't use highly decorative or script typography — the design uses a bold display sans-serif paired with a clean humanist sans.
Don't clutter the layout with excessive UI elements or borders — the site maintains a clean, spacious, and image-focused aesthetic.
Don't use sharp, square corners on interactive elements — the UI consistently uses rounded corners, often reaching pill-shaped radii.
Don't use dark mode or heavy backgrounds — the site predominantly features light, neutral backgrounds like #f7f7f7 and #ffffff.
Don't use aggressive drop shadows or heavy bevels — shadows are subtle and used primarily to lift cards slightly off the background.
Avoid: Frilly or overly decorative language
Avoid: Aggressive or overly salesy copy
Avoid: Vague or abstract claims

Inside the pack — real screenshots

Bellroy — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

Bellroy is a premium accessories and carry brand. Its design language is clean, confident, and product-focused, characterized by a light neutral palette (#f7f7f7, #ffffff) and a single burnt-orange accent (#cd4c20). Typography features a bold, condensed display sans-serif for headlines and a clean humanist sans-serif for body text. The layout is spacious, relying heavily on high-quality lifestyle photography and ample whitespace. Critical don'ts include avoiding neon colors, decorative scripts, cluttered UI, sharp corners, dark backgrounds, and heavy shadows. The voice is capable and action-oriented, emphasizing movement and smart utility.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko