Vue d'ensemble

Le Design System Station Créative est un ensemble complet de composants, tokens et guidelines pour créer des expériences cohérentes et accessibles. Approche par usage avec couleurs HEX optimisées, typographie Bricolage Grotesque + Work Sans, dark-first avec support light mode complet.

🎨 Cohérence

Tokens de design unifiés pour garantir une cohérence visuelle sur tous les projets WordPress et Laravel.

♿ Accessible

Tous les composants respectent les guidelines WCAG 2.1 niveau AA avec des contrastes optimisés.

🌓 Dark + Light

Support complet des modes dark et light avec des tokens adaptatifs et des transitions fluides.

Installation

Intégrez rapidement le Design System dans vos projets WordPress ou Laravel.

WordPress (CSS Classique)

<!-- Dans functions.php -->
function sc_enqueue_design_system() {
    wp_enqueue_style('sc-tokens', get_template_directory_uri() . '/css/tokens.css');
    wp_enqueue_style('sc-components', get_template_directory_uri() . '/css/components.css');
    wp_enqueue_style('sc-dashboard', get_template_directory_uri() . '/css/dashboard-components.css');
    wp_enqueue_style('sc-marketing', get_template_directory_uri() . '/css/marketing-components.css');
}
add_action('wp_enqueue_scripts', 'sc_enqueue_design_system');

Laravel (Tailwind CSS)

// Copier tailwind.config.js dans votre projet Laravel
// Puis dans app.css:
@import 'tokens.css';

// Pour Livewire/Blade, utiliser les classes Tailwind personnalisées
// Pour Alpine.js, les composants sont compatibles

Couleurs

Palette de couleurs Station Créative avec approche par usage. Couleurs de marque en HEX optimisées pour le punch visuel, sémantiques basées sur Tailwind, neutres Slate. Support dark/light mode avec ratios de contraste WCAG AA/AAA.

Couleurs de Marque

Indigo Station

#001EAC

--color-indigo-station

Indigo Light

#0099FF

--color-indigo-light

Rose Néon

#FF0099

--color-rose-neon

Jaune Yolk

#FFC300

--color-jaune-yolk

Couleurs Sémantiques (Tailwind)

Success (Dark)

#22C55E

--color-success

Warning (Dark)

#F59E0B

--color-warning

Error (Dark)

#EF4444

--color-error

Info (Dark)

#3B82F6

--color-info

Utilisation en CSS

/* Utiliser les tokens CSS */
.mon-element {
    background-color: var(--color-indigo-station);
    color: var(--color-text-primary);
    border-color: var(--color-border-primary);
}

/* Les couleurs s'adaptent automatiquement en dark mode */

Variantes Light Mode

Pour les rares cas où les couleurs de marque doivent apparaître en texte sur fond clair.

Indigo Light (Light)

#1E5FAD

--color-indigo-light-on-light

Rose Néon (Light)

#C4006E

--color-rose-neon-on-light

Jaune Yolk (Light)

#946300

--color-jaune-yolk-on-light

Neutres - Slate (Tailwind)

Échelle de gris bleutés pour les fonds, textes et bordures.

Slate 50

#F8FAFC

Slate 100

#F1F5F9

Slate 200

#E2E8F0

Slate 300

#CBD5E1

Slate 400

#94A3B8

Slate 500

#64748B

Slate 600

#475569

Slate 700

#334155

Slate 800

#1E293B

Slate 900

#0F172A

Slate 950

#020617

Utilisation en Tailwind

<div class="bg-indigo-station text-white">
    <h2 class="text-rose-neon">Titre</h2>
</div>

<!-- Mode dark automatique -->
<div class="bg-slate-50 dark:bg-slate-900">
    Contenu adaptatif
</div>

Typographie

Bricolage Grotesque pour les titres (Semi-Bold 600, Bold 700). Work Sans pour le corps de texte et UI (Regular 400, Medium 500, Semi-Bold 600 avec variantes italiques).

Échelle Typographique

Heading 1

Votre marketing avance enfin

Bricolage Grotesque 48px / 3rem Semi-Bold 600 Line-height: 1.2 Letter-spacing: -0.025em

Heading 2

Stratégie terrain pour retailers

Bricolage Grotesque 36px / 2.25rem Semi-Bold 600 Line-height: 1.2

Heading 3

Un accompagnement qui transforme

Bricolage Grotesque 30px / 1.875rem Semi-Bold 600 Line-height: 1.375

Heading 4

Services marketing & communication

Bricolage Grotesque 24px / 1.5rem Medium 500 Line-height: 1.375

Body Large

Station Créative accompagne les retailers et marques de grande consommation dans leur stratégie marketing terrain. Notre expertise combine diagnostic, accompagnement et exécution pour des résultats mesurables.

Work Sans 18px / 1.125rem Regular 400 Line-height: 1.625

Body

