---
version: alpha
name: Bose
website: "https://www.bose.com"
description: >-
  Bose's web chrome runs on a graphite-black ink at "#131317" against true white, with the heroic Bose Headline typeface set at weight 900 and the workhorse Bose Text family handling everything else — a system where the typographic muscle of a 96px h1 and 60px h2 carries the brand, and where the primary CTA is a 88px-tall flat-bottom button with a hairline border, not a pill, not a fill, and never a gradient.

seo:
  title: "Bose Design System for React — Bose Headline 900, graphite ink, 88px CTAs"
  metaDescription: "Bose's design system as a DESIGN.md file. Graphite #131317 ink, Bose Headline at 900, 20 colors, 17 components. For React, Next.js, and AI tools."
  highlights:
    - "Weight 900 as voice — Bose Headline runs at weight 900 across h1 (96px) and h2 (60px), the typographic muscle that replaces a brand-color voltage"
    - "88px button height — the primary CTA is a tall flat-bottom rectangle with a hairline border, never a pill, never a fill"
    - "Single ink, no voltage — graphite #131317 carries 1596 text-and-border tokens; Bose has no brand-accent hex on the homepage"
    - "Three-radius scale — 50% for product chips, 2-3px for inputs and chips, 88px for the CTA height; everything else stays at 0"
    - "Action Blue at #005bff is for state-info, not brand — the only saturated hex on the page is reserved for inline informational links"
  tags:
    - "Consumer Electronics"
  lastUpdated: "2026-05-13"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Bose's homepage is a black-ink-on-white retail catalog presented as a product-led editorial spread. The hero stacks a 96px weight-900 "Lifestyle Collection" headline atop a wide photographic band of headphones and earbuds; below it, a "Trending products" grid runs the same display face at 60px and weight 900 across three rows of compact cards. There is no brand voltage in the chromatic sense — the page renders 1596 graphite ink tokens, 294 mid-gray hairlines, and a teal certified-refurb panel that exists once. Where Apple recedes its chrome behind product photography, Bose pushes typography forward: the Headline face IS the brand identity.

    This page captures Bose's commerce system as a DESIGN.md file — Google Labs' open spec for machine-readable design tokens. Inside: 20 color tokens covering the graphite ink, three near-black variants, the parchment input fill, the Action Blue used only for state-info, and a small palette of brand-layer accents that appear once each across the page; 11 typography tokens running the proprietary Bose Headline family at weight 900 for display and the Bose Text family at weights 400 and 500 for everything else; a three-step radius ladder (50% / 2-3px / 88px height); and 17 component definitions covering the tall flat-bottom CTA, the parchment search input at 3px radius, the product card, top nav, modal, and certified-refurb banner.

    Drop the file into Claude, Cursor, GitHub Copilot, or any AI assistant that reads structured design tokens. The agent will reproduce Bose's actual voice — typographic muscle, graphite ink, and 88px-tall flat-bottom CTAs — instead of a generic e-commerce template. Use it as a reference for audio-retail audits, a starting point for a single-ink product catalog, or a teaching artifact for talking about how to build a brand identity without a brand-color voltage.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.bose.com"
      title: "Bose — official site"
      description: "The shop surface this file was extracted from — headphones, earbuds, speakers, and soundbars."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files."
  questions:
    - id: "primary-color"
      title: "What is Bose's primary brand color?"
      answer: "Bose has no chromatic brand voltage on the homepage. The dominant token is graphite ink at `#131317`, used 1596 times as text (835) and border (748). The only saturated hex that appears is Action Blue at `#005bff` — and that lives in the `--state-info` CSS variable, reserved for inline informational links, not branding. The brand identity comes from typography (Bose Headline at weight 900) and from the 88px-tall flat-bottom CTA shape, not from a hex code."
    - id: "typography"
      title: "What typography does Bose use?"
      answer: "Two proprietary families. Bose Headline carries every display tier — h1 sits at 96px / 900 with 1.44px tracking and an 84px line-height, h2 at 60px / 900 with 1.2px tracking. Bose Text handles body, nav, captions, and buttons, running mostly at 14-18px in weights 400 and 500. The weight-900 display tier is the brand's confidence signal — where most consumer-electronics retailers run display at 600 or 700, Bose pushes the maximum weight available and lets the typeface itself do the shouting."
    - id: "button-shape"
      title: "Why is the Bose primary CTA an 88px-tall flat-bottom rectangle?"
      answer: "Because the page measures it. The extracted primary CTA renders at 311px wide × 88px tall with `border-radius: 0`, a 1px `#131317` border, and a near-white `#f8f8f8` fill — no pill, no full fill, no shadow. The tall hairline rectangle reads as a department-store catalog button rather than a SaaS pill, and the 88px height is large enough to land as a category header. Most retail systems pick 40-56px; Bose nearly doubles it."
    - id: "shadow-philosophy"
      title: "What's Bose's shadow philosophy?"
      answer: "There are no shadow tokens in the extracted CSS — zero hex values appear with a `shadow` usage flag. Elevation comes from (a) hairline borders at `#131317` separating product cards from the canvas and (b) surface-color change between the white canvas, the parchment input fill at `#f1efee`, and the teal certified-refurb banner. The retail surface is deliberately flat. Cards lift only through their hairline frame, not through a drop shadow."
    - id: "single-ink"
      title: "How does Bose differentiate sections without a brand color?"
      answer: "By switching the surface fill and by varying typographic scale. The hero is a full-bleed photographic band; the trending grid sits on pure white with a top hairline; the certified-refurb banner is a teal panel that appears once and never repeats; the footer drops into a near-white surface with a 0px radius. The page is essentially a sequence of monochrome bands punctuated by one teal moment — section breaks come from canvas changes, not from a colored heading or accent rule."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own product catalog page?"
      answer: "Yes — feed it to Claude, Cursor, or GitHub Copilot. The agent will reproduce Bose's restraint (single graphite ink, weight-900 display, 88px CTAs, hairline framing) rather than a generic SaaS theme. The tokens are quoted and paste-ready for Tailwind config, CSS variables, or a shadcn-style component library. Pair with sharp product photography against neutral backgrounds to get the full retail catalog effect."

