---
version: alpha
name: "The Hoxton"
description: "Warm-cream open-house hospitality brand: GT America Extended display type over a buttery canvas, editorial warmth without luxury posturing, and a retro-tinted booking layer that feels like a neighborhood broadside."

colors:
  # Surface / canvas
  background: "#fef2e3"            # warm butter cream — the signature brand canvas
  surface: "#fef9f3"               # near-white tint for secondary UI panels
  surface-dark: "#303131"          # near-black footer and dark section surface

  # Text / ink
  ink: "#3e3a37"                   # warm charcoal — primary text on cream surfaces
  ink-secondary: "#565656"         # mid grey for secondary text and hover states
  ink-muted: "#999999"             # placeholder text and recessive labels
  on-background: "#3e3a37"
  on-surface: "#3e3a37"
  on-dark: "#fef2e3"               # warm cream text on dark surfaces (not pure white)

  # Brand accent
  primary: "#ff9272"               # warm coral — primary CTA (Find a Room button)
  on-primary: "#7f2006"            # deep brick red for text on coral button /* estimated */
  primary-container: "#ffdfd5"     # light coral tint for badge/tag surfaces /* estimated */

  # Interaction states
  text-hover: "#565656"            # link hover — all anchor states
  focus-ring: "#3e3a37"            # keyboard focus outline
  primary-hover: "#d97c61"         # coral darkens on button hover

  # Semantic
  border: "#3e3a37"                # full dark border on outlined buttons
  border-warm: "#dbc9b2"           # warm sand border — filter chip and listing accents
  border-light: "#c4c4c4"          # standard input and divider border
  border-subtle: "#d8d8d8"         # lightest dividers and nav separators

  # Shadow
  shadow-soft: "#000000"           # was rgba(0,0,0,0.2–0.32) — Google format requires hex

typography:
  display-hero:
    fontFamily: "GT America Extended, Barlow Condensed, Helvetica Neue, Arial, sans-serif"
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  display:
    fontFamily: "GT America Extended, Barlow Condensed, Helvetica Neue, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.17
    letterSpacing: 0px
  heading-section:
    fontFamily: "GT America Extended, Barlow Condensed, Helvetica Neue, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sub:
    fontFamily: "GT America Extended, Barlow Condensed, Helvetica Neue, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "GT America Light, Barlow, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.33
    letterSpacing: 0px
  body:
    fontFamily: "GT America Light, Barlow, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "GT America Extended, Barlow Condensed, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  button-ui:
    fontFamily: "GT America Extended, Barlow Condensed, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0px
  label-upper:
    fontFamily: "GT America Light, Barlow, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: 2px
  caption:
    fontFamily: "GT America Light, Barlow, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 300
    lineHeight: 1.33
    letterSpacing: 0.5px

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

rounded:
  none: 0px
  pill: 9999px    # location filter chips — 24px actual radius

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    border: 1px solid {colors.border}
    padding: 13px 24px
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 13px 24px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    border: 1px solid {colors.border-warm}
    padding: 14px 22px
  button-ghost-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 14px 22px
  filter-chip:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.pill}"
    padding: 10px 40px
  filter-chip-inactive:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.pill}"
    padding: 10px 40px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
  input:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    border: 0px 0px 1px solid {colors.border}
    padding: 34px 15px 14px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    border: 1px solid {colors.border}
    padding: 34px 15px 14px
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 10px
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    border: 0px 0px 1px solid {colors.border-subtle}
    padding: 12px 24px
---

# The Hoxton Design System

## Overview

The Hoxton lands somewhere between a well-worn travel magazine and a neighborhood pub that happens to have very good rooms. Its canvas — a warm butter cream (`{colors.background}`) registered at `#fef2e3` — immediately separates it from both the white-on-white minimalism of tech-influenced hotels and the heavy-dark drama of luxury competitors. This is the color of printed stationery, of café napkins, of light through aged cotton. Everything rests on it: the `{colors.ink}` charcoal text, the coral-orange booking CTA, the full-bleed editorial photography. The warmth is not accidental; it sets the entire emotional register before a single word is read.

