Le guide de style.
Les couleurs, les polices, les espacements et les composants de ce site. Tout est vivant : changez le thème, essayez un accent, survolez un bouton.
Les couleurs.
Deux ambiances, sombre et claire, et quatre accents. Cliquez un accent pour l’essayer sur tout le site. Cliquez une autre couleur pour la copier.
Ambiance sombre
Ambiance claire
Accents
La typographie.
Trois polices : Archivo pour les titres, Geist pour le texte, Geist Mono pour les petites étiquettes.
Archivo
Les titres : épaisse, en majuscules, serrée. Le mot en accent s’étire.
Geist
Le texte courant, les boutons et les sous-titres. Nette et neutre.
Geist Mono
Les petites étiquettes, les dates et les chiffres de détail.
Les espacements.
Tout s’aligne sur une unité de 4 px. Les marges, les écarts et les coins suivent la même échelle.
Les boutons.
Au survol et au clic, ils répondent avec un petit mot. Essayez-les.
Les boutons grossissent un peu au survol, se tassent au clic et gardent un contour net au clavier.
Les composants.
Les pièces qu’on retrouve partout sur le site. Cliquez, ouvrez, survolez.
Étiquettes
Chiffres
- financé
- 122 %
- amassés
- 12 215 $
- contributeurs
- 45
Outils
- Figma
- Klaviyo
- Shopify
Accordéon
Le contenu glisse vers le bas et le plus devient un moins.
Chaque ligne s’ouvre seule, sans fermer les autres.
Heure de Montréal
Petites notes
Un projet de design ? Parlons‑en.
Le plus simple, c’est un courriel. Dites-moi ce que vous vendez et où vous en êtes, et on verra ensemble par où commencer.
Choisissez un sujet : le courriel s’ouvre avec un début de message déjà écrit.