---
version: alpha
name: Buck Mason
description: Modern American classics menswear — white canvas with warm golden-hour photography, Acumin Pro Condensed in all-caps at near-zero line-height, squared corners on every element, and vintage LA heritage rendered as disciplined restraint without a single chromatic accent.

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f7f5f1"           # warm off-white section bands, newsletter strip /* estimated */
  surface-warm: "#dddad0"      # warm parchment for editorial callouts /* estimated */

  # Ink / text
  ink: "#333333"               # primary text — the dominant extracted charcoal
  ink-secondary: "#666666"     # secondary copy, captions, metadata
  ink-muted: "#888888"         # placeholder text, disabled, helper copy /* estimated */
  on-primary: "#ffffff"        # text on the charcoal CTA

  # Accent — Buck Mason uses charcoal as its sole action color
  primary: "#333333"           # CTA fill, active nav states — matches ink exactly
  primary-hover: "#1a1a1a"     # CTA hover deepens toward black /* estimated */

  # Borders
  border: "#dddad0"            # warm hairline dividers, footer separator /* estimated — from rgb(221,218,208) */
  border-input: "#666666"      # input underline border

  # Interactive state
  link-default: "#ffffff"      # nav links on dark / hero contexts
  link-hover: "#565656"        # link hover color — extracted from dembrandt delta

  # Focus / form
  focus-input: "#000000"       # input focus border-color
  focus-ring: "#03b2cb"        # --PhoneInput-color--focus CSS variable

  # Shadow tint (opaque approximation — dembrandt reports no box-shadows)
  shadow-soft: "#000000"       # was rgba(0,0,0,0) effectively — no resting shadows /* estimated */

typography:
  display-hero:
    fontFamily: "acumin-pro-condensed, Barlow Condensed, Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.96px
  display:
    fontFamily: "acumin-pro-condensed, Barlow Condensed, Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.64px
  heading-section:
    fontFamily: "acumin-pro-condensed, Barlow Condensed, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.36px
  body-large:
    fontFamily: "acumin-pro-condensed, Barlow Condensed, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.32px
  body:
    fontFamily: "acumin-pro-condensed, Barlow Condensed, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.31px
  nav-link:
    fontFamily: "acumin-pro-condensed, Barlow Condensed, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.36px
  button-ui:
    fontFamily: "acumin-pro-condensed, Barlow Condensed, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.33px
  label:
    fontFamily: "acumin-pro-condensed, Barlow Condensed, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0.29px
  caption:
    fontFamily: "acumin-pro-condensed, Barlow Condensed, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.26px
  mono:
    fontFamily: "Overpass Mono, Menlo, Courier New, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 10px
  md: 20px
  lg: 30px
  xl: 50px
  2xl: 60px
  3xl: 70px
  4xl: 114px

rounded:
  none: 0px
  sm: 1px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-outline-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 10px

  input:
    backgroundColor: "transparent"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px 0px 7px
  input-focus:
    backgroundColor: "transparent"
    textColor: "{colors.on-primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 20px 20px

  link:
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 0px
  link-hover:
    textColor: "{colors.link-hover}"

  product-label:
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    padding: 0px
---

# Buck Mason Design System

## Overview

Buck Mason's site is what American menswear restraint looks like when it commits fully to the bit. The canvas is pure white (`{colors.background}`) and the typography is a single condensed grotesque — **Acumin Pro Condensed** — set in uppercase at weight 600 with line-height collapsed to 1.0. The result is type that reads as stamped rather than set, every label and heading compressed into a dense, utilitarian block. It's the visual equivalent of a garment tag on a selvedge jean: nothing ornamental, everything functional, and proud of it.

The signature move is what the site refuses to do. There are no gradients, no hero headlines in a contrasting serif, no chromatic brand color, no border-radius beyond a hairline 1px on the sign-up button. The sole accent is the same `{colors.ink}` charcoal that writes the body copy — black does the work a brand hue would do elsewhere. What fills that restraint is photography: warm golden-hour lifestyle shots and clean product-on-white isolations, both treated as full-bleed visual anchors. The garments themselves supply the color story — sand, tobacco, chalk, slate — while the chrome around them holds its breath.

The spacing system leans large. Dominant values extracted from the live site cluster at 20px, 50px, 70px, and 114px — a generous vertical rhythm that gives product photography room to breathe. The nav is spare and wide-tracked, with a warm parchment-toned footer border (`{colors.border}`) providing the only departure from the white-and-charcoal palette. The overall experience reads like a well-curated lookbook that happens to have a checkout flow: American heritage, West Coast ease, and a complete absence of digital fuss.

