loustautoulon.fr
loustautoulon.fr is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(227, 203, 32) as the high-saturation accent for primary actions. Generously rounded CTAs (100px) suggest approachable, content-first design alongside Titan One as the primary typeface. Titan One is paired with Poppins for secondary roles. A restrained elevation system (1 distinct shadow) — shadows reserved for the few elements that must lift off the page. Motion is a first-class concern — 5 keyframe animations plus transition-driven interactions.
Accent #e3cb20 · 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.
Couleurs — rôles, sémantique & recensement complet
12 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.
12 couleurs extraites du rendu livedéplier
Typographie — l’échelle, dans la vraie police
6 rôles · rendu live dans la vraie Inter (woff2 capturé) · lignes éditables, clique une spec pour copier
Espacements & arrondis, rendus spatiaux
9 paliers d’espacement · 7 arrondis · barres = largeurs px exactes
0px
3px
12px
100px
108px
116px
9999px
Profondeur — l’élévation est extraite, pas inventée
1 ombres mesurées sur la page live · clique une tuile pour copier sa valeur brute
Motion — courbes, transitions & keyframes réels
0 courbes d’easing · 5 keyframes · survole une tuile pour prévisualiser
Composants — le vocabulaire fermé
12 familles de composants · 34 variantes comptées sur le DOM live
| Composant | Variantes |
|---|---|
| links | ×10 |
| buttons | ×5 |
| nav Links | ×3 |
| heading H1 | ×3 |
| footer Links | ×2 |
| heading H2 | ×2 |
| heading H3 | ×2 |
| heading H4 | ×2 |
| divider | ×2 |
| status Badge | ×1 |
| heading H5 | ×1 |
| heading H6 | ×1 |
Specs de style des composants (§4)déplier
Buttons
Subtle
- Background:
rgba(0, 0, 0, 0.05) - Text:
#494c4f - Padding: 8px
- Radius: 3px
- Font: 16px weight 400
- Use: Quiet action against page bg
Pill
- Background:
transparent - Text:
#ffffff{colors.background} - Padding: 16px 55px
- Radius: 100px
- Border: 1px solid rgb(227, 203, 32)
- Font: 16px weight 400
- Use: Status pills, tags, chips
Secondary
- Background:
#7e8b6b - Text:
#ffffff{colors.background} - Padding: 12px 24px
- Radius: 3px
- Font: 16px weight 400
- Use: Secondary action
Primary Brand
- Background:
#e3cb20{colors.primary} - Text:
#f9f2e5{colors.surface-2} - Padding: 12px 24px
- Radius: 3px
- Font: 16px weight 400
- Use: Primary CTA / brand action
Ghost
- Background:
transparent - Text:
#9db28b - Padding: 0px
- Radius: 3px
- Font: 16px weight 400
- Use: Subtle action, toolbar, nav button
Primary Brand
- Background:
#e3cb20{colors.primary} - Text:
#ffffff{colors.background} - Padding: 12px 24px
- Radius: 3px
- Font: 16px weight 400
- Use: Primary CTA / brand action
Navigation
Main Nav
- Background:
#ffffff{colors.background} - Padding: 16px 115.188px
- Radius: none
- Font: 16px weight 500
- Use: Fixed/sticky flex nav — N/A items
- Hover: color:
#9db28b, border:0px none rgb(157, 178, 139), borderColor:#9db28b
Mise en page — structure & dimensions
5 métriques de layout mesurées
Responsive — vrais breakpoints
13 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