---
version: alpha
name: "Rosewood Hotels"
description: "Warm ivory canvas, Engravers Gothic spaced capitals for wayfinding, Austin Light for editorial grace, and a deep forest-green CTA — a hospitality language built on residential intimacy and 'A Sense of Place'"

colors:
  # Surface / canvas
  background: "#fafbf5"         # warm ivory — Rosewood's signature parchment canvas
  surface: "#ffffff"             # pure white for elevated panels and modal surfaces
  surface-warm: "#f3f2ec"        # slightly deeper warm tone for alternating section bands /* estimated */
  surface-dark: "#1a1a18"        # near-black for footer and cinematic overlay treatments /* estimated */

  # Text / ink
  ink: "#212529"                 # near-black primary text — 711 occurrences in extraction
  ink-muted: "#555550"           # secondary text, captions, supporting copy /* estimated */
  ink-quiet: "#888880"           # tertiary — placeholder text, disabled states, meta labels /* estimated */
  on-background: "#212529"
  on-surface: "#212529"

  # Brand accent — Rosewood forest green
  primary: "#013d2d"             # deep forest green CTA — from cmp-button extraction
  primary-hover: "#014936"       # one-step lightening on hover — from dembrandt interactiveDeltas
  primary-container: "#d4e8e2"   # pale sage wash for tinted surface treatments /* estimated */
  on-primary: "#fafbf5"          # warm ivory text on green surfaces

  # State / interaction
  border: "#cfcbaf"              # warm tan hairline — rgb(207,203,175) from hr dividers
  border-dark: "#212529"         # strong near-black rule for button outlines and masthead
  border-subtle: "#d8d8d8"       # low-emphasis structural divider /* estimated */
  focus-ring: "#013d2d"          # forest green focus indicator matches primary

  # Button surface variant
  button-surface: "#fafbf5"      # the near-white surface button color from cmp-reservenow-cta
  on-button-surface: "#212529"   # dark ink text on ivory button

  # Semantic
  error: "#8b1a1a"               # deep burgundy for form errors — warm-toned /* estimated */

  # Shadow tints
  shadow-soft: "#000000"         # 0px 1px 2px 0px rgba(0,0,0,0.24) — flattened to hex

typography:
  # Primary display / editorial: Austin Light Web (self-hosted serif, closest Google: Spectral)
  # Primary UI / nav: Engravers Gothic Bold (self-hosted gothic caps, closest Google: Josefin Sans)
  # Secondary serif: Lusitana (Google Font — already in Google Fonts ecosystem)

  display-hero:
    fontFamily: "Austin Light Web, Austin-Light, Spectral, EB Garamond, Georgia, serif"
    fontSize: 48px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: 0px
  display:
    fontFamily: "Austin Light Web, Austin-Light, Spectral, EB Garamond, Georgia, serif"
    fontSize: 32px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: 0px
  heading-section:
    fontFamily: "Engravers Gothic Bold, Josefin Sans, Futura, Trebuchet MS, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.17
    letterSpacing: 3.6px
  heading-sub:
    fontFamily: "Austin Light Web, Austin-Light, Spectral, EB Garamond, Georgia, serif"
    fontSize: 22px
    fontWeight: 100
    lineHeight: 1.2
    letterSpacing: 0px
  body-large:
    fontFamily: "Austin Light Web, Austin-Light, Spectral, EB Garamond, Georgia, serif"
    fontSize: 22px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: 0px
  body:
    fontFamily: "Austin Light Web, Austin-Light, Spectral, EB Garamond, Georgia, serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "Engravers Gothic Bold, Josefin Sans, Futura, Trebuchet MS, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 2px
  button-ui:
    fontFamily: "Engravers Gothic Bold, Josefin Sans, Futura, Trebuchet MS, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 3.2px
  caption:
    fontFamily: "Engravers Gothic Bold, Josefin Sans, Futura, Trebuchet MS, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 2.4px

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

