---
version: alpha
name: "EDITION Hotels"
description: "Stark monochromatic luxury hospitality system: pure black-and-white canvas with Didot uppercase serifs for editorial drama and Helvetica Neue Light for all transactional UI — Ian Schrager's refined nightlife-meets-museum restraint made navigable"

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#111111"           # near-black used for dark hero sections and footer
  surface-input: "#dddddd"     # light grey input background (was rgb(221,221,221))

  # Text / ink
  ink: "#111111"               # primary text — 835 occurrences, dominant chrome (rgb 17,17,17)
  ink-muted: "#757575"         # secondary labels, caption text, muted UI (rgb 117,117,117)
  ink-ghost: "#444444"         # tertiary text, signup brand copy (rgb 68,68,68)
  on-surface: "#ffffff"        # text on dark/black surfaces

  # Brand accent — EDITION has no chromatic brand color; contrast is the system
  primary: "#111111"           # CTA fill (dark variant): near-black filled button
  on-primary: "#ffffff"        # text on dark button surface
  primary-outline: "#3f3f3f"   # outline button border (rgb 63,63,63) — white bg variant

  # Interactive states
  primary-hover: "#000000"     # button hover deepens to absolute black /* estimated */
  link-hover: "#1883fd"        # link hover — blue highlight (rgb 24,131,253)

  # Borders
  border: "#2d2d2d"            # dominant 1px solid border — 86 occurrences (rgb 45,45,45)
  border-muted: "#cccccc"      # secondary dividers, 8 occurrences (rgb 204,204,204)
  border-light: "#dcdcdc"      # low-emphasis hairlines, input rules (rgb 220,220,220)

  # Shadow tints
  shadow-soft: "#808080"       # was rgb(128,128,128) 0px 0px 5px — flattened to hex

typography:
  display-hero:
    fontFamily: "Didot, 'Didot LT STD', 'Hoefler Text', Garamond, 'Times New Roman', serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  display:
    fontFamily: "Didot, 'Didot LT STD', 'Hoefler Text', Garamond, 'Times New Roman', serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 0.9
    letterSpacing: 0px
  heading-section:
    fontFamily: "Didot, 'Didot LT STD', 'Hoefler Text', Garamond, 'Times New Roman', serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 0.83
    letterSpacing: -1px
  heading-sub:
    fontFamily: "Didot, 'Didot LT STD', 'Hoefler Text', Garamond, 'Times New Roman', serif"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-large:
    fontFamily: "HelveticaNeueW02-55Roma, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
  body:
    fontFamily: "HelveticaNeueLTStd-Lt, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.71
    letterSpacing: 0px
  nav-link:
    fontFamily: "HelveticaNeueLTStd-Lt, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  button-ui:
    fontFamily: "HelveticaLTStd-Bold, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 1px
  caption:
    fontFamily: "HelveticaNeueLTStd-Lt, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 5px
  sm: 10px
  md: 15px
  lg: 20px
  xl: 30px
  2xl: 40px
  3xl: 50px
  4xl: 100px

rounded:
  none: 0px
  pill: 9999px    # cookie/filter UI only — 27px and 50% values in third-party shells

components:
  button-primary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 35px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 35px
  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary-outline}"
    borderColor: "{colors.primary-outline}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 15px 50px
  button-outline-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 15px 50px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 20px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    borderColor: "{colors.border-light}"
    rounded: "{rounded.none}"
    padding: 0px 6px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px 6px
  badge:
    backgroundColor: "{colors.surface-input}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 10px
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 15px 20px
---

# EDITION Hotels Design System

## Overview

EDITION Hotels sits at the intersection of Ian Schrager's nightclub sensibility and Marriott's hospitality infrastructure, and the design language resolves that tension into something genuinely singular: a system that treats absolute restraint as the primary luxury signal. The canvas is a clean white (`{colors.background}`) that behaves less like a hotel website and more like a gallery opening — a place where space and silence communicate status. The footer flips to pure black (`{colors.surface}`), and these two poles — white field and black ground — are the only surfaces the system needs.

