---
version: alpha
name: "Westman Atelier"
description: "Token-first design system reference for Westman Atelier — a luxury clean-beauty brand defined by a stark black-and-white editorial canvas, proprietary uppercase sans typography, Caslon italic accents, and the restraint of high-fashion minimalism."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f2f2f2"       # light section dividers and panel fills — rgb(242,242,242)
  surface-dark: "#000000"  # hero sections, footer, full-bleed dark panels

  # Text / ink
  ink: "#000000"
  ink-muted: "#666666"     # secondary labels, captions, supporting copy
  on-background: "#000000"
  on-surface: "#000000"

  # Brand accent
  primary: "#000000"       # primary CTA, key interactive elements
  on-primary: "#ffffff"
  primary-container: "#f2f2f2"  # muted tinted container for secondary surfaces

  # State / interaction
  text-hover: "#333333"    # darkened softening on hover — estimated; lightened from solid black
  focus-ring: "#000000"
  focus-tint: "#000000"    # was rgba(0,0,0,0.1) — Google format requires hex

  # Borders
  border: "#000000"        # 1px solid black — primary structural border
  border-light: "#f2f2f2"  # was rgba(0,0,0,0.1) → approximated as light grey for dividers

  # Shadow tints
  shadow-soft: "#000000"   # was rgba(0,0,0,0.25) — Google format requires hex

typography:
  display-hero:
    fontFamily: "WestmanAtelierAug2024, Caslon 540, Caslon-540-Italic, Georgia, serif"
    fontSize: 46px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 0px
  display:
    fontFamily: "WestmanAtelierSansUC-Regular, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 46px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 2.3px
  heading-section:
    fontFamily: "WestmanAtelierSansUC-Regular, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 38px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 1.9px
  heading-sub:
    fontFamily: "WestmanAtelierSansUC-Regular, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 1.5px
  editorial-italic:
    fontFamily: "Caslon-540-Italic, caslon540_bt_italic, Georgia, serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px
  body-large:
    fontFamily: "WestmanAtelierSansUC-Regular, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 0.9px
  body:
    fontFamily: "WestmanAtelierSansUC-Regular, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0.8px
  nav-link:
    fontFamily: "WestmanAtelierSansUC-Regular, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 0.7px
  button-ui:
    fontFamily: "WestmanAtelierSansUC-Regular, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 0.7px
  caption:
    fontFamily: "WestmanAtelierSansUC-Regular, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 0.55px

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

rounded:
  none: 0px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 20px
    border: 1px solid {colors.border}
  button-primary-hover:
    backgroundColor: "{colors.text-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 20px
    border: 1px solid {colors.border}
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 20px
    border: 1px solid {colors.border}
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 20px
    border: 1px solid {colors.border}
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px
    border: 0px none transparent
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.none}"
    padding: 24px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 11px 0px
    border: 0px none transparent
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 11px 0px
    border: 0px none transparent
  input-outlined:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    border: 1px solid {colors.border-light}
  input-outlined-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    border: 1px solid {colors.border}
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  badge-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    border: 1px solid {colors.border}
  nav-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-primary}"
    typography: "{typography.nav-link}"
---

# Westman Atelier Design System

## Overview

Westman Atelier's digital presence is high-fashion restraint made functional — a stark monochrome system where every color decision collapses down to two: pure black (`{colors.ink}`) and pure white (`{colors.background}`). There is no brand accent in the conventional sense. There is no blush-pink or warm taupe borrowed from the product palette. The chrome of the site IS the product: geometric precision, editorial whitespace, and a typographic system built from two proprietary typefaces that carry the entire visual identity. The effect is a luxury counter in digital form — the brand trusts its photography and its packaging to supply warmth, while the interface supplies nothing but structure.

The typographic architecture is the most distinctive element in the system. `WestmanAtelierSansUC-Regular` — a tightly spaced, all-uppercase grotesque built for the brand — runs at every size from 11px micro-labels to 46px section headers, always with proportional letter-spacing (0.55px–2.3px relative to size). This uppercase-only mode is not stylistic whimsy; it enforces a visual register associated with fashion mastheads and high-end packaging. Editorial moments, product testimonials, and descriptive copy switch to `Caslon-540-Italic`, a Caslon optical italic that introduces the only curve and warmth in an otherwise geometrically flat system. These two typefaces — uppercase sans and Caslon italic — are the system's entire character.