De l'audit initial à la mise en place opérationnelle, nous intervenons sur l'ensemble de la chaîne marketing : PLV, catalogues, lancements produits, et accompagnement des équipes terrain.

Work Sans 16px / 1rem Regular 400 Line-height: 1.5

Body Small

Basée à Strasbourg, notre agence intervient auprès de chaînes de magasins et marques grand public en Alsace et Grand Est.

Work Sans 14px / 0.875rem Regular 400 Line-height: 1.5

Caption

Work Sans 12px / 0.75rem Regular 400 Line-height: 1.5

Classes CSS

<h1 class="sc-heading-1">Titre principal</h1>
<h2 class="sc-heading-2">Titre secondaire</h2>
<p class="sc-body-large">Paragraphe mis en avant</p>
<p class="sc-body">Paragraphe standard</p>
<p class="sc-body-small">Texte secondaire</p>
<p class="sc-caption">Légende ou note</p>

Configuration Fonts CSS

/* Dans tokens.css */
:root {
  --font-family-display: 'Bricolage Grotesque', sans-serif;
  --font-family-body: 'Work Sans', sans-serif;
}

/* Les titres utilisent automatiquement Bricolage Grotesque */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-display);
}

/* Le corps et UI utilisent Work Sans */
body, p, span, label, button {
  font-family: var(--font-family-body);
}

Classes Tailwind

<!-- Configurer dans tailwind.config.js -->
fontFamily: {
  'display': ['Bricolage Grotesque', 'sans-serif'],
  'body': ['Work Sans', 'sans-serif']
}

<!-- Utilisation -->
<h1 class="font-display text-5xl font-semibold">Titre</h1>
<p class="font-body text-lg">Texte</p>

Espacements

Système d'espacement cohérent basé sur une échelle de 4px pour garantir l'harmonie visuelle.

Échelle d'Espacements

--spacing-1 / 4px

--spacing-2 / 8px

--spacing-3 / 12px

--spacing-4 / 16px

--spacing-6 / 24px

--spacing-8 / 32px

--spacing-12 / 48px

--spacing-16 / 64px

--spacing-24 / 96px

Utilisation

/* CSS */
.mon-composant {
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-8);
    gap: var(--spacing-4);
}

/* Tailwind */
<div class="p-6 mb-8 space-y-4">...</div>

Ombres

Système d'élévation avec ombres adaptées pour dark et light mode. Includes glows de marque.

Ombres Standards

Shadow XS

--shadow-xs

Shadow SM

--shadow-sm

Shadow Base

--shadow-base

Shadow MD

--shadow-md

Shadow LG

--shadow-lg

Shadow XL

--shadow-xl

Glows de Marque

Glow Indigo

--shadow-glow-indigo

Glow Rose

--shadow-glow-rose

Glow Jaune

--shadow-glow-jaune

Background Grid

Fonds à motif de grille pour créer de la profondeur et de la texture. Disponible en trois tailles de cellules (small, medium, large).

Small Grid

Small Grid (16x16px)

Grille fine pour les arrière-plans discrets

<div class="sc-bg-grid sc-bg-grid-sm">
    <!-- Votre contenu ici -->
</div>

Medium Grid

Medium Grid (24x24px)

Grille moyenne pour un équilibre optimal

<div class="sc-bg-grid sc-bg-grid-md">
    <!-- Votre contenu ici -->
</div>

Large Grid

Large Grid (32x32px)

Grille large pour un impact visuel fort

<div class="sc-bg-grid sc-bg-grid-lg">
    <!-- Votre contenu ici -->
</div>

Comparaison des Tailles

Small

Medium

Large

Exemples d'Utilisation

Créez des interfaces modernes

Utilisez les grilles pour ajouter de la texture et de la profondeur

<div class="sc-bg-grid sc-bg-grid-lg" style="padding: 64px 24px; text-align: center;">
    <h2>Créez des interfaces modernes</h2>
    <p>Utilisez les grilles pour ajouter de la texture et de la profondeur</p>
    <button class="sc-btn sc-btn-primary">Découvrir</button>
</div>

Cards avec Background Grid

Service Design

Conception d'expériences utilisateur complètes et cohérentes.

Développement

Intégration moderne avec les dernières technologies.

Branding

Identité visuelle unique et mémorable pour votre marque.

<div class="sc-card sc-bg-grid sc-bg-grid-sm">
    <div class="sc-card-header">
        <h4 class="sc-card-title">Service Design</h4>
    </div>
    <div class="sc-card-body">
        <p>Conception d'expériences utilisateur...</p>
    </div>
</div>

Configuration Technique

Classe	Taille de cellule	Opacité	Cas d'usage
`sc-bg-grid-sm`	16×16px	3-4%	Sections détaillées, cards
`sc-bg-grid-md`	24×24px	3-4%	Sections principales, conteneurs
`sc-bg-grid-lg`	32×32px	3-4%	Hero sections, headers

