---
version: alpha
name: "Standard Hotels"
description: "White-on-dark editorial typographic system anchored by Trade Gothic Bold Condensed and a defiant fire-engine red — boutique hospitality rendered as a broadside, not a brochure"

colors:
  background: "#ffffff"
  surface: "#f2f2f2"
  surface-dark: "#212529"
  ink: "#212529"
  ink-secondary: "#555555"
  ink-muted: "#888888"
  on-background: "#212529"
  on-surface: "#212529"
  primary: "#ee2324"
  on-primary: "#ffffff"
  primary-dark: "#ca1e1f"  # hover/pressed variant — darker red
  text-hover: "#ee2324"
  focus-ring: "#ee2324"
  border: "#c5c7c7"
  border-dark: "#212529"
  on-dark: "#ffffff"
  shadow-hard: "#ffffff"  # was rgb(255,255,255) 4px 4px 0px 0px — hard offset shadow on white buttons
  shadow-hard-red: "#ee2324"  # was rgb(238,35,36) 4px 4px 0px 0px — hard offset shadow on ghost buttons
  shadow-soft: "#999999"  # was rgba(0,0,0,0.2) 0px 0px 18px 0px — soft ambient for dropdowns

typography:
  display-hero:
    fontFamily: "TradeGothicBoldCondTwenty, Trade Gothic Bold Condensed No. 20, Arial Narrow, Helvetica Neue, sans-serif"
    fontSize: 97px
    fontWeight: 300
    lineHeight: 0.85
    letterSpacing: -0.48px
  display:
    fontFamily: "TradeGothicBoldCondTwenty, Trade Gothic Bold Condensed No. 20, Arial Narrow, Helvetica Neue, sans-serif"
    fontSize: 59px
    fontWeight: 400
    lineHeight: 0.85
    letterSpacing: -1.78px
  heading-section:
    fontFamily: "TradeGothicBoldCondTwenty, Trade Gothic Bold Condensed No. 20, Arial Narrow, Helvetica Neue, sans-serif"
    fontSize: 52px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -0.48px
  heading-sub:
    fontFamily: "TradeGothicBoldCondTwenty, Trade Gothic Bold Condensed No. 20, Arial Narrow, Helvetica Neue, sans-serif"
    fontSize: 42px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -0.48px
  heading-tertiary:
    fontFamily: "TradeGothicBoldCondTwenty, Trade Gothic Bold Condensed No. 20, Arial Narrow, Helvetica Neue, sans-serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -0.48px
    fontTransform: uppercase
  eyebrow:
    fontFamily: "TradeGothicBoldCondTwenty, Trade Gothic Bold Condensed No. 20, Arial Narrow, Helvetica Neue, sans-serif"
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -0.48px
  body-large:
    fontFamily: "GT Zirkon, Georgia, Times New Roman, serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.48px
  body:
    fontFamily: "GT Zirkon, Georgia, Times New Roman, serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.48px
  nav-link:
    fontFamily: "TradeGothicBoldCondTwenty, Trade Gothic Bold Condensed No. 20, Arial Narrow, Helvetica Neue, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -0.48px
    fontTransform: uppercase
  button-ui:
    fontFamily: "TradeGothicBoldCondTwenty, Trade Gothic Bold Condensed No. 20, Arial Narrow, Helvetica Neue, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -0.51px
  caption:
    fontFamily: "GT Zirkon, Georgia, Times New Roman, serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.48px

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

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

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    border: 1px solid {colors.primary}
    boxShadow: "{colors.shadow-hard} 4px 4px 0px 0px"
    padding: 6px 12px
  button-primary-hover:
    backgroundColor: "{colors.primary-dark}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    border: 1px solid {colors.primary-dark}
    padding: 6px 12px
  button-secondary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    border: 1px solid {colors.primary}
    padding: 6px 12px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    border: 1px solid {colors.primary}
    boxShadow: "{colors.shadow-hard-red} 4px 4px 0px 0px"
    padding: 6px 12px
  button-ghost-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    border: 1px solid {colors.primary}
    padding: 6px 12px
  button-on-dark:
    backgroundColor: "transparent"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    border: 1px solid {colors.on-dark}
    padding: 6px 12px
  button-on-dark-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    border: 1px solid {colors.primary}
    padding: 6px 12px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.none}"
    padding: 24px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    border: 1px solid {colors.border}
    padding: 8px 12px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    border: 1px solid {colors.primary}
    padding: 8px 12px
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  nav:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.nav-link}"
    padding: 8px 16px