rounded:
  none: 0px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-surface:
    backgroundColor: "{colors.button-surface}"
    textColor: "{colors.on-button-surface}"
    borderColor: "{colors.border-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-surface-hover:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.on-button-surface}"
    borderColor: "{colors.border-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 4px 0px
  button-ghost-hover:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 4px 0px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  card-editorial:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 32px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    borderColor: "{colors.border}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 12px
  nav-item:
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 8px 0px
  nav-item-hover:
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    padding: 8px 0px
---

# Rosewood Hotels Design System

## Overview

Rosewood's digital presence is "A Sense of Place" made navigable — the brand's founding philosophy rendered as a warm parchment canvas (`{colors.background}`) that reads less like a hotel website and more like a bespoke travel journal. Where most luxury hospitality brands reach for black-on-white severity or cold marble minimalism, Rosewood chooses a faintly warm ivory as its universal ground: `#fafbf5`, a tone closer to unbleached linen or antique manuscript paper. Every property in the portfolio has a distinct character — the carved-stone corridors of Rosewood Castiglion del Bosco, the steel-and-glass grandeur of The Carlyle — and the design system's restraint creates a neutral, cultivated stage where each destination's photography can speak in its own register.

The typographic pairing is the system's most opinionated decision. For all editorial and destination prose, Rosewood uses Austin Light Web — a contemporary Display/Text serif designed by Paul Barnes and originally released through Commercial Type, cut with elongated ascenders and a deliberate hairline delicacy at light weights. It runs at weight 100–300, never heavier, and its uncrowded counters and quiet authority give section headers and property names the feeling of engraved stationery. For all navigational UI — menu items, section eyebrows, button labels, and CTAs — the system turns to Engravers Gothic Bold: a condensed all-caps grotesque from the ATF type library with deep roots in American signage and print tradition. Set wide-tracked in uppercase at 12–18px, it reads as a maison stamp — confident, categorical, unhurried. These two faces share no visual DNA, which is the point: Austin belongs to the world of handwritten letters and estate archives; Engravers belongs to brass plaques and hotel monograms.

The sole chromatic moment across an otherwise monochrome system is the deep forest green (`{colors.primary}`, `#013d2d`) reserved for the "Reserve Now" CTA and its interactive states. This is not an accent distributed freely across the interface — it fires once per page, on the single most intentional action, and disappears entirely from the editorial field. The reserve button is the punctuation mark at the end of a long editorial sentence about why a place is worth visiting. Everything else — navigation, headings, body text, borders — lives in the spectrum between warm ivory and near-black charcoal.

**Key Characteristics:**
- Warm parchment canvas (`{colors.background}`) as the universal surface — not pure white, not cool grey, but the color of aged writing paper
- Two-typeface contract: Austin Light Web (serif) for destination prose and editorial headings; Engravers Gothic Bold (condensed gothic caps) for navigation, CTAs, and UI wayfinding
- Deep forest green (`{colors.primary}`) reserved exclusively for the "Reserve Now" primary CTA — nowhere else in the editorial field
- All UI labels, nav items, and button text in uppercase Engravers Gothic with generous tracking (2–3.6px) — the cadence of a hotel nameplate
- Near-black ink (`{colors.ink}`, `#212529`) is the dominant chrome color with 711 measured occurrences
- A warm tan hairline (`{colors.border}`, `#cfcbaf`) derived from the border extraction functions as the system's ornamental divider — warm enough to read as aged brass, not cold UI grey
- Border-radius is functionally zero across all structural elements — sharp corners signal crafted precision over casual rounding
- Photographs are full-bleed and always rectangular — never circular, never inset with shadow
- Spacing built on an 8px base with generous section breathing at `{spacing.2xl}`–`{spacing.3xl}` (64–80px)
- The "Reserve Now" button uses an ivory surface variant (`{colors.button-surface}`) in the navigation, reserving the deep green for the dedicated reservation flow
- Uppercase tracking ranges from 2px on nav links to 3.6px on section headings — each tier of the wayfinding hierarchy has its own measured cadence
- Austin Light Italic appears in editorial contexts for property names and destination pull-quotes — the italic carries a handwritten quality suited to proper nouns

