---
version: alpha
name: citizenM
description: Affordable-luxury hotel brand with bold red-on-near-black Swiss modernism — pill-shaped CTAs, self-hosted Swiss 721 grotesque paired with Chalet New York editorial serifs, and a deliberately compact high-contrast system that signals confidence over comfort.

colors:
  # Surface & canvas
  background: "#ffffff"
  surface: "#ffffff"
  surface-dark: "#1c1c1c"

  # Ink & text
  ink: "#1c1c1c"
  ink-secondary: "#707070"
  ink-muted: "#c4c4c4"
  ink-inverted: "#ffffff"

  on-background: "#1c1c1c"
  on-surface: "#1c1c1c"
  on-primary: "#ffffff"

  # Brand accent — citizenM red
  primary: "#eb0033"
  primary-hover: "#cc0029"  # was rgb(235,0,51) darkened 10% for hover

  # Borders
  border: "#1c1c1c"
  border-light: "#c4c4c4"
  border-subtle: "#eeeeee"

  # Shadow tints (opaque approximations)
  shadow-soft: "#ebebeb"  # was rgba(0,0,0,0.07) flattened on white canvas — Google format requires hex
  shadow-medium: "#d9d9d9"  # was rgba(0,0,0,0.12) flattened — Google format requires hex

  # Semantic
  error: "#eb0033"

typography:
  display-hero:
    fontFamily: "Chalet-NewYorkNineteenSixty, Chalet New York Nineteen Sixty, Georgia, serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "Chalet-NewYorkNineteenSixty, Chalet New York Nineteen Sixty, Georgia, serif"
    fontSize: 29px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: -0.2px
  heading-sub:
    fontFamily: "Chalet-NewYorkNineteenSixty, Chalet New York Nineteen Sixty, Georgia, serif"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "Swiss721BT-Medium, Swiss-721, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.18
    letterSpacing: 0px
  body:
    fontFamily: "Swiss721BT-Regular, Swiss-721, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body-bold:
    fontFamily: "Swiss721BT-Medium, Swiss-721, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.50
    letterSpacing: 0px
  nav-link:
    fontFamily: "Swiss721BT-Regular, Swiss-721, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Swiss721BT-Medium, Swiss-721, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: 0px
  label-uppercase:
    fontFamily: "Swiss721BT-Regular, Swiss-721, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.08
    letterSpacing: 1.2px
  caption:
    fontFamily: "Swiss721BT-Regular, Swiss-721, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px
  caption-bold:
    fontFamily: "Swiss721BT-Medium, Swiss-721, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: 1.296px

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

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 14px
  pill: 9999px

components:
  # Primary CTA — red pill
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  # Secondary — dark ink pill
  button-secondary:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.ink-inverted}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.ink-inverted}"

  # Ghost / outlined — dark border
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-bold}"
    rounded: "{rounded.none}"
    padding: 8px 0px
  button-ghost-hover:
    textColor: "{colors.primary}"

  # Hotel / room card
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 0px
  card-hover:
    backgroundColor: "{colors.surface}"

  # Booking / search panel
  card-booking:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px

  # Text input
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
  input-error:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.error}"

  # Accordion / FAQ item
  accordion:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-bold}"
    rounded: "{rounded.none}"
    padding: 16px 0px

  # Navigation bar
  nav-bar:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.ink-inverted}"
    typography: "{typography.nav-link}"
    padding: 16px 24px

  nav-link:
    textColor: "{colors.ink-inverted}"
    typography: "{typography.nav-link}"
    padding: 8px 12px

  # Badge / label chip
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-uppercase}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
---

# citizenM Design System

## Overview

citizenM is a brand that refuses to act its price. The hotels are affordable-luxury — thoughtfully designed rooms in prime city locations, priced for mortals — and the website communicates exactly that: bold, self-assured, and a little bit witty. The near-black `{colors.surface-dark}` navigation sits directly against full-bleed hotel photography, grounding the experience in something confidently urban. When the brand accent appears (`{colors.primary}`) it arrives as a hard, saturated red — not a call for attention but a stamp of certainty.