The typographic architecture is where EDITION declares its position most sharply. Didot, the hairline-contrast display serif originally cut for Firmin Didot in 18th-century Paris, handles every editorial headline. It runs exclusively in uppercase, which transforms its already-dramatic stroke contrast into something approaching monumental. At 72px with natural tracking, the serifs read as architectural — the way a hotel marque looks chiseled above an entrance. Against it, Helvetica Neue Light manages all transactional UI: navigation, body copy, form labels, CTAs. The contrast between Didot's theatrical high-contrast strokes and Helvetica's rational evenness is the visual tension the entire system is built around.

What distinguishes EDITION from peer luxury hospitality sites is the system's total chromatic commitment. There is no brand color. There is no warm accent or earth tone, no gold, no sepia. The interactive palette is binary: near-black fills and pure white inversions, with an outlier blue link-hover state (`{colors.link-hover}`) that reads as an intrusion from a framework shell rather than a brand decision. Every element — button, border, divider, label — is resolved into shades of near-black and grey. This monochromatic discipline reads less like a design choice and more like a philosophy: that color, in a space this refined, would be noise.

**Key Characteristics:**
- Binary canvas: pure white (`{colors.background}`) for editorial content, absolute black (`{colors.surface}`) for footer and dark hero sections
- Didot uppercase serif for all editorial and display headings — theatrical stroke contrast at weight 400 only
- Helvetica Neue Light for all transactional UI: navigation, body copy, buttons, forms
- Fully achromatic palette — no brand hue, no accent color; contrast carries all authority
- `{colors.ink}` near-black at `#111111` dominates with 835 occurrences — the backbone of the system
- All buttons are sharp-edged (`{rounded.none}`) — zero radius is the universal EDITION shape
- Button transitions run at 0.4s ease — consistent, measured, unhurried
- Negative letter-spacing (`-1px` at 36px Didot, `-4px` at 40px) keeps display type compressed and architectural
- Uppercase transforms on all editorial Didot text — destination names and section titles read as branded labels
- No gradients anywhere in the system; depth comes from photography and the black-to-white canvas swap

## Colors

### Primary Surfaces
- **Pure White** (`{colors.background}`): The primary page canvas — white used for editorial content, navigation, and all reading surfaces. Unmodified, unwarmed.
- **Near-Black** (`{colors.surface}`): The dark canvas — used for the footer, dark hero panels, and the filled primary button. Slightly softened from pure black at `#111111`.
- **Input Grey** (`{colors.surface-input}`): The form input background — a cool light grey for booking and search fields.

### Text / Ink
- **Primary Ink** (`{colors.ink}`): The dominant text color at 835 occurrences — all primary headings, body copy, and navigation in `#111111`. The warm-near-black that reads less harsh than `#000000` on white surfaces.
- **Muted Ink** (`{colors.ink-muted}`): Secondary text for supporting labels, captions, and muted UI elements — the mid-grey of `#757575`.
- **Ghost Ink** (`{colors.ink-ghost}`): Tertiary text for sign-up copy and fine-print — a dark-but-receded `#444444`.
- **On Surface** (`{colors.on-surface}`): White text used on the dark footer and filled dark buttons.

### Interactive
- **Primary CTA** (`{colors.primary}`): Near-black fills the secondary "Learn More" button variant — the system's filled CTA color.
- **Outline CTA** (`{colors.primary-outline}`): A slightly-softer dark grey for the outline "RESERVE" button border and text on white grounds.
- **Link Hover** (`{colors.link-hover}`): A blue highlight on interactive link hover — present in the system but likely a framework default rather than a brand decision.