colors:
  primary-ink: "#131317"
  ink-muted: "#444444"
  ink-secondary: "#545454"
  ink-tertiary: "#222222"
  canvas: "#ffffff"
  surface-soft: "#eee8e5"
  surface-input: "#f1efee"
  surface-warm: "#c8bcad"
  hairline: "#949494"
  hairline-soft: "#b4bec7"
  text-input: "#3e474a"
  state-info: "#005bff"
  state-danger: "#ad0000"
  state-success: "#008100"
  accent-indigo: "#4c5275"
  accent-brass: "#8a7243"
  accent-teal: "#486e8a"
  accent-paper: "#a2c2d9"
  accent-warm-coral: "#ff9d79"
  pure-black: "#000000"

typography:
  hero-h1:
    fontFamily: "Bose Headline, system-ui, sans-serif"
    fontSize: 96px
    fontWeight: 900
    lineHeight: 84px
    letterSpacing: 1.44px
  display-h2:
    fontFamily: "Bose Headline, system-ui, sans-serif"
    fontSize: 60px
    fontWeight: 900
    lineHeight: 53px
    letterSpacing: 1.2px
  display-md:
    fontFamily: "Bose Headline, system-ui, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 38px
    letterSpacing: 0.96px
  body-lg:
    fontFamily: "Bose Text, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 36px
    letterSpacing: 0
  link-md:
    fontFamily: "Bose Text, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 27px
    letterSpacing: "-0.36px"
  body-md:
    fontFamily: "Bose Text, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  button-md:
    fontFamily: "Bose Text, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
    letterSpacing: 0.8px
  label-md:
    fontFamily: "Bose Text, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
    letterSpacing: 0
  body-sm:
    fontFamily: "Bose Text, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0
  nav-link:
    fontFamily: "Bose Text, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0
  caption:
    fontFamily: "Bose Text, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0

rounded:
  none: "0px"
  xs: "2px"
  sm: "3px"
  md: "20px"
  lg: "24px"
  full: "9999px"

spacing:
  xxs: "5px"
  xs: "8px"
  sm: "10px"
  md: "12px"
  base: "16px"
  lg: "24px"
  xl: "32px"
  gutter: "40px"

