Ombres
tokens d'ombre utilisés dans l'interface utilisateur de PyColors pour créer une élévation subtile et prévisible à travers les surfaces.
Vue d’ensembleLien vers la section
Les ombres définissent Profondeur et hiérarchie dans l'interface.
Dans PyColors, l'élévation est intentionnellement subtile. L'objectif n'est pas le drame visuel, mais Une structure prévisible.
Un système d'ombre contrôlé garantit que :
- les surfaces se sentent stratifiées sans bruit
- Les pays focus sont clairs
- les superpositions se sentent intentionnelles
- l'interface utilisateur reste calme et lisible
Pourquoi cela compte
Lorsque les ombres sont incohérentes ou trop fortes, les interfaces sont bruyantes et non structurées. Un système d'élévation restreint améliore la clarté et la qualité perçue.
Ce que vous allez définirLien vers la section
Échelle d'élévation
Règles d'utilisation
Hiérarchie de surface
ÉtapesLien vers la section
Utiliser une échelle d'élévation limitéeLien vers la section
PyColors définit un petit ensemble de tokens d'ombre :
| Token | Utilisation typique |
|---|---|
shadow-xs | boutons, entrées, petites commandes |
shadow-sm | Cartes et surfaces par défaut |
shadow-md | popovers, dropdowns |
shadow-lg | modaux et superpositions |
Chaque niveau augmente progressivement.
Appliquer les ombres de manière cohérenteLien vers la section
Évitez les ombres personnaliséesLien vers la section
Ne pas introduire de coutume box-shadow valeurs à l'intérieur des composants.
Au lieu de:
- Réutiliser des tokens existants
- Étendre le système si nécessaire
- Garder une hiérarchie visuelle prévisible
Règle du système
Si une nouvelle ombre est nécessaire plus d'une fois, elle devrait devenir un token.
Guide de décisionLien vers la section
Utilisez ce système si :
- vous avez besoin d'une élévation constante sur plusieurs surfaces
- vous créez des tableaux de bord ou des produits SaaS
- vous voulez un comportement de superposition prévisible
- vous voulez une clarté d'interface utilisateur sans surcharge visuelle
A éviter si :
- L'ombre est décorative
- il casse l'échelle du système
- il duplique un token existant
- il crée un bruit visuel
Préférez
- Utiliser des shadow tokens prédéfinis
- garder l'élévation subtile
- Augmentez la profondeur seulement si nécessaire
- aligner l'ombre avec le rayon et la surface
Éviter
- empiler plusieurs ombres
- Contraste élevé ou ombres lourdes
- box-shadow personnalisé par composant
- Niveaux d'élévation incohérents
Pourquoi c'est importantLien vers la section
Les ombres sont l’un des moyens les plus rapides de briser la cohérence visuelle.
- trop d'ombres à l'interface bruyante
- ombres trop fortes pour un look bon marché
- Des ombres incohérentes à la hiérarchie brisée
Un système contrôlé assure :
- clarté
- structure
- calme visuel
- Qualité perçue des produits