The third defining trait is `{colors.surface-dark}` as a genuine design tool. Rather than using a tinted panel or a warm grey for contrast sections, Westman Atelier flips to full black — footers, hero overlays, and promotional banners all live on `#000000` with inverted `{colors.on-primary}` text. The transition between white and black sections is typically hard-cut with no gradient buffer, giving the site the feel of a luxury fashion editorial spread rather than a consumer e-commerce page.

**Key Characteristics:**
- Pure black-and-white palette with no decorative accent color — brand color lives in the product photography, not the chrome
- `WestmanAtelierSansUC-Regular` at all typographic sizes with proportional letter-spacing (0.05em baseline) — uppercase enforced system-wide
- `Caslon-540-Italic` as the exclusive editorial serif — appears for descriptive body copy, quotes, and product story moments
- `{rounded.none}` everywhere — sharp rectangular buttons, sharp inputs, sharp cards; pill (`{rounded.pill}`) reserved for micro-labels only
- Hard-cut black/white section transitions — no gradient scrims, no grey buffers between `{colors.background}` and `{colors.surface-dark}`
- Full-bleed product photography as the sole source of warmth, color, and texture
- Navigation as a minimal utility: 14px sans-UC, 1px solid `{colors.border}` bottom, uppercase labels
- Generous padding with 8px base unit — sections breathe rather than pack
- `0.45s ease` transitions on all interactive elements — a signature unhurried reveal pace
- Fade-in (`fadeIn 1s ease`) on product cards for a soft editorial entrance
- Primary CTAs use all-uppercase `{typography.button-ui}` at 14px with 1px solid black border — never pill-shaped
- `rgba(0,0,0,0.25)` drop-shadow (flattened to `{colors.shadow-soft}`) for modal and overlay depth — the only elevation in the system

## Colors

### Primary
- **White Canvas** (`{colors.background}`): The default page surface. Product grids, content sections, and the navigation bar all sit on pure white. Never tinted, never warm.
- **Black Ink** (`{colors.ink}`): All primary text, primary button backgrounds, borders, and the wordmark. Pure black is both the brand voice and the interaction color.

### Brand Accent
- **Black** (`{colors.primary}`): Westman Atelier has no secondary brand accent. Black functions as the sole CTA color, the border color, and the active state. Its scarcity in the palette is its power — there is nothing to dilute it.

### Surface & Panel
- **Light Surface** (`{colors.surface}`): Rendered as `rgb(242,242,242)` — a near-white used for secondary panels, filter strips, and light dividers. Barely distinguishable from white; its role is structural, not decorative.
- **Dark Canvas** (`{colors.surface-dark}`): Full black used for footer, hero overlays, and promotional panels. The hard cut from white to black is a deliberate brand gesture.

### Text States
- **Ink Muted** (`{colors.ink-muted}`): `#666666` mid-grey for secondary labels, supporting copy, and inactive states. The only step of grey in the system.
- **Text Hover** (`{colors.text-hover}`): Approximated dark grey (`#333333`) for hover states where a full black would feel jarring — estimated from the transition context.
- **Border** (`{colors.border}`): 1px solid black — the structural line used for buttons, input outlines, and section dividers.
- **Border Light** (`{colors.border-light}`): `rgba(0,0,0,0.1)` flattened to `#f2f2f2` — whisper-quiet horizontal rules on list items and fine dividers.

### Shadow
- **Shadow Soft** (`{colors.shadow-soft}`): `rgba(0,0,0,0.25)` flattened to `#000000` — used for modal and overlay depth via `0 0 4px 0 rgba(0,0,0,0.25)`. The only shadow in the system; elevation is otherwise flat.

## Typography

### Font Family
- **Brand Sans (all-caps)**: `WestmanAtelierSansUC-Regular` — a proprietary all-uppercase grotesque with fallbacks `HelveticaNeue, Helvetica Neue, Helvetica, Arial`. The system typeface for every size and function.
- **Brand Display / Editorial Serif**: `WestmanAtelierAug2024` — a proprietary custom display font (likely a serif or script variant) used for large editorial headlines. Fallbacks: `Helvetica, Arial`.
- **Editorial Italic**: `Caslon-540-Italic` (also `caslon540_bt_italic`) — a Caslon optical italic with fallbacks `TimesNewRoman, Times New Roman, Times, Baskerville, Georgia`. Used exclusively for descriptive copy, quotes, and editorial story moments.
- **OpenType Features**: Standard. No stylistic alternates. The proprietary typefaces carry their own character without additional feature activation.

