---
version: alpha
name: "Haus"
description: "Design system for Haus, the low-ABV aperitif brand — near-black canvas, warm amber-gold accent, and a condensed serif-meets-expanded-sans typographic pairing that reads like a very good bottle label."

colors:
  # Surface / canvas
  background: "#ebeae7" # warm off-white parchment used for content sections
  surface: "#191919"   # near-black brand ground; was rgba(25,25,25,0.75) — opaqued for hex
  surface-light: "#f0f0f0" # pale neutral for cards and alternate sections

  # Text / ink
  ink: "#191919"
  on-background: "#191919"
  on-surface: "#ebeae7"
  ink-muted: "#c4cdd5" # desaturated muted link color on dark surfaces

  # Brand accent
  primary: "#c5a054"       # Haus amber-gold — saffron-warm, the signature pour
  on-primary: "#191919"    # dark text on gold — high contrast
  primary-hover: "#a78847" # computed dembrandt hover on amber-gold
  primary-container: "#b58073" # warm terracotta — secondary accent from product palette

  # Borders
  border: "#d1d5db"         # neutral input border — Tailwind gray-300
  border-brand: "#c5a054"   # amber-gold 1px outline on primary buttons
  border-dark: "#191919"    # near-black outline on light-surface ghost buttons

  # Shadow tints
  shadow-soft: "#191919"    # brand-tinted depth, near-black base

  # Focus
  focus-ring: "#c5a054"     # amber-gold ring — on-brand, high-visibility

  # Semantic
  error: "#be2119"
  success: "#8dc572"
  warning: "#f0ad4e"

typography:
  display-hero:
    fontFamily: "Roslindale DisplayCondensed, Playfair Display, Georgia, serif"
    fontSize: 86px
    fontWeight: 400
    lineHeight: 1.23
    letterSpacing: 0.78px
  display:
    fontFamily: "Roslindale DisplayCondensed, Playfair Display, Georgia, serif"
    fontSize: 75px
    fontWeight: 400
    lineHeight: 1.23
    letterSpacing: 0.78px
  heading-section:
    fontFamily: "Roslindale DisplayCondensed, Playfair Display, Georgia, serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.23
    letterSpacing: 0.78px
  heading-sub:
    fontFamily: "Roslindale DisplayCondensed, Playfair Display, Georgia, serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0.78px
  heading-expanded:
    fontFamily: "GT America Expanded, Barlow Expanded, Arial, sans-serif"
    fontSize: 35px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0.78px
  body-large:
    fontFamily: "GT America Standard, Inter, Helvetica Neue, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.80
    letterSpacing: -1px
  body:
    fontFamily: "GT America Standard, Inter, Helvetica Neue, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.80
    letterSpacing: 0.6px
  nav-link:
    fontFamily: "GT America Expanded, Barlow Expanded, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0.78px
  button-ui:
    fontFamily: "GT America Expanded, Barlow Expanded, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0.6px
  label-ui:
    fontFamily: "Work Sans, Inter, Helvetica Neue, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.80
    letterSpacing: 0.6px
  caption:
    fontFamily: "Work Sans, Inter, Helvetica Neue, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.70
    letterSpacing: 0.7px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 30px
  xl: 48px
  2xl: 64px
  3xl: 96px

rounded:
  none: 0px
  sm: 3px
  md: 4px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    borderColor: "{colors.border-brand}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 15px 20px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    borderColor: "{colors.primary-hover}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 15px 20px
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 15px 55px
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 15px 55px
  button-ghost:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 15px 20px
  button-ghost-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 15px 20px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-background}"
    rounded: "{rounded.none}"
    padding: 30px
  card-dark:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    padding: 30px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "transparent"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 15px 98px 15px 15px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 15px 98px 15px 15px
  input-light:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 15px
  input-light-focus:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 15px
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 10px
  nav:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.nav-link}"
    padding: 15px 30px
---

# Haus Design System

## Overview

Haus opens with a declaration: the header is a near-black panel (`{colors.surface}`), a reversed white wordmark centered like a wine label, and nothing else. There's an announcement bar, a two-item navigation, and a cart. The restraint is the entire statement. Before a single product appears you already understand that this is a brand that considers exactly what it includes and what it leaves out — the editorial equivalent of a bottle with no back-label clutter.

