---
name: Herman Miller
description: "Exemplary restraint in digital retail design, allowing large-scale product photography to drive the visual experience without UI clutter."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#252525"
  secondary: "#4C4C4C"
  neutral: "#4C4C4C"
  bg-soft: "#EBEBEB"
  bg-quiet: "#EBEBEB"
  line: "rgba(37, 37, 37, 0.15)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.3
    fontWeight: 700
    letterSpacing: "-0.5px"
  heading:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.33
    fontWeight: 700
    letterSpacing: "-0.2px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.625
    fontWeight: 400
    letterSpacing: "normal"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.57
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Premium furniture brand balancing heritage design with modern workplace solutions

*An architecture firm's portfolio meets a premium e-commerce catalog*

## Colors

High-contrast neutrals letting product photography dominate the visual hierarchy

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#252525`)** — uses `ink` token
- **Secondary text (`#4C4C4C`)** — uses `ink-soft` token
- **Muted (`#4C4C4C`)** — uses `muted` token
- **Borders (`rgba(37, 37, 37, 0.15)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans

- Use humanist sans-serif for all typography
- Maintain generous line-height for body text (1.625)
- Apply tight letter-spacing for headlines

## Layout

Two-column split for home vs. workplace paths, stacking to single column on mobile

*Rhythm:* 8px baseline grid with generous vertical padding (48px-96px) between sections

## Elevation & Depth

- Borders: Thin, subtle borders using low-opacity ink color

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Text-based link with right-pointing arrow, no visible button container
- **card:** Full-bleed image with text below, no border or shadow
- **hero:** Large headline paired with a two-column image grid

## Do's and Don'ts

**Don't:**
- Don't use drop shadows — screenshot shows completely flat, shadowless layout
- Don't use colored backgrounds for buttons — screenshot shows plain text links
- Don't use bold borders around cards — screenshot shows borderless image cards
- Don't use a busy color palette — screenshot shows a monochrome palette with white backgrounds
- Don't use centered text alignment for headings — screenshot shows left-aligned headlines
- Don't use decorative typography — screenshot shows functional, clean humanist sans-serif
- Don't use rounded corners on main components — screenshot shows sharp, square edges

---

## System Prompt (paste into AI agent)

```
This is a premium furniture e-commerce site balancing heritage design with modern workplace solutions. Key colors are white (#FFFFFF) for backgrounds, dark ink (#252525) for text, and soft gray (#EBEBEB) for footer areas. Typography uses a humanist sans-serif (Meta) at various weights, primarily 400 and 700. The layout is a clean two-column split on desktop, stacking to single column on mobile. Critical donts: never add drop shadows to the flat layout, never use colored button backgrounds (links are plain text), and never apply rounded corners to sharp-edged cards. The design prioritizes large product photography over decorative UI elements.
```