The typographic pairing is genuinely distinctive. Chalet New York Nineteen Sixty, a quirky mid-century reference with softened grotesque geometry, carries all editorial display text. Swiss 721, a clean Helvetica-adjacent workhorse, handles everything functional — nav, body copy, button labels. The result is a small visual tension that reads like a boutique hotel: slightly designed, deliberately characterful, never precious. Display headlines run at 40px 700-weight with tight 1.1 leading; body text opens up to 1.5 for comfortable reading on room descriptions and FAQs.

Where most hotel brands reach for soft gradients and creamy off-whites, citizenM stays in a hard two-tone world. The canvas is white or near-black — nothing in between. Shadows are soft and restrained (opacity 7–12%), letting photography carry the spatial depth. Buttons are always pill-shaped, which gives the otherwise structured grid a single playful note. Uppercase letter-spaced captions at 12px provide the data layer (prices, distances, amenities counts) with a neat Swiss precision that nods to the brand's Dutch roots.

**Key Characteristics:**
- `{colors.primary}` is a single, unshared brand red — reserved for primary CTAs ("find hotels", "book now") and never diluted across decorative use
- Near-black `{colors.surface-dark}` navigation bar creates an immediate high-contrast anchor at the top of every page
- Two self-hosted proprietary typefaces: `{typography.display-hero}` (Chalet New York) for editorial display, `{typography.body}` (Swiss 721) for all functional copy
- Pill-shaped buttons (`{rounded.pill}`) are the system's sole rounded element — everything else is flat or modestly rounded at `{rounded.lg}` (14px)
- Full-bleed photography is the primary content vehicle, displayed edge-to-edge or with `{rounded.lg}` on card crops
- 12px uppercase tracking (`{typography.label-uppercase}`) used for category tags, pricing labels, and amenity counts — a Swiss signal of precision
- Soft shadow vocabulary (7% black opacity) on cards and dropdowns; no heavy elevation anywhere
- Motion at 0.15s–0.25s ease-in-out for color/background transitions — quick, businesslike, no theatrical delays
- Link hover states flash to a Marriott Bonvoy blue (rgb(24,131,253)) — a legacy inheritance from the Marriott integration, non-brand but functionally consistent
- Accordion-heavy FAQ and room-detail patterns — content is systematically collapsed until needed

## Colors

### Primary
- **Canvas White** (`{colors.background}`): The default page surface for all content sections, cards, and forms.
- **Near-Black** (`{colors.surface-dark}`): The top navigation background and dark-canvas sections. Carries near-black `{colors.ink}` density on white surfaces.
- **Ink Black** (`{colors.ink}`): Primary text across all light surfaces — headings, body, labels, nav on dark.

### Brand Accent
- **citizenM Red** (`{colors.primary}`): The system's single accent. Concentrated on primary CTAs, the "find hotels" button, active form states, and error states. Also serves as the brand's semantic error color. Never used decoratively.
- **Red Hover** (`{colors.primary-hover}`): A 10% darkened press/hover state for primary actions.

### Text Hierarchy
- **Secondary Ink** (`{colors.ink-secondary}`): Accordion chevrons, secondary metadata, de-emphasized labels.
- **Muted Ink** (`{colors.ink-muted}`): Disabled states, placeholder text, low-priority captions.
- **Inverted Ink** (`{colors.ink-inverted}`): White text on dark surfaces and primary button labels.

### Borders & Dividers
- **Dark Border** (`{colors.border}`): Tab underlines, active selection strokes, strong dividers.
- **Light Border** (`{colors.border-light}`): Input field strokes in their default state.
- **Subtle Border** (`{colors.border-subtle}`): Hairline rules between rows and sections on white surfaces.

### Shadow Tints
Shadows are kept deliberately light — `{colors.shadow-soft}` (7% black equivalent) on cards and panels, `{colors.shadow-medium}` (12% black equivalent) on dropdowns and modals. The system reads as nearly flat.

## Typography

### Font Family
- **Display / Editorial**: `Chalet-NewYorkNineteenSixty` — a proprietary mid-century grotesque-serif hybrid, self-hosted as `Chalet-NewYorkNineteenSixty.woff2`. Fallbacks: `Georgia, serif`.
- **Functional / Body**: `Swiss721BT-Regular` / `Swiss721BT-Medium` — a Bitstream-licensed Swiss grotesque, self-hosted as `Swiss721BT-Regular.woff2` and `Swiss721BT-Medium.woff2`. Fallbacks: `Helvetica Neue, Arial, sans-serif`.
- **Icon font**: `mi-icons.woff2` — custom icon glyph font for UI iconography.

