deliveroo.fr
deliveroo.fr is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(0, 204, 188) as the high-saturation accent for primary actions. Crisp CTAs (4px radius) reinforce a precise, technical aesthetic alongside stratos as the primary typeface. A layered elevation system (10 distinct shadows) building a clear front-to-back hierarchy. Interactions are smoothed by transitions across many elements, with little or no keyframe animation.
Accent #00ccbc · police principale plex-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.
Couleurs — rôles, sémantique & recensement complet
44 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.
44 couleurs extraites du rendu livedéplier
Typographie — l’échelle, dans la vraie police
5 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
4px
16px
17px
20px
24px
9999px
Profondeur — l’élévation est extraite, pas inventée
10 ombres mesurées sur la page live · clique une tuile pour copier sa valeur brute
Motion — courbes, transitions & keyframes réels
2 courbes d’easing · 2 keyframes · survole une tuile pour prévisualiser
Composants — le vocabulaire fermé
8 familles de composants · 31 variantes comptées sur le DOM live
| Composant | Variantes |
|---|---|
| buttons | ×10 |
| nav Links | ×6 |
| links | ×6 |
| footer Links | ×4 |
| inputs | ×2 |
| heading H1 | ×1 |
| heading H2 | ×1 |
| heading H3 | ×1 |
Specs de style des composants (§4)déplier
Buttons
Ghost
- Background:
transparent - Text:
#2e3333{colors.hairline} - Padding: 0px
- Radius: 3px
- Font: 16px weight 400
- Use: Subtle action, toolbar, nav button
- Focus: boxShadow:
rgba(0, 204, 188, 0.3) 0px 0px 0px 3px
Primary Brand
- Background:
#00ccbc{colors.primary-focus} - Text:
#ffffff{colors.background} - Padding: 8px 16px
- Radius: 4px
- Border: 1px solid rgb(0, 204, 188)
- Font: 13.3333px weight 400
- Use: Primary CTA / brand action
- Focus: boxShadow:
rgba(0, 204, 188, 0.3) 0px 0px 0px 3px
Light / Invert
- Background:
#ffffff{colors.background} - Text:
#2e3333{colors.hairline} - Padding: 8px 16px
- Radius: 4px
- Border: 1px solid rgb(232, 235, 235)
- Font: 13.3333px weight 400
- Use: Bright CTA on dark sections
- Focus: boxShadow:
rgba(0, 204, 188, 0.3) 0px 0px 0px 3px
Pill
- Background:
transparent - Text:
#000000 - Padding: 2px 16px
- Radius: 16px
- Font: 13.3333px weight 400
- Use: Status pills, tags, chips
- Focus: boxShadow:
rgba(0, 204, 188, 0.3) 0px 0px 0px 3px
Inputs & Forms
Text Input
- Background:
#ffffff{colors.background} - Text:
#000000 - Padding: 12px 16px 12px 40px
- Radius: 20px
- Border: 0px none rgb(0, 0, 0)
- Shadow:
rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset - Font: 16px weight 400
- Use: Text fields, search inputs
- Focus: border:
1px solid rgb(232, 235, 235), borderColor:rgb(232, 235, 235)
Mise en page — structure & dimensions
5 métriques de layout mesurées
Responsive — vrais breakpoints
15 points de rupture lus dans le CSS live
À faire / À éviter
17 règles applicables, verbatim de la spec
Guide agent & export
Prompt prêt à coller + les vrais fichiers derrière cette page