auxlyonnais.com
auxlyonnais.com is built on a mid-light canvas (rgb(240, 225, 191)). The system uses rgb(142, 19, 20) as the accent for primary actions and brand signals. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Marcellus as the primary typeface. Marcellus is paired with Montserrat for secondary roles. A restrained elevation system (2 distinct shadows) — shadows reserved for the few elements that must lift off the page. Motion is a first-class concern — 15 keyframe animations plus transition-driven interactions.
Accent #8e1314 · police principale Special Elite
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.
Couleurs — rôles, sémantique & recensement complet
17 couleurs mesurées · clique une pastille pour copier
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
7 rôles · rendu live dans la vraie Special Elite (woff2 capturé) · lignes éditables, clique une spec pour copier
Espacements & arrondis, rendus spatiaux
9 paliers d’espacement · 7 arrondis · barres = largeurs px exactes
0px
4px
5px
23px
150px
158px
9999px
Profondeur — l’élévation est extraite, pas inventée
2 ombres mesurées sur la page live · clique une tuile pour copier sa valeur brute
Motion — courbes, transitions & keyframes réels
1 courbe d’easing · 15 keyframes · survole une tuile pour prévisualiser
Composants — le vocabulaire fermé
13 familles de composants · 45 variantes comptées sur le DOM live
| Composant | Variantes |
|---|---|
| buttons | ×10 |
| nav Links | ×5 |
| cta Banner | ×5 |
| links | ×5 |
| footer Links | ×4 |
| heading H2 | ×4 |
| heading H6 | ×3 |
| status Badge | ×2 |
| heading H4 | ×2 |
| heading H5 | ×2 |
| cards | ×1 |
| badges | ×1 |
| divider | ×1 |
Specs de style des composants (§4)déplier
Buttons
Subtle
- Background:
rgba(0, 0, 0, 0.05) - Text:
#111010 - Padding: 5.5px
- Radius: 3px
- Font: 22px weight 400
- Use: Quiet action against page bg
- Hover: outline:
rgb(142, 19, 20) none 1px - Focus: outline:
rgb(142, 19, 20) auto 0px
Ghost
- Background:
transparent - Text:
#8e1314{colors.primary-focus} - Padding: 0px 0px 1px
- Radius: 0px
- Font: 14px weight 600
- Use: Subtle action, toolbar, nav button
- Hover: outline:
rgb(142, 19, 20) none 1px - Focus: outline:
rgb(142, 19, 20) auto 0px
Pill
- Background:
#8e1314{colors.primary-focus} - Text:
#ffffff{colors.on-primary} - Padding: 14px 35px
- Radius: 23px
- Font: 14px weight 600
- Use: Status pills, tags, chips
- Hover: outline:
rgb(142, 19, 20) none 1px - Focus: outline:
rgb(142, 19, 20) auto 0px
Pill
- Background:
#f0e1bf{colors.background} - Text:
#8e1314{colors.primary-focus} - Padding: 14px 35px
- Radius: 23px
- Font: 14px weight 600
- Use: Status pills, tags, chips
- Hover: outline:
rgb(142, 19, 20) none 1px - Focus: outline:
rgb(142, 19, 20) auto 0px
Inputs & Forms
Text Input
- Background:
rgba(255, 255, 255, 0.22){colors.on-primary} - Text:
#000000 - Padding: 12px 20px
- Radius: 4px
- Border: 1px solid rgb(189, 183, 178)
- Font: 16px weight 400
- Use: Text fields, search inputs
- Hover: borderColor:
#111010 - Focus: borderColor:
rgb(17, 16, 16), boxShadow:rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset
Mise en page — structure & dimensions
5 métriques de layout mesurées
Responsive — vrais breakpoints
8 points de rupture lus dans le CSS live
À faire / À éviter
19 règles applicables, verbatim de la spec
Guide agent & export
Prompt prêt à coller + les vrais fichiers derrière cette page