Styleguide
Le design system du projet : ses emplacements, ses tokens et ses composants. Cette page sert de référence à l'équipe et de validation au client.
Éléments d'identité
Le logo dans les trois contextes où il apparaît. Chaque variante retombe sur la précédente quand le fichier n'est pas fourni.
Logo principal. En-tête, documents, favicon.
Pied de page et sections en surface accent.
En-tête condensé au scroll, mobile, avatars.
Les trois surfaces
Le rythme des fonds d'une page. Sans elles, huit sections transparentes s'enchaînent sans respiration et le site paraît plat quelle que soit la palette.
Fond de page. Doit rester majoritaire.
Isole un bloc de son voisinage.
Moment fort. Une à deux sections par page.
Palette
Valeurs lues sur la page, jamais recopiées : la légende ne peut pas diverger du code.
Marque
Surfaces et texte
États
Fonctionnels, jamais redefinis par un styleguide : un rouge d'erreur qui change de sens d'un projet a l'autre est un piege.
Typographie et titres
Trois classes fluid couvrent toute la hiérarchie. Les tailles statiques restent réservées aux composants UI.
Un titre avec un mot accentué
La marque se trace à l'entrée du titre dans le viewport. C'est l'animation d'entrée des titres de section : un seul geste porte le mouvement et le traitement typographique. Le dévoilement en rideau reste réservé au titre principal de la page, sinon il perd son impact.
Boutons
Survolez : le remplissage signature glisse depuis la gauche.
Survol signature
Variantes
Tailles
États
Cartes et survol signature
Le même geste sur toutes les cartes du site : services, témoignages, articles. C'est ce qui rend un site reconnaissable au-delà de sa palette.
Carte simple
Titre et description. Le trait d'accent se déploie au survol.
Avec badge
NouveauUn badge marque un statut sans casser la hiérarchie du titre.
Signature de marque
L'élément décoratif récurrent du projet. Il apparaît sous chaque titre de section, dans les en-têtes de page et en texture de fond des sections accent.
Trois largeurs. Centré par défaut, aligné à gauche dans les en-têtes de page.
Texture de fond, toujours discrete et jamais dans le flux. Elle s'adapte a la surface qui la porte.
Composants en contexte
Badges, alertes et formulaire tels qu'ils apparaissent réellement dans une page.
Badges
Formulaire
Tout ensemble
Surface accent, texture de marque, titre de section, signature et bouton signature : c'est la combinaison qui clôt une page.
Nous contacter