*Note: Both `WestmanAtelierSansUC-Regular` and `WestmanAtelierAug2024` are commercially licensed typefaces not available on Google Fonts. Closest external substitutes: Helvetica Neue Condensed or Futura PT for the sans-UC register; EB Garamond Italic or Cormorant Garamond Italic for the Caslon editorial role.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Large editorial section titles, hero text, campaign statements — `WestmanAtelierAug2024` at 46px |
| `display` | Primary section headers in sans-UC — 46px, 2.3px letter-spacing, uppercase |
| `heading-section` | Sub-section titles — 38px sans-UC, 1.9px letter-spacing |
| `heading-sub` | Tertiary content headings — 30px sans-UC, 1.5px letter-spacing |
| `editorial-italic` | Caslon italic for product descriptions, brand quotes, ingredient stories — 22px |
| `body-large` | Lead body copy — 18px sans-UC, 0.9px letter-spacing, generous line-height |
| `body` | Standard body copy — 16px sans-UC, 0.8px letter-spacing |
| `nav-link` | Navigation labels — 14px sans-UC, 0.7px letter-spacing, uppercase |
| `button-ui` | Button and CTA labels — 14px sans-UC, 0.7px letter-spacing, tight line-height |
| `caption` | Micro-labels, product tags, badge text — 11px sans-UC, 0.55px letter-spacing |

### Principles
- **Uppercase by design**: `WestmanAtelierSansUC-Regular` is an all-caps typeface — `text-transform: uppercase` is implied by the font itself. Never mix case in the sans typeface.
- **Letter-spacing is proportional**: Every size step carries a corresponding letter-spacing value (roughly 0.05em). Never use the sans typeface at 0px tracking — it destroys the brand register.
- **Caslon as guest voice**: `Caslon-540-Italic` appears only for editorial narrative. Never use it for UI labels, navigation, or buttons.
- **No weight variation**: Both proprietary typefaces are available in a single weight (400). Visual hierarchy is achieved through size, letter-spacing, and typeface switching — never through bold.
- **Hard uppercase authority**: The all-caps system communicates authority without shouting. This restraint — uppercase at every level, but modest in size — is the brand's typographic signature.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

Westman Atelier's spacing is editorial in pace — sections use generous vertical padding (48–120px) to give photography and copy room to breathe. The grid is product-focused, with full-bleed panels and contained content columns alternating across the scroll.

### Grid & Container
- Max content width: ~1440px (breakpoints span 400–1440px)
- Product grids: 2–4 column layouts that collapse on mobile
- Hero sections: full-bleed photography with overlaid typography
- Editorial strips: alternating full-black and full-white panels with centered or edge-aligned copy

### Whitespace Philosophy
- **Section breathing**: Major content blocks are separated by 64–120px of vertical space. The site never feels crowded.
- **Edge-to-edge philosophy for imagery**: Product photography always runs full-bleed or edge-to-column — never floated with equal whitespace on all sides.
- **Typography isolation**: Headlines at 38–46px are given generous breathing room above and below — they function as visual anchors, not just section labels.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default for cards, buttons, inputs at rest |
| Modal / Overlay (Level 1) | `0 0 4px 0 rgba(0,0,0,0.25)` | Drawers, overlays, video embeds |
| Emphasized Modal (Level 2) | `0 0 18px 0 rgba(0,0,0,0.2)` | Secondary overlay emphasis |
| Full Overlay (Level 3) | `0 0 24px 0 rgba(0,0,0,0.3)` | Full-screen takeover dialogs |
| Focus Ring | `outline: 2px solid {colors.focus-ring}` | Keyboard focus indicator |

**Shadow Philosophy**: Westman Atelier's elevation is minimal by deliberate choice. The base state of every surface — cards, product tiles, navigation — is completely flat. Shadow (`0 0 4px 0 rgba(0,0,0,0.25)`) appears only for overlays and modals where spatial context is necessary for usability. The brand achieves depth through the hard black-to-white section contrast rather than through layered shadows. Nothing floats; everything sits on a flat editorial surface.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything — buttons, inputs, cards, modals, product tiles. Sharp rectangular is the brand's shape language. |
| `pill` | 9999px | Micro-labels and badge chips only. Appears sparingly for contrast against the sharp system. |

Westman Atelier is a binary radius system: `{rounded.none}` for all primary UI surfaces, `{rounded.pill}` for small decorative chips. There is no mid-range (4px, 8px, 16px) anywhere in the system. The sharpness is intentional — it echoes the geometry of high-fashion packaging and luxury beauty counter trays.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button Variants