components:
  button-primary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary-ink}"
    borderColor: "{colors.primary-ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    padding: "32px 16px"
    height: "88px"
    border: "1px solid"
  button-primary-hover:
    backgroundColor: "{colors.primary-ink}"
    textColor: "{colors.canvas}"
    borderColor: "{colors.primary-ink}"
    rounded: "{rounded.none}"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.primary-ink}"
    borderColor: "{colors.primary-ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    padding: "12px 16px"
    border: "1px solid"
  text-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.link-md}"
    rounded: "{rounded.none}"
  text-link-info:
    backgroundColor: "transparent"
    textColor: "{colors.state-info}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary-ink}"
    typography: "{typography.nav-link}"
    height: "73px"
    padding: "24px 16px 24px 0px"
    border: "0"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.primary-ink}"
    typography: "{typography.nav-link}"
    padding: "24px 16px"
    rounded: "{rounded.none}"
  product-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary-ink}"
    borderColor: "{colors.primary-ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "16px"
    border: "1px solid"
  product-card-chip:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.primary-ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: "5px 10px"
  product-thumbnail:
    backgroundColor: "{colors.canvas}"
    rounded: "{rounded.full}"
    padding: "0"
  text-input:
    backgroundColor: "{colors.surface-input}"
    textColor: "{colors.text-input}"
    borderColor: "{colors.text-input}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "8px 16px"
    height: "38px"
    border: "1px solid"
  modal-overlay:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary-ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "32px"
    border: "0"
  certified-banner:
    backgroundColor: "{colors.accent-teal}"
    textColor: "{colors.canvas}"
    typography: "{typography.display-md}"
    rounded: "{rounded.none}"
    padding: "32px 40px"
  banner-button:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary-ink}"
    borderColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    padding: "12px 16px"
    border: "1px solid"
  category-tile:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary-ink}"
    typography: "{typography.display-h2}"
    rounded: "{rounded.none}"
    padding: "40px"
    border: "0"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: "40px"
    border: "0"
  badge-price:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary-ink}"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    padding: "0"
---

## Overview

Bose's homepage is a black-ink-on-white retail catalog presented as **typographic muscle** — a system where the weight-900 Bose Headline face does the work a brand color would do on most consumer-electronics sites. The hero is a 96px h1 ("Lifestyle Collection") set in weight 900 with 1.44px tracking against a full-bleed photographic band; below it, a "Trending products" grid runs the same Headline family at 60px / 900 across three columns of compact product cards. Where Apple recedes its chrome behind product photography, Bose pushes typography forward and treats the typeface itself as the brand identity.

The chromatic system reinforces the restraint. Graphite ink at `#131317` carries 1596 occurrences across text and border (835 text, 748 border) — it is simultaneously the headline color, the body color, and the hairline color. The mid-gray at `#444444` is the secondary text role (147 text, 147 border) and the dark utility nav background. The only saturated hex that renders on the page is Action Blue at `#005bff`, and it lives in the `--state-info` CSS variable for inline informational links, not as a brand voltage. **Single ink**: there is no chromatic accent that says "this is Bose" — the wordmark and the weight-900 Headline face carry that work alone.

The third defining move is the button geometry. The primary CTA renders at 311px wide × **88px tall** with `border-radius: 0`, a 1px `#131317` border, a near-white `#f8f8f8` fill, and the Bose Text face at 16px / 500 with 0.8px tracking. The button reads as a department-store catalog tile, not a SaaS pill — the 88px height is roughly double a conventional retail CTA. This is not a button; it is a category header that happens to be clickable.

**Key Characteristics:**
- Single graphite ink (`{colors.primary-ink}` — `#131317`) carries headlines, body, hairlines, and CTA borders — 1596 occurrences in a single token.
- Bose Headline at weight 900 across h1 (96px) and h2 (60px) — the typographic muscle that replaces a brand-color voltage.
- 88px-tall flat-bottom primary CTA — `{rounded.none}` with a 1px ink border, no fill, no pill, no shadow.
- Action Blue (`{colors.state-info}` — `#005bff`) is for `--state-info` only — never for branding or CTAs.
- Three-radius scale: 50% for circular product chips, 2-3px for inputs and form controls, 0 for everything else.
- One teal moment (`{colors.accent-teal}` — `#486e8a`) on the certified-refurb banner — the only saturated background panel on the page.
- Surface change as section break: white canvas → parchment input fill (`#f1efee`) → teal panel → near-white footer; no decorative rules.
- Two text-weight grammars: weight 900 for display, weight 400/500 for everything else; weight 600/700 are absent from the ladder.

