Marriott Brand Design System Deep Dive

1. Brand Overview

Marriott’s digital brand presence feels exactly like you’d expect from a global hospitality leader — safe, polished, and premium without screaming luxury. The design system on their main site isn’t trying to be flashy; it’s a controlled environment that’s made to scale across dozens of property types and sub-brands. The vibe: understated elegance, built for conversion.

They lean heavily on neutral tones — deep charcoal (#1c1c1c), pure white (#ffffff), and mid-greys — which keeps the interface clean and lets photography do the emotional heavy lifting. This makes sense for hospitality: the brand wants the user’s mental image to be about the destination, not the UI chrome.

Typography is tight and uniform. The entire system rides on Swiss‑721, a geometric grotesque that’s corporate without being cold. It’s a workhorse font — high legibility, plenty of weight options, and predictable rendering.

Interaction design is restrained. Buttons are mostly pill-shaped, with generous radii (up to 52px) and subtle hover/focus states. The rounded shapes soften the otherwise stark color palette. Shadows are used sparingly — Marriott is not a “material design” brand. Depth is created more through contrast and spacing than drop shadows.

The layout system is built on an 8px base grid, with some occasional 4px increments for micro-alignment. Breakpoints are numerous — they’re clearly targeting a wide range of device widths with pixel-specific tuning, not just the usual mobile/tablet/desktop triad.

This design system is for a global team that needs a consistent backbone while allowing photography, brand sub-identities, and localized content to shine. It’s the scaffolding, not the star of the show. That’s deliberate.

2. Color System

2.1 Primary Colors

The semantic primary color is rgb(28, 28, 28) (#1c1c1c). This is deep charcoal, almost black, but softer. It’s the anchor color — used for text, primary button backgrounds, and key UI chrome. Marriott’s choice here is practical: black-adjacent colors read as premium and pair well with photography.

Secondary is transparent (rgba(0, 0, 0, 0)), which tells you they use a lot of layered backgrounds and rely on imagery or gradients, especially in hero sections.

Compared to competitors like Hilton (which uses blues) or Hyatt (which uses light neutrals), Marriott’s primary is darker and more formal. It signals stability and timelessness.

2.2 Complete Palette

2.3 Color Relationships

The key relationship is white text on charcoal/black backgrounds — high contrast, WCAG AAA compliant. Grey tones are stepped to allow clear hierarchy: #707070 for secondary text, #c4c4c4 for disabled. Accent colors (orange, blue) are rare and offer strong contrast against the neutral base.

Dark mode isn’t a separate mode here — the palette is already dark-heavy. If they wanted a light mode, they’d need more mid-tone backgrounds.

2.4 Usage Guide

• Works well: White text on #1c1c1c or #000000. Accent orange on white backgrounds for emphasis. Blue accents for interactive elements.
• Avoid: Using #ff8d6b for body text — it’s too low contrast on white and will fail accessibility. Don’t pair #707070 with #c4c4c4 — too little contrast between them.

3. Typography

3.1 Font Families

Marriott uses Swiss‑721 exclusively, no fallbacks listed in the data. No Google Fonts or Adobe Fonts detected — likely self-hosted. This is a clean sans-serif, geometric, and consistent across weights.

3.2 Type Scale

(The scale continues all the way down to 0px — there are micro-labels and possibly hidden elements with zero size.)

3.3 Hierarchy

They build hierarchy mostly through weight changes rather than massive jumps in size — e.g., 40px headings can be 700 or 500 weight depending on context. Uppercase is used sparingly, mostly for buttons and small headings. This keeps the tone formal without shouting.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid.

Common values:

4.2 Layout

Breakpoints are granular: from tiny (5px, 98px) up to 1200px. This suggests a responsive system tuned for dozens of device classes, possibly even in-app contexts. No max container width is given, but 1200px breakpoint likely marks large desktop.

5. Visual Elements

Border Radius

Ranges from 0px to 100% (full circle). Heavy use of 8px (list items), 15px (cards), and pill shapes (50% radius for avatars/buttons).

Notable: 52px radius for large pill buttons — these are visually distinct CTAs.

Shadows

Minimal use. Most common: rgba(0, 0, 0, 0.1) 0px 2px 10px. This is soft and subtle. No heavy drop shadows — depth is understated.

Borders

Mostly 1px solid lines in greys or white, used for separation rather than decoration. Some unusual combinations like “none none solid” for tablist items.

6. Components

6.1 Buttons

Variant 1 — White outline pill

• Default: transparent bg, white text, border: 1px solid #fff, radius 20px, padding 8px 16px.
• Hover: bg #555555, border 0.0625rem solid #303030, rotate(-45deg) (!), opacity 0.9.
• Focus: outline 2px solid black, bg rgb(30, 174, 219), rotate(-45deg).

Variant 2 — Solid charcoal pill

• Default: bg #1c1c1c, white text, radius 50px, padding 0px 24px.
• Hover: same rotate(-45deg) effect, bg #555555.
• Focus: same blue bg (rgb(30, 174, 219)).

Variant 3 — Solid white pill

• Default: bg white, text #1c1c1c, radius 52px.
• Hover: text orange-brown (rgb(184, 76, 22)), rotate(45deg).
• Focus: outline dashed 1px grey, bg blue focus color.

6.2 Links

Four variants:

• Dark text (#1c1c1c) bold — hover to blue (rgb(24, 131, 253)).
• White text — hover to blue.
• Grey text (#707070) — hover to blue.
• Light grey text (#c4c4c4) — hover to blue.

No underlines in any state.

6.3 Forms

Text inputs (div specificType): transparent bg, charcoal text, no border, no radius. Minimalistic — likely styled through container elements.

6.4 Cards

Radius often 15px, sometimes 14px. Shadows minimal — likely relying on spacing and background contrast.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-primary-charcoal: #1c1c1c;
  --color-black: #000000;
  --color-grey-112: #707070;
  --color-grey-196: #c4c4c4;
  --color-accent-orange: #ff8d6b;
  --color-accent-blue: #007aff;
  --color-error-red: #d0021b;
  --color-focus-blue: rgb(30, 174, 219);

  /* Typography */
  --font-family-primary: "Swiss-721";
  --font-size-h1-lg: 3.80rem;
  --font-size-h1: 2.50rem;
  --font-size-body: 1.00rem;
  --font-weight-bold: 700;
  --font-weight-medium: 500;
  --font-weight-regular: 400;

  /* Spacing */
  --space-1: 1px;
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-56: 56px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-card: 15px;
  --radius-pill: 50%;
  --radius-large-pill: 52px;

  /* Shadows */
  --shadow-soft: rgba(0, 0, 0, 0.1) 0px 2px 10px;
}

8. AI Coding Assistant Prompt

# Marriott Design System Specification

System Prompt:
You are a Marriott design expert. Build UIs matching their visual language exactly.

Brand Context:
Marriott’s design system is neutral, premium, and photography-first. Typography is uniform and sans-serif. Buttons are pill-shaped, shadows are minimal, and the color palette is dark-neutral with rare accents.

Color Palette:
- White: #ffffff — Page backgrounds, text over dark, borders
- Primary Charcoal: #1c1c1c — Primary UI, headings, body text
- Black: #000000 — Icons, selectors, outlines
- Grey 112: #707070 — Secondary text
- Grey 196: #c4c4c4 — Disabled states
- Accent Orange: #ff8d6b — Highlights
- Accent Blue: #007aff — Carousel controls
- Error Red: #d0021b — Validation errors
- Focus Blue: rgb(30, 174, 219) — Focus backgrounds

Typography:
Font: "Swiss-721"
- H1 Large: 60.8px / 3.80rem, 400, lh 0.39 — Hero headings
- H1: 40px / 2.50rem, 700, lh 1.10 — Section titles
- Body: 16px / 1.00rem, 400, lh 1.50 — Paragraph text
- Button: 18px / 1.13rem, 700, lh 1.33 — CTA text
- Caption: 14px / 0.88rem, 500, lh 1.50 — Small labels

Spacing & Grid:
Base: 8px grid
Scale: 1px, 4px, 8px, 16px, 24px, 32px, 56px
Button padding: 8px 16px or 0px 24px
Card padding: 16px–32px

Border Radius:
- none: 0px — data tables
- sm: 4px — inputs
- md: 8px — list items
- card: 15px — cards
- pill: 50% — avatars/buttons
- large-pill: 52px — primary CTAs

Shadows & Depth:
- Soft: rgba(0, 0, 0, 0.1) 0px 2px 10px — cards, modals
- Minimal — use spacing and contrast for separation

Component Specifications:

Primary Button:
Default: bg #1c1c1c, color #fff, padding 0px 24px, radius 50px, border none
Hover: bg #555555, border 0.0625rem solid #303030, rotate(-45deg)
Focus: outline 2px solid #000, bg rgb(30, 174, 219)
Active: border none
Disabled: opacity 0.5

Secondary Button:
Default: transparent bg, white text, border 1px solid #fff, radius 20px, padding 8px 16px
Hover: bg #555555, rotate(-45deg)
Focus: bg rgb(30, 174, 219), outline 2px solid #000

Navigation Links:
Default: color #1c1c1c, weight 700
Hover: color rgb(24, 131, 253)
No underline

Input Fields:
Default: transparent bg, color #1c1c1c, border none, radius 0px
Focus: styled via container — no direct change

Layout & Responsive Rules:
Breakpoints: 0px, 350px, 768px, 992px, 1200px (plus many granular widths)
Page padding: multiples of 8px
Grid gap: 16px–32px

Interaction Rules:
Transitions: ~150ms ease on hover/focus
Focus indicators: solid/dashed outlines
Rotate effects on button hover/focus

DO List:
- Use only palette colors
- Maintain 8px grid
- Keep buttons pill-shaped
- Use Swiss-721 everywhere
- Maintain tight line heights for headings
- Use accent colors sparingly

DON'T List:
- No random shadows
- No mixed corner styles
- No custom fonts
- No underline on links
- No non-palette colors

Code Examples:

.btn-primary {
  background: #1c1c1c;
  color: #ffffff;
  padding: 0px 24px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 18px;
  border: none;
  transition: background 150ms ease, transform 150ms ease;
}
.btn-primary:hover {
  background: #555555;
  transform: rotate(-45deg);
}
.btn-primary:focus {
  outline: 2px solid #000;
  background: rgb(30, 174, 219);
}

.card {
  background: #ffffff;
  border-radius: 15px;
  padding: 16px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px;
}

.input {
  background: transparent;
  color: #1c1c1c;
  border: none;
  border-radius: 0;
  padding: 8px;
}

9. Summary

TL;DR — Marriott’s design system is neutral, precise, and built for scale. Dark neutrals, Swiss-721, pill buttons, and an 8px grid keep it consistent while letting imagery lead.

Brand Keywords:

• premium-neutral
• photography-first
• corporate-minimal
• pill-centric
• restrained-interactions