- **`button-primary`** — Black background (`{colors.primary}`), white label (`{colors.on-primary}`), 1px solid black border, 0px radius. The canonical CTA — "SHOP NOW", "ADD TO BAG", "SUBSCRIBE". Uppercase via the font itself.
- **`button-secondary`** — White background, black label, 1px solid black border. Outline button for secondary actions. On hover, fills to full black (see `button-secondary-hover`).
- **`button-ghost`** — No background, no border. Used for inline text-link actions and low-hierarchy navigation triggers.
- **Inverted (on dark surfaces)**: Swap `{colors.background}` for `{colors.surface-dark}` and invert label/border to `{colors.on-primary}`.

### Cards
Product tiles are flat white (`{components.card}`) with no border and no shadow at rest. On dark panel sections, `{components.card-dark}` provides a black surface with white text. Cards fade in via `fadeIn 1s ease` keyframe on page load — the signature slow reveal that gives the site its editorial pace.

### Inputs
Two input patterns coexist: the minimal underline-free email capture (`{components.input}`) used in hero newsletter sections — no visible border, just a bottom-edge visual from context — and the outlined field (`{components.input-outlined}`) used in account forms with a light `{colors.border-light}` border that darkens to `{colors.border}` on focus. Both are `{rounded.none}`. Focus state uses `outline: 2px solid {colors.focus-ring}` with no inner glow.

### Badges / Tags
`{components.badge}` — `{colors.surface}` background with `{colors.ink}` text, `{rounded.pill}` shape, 11px `{typography.caption}`. Used for product category labels and filter chips. `{components.badge-dark}` — inverted for dark panel contexts.

### Navigation
Top navigation splits into two modes: light nav (`{components.nav}`) on product and editorial pages — white background, black text, 1px black bottom border; and dark nav (`{components.nav-dark}`) on campaign and hero pages — black background, white text. Both use `{typography.nav-link}` at 14px with 0.7px letter-spacing. Transitions between modes animate at `0.45s ease`.

## Do's and Don'ts

### Do
- Use `{colors.ink}` (pure black) for all primary text, borders, and CTAs — it is both the text color and the brand color
- Set letter-spacing on `WestmanAtelierSansUC-Regular` proportionally: 0.05em relative to font size at every step
- Switch to `Caslon-540-Italic` for editorial narrative, product stories, and brand quotes — it is the only serif in the system
- Default to `{rounded.none}` for all buttons, inputs, cards, and containers — sharpness is the brand's shape language
- Use hard black/white panel cuts for section contrast — never grey or gradient transitions between `{colors.background}` and `{colors.surface-dark}`
- Apply `0.45s ease` to all interactive transitions (button hover, overlay appear, nav state change)
- Give product photography full-bleed treatment — let images carry all warmth and texture
- Use `{typography.caption}` (11px, 0.55px spacing) for micro-labels and product category tags
- Reserve `{rounded.pill}` exclusively for badge chips — never apply it to buttons or inputs
- Apply `fadeIn 1s ease` to product card grids for the brand's signature slow editorial entrance

### Don't
- Don't introduce any decorative accent color — the palette is binary (black and white only); product photography supplies color
- Don't mix case in `WestmanAtelierSansUC-Regular` — it is an uppercase-only typeface; never lowercase it
- Don't use `Caslon-540-Italic` for UI — it is editorial only; navigation, buttons, and labels are sans-UC only
- Don't add rounded corners to buttons or inputs — `{rounded.none}` is non-negotiable in this system
- Don't use mid-grey surfaces for section contrast — the system alternates only between white (`{colors.background}`) and black (`{colors.surface-dark}`)
- Don't apply multiple shadow layers for decoration — shadows exist only for overlay depth, never for card lift or button emphasis
- Don't use bold weights — both proprietary typefaces are weight 400 only; hierarchy comes from size and letter-spacing
- Don't compress letter-spacing below the proportional baseline — collapsed tracking destroys the brand's typographic register
- Don't use gradients — all surfaces are flat solid fills
- Don't center navigation or body copy by default — the system favors edge-aligned and left-anchored type, centering reserved for hero moments only

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <400px | Single-column layout, compact padding, full-width CTAs |
| Mobile | 400–767px | Single-column, hamburger nav, stacked hero copy |
| Tablet | 768–1024px | 2-column product grids, expanded navigation |
| Desktop | 1025–1199px | Full horizontal nav, 3-column product grids |
| Large Desktop | ≥1200px | Maximum grid width, full editorial spacing, 4-column grids |

