---
version: alpha
name: Hay
description: A stark white Scandinavian canvas ruled by near-black and a single deep teal, where editorial ITC Baskerville and workhorse Helvetica share the stage with full-bleed campaign photography and maximally flat geometry.

colors:
  # Surface / canvas
  background: "#ffffff"         # stark white retail canvas
  surface: "#f2f2f2"            # light grey section bands, input backgrounds

  # Ink / text
  ink: "#0a0a0a"                # near-black primary text and headings
  ink-secondary: "#595959"      # supporting copy, secondary labels  /* estimated */
  ink-muted: "#999999"          # captions, placeholders, disabled   /* estimated */
  on-dark: "#ffffff"            # text on teal or dark surfaces

  # Brand accent — HAY signature teal
  primary: "#007565"            # HAY teal — the single chromatic identity color
  primary-dark: "#005a4e"       # darker teal for hover/pressed states /* estimated */
  on-primary: "#ffffff"         # text on teal surfaces

  # Interaction
  link-hover: "#3860be"         # the distinctive cobalt-blue link hover
  focus-ring: "#007565"         # teal focus ring following brand accent

  # Borders
  border: "#e0e0e0"             # hairline dividers, input edges      /* estimated */
  border-strong: "#0a0a0a"      # solid black borders on strong contrast elements

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

typography:
  display-hero:
    fontFamily: "NeueHelvetica55Roman, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -0.5px
  display:
    fontFamily: "NeueHelvetica55Roman, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.25px
  heading-editorial:
    fontFamily: "ITCNewBaskervilleRoman, Georgia, 'Times New Roman', serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 1.1px
  heading-section:
    fontFamily: "NeueHelvetica55Roman, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sub:
    fontFamily: "NeueHelvetica55Roman, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0px
  body-large:
    fontFamily: "NeueHelvetica55Roman, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "NeueHelvetica55Roman, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "NeueHelvetica55Roman, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.6px
  button-ui:
    fontFamily: "NeueHelvetica55Roman, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.14px
  caption:
    fontFamily: "NeueHelvetica55Roman, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 1px
  label-uppercase:
    fontFamily: "NeueHelvetica55Roman, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 2px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 128px

rounded:
  none: 0px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 13px 27px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  button-teal:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-teal-hover:
    backgroundColor: "{colors.primary-dark}"
    textColor: "{colors.on-primary}"

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

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-strong}"

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

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

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 2px 8px

  tag-editorial:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label-uppercase}"
    rounded: "{rounded.none}"
    padding: 2px 0px
---

# Hay Design System

## Overview

Hay speaks through contrast and restraint. The canvas is an unqualified white (`{colors.background}`) with a near-black ink (`{colors.ink}`) that reads warmer than pure black — the deliberate temperature of quality offset print. The design's single chromatic act is the brand's teal (`{colors.primary}`), a deep muted green that nods to Copenhagen's copper-roofed architecture, deployed as a full campaign panel or a focused hover state, never scattered as a motif. Everything else — backgrounds, surfaces, borders — stays achromatic. It is a system that earns your attention by giving very little away.

The typography is the most distinctive decision in Hay's arsenal. Two faces share the stage: **Neue Helvetica 55 Roman** handles navigation, body, and commerce UI with Swiss-modernist composure, while **ITC New Baskerville Roman** (`{typography.heading-editorial}`) appears at 20px uppercase with 1.1px letter-spacing for editorial headings and category labels. The Helvetica is almost neutral — a zero-temperature instrument. The Baskerville introduces warmth and provenance, the visual gesture of a design brand that understands craft history. The tension between the two is the typographic signature: rational system, humanist anchor.

The third element is maximum flatness. The radius scale is binary: `{rounded.none}` for everything that structures the page and `{rounded.pill}` reserved for the rarest of interactive chips. No softened corners on cards, inputs, or buttons. No gradients. The rare shadows are minimal utility lifts (`0px 0px 18px rgba(0,0,0,0.2)`) used only in dropdowns and overlays, counted in single digits across the site. Product photography — always editorial, always deliberate — does the expressive lifting, framed by a grid that never gets out of its own way.

