SaaS Template Powered by Traivis
Se connecter Commencer
Design System

Style Guide

Tous les composants CSS disponibles dans main.css pour construire votre SaaS.

Couleurs

Palette de couleurs définie dans les variables CSS

Couleurs principales

Primary
#5b4cff
Secondary
#a855f7
Accent
#00d4ff
Success
#00c896
Warning
#ffb800
Danger
#ff4757

Neutres

Dark
#0a0a1a
Text Main
#0a0a1a
Text Secondary
#4a4a68
Text Muted
#6b6b8a
Border
#e4e6f0
Background
#fafbff

Gradients

Gradient Primary
Gradient Accent
Gradient Dark

Typographie

Classes utilitaires pour le texte

Tailles de texte

.text-xs - 0.75rem

.text-sm - 0.875rem

.text-base - 1rem

.text-lg - 1.125rem

.text-xl - 1.25rem

.text-2xl - 1.5rem

.text-3xl - 2rem

.text-4xl - 2.5rem

Poids de police

.font-normal - 400

.font-medium - 500

.font-semibold - 600

.font-bold - 700

.font-extrabold - 800

Couleurs de texte

.text-primary

.text-secondary

.text-muted

.text-success

.text-warning

.text-danger

.text-white

Boutons

Tous les styles de boutons disponibles

Variants

Tailles

États

Avec icônes

Cards

Composant card réutilisable avec hover effect

Card Standard

Avec effet de hover et glow subtil.

Card avec Header

Le header a un fond glow.

Card Flat

Sans shadow, juste une bordure.

Badges

Labels et tags

Primary Success Warning Danger Neutral

Icon Boxes

Icônes dans des boîtes colorées avec gradients

Variantes de couleur

Tailles

.icon-box-sm (32px) | .icon-box (40px) | .icon-box-lg (48px)

Usage avec texte

Déploiement rapide

En quelques minutes seulement

Sécurisé

Chiffrement de bout en bout

Accent Cards

Cards avec bordure colorée à gauche

Accent Primary

Card avec bordure primaire par défaut

Accent Cyan

Variante .accent-card-accent

Accent Success

Variante .accent-card-success

Accent Warning

Variante .accent-card-warning

Accent Danger

Variante .accent-card-danger

Gradient Text

Texte avec dégradé de couleurs

Gradient Primary

Gradient Accent

.gradient-text | .gradient-text-accent

Progress Bars

Barres de progression

Standard (gradient)

Progression 75%
Chargement 45%

Variantes de couleur

Success - 100%
Warning - 60%
Danger - 25%

Alerts

Messages de notification

✓
Succès!
Votre action a été effectuée avec succès.
✕
Erreur
Une erreur est survenue lors du traitement.
⚠
Attention
Votre abonnement expire dans 3 jours.
ℹ
Information
Une nouvelle mise à jour est disponible.

Formulaires

Champs de saisie et contrôles

Nous ne partagerons jamais votre email.
Ce champ est obligatoire.

Avatars

Composants avatar avec différentes tailles

Tailles

A
B
C
D
E
F

Avatar Group

A
B
C
+5

Tooltips

Infobulles au survol (CSS pur)

Positions

Top (défaut) Bottom Left Right

Sur des boutons

Loading States

Indicateurs de chargement

Spinners

Skeleton Loading

Empty State

Affichage quand il n'y a pas de données

Aucun résultat

Vous n'avez pas encore ajouté d'éléments. Commencez par en créer un nouveau.

Modals

Boîtes de dialogue

<div class="modal-backdrop"></div> <div class="modal"> <div class="modal-header">...</div> <div class="modal-body">...</div> <div class="modal-footer">...</div> </div>

Dividers

Séparateurs

Contenu au-dessus

Contenu en dessous

ou continuer avec

Autre contenu

Media Components

Images, vidéos, galeries, lightbox

Aspect Ratios

1:1
16:9
4:3
3:4

Image avec zoom au hover

Image zoom
Image zoom
Image zoom

Image Overlay (hover)

Overlay

Montagne enneigée

Paysage alpin au lever du soleil

Overlay

Architecture moderne

Design contemporain

Overlay

Toujours visible

Overlay permanent

Video Thumbnail avec bouton Play

Video thumbnail
Video thumbnail

