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

Couleurs

Couleurs principales

Primary Blue

#4F46E5

Secondary Blue

#2563EB

Text Dark

#111827

Background Light

#F3F4F6

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

Sous-titre

Font: Inter - Semibold - 24px/1.5rem

Texte de paragraphe

Font: Inter - Regular - 16px/1rem

Styles de texte

Text Highlight

Classe: highlight

Interactive Text

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

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
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

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

Fade In Up

Animation Fade In Up (Hover to repeat)

Hover Scale

Hover pour scale

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

Usage

// Spark variant (growing animation)
<LogoLoader variant="spark" size="lg" />

// Spinner variant (fading animation)
<LogoLoader variant="spinner" duration={1.2} />

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

Démonstration 3D Showcase

↗️ 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

PropTypeDéfautDescription
imageSrcstring-URL de l'image à afficher
videoSrcstring-URL de la vidéo (MP4/WebM)
enableMouseTiltbooleantrueActive l'effet de perspective 3D
childrenReactNode-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

Règles d'Utilisation

À Faire

  • Utiliser les couleurs officielles de la marque
  • Maintenir les proportions du logo
  • Respecter l'espace de protection autour du logo
  • Utiliser la typographie recommandée

À Ne Pas Faire

  • Modifier les couleurs du logo
  • Déformer ou étirer le logo
  • Ajouter des effets au logo
  • Utiliser le logo sur des fonds complexes