The canvas below the hero alternates between warm parchment (`{colors.background}`) for lifestyle photography and editorial text, and the near-black ground for immersive product moments. The signature accent — a warm amber-gold (`{colors.primary}`) — arrives with the same effect as saffron in a white dish: sudden, rich, unmistakable. It appears on primary "Add to Cart" CTAs, 1px button outlines, and the brand's scattered product capsules. Against the dark surface and the warm off-white parchment, the gold reads simultaneously celebratory and grounded, the color of a late-afternoon pour.

The typographic system is built on a genuine tension: condensed display serif (Roslindale DisplayCondensed) for the large editorial moments — tall, slightly tracked, with the compressed elegance of a spirits label — against GT America Expanded Medium for UI, navigation, and product hierarchy. These are genuinely opposing widths: one condensed, one expanded, both confident. Work Sans fills in the small-print and functional layers. The result reads like a magazine that sells bottles — not a store that occasionally posts articles.

**Key Characteristics:**
- Near-black brand ground (`{colors.surface}`) as the primary brand canvas — header, hero panels, and full-bleed immersive sections anchor in this depth
- Warm parchment (`{colors.background}`) for editorial and product content sections — off-white with warmth, never clinical
- Amber-gold accent (`{colors.primary}`) deployed on CTAs, button outlines, and product accents — the signature pour color
- Roslindale DisplayCondensed at 36–86px with `0.78px` tracking for all major display and heading moments
- GT America Expanded Medium at 16–35px for navigation, section labels, and UI chrome
- Work Sans for sub-labels, fine print, and supporting UI at 11–17px
- Zero border-radius on all buttons and cards — the system is entirely sharp-cornered; shape comes from proportion, not rounding
- 1px amber-gold border on primary CTA buttons — the outline IS the brand accent
- `capitalize` text transform on navigation links — a typographic gesture toward elegance without full uppercase
- Flat depth system: near-black surface against parchment does all the elevation work; no drop shadows on cards

## Colors

### Primary
- **Near-Black** (`{colors.surface}`): The brand ground. Header, hero sections, dark product panels, and inverted content moments. Not true black — there's warmth in this darkness.
- **Warm Parchment** (`{colors.background}`): The editorial canvas for content sections, product copy, and lifestyle photography. An off-white that reads like uncoated cream stock.
- **Near-Black Ink** (`{colors.ink}`): Primary body text and structural outlines on light surfaces. Consistent with the surface — the brand does not separate its text color from its brand color.

### Brand Accent
- **Haus Amber-Gold** (`{colors.primary}`): The pour color. Applied to primary CTA buttons, button border outlines, and select product accents. Hover darkens to `{colors.primary-hover}`. Against the near-black canvas, it reads like candlelight; against parchment, like late sun.
- **Warm Terracotta** (`{colors.primary-container}`): A secondary product accent — a dustier, more russet partner to the gold, drawn from the bottle and lifestyle photography palette. Appears on "Add to Cart" for certain product lines.

### Text & Surface States
- **Muted Ink on Dark** (`{colors.ink-muted}`): A desaturated blue-gray used for link text on near-black surfaces — a quiet complement to the gold accent, pulled from product photography.
- **Pale Neutral** (`{colors.surface-light}`): Tailwind `#f0f0f0` — appears on alternate product rows and tiled background sections.

### Borders
- **Amber-Gold Outline** (`{colors.border-brand}`): 1px solid on primary CTA buttons — the gold outline reinforces the accent even on light-surface button variants.
- **Dark Outline** (`{colors.border-dark}`): Near-black 1px solid on ghost/secondary buttons on light surfaces.
- **Input Border** (`{colors.border}`): Tailwind gray-300 neutral on standard form fields.

### Semantic
- **Error** (`{colors.error}`): Deep terracotta red for validation.
- **Success** (`{colors.success}`): Sage green for positive states.
- **Warning** (`{colors.warning}`): Warm amber for urgency markers.

## Typography