## Colors

### Primary Surface
- **Rosewood Ivory** (`{colors.background}`): The brand canvas — a warm, barely-warm off-white confirmed by the extracted CTA source component. The most distinctive single color decision in the system; not white, not cream, but parchment.
- **Pure White** (`{colors.surface}`): Elevated surface for modal overlays, booking panels, and card content zones that need clear differentiation from the parchment ground.
- **Warm Parchment** (`{colors.surface-warm}`): A half-step deeper ivory used for alternating editorial section bands and the `card-editorial` component background.
- **Near-Black** (`{colors.surface-dark}`): Footer background and occasional cinematic video header treatment.

### Text / Ink
- **Primary Ink** (`{colors.ink}`): Near-black for all primary text, headings, and navigation labels. The dominant extracted color at 711 occurrences — warm-toned rather than pure `#000000`.
- **Muted Ink** (`{colors.ink-muted}`): Secondary body text, supporting captions, and subdued editorial paragraphs.
- **Quiet Ink** (`{colors.ink-quiet}`): Tertiary — placeholder text, disabled states, and fine-print meta.

### Brand Accent
- **Rosewood Forest Green** (`{colors.primary}`): The maison's sole chromatic accent — a deep, almost-black forest green applied exclusively to the primary "Reserve Now" CTA. Extracted from `cmp-button` and confirmed as the semantic primary.
- **Green Hover** (`{colors.primary-hover}`): One-step lightening from the dembrandt interactiveDeltas — reads as the button absorbing gentle pressure.
- **Pale Sage** (`{colors.primary-container}`): A diluted echo of the forest green for badge and tag backgrounds where the full saturated green would dominate.

### Navigation Button Surface
- **Ivory Button** (`{colors.button-surface}`): The ivory-toned CTA variant extracted from `cmp-reservenow-cta` — used in the navigation header to reserve the forest green for the dedicated reservation module.

### Borders & Dividers
- **Warm Tan Hairline** (`{colors.border}`): Extracted from `hr` divider elements at `rgb(207,203,175)` — a warm tan that reads as aged parchment or burnished brass. The system's ornamental rule.
- **Strong Ink Rule** (`{colors.border-dark}`): Near-black border for button outlines and strong section dividers.
- **Soft Divider** (`{colors.border-subtle}`): Low-emphasis separator for input fields and secondary structural lines.

### Shadow
The shadow system is minimal. The two extracted values (`rgba(0,0,0,0.24)` and `rgba(0,0,0,0.2)`) both appear at low confidence, likely from third-party booking components. The editorial brand design is functionally flat — depth comes from full-bleed photography, not computed lift.

## Typography

### Font Family
- **Editorial serif**: `Austin Light Web`, fallbacks: `Spectral, EB Garamond, Georgia, serif`. A Paul Barnes design (Commercial Type) with elongated ascenders and deliberate hairline delicacy at weights 100–300. Self-hosted via `Austin-Light.otf` and `Austin-LightItalic.otf`. For external implementations, **Spectral** (Google Fonts) captures the refined text-roman spirit most accurately.
- **UI gothic**: `Engravers Gothic Bold`, fallbacks: `Josefin Sans, Futura, Trebuchet MS, sans-serif`. A condensed all-caps grotesque from the ATF library — bold weight, compressed proportions, wide tracking. Self-hosted via `EngraversGothicBold.otf`. **Josefin Sans** (Google Fonts) at weight 700 uppercase is the closest open equivalent.
- **Tertiary serif**: `Lusitana` — a Google Font used sparingly in booking system UI; it is already in the Google Fonts ecosystem and requires no substitution.
- **Accent condensed**: `Swiss 721 Black Condensed`, fallbacks: `Anton, Black Han Sans, Impact, sans-serif`. Used for exclusive-launch callout labels; only in edge-case promotional contexts.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Hero headline and primary property names — "Your Next Vacation", destination titles at 48px Austin Light |
| `display` | Section editorial titles and destination sub-headings — 32px Austin Light |
| `heading-section` | Section category labels and UI wayfinding headings — 18px Engravers Gothic uppercase 3.6px tracking |
| `heading-sub` | Feature card titles, property amenity headings — 22px Austin Light weight 100 |
| `body-large` | Lead editorial paragraphs and destination introduction text — 22px Austin Light |
| `body` | Standard body text, booking detail copy — 16px Austin Light weight 300 |
| `nav-link` | Navigation items and footer links — 12px Engravers Gothic uppercase 2px tracking |
| `button-ui` | CTA labels including "Reserve Now" — 16px Engravers Gothic uppercase 3.2px tracking |
| `caption` | Image captions, location eyebrows, exclusive-launch labels — 12px Engravers Gothic uppercase 2.4px tracking |

