---
version: alpha
name: "Ace Hotel"
description: "Ink-dark near-black canvas with punk-editorial type — an indie hospitality brand that treats its website like a broadside, not a booking engine"

colors:
  background: "#ffffff"
  surface: "#f5f5f5"
  surface-dark: "#231f20"
  ink: "#231f20"
  ink-secondary: "#474747"
  ink-muted: "#999999"
  on-background: "#231f20"
  on-surface: "#231f20"
  primary: "#ff944c"
  on-primary: "#231f20"
  primary-container: "#ffd4b3"  # was rgba(255,148,76,0.2) — Google format requires hex
  text-hover: "#ff944c"
  focus-ring: "#ff944c"
  border: "#231f20"
  border-light: "#e6e6e6"
  border-subtle: "#f4f4f4"
  on-dark: "#ffffff"
  shadow-soft: "#231f20"  # was rgba(0,0,0,0.17) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Toronto Gothic, Toronto Gothic Fallback, Georgia, serif"
    fontSize: 140px
    fontWeight: 300
    lineHeight: 0.95
    letterSpacing: -1.4px
  display:
    fontFamily: "Toronto Gothic, Toronto Gothic Fallback, Georgia, serif"
    fontSize: 70px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.7px
  heading-section:
    fontFamily: "Toronto Gothic, Toronto Gothic Fallback, Georgia, serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.17
    letterSpacing: -0.7px
  heading-sub:
    fontFamily: "Toronto Gothic, Toronto Gothic Fallback, Georgia, serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.18
    letterSpacing: -0.1px
  eyebrow:
    fontFamily: "Toronto Gothic, Toronto Gothic Fallback, Georgia, serif"
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "Bianco Sans, Bianco Sans Fallback, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: 0px
  body:
    fontFamily: "Bianco Sans, Bianco Sans Fallback, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.16px
  nav-link:
    fontFamily: "Bianco Sans, Bianco Sans Fallback, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0px
  button-ui:
    fontFamily: "Bianco Sans, Bianco Sans Fallback, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.71
    letterSpacing: 0px
  caption:
    fontFamily: "Bianco Sans, Bianco Sans Fallback, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.75
    letterSpacing: 0px
  label-upper:
    fontFamily: "Bianco Sans, Bianco Sans Fallback, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: -0.16px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 18px
  xl: 26px
  2xl: 50px
  3xl: 77px

rounded:
  none: 0px
  sm: 2px
  dialog: 6px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 2px 21px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 2px 21px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    border: 1px solid {colors.border}
    padding: 2px 21px
  button-secondary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 2px 21px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    border: 1px solid {colors.border}
    padding: 2px 21px
  button-ghost-hover:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    border: 1px solid {colors.primary}
    padding: 2px 21px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    border: 1px solid {colors.border}
    padding: 18px
  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.none}"
    padding: 18px
  input:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    border: 0px 0px 1px solid {colors.border}
    padding: 4px 15px
  input-focus:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    border: 2px dashed {colors.primary}
    padding: 4px 15px
  input-on-dark:
    backgroundColor: "transparent"
    textColor: "{colors.on-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    border: 0px 0px 1px solid {colors.on-dark}
    padding: 4px 15px
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 10px
  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    border: 0px 0px 1px solid {colors.border}
    padding: 10px 24px
---

# Ace Hotel Design System

## Overview

Ace Hotel's website does not behave like a hotel website. There are no soft-focus room shots dissolving into booking widgets, no warm hospitality gradients easing you toward a reservation form. The canvas is a near-black ink color (`#231f20`) deployed as the structural ground for the dark moments and pure white for the light ones, with every typographic element drawn from a custom gothic sans called Toronto Gothic that runs at weights as light as 300 and sizes as large as 140px. The system reads like a broadside poster from an independent record label, or the front page of a downtown arts tabloid. The brand's cultural credibility is performed through type, not photography alone.

The typographic architecture is the core of the identity. Toronto Gothic at 140px and weight 300 produces a headline that is simultaneously monumental and fragile — letterforms at extreme scale with barely any weight, a maneuver borrowed from Swiss modernist posters and zine culture equally. At 70px and 64px with `-0.7px` tracking it compresses into editorial density. The Tiempos Headline Fallback provides a serif accent presence for pull-quote moments: a humanist serif alongside the hard gothic, the same contrast move employed by every great punk-era magazine. Bianco Sans handles body copy and navigation — clean, precise, getting out of the way. The three-face system is not merely functional; it is a statement about which typefaces belong in rooms that are interesting.