### Borders
- **Primary Border** (`{colors.border}`): The dominant 1px solid border at `#2d2d2d` — 86 occurrences on inputs, buttons, table cells, and dividers.
- **Muted Border** (`{colors.border-muted}`): Secondary hairlines in light grey `#cccccc` — section separators and low-priority rules.
- **Light Border** (`{colors.border-light}`): The finest-weight dividers at `#dcdcdc` — input rules and ghost separators.

## Typography

### Font Family
- **Display / Editorial**: `Didot`, with fallbacks: `'Didot LT STD', 'Hoefler Text', Garamond, 'Times New Roman', serif`. Self-hosted as `Didot.woff` and `Didot-Bold.woff2`. The 18th-century French Neoclassical serif — extreme stroke contrast, delicate hairline serifs, uppercase geometry. Used exclusively at weight 400, relying on optical drama rather than weight variation.
- **Primary UI / Body**: `HelveticaNeueLTStd-Lt` (Light variant) with fallbacks: `'Helvetica Neue', Helvetica, Arial, sans-serif`. Also `HelveticaNeueW02-55Roma` (Roman/regular) and `HelveticaLTStd-Bold` for CTA labels. Self-hosted as `.otf` files. Helvetica's rationalist geometry acts as a counter-weight to Didot's drama.
- **Google Font substitution**: For Didot use **GFS Didot** or **Cormorant Garamond**; for Helvetica Neue Light use **Inter** at weight 300 or **Outfit** Light.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Full-viewport hero headings — Didot 72px uppercase, maximum stroke drama |
| `display` | Section-opening editorial headers — 48px Didot uppercase |
| `heading-section` | Destination and feature headings — 36px Didot uppercase with `-1px` tracking |
| `heading-sub` | Sub-section titles and property names — 30px Didot uppercase |
| `body-large` | Lead editorial paragraphs and large UI labels — 30px Helvetica Neue Roman |
| `body` | Default reading copy — 14px Helvetica Neue Light at 1.71 line-height |
| `nav-link` | Navigation items and footer links — 13px Helvetica Neue Light |
| `button-ui` | All CTA labels — 13px Helvetica LT Std Bold, uppercase, 1px tracking |
| `caption` | Meta-labels, dates, fine print — 12px Helvetica Neue Light |

### Principles
- **Didot is uppercase-only at all sizes.** No mixed-case editorial headings exist in the system — the uppercase constraint is what gives Didot's high-contrast strokes their architectural reading.
- **Single weight for Didot.** All display styles run at 400, relying on optical size and tracking variation rather than weight shifts. `Didot-Bold` exists as a self-hosted asset but appears in a single UI context, not in primary editorial hierarchy.
- **Negative tracking at display sizes.** Didot at 36–40px carries `−1px` to `−4px` letter-spacing — the type is compressed, not airy. This is the opposite of most luxury systems.
- **Helvetica Light for reading.** All body copy and navigation runs in the Light (not Regular) Helvetica variant — the system prefers the refined, open reading of the light cut over Helvetica's assertive roman.
- **Uppercase transforms on button labels.** All CTAs use `text-transform: uppercase` with `1px` tracking in `{typography.button-ui}` — Helvetica Bold in capitals reads as a controlled announcement.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 5px, harmonizing with the system's `5px` and `10px` recurrence pattern.

EDITION's spacing rhythm is dense at the component level and expansive at the section level. The 10px and 20px values dominate repeating component padding; 40px appears 57 times in section-level horizontal margins; 100px marks the widest section breathing. The scale has a notably compressed lower range, matching the system's tight typography, and a single large jump to `{spacing.4xl}` for the expansive white space between major page sections.

### Grid & Container
- Max content width: approximately 1260–1280px (confirmed by dense breakpoint clustering at these values)
- Hero: full-viewport editorial photography with centered Didot wordmark overlay
- Property grid: 2–3 column layouts on desktop, collapsing to single-column on mobile
- Footer: full-width black (`{colors.surface}`) panel with multi-column link grid and white wordmark

