lapetiterockette.org is built on a pure-white canvas (rgb(255,255,255)).
The system uses rgb(31, 138, 111) as the accent for primary actions and brand signals.
Crisp CTAs (3px radius) reinforce a precise, technical aesthetic alongside league_gothicregular as the primary typeface.
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 — 28 keyframe animations plus transition-driven interactions.
Accent #1f8a6f · police principale Open 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.
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
shadow-1
shadow-2
05
Motion — courbes, transitions & keyframes réels
2 courbes d’easing · 28 keyframes · survole une tuile pour prévisualiser
Courbes & transitions
transition-1ease-out
transition-3ease-in-out
28 animations keyframes extraites
spin
rotateplane
avia_pop
avia_pop_small
avia_pop_loader
avia_shrink
av-load8
avia_appear
avia_image_appear
avia_hotspot_appear
avia_appear_short
avia_msonry_show
06
Composants — le vocabulaire fermé
10 familles de composants · 18 variantes comptées sur le DOM live
Composant
Variantes
nav Links
×3
heading H3
×3
links
×3
buttons
×2
heading H1
×2
badges
×1
footer Links
×1
heading H2
×1
heading H5
×1
eyebrow Labels
×1
Specs de style des composants (§4)déplier
Buttons
Primary Brand
Background: #1f8a6f{colors.primary}
Text: #ffffff{colors.surface-2}
Padding: 20px
Radius: 3px
Font: 19.5px weight 400
Use: Primary CTA / brand action
07
Mise en page — structure & dimensions
5 métriques de layout mesurées
max Width90%
header Height148px
sidebar Width0px
gap16px
container Padding50px 0px
08
Responsive — vrais breakpoints
15 points de rupture lus dans le CSS live
479px
480px
767px
768px
800px
900px
989px
990px
991px
992px
1140px
1199px
1200px
1340px
1800px
09
À faire / À éviter
19 règles applicables, verbatim de la spec
À faire
Use Open Sans as the primary typeface — it defines the brand personality
Keep font weights between 60-600 — the system uses a narrow weight range for subtle hierarchy
Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
Use Teal (`#1f8a6f`) as the primary accent — it's the brand's signature interactive color
Use small 3px radius for buttons — this design system uses subtle rounding, not pill shapes
Maintain nav height at 116px — consistent vertical space for the navigation bar
Respect the 4px–50px spacing range — the design uses a wide scale for visual breathing room
Include a search input directly in the nav — discoverability is a primary UX value here
Each card includes a top image — imagery is part of the card identity, not optional
Use a 8-column grid on desktop — density matters for this content type
À éviter
Don't substitute with generic sans-serif or serif — the custom font carries the brand
Don't reach for weight 700 (bold) or above — 600 is the heaviest weight this design paints
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 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
Don't over-build the footer — this design keeps it minimal (1 cols, 8 links)
10
Guide agent & export
Prompt prêt à coller + les vrais fichiers derrière cette page
Construis une UI dans le design system de lapetiterockette.org.
Fond #ffffff · encre #444444 · accent #1f8a6f.
Typo : Open 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.