### Principles
- **Serif names places; gothic handles logistics.** Austin Light Web appears wherever Rosewood is describing a destination, an experience, or a mood. Engravers Gothic handles every act of navigation, reservation, or categorization.
- **Austin at extreme lightness.** Weights 100–300 only — the hairline delicacy at these weights communicates handcrafted correspondence, not corporate web typography.
- **Engravers Gothic is always uppercase with tracking.** Never set in mixed case. The tracking range (2–3.6px) forms a cadence hierarchy: narrower on small nav links, wider on section headings.
- **Austin Light Italic for proper nouns.** Property names ("The Carlyle, A Rosewood Hotel") and editorial pull-quotes benefit from the italic's handwritten quality.
- **No bold in the editorial serif.** Austin carries hierarchy through size and weight scale (100 vs 300), never through bold escalation.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px — confirmed from dembrandt's spacing extraction where `8px` leads with 176 occurrences, followed by `24px` (87), `40px` (44), and `80px` (30).

The system operates in two registers: a compact lower range (8–24px) for component rhythm and type spacing, and a generous upper range (40–80px) for section-level breathing. The jump from 24px component padding to 64–80px section spacing mirrors the Rosewood brand positioning: intimate detail within expansive context.

### Grid & Container
- Max content width: approximately 1440px for editorial modules; narrower for text columns
- Hero: full-viewport photography with whisper-quiet overlaid text; typography never competes with landscape
- Property grid: 2–4 column layouts with consistent gutters; photography always maintains its proportion
- Navigation: full-width sticky header with the Rosewood wordmark centered (or top-left), global navigation, and the ivory "Reserve Now" button anchored right

### Whitespace Philosophy
- Section transitions breathe at `{spacing.2xl}`–`{spacing.3xl}` (64–80px) — generous enough to let a property photograph register before the eye moves to text
- Component-level spacing is 8–24px, keeping individual modules tight while the macro layout breathes
- Typography in editorial modules uses generous line-height (1.5 on body) and zero letter-spacing on the serif — Austin's proportions are designed not to be tracked

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | `box-shadow: none` | Universal default — all cards, panels, editorial zones |
| Hairline (Level 1) | `border-bottom: 1px solid {colors.border}` | Warm tan `hr` dividers between editorial sections |
| Ink Rule (Level 2) | `border: 1px solid {colors.border-dark}` | Navigation bottom rule, button outlines |
| Tab Accent (Level 3) | `border-left: 10px solid {colors.border-dark}` | Active tab indicator in booking and navigation panels |
| Subtle Lift (Level 4) | `box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.24)` | Minimal card lift in third-party booking components |
| Focus Ring | `outline: 2px solid {colors.focus-ring}` | Keyboard focus state on interactive controls |

**Shadow Philosophy**: Rosewood's editorial design is functionally flat. Depth is the property photography's responsibility — a cliffside pool at golden hour communicates dimension without any computed shadow. The two shadow values in the extraction appear on third-party booking system elements, not on the brand-facing editorial chrome.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All structural elements — buttons, cards, image crops, navigation items, inputs |
| `pill` | 9999px | Circular carousel navigation buttons ("Previous", "Next") and icon control toggles |

