cultureespresso.com
cultureespresso.com is built on a near-black canvas (rgb(0, 0, 0)). Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside sofia-pro as the primary typeface. Sofia-pro is paired with bebas-neue for secondary roles. Depth comes from borders and surface contrast rather than shadows — a flat, structural elevation model. Interactions are smoothed by transitions across many elements, with little or no keyframe animation.
Accent #0066ff · police principale sofia-pro
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
6 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.
Typographie — l’échelle, dans la vraie police
5 rôles · fallback système — aucun 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
14px
20px
32px
9999px
Motion — courbes, transitions & keyframes réels
2 courbes d’easing · 1 keyframes · survole une tuile pour prévisualiser
Composants — le vocabulaire fermé
15 familles de composants · 29 variantes comptées sur le DOM live
| Composant | Variantes |
|---|---|
| nav Links | ×6 |
| links | ×6 |
| badges | ×2 |
| heading H3 | ×2 |
| eyebrow Labels | ×2 |
| code Block | ×2 |
| buttons | ×1 |
| cards | ×1 |
| status Badge | ×1 |
| testimonial | ×1 |
| heading H1 | ×1 |
| heading H2 | ×1 |
| divider | ×1 |
| breadcrumb | ×1 |
| price Tag | ×1 |
Specs de style des composants (§4)déplier
Buttons
Ghost
- Background:
transparent - Text:
#a8a8a8{colors.ink-muted} - Padding: 8px
- Radius: 0px
- Font: 17px weight 400
- Use: Subtle action, toolbar, nav button
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
11 règles applicables, verbatim de la spec
Guide agent & export
Prompt prêt à coller + les vrais fichiers derrière cette page