**Key Characteristics:**
- Stark white canvas (`{colors.background}`) kept absolutely clean; the only non-white surface is a `{colors.surface}` grey for inputs and section bands
- Single chromatic accent: HAY teal (`{colors.primary}`) — deployed as a full campaign panel or targeted hover state, never scattered
- Dual-typeface editorial voice: `{typography.heading-editorial}` (ITC New Baskerville, uppercase, tracked) paired with Neue Helvetica for all system UI
- Body type runs at 24px (`{typography.body-large}`) for a catalogue-scale reading rhythm — generous and airy
- Maximally flat geometry: `{rounded.none}` on every structural surface; nothing softened without purpose
- Links and navigation use `{colors.link-hover}` (a distinctive cobalt blue) on hover — a utilitarian reference that reads as functional, not branded
- Uppercase tracking on editorial labels and nav links at 0.6–2px — the pacing of a printed lookbook
- Motion is economical: 0.3s ease on nav and links, 0.8s ease on card reveals — nothing faster than deliberate
- Product photography carries the emotion; the design system frames without competing
- A shadow vocabulary limited to 4 low-confidence utility shadows — practically shadow-free at the component level

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The dominant stage — bright, clean, the retail equivalent of a gallery wall. Nothing is placed on anything but white.
- **Light Grey** (`{colors.surface}`): Input backgrounds and quiet section alternates. Never a brand statement — purely functional.

### Ink & Text
- **Near-Black** (`{colors.ink}`): Primary text, headings, and buttons. Not pure black — the 10,10,10 value reads warmer and less harsh on the white stage.
- **Secondary Grey** (`{colors.ink-secondary}`): Supporting copy and secondary labels, pulling attention without competing.
- **Muted Grey** (`{colors.ink-muted}`): Placeholders, captions, disabled states.
- **On-Dark** (`{colors.on-dark}`): White text for surfaces covered by `{colors.primary}` or `{colors.ink}`.

### Brand Accent
- **HAY Teal** (`{colors.primary}`): The definitive identity accent — a measured green with a slightly cool undertone. When Hay uses color, it uses all of it: full panels, not tints.
- **Teal Dark** (`{colors.primary-dark}`): The pressed/hovered state of the primary; a single step deeper into the same family.

### Interaction States
- **Link Hover Blue** (`{colors.link-hover}`): A rich cobalt — not the teal, not a brand color in the traditional sense, but a functional standby for in-text links and nav items on hover. It reads honest and un-curated, which suits a brand that doesn't over-style utility.
- **Focus Ring** (`{colors.focus-ring}`): Teal focus outlines keep keyboard navigation branded and visible.

### Borders & Shadows
- **Hairline** (`{colors.border}`): Whisper-quiet dividers for list separators and input edges.
- **Solid Black** (`{colors.border-strong}`): Active input borders, emphasized structural dividers.
- **Shadow Warm** (`{colors.shadow-warm}`): Opaque stand-in for the diffuse grey glow around overlays (original was `rgb(199,197,199)`).
- **Shadow Soft** (`{colors.shadow-soft}`): Opaque stand-in for dropdown lifts (original was `rgb(153,153,153)`).

## Typography

### Font Family
- **Primary (UI & Body)**: `NeueHelvetica55Roman` — Neue Helvetica 55 Roman, the Swiss-modernist workhorse. Fallbacks: `Helvetica Neue, Helvetica, Arial, sans-serif`. Used for navigation, body copy, UI labels, and all e-commerce components.
- **Editorial (Headings)**: `ITCNewBaskervilleRoman` — ITC New Baskerville Roman, a classical transitional serif. Fallbacks: `Georgia, 'Times New Roman', serif`. Used for category names, editorial headlines, and section eyebrows, always uppercase and letter-spaced.
- **OpenType**: No variable fonts or OpenType feature sets found on the live site; the pairing achieves its richness through typeface contrast, not axis manipulation.