**Key Characteristics:**
- **Acumin Pro Condensed, all-caps, weight 600** across every label, heading, and UI element — a single typeface family with zero variation in case or family
- Line-height collapsed to 1.0 on display and navigation — type stacks as tight blocks, never as flowing editorial text
- Pure white canvas (`{colors.background}`) with warm photography doing all visual work; no tinted section bands or dark mode
- **Zero chromatic brand color** — `{colors.primary}` matches `{colors.ink}` exactly; the CTA and the body copy are the same charcoal
- Hard 0px corners (`{rounded.none}`) on all structural elements: buttons, cards, inputs, image frames
- Warm hairline dividers (`{colors.border}` from `rgb(221,218,208)`) in the footer — the only non-neutral surface element
- Overpass Mono (`{typography.mono}`) loaded as a Google Font — presumably for the journal, technical copy, or care instruction contexts
- Navigation: uppercase condensed labels at 18px / weight 600, left-aligned wordmark, icon-only cart
- Generous spacing scale — 50–70px section padding gives product photography editorial breathing room
- Motion is minimal: 0.2s ease-in-out on cards, media, and hero background-color transitions; 0.2s linear on buttons
- Product grid uses full-bleed imagery with minimal caption typography below; price in the same condensed uppercase
- No visible shadows anywhere on the site — the page is flat, structured by whitespace and the hairline footer rule

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The dominant canvas. The entire site lives on white.
- **Warm Off-White** (`{colors.surface}`): Estimated warm tint for any newsletter or editorial strip — derived from the footer border hue.

### Ink / Text
- **Charcoal** (`{colors.ink}`): Primary text color, `#333333`. Every heading, body line, nav label, and CTA.
- **Mid Gray** (`{colors.ink-secondary}`): Supporting copy, captions, input placeholder text, `#666666`.
- **Muted Gray** (`{colors.ink-muted}`): Placeholder, disabled, and helper copy, `#888888` (estimated).

### Brand Accent
- **Charcoal-as-Accent** (`{colors.primary}`): There is no chromatic brand color. `{colors.primary}` is `#333333` — the same value as `{colors.ink}`. The CTA is charcoal because everything here is charcoal.
- **Deep Charcoal** (`{colors.primary-hover}`): CTA hover darkens toward black; estimated `#1a1a1a` (no hover state was extracted for buttons, derived from brand convention).

### Borders & Input States
- **Warm Hairline** (`{colors.border}`): Footer and section dividers from `rgb(221,218,208)` — a subtle warm off-white that softens the otherwise stark white-and-charcoal palette.
- **Input Rule** (`{colors.border-input}`): The underline-only input border, `#666666`.
- **Input Focus** (`{colors.focus-input}`): Input border on focus deepens to pure black `#000000`.

### Interaction States
- **Nav Link Default** (`{colors.link-default}`): White links in hero or dark-overlay contexts.
- **Nav Link Hover** (`{colors.link-hover}`): Hover shifts nav links to `#565656` (extracted directly from the dembrandt delta table).

### Utility
- **Phone Input Focus** (`{colors.focus-ring}`): The `--PhoneInput-color--focus` CSS variable is `#03b2cb` — a teal accent used exclusively by the phone field component; not a brand color.

## Typography

### Font Family
- **Primary**: `acumin-pro-condensed`, with fallbacks `Barlow Condensed, Helvetica, Arial, sans-serif`. A compressed grotesque serving every layer of the design — display, body, nav, label, and caption.
- **Secondary** (sans-serif variant): `acumin-pro` (non-condensed) appears at 14px/400 in link and heading-1 contexts — used sparingly for standard-width copy.
- **Monospace**: `Overpass Mono` (loaded from Google Fonts), with fallbacks `Menlo, Courier New, monospace`. Present in the technical/journal context.
- **Adobe Fonts**: The site loads `acumin-pro` and `acumin-pro-condensed` via Adobe Fonts (Typekit). Variable font features are active.
- **Transform**: Every display, heading, nav, label, button, and caption token is uppercase. No mixed-case branding headline anywhere in the system.
- **Tracking**: Positive letter-spacing on all condensed tokens — proportional to size (~0.02em), preventing the tightness of all-caps condensed from reading as blur.