### Hierarchy

The complete type scale is declared in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | Page headlines — "a new breed of hotels in the center of it all" |
| `heading-section` | Section headers — "Our locations", "citizenM benefits" |
| `heading-sub` | Card titles, FAQ question labels, modal headers |
| `body-large` | Lead paragraph copy, feature descriptions |
| `body` | Standard body copy, room descriptions, form labels |
| `body-bold` | Emphasized inline copy, ghost button labels, accordion toggles |
| `nav-link` | Navigation items, footer links, secondary utility links |
| `button-ui` | Primary and secondary CTA button labels |
| `label-uppercase` | Uppercase spaced tags — amenity counts, category labels, pricing units |
| `caption` | Metadata — dates, distances, star ratings |
| `caption-bold` | Tracked bold captions on dark surfaces, award / badge labels |

### Principles
- Two families, two jobs: Chalet New York owns all editorial moments, Swiss 721 owns all functional moments — they never swap roles.
- Display text runs at weight 700 with line-heights of 1.10 — tight, confident, not decorative.
- Body copy at 1.50 line-height maintains comfort in long room descriptions and FAQ text.
- Uppercase tracking (`{typography.label-uppercase}`) at 1.2px provides clean data-layer precision for short labels.
- No all-caps transforms on body or heading text — only utility labels and badge-style chips.

## Layout

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

Spacing leans generous on section vertical rhythm — `2xl` (48px) and `3xl` (64px) between sections — but tight on intra-component density. Cards pack information at `sm`–`md` gaps inside. The hotel lobby effect: open at a glance, dense when you look closer.

### Grid & Container
- Max content width: ~1440px on wide desktop
- Content inset: 16px mobile, 24–48px tablet, 48–80px desktop
- Room grid: 3-column on desktop, 2-column tablet, 1-column mobile
- Location/city grid: 4-column on desktop, 2-column on tablet
- Full-bleed hero: 100vw image with overlay text anchored bottom-left

### Whitespace Philosophy
- Section-level spacing is generous: sections breathe at 48–64px vertical rhythm
- Card internal padding is compact at 16–24px, keeping hotel-room grids dense enough to compare
- The system never feels airy or editorial-magazine-white — it's controlled whitespace, not maximalist

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Navigation bar, page backgrounds, full-bleed sections |
| Subtle (Level 1) | `0px 4px 20px {colors.shadow-soft}` | Hotel cards, search panels, booking widgets |
| Card (Level 2) | `0px 6px 26px {colors.shadow-soft}` | Dropdown menus, expanded accordions |
| Elevated (Level 3) | `0px 1px 15px {colors.shadow-medium}` | Modals, date pickers, overlays |
| Focus Ring | `2px solid {colors.border}` | Active tabs, focused inputs |

**Shadow Philosophy**: citizenM's elevation system is deliberately understated. At 7% opacity on a white canvas, card shadows are more a suggestion of lift than a statement of it. The brand communicates hierarchy through contrast and typography, not shadow depth — a restraint that keeps the grid clean and lets photography dominate.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Flat tab underlines, dividers, nav bar |
| `sm` | 4px | Input fields, tooltips, small utility elements |
| `md` | 8px | Modals, filter panels, dialog containers |
| `lg` | 14px | Hotel room cards, image crops in grid views |
| `pill` | 9999px | All CTA buttons — the system's signature shape |

The shape system is binary in intent: everything functional is flat or mildly rounded, while every interactive CTA is a pill. This gives buttons an unmistakable identity at any scale — you always know what you can tap.

## Components

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

### Button Variants
- **`button-primary`** — citizenM Red (`{colors.primary}`) pill, white bold label at 18px. Used for "find hotels", "book", and all primary conversion actions. Hover darkens the fill to `{colors.primary-hover}` at 0.15s ease-in-out.
- **`button-secondary`** — Near-black pill (`{colors.surface-dark}`) with white label. Used for secondary actions like "view all hotels" and "learn more".
- **`button-ghost`** — Plain underline-style link button with no background. Used for tertiary actions, accordion toggles, and "back" navigation. Hover shifts text to `{colors.primary}`.

