---
version: alpha
name: "Hill House Home"
description: "American feminine-romantic retail where a pure white canvas, Austin Light serif headlines, and deep navy accents create a sun-drenched garden-party atmosphere — preppy charm filtered through modern editorial restraint."

colors:
  # Surface / canvas
  background: "#ffffff"              # crisp white — the primary page canvas
  surface: "#faf9f7"                 # /* estimated */ off-white for section banding and promo bands
  surface-modal: "#fcfbf8"           # /* estimated */ warm cream used in email capture modal
  surface-dark: "#092065"            # /* estimated */ deep navy for promo bar / dark band

  # Ink / text
  ink: "#000000"                     # primary text — clean black
  ink-secondary: "#585858"           # muted charcoal for secondary labels and captions
  ink-tertiary: "#6a6a6a"            # /* estimated */ softest tier — placeholders, fine print
  on-dark: "#ffffff"                 # text on navy surfaces

  # Brand accent — deep navy
  primary: "#092065"                 # deep navy — primary CTA fill (from CTA context, high confidence)
  on-primary: "#ffffff"              # white text on navy button
  primary-hover: "#0b2679"           # /* estimated */ slightly brightened navy on hover
  primary-container: "#e8f4fe"       # was rgb(232,244,254) — Google format requires hex; light blue tint

  # Secondary accent — lake blue
  secondary: "#276680"               # mid-teal blue — secondary interactive accent
  on-secondary: "#ffffff"            # white text on teal

  # Interactive states
  text-hover: "#1883fd"              # /* estimated */ link hover — bright blue from dembrandt link data
  focus-ring: "#092065"              # navy focus indicator consistent with primary

  # Semantic
  error: "#d32f2f"                   # /* estimated */ standard red for form validation

  # Borders
  border: "#e8e8e8"                  # /* estimated */ light grey hairline for inputs and dividers
  border-input: "#000000"            # /* estimated */ black outline for focused/active inputs

  # Shadow tints
  shadow-soft: "#c8c8c8"             # /* estimated */ was rgba(0,0,0,0.12) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Austin, Austin Light, Georgia, Times New Roman, serif"   # self-hosted Austin Light
    fontSize: 112px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: -1px
  display:
    fontFamily: "Austin, Austin Light, Georgia, Times New Roman, serif"
    fontSize: 80px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "Austin, Austin Light, Georgia, Times New Roman, serif"
    fontSize: 48px
    fontWeight: 300
    lineHeight: 1.05
    letterSpacing: -0.25px
  heading-sub:
    fontFamily: "Austin, Austin Light, Georgia, Times New Roman, serif"
    fontSize: 32px
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: 0px
  heading-card:
    fontFamily: "Austin, Austin Light, Georgia, Times New Roman, serif"
    fontSize: 22px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: 0px
  body-large:
    fontFamily: "SweetSans, Helvetica Neue, Arial, sans-serif"            # self-hosted SweetSans
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "SweetSans, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0.5px
  nav-link:
    fontFamily: "SweetSans, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.14
    letterSpacing: 0px
  button-ui:
    fontFamily: "SweetSans, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 0.86
    letterSpacing: 0.98px
  caption:
    fontFamily: "SweetSans, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0.96px
  label-ui:
    fontFamily: "SweetSans, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.13px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 40px
  3xl: 50px
  4xl: 80px

rounded:
  none: 0px
  sm: 2px          # buttons and inputs — minimal softening
  md: 4px          # form containers and tooltips
  pill: 9999px     # circular icon buttons, swatch chips

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
    textTransform: uppercase
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
    padding: 12px 24px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
    border: "1px solid {colors.ink}"
    textTransform: uppercase
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
    padding: 12px 24px

  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 0px
    borderBottom: "1px solid {colors.ink}"
    textTransform: uppercase
  button-ghost-hover:
    borderBottom: "1px solid {colors.primary}"
    textColor: "{colors.primary}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px

  card-product:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    border: "1px solid {colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.border-input}"
    outline: "2px solid {colors.focus-ring}"

  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 3px 8px
    textTransform: uppercase

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

  nav-bar-promo:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.caption}"
    padding: 8px 20px

  modal:
    backgroundColor: "{colors.surface-modal}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 40px
---

# Hill House Home Design System

## Overview

Hill House Home doesn't design a storefront — it composes a garden party. The canvas is pure white (`{colors.background}`), but nothing about the experience reads clinical or sparse: a self-hosted Austin Light serif drops in at 80–112px with a featherweight 300, casting oversized italic-leaning letters across hero photography of women in floral sundresses on sunlit porches. The effect is editorial in the same way a Slim Aarons photograph is editorial — aspirational leisure, American femininity, a studied nonchalance that requires enormous effort to achieve. The deep navy primary (`{colors.primary}`) anchors every call to action against this brightness, a collegiate anchor that keeps the romance from floating into saccharine.

