---
version: alpha
name: The New Wave
description: Editorial wine-house minimalism — a warm off-white paper canvas, near-black ink, and a single muted vineyard accent. Large serif display headlines set the terroir-driven, gallery-quiet tone; generous whitespace and full-bleed imagery carry the brand.

colors:
  # Canvas + ink
  background: "#f7f4ee"
  surface: "#ffffff"
  surface-soft: "#efe9df"
  ink: "#1c1a17"
  ink-secondary: "#5c564d"
  ink-muted: "#8a8378"

  # Brand accent — muted vineyard / bordeaux
  primary: "#6e2a36"
  accent-warm: "#9a7b4f"

  # Lines + neutrals
  border: "#ddd6c9"
  border-strong: "#c7bfb0"
  gray-100: "#e7e1d6"

  # On-color
  on-primary: "#f7f4ee"
  on-ink: "#f7f4ee"

  # Overlay (over imagery)
  overlay-dark: "#1c1a17"
  overlay-scrim: "#3a352e"

typography:
  display-hero:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1px
  display-section:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.12
    letterSpacing: -0.5px
  heading:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  card-title:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px
  body-large:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 2px
  button-ui:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 1.5px
  caption:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.5px

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

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  pill: 9999px

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

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px
    borderColor: "{colors.ink}"

  link-underline:
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    borderColor: "{colors.border-strong}"

  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.none}"
    padding: 6px 12px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 32px
    borderColor: "{colors.border}"

  card-feature:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 40px

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

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 20px 40px
    borderColor: "{colors.border}"

  image-caption:
    backgroundColor: "{colors.overlay-scrim}"
    textColor: "{colors.on-ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 8px 12px
---

# The New Wave Design System

## Overview

The New Wave's website reads like the label on a serious bottle of wine — quiet, confident, and unmistakably premium. The canvas is a warm off-white paper tone (`{colors.background}`) rather than clinical white, evoking uncoated stock and cellar light. Against it, a near-black ink (`{colors.ink}`) carries nearly all the text. The brand sells terroir, heritage, and craft, so the design gets out of the way: full-bleed photography of vineyards and barrels does the emotional work, while type and layout supply the restraint.

The typographic identity is a high-contrast serif for display paired with a neutral grotesque for reading. Large serif headlines (`{typography.display-hero}`) set in a Garamond-class face give the editorial, almost literary cadence of a wine house's storytelling. Beneath them, an Inter-class sans handles body copy and UI labels, keeping paragraphs and navigation crisp and legible. Eyebrows and button labels are set in small, widely-tracked uppercase sans — the only place letter-spacing goes positive — which feels like the engraved small-caps on a cork or capsule.

Color is deliberately scarce. A single muted vineyard accent (`{colors.primary}`, a deep bordeaux) appears in hover states and the occasional rule or mark; a warmer brass tone (`{colors.accent-warm}`) handles secondary emphasis. There are no bright UI colors, no gradients, and no decorative shadows. Depth comes from imagery and whitespace, not from elevation.

The geometry is square. Buttons, cards, and inputs use sharp corners (`{rounded.none}`) or barely-there radii, reinforcing the editorial, print-derived feel. Generous vertical rhythm between sections (`{spacing.3xl}`–`{spacing.4xl}`) gives every block room to breathe.

**Key Characteristics:**
- Warm paper-toned canvas (`{colors.background}`), never pure white
- High-contrast serif display (`{typography.display-hero}`) over a neutral sans for body
- Single muted bordeaux accent (`{colors.primary}`) used sparingly in hover/marks
- Square geometry — sharp corners on buttons, cards, inputs
- Uppercase, wide-tracked sans for eyebrows and buttons (the one place tracking is positive)
- Full-bleed terroir photography carries the emotional weight; chrome stays neutral
- No gradients, no decorative shadows — depth from imagery and whitespace
- Massive section spacing (`{spacing.3xl}`–`{spacing.4xl}`)

## Colors

### Canvas & Ink
- **Paper** (`{colors.background}`): Primary canvas — warm off-white, cellar-light.
- **Surface White** (`{colors.surface}`): Cards and panels that need to lift slightly off the paper.
- **Surface Soft** (`{colors.surface-soft}`): Tinted blocks, badges, alternating sections.
- **Ink** (`{colors.ink}`): Headings, body, primary buttons.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, captions.
- **Ink Muted** (`{colors.ink-muted}`): Metadata, disabled text.

### Brand Accents
- **Vineyard Bordeaux** (`{colors.primary}`): The signature accent — hover states, marks, rules. Used sparingly.
- **Brass** (`{colors.accent-warm}`): Secondary warm emphasis, decorative details.

### Lines & Neutrals
- **Border** (`{colors.border}`): Hairline dividers, card outlines.
- **Border Strong** (`{colors.border-strong}`): Input outlines, emphasized rules.
- **Gray 100** (`{colors.gray-100}`): Subtle fills.

### On-Color & Overlay
- **On Ink** (`{colors.on-ink}`): Paper-toned text on dark buttons and scrims.
- **On Primary** (`{colors.on-primary}`): Text on the bordeaux accent.
- **Overlay Dark** (`{colors.overlay-dark}`): Full-bleed image darkening.
- **Overlay Scrim** (`{colors.overlay-scrim}`): Caption strips over photography.

## Typography

