restaurantalba.fr
restaurantalba.fr is built on a dark canvas (rgb(44, 48, 55)). The system uses rgb(255, 176, 176) as the singular interactive color. Crisp CTAs (2px radius) reinforce a precise, technical aesthetic alongside Ubuntu as the primary typeface. A layered elevation system (9 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 10 keyframe animations plus transition-driven interactions.
Accent #ffb0b0 · police principale Nunito 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
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 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
8px
20px
28px
32px
9999px
Profondeur — l’élévation est extraite, pas inventée
9 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 · 10 keyframes · survole une tuile pour prévisualiser
Composants — le vocabulaire fermé
13 familles de composants · 42 variantes comptées sur le DOM live
| Composant | Variantes |
|---|---|
| nav Links | ×10 |
| links | ×10 |
| buttons | ×7 |
| divider | ×4 |
| badges | ×2 |
| footer Links | ×2 |
| heading H1 | ×1 |
| heading H2 | ×1 |
| heading H3 | ×1 |
| heading H4 | ×1 |
| eyebrow Labels | ×1 |
| captions | ×1 |
| reservation Card | ×1 |
Specs de style des composants (§4)déplier
Buttons
Secondary
- Background:
#ffb0b0{colors.primary} - Text:
#ffffff{colors.ink} - Padding: 10px 15px
- Radius: 2px
- Shadow:
rgb(0, 0, 0) 0px 2px 8px 0px - Font: 14px weight 600
- Use: Secondary action
Outline
- Background:
transparent - Text:
#ffffff{colors.ink} - Padding: 10px
- Radius: 2px
- Border: 1px solid rgb(63, 63, 65)
- Font: 14px weight 600
- Use: Secondary action with border
Icon Button
- Background:
transparent - Text:
#ffb0b0{colors.primary} - Padding: 0px
- Radius: 50%
- Border: 1px solid rgb(63, 63, 65)
- Font: 18px weight 400
- Use: Toolbar/UI icons
Inputs & Forms
Text Input
- Background:
transparent - Text:
#2c3037{colors.surface-2} - Padding: 10px
- Radius: 2px
- Border: 1px solid rgb(233, 234, 235)
- Font: 14px weight 400
- Use: Text fields, search inputs
Navigation
Main Nav
- Background:
#0f0f12 - Padding: 15px
- Radius: none
- Shadow:
rgba(44, 48, 55, 0.16) 0px 0px 40px 0px - Font: 16px weight 400
- Use: Fixed/sticky flex nav — N/A items
- Hover: color:
#ffb0b0, border:0px none rgb(255, 176, 176), borderColor:#ffb0b0 - Focus: color:
rgb(255, 254, 254), borderColor:rgb(255, 254, 254), outline:rgb(255, 254, 254)
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
20 règles applicables, verbatim de la spec
Guide agent & export
Prompt prêt à coller + les vrais fichiers derrière cette page