What makes Ace's digital system genuinely distinctive is the accent color: `{colors.primary}`, a warm tangerine-orange that appears at exact moments — link hover states, focus rings on form inputs, active navigation indicators — and nowhere else. The `#231f20` body alongside the `#ffffff` page against that pop of orange creates a palette that reads as both archival (black ink on newsprint) and alive. The dashed-orange focus treatment on input fields is especially precise: `2px dashed #ff944c` is a functional accessibility marker that also looks like a designer chose it for aesthetic reasons, the best kind of specification.

**Key Characteristics:**
- Near-black `{colors.ink}` deployed as dark-mode surface in hero sections, footer, and announcement bars — not as text color alone
- Toronto Gothic at weight 300, 140px — monumental display type that refuses heaviness
- Tight negative letter-spacing at every display size: `-1.4px` at 140px, `-0.7px` at 70px
- Tangerine-orange accent `{colors.primary}` used exclusively for hover, focus, and active states — never for decoration
- All buttons and inputs are sharp-cornered (`{rounded.none}`) — zero border-radius on interactive chrome
- Bottom-border-only inputs on dark surfaces (`0px 0px 1px solid #ffffff`) — the discipline of a restraint that trusts form over furniture
- `2px dashed {colors.primary}` focus state on inputs: the most distinctive accessibility treatment in the corpus
- Bianco Sans for body and navigation — neutral, high-legibility, never competing with the display layer
- `0.25s ease` transitions on every interactive state (color, background-color, transform, border-color) — consistent timing vocabulary
- Breakpoint system with 35 declared widths — the fine-grained editorial control of a publication, not a product

## Colors

### Primary Surfaces
- **Page White** (`{colors.background}`): The primary reading surface. Sections of heavy editorial content, article bodies, and navigational areas sit on white. Not cream, not warm — press-grade white.
- **Near-Black Ink** (`{colors.ink}`): The primary text color and secondary surface. Simultaneously the deepest text and the dark canvas of hero sections, footers, and announcement bars. This color's dual role is the system's most compressed design decision.

### Brand Accent
- **Ace Orange** (`{colors.primary}`): The single chromatic accent. Reserved strictly for interaction feedback — link hover, button hover, input focus borders. Never used as a fill or decoration. It arrives like a stamp: deliberate, exact, unexpected.

### Text Hierarchy
- **Ink Secondary** (`{colors.ink-secondary}`): Darkened medium grey for secondary text, subheadings, and UI elements requiring less visual weight than the primary near-black.
- **Ink Muted** (`{colors.ink-muted}`): Placeholder text, disabled states, and deeply recessive captions.

### Surfaces & Borders
- **Light Surface** (`{colors.surface}`): Subtle off-white used for alternate-row backgrounds, light-mode panel tints.
- **Dark Surface** (`{colors.surface-dark}`): The ink color deployed as a surface. Hero backgrounds, footer, announcement bar, dark-mode form contexts.
- **On Dark** (`{colors.on-dark}`): Pure white — all text and UI chrome on dark surfaces.
- **Border** (`{colors.border}`): `1px solid #231f20` — the standard structural edge on light surfaces. The same near-black as the ink.
- **Border Light** (`{colors.border-light}`): Recessive `#e6e6e6` for section dividers and card separators that should read as structure without weight.
- **Border Subtle** (`{colors.border-subtle}`): Near-invisible `#f4f4f4` for the most withdrawn separators.

### Shadows
- **Card Shadow** (`{colors.shadow-soft}`): `rgba(0,0,0,0.17) 0px 2px 21px 0px` — a soft ambient lift used on floating panels and dialogs; the only genuine shadow in the system. Converted to `#231f20` for the YAML token; the exact rgba value applies in implementation.

## Typography

### Font Family
- **Display / Heading**: `Toronto Gothic`, with fallback: `Toronto Gothic Fallback`, `Georgia`, serif
- **Serif Accent**: `Tiempos Headline`, with fallback: `Tiempos Headline Fallback`, `Georgia`, serif — humanist serif for pull-quote and accent moments
- **Body / UI / Navigation**: `Bianco Sans`, with fallback: `Bianco Sans Fallback`, `Helvetica Neue`, `Arial`, sans-serif
- All three fonts are self-hosted as `.woff2`: `toronto-gothic.woff2`, `tiempos-headline-medium.woff2`, `bianco-sans-regular.woff2`, `bianco-sans-bold.woff2`
- **OpenType Features**: No explicit variable axes; Toronto Gothic loaded as a static face. No discretionary ligatures or stylistic sets declared.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Full-bleed editorial headlines, hotel name moments at maximum drama |
| `display` | Section heroes, property names, campaign headlines |
| `heading-section` | Major section titles, event listings, offer heads |
| `heading-sub` | Sub-section titles, card headings, program names |
| `eyebrow` | Uppercase-capable navigational category labels and section markers |
| `body-large` | Lead paragraphs, emphasized descriptions, intro copy |
| `body` | Running body copy, navigation labels, form text |
| `nav-link` | Footer links, secondary navigation, utility labels |
| `button-ui` | All button labels and CTA text |
| `caption` | Image captions, timestamps, fine-print text |
| `label-upper` | Uppercase label pairs, form field labels, system tags |