Note

Les grilles utilisent linear-gradient() en CSS pur. Aucune image requise, performance optimale.

Tailwind Équivalents

Tailwind CSS

<!-- Small Grid -->
                    <div class="relative bg-[length:16px_16px]"
                        style="background-image:
                        linear-gradient(to right, rgb(15 23 42 / 0.04) 1px, transparent 1px),
                        linear-gradient(to bottom, rgb(15 23 42 / 0.04) 1px, transparent 1px);">
                        <!-- Contenu -->
                    </div>

                    <!-- Medium Grid -->
                    <div class="relative bg-[length:24px_24px]"
                        style="background-image:
                        linear-gradient(to right, rgb(15 23 42 / 0.04) 1px, transparent 1px),
                        linear-gradient(to bottom, rgb(15 23 42 / 0.04) 1px, transparent 1px);">
                        <!-- Contenu -->
                    </div>

                    <!-- Large Grid -->
                    <div class="relative bg-[length:32px_32px]"
                        style="background-image:
                        linear-gradient(to right, rgb(15 23 42 / 0.04) 1px, transparent 1px),
                        linear-gradient(to bottom, rgb(15 23 42 / 0.04) 1px, transparent 1px);">
                        <!-- Contenu -->
                    </div>

Bonnes pratiques

Utilisez les grilles comme arrière-plan subtil, pas comme élément principal
Assurez un contraste suffisant entre le texte et la grille
Préférez sc-bg-grid-sm pour les petits conteneurs
Utilisez sc-bg-grid-lg pour les grandes sections hero
Combinez avec du padding pour aérer le contenu
Évitez d'imbriquer plusieurs grilles
Les grilles sont automatiquement adaptées au thème (light/dark)

Icônes

Utilisation de Lucide Icons pour toutes les icônes. Bibliothèque open-source avec +1000 icônes cohérentes.

Installation Lucide

<!-- CDN (pour prototypage) -->
<script src="https://unpkg.com/lucide@latest"></script>
<script>lucide.createIcons();</script>

<!-- NPM (production) -->
npm install lucide-react  # Pour React
npm install lucide-vue-next  # Pour Vue

Utilisation

<!-- HTML -->
<i data-lucide="home"></i>
<i data-lucide="star" style="width: 24px; height: 24px; color: #FFC300;"></i>

<!-- React -->
import { Home, Star } from 'lucide-react';
<Home size={24} />
<Star size={24} color="#FFC300" />

Icônes Recommandées par Catégorie

Navigation

Actions

Statuts

Marketing

Documentation complète

Explorez toutes les icônes disponibles sur lucide.dev

Boutons

Composants boutons avec variantes Primary, Secondary, Tertiary, Ghost et Danger. Tailles multiples et états complets.

Variantes de Boutons

<button class="sc-btn sc-btn-primary">Primary</button>
<button class="sc-btn sc-btn-secondary">Secondary</button>
<button class="sc-btn sc-btn-tertiary">Tertiary</button>
<button class="sc-btn sc-btn-ghost">Ghost</button>
<button class="sc-btn sc-btn-danger">Danger</button>

Tailles de Boutons

<button class="sc-btn sc-btn-primary sc-btn-sm">Small</button>
<button class="sc-btn sc-btn-primary">Base</button>
<button class="sc-btn sc-btn-primary sc-btn-lg">Large</button>

Boutons avec Icônes

<button class="sc-btn sc-btn-primary">
    <i data-lucide="download"></i>
    Télécharger
</button>

<!-- Icon only -->
<button class="sc-btn sc-btn-primary sc-btn-icon">
    <i data-lucide="settings"></i>
</button>

États des Boutons

<button class="sc-btn sc-btn-primary" disabled>Disabled</button>

Tailwind Équivalents

<!-- Primary -->
<button class="px-6 py-3 bg-indigo-station text-white rounded-md font-medium
               hover:bg-info-600 hover:shadow-glow-indigo hover:-translate-y-0.5
               transition-all duration-250">
    Primary
</button>

<!-- Secondary -->
<button class="px-6 py-3 bg-rose-neon text-white rounded-md font-medium
               hover:bg-error-600 hover:shadow-glow-rose hover:-translate-y-0.5
               transition-all duration-250">
    Secondary
</button>

<!-- Tertiary -->
<button class="px-6 py-3 border border-indigo-station text-indigo-station
               dark:text-indigo-light dark:border-indigo-light rounded-md font-medium
               hover:bg-indigo-station hover:text-white hover:-translate-y-0.5
               transition-all duration-250">
    Tertiary
</button>

Formulaires

Composants de formulaires complets : inputs, textareas, selects, checkboxes, radios, toggles.

Inputs Texte

Nom complet

Email Nous ne partagerons jamais votre email

Message

Catégorie

