Couleurs

Palette de couleurs utilisee dans tout le dashboard.

Primary (Indigo)

Gray

Couleurs semantiques

Typographie

Hierarchie typographique et styles de texte.

Boutons

Tous les styles de boutons utilises dans le dashboard.

Variantes

<button class="px-4 py-2 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700">Primary</button>
<button class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200">Secondary</button>
<button class="px-4 py-2 text-sm font-medium text-red-600 bg-red-50 rounded-lg hover:bg-red-100">Danger</button>
<button class="px-4 py-2 text-sm font-medium text-gray-700 border border-gray-200 rounded-lg hover:bg-gray-50">Outline</button>

Tailles

<button class="px-3 py-1.5 text-xs ...">Small</button>
<button class="px-4 py-2 text-sm ...">Medium</button>
<button class="px-6 py-2.5 text-base ...">Large</button>

Etats

<button class="... opacity-50 cursor-not-allowed" disabled>Disabled</button>
<button class="...">
  <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
  Loading
</button>

Avec icone

<button class="inline-flex items-center px-4 py-2 bg-primary-600 text-white text-sm font-medium rounded-lg">
  <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
  </svg>
  Nouveau flux
</button>

Cards

Conteneurs principaux du dashboard.

<div class="bg-white rounded-xl shadow-sm p-5">
  <div class="flex items-center justify-between mb-3">
    <span class="text-xs font-semibold uppercase tracking-wider text-gray-500">Abonnes</span>
    <svg class="w-5 h-5 text-primary-600" ...>...</svg>
  </div>
  <p class="text-3xl font-bold text-gray-900">1,247</p>
  <p class="text-xs text-gray-500 mt-1">Abonnes actifs</p>
</div>

Formulaires

Champs de saisie et controles de formulaire.

<div>
  <label class="block text-sm font-medium text-gray-700 mb-1">Label</label>
  <input type="text" placeholder="..." class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent">
  <p class="text-xs text-gray-400 mt-1">Hint text</p>
</div>

Badges / Tags

Indicateurs visuels de statut, priorite et categorie.

Statut

<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Publie</span>
<span class="... bg-blue-100 text-blue-800">Planifie</span>
<span class="... bg-gray-100 text-gray-800">Brouillon</span>
<span class="... bg-red-100 text-red-800">Annule</span>

Priorite

<span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-orange-100 text-orange-800">Haute</span>

Type et Plan

Tag avec couleur

Alertes

Messages contextuels pour informer l'utilisateur.

<div class="bg-green-50 border border-green-200 rounded-lg p-4">
  <div class="flex">
    <svg class="w-5 h-5 text-green-400 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
    </svg>
    <p class="text-sm text-green-700">Message de succes.</p>
  </div>
</div>

Toasts

Notifications ephemeres en haut a droite de l'ecran.

<!-- Container (fixe en haut a droite) -->
<div id="toastContainer" class="fixed top-4 right-4 z-[9999] space-y-2"></div>

<!-- Toast Success -->
<div class="bg-green-600 text-white px-4 py-3 rounded-lg shadow-lg text-sm font-medium">
  Notification envoyee avec succes
</div>

<!-- Toast Error -->
<div class="bg-red-600 text-white px-4 py-3 rounded-lg shadow-lg text-sm font-medium">
  Une erreur est survenue
</div>

<!-- Toast Info -->
<div class="bg-blue-600 text-white px-4 py-3 rounded-lg shadow-lg text-sm font-medium">
  Flux cree avec succes
</div>

Modals

Fenetres modales pour les confirmations et formulaires.

Modal standard

Modal de confirmation (danger)

<!-- Overlay -->
<div class="fixed inset-0 bg-black bg-opacity-50 z-[9998] flex items-center justify-center p-4">
  <!-- Modal -->
  <div class="bg-white rounded-2xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
    <div class="p-6">
      <h3 class="text-lg font-semibold text-gray-900 mb-4">Titre</h3>
      <p class="text-sm text-gray-600 mb-6">Description</p>
      <div class="flex justify-end gap-3">
        <button class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg">Annuler</button>
        <button class="px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-lg">Confirmer</button>
      </div>
    </div>
  </div>
</div>

Etats speciaux

Empty states, loading, skeletons, et erreurs.

<div class="text-center py-12">
  <svg class="w-12 h-12 text-gray-300 mx-auto mb-4" ...>...</svg>
  <p class="text-sm text-gray-500">Aucun flux pour le moment.</p>
  <p class="text-xs text-gray-400 mt-1">Creez votre premier flux.</p>
  <button class="... mt-4">Creer un flux</button>
</div>

<!-- Skeleton -->
<div class="bg-white rounded-xl shadow-sm p-5 animate-pulse">
  <div class="h-3 bg-gray-200 rounded w-20 mb-3"></div>
  <div class="h-8 bg-gray-200 rounded w-16 mb-2"></div>
  <div class="h-3 bg-gray-200 rounded w-28"></div>
</div>

Navigation

Sidebar et navigation du dashboard.

<!-- Active -->
<a class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg bg-primary-50 text-primary-700">
  <svg class="w-5 h-5 mr-3" ...>...</svg>
  Tableau de bord
</a>

<!-- Inactive -->
<a class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-50 hover:text-gray-900">
  <svg class="w-5 h-5 mr-3" ...>...</svg>
  Mes Flux
</a>

Icones

Icones SVG utilisees dans le dashboard. Toutes utilisent fill="none" stroke="currentColor" viewBox="0 0 24 24".

Grilles

Patterns de layout responsifs utilises dans le dashboard.

1 colonne

2 colonnes — grid grid-cols-1 md:grid-cols-2 gap-4

3 colonnes — grid grid-cols-1 md:grid-cols-3 gap-4

4 colonnes — grid grid-cols-2 md:grid-cols-4 gap-4

Breakpoints responsifs