### Hierarchy

The complete type scale is declared in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 64px/700 — bold campaign headlines on editorial hero panels |
| `display` | 48px/400 — large section openers, product category titles |
| `heading-editorial` | 20px/400 ITC Baskerville, uppercase, 1.1px tracked — editorial category names, brand voice moments |
| `heading-section` | 32px/400 — standard section titles in Helvetica |
| `heading-sub` | 20px/700 — product names, sub-section bold headings |
| `body-large` | 24px/400 — primary reading size; the catalogue-grade body |
| `body` | 16px/400 — UI copy, compact descriptions |
| `nav-link` | 13px/400, 0.6px tracked — main navigation links |
| `button-ui` | 14px/700, 0.14px tracked — CTA text and form labels |
| `caption` | 12px/400, 1px tracked — metadata, pricing sub-labels |
| `label-uppercase` | 12px/400, 2px tracked — category eyebrows, filter labels |

### Principles
- **Two typefaces, distinct registers**: Helvetica carries system logic; Baskerville carries editorial voice. They never overlap — Baskerville appears only in uppercase tracking contexts.
- **Body at 24px**: Hay's default reading size is generous — closer to a printed magazine spread than a typical e-commerce site.
- **Tracking as editorial signal**: Letter-spacing at 1–2px on labels and uppercase eyebrows creates the cadence of printed lookbook copy.
- **Weight restraint**: Regular (400) and Bold (700) only; no intermediate weights. The contrast is stark and clean.
- **Line heights are spacious**: 1.4–1.5 across headings and body, reinforcing the airy, gallery-print atmosphere.

## Layout

### Spacing System
The complete scale is in the `spacing:` token block. Base unit: 8px. Spacing is generous — Hay's pages use section padding from `{spacing.2xl}` to `{spacing.4xl}`, and product modules breathe with `{spacing.lg}` to `{spacing.xl}` gutters. The system communicates quality by never crowding.

### Grid & Container
- Max content width: ~1600px (matches the largest observed breakpoint)
- Hero: full-bleed editorial panels, campaign photography butted edge to edge
- Product grid: typically 3–4 columns on desktop with generous gutters
- A common layout: half-panel teal brand block + half-panel editorial photograph, side by side

### Whitespace Philosophy
- **White is the brand**: empty space isn't negative, it's the canvas itself — generous margins communicate quality
- **Photography needs room**: product and campaign images sit inside frames with deliberate breathing space
- **No micro-density**: Hay never compresses copy or tiles into tight stacks; the catalogue rhythm holds throughout

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Default for all cards, panels, and surfaces |
| Hairline (Level 1) | `1px solid {colors.border}` | List dividers, input resting state |
| Active Border (Level 2) | `1px solid {colors.border-strong}` | Input focus, selected state |
| Overlay (Level 3) | `0px 0px 18px rgba(0,0,0,0.2)` — `{colors.shadow-soft}` | Dropdowns, cart overlays, modal panels |
| Dropdown Lift (Level 4) | `0px 2px 10px -3px {colors.shadow-soft}` | Mega-menu and selection dropdown lifts |
| Focus Ring | `{colors.focus-ring}` outline — 2px teal | Keyboard focus on interactive elements |

**Shadow Philosophy**: Hay is nearly shadow-free by intent. The four observed shadows are all low-confidence utility lifts — dropdowns and modal layers — rather than ambient decoration. The system communicates elevation through solid black borders and full-bleed color contrast (a teal panel against white conveys more depth than any shadow could), keeping the overall surface absolutely flat and print-like.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything: buttons, cards, inputs, tags, images — the entire system |
| `pill` | 9999px | Reserved for exceptional chip or toggle use only |