<div class="sc-form-group">
    <label class="sc-label sc-label-required">Email</label>
    <input type="email" class="sc-input" placeholder="email@example.com">
    <span class="sc-help-text">Texte d'aide</span>
</div>

Checkboxes & Toggle

J'accepte les conditions générales

Cards

Composants cards flexibles pour afficher du contenu structuré.

Card Standard

Diagnostic Marketing

Analyse complète de votre stratégie

Nous analysons votre positionnement et vos outils marketing.

PLV & Merchandising

Conception de supports point de vente

Alertes

Messages d'alerte pour informer, avertir ou signaler des erreurs.

Information

Votre demande a bien été prise en compte.

Succès

Campagne publiée avec succès !

Attention

Forfait expire dans 7 jours.

Erreur

Impossible de traiter votre demande.

Badges

Labels pour indiquer des statuts ou catégories.

Primary Success Warning Error

Tooltips

Infobulles contextuelles pour fournir des informations supplémentaires au survol. Support dark/light mode avec flèche indicative.

Tooltips Basiques

<div class="sc-tooltip-trigger" style="position: relative;">
                    <button class="sc-btn sc-btn-primary">Survolez-moi</button>
                    <div class="sc-tooltip">Tooltip au-dessus du bouton</div>
                    </div>

Tooltips sur Icônes

<div class="sc-tooltip-trigger" style="position: relative; display: inline-flex;">
                    <button class="sc-btn sc-btn-primary sc-btn-icon">
                        <i data-lucide="settings"></i>
                    </button>
                    <div class="sc-tooltip">Paramètres</div>
                </div>

Tooltips sur Liens et Texte

Les tooltips peuvent être utilisés sur des mots spécifiques

dans un paragraphe pour fournir des informations supplémentaires sans encombrer le texte principal.

<span class="sc-tooltip-trigger" style="position: relative; display: inline;">
                    <span style="text-decoration: underline; cursor: help;">des mots spécifiques</span>
                    <div class="sc-tooltip">Information contextuelle</div>
                </span>

Cas d'Usage

Boutons d'action

Clarifier la fonction des boutons icon-only

Informations de formulaire

Aider l'utilisateur à remplir un champ

Code promo

Badges avec détails

Expliquer un statut ou badge

Actif

Navigation

Identifier rapidement les options de menu

Structure HTML & CSS

<!-- Structure de base -->
                    <div class="sc-tooltip-trigger" style="position: relative;">
                        <!-- Élément déclencheur (bouton, icône, texte, etc.) -->
                        <button class="sc-btn sc-btn-primary">Élément</button>

                        <!-- Tooltip -->
                        <div class="sc-tooltip">Texte du tooltip</div>
                    </div>

                    <!-- CSS Classes utilisées -->
                    .sc-tooltip-trigger : Conteneur parent avec position: relative
                    .sc-tooltip : Le tooltip qui apparaît au survol

                    <!-- Le parent doit avoir position: relative pour le positionnement absolu du tooltip -->

Classes Tailwind Équivalentes

<div class="relative group">
                    <button class="px-6 py-3 bg-indigo-station text-white rounded-md">
                        Survolez-moi
                    </button>
                    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3
                                px-3 py-2 bg-gray-900 dark:bg-gray-800 text-white text-xs
                                rounded whitespace-nowrap opacity-0 invisible
                                group-hover:opacity-100 group-hover:visible
                                transition-all duration-250 pointer-events-none
                                after:content-[''] after:absolute after:top-full
                                after:left-1/2 after:-translate-x-1/2
                                after:border-4 after:border-transparent
                                after:border-t-gray-900 dark:after:border-t-gray-800">
                        Texte du tooltip
                    </div>
                </div>

Bonnes pratiques

Gardez le texte court et concis (idéalement moins de 50 caractères)
Utilisez les tooltips pour des informations complémentaires, pas essentielles
Assurez-vous que le parent a position: relative
Les tooltips ne sont pas accessibles au clavier par défaut - pour l'accessibilité, utilisez aria-label
Évitez les tooltips sur mobile - préférez des labels visibles

Cartes Statistiques

Composants pour afficher des métriques et indicateurs clés de performance (KPI) dans vos dashboards et interfaces d'administration.

Cartes Statistiques Basiques

Revenu Total

247 850 €

Utilisateurs Actifs

12 458

Taux de Conversion

3.24%

HTML + CSS

<div class="sc-stat-card">
    <div class="sc-stat-label">Revenu Total</div>
    <div class="sc-stat-value">247 850 €</div>
    </div>

Cartes avec Icônes

Ventes Mensuelles

1 243

Nouveaux Clients

856

Commandes

3 421

Note Moyenne

4.8

HTML + CSS

<div class="sc-stat-card">
    <div class="sc-stat-icon">
        <i data-lucide="trending-up"></i>
    </div>
    <div class="sc-stat-label">Ventes Mensuelles</div>
    <div class="sc-stat-value">1 243</div>
    </div>

