---
version: alpha
name: "citizenM"
description: "Urban hotel storytelling with bold lowercase display and bright booking accents."
colors:
  bg: "#ffffff"
  text: "#1c1c1c"
  brand: "#eb0033"
  on-brand: "#ffffff"
  accent: "#ff2958"
  surface: "#f4f4f4"
typography:
  display:
    fontFamily: "ChaletNewYorkNineteenSixty"
    fontSize: "72px"
    lineHeight: 1.6
    letterSpacing: "-0.025em"
  body:
    fontFamily: "Swiss-721"
    fontSize: "16px"
    lineHeight: 1.6
  mono:
    fontFamily: "JetBrains Mono"
rounded:
  button: "8px"
  card: "14px"
  pill: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "32px"
  xl: "64px"
---

## Overview

## Overview

The current citizenM brand page lives within Marriott and pairs a compact global shell with an assertive hotel-interior hero. Lowercase display text, bright pink actions, and a visible destination/date tool make the experience recognizably hospitality-focused.

## Colors

The hero action uses #ff2958 with dark #1c1c1c text, while the booking action separately uses #eb0033 with white. White and #f4f4f4 define the shell and search region. Preserve these two accent roles instead of collapsing them into one approximate pink.

## Typography

ChaletNewYorkNineteenSixty supplies the 40px desktop and 30px mobile display at weight 500. Swiss-721 supplies body and booking controls. Lowercase titles are an editorial convention, not permission to lowercase place names or user-entered travel details.

## Layout

The white Marriott/citizenM shell precedes full-width interior imagery, followed immediately by the booking tool and an explanatory section. Mobile reduces the header to compact brand and account controls while keeping destination and date selection together.

At 390px the hero becomes a short interior crop with 30px display text. Destination and dates remain side by side inside the search surface. Allow narrow-screen labels to wrap while preserving separate targets and a clear reading order.

## Elevation & Depth

Interior photography supplies most of the depth. The booking region uses a restrained elevated white surface against light gray. Captions need a local contrast backing; avoid darkening every property image until room details become hard to inspect.

## Shapes

Primary actions use a measured 52px radius. The booking container is softly rounded but section bands remain unframed. Do not wrap the hero in an extra card or apply the booking container radius to every hotel image.

## Components

The hero offers an accent pill leading to hotels. A separate booking region holds destination and dates with icon-plus-label controls. Distinguish navigation from form submission, and keep the named hotel/location caption associated with its photograph.

A booking flow should keep dates and destination visible when validation fails. No booking or account submission was performed. Recommended behavior includes announcing date selection and retaining search values when switching between property exploration and booking.

Give destination and date controls explicit labels; icons are supplemental. Keep the hotel caption readable over photography. Test the two pink/text combinations independently and make date selection fully keyboard-operable in any derived implementation.

Use concise, informal hotel language while keeping room, location, and booking details precise. Lowercase brand voice should not remove proper names or price qualifications. Do not copy a photographed hotel caption onto unrelated properties.

The audited shell is light with photography carrying dark regions. It is not a verified dark booking theme. An alternate implementation must retest the search tool, date picker, and pink action roles independently.

The source URL is Marriott's citizenM brand page after citizenm.com redirected there. This is intentionally distinct from the general Marriott entry and does not claim to preserve the retired standalone citizenM website or its old design system.

## Do's and Don'ts

Keep the destination/date task near the hero, preserve both pink roles, and identify real hotel photography. Avoid inventing the former standalone design, using lowercase on user data, or hiding property details beneath heavy image overlays.

Create a citizenM-inspired hotel brand page inside a restrained global shell, with bold lowercase display, inspectable interior photography, pink actions, and a destination/date tool. Review mobile booking labels and distinguish this scope from the general Marriott system.