## Colors

> **Source page analyzed:** the Bose homepage (`/home`). The color system is single-ink dominant with brand-layer accents that each appear once.

### Primary Ink
- **Graphite Ink** (`{colors.primary-ink}` — `#131317`) — frequency 1596. Used as text (835), border (748), background (13). The system's load-bearing token, carrying every headline, every body paragraph, and every hairline border on the product cards. The hex maps to `--brand-primary` and `--color-text-black` in Bose's CSS; the variable name confirms the role.

### Surface
- **Pure White** (`{colors.canvas}` — `#ffffff`) — frequency 171. Used as background (85), border (53), text (33). The dominant canvas. Trending grid, product cards, modal overlays, footer, and the inside of the primary CTA all sit on this surface.
- **Soft Beige** (`{colors.surface-soft}` — `#eee8e5`) — frequency 11. Used as background (11). The fill for close-menu chrome and small chip backgrounds — a parchment off-white that creates a faint section break against pure white.
- **Input Parchment** (`{colors.surface-input}` — `#f1efee`) — clustered into `{colors.surface-soft}` in production, isolated here as the text-input fill. The search box and form inputs render on this near-white parchment rather than pure white.
- **Warm Putty** (`{colors.surface-warm}` — `#c8bcad`) — frequency 4. Used as background (4). A brand-layer warm-neutral that appears under a single product banner photograph.

### Ink Muted
- **Mid Gray** (`{colors.ink-muted}` — `#444444`) — frequency 294. Used as text (147), border (147). The workhorse secondary text color and the dark utility nav background; same hex serves both roles via the `--skin-banner-background-color-1` and `--color-link-color` variables.
- **Slate** (`{colors.ink-secondary}` — `#545454`) — frequency 36. Used as text (18), border (18). Tertiary text — review metadata, secondary captions.
- **Near-Black** (`{colors.ink-tertiary}` — `#222222`) — frequency 44. Used as text (22), border (22). Darker utility background and secondary heading color; reads almost as black on white but stops short of pure.
- **Pure Black** (`{colors.pure-black}` — `#000000`) — frequency 61. Used as text (25), bg (11), border (25). Reserved for true void — image overlays, dropdown menu chrome, transparent-cluster sources.

### Hairlines & Borders
- **Hairline Gray** (`{colors.hairline}` — `#949494`) — frequency 40. Used as border (39), bg (1). The horizontal divider rule between catalog sections; the 1px hairline that lifts a product card from the canvas without a shadow.
- **Hairline Soft** (`{colors.hairline-soft}` — `#b4bec7`) — frequency 11. Used as text (4), border (4), bg (3). A cooler hairline reserved for nav-divider rules and chart-baseline strokes.

### State Colors (Scoped, Not Brand)
- **Action Blue** (`{colors.state-info}` — `#005bff`) — frequency 44. Used as text (22), border (22). The only saturated hex on the page. Lives in `--state-info` and `--spectrum-blue-chord`. Reserved for inline informational links and the "what does this mean?" affordances on product spec rows — never used as a CTA fill, never as a brand color.
- **Danger Red** (`{colors.state-danger}` — `#ad0000`) — frequency 4. Used as text (2), border (2). Form validation errors. Mapped to `--danger` and `--spectrum-red-minor`.
- **Success Green** (`{colors.state-success}` — `#008100`) — frequency 2. Used as text (1), border (1). In-stock confirmations. Mapped to `--color-success`.

### Form Fills
- **Input Ink** (`{colors.text-input}` — `#3e474a`) — used as the text color inside the search input against the `#f1efee` fill. A muted slate that lands one step softer than `{colors.primary-ink}` so the input feels like an empty form field, not a filled paragraph.

### Brand Accents (One-Time)
Each of the following hex codes appears as a background exactly once on the page — they live in the `layer: "brand"` classification but render as photography-related accents rather than as a chromatic identity.
- **Slate Indigo** (`{colors.accent-indigo}` — `#4c5275`) — frequency 2 (bg only). A photographic backdrop on a single product banner.
- **Brass** (`{colors.accent-brass}` — `#8a7243`) — frequency 2 (bg only). A warm-metallic photographic accent.
- **Teal** (`{colors.accent-teal}` — `#486e8a`) — frequency 2 (bg only). The certified-refurb panel surface — the only saturated background block on the page.
- **Paper Blue** (`{colors.accent-paper}` — `#a2c2d9`) — frequency 1. A photographic backdrop accent.
- **Warm Coral** (`{colors.accent-warm-coral}` — `#ff9d79`) — frequency 1. A photographic backdrop accent.