---

# Standard Hotels Design System

## Overview

The Standard Hotels website does not announce itself like a luxury hotel. There is no golden serif dissolving over marble. The canvas opens dark — near-black `{colors.surface-dark}` soaked with editorial photography of hotel exteriors and guests caught in unposed moments, window light spilling onto brick, someone dancing in a hotel room shot from the street. White Trade Gothic Bold Condensed descends the left margin as a vertical list of city names at 97px, weight 300, line-height 0.85, the condensed face so compressed and so lightly weighted that the letterforms look like they are leaning into the photograph. It is a hospitality brand that acts like an independent magazine: the hotel is the cover story, not the cover.

The accent is fire-engine red (`{colors.primary}`) deployed with the confidence of a editorial stamp — it appears in the logo bar above the wordmark, on the "Book Now" pill in the corner, and on the hard 4px offset shadow that casts behind call-to-action buttons (`box-shadow: rgb(255,255,255) 4px 4px 0px 0px` on white buttons, `rgb(238,35,36) 4px 4px 0px 0px` on ghost buttons). That hard offset shadow is the system's signature — it is not an ambient depth treatment; it is a print-register trick, a deliberate nod to misaligned two-color letterpress. The red does not soften into a hover gradient or dissolve into a tint. It snaps.

GT Zirkon handles body copy and editorial prose — a contemporary serif with humanist warmth that lands in stark contrast against Trade Gothic's condensed gothic austerity. The combination is the same move Ace Hotel makes with Toronto Gothic and Bianco Sans, but at the Standard the serif is used more aggressively: running body text at 20px with `-0.48px` tracking gives the editorial sections a print-magazine density. The overall impression is boutique hotel as cultural institution — knowing, irreverent, photographically confident, and typographically exacting.

**Key Characteristics:**
- Trade Gothic Bold Condensed at 97px weight 300, line-height 0.85 — maximum editorial compression for the hero location list
- Negative letter-spacing at display scale: `-1.78px` at 59px, `-0.48px` throughout smaller sizes
- `{colors.primary}` fire-engine red confined to logo bar, primary CTA, and hard-offset button shadows — never decorative fills
- Hard 4px offset shadow on buttons (`4px 4px 0px 0px`) — letterpress-register print signature, not ambient softness
- Dark near-black surface (`{colors.surface-dark}`) deployed as the primary hero and navigation canvas, white text on top
- GT Zirkon at 20px for editorial body — a serif interjection against the condensed gothic display
- Zero border-radius on all brand-owned interactive elements (`{rounded.none}`) — the entire system is sharp-cornered
- Uppercase navigation links in Trade Gothic — structural category markers, not decorative labels
- `0.15s ease-in-out` button transitions (color, background-color, border-color, box-shadow) — fast and decisive
- Location list as typographic identity — the destination names at maximum scale ARE the hero artwork

## Colors

### Primary Surfaces
- **Pure White** (`{colors.background}`): The reading surface for editorial sections, body copy, and light-mode cards. Press-grade white, no warm tint.
- **Near-Black** (`{colors.surface-dark}`): The primary hero and navigation canvas. Header, footer, hero sections, and dark editorial panels all sit on this color — near-black not quite pure, with a slight cool blue note from Bootstrap's `#212529`.

