Marriott Bonvoy DESIGN.md

1. Visual Theme & Atmosphere

Marriott Bonvoy's iOS app is a premium hotel-booking and loyalty product, and its visual language is engineered to feel like a high-end travel concierge in your pocket. It is not a discount-forward marketplace — it is a membership. The base palette is a deep, restrained Bonvoy navy (#16264A) and a near-black (#1C1C1C), with gold (#B3852A) used sparingly and deliberately to mark member value: your points balance, your elite tier, points-redemption rates, and the gold "Book" call-to-action. The discipline is the point — gold never decorates; it signals "this is what your loyalty is worth." The result is an app that reads as expensive, calm, and trustworthy: big hotel hero photography, generous whitespace, serif-adjacent confidence in the headings, and a quiet, premium chrome.

The signature surface is the hotel detail screen with the Bonvoy points panel + points-aware rate select. Open a hotel and you see a tall full-bleed hero photo with the sub-brand eyebrow (THE RITZ-CARLTON, W HOTELS, ST. REGIS, COURTYARD, etc.) in gold small-caps, the hotel name in heavy type, location, and a star/review row. Below, a navy member panel shows your elite tier, your points balance in large numerals, and a gold progress bar toward your next free night. Then the rate select: a stack of rate cards — Member Rate (with the points you'll earn), Points Redemption (priced in points, "no cash due"), Flexible, Prepaid — where the selected rate gets a gold border and tint. Pinned to the bottom: a booking bar with the nightly price, the points you'll earn, and the gold "Book" button. This points-and-tier-aware booking flow is the heart of Bonvoy.

The other recognizable surfaces are the Mobile Key (a navy card with a gold key glyph: "Skip the front desk · Tap to unlock · Room 1408") and the elite tier badges (Silver / Gold / Platinum / Titanium / Ambassador) shown as small-caps pills across the account and stay screens. Search → hotel detail → rate select → confirmation → Mobile Key is the loop the app revolves around, and loyalty is woven through every step.

Color is disciplined to communicate hierarchy of value. Navy is structure (panels, secondary CTAs, the brand frame). Gold is earned value (points, tiers, redemption, the primary "Book" CTA). Standard semantics handle success (a muted green confirmation) and error (a restrained red). Everything else is near-black, soft grays, and hairline dividers — the photography and the points number always win the eye. The app deliberately avoids bright consumer accents; it wants to feel like a luxury hotel lobby, not a deal site.

Typography is Apple's SF Pro — Marriott Bonvoy ships no custom typeface in-app; it leans on the iOS system font and Dynamic Type, with a distinctive use of letter-spaced small-caps eyebrows (sub-brand names, tier names) that evoke luxury hospitality wordmarks. Hierarchy is value-shaped: a heavy points balance, a confident hotel name, gold small-caps eyebrows, readable body, and clear rate-card typography. The points number and the tier name are among the most prominent, intentional type moments on every screen.

Key Characteristics:

• Deep Bonvoy navy (#16264A) / near-black (#1C1C1C) base — premium, restrained, concierge-like
• Gold (#B3852A) reserved for member value — points balances, elite tiers, redemption, the "Book" CTA — never decoration
• Big hotel hero photography leading every property with a gold small-caps sub-brand eyebrow
• Bonvoy points panel — elite tier + points balance in large numerals + gold progress-to-next-free-night bar
• Points-aware rate select — Member / Points Redemption / Flexible / Prepaid cards; selected = gold border + tint
• Mobile Key — navy card, gold key glyph, "tap to unlock, Room 1408" — skip the front desk
• Elite tier badges — Silver / Gold / Platinum / Titanium / Ambassador as small-caps pills
• Sticky booking bar — nightly price + points earned + gold "Book" button
• SF Pro system font + Dynamic Type; letter-spaced small-caps eyebrows for sub-brands and tiers
• Calm premium chrome: navy panels, hairline dividers, minimal shadows, photography-forward

2. Color Palette & Roles

Primary (Member Value — Gold)

• Bonvoy Gold (#B3852A): The value color — points balances, elite-tier eyebrows, points-redemption labels, the primary "Book" CTA. Used sparingly to mark loyalty worth.
• Bonvoy Gold Pressed (#8F6A1F): Pressed/active state for the gold CTA.
• Bonvoy Gold Bright (#D2A23E): Dark-mode variant — points numerals, tier eyebrows, gold CTA on the dark canvas where #B3852A is too dim.

Structure (Navy)

• Bonvoy Navy (#16264A): Member panels, secondary CTAs ("Use points"), the brand frame, Mobile Key card. Constant across light/dark.
• Near-Black (#1C1C1C): Alternative deep base for headers and immersive screens.
• Navy Line (#243A66): Borders on navy panels, dividers within the member surface.

Canvas & Surfaces (Light Mode)

• Canvas White (#FFFFFF): Primary light canvas — search, hotel body, account.
• Surface Cream (#F6F4EF): Grouped section background, rate-card rest state — a warm off-white that pairs with gold.
• Surface Pressed (#ECE9E1): Pressed/selected rows.
• Divider (#E3E1DA): Hairline separators.

Canvas & Surfaces (Dark Mode)

• Dark Canvas (#121214): Primary dark canvas — near-black, slightly warm.
• Dark Surface 1 (#1A1A1D): Cards, grouped section background, nav bar.
• Dark Surface 2 (#232327): Pressed rows, rate cards at rest.
• Dark Divider (#2E2E33): Hairline separators on dark.

Text

• Text Primary Light (#1A1A1C): Hotel names, points, body — near-black.
• Text Secondary Light (#5C5C63): Location, metadata, descriptions.
• Text Tertiary Light (#8E8E96): Disabled, low-emphasis.
• Text Primary Dark (#EDEDEF): Primary text on dark.
• Text Secondary Dark (#A0A0A8): Secondary text on dark.
• On-Navy Text (#FFFFFF / rgba(255,255,255,0.7)): Text inside navy panels.

Elite Tier Accents

Semantic

• Success Green (#2E8B57): Booking confirmed, "Free cancellation", points-credited toast — muted, not bright.
• Error / Destructive Red (#C7453B): Failed payment, unavailable dates, cancel reservation — restrained.
• Warning Amber (#C8901C): "Only 2 rooms left at this rate", rate-change notices.
• Link (#16264A light / #D2A23E dark): Inline links — navy on light, gold on dark.
• Points Earned Accent (#B3852A / #D2A23E): The "+2,180 pts" earn line on rate cards and the booking bar.

3. Typography Rules

Font Family

• Primary: SF Pro (Apple system font) — Marriott Bonvoy ships no custom typeface in-app; it uses the iOS system font with Dynamic Type. SF Pro Display for large titles, points balances, and hotel names; SF Pro Text for body and rate cards.
• Eyebrow Treatment: SF Pro Text in letter-spaced uppercase small-caps for sub-brand names (THE RITZ-CARLTON, W HOTELS) and elite tiers (TITANIUM ELITE) — evokes luxury hospitality wordmarks.
• Fallback Stack (non-Apple / web mirror): -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
• Not user-switchable: The face is always the system font; only Dynamic Type size scales.

Hierarchy

Principles

• Points and tier are loud and intentional: The points balance is an 800-weight numeral; the tier eyebrow is letter-spaced small-caps gold — these are among the most prominent type moments because loyalty is the product.
• Eyebrows evoke luxury wordmarks: Sub-brand and tier labels are uppercase, tightly tracked, small — the hospitality-brand cue.
• System font, always: SF Pro + Dynamic Type; never override the system face.
• Weight concentrated at 400 / 500 / 600 / 700 / 800: Regular body, medium for tabs/captions, semibold for rate titles, bold for headers, extra-bold for points/prices/titles.
• Hierarchy via weight + the gold/navy split, not bright color: Gold marks value, navy marks structure; text emphasis comes from size and weight.
• Dynamic Type first-class: Titles, points balance, hotel name, headers, body all scale. Eyebrows, tab labels, points-earn lines stay fixed (layout-sensitive small-caps).

4. Component Stylings

Buttons

Primary Button ("Book" / "Reserve" / "Confirm")

• Shape: Rounded rectangle, 8pt corner radius (slightly tighter than consumer apps — premium restraint)
• Background: #B3852A (Bonvoy Gold) / #D2A23E (dark mode)
• Text: #1C1206 (deep brown-black for contrast on gold), SF Pro Text 16pt weight 700
• Padding: 14pt vertical, 28pt horizontal (full-width in the booking bar)
• Pressed: background #8F6A1F + scale 0.98 + light haptic
• Disabled: background #B3852A at 35% opacity

Secondary / Navy Button ("Use points" / "View rates")

• Background: #16264A (Bonvoy Navy)
• Text: #FFFFFF, SF Pro Text 15pt weight 700
• Padding: 13pt vertical, 24pt horizontal
• Corner radius: 8pt
• Pressed: background #1F3157 + scale 0.98

Outline Button ("Add to trip" / "Map")

• Background: transparent
• Text: #16264A light / #D2A23E dark
• Border: 1.5pt #16264A / #D2A23E
• Padding: 12pt vertical, 22pt horizontal
• Corner radius: 8pt
• Font: SF Pro Text 15pt weight 700

Text Button ("View all 64 photos" / hotel link)

• Font: SF Pro Text 15pt weight 700
• Color: #16264A light / #D2A23E dark
• Underlined
• Pressed: 0.6 opacity

Bonvoy Points Panel (the core component)

The signature loyalty surface — a navy panel that shows what the member's points are worth.

• Background: #16264A (Bonvoy Navy), 12pt corner radius, 1pt #243A66 border
• Padding: 16pt all
• Top row: leading = elite-tier eyebrow (11pt w700 small-caps gold #D2A23E) + member name (13pt rgba(255,255,255,0.7)); trailing = points balance (26pt w800 white) + "POINTS" caption (11pt rgba(255,255,255,0.6))
• Progress bar: 6pt tall, track rgba(255,255,255,0.14), fill a gold gradient #B3852A → #D2A23E, rounded
• Footer: "21,550 points to your next free night · Redeem from 50,000" in 11pt rgba(255,255,255,0.6)

Rate Select Cards

A stack of selectable rate options on the hotel detail screen.

• Each card: 14pt padding, 10pt corner radius, 1pt #E3E1DA / #2E2E33 border, surface #F6F4EF / #1A1A1D
• Selected card: 1pt #B3852A gold border + a 10% gold tint background
• Leading: rate name (15pt w600) + description (12pt secondary, e.g. "Free cancellation · Earn 2,180 pts")
• Trailing: price (17pt w800) + a gold points line ("+2,180 pts" or "68,000 points / night" 11pt w700 gold)
• Rate types: Member Rate, Points Redemption (priced in points), Flexible, Prepaid (Non-Refundable)

Hotel Hero

• Full-bleed hero photo, ≈256pt tall, square top corners, bottom scrim gradient
• Overlay top: back / share / save circular 36pt buttons (rgba(18,18,20,0.55) + blur)
• Overlay bottom: sub-brand eyebrow (gold small-caps 11pt w700 tracked 1.4px) + hotel name (white 22-23pt w800) + location (white 70%)
• On scroll past the hero, a solid compact nav fades in (back + hotel name + share/save)

Mobile Key

• Navy card (#16264A), 14pt corner radius, 1pt #243A66 border, 16pt padding
• Leading: a 48pt gold-tint rounded tile with a gold key/lock glyph (#D2A23E)
• Content: title "Mobile Key ready" (14pt w700 white) + subtitle "Skip the front desk · Tap your phone to unlock" (12pt rgba(255,255,255,0.65)) + room line "ROOM 1408 · CHECK-IN 3:00 PM" (11pt w700 gold small-caps)

Elite Tier Badge

• Small-caps pill, 6pt × 12pt padding, 999pt radius, 11pt w700 tracked 0.6px uppercase
• Color per tier (see Color §2): Silver cool-gray, Gold gold-tint, Platinum navy-blue, Titanium/Ambassador navy + gold (Ambassador adds a gold border)

Navigation

Hotel Detail Nav (over hero)

• Translucent circular overlay buttons (back / share / save) over the hero photo + scrim
• On scroll, a solid compact bar fades in: back chevron + hotel name (truncated) + share/save

Bottom Tab Bar

• Height: ≈68pt incl. home indicator
• Tabs: Home, Search, Trips, Mobile Key, Account
• Icon size: 22pt
• Active color: #B3852A / #D2A23E (gold — loyalty is the spine of the app); inactive: #8E8E96
• Labels: SF Pro Text 10pt w500, always shown
• Background: blurred translucent, 0.5pt top divider
• Mobile Key tab may show a gold dot when a key is active

Input Fields

Search Bar

• Pill or rounded-rect, ≈54pt tall, #F6F4EF / #232327 background, 10pt radius
• Two lines: "Where to?" (15pt w700) and "Add dates · 1 room, 2 guests" (12pt secondary)
• Leading location glyph; trailing filter glyph

Date / Room & Guest Picker

• Inline calendar; selected range filled #16264A at 12% with navy endpoints
• Room/guest steppers with navy-outline − / + round buttons
• A "Use points" toggle that re-prices rates in points when on (gold accent)

Distinctive Components

Bonvoy Points Panel — see core component. The loyalty heart of the app.

Points-Aware Rate Cards — cash + points priced side by side; selected gets the gold border.

Mobile Key Card — navy + gold, "skip the front desk". The premium-stay payoff.

Elite Tier Badge — small-caps pills marking Silver → Ambassador status everywhere.

Sub-Brand Eyebrow — gold letter-spaced small-caps (THE RITZ-CARLTON, ST. REGIS) above hotel names — the luxury wordmark cue.

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 16, 18, 24, 32, 40, 48
• Screen content inset: 18pt horizontal
• Card vertical gap: 12pt (rate cards), 16pt (sections)
• Section gap: 24pt; member panel sits 16pt below the star/review row

Grid & Container

• iPhone: content at 18pt horizontal insets; hero and map full-bleed
• iPad: hotel detail uses a split (hero + member panel | sticky rate/booking panel); search results in a 2-column grid
• Rate cards: full-width stacked list

Whitespace Philosophy

• Premium calm: generous vertical rhythm; the app should feel like a luxury lobby, not a cluttered deal site
• Points are always near the top of value hierarchy: the member panel sits high on the hotel screen; the booking bar always shows points earned
• Photography-forward: the hero is tall and full-bleed; chrome recedes
• Gold is scarce by design: navy/near-black dominate; gold is reserved for what the member earned

Border Radius Scale

• Square (0pt): full-bleed hero top, immersive headers
• Subtle (4pt): inner image frames, small chips
• Standard (8pt): primary/secondary buttons, rate cards (tight, premium)
• Comfortable (10pt): grouped cards, rate-card containers, search bar
• Large (14pt): member panel, Mobile Key card, bottom sheets
• Extra (20pt): hero modal sheets
• Pill (999pt): tier badges, filter chips
• Circle (50%): hero overlay buttons, avatars

6. Depth & Elevation

Marriott Bonvoy is restrained and premium — elevation is quiet and functional, never glossy.

Shadow Philosophy: The navy member panel and Mobile Key card use a hairline navy border rather than a drop shadow — they should feel inset and crafted, not floating. Rate/results cards get a very soft lift so they read as tappable. On dark mode shadows nearly vanish, so floating panels add a 1pt #2E2E33 border. Photography never carries a shadow.

Motion

• Points balance count-up: on stay completion or screen entry, the points numeral counts up to the value over 600ms ease-out; a brief gold shimmer sweeps the number
• Progress-bar fill: the gold gradient bar animates width from 0 → target over 500ms ease-out on the member panel appearing
• Rate select: tapping a rate card animates the gold border in + tint over 180ms; the booking-bar price/points cross-dissolve to the new rate over 250ms
• Mobile Key unlock: tapping the key triggers a gold ring pulse + a success haptic; the card briefly flips to "Unlocked"
• Hero parallax: the hero photo translates at 0.5× scroll speed as the body scrolls over it
• Card appear: fade + 8pt slide-up, 60ms stagger, 220ms ease-out
• Push navigation: native iOS push, 300ms horizontal slide
• Sheet present: slides up 300ms ease-out; scrim fades 250ms
• Tab switch: instant; active glyph crossfades to gold in 120ms
• Haptics: soft impact on Book, success haptic on Mobile Key unlock and booking confirmed, selection feedback on rate select and date endpoints

7. Do's and Don'ts

Do

• Use a deep Bonvoy navy (#16264A) / near-black (#1C1C1C) base — premium and restrained
• Reserve gold (#B3852A) for member value only — points, tiers, redemption, the "Book" CTA; brighten to #D2A23E on dark
• Lead every hotel with a tall full-bleed hero + a gold letter-spaced small-caps sub-brand eyebrow
• Show the Bonvoy points panel high on the hotel screen — tier + balance + gold progress-to-free-night
• Price rate cards in both cash and points; give the selected card a gold border + tint
• Surface the Mobile Key as a navy + gold card ("skip the front desk")
• Render elite tiers as small-caps pills (Silver / Gold / Platinum / Titanium / Ambassador)
• Always show points earned in the sticky booking bar alongside the cash price
• Use SF Pro + Dynamic Type — respect the user's text-size setting globally
• Keep chrome calm: navy panels with hairline borders, soft card lifts, photography-forward
• Make the points balance and tier among the most prominent intentional type moments

Don't

• Don't use gold as decoration — it must mean "earned value" (points / tier / redemption / Book)
• Don't introduce a bright consumer accent — Bonvoy is navy + disciplined gold; nothing else competes
• Don't shadow the navy member panel or Mobile Key — they use a hairline navy border, not a drop shadow
• Don't bury points — the member panel sits high; the booking bar always shows points earned
• Don't ship a custom typeface — Bonvoy uses the system font; respect Dynamic Type
• Don't use the deep navy #16264A for thin links on dark — switch to gold #D2A23E
• Don't render sub-brand or tier labels in sentence case — they are uppercase, tightly tracked small-caps
• Don't over-round corners — buttons/cards are tight (8pt) for a premium, restrained feel
• Don't animate aggressively — motion is calm; the loudest moment is the points count-up
• Don't use pure black (#000000) for body text — #1A1A1C near-black is correct
• Don't hide the elite tier — it belongs visible on the member panel and account

8. Responsive Behavior

Device Sizes

Dynamic Type

• Large titles, points balance, hotel name, section headers, body: full scale
• Eyebrows (sub-brand / tier small-caps), tab labels, points-earn lines, progress legends: FIXED (layout-sensitive)
• Rate cards grow vertically with text; price/points stay aligned

Orientation

• All screens support rotation
• iPad uses split-view: hero + member panel and a persistent rate/booking panel
• Hero supports landscape (wider photo, same scrim + eyebrow)

Touch Targets

• Hero overlay buttons: 36pt visual, 44pt hit
• Rate cards: full-card tap to select, ≥ 44pt tall
• Tab bar icons: 22pt glyph, 49pt hit
• Mobile Key card: full-card tap to unlock, ≥ 56pt tall
• Book button: full-width bar button, ≥ 50pt tall

Safe Area Handling

• Top: hero extends under the status bar; overlay controls inset to the safe area
• Bottom: booking bar and tab bar respect the home indicator
• Keyboard: search and form fields scroll above the keyboard
• Sides: 18pt content inset; hero and map full-bleed including safe areas

9. Agent Prompt Guide

Quick Color Reference

• Canvas (light): #FFFFFF / cream surface #F6F4EF
• Canvas (dark): #121214 / surface #1A1A1D
• Bonvoy Navy (structure): #16264A (constant) · navy line #243A66
• Near-black: #1C1C1C
• Bonvoy Gold (value): #B3852A light / #D2A23E dark · pressed #8F6A1F
• Text primary: #1A1A1C light / #EDEDEF dark
• Text secondary: #5C5C63 light / #A0A0A8 dark
• Divider: #E3E1DA light / #2E2E33 dark
• Success: #2E8B57
• Error / destructive: #C7453B
• Link: #16264A light / #D2A23E dark

Example Component Prompts

• "Build the Bonvoy points panel in SwiftUI: a #16264A navy card, 14pt corner radius, 1pt #243A66 border, 16pt padding. Top row: leading VStack with an elite-tier eyebrow 'TITANIUM ELITE' (SF Pro 11pt w700, tracking 1.2, #D2A23E) and member name 'A. Morgan · Member' (13pt rgba(255,255,255,0.7)); trailing VStack right-aligned with points '128,450' (SF Pro Display 26pt w800 white) and 'POINTS' (11pt rgba(255,255,255,0.6)). Below: a 6pt progress bar, track rgba(255,255,255,0.14), fill a #B3852A → #D2A23E gradient at 64%. Footer: '21,550 points to your next free night' 11pt rgba(255,255,255,0.6). Animate the bar 0 → target over 500ms and count the points up over 600ms."

• "Create a Bonvoy rate-select card: 14pt padding, 10pt corner radius, 1pt #2E2E33 border, surface #1A1A1D. Leading: rate name 'Member Rate' SF Pro 15pt w600 #EDEDEF + 'Free cancellation · Earn 2,180 pts' 12pt #A0A0A8. Trailing right-aligned: '$545' SF Pro Display 17pt w800 + '+ 2,180 pts' 11pt w700 #D2A23E. When selected: 1pt #B3852A border + a 10% gold tint background; animate the border/tint in over 180ms."

• "Build the Bonvoy hotel hero: a full-bleed photo ≈256pt, square top corners, bottom scrim gradient to rgba(18,18,20,0.7). Overlay top: back / share / save circular 36pt buttons (rgba(18,18,20,0.55) + blur) inset to the safe area. Overlay bottom-leading: a gold small-caps eyebrow 'THE RITZ-CARLTON' (11pt w700 tracked 1.4 #D2A23E), hotel name 'The Ritz-Carlton, Half Moon Bay' (white 23pt w800), location 'Half Moon Bay, California · Luxury' (rgba(255,255,255,0.82) 13pt)."

• "Render the Bonvoy Mobile Key card: a #16264A navy card, 14pt radius, 1pt #243A66 border, 16pt padding, horizontal layout. Leading: a 48pt rounded tile rgba(210,162,62,0.16) with a gold lock glyph #D2A23E. Content: 'Mobile Key ready' 14pt w700 white, 'Skip the front desk · Tap your phone to unlock' 12pt rgba(255,255,255,0.65), and 'ROOM 1408 · CHECK-IN 3:00 PM' 11pt w700 #D2A23E tracked 0.5. On tap: gold ring pulse + success haptic."

• "Create the Bonvoy sticky booking bar: pinned bottom, ≈76pt + safe area, rgba(18,18,20,0.97) + 20pt blur, 1pt #2E2E33 top divider. Leading: '$545' SF Pro Display 19pt w800 #EDEDEF + '/ night' 13pt #A0A0A8, and 'Earn 2,180 Bonvoy points' 12pt w700 #D2A23E. Trailing: a 'Book' button — #B3852A fill, #1C1206 text 15pt w700, 8pt radius, pressed #8F6A1F + scale 0.98."

• "Render the Bonvoy bottom tab bar: ≈68pt incl. home indicator, tabs Home / Search / Trips / Mobile Key / Account, 22pt glyphs, active tint #D2A23E (gold — loyalty is the spine) inactive #8E8E96, labels SF Pro 10pt w500 always shown, translucent blurred background with a 0.5pt #2E2E33 top divider, and a gold dot on Mobile Key when a key is active."

Iteration Guide

1. Base is deep Bonvoy navy #16264A / near-black #1C1C1C; dark canvas #121214 — premium, restrained, NOT a deal site
2. Gold #B3852A means earned value ONLY — points, tiers, redemption, the Book CTA; brighten to #D2A23E on dark
3. The Bonvoy points panel (tier + balance + gold progress bar) sits high on the hotel screen — loyalty is the heart
4. Rate cards are priced in cash AND points; the selected card gets a gold border + tint
5. Every hotel leads with a tall full-bleed hero + a gold letter-spaced small-caps sub-brand eyebrow
6. The Mobile Key is a navy + gold card ("skip the front desk") — the premium-stay payoff
7. Elite tiers (Silver / Gold / Platinum / Titanium / Ambassador) are small-caps pills, visible on the member panel
8. The points balance and tier are among the loudest, most intentional type moments (800-weight numeral, tracked small-caps)
9. Typography is SF Pro + Dynamic Type — no custom typeface; eyebrows are uppercase, tightly tracked
10. Keep it calm — navy panels with hairline borders (not shadows), tight 8pt corners, photography-forward; loudest motion is the points count-up