Marriott Bonvoy Design System

Overview

Marriott Bonvoy's homepage is an inversion of the hospitality-booking convention. Inverted primary: the load-bearing CTA ("Find Hotels") renders #1c1c1c fill with #ffffff text at 52px pill radius ({rounded.pill-cta}) and 18px / 700 Swiss-721 — the opposite of the bright-accent CTAs Booking, Expedia, and Airbnb use to anchor their search bars. The coral that most people associate with Bonvoy ({colors.accent-coral} — #ff8d6b) is scoped to just two CSS custom properties — --t-accent-color and --t-icon-color-decorative — and renders only 12 times across the page, used as small icon strokes and decorative ornaments rather than on any button surface.

Type runs Swiss-721 for everything — display, body, navigation, captions, microcopy. There is no separate display family. The variable comes from three weight steps (400, 500, 700) and one tracking departure: the 12px uppercase overline at letterSpacing: 1.296px (the next-most-tracked label sits at 1.2px). The hero h2 at 40px / 700 ("Explore the Beauty of Spring with SIXT") works because the photography behind it — sunset desert highway, woman driving with hair in the wind — is doing the persuasion. The chrome stays quiet.

The geometric language resolves to two corner anchors. Every button — primary, secondary, tertiary — uses the 52px pill ({rounded.pill-cta}) declared as --t-button-border-radius. Cards and tiles sit at 16px (23 occurrences) with a 14px sibling (20 occurrences) for inset image plates inside cards. Where most travel marketplaces lean on rounded-rectangle CTAs at 8–12px, Marriott picks a fully-capsule pill and pairs it with squarer 14–16px cards — the contrast reads as hotel-lobby signage paired with editorial property tiles.

Key Characteristics:

