Analyse du design system

aman.com

aman.com is built on a warm, off-white canvas (rgb(243, 238, 231)). The system uses rgb(64, 64, 64) as the singular interactive color. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Lyon Text Web as the primary typeface. Lyon Text Web is paired with WhitneySSm for secondary roles. Depth comes from borders and surface contrast rather than shadows — a flat, structural elevation model. Motion is a first-class concern — 17 keyframe animations plus transition-driven interactions.

Accent #404040 · police principale Lyon Display Web

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.aman.com ·extrait le 2026-07-13 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

Mobile

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

11 couleurs mesurées · clique une pastille pour copier

Canvas

#f3eee7

AAA 11.27:1

Ink

#313131

AAA 11.27:1

Accent

#404040

AAA 8.98:1

Line

#313131

AAA 11.27: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.

11 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

5 rôles · rendu live dans la vraie Lyon Display Web (woff2 capturé) · lignes éditables, clique une spec pour copier

display xl

display-xl31.08px · 400

display md

display-md10.108px · 400 · ×3.07

body

body12.32px · 400 · ×0.82

button

button14px · 400 · ×0.88

mono

mono16px · 400 · ×0.88

Espacements & arrondis, rendus spatiaux

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

Échelle d’espacement

xxs · 2px

xs · 7px

sm · 8px

md · 11px

base · 14px

lg · 25px

xl · 30px

2xl · 40px

3xl · 68px

Arrondis

none
0px

xs
4px

sm
8px

md
14px

lg
20px

xl
32px

full
9999px

Motion — courbes, transitions & keyframes réels

1 courbe d’easing · 17 keyframes · survole une tuile pour prévisualiser

Courbes & transitions

transition-1ease-in-out

17 animations keyframes extraites

rotateplane

slide-in-left

slide-fade-in-left

slide-in-right

slide-in-bottom

slide-in-top

slide-out-top

header-slide-out-top

slide-out-left

slide-out-right

slide-out-bottom

fade-in

Composants — le vocabulaire fermé

12 familles de composants · 41 variantes comptées sur le DOM live

Composant	Variantes
cards	×10
buttons	×6
footer Links	×6
cta Banner	×5
heading H3	×3
badges	×2
nav Links	×2
heading H2	×2
links	×2
eyebrow Labels	×1
captions	×1
reservation Card	×1

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

Buttons

Secondary

Background: #313131 {colors.hairline}
Text: #f3eee7 {colors.background}
Padding: 10px 15px
Radius: 0px
Border: 1px solid rgb(49, 49, 49)
Font: 14px weight 400
Use: Secondary action
Focus: color: rgb(179, 139, 91), border: 0px none rgb(179, 139, 91), borderColor: rgb(179, 139, 91)

Secondary

Background: #404040 {colors.primary-hover}
Text: #f3eee7 {colors.background}
Padding: 7.392px 33.264px
Radius: 0px
Border: 1px solid rgb(64, 64, 64)
Font: 12.32px weight 400
Use: Secondary action
Focus: color: rgb(179, 139, 91), border: 0px none rgb(179, 139, 91), borderColor: rgb(179, 139, 91)

Outline

Background: transparent
Text: #313131 {colors.hairline}
Padding: 7.392px 33.264px
Radius: 0px
Border: 1px solid rgb(170, 166, 163)
Font: 12.32px weight 400
Use: Secondary action with border
Focus: color: rgb(179, 139, 91), border: 0px none rgb(179, 139, 91), borderColor: rgb(179, 139, 91)

Inputs & Forms

Text Input

Background: #ffffff {colors.on-primary}
Text: #000000
Padding: 8px 20px 8px 7px
Radius: 0px
Border: 1px solid border-color
Font: 16px weight 400
Use: Text fields, search inputs

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1200px

header Height88px

sidebar Width0px

gap16px

container Padding0px

Responsive — vrais breakpoints

20 points de rupture lus dans le CSS live

350px

400px

425px

426px

476px

480px

481px

530px

550px

599px

600px

768px

769px

896px

1023px

1024px

1100px

1101px

1240px

1241px

À faire / À éviter

11 règles applicables, verbatim de la spec

À faire

Use Warm Cream (`#f3eee7`) as the page background — it's intentionally not pure white

Use Charcoal (`#313131`) for text — not pure black, it's warmer and more readable

Use Lyon Display Web as the primary typeface — it defines the brand personality

The system uses a single text weight (400) — hierarchy comes from size and color, not weight

Use Charcoal (`#404040`) as the primary accent — it's the brand's signature interactive color

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

À éviter

Don't use pure white (`#ffffff`) as a page background — the warm tone is part of the brand identity

Don't use pure black (`#000000`) for text — the near-black adds warmth

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

Don't introduce bolder or lighter weights — 400 is the only weight in this system

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 aman.com. Fond #f3eee7 · encre #313131 · accent #404040. Typo : Lyon Display Web — 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 aman

Repeindre ce design · éditeur live DESIGN.md · narrative spec tokens.json