Hay operates on a binary radius system where `{rounded.none}` is the law. There are no intermediate values — no 4px buttons, no 8px cards. The design's geometry is maximally rectilinear, which keeps it aligned with the brand's product aesthetic (clean modernist furniture) and typographic tradition (the squared rigor of Helvetica). When a pill shape does appear, it carries the full visual weight of that exception.

## Components

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

### Button Variants
- **`button-primary`** — Near-black (`{colors.ink}`) fill, white text, zero radius, `14px 28px` padding. The dominant CTA. Hover shifts to teal (`{colors.primary}`) — a rewarding brand reveal.
- **`button-secondary`** — White fill, black text, `1px solid` border implied. Secondary actions and form alternatives.
- **`button-teal`** — HAY teal fill, white text. Used for hero CTAs on teal panels where the primary button would be invisible; hover deepens to `{colors.primary-dark}`.

### Cards
- **`card`** — White surface, zero radius, zero shadow. Products sit on a clean white stage. Hover shifts surface to `{colors.surface}` as a minimal acknowledgment of interactivity.

### Inputs
- **`input`** — Light grey fill (`{colors.surface}`), no border in resting state, zero radius. **`input-focus`** shifts to white background and adds a solid black border — a clear mode change without glow.

### Navigation
- **`nav-bar`** — White background, near-black type, persistent at the top. Nav links at 13px with 0.6px tracking — the weight of editorial captions.

### Typography & Editorial
- **`tag-editorial`** — Uppercase Baskerville at 12px, 2px tracking, no background — used as eyebrows and category labels without chrome; the text itself is the component.
- **`badge`** — Grey surface, no radius, caption type. Purely functional meta markers.

### Links
- **`link`** — Near-black, no underline in default state. **`link-hover`** shifts to the distinctive cobalt blue (`{colors.link-hover}`) — unexpected, utilitarian, unmistakably Hay.

## Do's and Don'ts

### Do
- Keep the canvas pure white (`{colors.background}`) — every element sits on this single neutral stage
- Deploy HAY teal (`{colors.primary}`) as a full panel or confident block, never as a tint or scattered accent
- Use ITC Baskerville (`{typography.heading-editorial}`) only in uppercase with 1.1px+ letter-spacing for editorial heads; use Helvetica for everything functional
- Set body copy at `{typography.body-large}` (24px) for the generous catalogue reading rhythm
- Use `{rounded.none}` on all structural elements: cards, buttons, inputs, images, tags
- Let `{colors.link-hover}` be the cobalt blue it is — it is functional, not decorative, and that honesty is on-brand
- Allow generous whitespace: `{spacing.2xl}` to `{spacing.4xl}` between major sections
- Let full-bleed campaign photography carry the expressive work; the design system is the frame, not the art
- Apply the teal hover on `button-primary` — the black-to-teal shift is the system's most rewarding interaction moment

### Don't
- Don't use teal as a tint, gradient, or scattered accent — `{colors.primary}` works as a solid, bold statement only
- Don't round buttons, cards, or inputs — the entire system uses `{rounded.none}`; softened edges break the brand language
- Don't mix the Baskerville with lowercase body copy — the italic or regular-case Baskerville is not part of this system
- Don't reduce body type below 16px (`{typography.body}`) for primary content — the scale is set for catalogue breathing room
- Don't add decorative shadows to cards or product tiles — Hay is flat; depth comes from color contrast and photography
- Don't introduce a third typeface — the Helvetica/Baskerville tension is precisely calibrated
- Don't use the cobalt `{colors.link-hover}` as a brand accent — it belongs only to hover states on text links
- Don't compress section padding — the whitespace is the product; tight grids read as low quality

---

## Responsive Behavior