### Font Family
- **Display (Condensed Serif)**: `Roslindale DisplayCondensed`, self-hosted. A tall condensed serif with the posture of a classic spirits label — slightly bracketed, editorially confident. Fallbacks: `Playfair Display, Georgia, serif`. For external implementations, `Playfair Display` (Google Fonts) at high letter-spacing approximates the condensed editorial presence.
- **UI (Expanded Sans)**: `GT America Expanded Medium`, self-hosted. An expanded grotesque with authority and legibility at all sizes. Fallbacks: `Barlow Expanded, Arial, sans-serif`. GT America Expanded is a Commercial Type face; `Barlow Expanded` (Google Fonts, weight 500) is the closest open substitute.
- **Body / Standard (Sans)**: `GT America Standard Regular`, self-hosted. The neutral reading face — proportional, open, unhurried at 18–22px. Fallbacks: `Inter, Helvetica Neue, sans-serif`.
- **Supporting (Sans)**: `Work Sans` (loaded via WOFF2, effectively a web font). Used at small utility sizes: labels, captions, nav sub-items. Direct Google Fonts equivalent.
- **OpenType Features**: No variable font axes detected. All weights are separate files (Regular, Medium, Bold). Font Awesome icons loaded for cart and UI affordances.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Full-bleed hero headlines — Roslindale at 86px, the tallest editorial moment |
| `display` | Section hero statements, campaign headers at 75px |
| `heading-section` | Major section heads and product category openers at 56px |
| `heading-sub` | Product collection headings, sub-section labels at 36px in the medium cut |
| `heading-expanded` | GT America Expanded at 35px — used for callout text and feature section titles where the expanded width creates visual emphasis |
| `body-large` | Lead editorial paragraphs and hero subtitles at 22px, `1.8` line-height |
| `body` | Product descriptions, about copy, FAQ at 18px |
| `nav-link` | Navigation labels in GT America Expanded at 16px, `capitalize` transform |
| `button-ui` | CTA labels in GT America Expanded at 20px, `capitalize` transform — large, authoritative |
| `label-ui` | Sub-labels, product meta, form labels in Work Sans at 14px |
| `caption` | Fine print, legal, badge text in Work Sans at 11px with wide letter-spacing |

### Principles
- **Width contrast is the typographic personality**: Roslindale's condensed proportion against GT America Expanded's wide stance creates genuine visual tension — this is not decorative variation, it's structural identity.
- **Display serif for editoral, expanded sans for commerce**: Roslindale handles the emotional weight; GT America Expanded handles navigation, CTAs, and product hierarchy. The roles never swap.
- **`capitalize` over ALL CAPS on navigation**: GT America Expanded Medium in `capitalize` reads more refined and less commercial than uppercase-only. The expanded width provides hierarchy without needing all-caps force.
- **Generous line-heights on body**: 1.8 on body copy — Haus is not a dense product catalog, it's a considered lifestyle brand. Reading pace is editorial.
- **Work Sans at small sizes**: The supporting sans arrives only where Expanded and Standard would be too wide or too heavy — fine print, labels, captions.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 15px (the most frequent spacing value across the dembrandt analysis, anchoring button padding and internal element gaps).

Haus uses a broadly generous spacing personality — the brand resists the temptation to pack products. The `30px` lg token governs most internal card padding; `48px` and `64px` handle vertical breathing between sections; `96px` appears at the largest inter-section gaps on desktop. The result feels unhurried, like a good menu with space between each item.

### Grid & Container
- Max content width: ~1200px centered with full-bleed near-black panels extending edge-to-edge
- Hero: text-right composition with left-aligned lifestyle photography, dark canvas at desktop
- Product grid: 3-column desktop, 2-column tablet, 1-column mobile; products paired with lifestyle photography
- Featured sections: 50/50 split between product imagery and editorial text — large crop left, copy right
- Footer: multi-column link grid on near-black ground with amber-gold accent touches