Gallery Grid

Gallery
Gallery
Gallery
Gallery
Gallery
Gallery
Gallery
Gallery

File Preview

document-important.pdf
2.4 MB
screenshot-2024.png
845 KB
presentation.mp4
24.5 MB
rapport-2024.xlsx
156 KB

Lightbox Demo

Cliquez pour voir la lightbox en action

Workflow / Stepper

Étapes avec statuts et animations

Workflow Showcase (Premium)

Version horizontale avec cartes, images et avatars

Step
Étape 1
Briefing client
Analyse des besoins et définition du périmètre
Terminé
Avatar Avatar
Step
Étape 2
Développement
Création des fonctionnalités principales
En cours
Avatar Avatar Avatar
Step
Étape 3
Tests & QA
Validation qualité et corrections
En attente
Step
Étape 4
Mise en production
Déploiement et lancement officiel
À venir

✨ Workflow Showcase - Exemple E-commerce

Step
Commande
Panier validé
3 articles • 149,90€
14:32
Step
Paiement
Transaction réussie
Visa •••• 4242
Sécurisé
Step
Préparation
Colis en cours
Entrepôt Paris Nord
En cours
Step
Livraison
En attente
Estimée: Mer. 4 Dec
2-3 jours

🧠 Chain of Thought — Analyse Document IA

Visualisation du processus de réflexion d'une IA analysant un document

Step
Étape 1 • 0.3s
Ingestion
Lecture et parsing du document PDF (124 pages)
2.4 MB traités
Step
Étape 2 • 1.2s
Embedding
Vectorisation sémantique avec GPT-4 embeddings
1,847 chunks
Step
Étape 3 • 0.8s
Retrieval
Recherche des passages pertinents (RAG)
Top 5 matches
Step
Étape 4 • ~3s
Reasoning
Génération de la réponse avec contexte
Thinking...
Step
Étape 5
Output
Synthèse formatée avec sources citées
En attente

🤖 Chain of Thought — Agent IA Multi-étapes

Un agent IA qui planifie, exécute et valide ses actions

Step
Parse Query
Compréhension
"Analyse les ventes Q3 et compare avec Q2"
Intent détecté
Step
Planning
Décomposition
3 sous-tâches identifiées
Plan créé
Step
Execution
Actions
Requête SQL → Calcul → Graphique
2/3 tools
SQL Python Chart
Step
Validation
Self-Check
Vérification cohérence & qualité
Pending
Step
Response
Réponse finale
Synthèse + visualisations + sources
Waiting

Workflow Vertical (défaut)

Commande reçue
Votre commande #12345 a été enregistrée avec succès
14:32 Terminé
Paiement validé
Le paiement par carte bancaire a été accepté
14:33 Terminé
Préparation en cours
Notre équipe prépare votre colis
En cours... En cours
4
Expédition
Le colis sera remis au transporteur
À faire
5
Livraison
Estimation: 2-3 jours ouvrés

Workflow Horizontal

Inscription
Vérification
Paiement
4
Confirmation

Tous les statuts

1
À faire
.step-pending
En attente
.step-waiting
En cours
.step-progress
Terminé
.step-done ou .step-completed
En erreur
.step-error
Ignoré
.step-skipped

Variante Cards

Upload du fichier
rapport-annuel-2024.pdf (2.4 MB)
Validé Il y a 5 min
Analyse du document
Extraction du texte et des métadonnées
124 pages traitées
Traitement IA
En attente de ressources disponibles...
Position: 3/12
Génération du rapport
Création du rapport de synthèse

Variante Timeline (compact)

Projet créé
Lun 25 Nov, 09:00
Équipe assignée
Mar 26 Nov, 14:30
Développement en cours
Depuis Mer 27 Nov
Review & Tests
Mise en production

📂 Accordion

Sections pliables FAQ

Accordion classique

Pour créer un compte, cliquez sur le bouton "S'inscrire" en haut à droite de la page. Remplissez le formulaire avec vos informations personnelles et validez votre email.
Nous acceptons les cartes Visa, Mastercard, American Express ainsi que PayPal. Tous les paiements sont sécurisés via Stripe.
Notre équipe support est disponible 24/7. Vous pouvez nous contacter par email à support@brandscan.com ou via le chat en bas à droite de votre écran.