### Breakpoints
*(29 distinct stops observed from the live site — Hay uses fine-grained responsive tuning.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile S | <426px | Single column; hero panels stack vertically; display scales to ~32px; nav collapses to hamburger |
| Mobile | 426–767px | 2-up product tiles begin; editorial hero photo + teal panel stack |
| Tablet | 768–1023px | 3-up product grid; side-by-side editorial panels possible; navigation partially exposed |
| Desktop | 1024–1440px | Full horizontal nav; 4-up product grid; half-panel editorial layouts |
| Large Desktop | >1440px | Maximum ~1600px container; full `{spacing.3xl}`–`{spacing.4xl}` section padding |

### Touch Targets
- Primary buttons use `14px 28px` padding, reaching ~42–44px tap height
- Nav links at 13px have expanded tap zones in the mobile drawer
- Product cards are fully tappable

### Collapsing Strategy
- **Navigation**: full horizontal utility nav collapses to a hamburger with a full-height white drawer overlay
- **Editorial hero**: teal campaign panel + photography stack vertically at tablet and below; panel goes full-width
- **Product grid**: 4-up → 3-up → 2-up → 1-up as viewport narrows
- **Type**: display sizes scale down while preserving the light-weight editorial character; body stays at 16px minimum

### Image Behavior
- Campaign photography is full-bleed at hero scale and crops gracefully to fill containers
- Product images sit on white without borders or radius; they reflow as first-class grid children

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Primary text: `{colors.ink}`
- Brand accent (teal): `{colors.primary}`
- Secondary text: `{colors.ink-secondary}`
- Border: `{colors.border}`
- Strong border: `{colors.border-strong}`
- Link hover: `{colors.link-hover}`

### Example Component Prompts

- "Create a Hay hero panel: a full-bleed split layout — left half a solid HAY teal (`{colors.primary}`) panel with a 64px Neue Helvetica 700 headline in `{colors.on-dark}` (all-caps, -0.5px tracking), the HAY logotype in white below; right half a full-bleed editorial photograph. No radius, no shadow. White nav above both."
- "Build a primary CTA button: near-black fill (`{colors.ink}`), white text (`{colors.on-dark}`) in `{typography.button-ui}` (14px/700, 0.14px tracked), padding `14px 28px`, zero radius. On hover, fill transitions to HAY teal (`{colors.primary}`) over 0.3s ease."
- "Design a product card: white background (`{colors.background}`), zero radius, no shadow, no border. Square product photo fills the top. Below: a 12px uppercase label in `{typography.label-uppercase}` (2px tracked, `{colors.ink}`), a 20px weight-700 product name in `{typography.heading-sub}`, and a 16px price in `{typography.body}`."
- "Create a category eyebrow label: ITC New Baskerville Roman (`{typography.heading-editorial}`), 20px, uppercase, 1.1px letter-spacing, `{colors.ink}`, no background, no padding sides. Used above section titles as an editorial signal."
- "Build an input: light grey fill (`{colors.surface}`), zero radius, no border at rest, padding `12px 16px`, 16px Neue Helvetica 400 in `{colors.ink}`. On focus: white background, `1px solid {colors.border-strong}`, no glow, no color shift — a clean functional state change."
- "Design a HAY navigation bar: white background, 12px height, centered `HAY` logotype in near-black (`{colors.ink}`); a horizontal row of 5 links in `{typography.nav-link}` (13px, 0.6px tracked, regular weight). Link hover shifts text to cobalt blue (`{colors.link-hover}`) over 0.3s ease."

### Iteration Guide

1. Start on pure white (`{colors.background}`). If the canvas is off-white, grey, or tinted, reset it — Hay's stage is clean.
2. The teal (`{colors.primary}`) is a campaign decision, not a UI decision. It belongs in full panels and hero moments, not in tag chips or inline accents.
3. Use ITC Baskerville only in uppercase with 1px+ letter-spacing. If Baskerville appears in mixed case or untracked, replace it with Helvetica.
4. All radius values are zero. If a corner is softened, remove it.
5. Shadows are only for functional overlays (dropdowns, modals). Remove decorative shadows from cards and tiles.
6. The cobalt blue hover (`{colors.link-hover}`) on links is correct; don't replace it with teal.
7. Let photography dominate hero areas. The design's job is framing, not competing.

---

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