### Brand Accent
- **Standard Red** (`{colors.primary}`): The system's single chromatic accent. Applied to the "The Standard" wordmark bar, the "Book Now" circular CTA, primary button fills, button borders, and the hard offset box-shadow signature. This red is not a soft coral or tomato variant — it is RGB-primary fire-engine red at full saturation, functioning like an ink stamp over the dark editorial ground.
- **Red Pressed** (`{colors.primary-dark}`): The pressed/hover variant — darkened to `#ca1e1f` for button hover and active states.

### Text Hierarchy
- **Ink** (`{colors.ink}`): Primary text on light surfaces. Equivalent to the near-black surface.
- **Ink Secondary** (`{colors.ink-secondary}`): Secondary labels, captions, and metadata on light surfaces.
- **Ink Muted** (`{colors.ink-muted}`): Placeholder text, disabled states, deeply recessive labels.
- **On Dark** (`{colors.on-dark}`): Pure white — all text and UI chrome over the dark canvas.

### Surfaces, Borders & Shadows
- **Light Surface** (`{colors.surface}`): Subtle off-white for alternating content panels and section dividers.
- **Border** (`{colors.border}`): Mid-grey `#c5c7c7` for input fields and light-surface card edges.
- **Border Dark** (`{colors.border-dark}`): Near-black border on light surfaces where maximum structural definition is needed.
- **Hard Shadow White** (`{colors.shadow-hard}`): The `rgb(255,255,255) 4px 4px 0px 0px` hard offset shadow on solid-fill red buttons — the print-register signature.
- **Hard Shadow Red** (`{colors.shadow-hard-red}`): The `rgb(238,35,36) 4px 4px 0px 0px` hard offset shadow on ghost/outline red buttons.
- **Soft Ambient** (`{colors.shadow-soft}`): `rgba(0,0,0,0.2) 0px 0px 18px 0px` — used sparingly on dropdowns and elevated panels.

## Typography

### Font Family
- **Display / Heading / Navigation / UI**: `TradeGothicBoldCondTwenty` (Trade Gothic Bold Condensed No. 20), with fallbacks: `Arial Narrow`, `-apple-system`, `system-ui`, `Helvetica Neue`. Self-hosted as `.woff`.
- **Body / Editorial / Caption**: `GT Zirkon` (by Grilli Type), with fallbacks: `Georgia`, `Times New Roman`. Self-hosted as `.woff`.
- **Icon System**: Font Awesome (icon font), used for supplemental UI icons.
- **OpenType Features**: No variable axes or stylistic sets declared. Trade Gothic loaded as a static condensed face; GT Zirkon runs at weight 400 only.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Hero location list — city names stacked as 97px editorial artwork, line-height 0.85 |
| `display` | Campaign headlines, major property names, large section heroes — 59px with -1.78px tracking |
| `heading-section` | Section titles, offer headings, program names — 52px |
| `heading-sub` | Sub-section headings, card titles, event names — 42px |
| `heading-tertiary` | Uppercase tertiary headings, category markers — 36px |
| `eyebrow` | Uppercase eyebrow labels, section identifiers — 26px |
| `body-large` | Lead editorial paragraphs, intro copy, descriptive text — GT Zirkon 20px |
| `body` | Running editorial prose, descriptions, article text — GT Zirkon 16px |
| `nav-link` | Navigation items, uppercase utility links — Trade Gothic 16px uppercase |
| `button-ui` | All button labels and CTA text — Trade Gothic 17px |
| `caption` | Image credits, timestamps, fine print — GT Zirkon 14px |

### Principles
- Trade Gothic Bold Condensed is the typographic identity — its compressed letterforms at extreme scale produce the editorial density that defines the brand
- Weight progression runs counter-intuitively: 300 at 97px hero, 400 at 59px display, 500 at heading sizes — the largest type is the most fragile
- Negative letter-spacing is applied most aggressively at the display range: `-1.78px` at 59px, stepping back to `-0.48px` throughout the system
- GT Zirkon as the editorial serif insert — humanist warmth against the hard gothic condensed, creating the design magazine reading experience
- Uppercase is structural for navigation and tertiary headings; never applied globally to the display layer

## Layout

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