### Brand Gradient
**No decorative gradients.** Zero `linear-gradient` or `radial-gradient` declarations render with non-zero usage in the extracted CSS. Atmospheric depth on product photography (headphone earcup highlights, speaker grilles) is inherent to the imagery, not a CSS gradient overlay.

## Typography

### Font Family
- **Display**: `Bose Headline, system-ui, sans-serif` — the proprietary display face. Carries h1 (96px), h2 (60px), and a mid-tier display at 32px. Every display tier sits at weight 900; the 32px tier drops to weight 400 for editorial subheads.
- **Body / UI**: `Bose Text, system-ui, sans-serif` — the workhorse face for paragraphs, navigation, buttons, captions, and form labels. Runs at weights 400 and 500.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.hero-h1}` | 96px | 900 | 84px | 1.44px | Homepage hero ("Lifestyle Collection") |
| `{typography.display-h2}` | 60px | 900 | 53px | 1.2px | Section heads ("Trending products", "New Arrivals") |
| `{typography.display-md}` | 32px | 400 | 38px | 0.96px | Editorial subheads, certified-banner heading |
| `{typography.body-lg}` | 24px | 500 | 36px | 0 | Lead-in paragraphs above section heads |
| `{typography.link-md}` | 18px | 500 | 27px | -0.36px | Secondary nav and inline emphasis links |
| `{typography.body-md}` | 16px | 400 | 24px | 0 | Default paragraph and product description |
| `{typography.button-md}` | 16px | 500 | 24px | 0.8px | Primary and secondary CTA labels |
| `{typography.label-md}` | 14px | 500 | 20px | 0 | Form labels, price badges, product card metadata |
| `{typography.body-sm}` | 14px | 400 | 20px | 0 | Secondary copy, footer body, review counts |
| `{typography.nav-link}` | 15px | 400 | 18px | 0 | Primary nav link ("Shop", "Support") |
| `{typography.caption}` | 12px | 400 | 16px | 0 | Fine-print, badge labels, micro-meta |

### Principles

- **Weight 900 as signature.** Where most consumer-electronics retailers run display at weight 600 or 700, Bose pushes display to the maximum weight available. The h1 at 96px / 900 / 1.44px tracking is the brand's confidence signal — the typeface itself is the voice.
- **Tight display tracking.** Every weight-900 display tier carries positive letter-spacing in absolute pixels (1.2-1.44px), which reads as confident-spaced rather than tight. Bose's Headline face is wide-set by design; the positive tracking opens the counters and gives the wordmark room to breathe.
- **Negative-tracking link tier.** `{typography.link-md}` runs at 18px / 500 with `letterSpacing: -0.36px` — the one negative-tracking signature in the ladder, scoped to secondary nav and emphasis links.
- **Button copy is uppercase-spaced.** `{typography.button-md}` at 16px / 500 with 0.8px tracking — Bose's CTAs render with widened tracking that reads as a category-tile label, reinforcing the 88px-tall button geometry.
- **Weight 600 and 700 are absent.** The text ladder runs 400 / 500 / 900 only. No mid-bold tier — emphasis comes from size and weight 900, not from a 700-weight inline run.

### Note on Font Substitutes
Bose Headline and Bose Text are proprietary licensed faces. When building off-system:
- The closest open-source substitute for **Bose Headline** is **Tussilago** or **Founders Grotesk** at weight 900 (commercial). For free fonts, **Archivo Black** (Google Fonts) or **Inter** at weight 900 captures the wide-counter, condensed-height feel.
- For **Bose Text**, **Inter** (Google Fonts, variable) at weights 400/500 is the cleanest open-source approximation. Nudge `letter-spacing` to 0.8px on uppercase button labels to re-create the catalog-button feel.
- The tight 84px line-height on the 96px h1 (a ratio of 0.875) is critical — Inter at weight 900 needs a manual `line-height: 0.9` to match, or the headline floats too tall.

## Layout

### Spacing System
- **Base unit:** 8px. Bose's spacing array shows 8px (51 occurrences) and 16px (49 occurrences) as the dominant tokens, with 5px (41), 12px (20), and 32px (14) as secondary.
- **Tokens:** `{spacing.xxs}` 5px · `{spacing.xs}` 8px · `{spacing.sm}` 10px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.gutter}` 40px.
- **Section vertical padding:** 32-40px between content blocks; the trending-product grid sits with 40px gutters between cards.
- **Card padding:** 16px inside product cards.
- **Button padding:** `{component.button-primary}` uses 32px vertical × 16px horizontal — the 32px vertical padding is what produces the 88px overall height (24px line-height + 32×2).
- **Nav padding:** `{component.nav-link}` uses 24px vertical × 16px horizontal, producing a 73px tall persistent top bar.

