yummy.fr
yummy.fr is built on a pure-white canvas (rgb(255,255,255)). The system uses rgb(237, 17, 112) as the high-saturation accent for primary actions. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside wfont_5757df_4f4024cbe78a492b905ca96549cc2d14 as the primary typeface. 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 — 18 keyframe animations plus transition-driven interactions.
Accent #ed1170 · police principale メイリオ
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
8 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
24px
32px
40px
48px
56px
9999px
Motion — courbes, transitions & keyframes réels
1 courbe d’easing · 18 keyframes · survole une tuile pour prévisualiser
Composants — le vocabulaire fermé
11 familles de composants · 40 variantes comptées sur le DOM live
| Composant | Variantes |
|---|---|
| buttons | ×10 |
| links | ×10 |
| footer Links | ×5 |
| inputs | ×3 |
| badges | ×2 |
| nav Links | ×2 |
| heading H2 | ×2 |
| heading H3 | ×2 |
| heading H6 | ×2 |
| heading H4 | ×1 |
| heading H5 | ×1 |
Specs de style des composants (§4)déplier
Buttons
Light / Invert
- Background:
#ffffff{colors.on-primary} - Text:
#116dff{colors.primary-focus} - Padding: 0px 24px
- Radius: 24px
- Font: 14px weight 400
- Use: Bright CTA on dark sections
- Focus: border:
2px solid rgb(17, 109, 255), opacity:1, outline:rgb(17, 109, 255) none 3px
Ghost
- Background:
transparent - Text:
#959595 - Padding: 0px
- Radius: 24px
- Font: 14px weight 400
- Use: Subtle action, toolbar, nav button
- Focus: border:
2px solid rgb(17, 109, 255), opacity:1, outline:rgb(17, 109, 255) none 3px
Outline
- Background:
transparent - Text:
#0000ee - Padding: 0px
- Radius: 0px
- Border: 2px solid rgb(255, 255, 255)
- Font: 10px weight 400
- Use: Secondary action with border
- Focus: border:
2px solid rgb(17, 109, 255), opacity:1, outline:rgb(17, 109, 255) none 3px
Light / Invert
- Background:
#ffffff{colors.on-primary} - Text:
#2f2e2e{colors.hairline} - Padding: 7px 7px 7px 12px
- Radius: 0px
- Border: 1px solid rgba(47, 46, 46, 0.6)
- Font: 16px weight 400
- Use: Bright CTA on dark sections
- Focus: border:
2px solid rgb(17, 109, 255), opacity:1, outline:rgb(17, 109, 255) none 3px
Primary Brand
- Background:
#ed1170{colors.primary} - Text:
#ffffff{colors.on-primary} - Padding: 12px 16px
- Radius: 0px
- Font: 16px weight 400
- Use: Primary CTA / brand action
- Focus: border:
2px solid rgb(17, 109, 255), opacity:1, outline:rgb(17, 109, 255) none 3px
Primary Brand
- Background:
transparent - Text:
#0000ee - Padding: 0px
- Radius: 0px
- Border: 2px solid rgb(47, 46, 46)
- Font: 10px weight 400
- Use: Primary CTA / brand action
- Focus: border:
2px solid rgb(17, 109, 255), opacity:1, outline:rgb(17, 109, 255) none 3px
Inputs & Forms
Mise en page — structure & dimensions
5 métriques de layout mesurées
Responsive — vrais breakpoints
système fluide — aucun palier dur
Aucun breakpoint @media distinct capturé au passage desktop/mobile — ce layout est fluide, il s’adapte par ratio plutôt que par paliers durs.
À faire / À éviter
12 règles applicables, verbatim de la spec
Guide agent & export
Prompt prêt à coller + les vrais fichiers derrière cette page