Cartes avec Indicateurs de Tendance

Chiffre d'Affaires

125 847 €

+12.5%

Taux de Rebond

42.3%

-8.2%

HTML + CSS

<div class="sc-stat-card">
    <div class="sc-stat-label">Chiffre d'Affaires</div>
    <div class="sc-stat-value">125 847 €</div>
    <span class="sc-stat-change sc-stat-change-positive">
        <i data-lucide="arrow-up"></i>
        +12.5%
    </span>
    </div>

    <!-- Tendance négative -->
    <div class="sc-stat-card">
    <div class="sc-stat-label">Taux de Rebond</div>
    <div class="sc-stat-value">42.3%</div>
    <span class="sc-stat-change sc-stat-change-negative">
        <i data-lucide="arrow-down"></i>
        -8.2%
    </span>
    </div>

Cartes Complètes (Icône + Valeur + Tendance)

Revenu Mensuel

89 420 €

+23.1% vs mois dernier

Produits Vendus

2 847

-5.4% vs mois dernier

Trafic du Site

45 892

+18.7% vs mois dernier

HTML + CSS

<div class="sc-stat-card">
    <div class="sc-stat-icon">
        <i data-lucide="dollar-sign"></i>
    </div>
    <div class="sc-stat-label">Revenu Mensuel</div>
    <div class="sc-stat-value">89 420 €</div>
    <span class="sc-stat-change sc-stat-change-positive">
        <i data-lucide="trending-up"></i>
        +23.1% vs mois dernier
    </span>
    </div>

Tailwind Équivalents

Tailwind CSS

<!-- Stat Card Complète -->
    <div class="bg-bg-secondary border border-border-primary rounded-lg p-6
                hover:border-indigo-station hover:shadow-md transition-all">
    <div class="w-12 h-12 flex items-center justify-center rounded-lg
                bg-info-100 dark:bg-indigo-station/20 text-indigo-station
                dark:text-indigo-light mb-3">
        <i data-lucide="dollar-sign" class="w-6 h-6"></i>
    </div>
    <div class="text-sm font-medium text-text-secondary uppercase
                tracking-wide mb-2">
        Revenu Mensuel
    </div>
    <div class="text-4xl font-semibold text-text-primary leading-none mb-2">
        89 420 €
    </div>
    <span class="inline-flex items-center gap-1 text-sm font-medium
                px-2 py-1 rounded bg-success-100 dark:bg-success-500/20
                text-success-700 dark:text-success-200">
        <i data-lucide="trending-up" class="w-3.5 h-3.5"></i>
        +23.1%
    </span>
    </div>

Bonnes pratiques

Utilisez des labels clairs et concis pour identifier chaque métrique
Formatez les nombres avec des séparateurs de milliers pour la lisibilité (ex: 247 850 au lieu de 247850)
Affichez les tendances avec des couleurs sémantiques (vert = positif, rouge = négatif)
Incluez toujours un contexte temporel (vs mois dernier, vs année précédente)
Pour l'accessibilité, ajoutez aria-label avec la valeur complète formatée
Évitez de surcharger avec trop de cartes - limitez à 3-6 métriques clés par vue
Assurez-vous que les icônes ont un sens contextuel et ne sont pas purement décoratives
Utilisez sc-stat-change-positive pour les tendances favorables et sc-stat-change-negative pour les défavorables

Tableaux de Données

Composants pour afficher des données tabulaires avec tri, filtres et actions. Incluent des variantes pour différents cas d'usage et densités d'affichage.

Table Standard

Utilisateur	Email	Rôle	Statut	Date d'inscription
Marie Dubois	marie.dubois@example.com	Administrateur	Actif	15 Mars 2024
Jean Martin	jean.martin@example.com	Éditeur	Actif	22 Mars 2024
Sophie Laurent	sophie.laurent@example.com	Contributeur	En attente	10 Avril 2024
Pierre Durand	pierre.durand@example.com	Lecteur	Inactif	05 Février 2024

HTML + CSS

<div class="sc-table-container">
  <table class="sc-table">
    <thead>
      <tr>
        <th scope="col">Utilisateur</th>
        <th scope="col">Email</th>
        <th scope="col">Statut</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Marie Dubois</td>
        <td>marie.dubois@example.com</td>
        <td><span class="sc-badge sc-badge-success">Actif</span></td>
      </tr>
    </tbody>
  </table>
</div>

Table Compacte

ID	Produit	Catégorie	Prix	Stock
#1024	Catalogue Premium	Print	1 250 €	45
#1025	PLV Stand	Merchandising	890 €	12
#1026	Packaging Design	Branding	2 500 €	8
#1027	Affiche A1	Print	180 €	150

HTML + CSS

<div class="sc-table-container">
  <table class="sc-table sc-table-compact">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Produit</th>
        <th scope="col">Prix</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>#1024</td>
        <td>Catalogue Premium</td>
        <td>1 250 €</td>
      </tr>
    </tbody>
  </table>
