A furniture catalogue whose restraint is the whole idea: despite a mid-century, colour-blocked brand heritage, the live site is strictly MONOCHROME — a warm near-black ink #252525 on white, broken only by deep navy and slate story bands (#1f2532, #27455c), with every scrap of colour deferred to full-bleed product photography of the chairs. The single most distinctive move is typographic: the entire site is set in FF Meta, Erik Spiekermann’s humanist sans, on a BINARY weight system — 700 for every heading, nav item and button, 400 for body, and nothing in between — with a slight consistent negative tracking (-0.2px on body to -1px on the 60px display). The famous Herman Miller red is captured as a genuine ABSENCE: it appears NOWHERE in the computed styles because the wordmark is a red raster logo, so the red is recorded as logo-only rather than invented as a UI token. The primary CTA is a heavy 4px-border button, #252525 fill with white text at a 5px radius and 48px height, whose hover and active states darken fill and border together (#464646 then #4c4c4c) rather than shifting colour. Structure is 1px #dddddd hairlines and a dominant 2px radius, with soft rare shadows and a 6px #1f2532 left-rule on dark bands doing the heavy lifting instead of elevation. There are no gradients, no canvas and no colour-blocked chrome; motion is a quiet color 0.1s ease house transition across 164 elements, backed by a reduced-motion block, with nothing animating at rest.
⚠ site only
Browse Herman Miller in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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:rootdesign 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-pulsein the motion census belongs to the Claude-in-Chrome extension (not the site) and is excluded;onetrust-*is consent-widget chrome.
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.
| 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.
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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.