The `2px` and `3px` values extracted at medium/high confidence belong exclusively to cookie consent manager components — not to brand-facing design elements. Rosewood's brand language is sharp-cornered throughout, consistent with the architectural precision of its properties: stone and glass with clean edges, not softened modernist rounding.

## 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`** — Forest green fill (`{colors.primary}`), warm ivory label (`{colors.on-primary}`), `{typography.button-ui}` Engravers Gothic uppercase 3.2px tracking, `{rounded.none}` sharp corners, 12px 24px padding. Used for the dedicated reservation flow.
- **`button-primary-hover`** — Fill deepens to `{colors.primary-hover}` — quiet confirmation of intent.
- **`button-surface`** — Ivory fill (`{colors.button-surface}`), near-black ink label, strong border (`{colors.border-dark}`), same typography and padding. The navigation "Reserve Now" variant — present in the header without the full green weight.
- **`button-surface-hover`** — Fill shifts to `{colors.surface-warm}` on hover — a subtle warmth change.
- **`button-ghost`** — No border, no background, `{colors.ink}` label with `{typography.nav-link}` Engravers Gothic tracking. Inline tertiary links within editorial copy.
- **`button-ghost-hover`** — Label shifts to `{colors.primary}` forest green — the maison accent fires quietly.

### Cards

- **`card`** — Zero padding, no radius, no shadow. Property photography tiles occupy full card width with text below; the card boundary is the image edge.
- **`card-editorial`** — Warm parchment background (`{colors.surface-warm}`), generous 32px padding, `{rounded.none}`. Used for editorial feature panels and destination story modules.

### Inputs

- **`input`** — White surface, warm tan hairline border (`{colors.border}`), `{rounded.none}`, `{typography.body}` Austin Light 16px at 1.5 line-height. Inputs sit quietly on the canvas, never announcing themselves with chrome.
- **`input-focus`** — Border shifts to forest green (`{colors.focus-ring}`) — the brand accent fires on form activation.

### Badges / Tags

- **`badge`** — Pale sage wash (`{colors.primary-container}`), forest green text (`{colors.primary}`), `{typography.caption}` Engravers Gothic uppercase 2.4px tracking, `{rounded.none}`, 4px 12px padding. Used for "Exclusive Launch" and collection category labels.

### Navigation

- Sticky full-width header on `{colors.background}` parchment with `{colors.border-dark}` bottom rule
- Rosewood wordmark in `{typography.display}` Austin Light (or centered SVG logomark)
- Primary nav: `{typography.nav-link}` Engravers Gothic 12px uppercase 2px tracking, `{colors.ink}` at rest, `{colors.primary}` on hover
- Right-aligned `{components.button-surface}` "Reserve Now" button in the header; `{components.button-primary}` green version in the dedicated reservation module

## Do's and Don'ts

### Do
- Use Austin Light Web (or Spectral) for all editorial text, destination names, and property descriptions — the serif carries the "Sense of Place" voice
- Set all navigation, button labels, and UI eyebrows in Engravers Gothic uppercase with tracking — 2px for nav, 3.2–3.6px for headings and CTAs
- Reserve `{colors.primary}` forest green exclusively for the "Reserve Now" CTA and its hover state — one green per page maximum
- Default to `{colors.background}` warm ivory as the canvas — never pure white for the page background
- Use `{colors.border}` warm tan hairlines for ornamental `hr` dividers — the warm tone reads as aged brass, not cold UI chrome
- Keep all buttons and structural elements at `{rounded.none}` — sharp corners match the architectural precision of Rosewood properties
- Allow property photography to fill its region edge-to-edge — never frame with shadows, never apply rounded crops
- Use `{spacing.2xl}`–`{spacing.3xl}` (64–80px) for section-level breathing — the expansive intervals signal luxury
- Set Austin Light at weights 100–300 only — never bold, never above weight 300 for editorial serif text
- Use Austin Light Italic for property proper nouns and destination pull-quotes