The type system is built on GT America Extended, a contemporary grotesque with wide, poster-like proportions, used at every display size at weight 400. At 80px it reads as confident broadside typography — not a luxury serif, not a startup grotesque, but something with the confident squareness of an old trade-show poster or a neighborhood bulletin. Body copy shifts to GT America Light at weight 300, which introduces an almost fragile delicacy against the extended display weight — a deliberate contrast that keeps the page editorial rather than commercial. Tiempos Fine, a refined serif, is loaded as a complementary accent face for pull-quote moments, though the GT America family does the structural heavy lifting throughout. The interplay between the extended-width display text and the light-weight reading copy is the system's most considered typographic choice.

The interaction layer makes exactly one chromatic statement: `{colors.primary}`, a warm coral at `#ff9272`, reserved entirely for the primary booking CTA. The navigation stays in charcoal on cream, the body copy in warm grey, the borders in dark tones. That single coral appears only at the exact moment a guest is invited to act — on the "Find a Room" button, on booking confirmation surfaces — and the restraint makes it feel decisive rather than decorative. Filter chips on the destinations page use a binary pill shape (`{rounded.pill}`) as the sole departure from the system's otherwise rectilinear character.

**Key Characteristics:**
- Warm butter cream canvas `{colors.background}` — the signature ground that eliminates both cold minimalism and heavy luxury dark modes
- GT America Extended at weight 400 for all display text — poster-wide proportions that read as hand-printed rather than digitally produced
- GT America Light at weight 300 for body and supporting copy — near-transparent on the cream, maximally readable at column scale
- Tiempos Fine serif loaded as an accent face for editorial pull moments alongside the GT America family
- Coral `{colors.primary}` reserved exclusively for the primary booking CTA — one accent, one moment, absolute clarity
- Sharp-edged buttons at `{rounded.none}` for all brand-owned CTAs — no app-friendly roundness in the primary interaction vocabulary
- Pill-shaped filter chips (`{rounded.pill}`) as the single exception to the rectilinear rule — only on destination/location filter UI
- Bottom-border-only inputs (`border-bottom: 1px solid {colors.border}`) — the form layer as a line, not a box
- `0.3–0.6s ease` transition timing on navigation, swiper, and button states — unhurried, in keeping with the open-house pace
- Warm charcoal footer surface (`{colors.surface-dark}`) reversing to `{colors.on-dark}` cream text — the dark-mode moment that belongs only to the footer

## Colors

### Primary Surfaces
- **Butter Cream** (`{colors.background}`): The entire brand canvas. Not white, not warm grey — a specific buttery tone that recalls quality print paper and sets every surface relationship that follows. Navigation, hero sections, booking panels, and body sections all default to this canvas.
- **Near-White Panel** (`{colors.surface}`): A fractionally lighter cream for secondary UI surfaces and hover/focus fill states. The distinction is nearly imperceptible — these two surfaces are in conversation, not contrast.
- **Charcoal Dark** (`{colors.surface-dark}`): Footer and dark-section surface. Near-black with a warm undertone that echoes the warm charcoal ink rather than a cold neutral.

### Text / Ink
- **Warm Charcoal** (`{colors.ink}`): Primary reading text. `#3e3a37` leans slightly brown-warm — considerably softer than pure black, appropriate for reading against the cream canvas.
- **Mid Grey** (`{colors.ink-secondary}`): Secondary text, hover states for all anchors. Used as the transition color on link interactions.
- **Muted Grey** (`{colors.ink-muted}`): Placeholder text and deeply recessive UI labels.
- **On Dark** (`{colors.on-dark}`): The reverse of the background token — warm cream on charcoal surfaces, not pure white. The footer's text inherits this value, maintaining the warm tone even in dark contexts.

### Brand Accent
- **Warm Coral** (`{colors.primary}`): The brand's single chromatic accent. Applied exclusively to the primary booking CTA ("Find a Room") and confirmation surfaces. Absent from decorative elements, navigation, and secondary UI — the restraint makes it a signal rather than a decoration.