</div>

Table Striped (Rayée)

Commande	Client	Date	Montant	Statut
#CMD-2024-001	Entreprise Alpha	28 Déc 2024	3 450 €	Livré
#CMD-2024-002	Société Beta	29 Déc 2024	1 890 €	En cours
#CMD-2024-003	Groupe Gamma	30 Déc 2024	5 200 €	En attente
#CMD-2024-004	Studio Delta	30 Déc 2024	2 750 €	En cours
#CMD-2024-005	Agence Epsilon	31 Déc 2024	8 900 €	Livré

HTML + CSS

<div class="sc-table-container">
  <table class="sc-table sc-table-striped">
    <thead>
      <tr>
        <th scope="col">Commande</th>
        <th scope="col">Client</th>
        <th scope="col">Statut</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>#CMD-2024-001</td>
        <td>Entreprise Alpha</td>
        <td><span class="sc-badge sc-badge-success">Livré</span></td>
      </tr>
    </tbody>
  </table>
</div>

Table avec Actions

Projet	Client	Date limite
Campagne PLV 2025	Retail Plus	15 Janvier 2025
Catalogue Printemps	Fashion Corp	20 Janvier 2025
Refonte Website	Tech Start-up	05 Février 2025

HTML + CSS

<div class="sc-table-container">
  <table class="sc-table">
    <thead>
      <tr>
        <th scope="col">Projet</th>
        <th scope="col">Client</th>
        <th scope="col">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Campagne PLV 2025</td>
        <td>Retail Plus</td>
        <td>
          <div class="sc-table-cell-action">
            <button class="sc-btn sc-btn-sm sc-btn-ghost">
              <i data-lucide="edit"></i>
              Éditer
            </button>
            <button class="sc-btn sc-btn-sm sc-btn-ghost">
              <i data-lucide="trash-2"></i>
              Supprimer
            </button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Tailwind Équivalents

Tailwind CSS

<div class="w-full overflow-x-auto border border-border-primary rounded-lg">
  <table class="w-full border-collapse text-sm">
    <thead class="bg-bg-tertiary">
      <tr>
        <th scope="col" class="px-4 py-3 text-left font-semibold
                                text-text-primary border-b border-border-primary">
          Utilisateur
        </th>
        <th scope="col" class="px-4 py-3 text-left font-semibold
                                text-text-primary border-b border-border-primary">
          Email
        </th>
        <th scope="col" class="px-4 py-3 text-left font-semibold
                                text-text-primary border-b border-border-primary">
          Statut
        </th>
      </tr>
    </thead>
    <tbody>
      <tr class="hover:bg-bg-tertiary">
        <td class="px-4 py-4 text-text-primary border-b border-border-primary">
          Marie Dubois
        </td>
        <td class="px-4 py-4 text-text-primary border-b border-border-primary">
          marie@example.com
        </td>
        <td class="px-4 py-4 text-text-primary border-b border-border-primary">
          <span class="px-2 py-1 bg-success-100 text-success-700
                       rounded-full text-xs font-medium">
            Actif
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Bonnes pratiques

Utilisez sc-table-container pour gérer le défilement horizontal sur mobile
Ajoutez scope="col" aux en-têtes de colonnes pour l'accessibilité
Utilisez sc-table-striped pour améliorer la lisibilité des longues listes
Limitez le nombre de colonnes à 5-7 maximum pour une meilleure lisibilité
Pour les actions, groupez les boutons dans sc-table-cell-action
Incluez toujours un état vide avec un message clair si la table n'a pas de données
Utilisez sc-table-compact pour des interfaces à haute densité d'information
Envisagez la pagination pour les tables de plus de 20-30 lignes
Assurez-vous que les boutons d'action ont des labels clairs pour les lecteurs d'écran

Graphiques

Conteneurs structurés pour intégrer des graphiques et visualisations de données. Prêts pour Chart.js, ApexCharts, Recharts ou toute autre bibliothèque de graphiques.

Note d'Intégration

Ces conteneurs sont des structures CSS pures. Pour afficher des graphiques réels, intégrez une bibliothèque comme Chart.js, ApexCharts, ou Recharts. Remplacez le contenu de .sc-chart-body par votre élément canvas ou conteneur de graphique.

Conteneur de Graphique Basique

Revenus Mensuels 2024

Insérez votre graphique ici (Chart.js, ApexCharts, etc.)

HTML + CSS

<div class="sc-chart-container">
  <div class="sc-chart-header">
    <h4 class="sc-chart-title">Revenus Mensuels 2024</h4>
  </div>
  <div class="sc-chart-body">
    <!-- Insérez ici votre canvas ou composant de graphique -->
    <canvas id="myChart"></canvas>
  </div>
</div>

Graphique avec Légende

Performance des Ventes par Catégorie