### Touch Targets
- Primary buttons: minimum 44px height via 12px vertical padding plus 14px line-height at 1.0
- Navigation links: full-width tap zones in mobile drawer
- Product tiles: full card area is tappable, not just title text
- Form inputs: 11px vertical padding minimum for comfortable mobile input

### Collapsing Strategy
- **Nav**: Horizontal nav collapses to hamburger icon; drawer opens as full-width overlay on black background
- **Hero**: Full-bleed photography persists; overlaid typography stacks vertically with tighter padding
- **Product grids**: 4-column desktop → 2-column tablet → 1-column mobile; gutters scale proportionally
- **Section padding**: 96–120px desktop reduces to 48–64px on mobile while preserving editorial rhythm
- **Dark/white panel transitions**: Retained on all viewports — the hard cut is a brand gesture, never removed on mobile

### Image Behavior
- Product photography maintains square or portrait aspect ratios (1:1, 4:5, 3:4) across breakpoints
- Full-bleed hero images scale to viewport width with `object-fit: cover`
- Editorial editorial photography uses aspect-ratio locking to prevent reflow
- The wordmark always renders at full type — never reduced to a mark or icon

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (#ffffff)
- Primary text: `{colors.ink}` (#000000)
- Secondary text: `{colors.ink-muted}` (#666666)
- CTA / border: `{colors.primary}` (#000000)
- Dark panel: `{colors.surface-dark}` (#000000)
- Light panel: `{colors.surface}` (#f2f2f2)
- Focus ring: `{colors.focus-ring}` (#000000)

### Example Component Prompts

- "Create a hero section on `{colors.surface-dark}` (#000000). Full-bleed product photograph behind a centered overlay block. Overlay: `{typography.display}` (WestmanAtelierSansUC-Regular, 46px, weight 400, line-height 1.20, letter-spacing 2.3px, uppercase) in `{colors.on-primary}` (#ffffff). Below the headline: one white-outline CTA — `{components.button-secondary}` with white border and white label, `{rounded.none}`, padding 12px 20px."
- "Design a product tile for a clean-beauty grid. White background (`{colors.background}`), no border, no shadow, `{rounded.none}`. Square product image fills the top. Below: 11px brand category label in `{typography.caption}` (letter-spacing 0.55px, uppercase) in `{colors.ink-muted}`, then product name in `{typography.body}` (16px, 0.8px spacing), then price in `{typography.nav-link}` (14px). Tile fades in on load via `fadeIn 1s ease`."
- "Build a primary CTA button — `{components.button-primary}`: black fill (`{colors.primary}`), white label (`{colors.on-primary}`), `{typography.button-ui}` (14px WestmanAtelierSansUC-Regular, weight 400, letter-spacing 0.7px), `{rounded.none}`, 1px solid black border, padding 12px 20px. Hover darkens background to `{colors.text-hover}` at `0.45s ease`."
- "Create a newsletter email capture input on a black hero. Email field: `{components.input}` — transparent background, `{colors.on-primary}` text, no border, `{rounded.none}`, padding 11px 0px. Inline submit button: `{components.button-secondary}` with white border and white label on black background. All type in `{typography.body}` uppercase sans."
- "Generate a product navigation bar. Light mode: `{components.nav}` — white background, `{colors.ink}` text, `{typography.nav-link}` (14px, 0.7px letter-spacing, uppercase), 1px solid `{colors.border}` bottom rule. Dark mode: `{components.nav-dark}` — black background, `{colors.on-primary}` text, same typography. Transition between modes at `0.45s ease`."

### Iteration Guide

1. Start with the canvas — either pure white (`{colors.background}`) for product and content pages, or full black (`{colors.surface-dark}`) for campaign and hero moments. There is no middle ground.
2. Set all type in `WestmanAtelierSansUC-Regular` with proportional letter-spacing (0.05em). Switch to `Caslon-540-Italic` only for editorial narrative paragraphs or brand quotes.
3. Default to `{rounded.none}` everywhere — sharp rectangular is the system's shape vocabulary. Only use `{rounded.pill}` for micro-label badge chips.
4. Apply `0.45s ease` to every transition — hover state, overlay open, section reveal. This is the brand's signature motion pace.
5. Treat black as the sole accent — `{colors.ink}` is simultaneously the text color, the border color, the CTA fill, and the focus ring. Nothing else competes.
6. Size letter-spacing proportionally: caption at 0.55px, nav/button at 0.7px, body at 0.8px, large headings at 1.5–2.3px.
7. Place product photography as the sole source of warmth, texture, and color — the chrome of the interface supplies only structure.

---

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