Analyse du design system

acehotel.com

acehotel.com is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(24, 99, 220) as the high-saturation accent for primary actions. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Toronto Gothic as the primary typeface. A layered elevation system (4 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 11 keyframe animations plus transition-driven interactions.

Accent #1863dc · police principale Bianco Sans

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://acehotel.com ·extrait le 2026-08-12 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

Mobile

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

17 couleurs mesurées · clique une pastille pour copier

Canvas

#ffffff

AAA 16.3:1

Ink

#231f20

AAA 16.3:1

Accent

#1863dc

AA 5.44:1

Line

#474747

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

17 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

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

display xl

display-xl140px · 300

display md

display-md20px · 400 · ×7.00

body

body14px · 400 · ×1.43

body sm

body-sm16px · 400 · ×0.88

button

button16px · 700 · ×1.00

Espacements & arrondis, rendus spatiaux

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

Échelle d’espacement

xxs · 2px

xs · 4px

sm · 8px

md · 12px

base · 15px

lg · 24px

xl · 27px

2xl · 47px

3xl · 62px

Arrondis

none
0px

xs
2px

sm
6px

md
50px

lg
139986px

xl
139994px

full
9999px

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

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

shadow-1

shadow-2

shadow-3

shadow-4

Motion — courbes, transitions & keyframes réels

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

11 animations keyframes extraites

bookingOverlay

widenAndFadeIn

fpFadeInDown

spin

pop

fadeIn

grow

video-loading

pgc-rev-spinner

pgc-rev-fade-in

pgc-rev-rotate

Composants — le vocabulaire fermé

17 familles de composants · 100 variantes comptées sur le DOM live

Composant	Variantes
buttons	×10
cards	×10
nav Links	×10
links	×10
accordion	×10
reservation Card	×8
heading H3	×7
inputs	×6
badges	×6
heading H2	×5
date Picker	×5
footer Links	×4
eyebrow Labels	×4
captions	×2
logo Tile	×1
heading H1	×1
divider	×1

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

Buttons

Outline

Background: transparent
Text: #1863dc {colors.primary}
Padding: 0px
Radius: 0px
Border: 2px outset rgba(255, 255, 255, 0)
Font: 14px weight 400
Use: Secondary action with border

Ghost

Background: transparent
Text: #212121
Padding: 22px 24px
Radius: 0px
Font: 14px weight 400
Use: Subtle action, toolbar, nav button

Outline

Background: #000000
Text: #ffffff {colors.on-primary}
Padding: 8px 27px
Radius: 2px
Border: 2px solid rgb(0, 0, 0)
Font: 14px weight 500
Use: Secondary action with border

Ghost

Background: transparent
Text: #231f20 {colors.ink-muted}
Padding: 1px 0px
Radius: 0px
Border: 2px solid rgba(0, 0, 0, 0)
Font: 22px weight 400
Use: Subtle action, toolbar, nav button

Secondary

Background: #231f20 {colors.ink-muted}
Text: #ffffff {colors.on-primary}
Padding: 2px 21px 0px
Radius: 0px
Font: 14px weight 400
Use: Secondary action

Inputs & Forms

Text Input

Background: transparent
Text: #231f20 {colors.ink-muted}
Padding: 0px 0px 0px 6px
Radius: 0px
Border: 1px solid border-color
Font: 14px weight 400
Use: Text fields, search inputs

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1440px

header Height96px

sidebar Width0px

gap16px

container Padding0px

Responsive — vrais breakpoints

34 points de rupture lus dans le CSS live

349px

352px

364px

365px

366px

425px

476px

500px

576px

640px

767px

768px

769px

820px

845px

899px

900px

960px

1023px

1024px

1025px

1040px

1150px

1279px

1280px

1300px

1360px

1361px

1392px

1400px

1440px

1441px

1600px

1800px

À faire / À éviter

22 règles applicables, verbatim de la spec

À faire

Use Near-Black (`#231f20`) for text — not pure black, it's warmer and more readable

Use Bianco Sans 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 negative letter-spacing (-1.4px) at display sizes for compressed, editorial headlines

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

Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)

Use M Tricolor Blue (`#1863dc`) as the primary accent — it's the brand's signature interactive color

Use small 2px radius for buttons — this design system uses subtle rounding, not pill shapes

Maintain nav height at 96px — consistent vertical space for the navigation bar

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

Use a 4-column grid on desktop — density matters for this content type

À éviter

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 reach for weight 700 (bold) or above — 500 is the heaviest weight this design paints

Don't increase letter-spacing on headings — the type is designed to run tight at scale

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

Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements

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

Don't over-round buttons with pill or large radius — the system uses restrained, sharp-ish corners

Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence

Don't make the nav sticky — this design lets it scroll away to maximize content focus

Don't put a CTA button in the nav — this design uses links only at the top

Guide agent & export

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

Construis une UI dans le design system de acehotel.com. Fond #ffffff · encre #231f20 · accent #1863dc. Typo : Bianco Sans — 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 acehotel

DESIGN.md · narrative spec tokens.json