The spacing personality is editorial-tight at component scale and section-generous at page scale. Buttons carry compact `6px 12px` padding that reads as print-matter label more than digital button chrome. Section vertical rhythm jumps to `48–64px` where major editorial sequences need to breathe.

### Grid & Container
- Max content width: approximately 1280px on wide viewports
- Hero: full-bleed dark photography with Trade Gothic location list overlaid — left-anchored, spanning the full viewport height
- Navigation: logo left, utility links right, all caps, on dark near-black bar
- Content grids: multi-column editorial layout with variable card heights — not uniform product grids
- Booking widget: appears as a floating panel overlay on the hero

### Whitespace Philosophy
- The hero is photographic and deliberately compressed — whitespace is a print concept, not a digital grid concept here
- Body editorial sections switch to generous padding between content groups
- The dark/light section alternation provides rhythmic chapter breaks without needing extra vertical space

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All content elements, standard cards, editorial sections |
| Hard Offset (Level 1) | `rgb(255,255,255) 4px 4px 0px 0px` | Primary red buttons — the letterpress-register signature |
| Ghost Offset (Level 1b) | `rgb(238,35,36) 4px 4px 0px 0px` | Ghost/outline buttons — red shadow on transparent background |
| Ambient (Level 2) | `rgba(0,0,0,0.2) 0px 0px 18px 0px` | Dropdowns, floating panels, elevated UI chrome |
| Hard Inset (Level 3) | `rgb(33,37,41) 2px inset` | Focused iframe and presentation containers |
| Focus Ring | `1px solid {colors.primary}` | Input focus state — the primary red outlines active fields |

**Shadow Philosophy**: The Standard's shadow system is not about atmospheric depth. The signature move is the hard 4px offset — a zero-blur, opaque offset that reads as a printing registration error or a silkscreen second-pass. This is a deliberate nod to the brand's print-culture DNA (the Standard has an associated magazine, Standard International). Elevated ambient shadow (`0px 0px 18px 0px`) appears only where genuine floating behavior needs communicating. Most of the page is flat.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All buttons, all cards, navigation, standard inputs — the default for every brand-owned element |
| `sm` | 2px | Minor UI chrome, checkbox and radio elements, subtle rounding on third-party components |
| `pill` | 9999px | The "Book Now" floating circular CTA — the single exception to the sharp-corner rule |

The system is functionally binary: zero radius for all brand UI, and a pill shape reserved exclusively for the "Book Now" floating action button in the corner. The pill there functions as a spatial anchor — it floats over the full-bleed photography as a distinct chromatic red circle, legible against any background. Every other interactive element is sharp.

## Components

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

### Button variants

- **`button-primary`** — Fire-engine red fill, white text, zero radius, `6px 12px` padding, `1px solid {colors.primary}` border, plus the hard white 4px offset shadow. The shadow behind a red button reads as a print overlay double-exposure. On hover: darkens to `{colors.primary-dark}`, shadow dissolves.
- **`button-ghost`** — Transparent background, red text, `1px solid {colors.primary}` border, hard red 4px offset shadow. On hover: fills to solid red — the ghost becomes the stamp.
- **`button-on-dark`** — Transparent background with white border on dark surfaces. On hover: fills with `{colors.primary}` — the dark surface defers to the red stamp on interaction.

### Cards

- **Standard card** (`card`): White background, zero radius, no drop shadow. Content-first — the card is a container, not a visual feature.
- **Dark card** (`card-dark`): Near-black surface, white text. Used in dark editorial sections and feature overlays.

### Inputs

- **Standard input** (`input`): White background, `1px solid {colors.border}` full-border, zero radius, GT Zirkon 16px. On focus: border shifts to `{colors.primary}` — the red outlines the active field.

### Badges

Flat red fill, white text, zero radius — used for promotional status labels and category markers. The badge is a red stamp on light surfaces.

### Navigation