### Font Family
- **Display**: `Cormorant Garamond`, with fallbacks `Georgia, serif` — high-contrast serif for headlines.
- **Body / UI**: `Inter`, with fallbacks `Helvetica, Arial, sans-serif` — neutral grotesque for reading and chrome.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 64px serif hero — the headline that opens a page |
| `display-section` | Section titles |
| `heading` | Sub-section and editorial headings |
| `card-title` | Feature / card titles |
| `body-large` | Lead paragraphs, introductions |
| `body` | Standard reading text |
| `body-small` | Captions, fine print, dense UI |
| `eyebrow` | Uppercase wide-tracked kicker above headings |
| `button-ui` | Buttons and links — uppercase, tracked |
| `caption` | Image captions, metadata |

### Principles
- **Serif announces, sans reads**: Display is always the Garamond-class serif; body and UI are always the sans. Never mix roles.
- **Tracking only goes positive in small caps**: Eyebrows and button labels carry 1–2px tracking; headlines stay tight or neutral.
- **Restraint in weight**: Serif at 500 (medium), sans at 400/500. No heavy bold.
- **Generous line-height for body**: 1.65–1.7 keeps long-form wine storytelling readable.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, with large jumps for section separation (`{spacing.3xl}` 96px, `{spacing.4xl}` 140px).

### Grid & Container
- Max content width: approximately 1280px, with full-bleed imagery breaking the container.
- Hero: full-bleed image with overlaid serif headline, or split image/text.
- Service pillars: 2–3 column grids of editorial blocks.
- Generous outer margins on the paper canvas.

### Whitespace Philosophy
- **Gallery quiet**: Large vertical padding between sections; whitespace frames the photography.
- **Image-forward**: Full-bleed terroir photography is the primary visual, chrome recedes.
- **Square rhythm**: Sharp corners and aligned edges give a printed, editorial structure.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, cards, inputs — the default |
| `xs` | 2px | Barely-there softening |
| `sm` | 4px | Small functional elements |
| `md` | 8px | Occasional softer containers |
| `pill` | 9999px | Reserved — rarely used |

## Components

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

### Buttons
- **`button-primary`** — Ink fill, paper text, square corners, uppercase tracked label. Hovers to bordeaux (`{colors.primary}`).
- **`button-outline`** — Paper background with a 1px ink outline, square corners.
- **`link-underline`** — Inline links with a subtle bottom rule in `{colors.border-strong}`.

### Cards
- **`card`** — White surface, hairline `{colors.border}` outline, square corners, generous padding.
- **`card-feature`** — Paper-toned editorial block, no outline, large padding.

### Inputs
- **`input`** — White surface with `{colors.border-strong}` outline; focus darkens the border to `{colors.ink}`.

### Navigation
- **`nav-bar`** — Paper background, uppercase tracked links, hairline bottom border. Logo center or left, FR/EN language toggle right.

### Imagery
- **`image-caption`** — Caption strip on a `{colors.overlay-scrim}` scrim over full-bleed photography.

## Do's and Don'ts

### Do
- Use the warm paper canvas (`{colors.background}`) instead of pure white
- Set headlines in the serif (`{typography.display-hero}`); body and UI in the sans
- Keep corners square (`{rounded.none}`) on buttons, cards, and inputs
- Reserve bordeaux (`{colors.primary}`) for hover states and small marks
- Let full-bleed photography carry the emotion; keep chrome neutral
- Use wide positive tracking only on uppercase eyebrows and buttons

### Don't
- Don't introduce bright UI colors, gradients, or decorative shadows
- Don't round corners aggressively — the brand is printed and square
- Don't set body copy in the serif or headlines in the sans
- Don't overuse the bordeaux accent — it loses its meaning
- Don't crowd sections; the large `{spacing.3xl}`–`{spacing.4xl}` rhythm is the point

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero headline scales down, stacked pillars |
| Tablet | 600–1024px | 2-column grids, reduced section spacing |
| Desktop | 1024–1280px | Full editorial layout, full-bleed imagery |
| Large | >1280px | Centered container, generous paper margins |

### Collapsing Strategy
- Hero serif: 64px → ~40px on mobile, tracking stays tight
- Navigation: horizontal links → hamburger; language toggle persists
- Service pillars: 3-column → single column
- Full-bleed imagery: maintains edge-to-edge treatment at all sizes
- Section spacing: 140px → ~64px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Paper `{colors.background}`
- Heading + body text: Ink `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Primary CTA: Ink fill `{colors.ink}`, paper text, hover bordeaux `{colors.primary}`
- Accent / mark: Bordeaux `{colors.primary}`
- Borders: `{colors.border}` (hairline), `{colors.border-strong}` (inputs)

### Example Component Prompts
- "Create a full-bleed hero: vineyard photo, dark overlay `{colors.overlay-dark}`, overlaid serif headline at 64px Cormorant Garamond weight 500, tracking -1px, color `{colors.on-ink}`. Uppercase eyebrow above it at 12px Inter weight 500, 2px tracking. Square ink CTA below."
- "Design a service pillar card: paper background `{colors.background}`, no border, 40px padding. Serif title at 24px, body at 16px Inter `{colors.ink-secondary}`, line-height 1.65."
- "Build a primary button: ink `{colors.ink}` fill, paper `{colors.on-ink}` text, square corners, 16px/32px padding, 13px Inter weight 500, 1.5px tracking uppercase. Hover fills bordeaux `{colors.primary}`."

### Iteration Guide
1. Serif for display, sans for everything else — never swap
2. Keep corners square; this is a print-derived, editorial brand
3. Bordeaux is a seasoning, not a base — hover states and marks only
4. Paper canvas, not white — warmth is the brand
5. Let photography breathe with `{spacing.3xl}`+ section rhythm

---

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