### Hierarchy

The complete type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 48px / 600 / uppercase / 1.0lh — campaign headline or hero CTA |
| `display` | 32px / 600 / uppercase / 1.0lh — section headings |
| `heading-section` | 18px / 600 / uppercase / 1.0lh — sub-section titles, editorial callouts |
| `body-large` | 16px / 400 / uppercase / 1.4lh — primary body/descriptor copy |
| `body` | 15px / 400 / uppercase / 1.4lh — default product and content copy |
| `nav-link` | 18px / 600 / uppercase / 1.0lh — navigation items |
| `button-ui` | 16px / 600 / uppercase / 1.0lh — CTA and button labels |
| `label` | 14px / 600 / uppercase / 1.4lh — product status, eyebrow labels |
| `caption` | 13px / 400 / uppercase / 1.4lh — price, metadata, size notes |
| `mono` | 12px / 400 — journal code or care instruction blocks |

### Principles
- **One family, one case**: Acumin Pro Condensed uppercase carries every layer of the design. There is no secondary display face, no serif, no sentence-case headline.
- **Compression is the voice**: condensed width + 1.0 line-height + positive tracking creates type that reads as a physical stamp or a garment tag, not flowing web copy.
- **Weight 600 for structure, 400 for content**: bold-adjacent condensed weight for navigation, CTAs, and headings; regular weight for body and captions where text runs longer.
- **Tracking scales proportionally**: wider at large sizes (~0.02em), finer at caption size — keeps the all-caps condensed legible at every scale.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit is approximately 10px. The dominant extracted values — 20px (`{spacing.md}`), 50px (`{spacing.xl}`), 70px (`{spacing.3xl}`), and 114px (`{spacing.4xl}`) — reveal a generous editorial rhythm. Component internals use the tight register (10–20px); section separation breathes at 50–70px. This is not a dense product catalog; it's a curated lookbook that happens to support e-commerce.

### Grid & Container
- Max content width: approximately 1280px, centered, with full-bleed product photography breaking the container at hero scale
- Navigation: flat horizontal bar, uppercase condensed labels, icon-only bag/account/search — minimal chrome
- Product grid: typically 4 columns on desktop (as seen in screenshot), collapsing to 2 on tablet and 1 on mobile
- Each grid tile: full-bleed portrait image, condensed product name in uppercase below, price in the same uppercase caption type

### Whitespace Philosophy
- **Photography needs air**: generous 50–70px section padding gives lifestyle imagery room to exist rather than compete
- **Type recedes**: uppercase condensed at `{colors.ink}` charcoal on white reads as functional annotation to the photography, not as visual competition
- **Hairlines, not boxes**: the warm `{colors.border}` rule under the footer is the only structural separation device beyond whitespace

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | The entire site — product tiles, nav, inputs, cards |
| Hairline (Level 1) | `1px solid {colors.border}` warm | Footer top rule; the only permanent border in the layout |
| Input Rule (Level 1b) | `0 0 1px {colors.border-input}` | Input underline — bottom-only rule, no box |
| Overlay (Level 2) | Dark background overlay | Cart drawer, size-selector sheet; no box-shadow added |

**Shadow Philosophy**: Buck Mason is perfectly flat. Dembrandt detected no `box-shadow` values on the live site. Depth is achieved purely through scale contrast — a full-bleed photograph next to a paragraph creates z-axis reading without any CSS shadow. The only depth cue is the warm footer hairline that separates content from footer. This commitment to flatness reads as confidence: the product photography creates all the visual weight the page needs.

## Shapes

The complete radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All structural elements — buttons, cards, inputs, image frames |
| `sm` | 1px | Sign-up button (extracted from dembrandt borderRadius data) |
| `pill` | 9999px | Circular icon buttons if present |

The shape language is nearly binary: hard 0px corners everywhere structural. The lone `1px` value on the sign-up button is barely perceptible — functionally square. There is no soft or friendly middle register. Rounded corners would soften the garment-tag aesthetic that the condensed typography and flat shadows build. The shapes align with the typography: stamped, precise, undecorated.

## Components

The complete component spec lives in the `components:` token block.

### Button Variants

- **`button-primary`** — Charcoal (`{colors.primary}`) fill, white text (`{colors.on-primary}`), uppercase condensed `{typography.button-ui}`, **0px radius** (`{rounded.none}`), `12px 24px` padding. Hover darkens to `{colors.primary-hover}`. The CTA is the same color as the body text — no contrast differentiation, pure typographic hierarchy.
- **`button-outline`** — White fill, charcoal text, 1px charcoal border, **0px radius**. Used for secondary actions or alternative CTA contexts. Hover fills `{colors.surface}`.

