What is Marriott Bonvoy's primary brand color?

Marriott's load-bearing color is not the coral most associate with Bonvoy — it is the near-black ink #1c1c1c, declared in 18 CSS custom properties including `--t-button-primary-bg-color`, `--t-brand-fg-color`, `--t-interactive-accent-color`, and `--t-link-text-color`, with 757 total occurrences across text, borders, and the inverted CTA fill. The Bonvoy coral #ff8d6b lives only in `--t-accent-color` and `--t-icon-color-decorative`, with just 12 total page occurrences — a deliberately scarce decorative voltage. The dominant contrast is dark ink (#1c1c1c, 757 occurrences) against pure white (#ffffff, 828 occurrences) — a near-monochrome chrome that lets destination photography carry every brand moment.

What typography does Marriott use, and what should I use if Swiss-721 is unavailable?

The site runs Swiss-721 across every tier from 12px uppercase overlines to the 40px hero h2 — there is no display family separate from text. Weight 400 carries inline links, 500 carries nav and body, and 700 carries every heading and CTA. The only tracking departure from `normal` is the 12px uppercase overline at 1.296px (and a sibling label at 1.2px). If Swiss-721 is unavailable, Helvetica Now or Inter at weight 400/500/700 are the closest open-source substitutes; 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.

Why is the primary CTA dark instead of using the Bonvoy coral?

The Find Hotels CTA renders #1c1c1c fill, #ffffff text, at 52px pill radius and 18px / 700 Swiss-721 — the opposite of the bright-accent CTA convention used by Booking, Expedia, and Airbnb. Marriott treats coral #ff8d6b as a decorative ornament, not a load-bearing action color, so it appears in icon strokes and small accent moments rather than on buttons. The dark CTA reads as hotel-lobby restraint: confident enough to stay quiet while destination photography (amber sunsets, palm decks, navy oceans) carries the marketing voltage. Reproducing this without the photography assets will under-perform — the inversion only works when the surrounding imagery is doing the persuasion.

What is Marriott's corner-radius philosophy?

Two anchors. Every button — primary, secondary, tertiary — resolves to a 52px pill via `--t-button-border-radius: 52px`, which at typical button heights produces a fully rounded capsule. Property tiles and vacation-rental cards sit at 16px (23 occurrences in the extraction) with a 14px sibling (20 occurrences) for inset image plates. The remaining 15px / 22px / 50% values are scoped to micro-elements (avatar dots, search-suggest pills). The pill-and-card combination is the brand's geometric signature; copying the system without preserving the 52px button radius loses the hotel-lobby cadence and reads as a generic SaaS card grid.

Can I use this DESIGN.md to build my own React hospitality site?

Yes — the file is structured to feed into Claude, Cursor, or any AI tool that reads design tokens. The agent reproduces Marriott's hospitality discipline (inverted CTA, 52px pill buttons, 16px card corners, Swiss-721 grotesque, decorative-only coral accent) rather than a generic travel theme. Every color, type style, radius, and spacing value is a quoted token you can paste into Tailwind config, CSS variables, or your own component library. The 52px pill radius is preserved literally — substituting 9999px will render visually identical at 52px button heights but breaks the token-trace audit if you later ladder buttons taller than 52px.

What's missing from this DESIGN.md spec?

Several items documented in the Known Gaps section. The signed-in Bonvoy member dashboard (points-balance hero, stay-history calendar, status-tier badges) is gated behind authentication and not captured. Property-detail pages (room-type stepper, rate-comparison grid, amenity matrix) live one click below the homepage and were not extracted. Marriott's sub-brand wordmarks — Ritz-Carlton, St. Regis, JW, Edition, Westin, W, Sheraton, Aloft — each carry typographic overrides on their property pages; only the parent Bonvoy chrome is captured here. Motion (the destination-tile carousel auto-advance, search-dropdown reveal) and the mobile booking widget collapse are undocumented.

Marriott Bonvoy Design System

Marriott Bonvoy's hospitality design system as a DESIGN.md file.

About Marriott Bonvoy DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source marriott.com

Travel & Hospitality

Marriott Bonvoy's homepage is built around an inversion most hospitality brands resist: the primary action button ("Find Hotels") renders dark-on-dark — #1c1c1c fill, #ffffff text, 52px pill radius — not the bright coral the brand owns. Coral (#ff8d6b) appears in only 12 page occurrences and is declared in just two CSS custom properties: `--t-accent-color` and `--t-icon-color-decorative`. The voltage is a decorative ornament, not a load-bearing CTA color. The system trusts destination photography (alternating amber sunsets, navy oceans, palm-shaded resort decks) to do the marketing work that competitors hand to colored CTAs.

This page captures the Bonvoy chrome as a DESIGN.md file — Google Labs' open spec for machine-readable design tokens. Inside: 18 color tokens covering the inverted CTA fill, the cool-gray hairline rule (#c4c4c4), form label gray (#707070), the scarce coral accent, plus alpha-overlay scrim tokens lifted from `--t-color-scrim-100` and `--t-color-control-background-overlay`. 13 typography tokens run entirely on Swiss-721 across 12–40px with the only humanist tracking move reserved for 12px uppercase overlines at 1.296px. The radius scale resolves to two anchors — 52px pill for every button, 16px card corner appearing 23 times — and 19 components covering the dark CTA, search dropdown, property tile, vacation-rental card, points stat block, and the editorial logo-strip footer.

Drop this file into Claude, Cursor, or any AI assistant that reads structured design tokens. The agent reproduces Marriott's hospitality discipline — inverted primary CTAs, 52px pill geometry, decorative-only accent voltage, photography-first tiles — instead of a generic travel theme. Reference tokens directly in Tailwind config or CSS variables, audit an existing hospitality storefront against this baseline, or use the file as a teaching artifact for what restraint looks like when the brand's color owner is asked to recede in favor of the destination.

What makes it distinct

Inverted primary CTAFind Hotels renders #1c1c1c fill with white text at 52px pill radius, the opposite of the bright-accent CTA convention
Coral as decorative scarcityBonvoy #ff8d6b lives in only 2 CSS variables (`--t-accent-color`, `--t-icon-color-decorative`) and 12 page occurrences, never load-bearing
Single-typeface systemSwiss-721 carries every tier from 12px uppercase overline (1.296px tracking) to 40px hero h2, only weight 400/500/700 changes
Two-radius rhythm52px pill on every button and 16px card corner (23 occurrences); the rest of the page is 0px right-angle
Inverted form fieldsthe search dropdown input renders #1c1c1c background with white foreground, mirroring the CTA so search reads as a primary action band

Live at marriott.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

marriott.com

Explore Marriott Bonvoy

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Marriott Bonvoy design system FAQ

Common questions about Marriott Bonvoy's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Marriott Bonvoy — official site

The global hospitality brand's booking interface — the source for this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use Marriott Bonvoy in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→