Ombres
Tokens d'ombres et effets de profondeur. Sur un fond sombre, les ombres sont plus prononcees et les glows colores ajoutent du contraste.
Principe
Le design system utilise une approche dark-first ou la profondeur est creee par la luminosite des surfaces plutot que par les ombres seules. Les ombres viennent en complement pour renforcer la hierarchie et les glows colores guident l'attention.
Catalogue d'ombres
Chaque token avec sa valeur CSS et un apercu en direct.
Card Shadow
0 14px 30px rgba(0,0,0,0.45)Ombre par defaut des cartes elevees. Donne une impression de profondeur sur le fond sombre.
Usage : Cartes principales, conteneurs de contenu eleves
Hover Lift
0 16px 30px rgba(0,0,0,0.28)Ombre au survol. Plus diffuse que l'ombre statique pour simuler une elevation accrue.
Usage : Hover sur cartes, boutons CTA, elements interactifs
Primary Glow
0 0 20px rgba(37,99,235,0.3)Halo lumineux bleu primaire. Utilise pour attirer l'attention sur un element actif ou selectionne.
Usage : Focus ring, selection active, elements mis en avant
Accent Glow
0 0 20px rgba(34,197,94,0.3)Halo lumineux vert accent. Pour les etats de succes et les indicateurs positifs.
Usage : Confirmation, record personnel, succes
Destructive Glow
0 0 20px rgba(239,68,68,0.3)Halo lumineux rouge. Pour les alertes et etats destructifs.
Usage : Erreurs, alertes, actions dangereuses
Subtle
0 2px 8px rgba(0,0,0,0.2)Ombre subtile pour les elements legers. Presque invisible mais donne de la separation.
Usage : Dropdowns, tooltips, popovers
Effet Glass (Glassmorphism)
Combine transparence, flou d'arriere-plan et bordure semi-transparente.
Carte Glass
bg-background/60 backdrop-blur-md border-foreground/10
Proprietes CSS
background
rgba(bg, 0.6)
backdrop-filter
blur(12px)
border
1px solid rgba(fg, 0.1)
Combinaison avec les transitions
Survolez les cartes pour voir l'ombre de transition au hover.
Carte avec hover lift
translate-y + shadow
Carte avec glow
primary glow + border
Carte avec accent glow
accent glow + border