### Grid & Container
- **Max content width:** ~1440px on the homepage at full desktop; product grids run 3-column at standard breakpoints.
- **Column patterns:** 3-column trending grid; 4-column accessories row; full-bleed photographic bands for hero and certified-refurb sections.
- **Gutters:** 16-24px between cards in a product grid; 40px between major sections.

### Whitespace Philosophy
Bose's whitespace is the catalog page's margin. Each section is bracketed by 32-40px of vertical air above its h2 and 16-24px between cards. The homepage feels denser than Apple's gallery-style page but lighter than a typical retail catalog — every product card sits with at least 16px of internal padding and a hairline frame, so the eye reads the grid as a sequence of framed thumbnails rather than a wall of images.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, no border | Section canvases, the certified-refurb teal panel, footer |
| Hairline | 1px graphite border | Product cards, primary CTA, secondary CTA |
| Surface change | Canvas → parchment input | Search input field, modal overlay edges |
| Photographic atmosphere | Inherent to imagery | Hero product photography, lifestyle bands |

**Shadow philosophy.** Bose uses **zero CSS shadows** — the extracted color table has zero hex codes with non-zero `shadow` usage. Elevation comes entirely from (a) the 1px graphite hairline that frames product cards and CTAs and (b) surface-color change between the white canvas, the parchment input fill, and the teal certified-refurb panel. The retail surface is deliberately flat; a Bose product card lifts from the canvas through its border, not through a drop shadow.

### Decorative Depth
- **Photographic atmosphere** in the hero (the "Lifestyle Collection" lifestyle band) supplies mood; no CSS gradient is involved.
- **Hairline framing** on product cards creates the catalog-tile rhythm without shadows.
- **The single teal panel** (`{component.certified-banner}`) is the only saturated background block — it carries its own visual weight as a colored block, not as an elevated card.

## Shapes

### Border Radius Scale

| Token | Value | Use |
|---|---|---|
| `{rounded.none}` | "0px" | The default. Hero, product cards, CTAs, banner, footer, nav |
| `{rounded.xs}` | "2px" | Tiny chip rounding on micro-meta badges (8 occurrences) |
| `{rounded.sm}` | "3px" | Form inputs (7 occurrences) — the only "rounded" feel on the page |
| `{rounded.md}` | "20px" | Photographic-corner rounding on a single lifestyle band (4 occurrences) |
| `{rounded.lg}` | "24px" | One promotional tile corner (1 occurrence) |
| `{rounded.full}` | "9999px" | Circular product thumbnails and color-option chips — `border-radius: 50%` at the rendered count of 88 |

### Photography Geometry
- **Hero imagery**: full-bleed photographic band, ~21:9 aspect on desktop, with the headline overlaid in white.
- **Product renders**: 1:1 crops on the trending grid, with the product centered against a near-white tile background. No internal radius.
- **Color-option chips**: small `border-radius: 50%` circles below the product render, showing available finishes.
- **Certified-banner imagery**: half-bleed photographic block paired with the teal panel.

## Components

### Top Navigation

**`top-nav`** — Persistent thin top bar pinned across the homepage. Background `{colors.canvas}` (white), text `{colors.primary-ink}` in `{typography.nav-link}` (15px / 400). Height 73px. Right cluster: search icon, account, bag — always visible. The logo centers; left and right nav clusters split.

**`nav-link`** — Primary nav entries ("Shop", "Support", "Sign In"). Background transparent, text `{colors.primary-ink}`, typography `{typography.nav-link}` (15px / 400). Padding 24px vertical × 16px horizontal — the 24px vertical padding is what produces the 73px nav height.

### Buttons