### Whitespace Philosophy
- **Dark surface as luxury signal**: The near-black canvas does not feel sparse — it reads as intentional premium restraint.
- **Photography-led layout**: Full-bleed lifestyle photography takes precedence; type and chrome orbit the imagery.
- **No card borders or shadows**: Products sit directly on the canvas at their natural depth — isolation through spacing, not decoration.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Page canvas, content sections, product imagery containers |
| Hairline (Level 1) | `1px solid {colors.border-brand}` — amber-gold | Primary button outlines, active state borders |
| Divider (Level 2) | `1px solid {colors.border}` — neutral gray | Form inputs, editorial rule lines, inline separators |
| Soft Lift (Level 3) | `0 4px 5px rgba(25, 25, 25, 0)` (near-invisible, detected via dembrandt) | Cart and modal overlays, used minimally |
| Focus Ring | `2px solid {colors.focus-ring}` — amber-gold | Input focus state — brand-consistent, warm |

**Shadow Philosophy**: Haus is effectively flat. The brand does all its depth work through color contrast: near-black panels against parchment, gold against dark, terracotta as spot accent. The single shadow captured by dembrandt is essentially invisible (`rgba(25,25,25,0)` — an opacity-zero baseline). No product cards have drop shadows. This flatness is deliberate — shadows would undermine the spirits-label crispness that defines the brand's visual posture.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | The dominant shape of the system — every button, card, and container |
| `sm` | 3px | Carousel navigation chevron buttons — rare exception |
| `md` | 4px | Standard form inputs — the only rounded treatment on interactive elements |
| `pill` | 9999px | Not used in the core system |

Haus is one of the most committed zero-radius systems in the low-ABV beverage space. Buttons are square, cards are square, the search input on dark is square. This is not an oversight — it's a deliberate alignment with the brand's spirits-label visual DNA. A wine or aperitif bottle label has no rounded corners; the Haus UI inherits that same crispness. The only concession to soft shapes is the `4px` on form inputs, where the radius is barely perceptible.

## Components

### Button Variants

- **`button-primary`** — Haus amber-gold (`{colors.primary}`) fill, near-black text, 1px amber-gold border, zero radius. The "Add to Cart" CTA. Square, warm, unmistakable. Hover deepens to `{colors.primary-hover}`.
- **`button-secondary`** — Transparent fill with `1px solid {colors.border-dark}` near-black outline, GT America Expanded 20px text, zero radius. The "Shop Now" and editorial action button — generous horizontal padding (55px) gives it editorial breadth.
- **`button-ghost`** — Warm terracotta (`{colors.primary-container}`) fill on dark surface panels, white text, zero radius. Appears on inverted product sections where the amber-gold would lose contrast.

### Cards

Product cards on Haus have no border radius, no drop shadow, and no card chrome. The product image occupies a full-width frame; product name runs in Roslindale condensed; price and CTA sit below. Cards on the parchment canvas feel more like framed prints than e-commerce tiles. The `card-dark` variant appears inside full-bleed near-black sections with `{colors.on-surface}` text.

### Inputs

Two distinct input contexts exist: the site-wide search input sits inside the near-black surface — transparent background, `{colors.on-surface}` text, borderless default, amber-gold `{colors.focus-ring}` outline on focus. The email and number inputs on light surfaces use a white background, `1px solid {colors.border}` neutral gray border, and `4px` radius — the only instance of non-zero rounding in the interactive system.

### Badges / Tags

The minimal badge system uses the amber-gold (`{colors.primary}`) fill with near-black text at zero radius — a sharp tag that reinforces the gold-as-accent-only rule. Work Sans 11px with `0.7px` letter-spacing at `caption` scale.

### Navigation

The Haus header occupies the full viewport width in near-black (`{colors.surface}`). The wordmark is centered as a reversed white horizontal lockup. Navigation is minimal — "SHOP" and "JOURNAL" flanking the wordmark in GT America Expanded 16px, `capitalize`. Cart and account icons sit right-aligned. Below the header, an announcement strip in near-black with parchment text sits at full width. The entire nav collapses to a hamburger below 768px.

## Do's and Don'ts