### Whitespace Philosophy
- **Gallery cadence**: section-level vertical spacing jumps to 50–100px — the page breathes between destinations like frames in a printed catalog
- **Type-first layouts**: whitespace is used to isolate Didot headings, giving individual letter forms room to register
- **No decorative negative space**: white is structural, not ornamental — the absence of color is not minimalism as an aesthetic but minimalism as a statement

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default for all surfaces — page canvas, cards, editorial panels |
| Hairline (Level 1) | `1px solid {colors.border}` | Button outlines, input borders, table rules, dividers |
| Subtle (Level 2) | `1px solid {colors.border-muted}` | Secondary section separators and light hairline rules |
| Shell (Level 3) | `rgb(128,128,128) 0px 0px 5px 0px` | Third-party framework shells (PrimeReact, Element Plus) — not brand design |
| Focus Ring | `outline: 1px solid {colors.border}` | Keyboard navigation — hard dark ring matching the primary border |

**Shadow Philosophy**: EDITION is a flat system. No brand-facing element carries a drop shadow; all visual depth is sourced from full-bleed photography and the high-contrast juxtaposition of white and black surfaces. The five shadow values captured by the dembrandt scan belong exclusively to PrimeReact and Element Plus component shells embedded in the booking engine — they are framework overhead, not editorial design decisions.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All buttons, cards, inputs, borders, images — the universal EDITION shape |
| `pill` | 9999px | Third-party cookie preference UI and filter pills only — not brand design |

EDITION's shape language is categorically sharp. Every brand-facing element — buttons, cards, hotel photography containers, input fields — uses `0px` border-radius. The `27px` and `50%` radius values detected belong exclusively to cookie consent dialogs and third-party booking engine components. The zero-radius constraint is the shape equivalent of the achromatic palette: an absolute refusal to introduce softness.

## 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`** — Dark-filled CTA: `{colors.surface}` near-black background, `{colors.on-surface}` white text, `{typography.button-ui}` Helvetica Bold uppercase 1px tracking, `{rounded.none}` sharp corners, `12px 35px` padding. Used for "Learn More" and secondary action states.
- **`button-outline`** — The signature "RESERVE" button: `{colors.background}` white fill, `{colors.primary-outline}` dark-grey 1px border and text, `{typography.button-ui}`, `{rounded.none}`, `15px 50px` padding. Wide horizontal padding creates a horizontal stamp shape.
- **`button-outline-hover`** — Outline button inverts on hover: background floods to `{colors.surface}`, text flips to `{colors.on-surface}`. 0.4s ease transition.

### Cards

Property and destination cards: `{colors.background}` white ground, `{rounded.none}` sharp corners, no shadow, photography full-bleed at card top. Text zone below carries a Didot property name in `{typography.heading-sub}` and a Helvetica body descriptor in `{typography.body}`.

### Inputs

Booking and search form fields: white or light-grey (`{colors.surface-input}`) background, 1px `{colors.border-light}` rule at rest, `{rounded.none}`, `{typography.body}` 14px Helvetica Light. Standard text inputs transition background on focus at 0.4s ease. Select dropdowns share the same light-grey fill.

### Navigation

The EDITION nav is minimal and high-contrast: `{colors.background}` white bar with `{typography.nav-link}` 13px Helvetica Light links in `{colors.ink}`, centered wordmark in Didot or SVG, right-aligned "RESERVE" as `{components.button-outline}`. On scroll or dark-section overlap, the bar inverts to white-on-black with the same geometry. No bottom border. No shadow.

### Badges / Tags

Property type and amenity labels: `{colors.surface-input}` light-grey fill, `{colors.ink}` text, `{typography.caption}` 12px Helvetica Light, `{rounded.none}` sharp corners. These read as data labels, not decorative chips.

## Do's and Don'ts

