Couleurs

Créer un Design System

Transformez les combos AVS en un design system cohérent pour votre application.

Pourquoi ce sujet est important

Un design system basé sur les couleurs AVS garantit une cohérence visuelle tout en respectant l'héritage culturel africain. Suivez ces étapes pour créer votre propre système.

Explication

Étape 1 : Choisir un Combo Principal

Sélectionnez un combo qui correspond à l'identité de votre marque. Par exemple, AVS Core pour une identité standard, ou Kente Asante pour une touche royale.

Étape 2 : Définir les Tokens de Couleur

Créez des tokens sémantiques basés sur les rôles :

globals.css

:root {
  /* Brand Colors */
  --color-brand-primary: var(--avs-primary);
  --color-brand-secondary: var(--avs-secondary);
  
  /* UI Colors */
  --color-action-primary: var(--avs-primary);
  --color-action-secondary: var(--avs-secondary);
  --color-action-accent: var(--avs-accent);
  
  /* Feedback Colors */
  --color-success: var(--avs-primary);
  --color-warning: var(--avs-accent);
  --color-info: var(--avs-mist);
}

Étape 3 : Créer des Variantes

Générez des variantes de luminosité pour chaque couleur :

globals.css

:root {
  --avs-primary-50: #F5EBE0;
  --avs-primary-100: #E8D5C9;
  --avs-primary-200: #D4B8A6;
  --avs-primary-300: #C09B83;
  --avs-primary-400: #C0573E;  /* base */
  --avs-primary-500: #A84632;
  --avs-primary-600: #8B3A2A;
  --avs-primary-700: #6E2E22;
  --avs-primary-800: #522218;
  --avs-primary-900: #35160E;
}

Étape 4 : Appliquer aux Composants

Utilisez les tokens dans vos composants :

components.css

/* Button Component */
.btn-primary {
  background: var(--color-action-primary);
  color: var(--avs-secondary);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
}

.btn-primary:hover {
  background: var(--avs-primary-600);
}

/* Card Component */
.card {
  background: var(--avs-secondary);
  border: 1px solid var(--avs-primary-200);
  border-radius: 1rem;
}

.card-header {
  color: var(--avs-accent);
}

Étape 5 : Documentation et Maintenance

Documentez vos choix de couleurs avec leurs significations culturelles. Cela aide les nouveaux développeurs à comprendre le contexte et maintient la cohérence du design system.

Intégration Palette Principale