Un branding minimaliste pour Genesis. Parce que même une boilerplate mérite une identité visuelle cohérente. Fait maison, sans prétention.
Palette de couleurs
Une seule couleur, déclinée en 9 nuances. Simple et efficace.
primary-100
#E2EEEA
primary-200
#BDE4D7
primary-300
#84DFC1
primary-400
#38DEA7
primary-500
#10B981
primary-600
#119A6C
primary-700
#137051
primary-800
#134836
primary-900
#0F241D
Typographie
Satoshi
Font principale pour les titres et le corps de texte.
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789
Inter
Font alternative pour certains éléments UI.
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789
Monaspace (Neon, Xenon, Argon)
Fonts monospace pour le code et les éléments techniques.
Neon
const genesis = true;
Xenon
const genesis = true;
Argon
const genesis = true;
Logos & Variantes
Logo complet
Logo texte seul
Icône
Covers & SEO
Images utilisées pour les réseaux sociaux et le SEO.
Cover light
Cover dark
Principes de design
Le branding Genesis suit trois principes simples : minimalisme, cohérence et flexibilité. Une seule couleur principale déclinée, deux fonts principales, et des formes géométriques simples.
- • Minimaliste : Pas de fioritures, juste l'essentiel
- • Cohérent : Même langage visuel partout
- • Flexible : S'adapte au light/dark mode
- • Moderne : Design actuel sans être trendy
Utilisation
Tous les assets sont dans `/public/assets/`. Les logos sont en SVG pour une qualité optimale. Les covers sont en PNG optimisé. Les favicons sont générés via Favycon.
Le système de couleurs utilise les CSS variables de TailwindCSS V4, donc tout est cohérent automatiquement. Change une couleur dans `app.css`, tout suit.
Genesis — Un branding simple pour un projet simple.