### Do
- Use Didot in uppercase at all times — never mixed case. The uppercase constraint is what makes the stroke contrast architectural rather than merely decorative
- Maintain the two-typeface contract: Didot for every editorial headline, Helvetica Neue Light for all navigation, body, and UI copy
- Keep buttons `{rounded.none}` with zero border-radius — the sharp rectangle is EDITION's universal component shape
- Apply negative letter-spacing to Didot at display sizes (`-1px` at 36px, `-4px` at 40px) — compressed tracking is part of the monumental reading
- Use `{colors.ink}` (`#111111`) rather than pure `#000000` for primary text — the softened near-black reads as deliberate, not digital-default
- Rely on `{colors.surface}` black as the sole canvas shift — the white-to-black flip in the footer is the only permitted surface departure
- Use uppercase transforms on all button labels in `{typography.button-ui}` — CTAs are announcements, not sentences
- Allow photography to carry all depth — no shadows, no gradients should appear on brand chrome
- Maintain `15px 50px` wide padding on the outline "RESERVE" button — the stamp-like horizontal proportion is the brand's primary CTA shape

### Don't
- Don't introduce a brand color or chromatic accent — EDITION's authority comes entirely from contrast, not hue
- Don't use Didot in mixed case for editorial headings — lowercase Didot loses the stroke drama that justifies the typeface choice
- Don't round corners on any brand-facing element — `{rounded.pill}` exists only in third-party shells
- Don't add box shadows or elevation layers to cards or panels — depth comes from photography and the black-white canvas contrast
- Don't use Helvetica Neue Light below 12px — the light weight is too thin at micro sizes; caption text needs the full 12px floor
- Don't apply Didot to navigation, button labels, or body copy — it's reserved exclusively for editorial display roles
- Don't use the `{colors.link-hover}` blue in branded UI — the blue link-hover is a framework artifact, not a palette decision
- Don't warm or tint the white canvas — the `{colors.background}` must stay pure white; a tinted canvas would break the monochromatic discipline

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <374px | Single column, wordmark at minimum scale |
| Mobile | 374–599px | Single column, full-width photography, hamburger nav |
| Mobile Large | 600–767px | Two-up property teasers possible |
| Tablet | 768–1023px | Horizontal nav restored, 2-column grids |
| Desktop | 1024–1259px | Full nav, 3-column property grids, full-width hero |
| Wide Desktop | ≥1260px | Maximum container width, expanded outer margins |

### Touch Targets
- "RESERVE" outline button: `15px 50px` padding with 13px type provides ~44px tap height on mobile viewports
- Navigation links: 13px Helvetica at generous horizontal spacing; adjacent tap areas sized to 44px minimum on compact viewports
- Property cards: entire card surface including photography is tappable, not just the text zone

### Collapsing Strategy
- **Navigation**: Full horizontal bar collapses to hamburger icon at 768px and below; drawer opens as a full-width overlay with white Didot links on black ground
- **Hero**: Full-viewport photography maintains proportions; Didot headline scales from 72px to 36–48px on mobile, remaining uppercase and centered
- **Property grid**: 3-column desktop collapses to 2-column tablet and single-column mobile; photography proportions preserved via `object-fit: cover`
- **Spacing**: Section gaps reduce from `{spacing.4xl}` (100px) on desktop to `{spacing.2xl}` (40px) on mobile — the gallery cadence compresses but never becomes crowded

### Image Behavior
- All photography is full-bleed in its container with `{rounded.none}` edges — never rounded, never bordered
- Hero images cover the full viewport using `object-fit: cover` with stable landscape aspect ratios
- Property grid images maintain consistent 4:3 or 16:9 ratios in responsive grids

---

## Agent Prompt Guide

### Quick Color Reference
- Background canvas: `{colors.background}` — `#ffffff`
- Primary text: `{colors.ink}` — `#111111`
- Secondary text: `{colors.ink-muted}` — `#757575`
- Dark surface / footer: `{colors.surface}` — `#111111`
- Outline CTA border: `{colors.primary-outline}` — `#3f3f3f`
- Primary border: `{colors.border}` — `#2d2d2d`
- On-dark text: `{colors.on-surface}` — `#ffffff`