### Principles
- Toronto Gothic at weight 300 for 140px display moments — the system's lightest and most dramatic register
- Weight increases with descending scale: 300 (140px hero) → 400 (70–64px display) → 500 (28–30px heading) — a counter-intuitive reversal of the typical heavy-large convention
- Negative letter-spacing at all display sizes: `-1.4px` at 140px, `-0.7px` at 70px, `-0.1px` at 28px — headlines are typographic objects, not strings of letters
- Bianco Sans always in lower weights (400–700) for body — the display face carries personality so the body face does not need to
- Uppercase reserved for specific eyebrow and label tokens — not applied globally; Toronto Gothic earns its authority through size, not case

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px, with the practical workhorse values at `10px`, `12px`, `18px`, and `26px`.

Ace Hotel's spacing is restrained at body scale and generous at section scale. Internal component padding uses sub-16px values (`10px`, `12px`) that feel compact, slightly poster-like. Section vertical rhythm jumps to `50–77px`, where editorial sections land with enough breathing room to feel considered.

### Grid & Container
- Max content width: ~1440px on wide viewports, with 24px left-aligned nav positioning
- Layout pattern: editorial asymmetry — large-type blocks alongside photography, not symmetrical two-column grids
- Navigation: wordmark at `24px` left offset, utility links right-aligned with `12px` padding on the inner right
- Hero sections: full-bleed with type overlaid on photography or dark surfaces
- Card grids: variable-column based on breakpoint, no uniform card-height enforcement

### Whitespace Philosophy
- The system is not generous at small scale and not compressed at large scale — it matches print layout instincts
- Tight internal padding (`2px 21px` on buttons) reads as poster typography rather than digital button chrome
- Section breaks use the large `50–77px` values to give editorial sequences the rhythm of pages turning

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All content elements, standard cards, editorial sections |
| Soft (Level 1) | `rgba(0,0,0,0.17) 0px 2px 21px 0px` | Floating panels, overlays, and card hover states |
| Directional (Level 2) | `rgba(0,0,0,0.5) 0px 5px 15px -5px` | Booking widgets, modal dialogs, high-priority overlays |
| Scroll (Level 3) | `rgba(172,171,171,0.3) 0px -1px 10px 0px` | Sticky navigation on scroll — identical to the Kinfolk pattern, barely perceptible |
| Modal (Level 4) | `rgba(0,0,0,0.3) 0px 32px 68px 0px` | Full-screen dialogs and drawer overlays |
| Focus Ring | `2px dashed {colors.primary}` | Active input focus state — the signature accessibility treatment |

**Shadow Philosophy**: Ace Hotel uses shadow instrumentally, not decoratively. The `rgba(0,0,0,0.17)` soft ambient is the everyday working shadow — used on floating booking panels and interactive cards. The `rgba(0,0,0,0.3) 0px 32px 68px` modal shadow appears only when a surface needs to unambiguously float above the page. The real depth signature is not shadow at all: it is the dark-surface treatment (`{colors.surface-dark}`) that makes footer and hero sections feel like physical layers.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All buttons, all inputs, all standard cards, navigation bar — the default |
| `sm` | 2px | Cookie consent and minor UI chrome only — not a brand-sanctioned shape |
| `dialog` | 6px | Modal and dialog containers exclusively |
| `pill` | 9999px | Toggle switches in cookie/preference UI — third-party, not brand |

The system is functionally binary: sharp (`{rounded.none}`) for every brand-owned element, and `6px` only for floating overlay containers. `0px` radius on buttons is the definitive design statement — Ace Hotel's interactive chrome is poster-sharp, never app-friendly-rounded.

## Components

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

### Button variants

