---
version: alpha
name: "Herman Miller"
description: "American modernist heritage made digital — a clean white canvas, a single red-orange brand mark, editorial typography in the proprietary Meta grotesque, and flat photography of Eames chairs and Aeron workstations doing the work"

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f5f5f5"           # light grey section bands

  # Ink / text
  ink: "#252525"               # near-black headlines and body — lifted from #000 for warmth
  ink-secondary: "#4c4c4c"     # supporting copy, sub-labels
  ink-muted: "#6e6e6e"         # captions, metadata, placeholder text  /* estimated */
  on-dark: "#ffffff"           # text on dark panels

  # Brand accent
  primary: "#e22d00"           # Herman Miller red-orange — logo ring, primary CTA border, select accents
  on-primary: "#ffffff"
  primary-container: "#fdf0ec" # very light tint for highlighted surfaces /* estimated */

  # Interaction
  text-hover: "#3860be"        # link hover — from live site; a surprising cobalt-blue offset
  focus-ring: "#3860be"        # focus ring matches link hover
  focus-tint: "#eaedfa"        # light blue tint for focus fill /* estimated */

  # Semantic
  error: "#e22d00"             # same red-orange serves as error color
  success: "#2b7a2b"           # /* estimated */
  warning: "#c87900"           # /* estimated */

  # Borders
  border: "#d8d8d8"            # hairline dividers (from live border extractions)
  border-strong: "#252525"     # dark separator lines, bottom-borders

  # Shadow tints
  shadow-soft: "#999999"       # was rgb(153,153,153) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Meta, 'Source Sans Pro', 'Fira Sans', Arial, sans-serif"
    fontSize: 60px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -1px
  display:
    fontFamily: "Meta, 'Source Sans Pro', 'Fira Sans', Arial, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "Meta, 'Source Sans Pro', 'Fira Sans', Arial, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: -0.2px
  heading-sub:
    fontFamily: "Meta, 'Source Sans Pro', 'Fira Sans', Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Meta, 'Source Sans Pro', 'Fira Sans', Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Meta, 'Source Sans Pro', 'Fira Sans', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.63
    letterSpacing: -0.2px
  body-bold:
    fontFamily: "Meta, 'Source Sans Pro', 'Fira Sans', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "Meta, 'Source Sans Pro', 'Fira Sans', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  button-ui:
    fontFamily: "Meta, 'Source Sans Pro', 'Fira Sans', Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.57
    letterSpacing: 0px
  caption:
    fontFamily: "Meta, 'Source Sans Pro', 'Fira Sans', Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label-micro:
    fontFamily: "Meta, 'Source Sans Pro', 'Fira Sans', Arial, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.96px

spacing:
  xs: 5px
  sm: 10px
  md: 16px
  lg: 25px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 128px

rounded:
  none: 0px
  xs: 2px
  sm: 5px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 10px 20px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 10px 20px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 10px 20px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 10px 20px

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 10px 20px
  button-ghost-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 10px 20px

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
  card-product:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 16px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.xs}"
    padding: 10px 16px
  input-focus:
    backgroundColor: "{colors.focus-tint}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.xs}"
    padding: 10px 16px

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

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

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-micro}"
    rounded: "{rounded.sm}"
    padding: 4px 10px
---

# Herman Miller Design System

## Overview

Herman Miller's web presence is the product of a company that has spent eighty years arguing that good design is not decorative but functional — and that conviction saturates every pixel of its site. The canvas is a clean, uncompromising white (`{colors.background}`) that reads less like a retail backdrop and more like a museum wall: generous, neutral, respectful of the objects it holds. Eames chairs and Aeron workstations are not props here; they are the content, photographed with the same precise studio attention that their designers brought to every compound curve and tension spring. The design system's primary obligation is to stay out of the way while placing those objects in confident relief.

The typographic backbone is the proprietary **Meta** grotesque — a typeface designed by Erik Spiekermann, carrying the exact warm-rational character Herman Miller embodies. At display sizes (`{typography.display-hero}`: 60px, weight 700, tight -1px tracking), headlines assert without aggressing. At body scale (`{typography.body}`: 16px, generous 1.63 line-height, subtle -0.2px tracking), it settles into reading mode with a humanist warmth that distinguishes it from colder geometric sans choices. The OpenType `lnum` (lining numerals) feature appears site-wide, keeping price figures and specification numbers aligned and upright — a small but very Herman Miller decision: care in the details nobody consciously notices.

