--- version: alpha name: "Belmond" description: "Ivory canvas, Thea No Didot display serif against Montserrat chrome, and full-bleed heritage photography — a century of grand hotels and legendary trains rendered in the most unhurried digital vocabulary in luxury travel" colors: background: "#ffffff" surface: "#000000" surface-warm: "#f5f4f2" # warm parchment for alternate section panels /* estimated */ ink: "#000000" ink-muted: "#4a4a4a" # secondary text and supporting copy /* estimated */ ink-quiet: "#8a8a8a" # captions, meta labels, muted navigation /* estimated */ on-primary: "#ffffff" primary: "#000000" primary-hover: "#2a2a2a" # subtle dark shift on button hover /* estimated */ on-surface: "#ffffff" border: "#000000" border-subtle: "#dbd9d9" # was rgb(219, 217, 217) — from dembrandt high-confidence borders border-light: "#e5e7eb" # was rgb(229, 231, 235) — from dembrandt high-confidence neutral focus-ring: "#000000" shadow-soft: "#000000" # was rgba(0,0,0,0.1–0.2) — flattened to hex, opacity handled in prose typography: display-hero: fontFamily: "theanodidot-regular-webfont, Didot, Georgia, Times New Roman, serif" fontSize: 60px fontWeight: 400 lineHeight: 1.10 letterSpacing: 0.6px display: fontFamily: "theanodidot-regular-webfont, Didot, Georgia, Times New Roman, serif" fontSize: 40px fontWeight: 400 lineHeight: 1.10 letterSpacing: 0.6px heading-section: fontFamily: "Montserrat, ui-sans-serif, system-ui, sans-serif" fontSize: 26px fontWeight: 400 lineHeight: 1.20 letterSpacing: 0.6px heading-sub: fontFamily: "Montserrat, ui-sans-serif, system-ui, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 1.30 letterSpacing: 0px body-large: fontFamily: "Montserrat, ui-sans-serif, system-ui, sans-serif" fontSize: 16px fontWeight: 300 lineHeight: 1.80 letterSpacing: 0.6px body: fontFamily: "Montserrat, ui-sans-serif, system-ui, sans-serif" fontSize: 13px fontWeight: 300 lineHeight: 1.80 letterSpacing: 0.6px nav-link: fontFamily: "Montserrat, ui-sans-serif, system-ui, sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 1.50 letterSpacing: 1.2px button-ui: fontFamily: "Montserrat, ui-sans-serif, system-ui, sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 1.50 letterSpacing: 1.8px caption: fontFamily: "Montserrat, ui-sans-serif, system-ui, sans-serif" fontSize: 10px fontWeight: 400 lineHeight: 1.50 letterSpacing: 0.6px spacing: xs: 5px sm: 10px md: 20px lg: 40px xl: 50px 2xl: 80px 3xl: 100px rounded: none: 0px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 10px 30px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 10px 30px button-ghost: backgroundColor: "transparent" textColor: "{colors.on-surface}" borderColor: "{colors.on-surface}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 10px 30px button-ghost-hover: backgroundColor: "{colors.on-surface}" textColor: "{colors.surface}" borderColor: "{colors.on-surface}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 10px 30px button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" borderColor: "{colors.border}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 10px 30px button-secondary-hover: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" borderColor: "{colors.primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 10px 30px card: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 20px input: backgroundColor: "transparent" textColor: "{colors.ink}" borderColor: "{colors.border-subtle}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 0px 0px 5px input-focus: backgroundColor: "transparent" textColor: "{colors.ink}" borderColor: "{colors.focus-ring}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 0px 0px 5px badge: backgroundColor: "{colors.surface-warm}" textColor: "{colors.ink-muted}" typography: "{typography.caption}" rounded: "{rounded.none}" padding: 4px 10px --- # Belmond Design System ## Overview Belmond's web identity begins with a single, non-negotiable commitment: the frame must never compete with what lives inside it. The canvas is pure white (`{colors.background}`), and everything placed on it — the gilded dining room of the Hotel Cipriani, the lantern-lit corridor of a Venice-bound train, the terracotta ramparts of Caruso on the Amalfi Coast — is given every pixel of breathing room it earns. There are no decorative surfaces, no gradient washes, no animated backgrounds. The design is subservient to the archive. The typographic tension that makes Belmond recognizable is the negotiation between two registers: **Thea No Didot** (`theanodidot-regular-webfont.woff2`), a custom-licensed high-contrast serif that arrives unannounced in hero headlines and section openers, and **Montserrat** in its lightest weights (300–500 uppercase) for everything the brand needs to operate — navigation, captions, booking links, legal. The Didot cuts are the guest arriving by sea. The Montserrat is the concierge waiting on the jetty. Both are essential, and neither apologizes for the other's presence. Display headings are set with 60px Thea No Didot at weight 400 and `0.6px` letter-spacing (`{typography.display-hero}`); the chrome runs at 13px Montserrat 500 uppercase with `1.2–1.8px` tracking (`{typography.nav-link}`, `{typography.button-ui}`). One face is for memory; the other is for directions. Where most luxury travel sites flirt with soft gold tones or warm cream surfaces to signal heritage, Belmond refuses the decoration. The system is near-monochromatic: jet black (`{colors.ink}`) on pure white (`{colors.background}`), with `{colors.border-subtle}` hairlines providing just enough structure to separate regions of content without asserting themselves. The only flourish the site allows is the single subtle `rgba(0,0,0,0.1–0.15)` hero scrim — a barely-there fade at the base of full-bleed photography, kept just opaque enough for the overlaid Didot display type to read. Buttons are sharp-cornered (`{rounded.none}`) rectangles, either filled black on white or outlined white on dark photography. The system is confident enough in the photographs to let them do all the atmospheric work. **Key Characteristics:** - Pure white canvas (`{colors.background}`) — no parchment, no warm tint; the page is a gallery wall for the brand's photograph archive - Two-typeface contract: Thea No Didot (`theanodidot-regular-webfont.woff2`) for display and editorial; Montserrat at weight 300–500 for all operational chrome - `{colors.ink}` jet black carries the sole CTA fill color — no brand hue, no metallic accent in the button system - All navigation labels and button text set in Montserrat 500 uppercase with `1.2–1.8px` positive letter-spacing (`{typography.nav-link}`, `{typography.button-ui}`) - Sharp `{rounded.none}` on every interactive element — buttons, cards, inputs — the system is architecturally rectilinear throughout - Hero photography is full-bleed with a single translucent fade-in scrim (`fadeInHeaderBg` 0.8s ease keyframe) — the only non-flat visual effect in the primary brand layer - Montserrat body copy at weight 300 with `1.8` line-height (`{typography.body}`) — generous, unhurried, deliberate - `{colors.border-subtle}` hairlines (`rgb(219, 217, 217)`) for structural dividers and list separators, never competing with photography - Ghost button (transparent + white border) is the hero overlay CTA format; black-filled button lives on the white canvas below - `{spacing.2xl}` (80px) and `{spacing.3xl}` (100px) are the section-level breathing values — the wide empty intervals between content blocks are as deliberate as the photography ## Colors ### Primary Surface - **Pure White** (`{colors.background}`): The invariant canvas — confirmed in dembrandt's dominant palette. The page is always white, never tinted or warmed. Every surface defaults here. - **Warm Parchment** (`{colors.surface-warm}`): A barely perceptible warm off-white for alternate-section panels, footer backgrounds, and secondary content zones. One step removed from the canvas but distinguishable at a glance. ### Text / Ink - **Belmond Black** (`{colors.ink}`): The sole text color for headings, body, and primary interactive chrome. Pure black — not charcoal, not dark grey. Dembrandt confirmed 276 instances as the dominant palette entry. - **Supporting Dark** (`{colors.ink-muted}`): Mid-dark for secondary body paragraphs, supporting card copy, and form label text. Slightly recedes from primary black. - **Quiet Mid-Grey** (`{colors.ink-quiet}`): Tertiary for captions, image credit lines, meta labels, disabled states, and fine print. The system's lowest-ink voice. ### Interactive - **Primary Black** (`{colors.primary}`): The sole CTA fill — no brand hue, just the deepest ink. Confirmed in dembrandt's button scan ("Explore Belmond Stories" solid black button). - **Hover Dark** (`{colors.primary-hover}`): A slight softening of jet black on button hover — keeps the interaction visible without introducing a chromatic shift. - **Ghost White** (`{colors.on-surface}`): The "Learn more" overlay button color — transparent background, white border and white text, for use directly over hero photography. ### Borders & Structure - **Hairline Black** (`{colors.border}`): The structural border — 1px solid lines on outlined secondary buttons, tab underlines, and active navigation indicators. Always full ink. - **Warm Hairline** (`{colors.border-subtle}`): `rgb(219, 217, 217)` — the dominant structural divider tone confirmed across list items and section separators. A warmer soft grey that doesn't startle against the white canvas. - **Light Divider** (`{colors.border-light}`): `rgb(229, 231, 235)` — the lightest structural rule, appearing in input underlines on light-background sections and footer partitions. ### Shadow Belmond's primary brand layer is near-shadow-free. The handful of shadows in the dembrandt scan (`rgba(0,0,0,0.1) 0px 0px 30px` and `rgba(0,0,0,0.2) 0px 0px 18px`) appear only on embedded PrimeReact booking components, not on editorial or navigational surfaces. The brand design uses photography and white space for depth, not computed elevation. ## Typography ### Font Family - **Display / editorial serif**: `theanodidot-regular-webfont` — a custom-licensed Didot-class high-contrast serif served via self-hosted `woff2`. Fallbacks: `Didot, "Bodoni MT", Georgia, "Times New Roman", serif`. The sharp ink traps and blade-thin hairlines are the brand's sole decorative gesture. Used exclusively for hero display headings, section editorial openers, and property names at scale. - **UI sans-serif**: `Montserrat` — the operational typeface for navigation, captions, button labels, booking chrome, and body prose. Served from Google Fonts. The geometric humanist structure pairs with the Didot's classical verticality without fighting it. - **Google Fonts substitution for display**: Closest available is **Playfair Display** (captures the high contrast, vertical stress) or **Libre Baskerville** for a lower-contrast variant. Montserrat is already a Google Font and requires no substitution. ### Hierarchy | Token | Use | |---|---| | `display-hero` | Property names in hero overlays — "Hotel Cipriani, Venice" at 60px Thea No Didot | | `display` | Section editorial openers, experience-category headings at 40px | | `heading-section` | Sub-section labels, collection names in Montserrat 400 at 26px | | `heading-sub` | Card-level titles, feature item names in Montserrat 700 at 16px | | `body-large` | Lead editorial paragraphs, destination introductions at 16px weight 300 | | `body` | Standard body copy, card descriptions, booking-bar detail at 13px weight 300 | | `nav-link` | Navigation items, footer links, tab labels — Montserrat 500 uppercase `1.2px` tracking | | `button-ui` | CTA labels — Montserrat 500 uppercase `1.8px` tracking, the widest-spaced chromatic voice | | `caption` | Property type labels, image credit lines, legal text at 10px weight 400 | ### Principles - **Serif for destinations; sans for directions.** Thea No Didot names places and sets the atmospheric register. Montserrat handles everything that moves the guest from interest to booking. - **Montserrat carries hierarchy through weight and spacing, not size.** Navigation (500, `1.2px`), buttons (500, `1.8px`), body (300, `0.6px`), and captions (400, `0.6px`) are differentiated by weight and tracking, keeping size variation minimal. - **Positive tracking throughout the sans.** The compressed 300-weight Montserrat body gains legibility via `0.6–0.7px` letter-spacing; the uppercase UI strings expand to `1.2–1.8px` for a labeled, engraved quality. - **The Didot does not escalate.** Display headings appear at significant sizes but always at weight 400 — no bold cut, no condensed variant. The face commands attention through its intrinsic ink contrast, not weight escalation. - **Light weight for body text is deliberate.** Montserrat 300 at `1.8` line-height on white produces a quiet, legible reading rhythm that never competes with the photography sitting in the same scroll. ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block above. Base unit: 5px (dembrandt confirmed `5px` at 167 uses and `10px` at 360 uses as the two dominant small spacing values). The scale assembles from a tight lower register (5–20px) for component breathing, jumps to a mid-range (40–50px) for card and column rhythm, and opens fully at 80–100px for inter-section vertical space. The large gap at the top of the scale is Belmond's most important design decision: the system grants photography room to exhale between editorial blocks. ### Grid & Container - Max content width: ~1440px (dembrandt confirmed 1440px as a primary breakpoint) - Hero: full-viewport photography with `fadeInHeaderBg` keyframe header fade; overlaid Thea No Didot heading left- or center-aligned with ghost button below - Property grid: 2–3 column card layouts with generous gutters; the LVMH portfolio of 45+ properties adapts to editorial and catalog formats - Booking bar: persistent horizontal strip at top or bottom of hero, black filled, with form fields in Montserrat weight 300 on black surface ### Whitespace Philosophy - **Photography-first negative space**: sections breathe at `{spacing.2xl}` (80px) and `{spacing.3xl}` (100px) intervals — white space is never economized - **Rectilinear containment**: all content regions are rectangular, all gutters are consistent, no diagonal cropping or overlapping layers - **Single-column editorial at mobile**: story prose and destination descriptions prioritize readability at any viewport size ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Default for every surface — cards, navigation, editorial panels | | Bottom Rule (Level 1) | `border-bottom: 1px solid {colors.border-subtle}` | Section separators, list item dividers, input underlines at rest | | Black Hairline (Level 2) | `1px solid {colors.border}` | Outlined secondary buttons, active tab indicators | | Hero Scrim (Level 3) | `linear-gradient(rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 100%)` | The only depth effect — a gentle fade at the top of hero photography for overlaid type legibility | | Booking Shell (Level 4) | `rgba(0,0,0,0.1) 0px 0px 30px 0px` | Embedded PrimeReact booking engine shells — not part of brand design intent | | Focus Ring | `outline: 1px solid {colors.focus-ring}` | Focus state on interactive controls and selects | **Shadow Philosophy**: Belmond's brand design layer is functionally flat. The one dimensional gesture the system permits — the hero photography scrim — is a gradient, not a shadow, and it serves legibility rather than chrome elevation. The booking engine (embedded PrimeReact/Fluent UI components) carries box shadows, but those belong to the utility layer. Brand editorial surfaces and navigational chrome sit flat on the white canvas, trusting photography to provide all atmospheric depth. ## Shapes The complete radius scale is declared in the `rounded:` token block above. The system uses: | Token | Value | Use | |---|---|---| | `none` | 0px | Universal Belmond shape — buttons, inputs, cards, images, navigation containers | | `pill` | 9999px | Cookie manager and accessibility control chips only | Belmond's shape vocabulary is a single strict decision: everything is a rectangle. Dembrandt found `2px` and `3px` values only on cookie-consent and accessibility overlay elements (third-party shells), and `50%` circular on scroll-to-content decorative buttons — none of these belong to the brand design layer. Property photography is displayed in sharp rectangular frames. CTAs are sharp rectangles. The property name overlays on hero images sit in sharp rectangular containers. The system's architectural vocabulary is colonial-era rectilinear grandeur: clean, load-bearing, no ornament. ## Components The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them. ### Button Variants - **`button-primary`** — The "Explore Belmond Stories" standard CTA: `{colors.primary}` black fill, `{colors.on-primary}` white text, `{typography.button-ui}` Montserrat 500 uppercase `1.8px` tracking, `{rounded.none}` sharp corners, `10px 30px` padding. The definitive editorial CTA on the white canvas. - **`button-ghost`** — The "Learn more" hero overlay button: transparent fill with `{colors.on-surface}` white border and text, same typography and padding. Sits directly on full-bleed photography; hover inverts to white fill with black text. - **`button-secondary`** — Outlined variant for white-canvas sections: transparent fill, `{colors.border}` 1px solid border, `{colors.ink}` text. Hover inverts to solid black. ### Cards Property and experience cards: `{colors.background}` white or transparent, full-bleed photography at the top of the card region, `{rounded.none}` sharp corners throughout, no shadow. Below the image: a `{typography.caption}` category eyebrow in `{colors.ink-quiet}`, then a `{typography.heading-sub}` property name in `{colors.ink}`, then a `{typography.body}` description in `{colors.ink-muted}`. Internal padding at `{spacing.md}` (20px). ### Inputs Form fields in booking and search contexts: `transparent` background, `{colors.border-subtle}` bottom-only 1px rule at rest, `{colors.focus-ring}` 1px full outline on focus, `{rounded.none}`, `{typography.body}` Montserrat 300 in `{colors.ink}`, padding `0px 0px 5px` (bottom-only inset). Focus shifts border to solid black with a `1px solid` outline. No glow, no color fill on focus. ### Badges / Tags Property-type labels and experience category chips: `{colors.surface-warm}` fill, `{colors.ink-muted}` text, `{typography.caption}` 10px Montserrat weight 400 `0.6px` tracking, `{rounded.none}` sharp corners, `4px 10px` padding. Labels like "Train Journey," "River Cruise," "Hotel." ### Navigation The Belmond nav is structured as: left-aligned logo wordmark (SVG, white or black per surface), a horizontal menu of `{typography.nav-link}` Montserrat 500 uppercase `1.2px` tracking links, and a right-aligned "Explore" or booking CTA as `{components.button-secondary}`. The header uses a `{colors.background}` white fill on the page canvas and renders as a transparent overlay on hero photography with `{colors.on-surface}` white labels. The `fadeInHeaderBg` 0.8s ease transition manages the crossfade between transparent and opaque as the user scrolls. ## Do's and Don'ts ### Do - Use Thea No Didot for all property names, destination headings, and editorial display text — the serif face is for the brand's memory and archive, not for operational chrome - Use Montserrat for all navigation, buttons, captions, form fields, and supporting body copy — keep the two-typeface contract unbroken - Set all Montserrat UI labels in `uppercase` with positive letter-spacing: `1.2px` for nav, `1.8px` for button labels (`{typography.nav-link}`, `{typography.button-ui}`) - Default to `{colors.background}` pure white as the page canvas — never warm cream, never grey tint - Use `{rounded.none}` on every brand-facing interactive element — the system is rectilinear throughout - Use the ghost button (`{components.button-ghost}`) for CTAs overlaid on photography; use the filled primary (`{components.button-primary}`) on the white canvas - Use `{spacing.2xl}` (80px) and `{spacing.3xl}` (100px) for section-level vertical breathing — the empty intervals are as deliberate as the photography - Allow photography to occupy full-bleed regions without borders, rounded corners, or shadows - Apply the `fadeInHeaderBg` 0.8s ease scrim to any page where overlaid Didot display text requires legibility support - Use `{colors.border-subtle}` hairlines for structural dividers — they separate without asserting ### Don't - Don't use Thea No Didot for body paragraphs, button labels, navigation, or form text — the serif is display-only - Don't introduce a warm gold, brass, or heritage-brown accent — Belmond's system is monochromatic black-and-white; the photography provides all color - Don't round corners on buttons, cards, or image frames — `{rounded.none}` (0px) is universal across all brand-facing components - Don't use Montserrat at medium or heavy weights for body copy — weight 300 with `1.8` line-height is the body register; bold and semibold are reserved for card-title-level headings only - Don't add drop shadows or glows to editorial surfaces — booking-engine shadows belong to the embedded third-party layer, not the brand design - Don't lowercase navigation labels or button text — all Montserrat chrome is uppercase; lowercase is reserved for body paragraphs and destination prose - Don't reduce section-level vertical spacing below `{spacing.lg}` (40px) — compressing the inter-section breathing destroys the hospitality atmosphere - Don't use the `{colors.border-light}` tone (`#e5e7eb`) for brand borders — it is a Tailwind default that appears in booking-engine form fields, not an editorial brand element - Don't introduce a second display serif — Thea No Didot is the single licensed display face; substituting another editorial serif (Cormorant, Freight, Caslon) breaks the brand identity - Don't crop photography to aspect ratios that compete with a 16:9 or 4:5 full-bleed frame — the image must breathe --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <400px | Single column, compressed nav, full-width property photography, simplified booking strip | | Mobile | 400–767px | Single column, hero photography full-viewport height, ghost CTA below the fold | | Tablet | 768–1023px | Navigation restores horizontal, 2-column property grid, Didot display reduces to ~36px | | Desktop | 1024–1439px | Full horizontal nav, 3-column grids, hero Didot at full 60px, booking bar persistent | | Large Desktop | ≥1440px | Maximum container width, expanded outer margins, hero photography at native resolution | ### Touch Targets - Primary buttons: minimum `~44px` tap height via `10px` vertical padding plus Montserrat 13px line-height and borders - Navigation links: full row tappable in mobile overlay menu - Property cards: entire image + caption region tappable, not just the title link ### Collapsing Strategy - **Nav**: Horizontal row collapses to hamburger/menu icon → full-screen `{colors.background}` white overlay with vertically stacked Montserrat 500 uppercase links - **Hero**: Full-viewport photography maintained across all breakpoints; the Didot display heading scales from `{typography.display-hero}` (60px) toward `{typography.heading-section}` (26px) at mobile - **Property grid**: 3-column desktop collapses to 2-column tablet and single-column mobile; photography proportions preserved, never square-cropped - **Booking bar**: Compresses from full horizontal form to stacked or icon-triggered overlay on small viewports; "Book" CTA remains always accessible - **Section spacing**: `{spacing.2xl}` (80px) inter-section breathing reduces toward `{spacing.lg}` (40px) on mobile, preserving the open rhythm at reduced scale ### Image Behavior - Photography uses object-fit + aspect-ratio containers for consistent proportions across breakpoints - Hero images are always full-viewport on mobile — the composition adapts, the frame never clips to a thumbnail - Property card imagery maintains a consistent 4:3 or 16:9 convention; portrait aspect ratios appear in editorial story layouts --- ## Agent Prompt Guide ### Quick Color Reference - Background canvas: `{colors.background}` (`#ffffff`) - Primary text: `{colors.ink}` (`#000000`) - Secondary text: `{colors.ink-muted}` (`#4a4a4a`) - CTA fill: `{colors.primary}` (`#000000`) - CTA text: `{colors.on-primary}` (`#ffffff`) - Ghost CTA (on photography): border + text `{colors.on-surface}` (`#ffffff`) - Structural hairline: `{colors.border-subtle}` (`#dbd9d9`) - Light divider: `{colors.border-light}` (`#e5e7eb`) ### Example Component Prompts - "Build a Belmond hero section with full-bleed property photography (no border, no shadow, `{rounded.none}`). Place a `{typography.display-hero}` heading (60px Thea No Didot weight 400, `0.6px` letter-spacing, `{colors.on-primary}` white) in the lower third of the image. Below the heading: a `{components.button-ghost}` CTA with `{colors.on-surface}` white border, transparent background, `{typography.button-ui}` (13px Montserrat 500 uppercase 1.8px tracking), `10px 30px` padding. Apply a `linear-gradient(rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 100%)` scrim from the top of the image for header legibility." - "Design a Belmond property card on `{colors.background}`. Full-bleed property photograph at top (`{rounded.none}`, no shadow). Below: a `{typography.caption}` experience-type label in `{colors.ink-quiet}` (10px Montserrat 400 uppercase `0.6px` tracking), a `{typography.heading-sub}` property name in `{colors.ink}` (16px Montserrat 700, `1.3` line-height), a `{typography.body}` destination line in `{colors.ink-muted}` (13px Montserrat 300 `1.8` line-height `0.6px` tracking). Internal text padding `{spacing.md}` (20px)." - "Create the Belmond 'Explore Belmond Stories' CTA: `{colors.primary}` black background, `{colors.on-primary}` white text, `{typography.button-ui}` (13px Montserrat 500 uppercase `1.8px` letter-spacing), `{rounded.none}`, `10px 30px` padding, `1px solid {colors.border}` border. Hover state shifts to `{colors.primary-hover}` (`#2a2a2a`)." - "Build the Belmond navigation bar. White surface `{colors.background}`. Left: SVG wordmark. Center: horizontal row of `{typography.nav-link}` links (13px Montserrat 500 uppercase `1.2px` tracking, `{colors.ink}`). Right: outlined `{components.button-secondary}` with transparent fill, `{colors.border}` 1px solid border, same typography. No border-bottom. Apply `transition: color 0.5s ease, background-color 0.2s ease` for the scroll-state crossfade from transparent/white (over hero) to opaque white." - "Design a Belmond booking input: `transparent` background, `{colors.border-subtle}` bottom-only `1px solid` border at rest, `{colors.focus-ring}` `1px solid` on all sides at focus (no glow, no color fill), `{rounded.none}`, `{typography.body}` 13px Montserrat 300 `0.6px` tracking in `{colors.ink}`, `padding: 0px 0px 5px`. Select dropdowns share the same treatment with `{colors.border-light}` underlining on light sections." - "Create a Belmond experience category badge: `{colors.surface-warm}` fill, `{colors.ink-muted}` text, `{typography.caption}` (10px Montserrat 400 uppercase `0.6px` letter-spacing), `{rounded.none}` sharp corners, `4px 10px` padding. Labels: 'Train Journey', 'River Cruise', 'Hotel & Resort', 'Private Villa'." ### Iteration Guide 1. Start with `{colors.background}` (`#ffffff`) pure white as the invariant canvas — any warmth comes from photography, never from surface color. 2. Select typeface by function: Thea No Didot (or Playfair Display as substitute) for every element that names a place or sets an atmosphere; Montserrat for every element that directs a guest. 3. All Montserrat UI chrome is uppercase with positive letter-spacing — `1.2px` for nav, `1.8px` for buttons, `0.6px` for body. The tracking is what gives utility text its engraved quality. 4. Buttons are `{rounded.none}` sharp rectangles — black-filled on white canvas, ghost-white on photography. No intermediate or rounded variants. 5. There is no brand accent color. The chromatic depth of the system lives entirely in the photography. The chrome is black on white. 6. Monochrome means consistent: `{colors.border-subtle}` hairlines for structure, `{colors.ink-quiet}` for captions and meta, never raw Tailwind grey tones for brand surfaces. 7. Section spacing is generous by design: `{spacing.2xl}` (80px) minimum between editorial blocks. The luxury signal is in the empty intervals. 8. The hero scrim (`linear-gradient(rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 100%)`) is the only non-flat effect permitted in the brand layer. Use it only when Didot display text sits directly on photography that would otherwise make it illegible. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Belmond. Brand names and trademarks belong to their respective owners.