Sparkier Brand Guidelines
Notre identité visuelle reflète notre mission de rendre le conseil plus accessible et efficace.
Logo
Version standard
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
Classe: highlight
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
Utilisé pour : Actions principales, secondaires, tertiaires et liens
Variantes contextuelles
Utilisé pour : Actions spécifiques, feedback utilisateur, notifications
Tailles
Utilisé pour : Adapter les boutons à différents contextes d'interface
Icônes et Animations
Position des icônes
Animations d'icônes
États
États de chargement et désactivé
Largeur complète
Utilisé pour : Formulaires, boutons d'action principaux dans des conteneurs étroits
Contextes d'utilisation
Contexte d'application vs 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
Tailles
Avec Icônes
Exemples d'utilisation
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
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>
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
Gap: 8 (2rem)
Autres configurations prédéfinies
Simple Grid
Pour des layouts à deux colonnes simples
ResponsiveCardGrid.Simple
Triple Grid
Pour des sections d'information à trois colonnes
ResponsiveCardGrid.Triple
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
Conteneurs
Largeurs standards
max-w-7xl - Container Large
max-w-6xl - Container Medium
max-w-4xl - Container Small
max-w-3xl - Container Extra Small
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
Animations
Transitions
Fade In Up
Hover 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
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
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