---
name: Bellroy
description: "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."
version: alpha

colors:
  background: "#f7f7f7"
  primary: "#333333"
  secondary: "#666666"
  tertiary: "#cd4c20"
  neutral: "#999999"
  bg-soft: "#ffffff"
  bg-quiet: "#efefef"
  muted-soft: "#dbdbdb"
  line: "rgba(0,0,0,0.08)"

typography:
  display:
    fontFamily: display-sans
    fontSize: 64px
    lineHeight: 1.0
    fontWeight: 900
    letterSpacing: "-1.5px"
  heading:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.3px"
  small:
    fontFamily: humanist-sans
    fontSize: 13px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.3px"

rounded:
  sm: 5px
  md: 10px
  lg: 14px
  pill: 9999px

spacing:
  xs: 3.5px
  sm: 7px
  md: 14px
  lg: 21px
  xl: 28px
  2xl: 42px
  3xl: 56px

---

## Overview

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

*A premium outdoor brand meets minimalist Japanese engineering*

## Colors

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

- **Background (`#f7f7f7`)** — uses `bg` token
- **Primary text (`#333333`)** — uses `ink` token
- **Secondary text (`#666666`)** — uses `ink-soft` token
- **Accent (`#cd4c20`)** — uses `accent` token
- **Muted (`#999999`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.08)`)** — uses `line` token

## Typography

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

## Layout

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

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

## Elevation & Depth

- card: None
- elevated: None
- Borders: Subtle 1px borders using low-opacity black or theme grays.

## Shapes

- `sm`: 5px
- `md`: 10px
- `lg`: 14px
- `pill`: 9999px

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

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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