Design system · 19 avril 2026

Vibrant Accessible Finance & Growth UI

Énergique, accessible, moderne, optimiste, direct

Palette

Note du directeur artistique

Ce qui unit ces trois interfaces malgré leurs univers différents, c'est une philosophie chromatique commune : le vert chartreuse électrique comme couleur de la croissance au sens littéral — la pousse, le gain, l'élan. Ce n'est pas un vert de la finance traditionnelle ni un vert du développement durable sage ; c'est un vert presque agressif dans sa vitalité, un vert qui appartient à la génération qui a grandi avec les interfaces neon de Discord et les accents de Notion, mais qui le revendique sans cynisme. Il dialogue avec le noir comme la lumière avec l'ombre : l'un donne de l'énergie, l'autre de la profondeur et de la crédibilité. Le fond crème de HeyFriends et du tennis app est une respiration intelligente — il empêche la brutalité du contraste pur blanc/noir et installe une chaleur organique, presque papier. Typographiquement, le choix d'un grotesque à fort grammage (Syne ou Space Grotesk) en display crée une présence physique sur l'écran : ces titres ne se lisent pas, ils s'affrontent. La combinaison avec un Inter en corps est une décision classique et juste — Inter est invisible dans le bon sens, il ne distrait pas du sens. Ce contraste display/body n'est pas esthétique, il est fonctionnel : il hiérarchise l'information avec une clarté immédiate, particulièrement critique dans des secteurs où la confiance doit se gagner en quelques secondes. Ce design system permet de construire une communication de marque qui ne sacrifie pas l'ambition à la simplicité, ni la jeunesse à la crédibilité. Il installe chez l'utilisateur un sentiment de compétence accessible — il leur dit silencieusement : tu es capable, nous sommes là, c'est simple. C'est rare dans des secteurs aussi chargés d'anxiété implicite que la finance ou la performance sportive, et c'est précisément là que réside sa force.

/* ── Vibrant Accessible Finance & Growth UI — Design Tokens ── */
/* Généré par Moodcast */
:root {
  /* ── Colors ── */
  --color-primary: #5DFF3B;
  --color-secondary: #1A1A1A;
  --color-ink: #111111;
  --color-background: #FFFFFF;
  --color-background-alt: #F5F0E8;
  --color-muted: #6B6B6B;
  --color-border: #E2E2E2;
  --color-accent-lime: #C8FF00;
  /* ── Typography ── */
  --font-display: 'Syne', sans-serif;
  --font-body:    'Inter', sans-serif;
  /* ── Border radius ── */
  --radius-sm: 100px;
  --radius-md: 100px;
  --radius-lg: 100px;
  --radius-xl: 100px;
}

Made with Moodcast

Ton moodboard → un design system complet.

Importe tes images d'inspiration. Claude analyse, extrait la palette, les typos et le vibe — et génère un fichier design.md prêt à coller dans ton projet.