# Herman Miller — Marketing site Design Spec

> Source: hermanmiller.com (live DOM, computed styles), 2026-07-28. Adobe AEM.
> Coverage: home (geo-redirects to the regional store; captured at the AU store,
> chrome is identical). No `:root` design tokens (AEM/hand-authored) — palette
> read from the computed-style census. 0 stylesheets cross-origin.
> Reality check: hint ("Furniture — mid-century modern, colour-blocked") describes
> the BRAND HERITAGE, not the web chrome. The live site is a clean WHITE monochrome
> catalogue: ink #252525 on white with dark navy/slate section bands, colour carried
> entirely by full-bleed product photography. **The famous Herman Miller red appears
> NOWHERE in computed styles** — the wordmark is a red raster logo, so the red is not
> a UI token and is left out of §2 rather than invented. One typeface (FF Meta) does
> the whole site. `claude-pulse` in the motion census belongs to the Claude-in-Chrome
> extension (not the site) and is excluded; `onetrust-*` is consent-widget chrome.

## 1. Visual Theme & Atmosphere

A calm, editorial furniture catalogue. The page is white with a single warm-grey
ink (#252525), broken by deep navy/slate bands (#1f2532, #27455c) that frame
long-form stories. Everything is set in FF Meta — Erik Spiekermann's humanist
sans — at a bold 700 for headlines and 400 for body, giving the whole site one
recognisable voice. Depth is minimal (2px radius dominant, thin hairlines,
occasional soft product-card glow); the drama is deferred to full-bleed product
photography of the chairs. No gradients, no canvas, no colour-blocking in the
chrome. Feels: considered, editorial, quietly premium, engineered.

## 2. Color Palette & Roles

| Token | Hex | Role / usage |
|---|---|---|
| ink | #252525 | primary text, primary CTA fill (1383× dominant) |
| ink-2 | #4c4c4c | secondary text, button :active fill |
| muted | #616161 | tertiary text, input :focus border |
| nav | #323131 | nav link text (700) |
| canvas | #ffffff | page + card background |
| surface | #fafafa | alternating section band |
| surface-2 | #ebebeb | section band |
| border | #dddddd | 1px hairlines |
| border-input | #cccccc | input border |
| band-slate | #27455c | dark story band |
| band-navy | #1f2532 | darkest band, 6px left-rule accent |
| hover | #464646 | primary button :hover fill |
| link | #3860be | inline text link |

Rules: the chrome is strictly MONOCHROME ink-on-white — the only chromatic UI
value is the #3860be link. Colour otherwise lives in photography and the two
dark bands. The Herman Miller red is confined to the logo raster; never use it as
a UI fill or text colour.

## 3. Typography Rules

One family: **FF Meta** ("Meta", humanist sans by Erik Spiekermann) for
everything. Specimen stand-in: **Fira Sans** (Spiekermann/Carrois, the closest
open descendant of FF Meta) — the site ships FF Meta; note the swap.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display h1 | 60px | 700 | -1px |
| Section h2 | 40px | 700 | -0.5px |
| Sub h3 | 16/24px | 700 | -0.2px |
| Body p | 16/26px | 400 | -0.2px |
| Nav link | 12px | 700 | normal |
| Button | 16px | 700 | -0.2px |

Patterns: binary weight system — 700 for every heading, nav item and button,
400 for body; nothing in between. Tracking is a slight, consistent negative
(-0.2 to -1px), tightening as size grows. No uppercase transform in the chrome.

## 4. Component Stylings

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary CTA | #252525 fill, #fff text, 4px solid #252525 border, 5px radius, 48px h, pad 0-32 | bg + border #464646 | (inherits) | bg + border #4c4c4c | not captured |
| Light CTA (on photo) | #fff fill, #252525 text, 4px solid #fff border, 5px radius, 48px | text #ebebeb | — | text #cccccc | — |
| Nav link | #323131, Meta 12/700 | color 0.1s ease | — | — | — |
| Text input | #fff, 1px #cccccc border, 5px radius, 40px h, pad-left 40 | — | border #616161, `outline:0` (anti-pattern) | — | — |
| Carousel arrow | #fff circle, 50% radius, 48px | — | — | — | — |

Primary button is a heavy 4px-border pill-let at 5px radius — the border matches
the fill, so hover/active simply darken both together (#252525 → #464646 →
#4c4c4c). Input focus strips the outline but darkens the border; recommend
adding `outline:2px solid #616161; outline-offset:2px`.

## 5. Layout Principles

Full-width alternating bands: white product sections interleaved with #fafafa /
#ebebeb tints and occasional #1f2532 / #27455c dark story bands (the dark ones
carry a 6px left-rule accent). Hero is a split — left-aligned FF Meta headline +
body + CTA against a full-bleed photographic right. Content sits on a standard
max-width container; dense device-targeted breakpoint ladder for the store grid.

## 6. Depth & Elevation

Radius scale (by frequency): 2px (dominant), 5px (buttons/inputs), 4px, 20px,
50% (arrows), 2.5px, 50px. Shadows are soft and rare:
`rgba(0,0,0,0.1) 0 4px 4px` (floating chrome), `rgba(0,0,0,0.3) 0 0 8px`
(overlays), and a grey product-card glow `rgb(153,153,153) 0 2px 10px -3px`.
Borders do most structural work: 1px #dddddd hairlines, a 4px #252525 button
border, and a 6px #1f2532 left-rule on dark bands. Elevation philosophy:
borders + band colour first, shadow only on truly floating elements.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| color | 0.1s | ease | links, nav, button text (house transition, 164×) |
| left | 0.2s | ease | carousel slide |
| max-height | 1.3s | ease | accordion expand |
| all | 0.25s | ease-out | hover chrome |
| opacity | 0.1s | linear | fades |

House transition is **color 0.1s ease**. Authored keyframes: `rotate360`,
`clockwise`, `donut-rotate` (spinners), `videoSwapIn/Out`, `appearIn`,
`showingAnimation`/`hideAnimation`, `progress`. Ships **1 `prefers-reduced-motion`
block**. (`onetrust-fade-in` is consent-widget; `claude-pulse` is the browser
extension, both excluded.) Nothing animates at rest.

## 8. Backgrounds, Effects & WebGL

Flat: **no gradients, no backdrop-filter, no canvas/WebGL, no grain, no video**
currently on the page (video-swap keyframes exist for hero rotators but 0 videos
loaded). 1 raster background layer. Atmosphere is entirely full-bleed product
photography over solid white / dark bands.

## 9. Do's and Don'ts

### Do
- Keep the chrome monochrome: ink #252525 on white, dark bands #1f2532/#27455c.
- Set everything in FF Meta — 700 for headings/nav/buttons, 400 for body.
- Use a heavy 4px-border button at 5px radius; darken fill+border together on hover.
- Let product photography carry all the colour.
- Keep tracking a slight negative (-0.2 to -1px).

### Don't
- Don't use the Herman Miller red as a UI fill or text — it lives in the logo only.
- Don't introduce a second typeface or a weight between 400 and 700.
- Don't colour-block the chrome; the "mid-century colour" is product, not UI.
- Don't strip focus outlines (the input does — add a ring instead).

## 10. Responsive Behavior

| Breakpoint | What changes |
|---|---|
| ≤767 / min 768 | mobile→tablet: nav collapses, hero stacks |
| min 992 / min 1200 | desktop grid columns |
| min 1600 | wide container cap |

Dense device-targeted ladder (374/400/425/476/530/550/575/576/600/699/767/768/
896/991/992/1024/1199/1200/1599/1600) — a store-grid artefact. 0
`prefers-color-scheme: dark` blocks (no dark theme), 0 container queries, 1
reduced-motion block.

## 11. Agent Prompt Guide

- Canvas `#ffffff` · Text `#252525` · Muted `#616161` · Border `#dddddd` · Bands `#1f2532` / `#27455c` · Link `#3860be`
- Font: FF Meta (Fira Sans stand-in) · Body 16/26px 400 · Headings 700 · Radius 2px default / 5px controls · Button height 48px
- Focus: none shipped — recommend `outline:2px solid #616161; offset 2px` · Hover fill: `#464646`

<herman-miller-marketing_design_language>
Clean white furniture catalogue set entirely in FF Meta (Fira Sans stand-in),
Spiekermann's humanist sans, on a binary weight system — 700 for every heading,
nav item and button, 400 for body, nothing between, tracking a slight negative
(-0.2 to -1px). Ink is a warm near-black #252525 on white; structure is 1px
#dddddd hairlines and a dominant 2px radius, with deep navy/slate bands
(#1f2532, #27455c, 6px left-rule) framing long-form stories. Primary CTA is a
heavy 4px-border button, #252525 fill / white text at 5px radius, 48px tall, that
darkens fill and border together on hover (#464646) and active (#4c4c4c). Depth
is minimal: soft rare shadows, borders and band colour first. No gradients,
canvas or colour-blocking — all colour is product photography. House transition
is color 0.1s ease. Feels: editorial, considered, quietly premium. Avoid: using
the Herman Miller red anywhere in the UI (it lives in the logo only), a second
typeface, weights between 400 and 700, or colour-blocked chrome.
</herman-miller-marketing_design_language>