The brand's single chromatic move is `{colors.primary}` — a red-orange that appears in the logo mark, on primary CTA borders, and nowhere else. It is warm, heritage-coded, and specific: this is not the silicon-valley tomato red, it is the red of mid-century American manufacturing signage. Navigation links reveal `{colors.text-hover}` — a cobalt-blue that feels like an insider nod to the architectural drawings and specification documents that frame so many Herman Miller purchases. The system otherwise operates in near-black text, cloud-white backgrounds, and a minimal set of greys. The restraint is the point: when the products are this good, visual decoration is a liability.

**Key Characteristics:**
- Pure white canvas (`{colors.background}`) — museum-wall neutrality, product photography does the selling
- Single red-orange brand accent (`{colors.primary}`) — confined to the logo ring, primary CTA borders, and semantic error states
- Proprietary Meta grotesque throughout — Spiekermann's humanist rationalism, not sterile Swiss precision
- Lining numerals (`lnum` OpenType feature) on all numerical content — specification culture, invisible care
- Near-flat interface: minimal elevation, nearly no shadows, depth via contrast and whitespace
- Just two border-radius values: `{rounded.xs}` (2px) for all buttons and inputs, `{rounded.none}` for card layouts — rectilinear, not rounded
- A cobalt-blue hover state (`{colors.text-hover}`) on navigation links — a calm, precise interaction signal
- Dense breakpoint grid (27 stops) — layout adjusts with engineering precision at every meaningful viewport width
- Bootstrap grid foundations with Element Plus component infrastructure
- Typography at 60px display collapses to disciplined intermediate sizes through a controlled scale

## Colors

### Primary Surfaces
- **White** (`{colors.background}`): The dominant canvas — every page, every section starts here.
- **Light Grey** (`{colors.surface}`): Subdued section alternation and card backing — barely a tint, structural rather than decorative.

### Ink / Text
- **Near-Black** (`{colors.ink}`): All headlines, body copy, and primary interactive text. Warm dark, not pure black.
- **Secondary Grey** (`{colors.ink-secondary}`): Supporting copy, sub-labels, navigation sub-items.
- **Muted** (`{colors.ink-muted}`): Captions, metadata, placeholder text.

### Brand Accent
- **Herman Miller Red-Orange** (`{colors.primary}`): The single chromatic accent. Applied to the logo circle mark, primary CTA borders, and error/validation states. Held back from fills and backgrounds to preserve its stamp quality. Based on the mid-century American manufacturing red that permeates Herman Miller's physical identity.
- **On-Primary** (`{colors.on-primary}`): White text on the red-orange filled button.
- **Primary Tint** (`{colors.primary-container}`): A near-invisible warm tint for highlighted or hovered surfaces.

### Interaction States
- **Link / Focus Blue** (`{colors.text-hover}` / `{colors.focus-ring}`): A cobalt-blue that activates on all link hovers and keyboard focus rings. Unusual beside the otherwise warm palette — reads like a technical drawing annotation.
- **Focus Tint** (`{colors.focus-tint}`): Very light blue fill for focused input backgrounds.

### Borders & Shadows
- **Hairline** (`{colors.border}`): Standard dividers, input edges, subtle rule lines.
- **Dark Border** (`{colors.border-strong}`): Bottom-rule separators on key structural elements.
- **Shadow Tint** (`{colors.shadow-soft}`): Used only in the lightest card lift; a medium grey that keeps the shadow warm.

## Typography

### Font Family
- **Primary**: `Meta` — Erik Spiekermann's humanist grotesque. Self-hosted (woff subsets confirmed). With fallbacks: `'Source Sans Pro', 'Fira Sans', Arial, sans-serif`. No second typeface; Meta handles all contexts.
- **OpenType Features**: `"lnum"` (lining numerals) applied site-wide — pricing figures, spec dimensions, and product measurements all use aligned, upright number forms.
- *Note: Meta is a proprietary commercial typeface by FontFont. For external implementations, Source Sans Pro at weight 400/700 is a structurally close open-source alternative. Fira Sans captures a similar warmth.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 60px / 700 / -1px — primary hero headline |
| `display` | 40px / 700 / -0.5px — section feature headings |
| `heading-section` | 32px / 700 / -0.2px — content section anchors |
| `heading-sub` | 24px / 700 / -0.2px — card titles, feature sub-heads |
| `body-large` | 19px / 400 — intro copy, featured link text |
| `body` | 16px / 400 / 1.63lh — standard reading text |
| `body-bold` | 16px / 700 — emphasized body, active state labels |
| `nav-link` | 16px / 400 / 1.0lh — primary navigation |
| `button-ui` | 14px / 700 — all CTA and button labels |
| `caption` | 13px / 400 — product metadata, footnotes |
| `label-micro` | 12px / 700 / 0.96px tracking — category labels, nav sub-items, badge text |

