Typography Showcase
All typography elements from Supercaralive design system
Color Palette
Red Hero
#E63946
Blue Hero
#457B9D
Yellow Hero
#F4A261
Soft Background
#FAFAFA
Headings
Heading 1 - Hero Title
text-5xl md:text-6xl font-bold
Votre voiture super-héros 🦸
Hero heading with accent color
Heading 2 - Section Title
text-4xl md:text-5xl font-bold
Nos Super Services
Section heading with accent
Heading 3 - Card Title
text-2xl font-bold
Heading 4 - Feature Title
text-xl font-bold
Body Text
Large Body Text - Hero Description
text-xl
Regular Body Text - Standard paragraph text used throughout the application for general content and descriptions.
text-base (default)
Small Body Text - Used for secondary information and helper text
text-sm text-gray-600
Relaxed Leading - Des solutions complètes pour prendre soin de votre véhicule comme un vrai super-héros
leading-relaxed
Buttons
Primary Buttons
Secondary Buttons
Button Sizes
Disabled Buttons
Links
Cards
MySupermécano
Réparation et entretien expert de votre véhicule. Nous redonnons vie à votre voiture !
En savoir plusMySupercarwasher
Lavage premium et detailing professionnel. Votre voiture brille comme au premier jour !
En savoir plusMySupercar wallet
Gérez tous vos services auto en un seul endroit. Simple, rapide, efficace !
En savoir plusIcons & Badges
Icon Containers
Logo Examples
Error Messages & Alerts
Erreur
Une erreur s'est produite lors du traitement de votre demande.
Succès
Votre opération a été effectuée avec succès.
Attention
Veuillez vérifier les informations saisies avant de continuer.
Information
Cette fonctionnalité est disponible pour les utilisateurs premium.
Inline Error Messages
Ce champ est requis
Format d'email invalide
Le mot de passe doit contenir au moins 8 caractères
Feature Lists
Experts passionnés
Des professionnels qui aiment les voitures autant que vous
Service rapide
Intervention express sans compromis sur la qualité
Garantie satisfaction
100% satisfait ou remboursé, votre confiance est notre mission
Background Styles
Hero Gradient Background
Linear gradient from red-hero to blue-hero
Solid Red Hero Background
Primary brand color background
Solid Blue Hero Background
Secondary brand color background
Yellow Hero Background
Accent color background with dark text
Soft Background
Light neutral background for cards and sections
White Card with Shadow
Clean white background with elevation
Border Radius
Friendly (16px)
rounded-friendly
Super (24px)
rounded-super
Large (8px)
rounded-lg
Form Elements
Nous ne partagerons jamais votre email