Analyse du design system

belmond.com

belmond.com is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(208, 1, 27) as the high-saturation accent for primary actions. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Montserrat as the primary typeface. A layered elevation system (5 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 48 keyframe animations plus transition-driven interactions.

Accent #d0011b · police principale Montserrat

Chaque valeur ci-dessous est vérifiée à la capture. getdesign.md décrit — prismd montre : chaque couleur, police et courbe ici a été lue via getComputedStyle() sur le rendu réel capturé à droite, jamais affirmée à la main.

Rapport DESIGN.md complet · light & dark · fichiers tokens · Paiement non activé — on mesure la demande d’abord.

https://www.belmond.com ·extrait le 2026-07-16 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

Mobile

Couleurs — rôles, sémantique & recensement complet

26 couleurs mesurées · clique une pastille pour copier

Canvas

#ffffff

AAA 18.88:1

Ink

#111111

AAA 18.88:1

Accent

#d0011b

AA 5.67:1

Line

#757575

AA 4.61:1

États sémantiques

Aucune couleur d’état sémantique détectée — ce système signale l’état par le poids & le motion, pas la teinte.

26 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

4 rôles · rendu live dans la vraie Montserrat (woff2 capturé) · lignes éditables, clique une spec pour copier

display xl

display-xl60px · 500

display md

display-md14px · 500 · ×4.29

body

body10px · 400 · ×1.40

button

button13px · 300 · ×0.77

Espacements & arrondis, rendus spatiaux

9 paliers d’espacement · 7 arrondis · barres = largeurs px exactes

Échelle d’espacement

xxs · 2px

xs · 5px

sm · 10px

md · 20px

base · 30px

lg · 60px

xl · 88px

2xl · 96px

3xl · 104px

Arrondis

none
0px

xs
3px

sm
17px

md
20px

lg
50px

xl
58px

full
9999px

Profondeur — l’élévation est extraite, pas inventée

5 ombres mesurées sur la page live · clique une tuile pour copier sa valeur brute

shadow-2

shadow-4

shadow-5

Motion — courbes, transitions & keyframes réels

0 courbes d’easing · 48 keyframes · survole une tuile pour prévisualiser

48 animations keyframes extraites

fadein

arrow-bounce

fadeIn

fadeOut

slideInLeft

slideInRight

slideOutLeft

slideOutRight

fadeInHeaderBg

slideProductSideNavInFromLeft

slideProductSideNavOutFromRight

fadeInProductSideNavVeilFromRight

Composants — le vocabulaire fermé

13 familles de composants · 57 variantes comptées sur le DOM live

Composant	Variantes
buttons	×10
reservation Card	×10
footer Links	×8
heading H3	×7
accordion	×6
heading H2	×4
inputs	×3
cta Banner	×3
badges	×2
search Bar	×1
heading H1	×1
links	×1
divider	×1

Specs de style des composants (§4)déplier

Buttons

Outline

Background: transparent
Text: #ffffff {colors.on-primary}
Padding: 10px 30px
Radius: 0px
Border: 1px solid rgb(255, 255, 255)
Font: 13px weight 500
Use: Secondary action with border
Focus: outline: rgb(0, 0, 0) dotted 2px

Icon Button

Background: transparent
Text: #000000
Padding: 0px
Radius: 50%
Border: 1px solid rgb(0, 0, 0)
Font: 10px weight 400
Use: Toolbar/UI icons
Focus: outline: rgb(0, 0, 0) dotted 2px

Ghost

Background: transparent
Text: #000000
Padding: 2.5px 0px
Radius: 0px
Font: 13px weight 500
Use: Subtle action, toolbar, nav button
Focus: outline: rgb(0, 0, 0) dotted 2px

Icon Button

Background: #000000
Text: #000000
Padding: 0px
Radius: 0px
Border: 2px solid rgb(0, 0, 0)
Font: 10px weight 400
Use: Toolbar/UI icons
Focus: outline: rgb(0, 0, 0) dotted 2px

Inputs & Forms

Text Input

Background: transparent
Text: #000000
Padding: 5px 0px
Radius: 0px
Border: 1px solid border-color
Font: 13px weight 300
Use: Text fields, search inputs

CTA Banners

Full-width CTA

Background: transparent
Text: #000000
Padding: 2.5px 0px
Radius: 0px
Font: 13px weight 500

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1200px

header Height172px

sidebar Width0px

gap16px

container Padding0px

Responsive — vrais breakpoints

56 points de rupture lus dans le CSS live

24px

25px

46px

62px

78px

330px

350px

376px

400px

415px

419px

425px

426px

449px

450px

460px

465px

472px

480px

500px

530px

550px

560px

575px

600px

601px

602px

613px

634px

640px

700px

767px

768px

769px

800px

830px

896px

900px

1023px

1024px

1025px

1200px

1201px

1202px

1280px

1336px

1350px

1366px

1440px

1600px

1601px

1640px

1801px

1840px

1920px

2240px

À faire / À éviter

14 règles applicables, verbatim de la spec

À faire

Use Montserrat as the primary typeface — it defines the brand personality

Keep font weights between 300-500 — the system uses a narrow weight range for subtle hierarchy

Use the extracted shadow patterns for elevation — they are tuned to match the brand palette

Use M Tricolor Red (`#d0011b`) as the primary accent — it's the brand's signature interactive color

Respect the 5px–88px spacing range — the design uses a wide scale for visual breathing room

Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar

Use a single primary CTA in the hero — the design intentionally avoids choice paralysis

Each card includes a none image — imagery is part of the card identity, not optional

Include a newsletter signup in the footer — email capture is part of the conversion funnel

Build a content-dense footer (4 columns, ~22 links) — this site treats the footer as a sitemap, not an afterthought

À éviter

Don't substitute with generic sans-serif or serif — the custom font carries the brand

Don't reach for weight 700 (bold) or above — 500 is the heaviest weight this design paints

Don't invent new shadow values — use only the extracted shadow levels

Don't introduce additional saturated accent colors — the palette is intentionally controlled

Guide agent & export

Prompt prêt à coller + les vrais fichiers derrière cette page

Construis une UI dans le design system de belmond.com. Fond #ffffff · encre #111111 · accent #d0011b. Typo : Montserrat — respecte l’échelle taille/graisse du §3. Arrondis, espacements, ombres : uniquement les échelles extraites (aucun nombre magique). La spec complète suit — colle le DESIGN.md ci-dessous dans ton agent.

Chaque valeur ci-dessus est vérifiée par getComputedStyle.

$ npx prism-design add belmond

DESIGN.md · narrative spec tokens.json