# Bellroy · Design system migration spec

> Source: https://bellroy.com  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of premium e-commerce design that balances functional clarity with aspirational lifestyle imagery and a strong, consistent brand voice.

## 1. Identity DNA

Bellroy’s design language is the intersection of two seemingly opposed philosophies: the rugged preparedness of a premium outdoor brand and the obsessive minimalism of Japanese engineering. The result is a system where every pixel serves a purpose, balancing aspirational lifestyle imagery with the stark clarity of a well-organized toolkit.

**One-liner:** Premium carry goods designed for the modern traveler, blending utility with understated style.
**Keywords:** adventure · functionality · sustainability · premium carry
**Analogy:** A premium outdoor brand meets minimalist Japanese engineering

## 2. Color

The palette is a study in restraint, dominated by expansive light neutrals that act as a clean canvas for product photography. A single, confident burnt-orange accent is reserved exclusively for pivotal actions, creating a clear visual hierarchy through contrast rather than complexity.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#f7f7f7` | main background |
| `--bg-soft` | `#ffffff` | card background |
| `--bg-quiet` | `#efefef` | quiet area |
| `--ink` | `#333333` | body text |
| `--ink-soft` | `#666666` | secondary text |
| `--muted` | `#999999` | placeholder |
| `--muted-soft` | `#dbdbdb` | weak hint |
| `--accent` | `#cd4c20` | single accent |
| `--line` | `rgba(0,0,0,0.08)` | divider |

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

This disciplined approach ensures the brand's aesthetic remains focused, letting the product and its story take center stage.

## 3. Typography

Typography carries a dual voice: a bold, condensed sans-serif commands attention for headlines and key statements, while a clean humanist sans-serif ensures effortless readability for detailed content. The pairing creates a clear hierarchy, moving from impactful statements to informative body text without sacrificing the brand's confident tone.

- **Display:** display-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.0 | 900 | -1.5px | Hero headlines and major section headers |
| heading | 32px | 1.1 | 700 | 0px | Section titles and product names |
| body | 16px | 1.5 | 400 | 0.3px | Primary readable text |
| small | 13px | 1.5 | 400 | 0.3px | Navigation, captions, and metadata |

## 4. Spacing

A foundational rhythm of 3.5px establishes a harmonious scale that governs both macro-layout and micro-component spacing, creating a predictable and balanced visual cadence.

- **Base unit:** 3.5px
- **Scale:** 3.5 / 7 / 14 / 21 / 28 / 42 / 56 / 84 px
- **Rhythm:** 3.5px base unit scales up to handle layout and component spacing

## 5. Surfaces

Depth is communicated with subtlety through carefully calibrated drop shadows that lift cards and interactive elements just enough to suggest layering. Borders are kept to a whisper, using low-opacity lines to define separation without adding visual weight.

- **Radius:** sm 5px · md 10px · lg 14px · pill 9999px
- **Shadows:**
  - card: None
  - elevated: None
- **Borders:** Subtle 1px borders using low-opacity black or theme grays.

## 6. Layout

The structural skeleton is a disciplined 12-column grid, its maximum width providing a stable frame for content. Within this grid, generous gutters and ample whitespace are not afterthoughts but core components of the layout, allowing large-format imagery and typography to breathe.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion in this system is purely functional, designed to confirm interaction and guide focus with the least possible fanfare. All transitions use a consistent, swift 200ms cubic-bezier curve, providing immediate tactile feedback for hover states and interface changes.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and background transitions on hover and focus
  - Subtle opacity and transform changes for interactive elements

- **Hover:** Subtle color shifts or background transitions
- **Click:** Immediate visual feedback via standard browser interactions
- **Transition:** Smooth 200ms cubic-bezier transitions for all interactive properties
- **Keyboard:** Standard focusable elements with outline indicators

## 8. Voice & Don'ts

The editorial voice is capable and direct, mirroring the product's promise of smart utility. Copy is concise, often all-caps for emphasis, and strictly avoids superfluous language or aggressive sales tactics.

- **Tone:** Confident, capable, and purpose-driven
- **Headline style:** Short, punchy, all-caps statements that emphasize utility and movement
- **CTA style:** Action-oriented, uppercase, and direct
- **Avoid:** Frilly or overly decorative language / Aggressive or overly salesy copy / Vague or abstract claims

### Don'ts
- ❌ 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.

The system deliberately forgoes decorative flair, dark modes, and cluttered interfaces, committing instead to a clean, spacious, and product-first presentation.

## System Prompt (paste into AI tool)

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