### Principles
- **Humanist rationalism at every size**: Meta's half-open apertures and slight stroke variation distinguish it from cold geometric sans choices; the brand reads precise but never cold.
- **Generous body line-height**: 1.63 at 16px — spacious, document-quality reading rhythm, in keeping with Herman Miller's architectural specification heritage.
- **Weight 700 for headings, 400 for reading**: two-weight discipline throughout. No medium weights cluttering the hierarchy.
- **Negative tracking only at display**: -1px at 60px tightens the headline mass; body stays near-neutral (-0.2px) for comfortable reading.
- **Lining numerals site-wide**: `lnum` feature keeps every price, dimension, and specification figure optically consistent — a detail customers feel without identifying.

## Layout

### Spacing System
The complete scale is in the `spacing:` token block. Base unit: 5px (the most common small increment on the live site).

Spacing in the Herman Miller system is purposeful but not lavish. Large content sections breathe at `{spacing.3xl}` (64px) to `{spacing.4xl}` (128px), while interactive chrome stays tight (10–16px internal padding). The hierarchy is clear: product photography deserves room; functional controls do not need it.

### Grid & Container
- Max content width: approximately 1280–1400px centered, consistent with Bootstrap container logic
- Product layouts: 2–3 column editorial feature grids on desktop
- Shop/catalog: 3–4 column product card arrays
- Two-column editorial sections (image flush left + text right) alternate with full-bleed photography heroes
- No visible grid gutters — edges are flush, letting photography read as solid blocks

### Whitespace Philosophy
- **Deliberate clearing**: whitespace is a design material, not dead space — it frames the product objects with the same care as a museum mount
- **Section contrast through color and spacing**: alternating white and light-grey bands provide rhythm without decoration
- **Typography as structural anchor**: large Meta headlines provide visual weight; whitespace decompresses around them

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All page content, cards, navigation, most buttons |
| Subtle (Level 1) | `0px 2px 10px -3px {colors.shadow-soft}` | Product card hover lift, light dropdown chrome |
| Soft Glow (Level 2) | `0px 0px 12px 2px #c7c5c7` | Modals and overlay panels |
| Focus Ring | `2px inset {colors.border-strong}` / `{colors.focus-ring}` outline | Keyboard focus on interactive elements |

**Shadow Philosophy**: Herman Miller's interface is almost entirely flat — a reflection of the brand's furniture philosophy that structural integrity over decoration. Depth arrives through section contrast (white vs light-grey bands) and photography weight, not box-shadows. The one exception is a warm medium-grey lift on hovered product cards, which signals interactivity without theatrics. The focus ring switches to cobalt-blue (`{colors.focus-ring}`) to match the link hover state, keeping the interaction model internally consistent.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All cards, product tiles, layout containers |
| `xs` | 2px | Buttons and inputs — the minimum-viable softening |
| `sm` | 5px | Filter chips, switch controls, smaller UI details |
| `pill` | 9999px | Toggle-style controls, rounded search input variants |

The Herman Miller radius system is nearly binary and strongly rectilinear. Buttons and inputs get only 2px — a barely-perceptible softening that says "functional object" rather than "app icon." Cards and layout containers have zero rounding; they are frames. This parallels the furniture design ethos: the Eames chair has compound curves where the body needs them, and flat planes everywhere else. No decorative rounding.

## Components

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

### Button Variants
- **`button-primary`** — Red-orange (`{colors.primary}`) fill, white text, 2px radius. The primary CTA. Hover darkens to near-black (`{colors.ink}`), maintaining the rectilinear shape.
- **`button-secondary`** — White fill, near-black text, hairline border. Used for secondary navigation actions and "learn more" moments.
- **`button-ghost`** — White fill, red-orange text, no visible border unless hovered. Appears on product detail pages for non-committal exploration.