The typographic strategy is a clean two-family split: Austin (light, display-only) carries all the brand voice, and SweetSans — a custom humanist sans in four weights — handles every functional layer from navigation to body copy to button labels. The combination mirrors Hill House's own positioning: old-money prep (the serif) filtered through a downtown New York edit (the contemporary sans). Product names set in Austin Light feel like short-story titles; SweetSans buttons at `0.98px` letter-spacing signal action with Midtown confidence rather than fashion-week attitude. Navigation capitalizes sparingly, relying instead on weight and spacing to establish hierarchy.

The signature spatial gesture is unhurried fullness. The product grid breathes in three or four columns with equal gutters, but hero photography is always given full-bleed treatment — the Nap Dress in a garden setting is the brand's primary communication, and the design system recedes gracefully to let it land. A thin promo bar (`{colors.surface-dark}`) brackets the top of every page in deep navy, a recurring architectural element that gives the otherwise white experience a confident frame.

**Key Characteristics:**
- Pure white canvas (`{colors.background}`) — not cream, not grey; the white is deliberate contrast for lush photography
- Deep navy primary (`{colors.primary}`) used only on primary CTAs, promo bar, and focus states — chromatic restraint against the white field
- Austin Light (`{typography.display-hero}`, weight 300) for all headlines and campaign moments — featherlight luxury, never bold
- SweetSans (`{typography.body}`, `{typography.nav-link}`, `{typography.button-ui}`) for all functional layers — humanist warmth at utility scale
- Near-zero radius system (`{rounded.sm}` at 2px) on buttons and inputs — structurally clean with just enough softening to avoid severity
- Uppercase letter-spaced button labels (`{typography.button-ui}`, `0.98px`) signal confident femininity, not aggressive urgency
- Full-bleed editorial photography as the dominant brand expression — all chrome recedes to white neutrality
- Thin navy promo bar (`{colors.surface-dark}`) appears at the top of every page — the system's one recurring dark element
- Product grid favors three or four columns at desktop with clean gutters over dense tiling
- No decorative illustration or graphic ornamentation — the Nap Dress and garden settings carry all visual richness

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The primary canvas across all pages. A deliberate pure white that maximizes contrast for the brand's saturated florals and rich photography. Not a cream — the brightness is the point.
- **Off-White Surface** (`{colors.surface}`): A barely-warmer tint used for promotional section banding and editorial feature zones, distinguishing content blocks without hard borders.
- **Modal Cream** (`{colors.surface-modal}`): The warm near-white interior of overlays and the email capture popup — slightly softer than the page canvas to signal elevation and focus.
- **Deep Navy** (`{colors.surface-dark}`): The persistent promo bar color. Appears at the very top of every page as a bracketing architectural element.

### Ink / Text
- **Black** (`{colors.ink}`): Primary text across all roles. Clean, no-warmth pure black that reads sharply against the white canvas.
- **Charcoal** (`{colors.ink-secondary}`): Secondary labels — product metadata, navigation sub-items, sorting controls. Pulls back without losing legibility.
- **Soft Grey** (`{colors.ink-tertiary}`): The quietest tier — placeholders, helper text, cookie consent fine print. Nearly surface-level.
- **White on Dark** (`{colors.on-dark}`): Text and icons on the navy promo bar and dark surface contexts.

### Brand Accent
- **Deep Navy** (`{colors.primary}`): The brand's primary chromatic statement. Applied to CTA buttons ("SHOP NEW ARRIVALS", "CONTINUE"), the promo bar background, and focus rings. A collegiate prep anchor against white that reads grounded, not corporate.
- **On-Navy** (`{colors.on-primary}`): White label text on the navy CTA fill.
- **Navy Hover** (`{colors.primary-hover}`): The active/hovered CTA state — the same navy family, a half-step brighter.
- **Sky Container** (`{colors.primary-container}`): Was `rgb(232,244,254)` — a pale sky-blue tint for badge backgrounds and promotional labels that want a soft chromatic note without full saturation.

### Secondary Accent
- **Lake Blue** (`{colors.secondary}`): A secondary blue-teal — `#276680` — observed on secondary CTAs and editorial accent moments. Shares the blue register with the primary without competing.

### Structural
- **Light Border** (`{colors.border}`): Hairline dividers for input outlines, nav bottom rules, and product grid separators. Nearly invisible against white.
- **Black Border** (`{colors.border-input}`): High-contrast input border on focus — consistent with the system's black-primary text language.