### Do
- Use the near-black canvas (`{colors.surface}`) for hero sections, product spotlights, and page-anchoring moments — darkness IS the brand premium
- Apply Roslindale DisplayCondensed for every major heading and display moment — the condensed serif is the voice, not a decoration
- Use GT America Expanded for all navigation, UI labels, and CTA text — the expanded width creates hierarchy without uppercase
- Set all buttons at zero radius (`{rounded.none}`) — the sharp corner is non-negotiable to the brand's visual identity
- Reserve amber-gold (`{colors.primary}`) for primary CTAs and button outlines — it reads as the brand's sole warm accent
- Pair `{colors.primary}` 1px border with the amber-gold fill on primary buttons — the outline and fill read as a unified accent
- Use `{colors.background}` (warm parchment) for editorial content sections — never pure white as the page background
- Apply `capitalize` text-transform on navigation links in GT America Expanded — it's more refined than ALL CAPS
- Allow 30–50px internal card padding — product isolation requires breathing room
- Use the condensed/expanded font width contrast deliberately: Roslindale for emotional weight, GT America Expanded for functional authority

### Don't
- Don't apply border radius to buttons or cards — even `4px` breaks the spirits-label precision of this system
- Don't use Roslindale DisplayCondensed for body copy or UI labels — at small sizes it loses legibility and becomes decoration
- Don't introduce amber-gold (`{colors.primary}`) as a background canvas — it's an accent only; a full amber-gold surface breaks the restraint
- Don't use pure black (`#000000`) as the main ground — the brand's near-black (`{colors.surface}`) has warmth; pure black reads cold
- Don't stack drop shadows on product cards — Haus depth is flat; shadows would contradict the spirits-label aesthetic
- Don't use ALL CAPS for navigation — `capitalize` in GT America Expanded is the intentional choice; uppercase reads like a different brand
- Don't add gradient treatments to the amber-gold accent — it's always a flat solid, like a label gilding, never a gradient shine
- Don't mix the amber-gold and terracotta (`{colors.primary-container}`) on the same button context — they are alternates for different surface conditions, not companions
- Don't use the Work Sans body weight (400) for navigation or CTA text — GT America Expanded's authority is required at UI sizes
- Don't introduce pill-radius elements — this system has no `{rounded.pill}` usage; the shape language is entirely angular

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <749px | Single-column, hero drops to 40–48px, stacked product layout |
| Mobile | 749–989px | Single-column, display 48–64px, hamburger nav |
| Tablet | 990–1200px | 2-column product grid, full horizontal nav, 64–75px display |
| Desktop | 1200–1440px | 3-column product grid, full nav, 86px hero display |
| Large Desktop | >1440px | 3-column grid, 1200px max content container, full type scale |

### Touch Targets
- Primary CTAs: minimum 50px tap height — button padding 15px vertical on 20px font
- Nav links: full-row tap targets in the collapsed hamburger menu
- Product cards: entire card area is tappable on mobile, not just the CTA label
- Cart and account icons: 44px hit areas on the right side of the header bar

### Collapsing Strategy
- **Nav**: Full horizontal near-black bar collapses to hamburger below 989px; menu opens as full-width panel
- **Display type**: 86px → 64px → 48px → 36px progressive scaling; condensed proportion and `0.78px` tracking maintained throughout
- **Hero**: Lifestyle photography and editorial text stack vertically below 768px — image first, copy below
- **Product grid**: 3-column → 2-column at 990px → 1-column at 749px
- **Section spacing**: 96px desktop → 64px tablet → 48px mobile — reduces but never crowds

### Image Behavior
- Full-bleed lifestyle photography maintains its proportions at all breakpoints; no forced crops
- Near-black product panels extend full viewport width at every breakpoint — the dark canvas is architectural, not optional
- Product bottle photography is framed symmetrically — scaling preserves the bottle-as-subject hierarchy

---

## Agent Prompt Guide

### Quick Color Reference
- Page Background: Warm Parchment (`{colors.background}`) — `#ebeae7`
- Brand Canvas: Near-Black (`{colors.surface}`) — `#191919`
- Primary Text: Near-Black Ink (`{colors.ink}`) — `#191919`
- Inverted Text: Parchment (`{colors.on-surface}`) — `#ebeae7`
- Primary CTA Accent: Amber-Gold (`{colors.primary}`) — `#c5a054`
- CTA Hover: Gold Hover (`{colors.primary-hover}`) — `#a78847`
- Secondary Accent: Warm Terracotta (`{colors.primary-container}`) — `#b58073`
- Input Border: Neutral Gray (`{colors.border}`) — `#d1d5db`
- Focus Ring: Amber-Gold (`{colors.focus-ring}`) — `#c5a054`

