Design Kit

La charte SOLVIX, unifiée et prête à l'emploi.

Tokens couleur, composants réutilisables et gabarits d'illustrations , tout ce qu'il faut pour produire un contenu visuel cohérent sur chaque module, page produit et support marketing.

v1.0
45 modules couverts
Tailwind v4 · HSL tokens
01 · Couleurs

Palette sémantique

Chaque couleur a un rôle. Toujours utiliser la classe Tailwind sémantique correspondante, jamais le hex en dur.

Navy
#0a1730
--solvix-navy
Navy Deep
#06101f
sidebar
Blue
#1463d9
primary
Orange
#f97316
accent
Coral
#e94560
illustration
Success
#1ea870
success
Warning
#f5a524
warning
Danger
#e53935
destructive
Paper
#f5f7fa
background alt
Slate
#6b7a99
muted-foreground
02 · Typographie

Sora pour l'affichage, Inter pour le corps

font-display · Sora
Construire la confiance financière.
font-sans · Inter

SOLVIX réunit comptabilité, trésorerie, KYC et intelligence décisionnelle dans une plateforme unique pensée pour les entreprises ambitieuses du monde entier.

03 · Composants

Primitives de marque

Card · default

Carte standard

Ombre douce, bord neutre, padding 24px. Idéale pour features, témoignages, métriques.

Card · elevated

Carte élevée

Pour les éléments à fort poids visuel : pricing, CTA, hero secondaire.

Boutons
04 · Illustrations

Gabarit d'illustration verrouillé

Fond navy #0a1730, accent coral #e94560, surfaces glass-morphism, lumière volumétrique, marges 12 %. Utiliser buildSolvixIllustrationPrompt() pour générer toute nouvelle illustration.

Exemple CRM
Exemple Comptabilité
Exemple IA
05 · Utilisation

Import unique

import {
  SolvixSection,
  SolvixEyebrow,
  SolvixCard,
  SolvixIllustrationFrame,
  SolvixGradientText,
  buildSolvixIllustrationPrompt,
} from "@/components/brand";

<SolvixSection tone="navy">
  <SolvixEyebrow>Module</SolvixEyebrow>
  <h2>Une <SolvixGradientText>vision</SolvixGradientText> unifiée</h2>
</SolvixSection>