### Cards
- **`card`** — Zero radius, white background, 24px internal padding. Product photography fills the card edge-to-edge.
- **`card-product`** — Zero radius, light-grey surface (`{colors.surface}`), 16px padding. The dense catalog listing format.

### Inputs
- **`input`** — 2px radius, hairline border, 10px vertical / 16px horizontal padding. **`input-focus`** shifts to a soft blue tint (`{colors.focus-tint}`) with cobalt ring (`{colors.focus-ring}`) — the only moment where blue enters the interactive layer directly.

### Navigation
- **`nav-bar`** — White, Herman Miller logotype (SVG wordmark with the red ring mark), Meta 16px navigation links. Link defaults are near-black (`{colors.ink}`), hover shifts to cobalt-blue (`{colors.text-hover}`).

### Links
- **`link`** — Near-black (`{colors.ink}`) default, no underline by default. **`link-hover`** shifts to cobalt-blue (`{colors.text-hover}`) — a calm technical precision signal.

### Badges
- **`badge`** — Light grey surface, secondary-ink text, small uppercase Meta in 12px weight 700 with positive letter-spacing. Used for category labels and product-line tags.

## Do's and Don'ts

### Do
- Keep the canvas pure white (`{colors.background}`) — the products cannot assert on a tinted stage
- Reserve `{colors.primary}` for the logo mark, primary CTA borders and fills, and error validation — nowhere else
- Use Meta at weight 700 for all display and heading text; reach for weight 400 only in body reading contexts
- Apply `{rounded.xs}` (2px) to buttons and inputs universally — no rounder buttons, ever
- Use zero radius (`{rounded.none}`) on all cards and containers — they are frames, not bubbles
- Let `{colors.text-hover}` cobalt-blue fire only on hover and focus states — do not introduce it as a static color
- Apply `lnum` OpenType feature to all numerical content — pricing, dimensions, specifications
- Maintain 1.63 line-height on body text (`{typography.body}`) — the generous rhythm is architectural, not accidental

### Don't
- Don't scatter `{colors.primary}` onto section backgrounds, decorative bars, or non-CTA interactive elements
- Don't use border-radius above 5px on any button or input — the system is committed to near-rectilinear forms
- Don't introduce a second typeface — Meta carries the entire weight hierarchy without help
- Don't add drop shadows to cards or containers; elevation comes from background contrast only
- Don't break the two-weight system (400 / 700) with intermediate weights — no 600 or 300 in Meta
- Don't use warm-tinted surface backgrounds except the dedicated `{colors.surface}` grey; avoid beige, cream, or parchment
- Don't apply positive letter-spacing to headlines; the -1px tight tracking at 60px is a signature, not an option
- Don't substitute the cobalt-blue hover (`{colors.text-hover}`) for a warm accent in link states — its coolness is the contrast that makes the warm red-orange feel intentional

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Nano | <375px | Compact single-column, nav collapses, hero reflows |
| Mobile S | 375–425px | Standard single-column mobile layout |
| Mobile M | 426–530px | Wider single-column, slightly looser spacing |
| Mobile L | 531–600px | Pre-tablet, some two-column card hints |
| Tablet S | 601–767px | Two-column product grid begins |
| Tablet | 768–896px | Full two-column layout, nav transitions |
| Tablet L | 897–1023px | Near-desktop, three-column begins |
| Desktop S | 1024–1199px | Full navigation, three-column grid |
| Desktop | 1200–1280px | Standard container, editorial sections side-by-side |
| Desktop L | 1281–1599px | Generous margins, max-width container active |
| Desktop XL | ≥1600px | Maximum layout scale |

*Herman Miller ships 27 active breakpoints — a density that reflects the engineering precision embedded in its product culture. Layout adapts at every meaningful viewport increment, mirroring the ergonomic fine-tuning of the chairs themselves.*

### Touch Targets
- Buttons: 10px vertical padding on 14px text yields approximately 34–40px touch height; adequate for tap with clear labeling
- Navigation links: 16px text with generous spacing; mobile nav items sized for thumb navigation
- Product cards: fully tappable tile, large minimum touch surface