• Inverted primary CTA: {component.button-primary} is #1c1c1c fill, white text — declared by --t-button-primary-bg-color: #1c1c1c and used across "Find Hotels", "Book Now", "Search Rates".
• Single-typeface system: Swiss-721 carries every tier; weight 400/500/700 and tracking (normal, 1.2px, 1.296px) are the only voice levers.
• Scarcity coral: {colors.accent-coral} (#ff8d6b) appears in 12 page occurrences as decorative icon strokes — never as a CTA background, never as link text.
• Two-radius rhythm: 52px pill on every button, 16px card corner across destination tiles, property cards, and vacation-rental tiles.
• Inverted search dropdown: {component.search-input-dropdown} uses #1c1c1c background with #ffffff foreground — the search field reads as a primary action band rather than a passive form input.
• Hairline-led rules: a single 1px #c4c4c4 line (--t-horizontal-vertical-rule) carries every section separator and form-field underline — no shadow, no card border, no gradient.
• Photography-first tiles: destination cards present a full-bleed image with a 16px corner, a 16px label band beneath, no overlay text, no shadow — the image alone carries the visual weight.
• 16px base spacing rhythm: 23 occurrences of 16px gaps, 19 of 8px, 17 of 4px; section bands run 32px vertical, generous-but-tight for a marketplace that wants density per scroll.

Colors

Brand & Accent

• Accent Coral ({colors.accent-coral} — #ff8d6b): frequency 12. Used as text (6), border (6). Declared in --t-accent-color and --t-icon-color-decorative. The Bonvoy voltage — scoped to icon strokes and small ornament moments, never a CTA background.
• Accent Icon ({colors.accent-icon} — #ff8d6b): same hex, semantic alias for icon-color-decorative usage in the points-icon, the Bonvoy ribbon glyph, and the rate-promo asterisk.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 828. Used as text-on-dark (405), border (403), gradient (10), background (10). The dominant surface — the homepage is 80%+ white, with --t-brand-bg-color declared as pure white globally.
• Surface Card ({colors.surface-card} — #ffffff): same hex, semantic alias for the destination tile, property card, and vacation-rental tile base.
• Surface Soft ({colors.surface-soft} — #eeeeee): frequency 3. Used as background (1), border (2). Scoped to --t-icon-btn-focus-bg-color and --t-icon-btn-primary-bg-color — the circular icon-button rest state.
• On Primary / On Dark ({colors.on-primary} / {colors.on-dark} — #ffffff): white text on every dark surface — the inverted CTA, the search dropdown input, the hero overlay text.

Ink & Surface-Control

• Primary / Ink ({colors.primary} — #1c1c1c): frequency 757. Used as text (366), border (356), background (35). Declared in 18 CSS variables including --t-button-primary-bg-color, --t-brand-fg-color, --t-interactive-accent-color, --t-link-text-color. The load-bearing color of the system — not coral.
• Surface Control Dark ({colors.surface-control-dark} — #1c1c1c): same hex, semantic alias for --t-color-control-background — the dark fill of the search input dropdown and the inverted CTA backplate.
• Ink Overlay ({colors.ink-overlay} — #1c1c1c): same hex, semantic alias for the 52% scrim declared at --t-color-control-background-overlay: rgba(28,28,28,.52) — applied as a dark wash over hero photography to keep white headlines readable.

Hairlines & Borders

• Hairline ({colors.hairline} — #c4c4c4): frequency 71. Used as text (33), border (33), gradient (5). Declared in --t-horizontal-vertical-rule — the single hairline tone for section separators, form-field underlines, and card 1px borders.
• Border Rule ({colors.border-rule} — #c4c4c4): same hex, semantic alias for the divider-rule component.

Text

• Ink Muted ({colors.ink-muted} — #707070): frequency 64. Used as text (32), border (32). Declared in --t-form-label-color, --t-brand-alt-color, --t-overline-normal-color. Form labels, overline meta text, "View all" links.
• Form Label ({colors.form-label} — #707070): same hex, semantic alias for the uppercase 12px form-label component above input fields.

Scrim & Shadow

• Scrim Overlay ({colors.scrim-overlay} — #000000): frequency 40. Used as shadow (14), gradient (22), text (2), border (2). The black-base for the 52% dark scrim wash applied over hero photography, declared as rgba(28,28,28,.52) at render time.
• Shadow Base ({colors.shadow-base} — #000000): same hex, semantic alias for the rare drop-shadow on dropdown menus (--t-icon-btn-hover-bg-color resolves to pure black).

Semantic

• Error ({colors.error} — #d0021b): zero page occurrences in the captured surfaces. Declared in --t-form-error-color; reserved for form-validation messages on the booking flow.
• Carousel Blue ({colors.carousel-blue} — #007aff): zero page occurrences. Declared in --swiper-theme-color; reserved for active-dot color in the destination-tile carousel. Not part of the brand voltage — it inherits from the Swiper.js default.

Typography

Font Family

The system runs Swiss-721 for everything — display, body, navigation, captions, microcopy. The CSS declares it as --t-title-font-family, --t-font-family, and --t-base-font-family, all pointing at the same family. Fallbacks walk Helvetica, Arial, sans-serif. There is no separate display face; the variable comes from weight and tracking, not from family swap.

Hierarchy

Principles

Weight as voice: Marriott runs only three weights — 400, 500, 700 — and skips the 600 that most type ladders include. The result is a visible step from body (500) to heading (700) with no soft middle tier. Where most marketplaces use a 500/600/700 ladder for hierarchical comfort, Marriott picks the contrast move — body recedes, headings declare.

Tracking as overline: the only place tracking departs from normal is the 12px uppercase overline at 1.296px ({typography.overline-md}) and the 12px form label at 1.2px ({typography.overline-sm}). Both function as small-caps substitutes — the Swiss-721 grotesque doesn't ship a small-caps cut, so tracking carries the typographic role that a serif system would hand to small caps.

Note on Font Substitutes

If Swiss-721 is unavailable, Helvetica Now is the closest licensed match (it's the contemporary Swiss-721 sibling) and Inter at weight 400/500/700 is the closest open-source substitute. Akzidenz-Grotesk is a closer historical match but is a licensed face. Never substitute Roboto or Open Sans — both are humanist grotesques and will shift the brand from Swiss-modernist hospitality to generic SaaS.

Layout

Spacing System

• Base unit: 4px (with 8px micro-step).
• Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.base} 16px · {spacing.md} 24px · {spacing.lg} 32px · {spacing.xl} 40px · {spacing.xxl} 52px.
• Dominant rhythm: 16px (23 occurrences) for card internal padding and inter-tile gutters; 8px (19 occurrences) for inline element gaps; 4px (17 occurrences) for chip and tag micro-padding.
• Property-card padding: the asymmetric 24px 0px 24px 24px (11 occurrences in the extraction) — top-bottom-left padding on the content panel, with the right edge flush so the image plate can run edge-to-edge inside the card's 16px rounded clip.

Grid & Container

• Max content width: the homepage centers a ~1280px container with full-bleed hero photography behind it; the hero h2 and search dropdown sit on a 770px reading column inside the 1440px viewport.
• Destination-tile grid: 4-column at desktop with a 16px gutter; each cell holds a full-bleed photo, a 22px h3 destination label, and a single-line rate caption.
• Property-card grid: 3-up at desktop, 2-up at tablet, 1-up at mobile; the asymmetric card padding (24px on three sides, 0px right) keeps the rounded photo plate visually connected to the card edge.
• Vacation-rental rail: horizontal scroll with 3 tiles visible above the fold; each tile carries a 16px rounded photo, a 22px destination name, and a "from $X / night" line.

Whitespace Philosophy

Marriott runs 32px section bands (10 occurrences) between major content rails — tighter than the 64–80px most SaaS marketing pages use, but wider than the 16–24px most marketplace listing pages use. The result is a hybrid: the homepage reads like editorial (generous between sections) but the property grids inside each section read like a marketplace (dense, with 16px gutters).

Elevation & Depth

The system has no shadow tier. Depth comes from three moves:

• Inversion — the dark CTA ({component.button-primary}) on a white canvas reads as elevated through pure tonal contrast.
• Hairline borders — 1px {colors.hairline} rules separate sections and underline form fields, doing the work that drop shadows handle in shadow-heavy systems.
• Photography overlay — hero bands apply a 52% {colors.ink-overlay} scrim wash (--t-color-control-background-overlay: rgba(28,28,28,.52)) over destination photography so that white headlines ({typography.display-hero} at 40px / 700) remain readable. The scrim is the only "elevation" device in the homepage chrome.

There is essentially no box-shadow on cards, on buttons, or on dropdowns. The single shadow-base hex ({colors.shadow-base} — #000000, 14 shadow occurrences) is reserved for the icon-button hover state (--t-icon-btn-hover-bg-color resolves to pure black), which is a fill, not a shadow.

Shapes

The corner-radius scale resolves to two anchors and a pill:

• 0px ({rounded.none}): the hero band, the search dropdown input, every divider rule, the brand-strip footer logo cells.
• 14px ({rounded.card-inset}): inset image plates inside cards (20 occurrences) — when a property card holds a rounded photo within a larger rounded card edge.
• 15–16px ({rounded.card-md}, {rounded.card-lg}): the dominant card corner — 23 occurrences of 16px on destination tiles, vacation-rental tiles, and the "Best Rates" card; 7 occurrences of 15px on micro-card variants.
• 22px ({rounded.pill-md}): the secondary-pill corner on small chip buttons (2 occurrences).
• 52px ({rounded.pill-cta}): the brand's signature — every CTA button via --t-button-border-radius: 52px. At typical button heights (44–52px), this renders as a fully-rounded capsule.
• 9999px ({rounded.full}): avatar dots, the circular icon buttons, the carousel-dot indicators.

The 14/16/52 ladder is the system's typographic geometry — squarer cards, fully pill buttons, with the rest of the page held at right-angle 0px corners.

Components

Buttons

button-primary — #1c1c1c fill, white text, 52px pill radius, 0×24px padding, 52px height, 18px / 700 Swiss-721. The most common CTA across the site: "Find Hotels", "Book Now", "Search Rates", "View Hotel". The inverted move is load-bearing — copying this token onto a light-coral background defeats the brand's restraint.

button-primary-hover — same dark fill, 92% opacity. No transform, no shadow change, no color shift.

button-secondary — Transparent fill with #1c1c1c text and a 1px #1c1c1c outline. 52px pill radius. Used for "Cancel", "Continue browsing", and inverse CTAs on dark surfaces.

button-secondary-hover — flips to a #1c1c1c fill with white text — the same dark look as {component.button-primary} but reached through state, not default.

button-tertiary-text — Plain ink text, no surface, no border. Underlined on hover. Used for "Show more" and "View all" links in card rails.

Navigation

top-nav — White surface, 64px height, 0×24px horizontal padding. The Marriott Bonvoy wordmark sits flush left, the four top-level utility links (Book, Shop, My Trips, Find a Reservation) sit center-right, and the sign-in / register dropdown sits flush right. No bottom border at rest; a 1px {colors.hairline} rule appears on scroll.

nav-link — 14px / 400 Swiss-721 in ink (or white on dark backgrounds). 4px vertical padding. Active state is underline-only, no color shift.

Search

search-input-dropdown — The signature inverted form field. #1c1c1c background, #ffffff text, 22px / 500 Swiss-721, 52px height. The "Where to?" combobox sits at the center of the hero photo band — the dark fill on top of dimmed destination photography is the visual moment that signals "you are about to book a hotel."

text-input — White fill, 1px {colors.hairline} outline, 14px rounded corner, 52px height, 16×16px padding. Used inside the booking-detail accordion on property pages. Stacked above with a {component.form-label} in {typography.overline-sm}.

form-label — Uppercase 12px / 700 Swiss-721 in #707070, 1.2px tracking. The grotesque-doesn't-ship-small-caps move — tracking carries the small-caps role.

Hero

hero-banner — #1c1c1c surface (visually muted via 52% {colors.ink-overlay} scrim over destination photography), white text, 0px corners, 32×24px padding. Holds the hero h2 ({typography.display-hero} — 40px / 700) and a one-line tagline beneath. No CTA inside the hero band — the search dropdown carries the action.

Tiles & Cards

destination-tile — White card surface, 16px {rounded.card-lg} corner, 16px internal padding. Full-bleed photo above, a single-line {typography.heading-md} destination label below, no shadow, no border. Used in the "Ready When You Are" and "Get Away, Get More" rails.

property-card — White surface, 16px rounded corner, 1px {colors.hairline} border, asymmetric 24px 0px 24px 24px padding. The right edge runs flush so the image plate inside (rounded at 14px via {rounded.card-inset}) reaches the card's 16px outer corner — a 2px corner-stack visible at the photo edge. Used for the featured property tiles ("The Best Rates Are Always Here").

vacation-rental-card — Similar to property card but without the 1px border — the photo plate carries the visual edge. Used in the "Vacation Home Rentals" horizontal scroll rail.

rate-stat-block — Plain text, no surface — a 29px / 700 rate number ("$199") above a 12px overline label ("AVG NIGHTLY"). Used inside the "Best Rates Are Always Here" card.

overline-tag — Uppercase 12px / 500 Swiss-721 at 1.296px tracking, #707070. The category label above section heads — "OUR DESTINATIONS", "MEMBER BENEFITS".

brand-strip-logo — A footer band cell holding a sub-brand wordmark (Ritz-Carlton, JW Marriott, Westin, etc.) at {typography.caption}. 8×16px padding, no border, no surface — the wordmarks rest directly on the white canvas.

divider-rule — A 1px {colors.hairline} line. Section separator, form-field underline, footer column splitter. The single elevation alternative in the system.

icon-button-circle — A 40×40px circular button at {rounded.full} with a #eeeeee fill — the only place {colors.surface-soft} appears. Used for the search-suggest close icon, the carousel control arrows, and the dropdown caret triggers.

carousel-dot-active — The Swiper.js inherited carousel indicator at #007aff. Sits in the destination-tile rail beneath the photo strip. Not part of the brand voltage — it inherits from the library default and was not overridden.

Do's and Don'ts

Do use #1c1c1c ({colors.primary}) on every primary CTA background. The dark-on-white inversion is the brand's load-bearing chrome move. Switching this to coral ({colors.accent-coral}) reads as a generic travel marketplace, not Marriott.

Do preserve the 52px pill radius ({rounded.pill-cta}) on every button regardless of size. At small buttons (32–40px height), 52px renders as fully rounded; at 52px height the corner reaches the height itself. Substituting {rounded.full} (9999px) is visually identical but breaks the token-trace audit.

Do scope the coral accent ({colors.accent-coral} — #ff8d6b) to icon strokes and decorative ornaments only. It is declared in only two CSS variables (--t-accent-color, --t-icon-color-decorative) — keep that semantic boundary in your component code.

Do use uppercase overlines ({typography.overline-md}, {typography.overline-sm}) with their respective tracking values (1.296px and 1.2px). The tracking is the small-caps substitute — without it, the overlines collapse into ordinary 12px captions.

Don't use {colors.accent-coral} as a button background. It has 0 background occurrences in the extracted CSS — every coral instance is a text or border color. For a CTA, use {colors.primary} (#1c1c1c).

Don't use {colors.carousel-blue} (#007aff) anywhere outside the destination-tile carousel dots. It is inherited from --swiper-theme-color and is not a Marriott brand color — putting it on a link or button breaks the monochrome chrome.

Don't add a box-shadow on cards, buttons, or dropdowns. The system runs zero shadow tiers — depth comes from the dark CTA on white canvas, 1px {colors.hairline} rules, and the 52% ink overlay ({colors.ink-overlay}) over hero photography. Adding shadow reads as Material Design contamination.

Don't use weight 600 anywhere. The system runs only 400 / 500 / 700; the visible gap between body (500) and heading (700) is intentional. Filling that gap with 600 softens the typographic step the brand owns.

Don't use #c4c4c4 ({colors.hairline}) as a background or text fill. It is a 1px border-only token (33 border occurrences, 33 text occurrences as the same hairline glyph color on icon strokes). For a light surface fill, use {colors.surface-soft} (#eeeeee).

Known Gaps

• Authenticated dashboard: the signed-in Bonvoy member chrome (points-balance hero, stay-history calendar, status-tier badges, member-rate strikethrough) is gated and not captured.
• Property detail pages: the room-type stepper, rate-comparison grid, amenity matrix, and review module live one click below the homepage; not extracted.
• Sub-brand overrides: Ritz-Carlton, St. Regis, JW, Edition, Westin, W, Sheraton, and Aloft each carry typographic and color overrides on their dedicated property pages. Only the parent Bonvoy chrome is captured.
• Booking flow: rate-quote, payment, and confirmation pages carry form-error states ({colors.error} — #d0021b) that were not visible in the homepage extraction.
• Motion: the destination-tile carousel auto-advance, search-dropdown reveal, and mobile booking widget collapse are undocumented.
• Mobile breakpoint: the mobile booking widget renders as a sticky bottom bar with a different CTA layout; only the desktop chrome at 1440px is captured here.