### Cards

- **`card`** — White surface, **0px radius**, no shadow, `10px` padding. Product tiles are image-first: full-bleed portrait photo, a tight uppercase product name below (`{typography.label}`), and a price in `{typography.caption}`.

### Inputs

- **`input`** — Transparent fill, bottom-only 1px `{colors.border-input}` rule, **0px radius**, `0 0 7px` padding. This is a bare underline input — no box, no fill, no corners. On focus the border deepens to `{colors.focus-input}` (black) and the text shifts to white against a filled background (the dembrandt focus state shows `background: rgb(30,174,219)` — this is the PrimeReact phone input component's default, not a Buck Mason brand choice).

### Navigation

- **`nav-bar`** — White background, charcoal uppercase condensed links (`{typography.nav-link}`), `20px` vertical padding. Icon-only cart and account on the right. Left-aligned "BUCK MASON" wordmark in the same condensed uppercase. No heavy chrome, no bottom border visible on the live site.

### Links & Product Labels

- **`link`** — Charcoal (`{colors.ink}`), underline on default in footer and body contexts; hover dims to `{colors.link-hover}` (`#565656`).
- **`product-label`** — Bare text in `{typography.caption}`, uppercase, no decoration. Used for product names and prices below grid images.

## Do's and Don'ts

### Do
- Use **Acumin Pro Condensed uppercase** at weight 600 for every structural element — headings, nav, buttons, labels all share the condensed block identity
- Hold line-height at 1.0 for display and heading tokens (`{typography.display-hero}`, `{typography.nav-link}`) — the tight stacking is intentional and must not be relaxed
- Keep the canvas pure white (`{colors.background}`) — there is no dark theme, no warm tinted canvas in the live production site
- Use `{colors.primary}` (`#333333`) as the sole action color — do not introduce a chromatic accent hue
- Square every corner (`{rounded.none}`) on buttons, inputs, cards, and image frames
- Give product photography generous section padding (50–70px) using `{spacing.xl}` or `{spacing.3xl}` so images breathe
- Underline-only inputs: transparent fill, bottom rule at `{colors.border-input}`, no box, no corner radius
- Let warm lifestyle photography carry the emotional register; keep all chrome charcoal-on-white and out of the way

### Don't
- Don't set any text in sentence case — Buck Mason's system is uniformly uppercase at every scale
- Don't introduce a serif typeface or a second family; Acumin Pro Condensed is the only voice
- Don't add a chromatic brand color — the `#03b2cb` teal in the phone-input CSS variable is a third-party component default, not a brand color
- Don't round corners beyond `{rounded.sm}` (1px) — any border-radius above 1px breaks the stamped, utilitarian aesthetic
- Don't add resting box-shadows to product cards or navigation — the site is architecturally flat
- Don't compress the spacing below `{spacing.md}` (20px) between product grid tiles; the air is load-bearing
- Don't use the non-condensed `acumin-pro` family for headings or CTAs — the standard width reads as a different brand register
- Don't reduce letter-spacing to zero on uppercase condensed tokens; tight all-caps condensed without tracking reads as blur

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <400px | Single-column; hero image full-bleed; nav collapses to hamburger; type holds uppercase |
| Mobile | 400–569px | Single-column product grid; condensed header bar; touch-optimized tap targets |
| Mobile Large | 570–819px | Two-column product grid; horizontal nav begins to re-emerge |
| Tablet | 820–1023px | Two-to-three column grid; campaign images full-bleed; section padding steps up |
| Desktop | 1024–1279px | Four-column product grid; full horizontal nav; max ~1280px container |
| Large Desktop | ≥1300px | Container caps; photography scales to fill the wider canvas |

*(Buck Mason's extracted breakpoints span 400–1728px with 22 stops — the most meaningful layout shifts are listed above.)*

### Touch Targets
- Product card images are naturally large tap targets — no additional padding needed
- Navigation labels at 18px condensed (`{typography.nav-link}`) carry sufficient tap height with `20px` vertical padding
- Primary buttons with `12px 24px` padding go full-width on mobile for comfortable thumb reach

### Collapsing Strategy
- **Navigation**: full horizontal condensed nav → hamburger menu on mobile; wordmark persists, bag icon stays visible
- **Product grid**: 4 → 2 → 1 column; portrait image aspect ratios maintained with `object-fit: cover`
- **Typography**: display tokens scale down but preserve uppercase and condensed weight; line-height stays 1.0
- **Spacing**: section padding steps from `{spacing.3xl}` (70px) toward `{spacing.md}` (20px) at mobile

### Image Behavior
- Lifestyle photography goes full-bleed at hero scale across all breakpoints
- Product isolations (product-on-white) maintain square or portrait crop in the grid
- Image hover: 0.2s ease-in-out opacity fade (dembrandt detected this as the `media` motion context)

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Text: Charcoal (`{colors.ink}` — `#333333`)
- Brand accent: Charcoal (`{colors.primary}`) — no chromatic color exists
- Secondary text: Mid Gray (`{colors.ink-secondary}`)
- Border: Warm Hairline (`{colors.border}` — from `rgb(221,218,208)`)
- CTA: Charcoal fill (`{colors.primary}`), hover deepens to `{colors.primary-hover}`
- Input rule: Mid Gray (`{colors.border-input}`) deepening to black on focus

### Example Component Prompts

- "Create a Buck Mason hero section: full-bleed warm lifestyle photograph, a 48px uppercase Acumin Pro Condensed (`{colors.ink}`) headline at weight 600 with line-height 1.0 and 0.96px tracking (`{typography.display-hero}`), and a single charcoal CTA below using `{typography.button-ui}` with **0px border-radius** (`{rounded.none}`) and `12px 24px` padding — canvas pure white (`{colors.background}`), no shadow, no radius anywhere"
- "Build a primary button: charcoal (`{colors.primary}`) fill, white text (`{colors.on-primary}`), uppercase Acumin Pro Condensed at 16px weight 600 (`{typography.button-ui}`), **0px radius** (`{rounded.none}`), `12px 24px` padding; hover darkens to `{colors.primary-hover}`"
- "Design a product grid card: white (`{colors.background}`) surface, **0px radius**, no shadow, full-width portrait product image on top, an uppercase condensed product name in `{typography.label}` (14px / 600) below, and a price in `{typography.caption}` (13px / 400) — `{spacing.sm}` (10px) gap between image and text"
- "Create a site navigation bar: white (`{colors.background}`) background, 'BUCK MASON' wordmark left-aligned in Acumin Pro Condensed uppercase, nav links in `{typography.nav-link}` (18px / 600 / uppercase / `{colors.ink}`), icon-only cart and account on the right, `20px` vertical padding — no bottom border, no shadow, flat white bar"
- "Build a newsletter email input: transparent fill (`{colors.background}`), **bottom-only 1px rule** at `{colors.border-input}` (`#666666`), **0px border-radius** (`{rounded.none}`), `0 0 7px` padding, `{typography.body}` text in `{colors.ink-secondary}` uppercase — on focus the bottom rule deepens to `{colors.focus-input}` (black)"
- "Design a product listing section: pure white canvas, 4-column grid at desktop (2 on tablet, 1 on mobile), each tile a full-bleed portrait image with zero radius, uppercase condensed product name and price below in `{typography.caption}`, `{spacing.md}` (20px) gutter between tiles, `{spacing.xl}` (50px) section padding above and below — no tile shadows, no hover box, only a 0.2s ease-in-out opacity fade on image hover"

### Iteration Guide

1. Start on pure white (`{colors.background}`). No tinted canvas, no dark sections, no warm parchment bands in the live site.
2. **Set all text in uppercase Acumin Pro Condensed.** If any headline, label, button, or nav item is sentence-case or in a different family, it has broken the voice.
3. **Collapse line-height to 1.0** on display and navigation tokens. If headings have breathing room between lines, they lose the stamped, garment-tag quality.
4. There is no chromatic brand color. If you reached for a hue, recolor it `{colors.primary}` (`#333333`).
5. Square every corner to `{rounded.none}`. Any border-radius above 1px on a button, input, card, or image frame has softened what must stay hard.
6. No shadows. If you added a `box-shadow` to a product card or CTA, remove it — the page is architecturally flat.
7. Give photography space. Section padding should be `{spacing.xl}` (50px) or `{spacing.3xl}` (70px) around major image blocks. If the layout feels crowded, add space before reducing typography.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Buck Mason. Brand names and trademarks belong to their respective owners.