Zone de graphique (300px min-height)

PLV & Merchandising (45%)

Catalogues (30%)

Packaging (15%)

Autres (10%)

HTML + CSS

<div class="sc-chart-container">
  <div class="sc-chart-header">
    <h4 class="sc-chart-title">Performance des Ventes</h4>
  </div>
  <div class="sc-chart-body">
    <canvas id="salesChart"></canvas>
  </div>
  <div class="sc-chart-legend">
    <div class="sc-chart-legend-item">
      <span class="sc-chart-legend-color"
            style="background-color: #180F93;"></span>
      PLV & Merchandising (45%)
    </div>
    <div class="sc-chart-legend-item">
      <span class="sc-chart-legend-color"
            style="background-color: #FF0099;"></span>
      Catalogues (30%)
    </div>
  </div>
</div>

Graphique avec Actions

Trafic du Site Web

Graphique en ligne avec tendances

HTML + CSS

<div class="sc-chart-container">
  <div class="sc-chart-header">
    <h4 class="sc-chart-title">Trafic du Site Web</h4>
    <div class="sc-chart-actions">
      <button class="sc-btn sc-btn-sm sc-btn-ghost">
        <i data-lucide="download"></i>
        Exporter
      </button>
      <button class="sc-btn sc-btn-sm sc-btn-ghost">
        <i data-lucide="filter"></i>
        Filtrer
      </button>
    </div>
  </div>
  <div class="sc-chart-body">
    <canvas id="trafficChart"></canvas>
  </div>
</div>

Grille Multi-Graphiques

Conversions

Engagement

HTML + CSS

<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;">
  <div class="sc-chart-container">
    <div class="sc-chart-header">
      <h4 class="sc-chart-title">Conversions</h4>
    </div>
    <div class="sc-chart-body">
      <canvas id="conversionsChart"></canvas>
    </div>
  </div>

  <div class="sc-chart-container">
    <div class="sc-chart-header">
      <h4 class="sc-chart-title">Engagement</h4>
    </div>
    <div class="sc-chart-body">
      <canvas id="engagementChart"></canvas>
    </div>
  </div>
</div>

Tailwind Équivalents

Tailwind CSS

<div class="bg-bg-secondary border border-border-primary rounded-lg p-6">
  <!-- Header -->
  <div class="flex items-center justify-between mb-6">
    <h4 class="text-lg font-semibold text-text-primary">
      Titre du Graphique
    </h4>
    <div class="flex gap-2">
      <button class="px-3 py-1.5 text-sm hover:bg-bg-tertiary rounded-md
                     flex items-center gap-2">
        <i data-lucide="download" class="w-4 h-4"></i>
        Exporter
      </button>
    </div>
  </div>

  <!-- Chart Body -->
  <div class="min-h-[300px]">
    <canvas id="myChart"></canvas>
  </div>

  <!-- Legend -->
  <div class="flex gap-4 mt-4 flex-wrap">
    <div class="flex items-center gap-2 text-sm text-text-secondary">
      <span class="w-4 h-4 rounded-sm bg-indigo-station"></span>
      Série 1
    </div>
    <div class="flex items-center gap-2 text-sm text-text-secondary">
      <span class="w-4 h-4 rounded-sm bg-rose-neon"></span>
      Série 2
    </div>
  </div>
</div>

Bonnes pratiques

Utilisez des titres clairs et descriptifs pour chaque graphique
Incluez toujours une légende pour les graphiques multi-séries
Respectez la palette de couleurs du design system (Indigo Station, Rose Néon, Jaune Yolk, Indigo Light)
Assurez une hauteur minimale de 300px (min-height: 300px) pour une bonne lisibilité
Pour l'accessibilité, fournissez une alternative textuelle ou un tableau de données équivalent
Ajoutez des actions contextuelles (export CSV/PNG, filtres, rafraîchissement) dans le header
Utilisez des graphiques en ligne pour les tendances temporelles
Préférez les graphiques en barres pour les comparaisons entre catégories
Évitez les graphiques 3D qui réduisent la précision de lecture des données
Intégrez Chart.js avec npm install chart.js ou via CDN pour des graphiques interactifs

Calendrier

Composant calendrier mensuel interactif pour la sélection de dates, l'affichage d'événements et la planification. Compatible avec les systèmes de réservation et de gestion d'agenda.

Calendrier Mois Complet

Janvier 2025

Lun

Mar

Mer

Jeu

Ven

Sam

Dim

30

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

HTML + CSS