**`button-primary`** — The signature Bose CTA. Background `{colors.canvas}` (near-white `#f8f8f8` in production, clustered to white), text `{colors.primary-ink}` in `{typography.button-md}` (16px / 500 / 0.8px tracking), 1px graphite border in `{colors.primary-ink}`, rounded `{rounded.none}` (0px — flat bottom), padding 32px vertical × 16px horizontal, height 88px. Width sits at ~311px at desktop. The 88px height IS the brand action signal — this button reads as a department-store category tile.

**`button-primary-hover`** — Inverts the fill: background swaps to `{colors.primary-ink}`, text swaps to `{colors.canvas}`. Border stays. Same geometry. The fill-swap is the only state transition documented in the system.

**`button-secondary`** — A shorter inline button used in dialogs and modals. Transparent background, 1px graphite border in `{colors.primary-ink}`, text `{colors.primary-ink}` in `{typography.button-md}`, padding 12px × 16px. Does not carry the 88px height — secondary actions stay compact.

**`text-link`** — Inline body links in `{colors.ink-muted}` (`#444444`). Typography `{typography.link-md}` (18px / 500 / -0.36px tracking). The negative tracking is the link tier's typographic signature.

**`text-link-info`** — Informational inline links in `{colors.state-info}` (`#005bff`). The only saturated text on the page. Scoped to inline "what does this mean?" affordances and product-spec glossary references.

### Cards & Containers

**`product-card`** — The catalog tile used in the trending and new-arrivals grids. Background `{colors.canvas}`, 1px graphite border in `{colors.primary-ink}`, rounded `{rounded.none}`, padding 16px. Internal stack: product render (1:1 crop) → color-option chips (`{component.product-thumbnail}`) → product name in `{typography.body-md}` (16px / 400) → price badge in `{typography.label-md}` (14px / 500). No shadow — the hairline frame is the entire elevation.

**`product-card-chip`** — A small status chip ("New", "Best Seller") inside the product card. Background `{colors.surface-soft}`, text `{colors.primary-ink}` in `{typography.caption}` (12px / 400), rounded `{rounded.full}`, padding 5px × 10px.

**`product-thumbnail`** — A circular color-option swatch (`border-radius: 50%`) shown under the product render. Background varies per product finish; the chip is rendered as a 50%-radius circle with no border. The 88 occurrences of `border-radius: 50%` in the extracted radii array trace to this chip.

**`modal-overlay`** — The "Get 10% off your first purchase" sign-up modal that opens on the homepage. Background `{colors.canvas}`, text `{colors.primary-ink}`, no border, rounded `{rounded.none}` (0px — flat-edge modal). Padding 32px. Stacked content: heading in `{typography.display-md}` → bullet list in `{typography.body-md}` → email input → `{component.button-primary}` ("Sign Up").

**`certified-banner`** — The "Certified Refurbished Sale" panel that appears once on the homepage. Background `{colors.accent-teal}` (`#486e8a`), text `{colors.canvas}` in `{typography.display-md}` (32px / 400 / 0.96px tracking). Padding 32px × 40px. The only saturated background block on the page — it carries its weight as a colored panel, not as an elevated card.

**`banner-button`** — The "Shop" CTA inside `{component.certified-banner}`. Background `{colors.canvas}` (white-on-teal), text `{colors.primary-ink}`, 1px white border in `{colors.canvas}`, rounded `{rounded.none}`, padding 12px × 16px. A compact inverse of `{component.button-primary}` scoped to the saturated panel context.

**`category-tile`** — A full-bleed promotional tile used between product grids ("Bose, meet style"). Background `{colors.canvas}`, text `{colors.primary-ink}` in `{typography.display-h2}` (60px / 900), padding 40px. No border — the surface change from the trending grid is the section break.

### Inputs & Forms

**`text-input`** — The search input and email/form field. Background `{colors.surface-input}` (`#f1efee` parchment), text `{colors.text-input}` (`#3e474a`) in `{typography.body-md}` (16px / 400), 1px slate border in `{colors.text-input}`, rounded `{rounded.sm}` (3px), padding 8px × 16px, height 38px. Width sits at ~343px in the modal context. The 3px radius is the system's one nod to rounded form geometry — every other surface stays at 0.

Error and validation states were not surfaced on the homepage; the danger and success state colors (`#ad0000`, `#008100`) live in the CSS but render only on transactional pages.