### Cards
- **`card`** — White surface, `{rounded.lg}` on image crop, `{colors.shadow-soft}` shadow. Room details stack below the image: room name in `{typography.heading-sub}`, amenities in `{typography.caption}`, price in `{typography.body-bold}`.
- **`card-booking`** — Wider booking confirmation or search-results panel, 24px padding, `{rounded.lg}`.

### Inputs & Forms
- **`input`** — White surface, 1px `{colors.border-light}` stroke, `{rounded.sm}` corners. Focuses to `{colors.border}` (dark) stroke. Errors shift label to `{colors.error}`.
- **Date range picker** — Custom Marriott Bonvoy-integrated calendar. Selected range uses `{colors.primary}` fill on day cells with white numerals.

### Navigation
- **`nav-bar`** — Fixed near-black header (`{colors.surface-dark}`), white nav links, citizenM wordmark left, language selector + Marriott Bonvoy link right. Anchored and non-scrolling.
- **`nav-link`** — 14px white Swiss 721 labels, 0.15s ease-in-out hover transitions.

### Accordion
- **`accordion`** — FAQ and room-features pattern. Bold question label with a chevron toggle. Collapses/expands at 0.4s ease-out. Bottom-border rule in `{colors.border-subtle}` separates each item.

### Badges & Labels
- **`badge`** — citizenM Red pill, white uppercase label in `{typography.label-uppercase}`. Used for "new location", "best value", and availability flags. Scarce — one per card surface maximum.

## Do's and Don'ts

### Do
- Use `{colors.primary}` exclusively for primary CTAs and conversion actions — its scarcity is what makes it a clear signal.
- Pair Chalet New York (`{typography.display-hero}`) with Swiss 721 (`{typography.body}`) strictly by context: editorial display vs. functional copy.
- Make every interactive call-to-action a pill (`{rounded.pill}`) — it is the single shape that identifies a tappable primary action.
- Keep the navigation near-black (`{colors.surface-dark}`) — the high contrast anchor is an intentional brand moment.
- Use generous vertical section spacing (`{spacing.2xl}`–`{spacing.3xl}`) to let room photography breathe between content blocks.
- Apply `{typography.label-uppercase}` (1.2px tracking, 12px, 500 weight) for pricing units, amenity tags, and location category labels — it reads as precision data, not decoration.
- Keep shadows in the 7% opacity range (`{colors.shadow-soft}`) — elevation is suggested, never heavy.
- Let photography be the primary depth layer — full-bleed images carry visual richness; the chrome stays clean.

### Don't
- Don't use `{colors.primary}` for decorative accents, icon fills, or non-CTA highlights — diluting the red destroys the system's action grammar.
- Don't introduce border-radius values between `{rounded.sm}` and `{rounded.pill}` for buttons — the binary contrast between small-radius containers and full-pill buttons is deliberate.
- Don't place text inside hero photographs without a dark gradient scrim overlay (linear-gradient from `rgba(0,0,0,0.62)` to transparent).
- Don't mix Chalet New York and Swiss 721 at the same hierarchy level — the pairing works because each typeface has a dedicated role.
- Don't use mid-gray backgrounds as page surfaces — the system is white canvas or near-black, never beige or off-white.
- Don't over-layer shadows — the system uses a single drop per elevation level, never stacked multi-shadow treatments.
- Don't use all-caps text on headings or body — uppercase is reserved for `{typography.label-uppercase}` short tags only.
- Don't adjust link hover color to anything other than the inherited Bonvoy blue or `{colors.primary}` — the system's hover states are deliberately limited to two values.

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <425px | Single-column layout, 16px edge padding, nav collapses to hamburger |
| Mobile | 425–768px | Single-column, hotel grid becomes 1-up cards, booking widget full-width |
| Tablet | 768–1024px | 2-column hotel grid, nav links partially visible, horizontal search bar |
| Desktop | 1024–1440px | 3-column hotel grid, full nav bar, sticky search form |
| Large Desktop | >1440px | Max-width container centers at 1440px, 3–4 column grids |

### Touch Targets
- All CTA pill buttons are minimum 48px tall — well within touch comfort range.
- Accordion toggles span the full row width for easy mobile tapping.
- Card-level click targets cover the entire card area (not just the image or CTA text).