- Top bar: dark near-black surface, logo wordmark with red "The Standard" label bar at left, utility nav links right-aligned in Trade Gothic 16px uppercase, all white
- Hover: link color transitions to `{colors.text-hover}` red over `0.15s ease-in-out`
- Mobile: collapses to hamburger; overlay navigation
- Sticky: fixed top with the dark bar persisting across all scroll positions

## Do's and Don'ts

### Do
- Use Trade Gothic Bold Condensed at 97px weight 300 for the hero display layer — the ultra-light condensed at extreme scale IS the identity
- Apply `{colors.primary}` red to buttons, the logo bar, the floating CTA, and hard offset shadows — it is a functional stamp, not a decorative fill
- Use the hard 4px offset shadow (`4px 4px 0px 0px`) on buttons to signal interactive print-register character — this is the system's tactile signature
- Keep all buttons and inputs at `{rounded.none}` — the single exception is the floating "Book Now" pill which exists as a spatial anchor over photography
- Pair Trade Gothic headlines with GT Zirkon editorial body copy — the condensed gothic / humanist serif contrast is the typographic voice
- Maintain negative letter-spacing at display scale: `-1.78px` at 59px, `-0.48px` throughout — the condensed face needs tracking assistance at headline sizes
- Use the dark surface (`{colors.surface-dark}`) as the primary hero and navigation canvas — the brand lives in dark editorial space
- Apply uppercase transformation to navigation links and tertiary headings — Trade Gothic earns its authority through compression, not weight

### Don't
- Don't introduce intermediate border-radius values (4–16px) on brand UI — `{rounded.none}` for interactive chrome, `{rounded.pill}` only for the floating CTA
- Don't use `{colors.primary}` red as a decorative background fill for sections, cards, or hero panels — it is reserved for button fills, the logo bar, and box-shadow accents
- Don't soften the hard 4px offset shadow with blur — `box-shadow: <color> 4px 4px 0px 0px` is zero blur intentionally; adding blur destroys the letterpress effect
- Don't substitute system sans-serif for Trade Gothic on display headings — the condensed proportions of the typeface are irreplaceable; fallback to `Arial Narrow` only
- Don't apply GT Zirkon to headlines or navigation — the serif is editorial body copy only; Trade Gothic owns the display and UI layer
- Don't use ambient multi-layer shadows on standard content cards — shadow appears only on floating panels and dropdown elements
- Don't add color tints, gradients, or brand-red backgrounds to section fills — `{colors.background}` white and `{colors.surface-dark}` near-black are the only two canvas options
- Don't run Trade Gothic at weight 400 or above for the 97px hero size — the lightness at extreme scale is the brand's editorial courage

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | ≤425px | Single column, hero type drops to ~48px, location list stacks |
| Mobile | 426–600px | Single column, hamburger nav, compressed hero |
| Tablet Small | 601–768px | 2-column content grids emerge, nav still compressed |
| Tablet | 769–896px | 2–3 column grids, nav links begin appearing |
| Desktop Small | 897–1023px | Multi-column editorial layout, full nav visible |
| Desktop | 1024–1280px | Full layout, 97px hero display, trade gothic at maximum scale |
| Large Desktop | ≥1281px | Wide container, full-bleed photography, hero at maximum scale |

### Touch Targets
- Buttons: `6px 12px` compact padding — mobile views expand to minimum 44px tap height
- Navigation links: adequate at 16px Trade Gothic with expanded touch padding on mobile
- Floating Book Now pill: adequate circular target at all breakpoints

### Collapsing Strategy
- **Navigation**: Dark bar persists; links collapse to hamburger below ~768px; Trade Gothic wordmark stays fixed-left
- **Hero location list**: 97px display scales to ~64px at tablet, ~48px at mobile; weight 300 and line-height 0.85 maintained throughout
- **Editorial grids**: Multi-column collapses to 2-column then single-column with consistent padding reduction
- **Dark sections**: Full-bleed dark surfaces persist at all breakpoints