## Typography

### Font Family
- **Primary Display**: `Austin` / `Austin Light` (self-hosted), a display-serif in the scotch roman tradition — tall x-height, delicate hairline serifs, strong horizontal stress. Used exclusively at headline scale (32–112px) at weight 300. Fallbacks: `Georgia, Times New Roman, serif`.
- **Functional Sans**: `SweetSans` (self-hosted, available in Regular/Medium/Bold/Light weights), a warmly-spaced humanist sans with open letterforms and a slightly informal quality suited to the brand's accessible-feminine positioning. Fallbacks: `Helvetica Neue, Arial, sans-serif`.
- **OpenType Features**: `Austin` likely enables stylistic alternates for the italic-feeling wordmark. `SweetSans` runs in small-caps or uppercase-capitalization for button labels and utility text.

### Hierarchy

The complete type scale is in the `typography:` token block. Reference tokens directly via `{typography.display-hero}`, `{typography.button-ui}`, etc.

| Token | Use |
|---|---|
| `display-hero` | 112px / weight 300 — full-bleed campaign heroes, summer collection openers |
| `display` | 80px / weight 300 — category feature headers, editorial section titles |
| `heading-section` | 48px / weight 300 — sub-collection headers, lookbook chapters |
| `heading-sub` | 32px / weight 300 — article headers, editorial feature leads |
| `heading-card` | 22px / weight 300 — product card names set in Austin for editorial lift |
| `body-large` | 17px SweetSans — about-page copy, editorial standfirsts |
| `body` | 14px SweetSans — product descriptions, footer links, filter labels |
| `nav-link` | 14px SweetSans — primary navigation items |
| `button-ui` | 14px SweetSans / weight 500 / 0.98px tracking / uppercase — all CTA labels |
| `caption` | 12px SweetSans / 0.96px tracking — size labels, swatches, fine print |
| `label-ui` | 12px SweetSans / weight 600 — form labels and badge text |

### Principles
- **Austin at weight 300 only**: no bold, no regular, no italic-variant headlines. The featherlight weight IS the brand's typographic voice — strength through thinness.
- **Uppercase sparing**: button labels and some captions use `text-transform: uppercase`; body and navigation do not. This creates clear functional cues without an aggressive all-caps aesthetic.
- **Spacing opens the sans**: `0.96–0.98px` tracking on `SweetSans` at 12–14px gives UI labels the airy quality that matches the brand's whitespace philosophy.
- **Size confidence at body scale**: 14px body text against white canvas signals editorial confidence rather than accessibility padding.

## Layout

### Spacing System
The complete scale is in the `spacing:` token block. Base unit: 8px, with a generous 20px at the `lg` step reflecting the site's 20px common value.

Hill House Home uses space as a directional cue: sections breathe at 50–80px vertical gaps, slowing the scroll to match the brand's leisurely browsing pace. The product grid never feels crowded — gutters open at 20–24px and hold.

### Grid & Container
- Max content width: approximately 1440px; standard page container approximately 1340px
- Desktop product grid: three or four equal columns with 20–24px gutters
- Hero sections: full-bleed photography spanning viewport width; Austin headline overlaid in the lower third
- Navigation: centered wordmark ("HILL HOUSE HOME"), utility icons (search, wishlist, bag) right-aligned, category nav below

### Whitespace Philosophy
- **White space is confidence**: the clean white field between sections is not empty — it is the brand's aesthetic statement
- **Three over four**: the default grid favors three-column layouts at desktop for editorial weight; four-column for sale or category density modes
- **No decoration between sections**: vertical spacing alone separates content zones; no dividers, no alternating color bands

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page canvas, standard sections |
| Hairline (Level 1) | `1px solid {colors.border}` | Input outlines, nav bottom rule, product grid separators |
| Card (Level 2) | `box-shadow: 0 2px 8px {colors.shadow-soft}` | Product card hover lift |
| Modal (Level 3) | `box-shadow: 0 8px 24px {colors.shadow-soft}` | Email capture overlay, cart drawer |
| Focus Ring | `outline: 2px solid {colors.focus-ring}` | Keyboard focus on all interactive elements |

**Shadow Philosophy**: Hill House Home's depth language is minimal and functional. Shadows reference `{colors.shadow-soft}` — a light grey, not a warm-toned tint — so the lift reads as clean offset rather than ambient warmth. Cards are flat at rest; shadow appears only on hover or in modal contexts. The system has no decorative layered shadows.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Image frames, section panels, editorial blocks |
| `sm` | 2px | Buttons, form inputs — near-imperceptible softening |
| `md` | 4px | Modal containers, tooltip boxes |
| `pill` | 9999px | Icon-only circular buttons (search, wishlist), color swatch chips |