- **`button-primary`** — Near-black fill, white text, zero radius, `2px 21px` padding. The primary action button. On hover: transforms to orange (`{colors.primary}` fill) with near-black text — a visible but controlled accent moment.
- **`button-secondary`** — White background with a `1px solid {colors.border}` edge. On hover: same orange transformation as primary. The border-vs-fill distinction is the entire visual grammar between primary and secondary.
- **`button-ghost`** — Transparent background with near-black border. On hover: border and text shift to `{colors.primary}` — the ghost button retains its outline, now in orange.

### Cards

- **Standard card** (`card`): White background, near-black border, zero radius. Typography leads; the card is a container, not a visual feature.
- **Dark card** (`card-dark`): Ink-dark surface, white text. Used in hero sections and features where the editorial split between light and dark sections calls for a reversed surface.

### Inputs

- **Standard input** (`input`): Transparent background with bottom-border-only treatment (`0px 0px 1px solid #231f20`) — the input is a line, not a box. On focus: background fills to dark (`{colors.surface-dark}`), text inverts to white, border becomes `2px dashed {colors.primary}`. The dashed-orange focus is the most identifiable accessibility mark in the system.
- **Input on dark surfaces** (`input-on-dark`): Identical bottom-border treatment in white, transparent background against the dark canvas.

### Badges

Minimal — flat `{colors.primary-container}` tint with near-black text, zero radius. Primarily used for promotional status labels (offer tags, room type markers).

### Navigation

- Top bar: `24px` left-offset wordmark SVG, near-black on white, `1px solid {colors.border}` bottom rule
- Scroll state: ambient shadow (`rgba(172,171,171,0.3)`) materializes on sticky scroll — structural signal, not aesthetic
- Links: Bianco Sans 14px weight 400, `text-transform: uppercase` available for category identifiers
- Hover: link color transitions to `{colors.primary}` over `0.25s ease`
- Mobile: full-width dropdown via `ease-in 0.3–0.4s` transform — the nav slides, not fades

## Do's and Don'ts

### Do
- Use Toronto Gothic at weight 300 for 140px hero display — the lightweight-at-maximum-scale is the brand's signature typographic stance
- Apply `{colors.primary}` exclusively for hover, focus, and active states — the orange lands with authority because it appears only at interaction moments
- Keep all buttons and standard inputs at `{rounded.none}` — the zero-radius rule is absolute for brand UI; `6px` lives only in modal containers
- Use bottom-border-only treatment for inputs (`border-bottom: 1px solid {colors.border}`) — the line-as-input is the interaction design pattern, not the box-as-input
- Let the near-black `{colors.surface-dark}` carry full editorial sections, not just text — the ink color as a background surface is what makes the hero moments feel printed rather than screened
- Apply negative letter-spacing proportionally: `-1.4px` at 140px, `-0.7px` at 70–64px, `-0.1px` at 28px
- Maintain `0.25s ease` as the universal transition timing — all color, transform, and background-color transitions at this value

### Don't
- Don't introduce intermediate border-radius values (4–16px) — the system is binary: zero for brand UI, 6px for dialogs only
- Don't use `{colors.primary}` orange as a fill color for decoration, backgrounds, or static accents — it exists only in the interactive state layer
- Don't apply Toronto Gothic at weight 400 or above for the 140px display size — the ultra-light treatment at extreme scale is the point; heavier weight destroys it
- Don't use Bianco Sans for display headings — it belongs in body, navigation, and button contexts exclusively; Toronto Gothic holds all headline moments
- Don't add box-shadow to standard cards and editorial content — shadow appears only on floating overlays and sticky navigation scroll states
- Don't use pill-shaped elements for brand buttons or CTAs — pill radius belongs to cookie/consent UI (third-party) only
- Don't remove the uppercase label transform from eyebrow and category tags — it is the structural device that separates metadata from content in this system

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Micro Mobile | ≤352px | Single column, hero type scales below 60px, stacked everything |
| Small Mobile | 352–480px | Single column, compressed nav, bottom-border inputs stack |
| Mobile | 480–767px | Full-width editorial sections, hamburger nav |
| Tablet Small | 768–899px | 2-column grids emerge, nav links begin collapsing |
| Tablet | 900–1023px | 2–3 column editorial grids, full nav or compressed nav |
| Desktop | 1024–1279px | Multi-column cards, full nav, hero type at full scale |
| Large Desktop | 1280–1440px | Maximum grid, 140px hero display, full editorial layout |
| Wide Desktop | ≥1441px | Content centered or full-bleed, ultra-wide photography treatments |

### Touch Targets
- Buttons: `2px 21px` padding is compact — mobile views expand to minimum `44px` hit area
- Navigation links: adequate at `14px` Bianco Sans with expanded touch padding on mobile
- Inputs: bottom-border-only inputs gain full-box treatment on mobile for touch accuracy