### Borders & Structure
- **Dark Border** (`{colors.border}`): Full charcoal border on outlined secondary buttons. The same warm-dark tone as the ink.
- **Warm Sand Border** (`{colors.border-warm}`): `#dbc9b2` — a sandy warm tone used on listing cards, filter chips, and booking UI borders. A softer structural edge that reads as natural rather than mechanical.
- **Light Border** (`{colors.border-light}`): `#c4c4c4` — standard input and secondary divider tone.
- **Subtle Divider** (`{colors.border-subtle}`): `#d8d8d8` — the most withdrawn separator, used for nav section breaks.

### Shadow
- **Drop Shadow** (`{colors.shadow-soft}`): Applied rarely. Only on swiper navigation arrows and modal-grade overlays — `rgba(0,0,0,0.2–0.32)` in practice, represented as `{colors.shadow-soft}` in YAML. The system is otherwise flat.

## Typography

### Font Family
- **Primary Display / UI**: `GT America Extended Regular` and `GT America Extended Bold`, with fallbacks: `Barlow Condensed, Helvetica Neue, Arial, sans-serif`. Extended-width grotesque: poster proportions, editorial authority, zero digital softness. Self-hosted as `.woff2`.
- **Body / Supporting Copy**: `GT America Light`, with fallbacks: `Barlow, Helvetica Neue, Arial, sans-serif`. Weight 300 — deliberate fragility in the reading layer. Self-hosted as `.woff2`.
- **Accent Serif**: `Tiempos Fine Light` and `Tiempos Fine Regular`, with fallbacks: `Georgia, Times New Roman, serif`. Used selectively for editorial pull-quotes and accent moments. Self-hosted as `.woff2`.
- **OpenType Features**: No variable axes declared. Static faces loaded at specific weights. Uppercase transform applied selectively on `label-upper` instances (navigation category labels, filter chips).

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Full-bleed hero headlines — 80px GT America Extended at weight 400 |
| `display` | Section openers, location feature titles — 48px |
| `heading-section` | Major content block heads — 40px |
| `heading-sub` | Sub-section titles, card headings — 32px |
| `body-large` | Intro copy and pull-quote body — 18px Light |
| `body` | Default reading copy — 16px Light, 1.5 line-height |
| `nav-link` | Navigation links and footer utility text — 14px Extended |
| `button-ui` | All CTA labels — 16px Extended Bold |
| `label-upper` | Location filter labels, category identifiers — 13px Light, 2px tracking, uppercase |
| `caption` | Image captions, fine-print, metadata — 12px Light |

### Principles
- GT America Extended at weight 400 for all display headings — the extended width alone carries authority; heavier weights would tip toward aggressive rather than inviting
- GT America Light at weight 300 for body copy — the near-invisible weight creates a quiet reading surface that defers to photography and display type
- No italic usage in core UI — italics reserved for editorial pull-quotes in Tiempos Fine
- Uppercase transform applied only to `label-upper` filter chip labels — not globally, not to navigation or CTAs
- Letter-spacing neutral at display scale; 2px tracking deployed only on small uppercase label instances

## Layout

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

The Hoxton's spacing rhythm is generous without being airy. Interior component padding uses tight sub-16px values that echo print layout discipline — buttons at `8px 16px`, navigation at `12px 24px` vertical. Section transitions jump to `48–96px`, giving editorial content blocks the breathing room of a well-typeset magazine spread. The workhorse values are `10px` (tight UI elements) and `32–48px` (section-level vertical rhythm).

### Grid & Container
- Max content width: approximately 1400px on wide viewports
- Navigation: wordmark at 28px left offset, utility links right-aligned, full-width horizontal bar with `1px solid {colors.border-subtle}` bottom rule
- Hero sections: full-bleed photography or video with booking bar panel overlaid at bottom
- Property grids: 2–4 columns depending on viewport, consistent gap rhythm
- Booking bar: integrated panel within the hero, inputs stacked horizontally on desktop