📊 Progress Bars

Barres de progression

Tailles et couleurs

Small (4px)
Default (8px)
Large (12px) - Success
XL avec label (20px) - Warning
45%

Animées

Striped animée
Indéterminée (chargement)

Avec label externe

Stockage
68%
Mémoire
92%

🔘 Toggle / Switch

Interrupteurs on/off

Tailles

États

Exemple : Paramètres

Notifications

Notifications email
Recevoir des mises à jour par email
Notifications push
Alertes sur votre appareil
Mode sombre
Activer le thème sombre

🔔 Toast / Notifications

Notifications temporaires

Types de toast

Succès !
Vos modifications ont été enregistrées.
Erreur
Une erreur est survenue. Veuillez réessayer.
Attention
Votre session expire dans 5 minutes.
Information
Une nouvelle mise à jour est disponible.

Démo interactive

🏷️ Tags / Chips

Étiquettes et filtres

Tags simples

Design Frontend React CSS

Tags avec couleurs

Primary Success Warning Danger

Tags supprimables

JavaScript TypeScript Node.js

Tailles

Small Default Large

⭐ Rating

Notation par étoiles

Rating interactif

4.0 (128 avis)
3.0

💀 Skeleton Loaders

Placeholders de chargement

Éléments skeleton

Avatar
Texte
Bouton

Skeleton Card

Skeleton Liste (profil)

📋 Tables

Tableaux avec tri, pagination et styles variés

Table complète avec pagination

Utilisateur Email Rôle Statut Actions
Avatar
Marie Dupont @mariedupont
marie.dupont@email.com Admin Actif
Avatar
Jean Martin @jeanmartin
jean.martin@email.com Éditeur Actif
Avatar
Sophie Bernard @sophiebernard
sophie.b@email.com Lecteur En attente
Avatar
Pierre Durand @pierredurand
pierre.d@email.com Éditeur Inactif

Table simple striped

Produit Prix Stock Catégorie
MacBook Pro 14" 2 499 € 12 Informatique
iPhone 15 Pro 1 229 € 45 Téléphonie
AirPods Pro 2 279 € 89 Audio
iPad Air 769 € 23 Tablettes

📑 Tabs

Onglets avec différents styles

Tabs par défaut (avec badges)

Bienvenue sur l'onglet Général

Ceci est le contenu du premier onglet. Vous pouvez y mettre n'importe quel contenu HTML.

Profil utilisateur

Gérez vos informations personnelles et vos préférences de compte.

Vos notifications

Vous avez 12 nouvelles notifications non lues.

Paramètres avancés

Configurez les options avancées de votre compte.

Tabs Pills

Affichage de tous les éléments

Éléments en cours uniquement

Éléments terminés uniquement

Éléments archivés uniquement

Tabs Boxed

Description du produit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Spécifications techniques

Dimensions, poids, matériaux, etc.

Avis clients

24 avis avec une note moyenne de 4.5/5

Tabs Full Width

Facturation mensuelle sans engagement

Économisez 20% avec la facturation annuelle

📐 Grid System

Système de grille responsive

.grid-4 (→ 2 tablet → 1 mobile)

1
2
3
4

.grid-3

1
2
3

.grid-2

1
2

📊 Stat Component

Affichage de métriques

💎

Plan actuel

Pro

👥

Utilisateurs

1 234

💰

Revenus

12 450€

⚡ Quick Actions

Liste d'actions rapides

Nouveau projet Paramètres Analytics Aide

🛠️ Utility Classes

Classes utilitaires disponibles

Flexbox

.flex .flex-col .flex-center .flex-between .items-center .flex-wrap .gap-sm .gap-md .gap-lg

Spacing

.m-0 .mt-sm .mt-md .mt-lg .mb-* .p-sm .p-md .p-lg .px-* .py-*

Width

.w-full .w-auto .max-w-sm .max-w-md .max-w-lg .max-w-xl

Display

.hidden .hide-mobile .show-mobile .hide-desktop .show-desktop

Borders

.border .border-light .rounded .rounded-lg .rounded-xl .rounded-full

Shadows

.shadow-none .shadow-sm .shadow-md .shadow-lg .shadow-xl .shadow-glow
Photo de paysage — Cliquez sur le fond ou appuyez Échap pour fermer