### Collapsing Strategy
- **Navigation**: Wordmark stays fixed-left; utility links collapse to hamburger below ~768px; full overlay menu via `ease-in 0.3s transform`
- **Hero type**: 140px display scales progressively — approximately 80px at tablet, 48–60px at mobile; weight 300 maintained throughout
- **Editorial grids**: Multi-column → 2-column → single-column depending on viewport, with `10–18px` consistent gaps
- **Dark surface sections**: Full-bleed dark surfaces maintained at all breakpoints — the ink canvas does not collapse

### Image Behavior
- Full-bleed photography in hero sections: `object-fit: cover`, maintains aspect ratio across breakpoints
- Card imagery: fixed-height containers with `object-fit: cover`, scales with column width
- No `border-radius` on images at any breakpoint — consistent with the system's zero-radius philosophy

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Brand accent (interactions only): `{colors.primary}`
- Secondary text: `{colors.ink-secondary}`
- Dark surface: `{colors.surface-dark}`
- On dark: `{colors.on-dark}`
- Border: `{colors.border}`
- CTA hover/focus: `{colors.primary}`

### Example Component Prompts

- "Create a hero section on near-black (`#231f20`). Display headline in Toronto Gothic (or Georgia fallback) 140px weight 300 line-height 0.95 letter-spacing -1.4px color `#ffffff`. Below the headline, add a subline in Bianco Sans 16px weight 400 color `#ffffff` line-height 1.15. Primary CTA button: `#231f20` background (on dark, use `#ffffff` background with `#231f20` text), zero border-radius, 2px 21px padding, Bianco Sans 14px weight 500. On hover: button fills to `#ff944c` with `#231f20` text."
- "Design a property card on white (`#ffffff`) with `1px solid #231f20` border, zero border-radius. Property name in Toronto Gothic 28px weight 500 line-height 1.18 letter-spacing -0.1px color `#231f20`. Location label above the name in Bianco Sans 14px weight 400 uppercase color `#474747`. Image full-bleed above text, no radius, no shadow. CTA link at bottom: Bianco Sans 14px weight 500 color `#231f20`, hover color `#ff944c`."
- "Build a navigation bar: white background, `1px solid #231f20` bottom border, 10px top/bottom padding. Logo wordmark left at 24px from left edge. Navigation links in Bianco Sans 14px weight 400 color `#231f20`, uppercase. On scroll: add `rgba(172,171,171,0.3) 0px -1px 10px 0px` shadow to bottom of nav bar. All link hover states transition to `#ff944c` over `0.25s ease`."
- "Create an email input field on dark surface (`#231f20` background). Input: transparent background, `1px solid #ffffff` bottom-border only, zero radius, Bianco Sans 16px color `#ffffff`, 4px 15px padding. On focus: background fills to `#231f20`, border becomes `2px dashed #ff944c`, text stays white. Submit button beside input: `#ff944c` background, `#231f20` text, zero radius, 2px 21px padding, Bianco Sans 14px weight 500."
- "Design an offer/rate badge: `#ffd4b3` background, `#231f20` text, Bianco Sans 12px weight 400, zero border-radius, 4px 10px padding. Use for promotional rate labels and availability tags. No shadow, no border."
- "Build a full-bleed editorial section with two alternating panels. Panel A: white background, Toronto Gothic 64px weight 400 heading color `#231f20` with -0.7px tracking. Panel B: `#231f20` background, same heading in `#ffffff`. Body copy in both panels: Bianco Sans 16px weight 400 line-height 1.15. The dark panel makes the light panel feel brighter — the ink surface earns the white one."

### Iteration Guide

1. Start with the surface decision — is this section light (`{colors.background}`) or dark (`{colors.surface-dark}`)? The dark/light alternation is the primary structural move in the system
2. Toronto Gothic owns every heading above 20px — never substitute Bianco Sans at display scale
3. Orange (`{colors.primary}`) is the last color added, not the first — build the near-black-and-white composition, then let the accent arrive at interaction moments only
4. Zero radius on all brand elements — if you reach for `border-radius`, ask whether it is a dialog (6px) or brand UI (0px)
5. Button padding is tight by design (`2px 21px`) — resist the urge to expand; the compact footprint is a poster sensibility, not an oversight
6. Letter-spacing and weight travel in opposite directions: largest type is lightest weight, smallest type is heaviest — follow the counter-convention faithfully
7. The `2px dashed {colors.primary}` focus state is not a substitute for other focus treatments — it is the system's accessibility signature, apply it to all focusable inputs

---

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