### Whitespace Philosophy
- Section-level vertical gaps at `48–96px` give the site the unhurried rhythm of hotel lobby moments — nothing rushes
- Internal component padding is deliberately tight, borrowing from print layout sensibilities rather than app conventions
- Photography fills edge-to-edge within containers — no inset margins on imagery

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All content surfaces, standard navigation, card containers |
| Subtle (Level 1) | `rgba(0,0,0,0.2) 0px 0px 18px 0px` | Booking modal overlays |
| Arrow (Level 2) | `rgba(0,0,0,0.25) 0px 0px 15px 5px` | Swiper navigation arrow buttons |
| Press (Level 3) | `rgba(0,0,0,0.32) 0px 4px 4px 0px` | Pressed/active state on swiper controls |
| Focus Ring | `outline: 2px solid {colors.focus-ring}` | Keyboard navigation — warm charcoal ring |

**Shadow Philosophy**: The Hoxton is a near-flat system. Box shadows appear only on the booking overlay modal and swiper navigation arrows — interactive chrome that genuinely needs to float. Every content card, editorial section, and navigation element sits flat on the cream canvas without depth treatment. The sense of three-dimensionality comes from the photography itself: full-bleed images against the warm canvas create all the visual layering the system requires.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All brand CTAs, secondary buttons, inputs, cards, navigation — the absolute default |
| `pill` | 9999px | Location filter chips exclusively — 24px actual radius |

The system is binary and decisive. Every button, input, card, and navigation element is sharp-cornered (`{rounded.none}`) — this is not a rounded-corners-as-friendliness brand. The single exception is the destination filter chip row, where pill-shaped tags let guests scan city filters at a glance. The contrast between the pill filter and the rectilinear booking button is entirely functional: filtering is browsing, booking is committing.

## Components

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

### Button Variants

- **`button-primary`** — Warm coral (`{colors.primary}`) fill, deep brick `{colors.on-primary}` label, zero radius, `8px 16px` padding. The booking CTA. Appears only in the booking bar and reservation confirmation — its chromatic singularity is its power.
- **`button-secondary`** — Transparent background, `1px solid {colors.border}` outline, charcoal `{colors.ink}` label. Used for "View Offer", "Sign me up", and secondary actions. On hover: fills to charcoal with cream text inversion.
- **`button-ghost`** — Transparent with `{colors.border-warm}` sand border. Lower hierarchy actions on listing pages. Hover follows the same fill-to-dark pattern.

### Filter Chips

- **`filter-chip`** (active): Dark charcoal fill (`{colors.ink}`), warm cream text, `{rounded.pill}`, `10px 40px` padding. The active location category in the destinations row.
- **`filter-chip-inactive`**: Background canvas (`{colors.background}`), charcoal text, same pill geometry. Unselected filter state.

### Cards

Property and offer cards sit flat on `{colors.background}` with no shadow, no border-radius, and no border. Photography leads; the card container is a transparent wrapper. Text below images inherits the standard type hierarchy. No elevation decorates a card — the photography provides all visual weight.

### Inputs

Booking bar inputs use a bottom-border-only treatment: transparent background, `1px solid {colors.border}` bottom edge, `34px 15px 14px` padding that allows the floating label to occupy the upper space. On focus: background shifts to `{colors.surface}`, border resolves to full `1px solid`. The form layer reads as a printed form field, not a digital input box.

### Navigation

Top bar on `{colors.background}`, wordmark SVG at 28px left offset, `1px solid {colors.border-subtle}` bottom rule. GT America Extended 14px at weight 400 for all link labels. A language selector and "My Booking" link sit right-aligned; the coral booking CTA appears in the far-right position as a color anchor. On mobile, the nav collapses to a hamburger toggle with a full-width overlay at `0.3–0.6s ease`.

## Do's and Don'ts