### Footer

**`footer`** — Background `{colors.canvas}`, text `{colors.ink-muted}` in `{typography.body-sm}` (14px / 400). Padding 40px. No border — the surface stays white; the section break from the catalog above comes from generous vertical air and the column-grid layout. Link columns run in `{typography.body-sm}` with 14px / 20px leading.

### Pricing & Badges

**`badge-price`** — Inline price badge inside `{component.product-card}`. Background `{colors.canvas}` (transparent on the card surface), text `{colors.primary-ink}` in `{typography.label-md}` (14px / 500). No border, no radius, no padding — the price renders as inline metadata, not as a chip.

## Do's and Don'ts

### Do
- Use `{colors.primary-ink}` (graphite `#131317`) for every text role and every border — headlines, body, product-card frames, CTA borders, hairlines. The single-ink discipline is non-negotiable.
- Set display headlines in `{typography.hero-h1}` or `{typography.display-h2}` at weight 900 with positive tracking (1.2-1.44px). This is Bose's typographic muscle and replaces a brand-color voltage.
- Render the primary CTA at 88px height with `{rounded.none}` (0px corners), 1px `{colors.primary-ink}` border, and `{colors.canvas}` fill. The tall flat-bottom rectangle IS the brand action signal.
- Reserve `{colors.state-info}` (`#005bff`) for inline informational links only — `--state-info` glossary anchors, "what does this mean?" affordances. Never use it as a CTA fill, never as a heading color.
- Lift product cards with a 1px `{colors.primary-ink}` hairline border instead of a drop shadow. Bose has zero shadow tokens.
- Use `{colors.accent-teal}` (`#486e8a`) as a once-per-page saturated panel — the certified-refurb banner. Repeating it dilutes the signal.
- Render circular color-option chips at `border-radius: 50%` and keep every other surface at `{rounded.none}` (0). The two-radius grammar (50% chips, 0 surfaces) is the system's geometric signature.

### Don't
- Don't fill the primary CTA with `{colors.primary-ink}` in the default state — the default is white-on-ink-border with the fill-swap reserved for hover. Reversing this collapses the catalog-tile reading.
- Don't use `{colors.state-info}` (`#005bff`) as a brand color, on a CTA, or as a heading. It is scoped to `--state-info` and lives at frequency 44 — promoting it to brand voltage destroys the single-ink discipline.
- Don't run display headlines below weight 900. Bose's ladder skips weights 600 and 700 entirely; using 700 for a heading is a tell that the brand voice was misread.
- Don't add CSS drop shadows to product cards, buttons, or modals. The system has zero shadow tokens — every elevation move uses a hairline border or a surface-color change.
- Don't shrink the primary CTA below 88px height. The tall geometry is the brand signal; a 56px CTA reads as a SaaS pill, not a department-store catalog button.
- Don't introduce a second hairline grayscale — Bose runs `#949494` for horizontal-divider rules and `#444444` for nav background, but only the graphite `#131317` for product-card and CTA borders. Mixing them in the wrong slot breaks the visual frame.
- Don't round the product card. The 0px corner is the catalog-tile rhythm — adding 8px or 12px radius converts the tile to a SaaS card and breaks the grid cadence.
- Don't repeat `{colors.accent-teal}` on a second panel. The teal moment is once-per-page — using it twice converts it from a saturated rest-stop into a chromatic theme, which the system explicitly avoids.

## Known Gaps

- Form validation, error, and success states were not surfaced on the homepage; the `--danger` (`#ad0000`) and `--success` (`#008100`) tokens render on transactional pages.
- Dark-mode counterparts were not surfaced — Bose's homepage ships a single light-canvas variant. The `--brand-primary` variable maps to the graphite ink hex, not to a CSS-variable swap.
- Hover and focus states are partially documented — `{component.button-primary-hover}` is the only state transition surfaced; focus rings and keyboard-navigation outlines are not formalized in the extracted CSS.
- The certified-banner is the only saturated panel on the homepage; the system's behavior across category landing pages (where additional accent colors may appear) is not documented here.
- The product configurator, cart, and checkout surfaces use additional components (quantity stepper, address form, payment input) that are not surfaced on the homepage and are not in this spec.
- Photography is treated as content, not as a design token; the documented `{component.category-tile}` and `{component.certified-banner}` describe the structural surface only, not the imagery they pair with.