Analyse du design system

coa.com.hk

coa.com.hk is built on a pure-white canvas (rgb(255,255,255)). The system uses rgb(206, 175, 115) as the accent for primary actions and brand signals. Generously rounded CTAs (50px) suggest approachable, content-first design alongside Alegreya as the primary typeface. A layered elevation system (9 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 113 keyframe animations plus transition-driven interactions.

Accent #ceaf73 · police principale Alegreya

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

Desktop · source de vérité

Mobile

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

37 couleurs mesurées · clique une pastille pour copier

Canvas

#ffffff

AA 6.1:1

Ink

#626262

AA 6.1:1

Accent

#ceaf73

Fail 2.1:1

Line

#626262

AA 6.1:1

États sémantiques

error#cc1818

1 rôle sémantique trouvé.

37 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

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

display xl

display-xl48px · 400

display lg

display-lg38px · 400 · ×1.26

headline

headline24px · 700 · ×1.58

body

body13.3333px · 400 · ×1.80

body sm

body-sm20px · 400 · ×0.67

caption

caption40px · 400 · ×0.50

mono

mono15px · 400 · ×2.67

Espacements & arrondis, rendus spatiaux

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

Échelle d’espacement

xxs · 2px

xs · 5px

sm · 10px

md · 15px

base · 16px

lg · 23px

xl · 25px

2xl · 40px

3xl · 64px

Arrondis

none
0px

xs
4px

sm
16px

md
50px

lg
58px

xl
66px

full
9999px

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

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

shadow-1

shadow-2

shadow-3

shadow-4

shadow-5

Motion — courbes, transitions & keyframes réels

2 courbes d’easing · 113 keyframes · survole une tuile pour prévisualiser

Courbes & transitions

transition-1ease-in-out

transition-5ease-out

113 animations keyframes extraites

spin

loading-spin

if-overlay-animation

if-modern-overlay-animation

mfn-popup-open

mfnShowSticky

mfnPBSFadeIn

mfnPBSFadeOut

mfnSubmenuFadeIn

mfnSubmenuFadeInUp

mfnMmSubmenuFadeIn

mfnMmSubmenuFadeInUp

Composants — le vocabulaire fermé

18 familles de composants · 48 variantes comptées sur le DOM live

Composant	Variantes
buttons	×9
badges	×8
nav Links	×4
links	×4
heading H1	×3
heading H3	×3
heading H4	×3
inputs	×2
status Badge	×2
avatar	×2
cards	×1
footer Links	×1
heading H2	×1
heading H5	×1
heading H6	×1
divider	×1
reservation Card	×1
price Tag	×1

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

Buttons

Pill

Background: #ceaf73 {colors.primary}
Text: #ffffff {colors.surface-2}
Padding: 16px 35px
Radius: 50px
Font: 16px weight 400
Use: Status pills, tags, chips

Pill

Background: transparent
Text: #747474
Padding: 16px 35px
Radius: 50px
Font: 16px weight 400
Use: Status pills, tags, chips

Icon Button

Background: transparent
Text: #a6a6a6
Padding: 5px
Radius: 0px
Font: 20px weight 400
Use: Toolbar/UI icons

Light / Invert

Background: #f5f7f9
Text: #43474e
Padding: 8px 12px
Radius: 4px
Font: 12px weight 400
Use: Bright CTA on dark sections

Inputs & Forms

Text Input

Background: #ffffff {colors.surface-2}
Text: #000000
Padding: 25px 10px 10px 40px
Radius: 4px
Border: 1px solid rgba(32, 7, 7, 0.8)
Shadow: rgba(0, 0, 0, 0.02) 0px 0px 2px 2px inset
Font: 15px weight 400
Use: Text fields, search inputs
Focus: border: 1px solid rgb(0, 0, 0), borderColor: rgb(0, 0, 0)

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1200px

header Height100px

sidebar Width0px

gap16px

container Padding0px

Responsive — vrais breakpoints

31 points de rupture lus dans le CSS live

38px

44px

56px

59px

379px

448px

479px

480px

500px

550px

600px

673px

767px

768px

782px

783px

800px

900px

959px

960px

1040px

1110px

1168px

1218px

1239px

1240px

1430px

1440px

1441px

1489px

1921px

À faire / À éviter

14 règles applicables, verbatim de la spec

À faire

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

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

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

Use 50px border-radius on primary buttons — the brand uses generously-rounded CTAs

Style form inputs with a `1px solid rgba(32, 7, 7, 0.8)` border — use border-based inputs, not floating labels or underline-only

Place 4 pricing tiers side-by-side on desktop — direct comparison is the value prop

À éviter

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

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

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

Don't use sharp-cornered or pill buttons — 50px is the CTA border-radius standard

Don't remove the input border — the border is the primary affordance indicator for form fields

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

Don't over-build the footer — this design keeps it minimal (1 cols, 2 links)

Guide agent & export

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

Construis une UI dans le design system de coa.com.hk. Fond #ffffff · encre #626262 · accent #ceaf73. Typo : Alegreya — 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 coa

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