### Do
- Use `{colors.background}` (`#fef2e3`) as the universal canvas — never substitute white or light grey; the warmth is the brand
- Reserve `{colors.primary}` coral exclusively for the primary booking CTA — one accent, one signal, one moment of color
- Set all CTA buttons to `{rounded.none}` — the rectilinear shape is the booking interaction's visual language
- Use GT America Extended at weight 400 for all display headings — the extended width alone carries authority without needing heavier weight
- Apply GT America Light at weight 300 for body copy — the deliberate fragility of the light weight against the cream canvas is the reading surface's signature
- Keep inputs as bottom-border-only fields — `border-bottom: 1px solid {colors.border}`, no box border, no radius
- Use `{colors.on-dark}` warm cream (not pure white) for text on the dark footer surface
- Apply pill radius (`{rounded.pill}`) only to location filter chips — this is its sole sanctioned appearance

### Don't
- Don't introduce mid-range border-radius (4–20px) — the system is binary: `{rounded.none}` for brand UI, `{rounded.pill}` for filter chips only
- Don't use `{colors.primary}` coral as a decorative fill, background, or typographic accent — it belongs only to the primary booking action
- Don't substitute cool grey or pure white for `{colors.background}` — the warmth is structural, not cosmetic; a grey canvas breaks every color relationship in the system
- Don't apply GT America Extended Bold outside button and logotype contexts — at weight 700 with the extended width it becomes aggressive rather than editorial
- Don't add box shadows to content cards — depth is the photography's job, not the container's
- Don't use Tiempos Fine at body-copy sizes — the serif is an editorial accent, not a reading face; it only performs above 24px
- Don't uppercase navigation links or button labels — uppercase is reserved for `label-upper` filter chips only
- Don't introduce color beyond the charcoal/cream/coral triad — the warmth strategy depends on chromatic restraint

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <400px | Single column, hero type below 40px, stacked booking bar |
| Mobile | 400–640px | Single column, hamburger nav, full-width CTA buttons |
| Tablet Small | 640–768px | Two-column property grids begin, booking bar starts compressing |
| Tablet | 768–1024px | Expanded layout, nav expands, hero type mid-scale |
| Desktop | 1024–1280px | Full horizontal nav, multi-column grids, horizontal booking bar |
| Large Desktop | >1280px | Max grid width (~1400px), 80px hero display, full editorial layout |

### Touch Targets
- Primary booking button: `8px 16px` padding; on mobile expands to minimum 44px tap height
- Filter chips: `10px 40px` provides thumb-friendly tap geometry on destination pages
- Navigation links: adequate at 14px Extended with expanded touch padding in hamburger overlay
- Booking bar inputs: floating-label design requires generous vertical padding for touch interaction; `34px 15px 14px` implemented in the booking panel

### Collapsing Strategy
- **Navigation**: Full horizontal bar collapses to hamburger below ~768px; overlay drawer via `0.3s ease` transform on opacity and transform
- **Hero**: Full-bleed photography or video maintained at all breakpoints; booking panel moves from overlay to stacked below image on mobile
- **Property grids**: 4-column → 2-column → single-column with `0.3s` responsive transitions
- **Booking bar**: Horizontal input row collapses to vertical stack on mobile, with inputs full-width and CTA spanning the full column
- **Type scaling**: 80px display scales to approximately 48px on tablet, 36px on mobile — GT America Extended reads well at all intermediate sizes due to the extended proportions

### Image Behavior
- Full-bleed hero photography: `object-fit: cover`, aspect ratio maintained across all breakpoints; no interior padding
- Property cards: fixed-aspect-ratio image containers (typically 4:3 or 16:9), `object-fit: cover`
- No `border-radius` applied to images at any breakpoint — sharp-edged photography throughout

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` — warm butter cream `#fef2e3`
- Text: `{colors.ink}` — warm charcoal `#3e3a37`
- Brand accent (booking CTA only): `{colors.primary}` — coral `#ff9272`
- Secondary text / hover: `{colors.ink-secondary}`
- Dark surface (footer): `{colors.surface-dark}`
- On dark: `{colors.on-dark}` — warm cream `#fef2e3`
- Border: `{colors.border}` — dark charcoal
- Warm accent border: `{colors.border-warm}`