The system is architecturally near-flat. Two pixels of rounding on buttons prevents harshness without compromising the clean geometric grid. The pill applies only to icon-scale circular elements. All product photography and content panels meet at 90° corners — no softness at the frame level.

## Components

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

### Button Variants
- **`button-primary`** — Deep navy fill (`{colors.primary}`), white text (`{colors.on-primary}`), uppercase SweetSans at `0.98px` tracking, `{rounded.sm}`. The system's anchor CTA. Used for "SHOP NEW ARRIVALS", "CONTINUE", "ADD TO BAG". Hover darkens to `{colors.primary-hover}`.
- **`button-secondary`** — White fill, black text, `1px solid {colors.ink}` outline, same geometry and tracking. Used for secondary actions — "VIEW ALL", "BACK TO RESULTS". Hover inverts to black fill.
- **`button-ghost`** — Transparent fill, `{colors.ink}` text, bottom-border underline only. Used for in-context text actions — "View more", "See all sizes". Hover shifts border to `{colors.primary}`.

### Cards
- **`card`** / **`card-product`** — Flat white surfaces (`{colors.background}`), no border radius, no shadow at rest. Product photography fills edge-to-edge above the fold; product name appears in `{typography.heading-card}` Austin Light below the image. Card hover may produce a subtle `{colors.shadow-soft}` lift.

### Inputs
- **`input`** — White background, `1px solid {colors.border}` perimeter outline, `{rounded.sm}`. Focus state adds `2px solid {colors.focus-ring}` navy outline. The email capture modal shows this pattern clearly.

### Badges / Tags
- **`badge`** — Sky container (`{colors.primary-container}`), navy text (`{colors.primary}`), `{typography.caption}` SweetSans, uppercase, `{rounded.sm}`. Applied to product flags like "NEW" and promotional labels.

### Navigation
- **`nav-bar`** — Pure white background, `{colors.ink}` text at `{typography.nav-link}`. Hill House wordmark centered in the middle row; search/wishlist/bag icons right-aligned. A thin navy promo bar (`{colors.nav-bar-promo}`) rides above it.

### Modal
- **`modal`** — Warm cream surface (`{colors.surface-modal}`), `{rounded.md}` corners, 40px padding. The email capture overlay uses Austin serif for the headline offer and SweetSans for the form. Closes with an `×` in the upper right.

## Do's and Don'ts

### Do
- Use `{colors.background}` pure white as the page canvas — the whiteness is a deliberate frame for saturated florals
- Reserve `{colors.primary}` navy strictly for primary CTAs, the promo bar, and focus rings — its rarity against white is the entire CTA strategy
- Set all display and campaign headlines in Austin Light at weight 300 — never heavier, never in `SweetSans`
- Apply `{rounded.sm}` (2px) consistently to buttons and inputs — this is the system's one softening gesture; more rounding breaks the geometric integrity
- Keep product cards at `{rounded.none}` — the image frames must meet at right angles; softening them diminishes the editorial grid quality
- Use generous vertical gaps (50–80px) between page sections; rushed pacing reads as off-brand discount retail
- Uppercase all CTA button labels with `0.98px` letter-spacing; lowercase CTAs read casual in a way that undercuts the brand's confident feminine tone
- Derive shadow tints from `{colors.shadow-soft}` — cool grey, never warm or coloured; warmth lives in the photography, not the chrome

### Don't
- Don't substitute a cream or off-white for `{colors.background}` — this is not Sézane; the whiteness is intentional and structural
- Don't set Austin at bold (weight 700+) — a heavy Austin serif reads costume-drama luxury, not Hill House's breezy American garden-party register
- Don't introduce mid-range border-radius (8–24px) on product cards or primary UI elements — the system uses `{rounded.none}` for all content surfaces
- Don't use `{colors.text-hover}` bright blue for anything other than inline link states — it is an interactive-state color, not a brand color
- Don't add decorative illustrations, graphic patterns, or motif elements to the chrome — the floral richness lives in the photography, not the UI layer
- Don't use SweetSans at display scale (48px+) — Austin owns the large type register; mixing in a sans at that scale dilutes the typographic identity
- Don't stack the navy promo bar and a navy button in adjacent vertical proximity — when `{colors.surface-dark}` and `{colors.primary}` appear together without whitespace between them, the system loses its contrast hierarchy
- Don't use the sky container (`{colors.primary-container}`) as a surface for large sections — it is sized for small badge elements only

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <425px | Single-column product grid; full-bleed hero with overlay text |
| Mobile | 425–768px | Single-column; nav collapses to hamburger; promo bar persists |
| Tablet | 769–1024px | Two-column product grid; nav may remain expanded or hamburger |
| Desktop | 1025–1340px | Three-column product grid; full horizontal nav |
| Large Desktop | >1340px | Four-column grid option; max-width container centers at ~1340px |