### Don't
- Don't use `{colors.primary}` forest green as a section fill or panel background — it belongs only on the primary CTA
- Don't introduce mid-range border-radius (4–24px) on brand-facing elements — the system is binary (`{rounded.none}` or `{rounded.pill}`)
- Don't letter-space Austin Light serif text — zero tracking is correct; the proportions are designed for it
- Don't set Engravers Gothic in mixed case — it exists in this system exclusively as uppercase
- Don't add drop shadows to editorial card elements — the brand design is flat; shadow lives only in third-party booking system shells
- Don't use Lusitana or system-ui fonts in editorial contexts — reserve those for booking-engine utility UI only
- Don't crowd property photography tiles — always preserve gutters; tiles must never touch at any breakpoint
- Don't substitute Engravers Gothic with a humanist or rounded sans — the condensed gothic cadence is the wayfinding signature
- Don't use `{colors.border}` warm tan for anything other than ornamental hairlines and dividers — it is too warm for structural borders
- Don't bold Austin Light Web editorial text — if emphasis is needed, use size, italic, or a heading token

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <576px | Single column, hamburger nav, full-bleed hero photography, Austin 32px display |
| Mobile Large | 576–767px | Two-up property teasers possible, simplified booking bar |
| Tablet | 768–1023px | Horizontal nav restored, 2-column property grid, hero photography maintained |
| Desktop | 1024–1280px | Full horizontal nav, 3-column property grid, hero at full proportions |
| Large Desktop | >1280px | Maximum container, expanded outer margins, photography at native resolution |

### Touch Targets
- "Reserve Now" button: minimum 44px tap height via 12px vertical padding plus Engravers Gothic line-height
- Navigation links: generous tap area via 8px row padding; full label zone is tappable
- Property cards: entire photography + headline zone is tappable, not only the title text

### Collapsing Strategy
- **Nav**: Horizontal nav collapses to hamburger at tablet and below → full-screen parchment overlay with vertical link stack at `{typography.nav-link}` tracking; "Reserve Now" button remains visible at all sizes
- **Hero**: Full-bleed photography maintains aspect ratio; Austin Light display headline reduces from 48px to 28–32px on mobile; one to two lines maximum
- **Property grid**: 4-up → 2-up → 1-up; photography proportions preserved, never square-cropped on mobile
- **Booking bar**: Compresses to stacked form on small viewports; the forest green "Reserve Now" CTA remains the primary action at all sizes
- **Section spacing**: `{spacing.3xl}` (80px) between sections reduces to `{spacing.2xl}` (64px) on tablet and `{spacing.xl}` (40px) on mobile

### Image Behavior
- Property photography always maintains its original aspect ratio — Rosewood never square-crops for mobile
- Full-bleed hero modules use `object-fit: cover` with focal point preservation
- All photography on neutral or environmental backgrounds — never on colored surfaces, never with drop shadows
- Gallery imagery maintains consistent 16:9 or 4:3 landscape convention across breakpoints

---

## Agent Prompt Guide

### Quick Color Reference
- Background canvas: `{colors.background}` (`#fafbf5`)
- Primary text: `{colors.ink}` (`#212529`)
- Muted text: `{colors.ink-muted}`
- Forest green CTA: `{colors.primary}` (`#013d2d`)
- Green hover: `{colors.primary-hover}` (`#014936`)
- CTA text: `{colors.on-primary}` (`#fafbf5`)
- Warm tan hairline: `{colors.border}` (`#cfcbaf`)
- Ink rule border: `{colors.border-dark}` (`#212529`)
- Elevated surface: `{colors.surface}` (`#ffffff`)

### Example Component Prompts