### Example Component Prompts

- "Create a hero section on the warm butter cream canvas (`#fef2e3`). Full-bleed photography fills the upper portion. Display headline in GT America Extended (or Barlow Condensed fallback) 80px weight 400 line-height 1.3 color `#3e3a37`. Below the hero, render a booking bar: transparent inputs with bottom-border-only treatment (`border-bottom: 1px solid #3e3a37`), `34px 15px 14px` padding, floating labels in GT America Light 13px uppercase tracking 2px. Primary CTA at the right of the bar: `#ff9272` background, `#7f2006` label text, zero border-radius, 8px 16px padding, GT America Extended Bold 16px. No shadow on the bar itself."
- "Design a hotel property card on `{colors.background}`. Full-bleed photography at top, no border-radius on image. Below: property name in GT America Extended 40px weight 400 color `{colors.ink}`. Location label above in GT America Light 13px uppercase 2px tracking `{colors.ink-muted}`. Body description in GT America Light 16px weight 300 line-height 1.5. Secondary CTA button at bottom: transparent background, `1px solid {colors.border}`, zero radius, 13px 24px padding. No shadow, no card border."
- "Build a top navigation bar: `{colors.background}` surface, `1px solid {colors.border-subtle}` bottom rule, `12px 24px` padding. Wordmark wordmark SVG at left 28px offset. Horizontal GT America Extended 14px weight 400 nav links color `{colors.ink}`. Right side: 'My Booking' link and a coral CTA `{components.button-primary}`. All links transition to `{colors.ink-secondary}` on hover over `0.3s ease`."
- "Create a destination filter row: full-width horizontal scroll of pill chips. Active chip: `{components.filter-chip}` — charcoal `{colors.ink}` background, `{colors.on-dark}` text, `{rounded.pill}`, `10px 40px` padding, GT America Light 13px uppercase 2px tracking. Inactive chip: `{components.filter-chip-inactive}` — canvas `{colors.background}`, `{colors.border-warm}` border 1px, charcoal text. Transition background `0.3s ease` on selection."
- "Design a newsletter sign-up section on `{colors.surface-dark}` charcoal background. Section heading in GT America Extended 40px weight 400 color `{colors.on-dark}`. Body copy in GT America Light 16px weight 300 `{colors.on-dark}`. Email input: transparent background, `1px solid {colors.on-dark}` bottom border only, GT America Light 16px weight 300 color `{colors.on-dark}`. Submit button beside input: `{colors.primary}` coral background, `{colors.on-primary}` label, zero radius, GT America Extended Bold 16px."
- "Create a room rate card on `{colors.background}`. Offer headline in GT America Extended 32px weight 400 `{colors.ink}`. Rate detail in GT America Light 18px weight 300 `{colors.ink-secondary}`. Warm sand border frame `1px solid {colors.border-warm}` around the entire card, zero radius. Bottom: `{components.button-ghost}` 'View offer' button. On hover the ghost button fills to charcoal with `{colors.on-dark}` text."

### Iteration Guide

1. Start with `{colors.background}` — the warm butter cream canvas is the entire emotional premise; do not substitute white or cool grey
2. GT America Extended at weight 400 owns all display headings; shift to GT America Light at weight 300 for every reading-copy moment — these two weights are the typographic identity
3. `{colors.primary}` coral appears only in the primary booking CTA — add it last, not first; build the charcoal-and-cream composition first and let the accent confirm the action layer
4. All interactive shapes default to `{rounded.none}` — the sole exception is the filter chip row (`{rounded.pill}`); any other rounded element is outside system
5. Inputs are bottom-border lines, not boxes — `border-bottom: 1px solid {colors.border}`, transparent background, floating label in the upper padding zone
6. Section transitions at `{spacing.2xl}` (48px) to `{spacing.4xl}` (96px) — the open-house rhythm requires generous breathing room at section boundaries
7. On dark surfaces (`{colors.surface-dark}`), use `{colors.on-dark}` warm cream — never pure white; maintaining warmth even in the dark register is a system rule

---

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