### Touch Targets
- Icon buttons (search, wishlist, bag) use `{rounded.pill}` at 24px diameter minimum — meets 44×44px touch target via padding
- Primary CTAs have sufficient height (minimum 44px tap area) via padding
- Product card tap areas extend to the full card frame

### Collapsing Strategy
- Navigation collapses to hamburger below approximately 1024px; category mega-nav becomes an accordion drawer
- Product grid: 4 → 3 → 2 → 1 column as viewport narrows
- Hero typography scales down proportionally; Austin serif maintains light weight across all sizes
- Promo bar persists across all viewports, though copy may truncate on mobile
- Cart and wishlist transition to slide-in drawers on all viewport sizes

### Image Behavior
- Hero photography is always full-bleed and `object-fit: cover` — crop preserves the face/dress, never the background
- Product card images are square-cropped at consistent aspect ratios across grid widths
- Editorial lifestyle imagery is presented at natural editorial aspect ratios (landscape-dominant on desktop)

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Brand accent / CTA: `{colors.primary}`
- Secondary text: `{colors.ink-secondary}`
- Border: `{colors.border}`
- Dark surface: `{colors.surface-dark}`

### Example Component Prompts

- "Build a Hill House Home hero section using `{colors.background}` as the page background with full-bleed photography. Overlay the campaign title 'The American Summer Capsule' in Austin Light at `{typography.display}` (80px, weight 300). Place a CTA button using `{components.button-primary}` (navy `{colors.primary}` fill, white text, uppercase `{typography.button-ui}` at 0.98px tracking, `{rounded.sm}`) in the lower third."
- "Create a product card using `{components.card-product}`: white background (`{colors.background}`), `{rounded.none}` image frame at square aspect ratio (1:1), product name below in `{typography.heading-card}` Austin Light 22px, price in `{typography.body}` SweetSans, and a color swatch row of `{rounded.pill}` chips."
- "Build a primary CTA button matching `{components.button-primary}`: background `{colors.primary}`, text `{colors.on-primary}`, font `{typography.button-ui}` (SweetSans 14px / weight 500 / `letter-spacing: 0.98px` / `text-transform: uppercase`), border-radius `{rounded.sm}`, padding `12px 24px`. Hover state uses `{colors.primary-hover}`."
- "Create the Hill House Home navigation bar using `{components.nav-bar}`: white background, centered wordmark in `{typography.heading-card}` Austin Light, horizontal category links in `{typography.nav-link}` SweetSans 14px. Above it, a narrow promo bar using `{components.nav-bar-promo}`: `{colors.surface-dark}` background, `{colors.on-dark}` text in `{typography.caption}` uppercase."
- "Build an email capture modal using `{components.modal}`: `{colors.surface-modal}` background, `{rounded.md}` corners, 40px padding, headline in `{typography.heading-sub}` Austin Light ('Enjoy 15% Off'), subtext in `{typography.body}` SweetSans, an `{components.input}` field with `{colors.border}` outline, and a `{components.button-primary}` submit button."
- "Create a 'NEW' product badge using `{components.badge}`: `{colors.primary-container}` background, `{colors.primary}` text, `{typography.label-ui}` SweetSans 12px / weight 600 / uppercase, `{rounded.sm}`, padding `3px 8px`."

### Iteration Guide

1. Start with `{colors.background}` pure white canvas — this is the visual foundation; all brand richness enters via photography
2. Apply `{colors.primary}` navy only to primary CTAs and the promo bar — its scarcity is the entire CTA strategy
3. Set all display text in `{typography.display-hero}` Austin Light at weight 300; never add bold to editorial headlines
4. Use `{typography.button-ui}` SweetSans uppercase with `0.98px` tracking on all button labels — this is the system's action voice
5. Color hierarchy: black ink → charcoal secondary → navy accent → light borders; never introduce a fourth hue in the UI layer
6. Radius range: `{rounded.none}` for content surfaces and image frames → `{rounded.sm}` (2px) for buttons and inputs → `{rounded.pill}` for icon buttons only
7. Apply Austin Light for any text over 22px; SweetSans for 21px and below; never mix the two families at the same typographic moment

---

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