Sparkier Brand Guidelines

Notre identité visuelle reflète notre mission de rendre le conseil plus accessible et efficace.

Logo

Version standard

Sparkier

320px

132px

Télécharger PNG

Symbole seul

Télécharger PNG

Couleurs

Couleurs principales

Primary Blue

#4F46E5

Secondary Blue

#2563EB

Text Dark

#111827

Background Light

#F3F4F6

Couleurs de texte

Text Medium

text-gray-700

#374151

Standard pour le texte de corps

Text Dark

text-gray-900

#111827

Pour les titres et texte important (contraste élevé)

Text Light

text-gray-500

#6B7280

Métadonnées et texte secondaire

Note importante : text-gray-700 est le standard pour le texte de corps. Utilisez text-gray-900 pour donner de l'importance avec un contraste élevé (titres, texte mis en avant). text-gray-600 n'est pas recommandé car il peut ne pas respecter les standards WCAG AA sur fond blanc.

Dégradés

Background Gradient

from-blue-50 to-indigo-50

Accent Gradient

from-indigo-500 to-blue-500

Typographie

Titres

Titre Principal

Font: Inter - Bold - 36px/2.25rem - text-gray-900

Sous-titre

Font: Inter - Semibold - 24px/1.5rem - text-gray-900

Texte de paragraphe

Font: Inter - Regular - 16px/1rem - text-gray-700 (standard)

Styles de texte

Text Highlight

Classe: highlight

Interactive Text

text-blue-600 hover:text-blue-700

Texte de corps (standard)

text-gray-700 - Standard pour le texte de corps, respecte WCAG AA

Texte important / Titres

text-gray-900 - Pour donner de l'importance avec un contraste élevé

Texte secondaire / Métadonnées

text-gray-500 - Pour les informations secondaires

Guide d'utilisation des couleurs de texte