### Collapsing Strategy
- **Navigation**: fixed near-black bar on all breakpoints; hamburger menu on mobile for secondary links.
- **Hero**: full-bleed image with bottom-left anchored text at all sizes; image height reduces from ~70vh on desktop to ~50vh on mobile.
- **Hotel grid**: 3 → 2 → 1 column at 1024 → 768 → 425px breakpoints.
- **Booking form**: Horizontal date + destination row on desktop; stacks vertically (full-width fields) on mobile.
- **Footer**: 4-column link grid collapses to 2-column at 768px, single-column below 425px.

### Image Behavior
- Room photography always maintains 16:9 or 3:2 crops in card contexts; hero images stretch to full viewport width.
- Lazy loading applied universally; images served from Marriott CDN with responsive sizing parameters.
- No art-direction crops — the same image scales across breakpoints.

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Primary text: `{colors.ink}`
- Dark surface / nav: `{colors.surface-dark}`
- Brand CTA: `{colors.primary}`
- Secondary text: `{colors.ink-secondary}`
- Border: `{colors.border}`
- Muted: `{colors.ink-muted}`
- On dark: `{colors.ink-inverted}`

### Example Component Prompts

- "Create a primary 'find hotels' CTA button: citizenM Red background (`{colors.primary}`), white label in Swiss 721 700-weight at 18px, pill shape (`{rounded.pill}`), 12px top/bottom padding, 24px left/right padding. On hover, transition background to `{colors.primary-hover}` at 0.15s ease-in-out."
- "Build a hotel room card: full-width 16:9 photography crop with `{rounded.lg}` (14px) radius, no container border; below the image stack room name in Chalet New York 22px 700 (`{typography.heading-sub}`), a row of amenity icons with 12px uppercase Swiss 721 labels (`{typography.label-uppercase}`), and a price line in `{typography.body-bold}`. Apply a single `0px 4px 20px {colors.shadow-soft}` card shadow."
- "Design a top navigation bar: near-black background (`{colors.surface-dark}`), citizenM wordmark on the far left, white Swiss 721 500-weight nav links center-right, language selector and Marriott Bonvoy link on the far right. Fixed position, height 64px, 24px horizontal padding."
- "Render a full-bleed hero section: 100vw × 70vh photography with a bottom-anchored dark gradient scrim (linear-gradient from rgba(0,0,0,0.62) at bottom to transparent at 50% height). Over the scrim, place an H1 headline in Chalet New York 40px 700 white text (`{colors.ink-inverted}`), followed by a citizenM Red pill CTA (`{components.button-primary}`)."
- "Create an FAQ accordion: each row has a question in `{typography.body-bold}` (Swiss 721 16px 700 `{colors.ink}`) with a chevron toggle on the right, separated by a 1px `{colors.border-subtle}` bottom border. On expand, reveal answer paragraph in `{typography.body}` (16px 400, 1.5 line-height) at 0.4s ease-out. No background change on expand — the row stays `{colors.background}`."
- "Build a location search input field: white background (`{colors.surface}`), 1px `{colors.border-light}` stroke, 4px border-radius (`{rounded.sm}`), 12px × 16px padding, body text in Swiss 721 16px 400 (`{typography.body}`). On focus, switch stroke to 2px `{colors.border}` (near-black)."

### Iteration Guide

1. Start with the near-black nav (`{colors.surface-dark}`) anchoring the top — it sets the whole tone.
2. Use `{colors.primary}` (citizenM Red) for exactly one CTA per viewport section — scarcity makes it work.
3. Apply Chalet New York to any headline over 20px; apply Swiss 721 to everything else. Do not mix within the same hierarchy level.
4. Keep shadows in the 7% opacity range — the system reads as flat until you look at a specific card.
5. Every CTA button is a pill (`{rounded.pill}`); every container rounds at `{rounded.lg}` or less. Never pill a card.
6. Use `{typography.label-uppercase}` (12px, 500, 1.2px tracking) for any data label that isn't a sentence — room types, pricing units, amenity flags, city categories.
7. Transitions at 0.15s–0.25s ease-in-out; anything slower feels lethargic for this brand's pace.

---

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