### Image Behavior
- Full-bleed photography in hero sections: `object-fit: cover`, fills viewport height
- Card imagery: fixed-height containers with cover scaling
- No border-radius on images — consistent with the system's zero-radius philosophy

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Brand accent (primary CTA, logo bar): `{colors.primary}`
- Dark canvas (hero, nav, footer): `{colors.surface-dark}`
- On dark text: `{colors.on-dark}`
- Border: `{colors.border}`
- Hard shadow (white on red): `{colors.shadow-hard}`
- Hard shadow (red on ghost): `{colors.shadow-hard-red}`

### Example Component Prompts

- "Create a hero section on near-black (`#212529`). Overlay a full-bleed hotel exterior photograph. On the left, stack city names as a vertical list in Trade Gothic Bold Condensed 97px weight 300 line-height 0.85 letter-spacing -0.48px color `#ffffff`. Each name is a link; on hover, color transitions to `#ee2324` over 0.15s ease-in-out. Navigation bar fixed at top: `#212529` background, Standard Hotels wordmark with small `#ee2324` 'The Standard' bar above the wordmark, utility links right-aligned in Trade Gothic 16px uppercase white."
- "Design a primary CTA button: `#ee2324` background, `#ffffff` text, Trade Gothic Bold Condensed 17px letter-spacing -0.51px, zero border-radius, `1px solid #ee2324` border, `6px 12px` padding. Box-shadow: `rgb(255,255,255) 4px 4px 0px 0px` — the hard offset white shadow behind the red button. On hover: background shifts to `#ca1e1f`, shadow dissolves over 0.15s ease-in-out."
- "Build an editorial card for a hotel property on white. Image full-bleed at top, zero radius, no border. Property name in Trade Gothic Bold Condensed 42px weight 500 letter-spacing -0.48px color `#212529`. Location and dates below in GT Zirkon 16px weight 400 line-height 1.3 color `#555555`. CTA link at bottom in Trade Gothic 17px color `#ee2324`, no underline, on hover: darken to `#ca1e1f`."
- "Create a ghost/outline button variant: transparent background, `#ee2324` text, Trade Gothic 17px, zero radius, `1px solid #ee2324` border, `6px 12px` padding. Box-shadow: `rgb(238,35,36) 4px 4px 0px 0px` — the red hard shadow on a ghost button reads as a red letterpress stamp. On hover: background fills to `#ee2324`, text becomes white, shadow dissolves."
- "Design a navigation bar for the Standard. Fixed top, `#212529` near-black background, no transparency. Left: Standard Hotels SVG wordmark with a red bar element above the text. Right: utility links in Trade Gothic Bold Condensed 16px weight 400 uppercase `#ffffff`, spaced by 16–24px. On hover: link color shifts to `#ee2324` over 0.15s ease-in-out. Far right: search icon in white. Floating separately at bottom-right corner: `#ee2324` pill-shaped 'Book Now' button (`border-radius: 9999px`, `padding: 12px 20px`, Trade Gothic 17px white text)."
- "Build an editorial section alternating between white and dark panels. White panel: GT Zirkon 20px body text color `#212529`, Trade Gothic 52px section heading. Dark panel (`#212529`): same sizing, text in `#ffffff`. No dividers between panels — the surface color change IS the section break. Section vertical padding: 48–64px."

### Iteration Guide

1. Start with the surface — is this dark (`{colors.surface-dark}`) or light (`{colors.background}`)? Dark is the default for hero and nav; white for editorial body sections
2. Trade Gothic Bold Condensed owns every headline — the condensed proportions at weight 300–500 are what makes the system read as print-editorial, not hotel-website
3. Red (`{colors.primary}`) arrives last and precisely: button fills, the logo bar, and the hard offset shadow — never a background section or a decorative accent
4. The hard 4px offset shadow is structural to the button character — always `0px` blur, always opaque color — it is the system's most distinctive component fingerprint
5. Zero border-radius on all brand UI except the floating circular "Book Now" pill
6. GT Zirkon at 20px with `-0.48px` tracking for body copy — the serif counterbalances the gothic condensed display layer
7. Navigation always uppercase Trade Gothic, always on dark surface, always with the red wordmark element at left

---

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