- "Build a Rosewood hero section on `{colors.background}` (`#fafbf5`) warm ivory canvas. Full-bleed property photography at viewport height with no border, no shadow, no rounded corners. Overlaid at bottom: a `{typography.caption}` Engravers Gothic eyebrow in `{colors.ink}` (12px uppercase 2.4px tracking), then a `{typography.display-hero}` Austin Light heading (48px weight 300 lineHeight 1.0) in `{colors.ink}`. No gradient scrim. Beneath the image: `{spacing.2xl}` (64px) vertical breathing before the next section."
- "Design a Rosewood 'Reserve Now' primary CTA button: `{colors.primary}` (`#013d2d`) background, `{colors.on-primary}` (`#fafbf5`) label, `{typography.button-ui}` Engravers Gothic (16px uppercase 3.2px letter-spacing), `{rounded.none}` sharp corners, 12px 24px padding. Hover state shifts to `{colors.primary-hover}` (`#014936`). No shadow, no radius."
- "Create a Rosewood property card on `{colors.surface}` white. Full-width property photography at top (no border, no shadow, `{rounded.none}`). Below: a `{typography.caption}` destination eyebrow in `{colors.ink-muted}` uppercase 2.4px tracking, then a `{typography.heading-sub}` Austin Light property name (22px weight 100, `{colors.ink}`), a `{typography.body}` location descriptor (16px Austin Light weight 300, `{colors.ink-muted}`, lineHeight 1.5). A `1px solid {colors.border}` warm tan divider beneath the eyebrow."
- "Build the Rosewood navigation header on `{colors.background}` with a `1px solid {colors.border-dark}` bottom rule. Center the Rosewood wordmark in `{typography.display}` Austin Light (or SVG logomark). Primary nav items in `{typography.nav-link}` (12px Engravers Gothic uppercase 2px tracking, `{colors.ink}`). Hover state: `{colors.primary}`. Right-aligned `{components.button-surface}` ivory 'Reserve Now' button. Sticky on scroll with no background shift."
- "Design a Rosewood editorial section panel on `{colors.surface-warm}` warm parchment. `{spacing.3xl}` (80px) top and bottom padding. A `1px solid {colors.border}` warm tan hairline rule at top. Center: a `{typography.heading-section}` Engravers Gothic uppercase heading (18px 3.6px tracking, `{colors.ink}`), a `{typography.display}` Austin Light italic destination name (32px weight 300), a `{typography.body-large}` editorial paragraph (22px Austin Light weight 300, lineHeight 1.0, `{colors.ink-muted}`). A `{components.button-primary}` forest green CTA beneath."
- "Create a Rosewood newsletter signup in the footer on `{colors.surface-dark}` near-black background with `{colors.on-primary}` ivory text. A `{typography.heading-section}` Engravers Gothic heading (18px uppercase 3.6px tracking). A `{typography.body}` line of invitation copy. Below: side-by-side email input and submit button. Input: `{colors.surface}` white fill, `1px solid {colors.border-subtle}` hairline, `{rounded.none}`, 12px 16px padding, `{typography.body}` Austin Light. Button: `{components.button-primary}` forest green."

### Iteration Guide

1. Begin with `{colors.background}` (`#fafbf5`) warm ivory — the most distinctive system choice. Never substitute pure white or cool grey.
2. Set all editorial text in Austin Light Web (or Spectral for Google Fonts implementations) at weights 100–300 — zero tracking, generous line-height on body.
3. For every navigation item, button label, section heading, and eyebrow: use Engravers Gothic uppercase. Tracking is 2px on small nav, 3.2–3.6px on headings and CTAs. Never mixed case.
4. Forest green (`{colors.primary}`) is the sole chromatic accent — reserve it for the primary "Reserve Now" CTA and its hover state. One green per page.
5. Borders are warm tan (`{colors.border}`) for ornamental `hr` dividers; near-black (`{colors.border-dark}`) for structural button outlines and rules.
6. All shapes are `{rounded.none}`. The one exception is `{rounded.pill}` for carousel control buttons (Previous, Next).
7. Section breathing is `{spacing.2xl}`–`{spacing.3xl}` (64–80px). Component padding is 8–24px. Do not compress section intervals below 40px.
8. Photography fills its region edge-to-edge with no shadow, no rounded crops, no overlay chrome. The image is the design.

---

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