### Example Component Prompts

- "Build an EDITION Hotels hero section on `{colors.background}` white. Full-bleed cinematic photography at full viewport height. Centered overlay: a property name in `{typography.display-hero}` (72px Didot weight 400, uppercase, no letter-spacing, `{colors.on-surface}` white), below it the destination in `{typography.nav-link}` (13px Helvetica Neue Light uppercase, `{colors.on-surface}`). No gradient scrim. No shadow. Sharp edges throughout."
- "Design the EDITION 'RESERVE' outline button: `{colors.background}` white fill, `1px solid {colors.primary-outline}` border, `{colors.primary-outline}` text, `{typography.button-ui}` (13px Helvetica LT Std Bold, uppercase, 1px letter-spacing), `{rounded.none}` sharp corners, `15px 50px` padding. Hover: background inverts to `{colors.surface}`, text flips to `{colors.on-surface}`, 0.4s ease."
- "Create an EDITION property card: full-bleed photography at top (`{rounded.none}`, no border, no shadow). Below: a property name in `{typography.heading-sub}` (30px Didot weight 400, uppercase, `{colors.ink}`), a city label in `{typography.caption}` (12px Helvetica Neue Light, `{colors.ink-muted}`), and a `{components.button-outline}` 'RESERVE' CTA. White `{colors.background}` content zone, sharp corners, no elevation."
- "Build the EDITION navigation bar on `{colors.background}` white. Left: hamburger or site navigation links in `{typography.nav-link}` (13px Helvetica Neue Light, `{colors.ink}`). Center: 'EDITION' wordmark in Didot or SVG. Right: `{components.button-outline}` 'RESERVE' button. No border-bottom. No shadow. Inverts to white-on-black when scrolled over a dark hero section."
- "Design an EDITION footer: `{colors.surface}` near-black background, full-width. Top: 'EDITION' wordmark in Didot white. Below: multi-column link grid in `{typography.nav-link}` (13px Helvetica Neue Light, `{colors.on-surface}`). Bottom row: fine-print legal copy in `{typography.caption}` (`{colors.ink-muted}`). No borders between columns. No shadows."
- "Create an EDITION destination section on white canvas. Section heading in `{typography.heading-section}` (36px Didot uppercase, `-1px` letter-spacing, `{colors.ink}`). Property grid: 3 columns, each card with full-bleed photography (`{rounded.none}`), property name below in `{typography.heading-sub}` Didot uppercase, city in `{typography.caption}` Helvetica Light. Section-level vertical padding: 80px top and bottom — gallery cadence."

### Iteration Guide

1. Begin with `{colors.background}` white as the primary canvas. There is no tinted or warm alternative — the system's purity depends on absolute white.
2. Set all editorial headings in Didot uppercase at weight 400. Size drives hierarchy; weight never changes. Apply negative letter-spacing (`-1px` to `-4px`) at display sizes.
3. Use Helvetica Neue Light for all navigation, body copy, and captions. The light cut is not a soft choice — it contrasts the thickness of Didot's main strokes deliberately.
4. Buttons are sharp rectangles (`{rounded.none}`) only. The outline "RESERVE" (`{components.button-outline}`) is the primary CTA; the filled dark variant (`{components.button-primary}`) is secondary.
5. Stay achromatic throughout. `{colors.ink}` near-black and `{colors.on-surface}` white are the only text colors; `{colors.ink-muted}` grey for supporting copy only.
6. The only permitted canvas shift is the flip to `{colors.surface}` black — used in the footer and dark hero panels. This binary inversion is the system's single dramatic gesture.
7. Apply section-level vertical breathing at 50–100px. The gallery cadence between major page sections is intentional, not waste.
8. Keep photography full-bleed and borderless. Every image container uses `{rounded.none}` with `object-fit: cover`. Photography carries all atmospheric depth — do not supplement with shadows or gradients.

---

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