### Example Component Prompts

- "Build a hero section on near-black (`#191919`) full-bleed canvas. Headline in Roslindale DisplayCondensed (or Playfair Display) at 86px, weight 400, line-height 1.23, letter-spacing 0.78px, color `#ebeae7`. Subtext in GT America Standard 22px weight 400, line-height 1.8, color `#ebeae7`. Primary CTA: amber-gold (`#c5a054`) fill, `#191919` text, `1px solid #c5a054` border, GT America Expanded 20px weight 500 capitalize, zero border-radius, padding 15px 20px."
- "Design a product card on warm parchment (`#ebeae7`) background, zero border-radius, no shadow. Product image full-bleed at top, 4:5 aspect ratio, centered on white or tinted ground. Product name in Roslindale DisplayCondensed 36px weight 400 line-height 1.23 `#191919`. Price in GT America Standard 18px weight 400. 'Add to Cart' CTA in amber-gold (`#c5a054`), `#191919` text, `1px solid #c5a054` border, zero radius, padding 15px 20px."
- "Create a section heading module: Roslindale DisplayCondensed 56px weight 400 letter-spacing 0.78px on parchment (`#ebeae7`) canvas. Subheading in GT America Expanded Medium 35px weight 500 line-height 1.30 `#191919`. No borders or backgrounds — type on canvas, separated by 30px spacing."
- "Build the Haus navigation bar: full-bleed near-black (`#191919`) background. Centered white wordmark SVG. 'SHOP' and 'JOURNAL' in GT America Expanded 16px weight 500 capitalize `#ebeae7`, flanking the wordmark. Cart icon 44px hit area right-aligned. Full bar height approximately 70px with 15px vertical padding. Below: full-width announcement strip in near-black with parchment text, GT America Standard 16px."
- "Design a ghost button for use on a near-black surface: warm terracotta (`#b58073`) fill, white text `#ffffff`, GT America Expanded 20px weight 500 capitalize, zero border-radius, padding 15px 20px. Hover: swaps to amber-gold (`#c5a054`) fill with `#191919` text."
- "Create a full-bleed product section on near-black (`#191919`). 50/50 split: left full-bleed product photography, right editorial text block. Headline Roslindale DisplayCondensed 56px white. Body GT America Standard 18px `#ebeae7` line-height 1.8. Primary CTA amber-gold fill, zero radius, 15px 20px padding. Right column has 64px left padding and 96px vertical padding."

### Iteration Guide

1. Anchor the page in the near-black / parchment alternation — `{colors.surface}` for brand moments, `{colors.background}` for editorial content. Never use pure white as the canvas.
2. Set all display and heading text in Roslindale DisplayCondensed (or Playfair Display). Scale from 36px (sub-section) to 86px (hero). Maintain `0.78px` letter-spacing.
3. Use GT America Expanded for all navigation, CTA labels, and section sub-labels — `capitalize` text-transform, never ALL CAPS.
4. GT America Standard handles body and editorial prose at 18–22px with 1.8 line-height; Work Sans handles fine-print and captions at 11–14px.
5. Keep ALL button and card border-radius at zero (`{rounded.none}`) — this is the single most important shape rule.
6. The amber-gold (`{colors.primary}`) appears on primary CTAs and their 1px outline borders — one dominant application per section.
7. On dark-surface sections, terracotta (`{colors.primary-container}`) can substitute for amber-gold where the gold would clash with product photography.
8. Depth is flat — no card shadows, no elevation tiers beyond the surface/canvas alternation itself.
9. Motion is quick and ease-based: `0.3s ease` on button transforms, `0.25s ease-in-out` on media height, `0.1s ease` on input focus.
10. Photography is the hero — every layout decision serves the product imagery first. Type and chrome recede; the bottle advances.

---

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