<div class="sc-calendar">
  <div class="sc-calendar-header">
    <h4 class="sc-calendar-title">Janvier 2025</h4>
    <div class="sc-calendar-nav">
      <button class="sc-btn sc-btn-sm sc-btn-ghost">
        <i data-lucide="chevron-left"></i>
      </button>
      <button class="sc-btn sc-btn-sm sc-btn-ghost">
        <i data-lucide="chevron-right"></i>
      </button>
    </div>
  </div>

  <div class="sc-calendar-grid">
    <!-- Noms des jours -->
    <div class="sc-calendar-day-name">Lun</div>
    <div class="sc-calendar-day-name">Mar</div>
    <!-- ... autres jours ... -->

    <!-- Jour normal -->
    <div class="sc-calendar-day">
      <span class="sc-calendar-day-number">15</span>
    </div>

    <!-- Aujourd'hui -->
    <div class="sc-calendar-day sc-calendar-day-today">
      <span class="sc-calendar-day-number">30</span>
    </div>

    <!-- Jour sélectionné -->
    <div class="sc-calendar-day sc-calendar-day-selected">
      <span class="sc-calendar-day-number">15</span>
    </div>

    <!-- Autre mois -->
    <div class="sc-calendar-day sc-calendar-day-other-month">
      <span class="sc-calendar-day-number">31</span>
    </div>
  </div>
</div>

Calendrier avec Événements

Décembre 2024

Lun

Mar

Mer

Jeu

Ven

Sam

Dim

25

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

HTML + CSS

<!-- Jour avec événement -->
<div class="sc-calendar-day">
  <span class="sc-calendar-day-number">15</span>
  <div class="sc-calendar-event-dot"></div>
</div>

<!-- Aujourd'hui avec événement -->
<div class="sc-calendar-day sc-calendar-day-today">
  <span class="sc-calendar-day-number">30</span>
  <div class="sc-calendar-event-dot"></div>
</div>

<!-- Navigation avec bouton Aujourd'hui -->
<div class="sc-calendar-nav">
  <button class="sc-btn sc-btn-sm sc-btn-ghost">
    <i data-lucide="chevron-left"></i>
  </button>
  <button class="sc-btn sc-btn-sm sc-btn-primary">Aujourd'hui</button>
  <button class="sc-btn sc-btn-sm sc-btn-ghost">
    <i data-lucide="chevron-right"></i>
  </button>
</div>

Tailwind Équivalents

Tailwind CSS

<div class="bg-bg-secondary border border-border-primary rounded-lg overflow-hidden">
  <!-- Header -->
  <div class="flex items-center justify-between p-4 bg-bg-tertiary
              border-b border-border-primary">
    <h4 class="text-lg font-semibold text-text-primary">Janvier 2025</h4>
    <div class="flex gap-2">
      <button class="p-2 hover:bg-bg-primary rounded-md">
        <i data-lucide="chevron-left" class="w-5 h-5"></i>
      </button>
      <button class="p-2 hover:bg-bg-primary rounded-md">
        <i data-lucide="chevron-right" class="w-5 h-5"></i>
      </button>
    </div>
  </div>

  <!-- Calendar Grid -->
  <div class="grid grid-cols-7">
    <!-- Day name -->
    <div class="p-2 text-center text-xs font-semibold text-text-tertiary
                uppercase bg-bg-tertiary border-b border-border-primary">
      Lun
    </div>

    <!-- Calendar day -->
    <div class="aspect-square p-2 border border-border-primary
                flex flex-col items-center justify-start cursor-pointer
                hover:bg-bg-tertiary transition">
      <span class="text-sm font-medium text-text-primary mb-1">15</span>
      <!-- Event dot -->
      <div class="w-1.5 h-1.5 rounded-full bg-rose-neon"></div>
    </div>

    <!-- Today -->
    <div class="aspect-square p-2 border border-border-primary
                bg-info-100 dark:bg-indigo-station/20">
      <span class="text-sm font-medium">30</span>
    </div>

    <!-- Selected -->
    <div class="aspect-square p-2 border border-border-primary
                bg-indigo-station text-white">
      <span class="text-sm font-medium">22</span>
    </div>

    <!-- Other month -->
    <div class="aspect-square p-2 border border-border-primary
                bg-bg-tertiary">
      <span class="text-sm font-medium text-text-tertiary">31</span>
    </div>
  </div>
</div>

Bonnes pratiques

Utilisez sc-calendar-day-today pour mettre en évidence la date actuelle avec un fond coloré
Appliquez sc-calendar-day-selected pour la date sélectionnée par l'utilisateur
Les jours hors du mois courant doivent utiliser sc-calendar-day-other-month pour un style discret
Ajoutez sc-calendar-event-dot pour indiquer visuellement les jours avec événements
Pour l'accessibilité, incluez role="grid" sur le calendrier et aria-label avec la date complète
Ajoutez un bouton "Aujourd'hui" pour revenir rapidement à la date actuelle
Assurez-vous que les jours cliquables ont un état hover visible (:hover)
Limitez l'affichage à un seul mois à la fois pour éviter la surcharge cognitive
Utilisez la navigation clavier (flèches) pour parcourir les jours
Pour les événements multiples, envisagez d'afficher le nombre d'événements au lieu d'un simple point