### Collapsing Strategy
- **Navigation**: full horizontal nav with Meta 16px links collapses to hamburger drawer on mobile; wordmark remains; the red ring mark stays persistent in the logo
- **Hero**: full-bleed photography maintained at all widths using `object-fit: cover`; headline scale drops from 60px → 40px → 32px; text overlay repositions center-aligned on mobile
- **Product grids**: 4-column → 3-column → 2-column → single column
- **Editorial two-column sections**: image-left / text-right stacks to image-top / text-below on mobile
- **Spacing compression**: 128px section gaps → 64px → 32px at mobile — proportional reduction maintaining editorial air
- **Typography**: display scale shrinks through controlled steps; body line-height (1.63) is maintained at all sizes for reading comfort

### Image Behavior
- Product photography is full-bleed in heroes; `object-fit: cover` maintains aspect ratio across breakpoints
- Product card images are square-cropped at fixed aspect ratio, reflow as grid children
- No art-direction breakpoints detected — studio-neutral backgrounds ensure legibility at all sizes without extra scrims

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Text: Near-Black (`{colors.ink}`)
- Secondary text: (`{colors.ink-secondary}`)
- Brand accent / CTA: Red-Orange (`{colors.primary}`)
- Link hover / focus: Cobalt-Blue (`{colors.text-hover}`)
- Border: Hairline (`{colors.border}`)
- Surface alt: (`{colors.surface}`)

### Example Component Prompts

- "Create a full-bleed hero on pure white (`{colors.background}`). Fill the left two-thirds with a studio photograph of an Aeron workstation chair on a white background. Right third: a Herman Miller red-orange circle logo mark (`{colors.primary}`), a 60px Meta headline at weight 700 with -1px tracking in near-black (`{colors.ink}`), body copy in Meta 16px weight 400 line-height 1.63, and a primary CTA button with red-orange fill (`{colors.primary}`), white text, 2px border-radius, 10px 20px padding, Meta 14px weight 700."

- "Design a product card with zero border-radius, white background. Full-bleed product photograph in the top half. Below: a category label in Meta 12px weight 700 uppercase with 0.96px tracking in `{colors.ink-secondary}`, the product name in `{typography.heading-sub}` (Meta 24px 700) in `{colors.ink}`, a price in Meta 16px 700 with `lnum` numerals, and a ghost CTA in red-orange (`{colors.primary}`) text, white fill, 2px radius."

- "Build a top navigation bar: white (`{colors.background}`) background, zero rounding. Left: Herman Miller SVG logotype with the red ring mark (`{colors.primary}`). Center-to-right: Meta 16px weight 400 navigation links in `{colors.ink}`, hover shifts to cobalt-blue (`{colors.text-hover}`). Utility icons (search, account, cart) right-aligned. Height ~64px."

- "Create a section alternating from a hero: light-grey (`{colors.surface}`) band background, 64px vertical padding. Left: Meta 32px heading at weight 700 in `{colors.ink}`, supporting body in `{typography.body}` Meta 16px 400, and a secondary button (white fill, `{colors.ink}` text, hairline `{colors.border}` border, 2px radius, 10px 20px padding). Right: editorial product photography."

- "Design a form input: white fill, 1px `{colors.border}` hairline border, 2px border-radius, 10px vertical / 16px horizontal padding, Meta 16px weight 400 placeholder text in `{colors.ink-muted}`. On focus: fill shifts to `{colors.focus-tint}`, border becomes 2px `{colors.focus-ring}` cobalt-blue."

- "Render a product specification badge: light-grey (`{colors.surface}`) background, `{colors.ink-secondary}` text, Meta 12px weight 700 uppercase, 0.96px letter-spacing, 4px 10px padding, 5px border-radius. Use `lnum` OpenType feature for any numeric content."

### Iteration Guide

1. Start on white (`{colors.background}`). If the background has any tint or warmth, reset to pure white — the products need a neutral stage.
2. Red-orange (`{colors.primary}`) is a stamp, not a system color. It belongs on the brand mark and the single primary CTA per section. Nowhere else.
3. Buttons are 2px radius — rectilinear, purposeful. If a pill or heavily rounded button appears, it breaks the design vocabulary.
4. All type is Meta; weight 700 for headings and CTAs, 400 for reading. No intermediate weights.
5. Link hover and focus ring fire cobalt-blue (`{colors.text-hover}`). This is the system's single cool note against an otherwise warm-neutral palette — do not suppress it.
6. Elevation is contrast, not shadow. Use white-to-grey section alternation for depth; add a shadow only on hovered product cards.
7. Apply `lnum` OpenType feature to every price, measurement, or specification number in the design.

---

## 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 Herman Miller. Brand names and trademarks belong to their respective owners.