•text-gray-700 : Standard pour le texte de corps (par défaut)
•text-gray-900 : Pour les titres et texte important (contraste élevé pour donner de l'importance)
•text-gray-500 : Métadonnées, texte secondaire, labels
⚠text-gray-600 : Non recommandé - peut ne pas respecter WCAG AA sur fond blanc

Composants UI

Composant Button

Le composant Button est un composant réutilisable qui implémente toutes les variations de boutons selon notre système de design.

Importez-le depuis @/components/ui/button pour une utilisation cohérente dans toute l'application.

Variantes

Variantes de base

variant="primary"

variant="secondary"

variant="outline"

variant="ghost"

variant="link"

variant="accent"

Utilisé pour : Actions principales, secondaires, tertiaires et liens

Variantes contextuelles

variant="action"

variant="destructive"

variant="success"

variant="warning"

Utilisé pour : Actions spécifiques, feedback utilisateur, notifications

Tailles

size="sm"

size="default"

size="lg"

size="xl"

size="icon"

Utilisé pour : Adapter les boutons à différents contextes d'interface

Icônes et Animations

Position des icônes

leftIcon=<Upload />

rightIcon=<ArrowRight />

leftIcon et rightIcon

Animations d'icônes

iconAnimation="translate"

iconAnimation="scale"

États

États de chargement et désactivé

isLoading=

disabled=

variant="outline" isLoading=

Largeur complète

fullWidth=

variant="secondary" fullWidth=

Utilisé pour : Formulaires, boutons d'action principaux dans des conteneurs étroits

Contextes d'utilisation

Contexte d'application vs marketing

context="dashboard"

context="marketing"

variant="accent" context="marketing"

Contexte Dashboard (défaut) : Police plus fine pour une interface utilisateur plus délicate dans le tableau de bord de l'application. Utilisé pour les actions quotidiennes dans l'application.

Contexte Marketing : Police de poids moyen avec ombre légère et effet de survol pour les CTA axés sur la conversion. Utilisé pour les pages de destination, les pages d'inscription et autres pages marketing.

Variante Accent : Utilise un dégradé de couleurs pour mettre en évidence les actions importantes. Particulièrement efficace pour les CTA principaux sur les pages marketing et les fonctionnalités premium.

Mode sombre

Le composant Button prend en charge un mode sombre automatique avec la prop darkMode=.

Toutes les variantes existantes s'adaptent automatiquement aux arrière-plans sombres avec des couleurs optimisées pour le contraste et la lisibilité.

Comparaison mode clair vs mode sombre

Mode clair (arrière-plan clair)

Mode sombre (arrière-plan sombre)

Mode sombre avec icônes et animations

Tous les états en mode sombre

Contexte marketing en mode sombre

Créez votre compte dès maintenant

Adaptations automatiques :

Primary : Devient blanc avec texte sombre et bordure
Secondary : Transparent avec bordure et texte blancs, s'inverse au survol
Outline : Bordure et texte gris qui deviennent blancs au survol
Ghost : Texte gris clair qui devient blanc au survol avec arrière-plan subtil
Accent : Gradient plus clair avec texte sombre pour le contraste
Destructive : Conserve les couleurs rouges avec bordure pour la visibilité

Exemples d'utilisation

Formulaires

Nom

Actions CRUD

Pages marketing

Exemples de code

Utilisation générale

import { Button } from '@/components/ui/button';
import { ArrowRight, Sparkles } from 'lucide-react';

export function MyComponent() {
  return (
    <div className="space-y-4">
      {/* Bouton par défaut pour le dashboard */}
      <Button>Bouton par défaut</Button>
      
      {/* Bouton secondaire avec animation */}
      <Button 
        variant="secondary" 
        size="lg"
        rightIcon={<ArrowRight />}
        iconAnimation="translate"
      >
        En savoir plus
      </Button>
      
      {/* Bouton destructif avec état de chargement */}
      <Button 
        variant="destructive" 
        isLoading={isSubmitting}
        fullWidth
      >
        Supprimer le compte
      </Button>
      
      {/* Bouton accent pour le marketing */}
      <Button 
        variant="accent"
        context="marketing"
        rightIcon={<Sparkles />}
        iconAnimation="scale"
      >
        Essayer Premium
      </Button>
    </div>
  );
}

Utilisation en mode sombre

export function DarkBackgroundSection() {
  return (
    <div className="bg-indigo-900 p-8 rounded-lg">
      <h2 className="text-white text-2xl mb-6">
        Créez votre boutique dès maintenant
      </h2>
      
      <div className="flex gap-4">
        {/* Bouton principal avec mode sombre */}
        <Button 
          variant="primary"
          darkMode={true}
          context="marketing"
          rightIcon={<ArrowRight />}
          iconAnimation="translate"
        >
          Commencer gratuitement
        </Button>
        
        {/* Bouton secondaire avec mode sombre */}
        <Button 
          variant="secondary"
          darkMode={true}
          context="marketing"
        >
          En savoir plus
        </Button>
        
        {/* Bouton accent adapté au mode sombre */}
        <Button 
          variant="accent"
          darkMode={true}
          leftIcon={<Sparkles />}
          iconAnimation="scale"
        >
          Premium
        </Button>
      </div>
    </div>
  );
}

Badges

Variantes

Par défautPrimaireSecondaireSuccèsAvertissementDanger

Tailles

PetitNormalGrand

Avec Icônes

MembrePremiumEn attente

Exemples d'utilisation

Statut:Actif

Rôle:Gestionnaire

Notification:3 mises à jour

Cartes

Feature Card

Description de la fonctionnalité avec un style de carte standard.

Glassmorphic Card

Carte avec effet de verre dépoli pour un style moderne.

Éléments de formulaire

Input Field

Textarea

Select Field

Utilisez appearance-none pour masquer la flèche native et ajouter votre propre icône

Responsive Card Grids

Le composant ResponsiveCardGrid standardise l'affichage des cartes avec des breakpoints cohérents à travers l'application.

Usage de base

import { ResponsiveCardGrid } from '@/components/ui/ResponsiveCardGrid';

// Grille responsive par défaut (1 → 2 → 3 → 4 colonnes)
<ResponsiveCardGrid>
  <Card>Contenu 1</Card>
  <Card>Contenu 2</Card>
  <Card>Contenu 3</Card>
</ResponsiveCardGrid>

Dashboard Grid

Parfait pour les interfaces de gestion, panneaux admin et cartes de fonctionnalités.

<ResponsiveCardGrid.Dashboard>
  <FeatureCard />
  <FeatureCard />
  <FeatureCard />
</ResponsiveCardGrid.Dashboard>

Gestion

Interface de gestion

Utilisateurs

Gestion des utilisateurs

Produits

Catalogue de produits

Breakpoints: 1 → 2 → 3 → 3 → 4 colonnes (sm/md/xl/2xl)
Gap: 6 (1.5rem) • Hauteur égale: Oui

Marketing Grid

Optimisé pour les pages marketing et contenu public avec container centré.

<ResponsiveCardGrid.Marketing>
  <SparkCard />
  <SparkCard />
  <SparkCard />
</ResponsiveCardGrid.Marketing>

Breakpoints: 1 → 2 → 3 → 3 → 4 colonnes
Container: Max width 6xl, centré, padding responsive
Gap: 3-4 responsive

Features Grid

Pour les vitrines de fonctionnalités et sections d'avantages.

<ResponsiveCardGrid.Features>
  <FeatureCard />
  <FeatureCard />
  <FeatureCard />
  <FeatureCard />
</ResponsiveCardGrid.Features>

Innovation

Solutions innovantes

Collaboration

Travail d'équipe

Qualité

Standards élevés

Performance

Optimisation continue

Breakpoints: 1 → 2 → 4 colonnes (md:2, lg:4)
Gap: 8 (2rem)

Autres configurations prédéfinies

Simple Grid

Pour des layouts à deux colonnes simples

ResponsiveCardGrid.Simple

1 → 2 colonnes • Max width 4xl

Triple Grid

Pour des sections d'information à trois colonnes

ResponsiveCardGrid.Triple

1 → 3 colonnes • Max width 5xl

Configuration personnalisée

<ResponsiveCardGrid
  gridCols="grid-cols-1 sm:grid-cols-2 lg:grid-cols-5"
  gap="gap-4"
  maxWidth="max-w-7xl"
  centered
  autoRows="auto-rows-max"
  className="my-custom-class"
>
  <Card />
</ResponsiveCardGrid>

Migration

❌ Avant

<div className="grid 
  grid-cols-1 
  sm:grid-cols-2 
  md:grid-cols-3 
  xl:grid-cols-4 
  gap-6 auto-rows-fr">
  {items.map(item => 
    <Card key={item.id} />
  )}
</div>

✅ Après

<ResponsiveCardGrid.Dashboard>
  {items.map(item => 
    <Card key={item.id} />
  )}
</ResponsiveCardGrid.Dashboard>

Avantages

Cohérence: Mêmes breakpoints partout

Maintenabilité: Un seul endroit à modifier

Flexibilité: Multiples presets + custom

Type Safety: Interfaces TypeScript

Performance: Classes Tailwind optimisées

DX: API simple et intuitive

Conteneurs

Largeurs standards

max-w-7xl - Container Large

Utilisé pour les layouts principaux et les pages de contenu

Exemple: Header, Landing pages, Dashboard

max-w-6xl - Container Medium

Utilisé pour les grilles de contenu et les sections de fonctionnalités

Exemple: Grilles de Sparks, Chat interface

max-w-4xl - Container Small

Utilisé pour le contenu focalisé et les formulaires

Exemple: Profils consultants, Formulaires

max-w-3xl - Container Extra Small

Utilisé pour le texte de contenu et les descriptions

Exemple: Paragraphes de texte, Descriptions de sections

Utilisation

// Container Large
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  {/* Contenu */}
</div>

// Container Medium
<div className="max-w-6xl mx-auto px-4 sm:px-0">
  {/* Contenu */}
</div>

// Container Small
<div className="max-w-4xl mx-auto px-4">
  {/* Contenu */}
</div>

// Container Extra Small
<div className="max-w-3xl mx-auto px-4">
  {/* Contenu */}
</div>

Notes:

Toujours utiliser mx-auto pour centrer le conteneur
Ajouter un padding horizontal adaptatif avec px-4 sm:px-6 lg:px-8 pour les grands conteneurs
Utiliser des paddings plus simples pour les petits conteneurs

Icônes

Icônes de fonctionnalités

Sparkles

Package

Clock

Store

Icônes sociales

Animations

Transitions

Nous évitons les animations d'apparition pour garder l'interface rapide et lisible.

Les micro-interactions restent sobres et uniquement utiles à la compréhension.

Logo Loader

Animated versions of our logo for loading states. The spark variant represents ideas growing into expertise, while the spinner provides a classic loading experience.

Animation Variant

Small

Medium

Large

Animation Duration: 1.5s

Usage

// Spark variant (growing animation)

// Spinner variant (fading animation)

3D Showcase

Le composant VideoShowcase3D crée des présentations immersives avec effets 3D et interactions au mouvement de la souris.

Importez-le depuis @/components/ui/VideoShowcase3D pour des showcases premium avec perspective 3D.

Démonstration interactive

↗️ Bougez votre souris pour voir l'effet de perspective 3D

Fonctionnalités principales

🎯 Interaction souris

Perspective 3D qui suit le mouvement de la souris avec effet de lag fluide.

📱 Optimisation mobile

Désactivation automatique des effets 3D sur les appareils tactiles.

🎬 Vidéo et images

Support complet pour vidéos (MP4/WebM) et images avec fallbacks.

⚡ Performance

Effets GPU-accelerated avec detection tactile pour optimiser les performances.

Props principales

Prop	Type	Défaut	Description
imageSrc	string	-	URL de l'image à afficher
videoSrc	string	-	URL de la vidéo (MP4/WebM)
enableMouseTilt	boolean	true	Active l'effet de perspective 3D
children	ReactNode	-	Contenu personnalisé à afficher

Exemple d'usage

import { VideoShowcase3D } from '@/components/ui/VideoShowcase3D';

// Image avec effet 3D
<VideoShowcase3D
  imageSrc="/images/product-demo.png"
  enableMouseTilt={true}
  alt="Démonstration produit"
/>

// Vidéo showcase
<VideoShowcase3D
  videoSrc="/videos/demo.mp4"
  autoPlay={true}
  loop={true}
  muted={true}
  enableMouseTilt={true}
/>

// Avec contenu personnalisé
<VideoShowcase3D enableMouseTilt={true}>
  <MonComposantPersonnalisé />
</VideoShowcase3D>

💡 Conseils d'optimisation

• Les effets 3D se désactivent automatiquement sur mobile pour les performances
• Configurez MAX_TILT_DEG et TILT_SMOOTHING dans le composant pour ajuster l'effet
• Utilisez des vidéos optimisées (MP4 + WebM) pour une compatibilité maximale
• Placez dans des containers avec arrière-plans en dégradé pour améliorer l'effet