Bonnes pratiques
- Préserver une zone de protection autour du logo (≈ la hauteur du « S »).
- Ne pas recolorer, déformer ni ajouter d'ombre au logo.
- Choisir la déclinaison selon le contraste du fond, jamais la couleur seule.
Charte graphique « Sève »
Le design system du site et de l'application, inspiré par nos valeurs : modernité et simplicité.
1. Logo & marque
Le logo « Signal. » s'écrit en Sora 600, le point en émeraude (primary-500). Version Color (bicolore) par défaut sur fonds clairs ; bascule sur Light ou White dès que le fond est sombre ou coloré, pour préserver le contraste.
Logo complet
Color
Bicolore — par défaut, sur fonds clairs.
Dark
Monochrome foncé — aplats clairs, impression N&B.
Light
Clair — fonds sombres (encre).
White
Blanc pur — fonds colorés ou photos.
Icône « S. »
Format carré pour les espaces réduits : favicon, avatar, app mobile.
Color
Bicolore — par défaut, sur fonds clairs.
Dark
Monochrome foncé — aplats clairs, impression N&B.
Light
Clair — fonds sombres (encre).
White
Blanc pur — fonds colorés ou photos.
2. Couleur de marque — émeraude
primary-50
#ECF7F2
primary-100
#D0ECE1
primary-300
#6FC6A4
primary-500
#0B7A5B
primary-600
#0A6A4F
primary-700
#085440
3. Neutres & surfaces
app
#F6F8F7
surface
#FFFFFF
surface-hover
#F1F4F2
ink
#10221B
line
#E4E9E6
content
#14211C
4. Typographie — Sora + Inter
Display XL · Sora 600
Titre de section · Sora 600
Sous-section · Sora 500
Corps · Inter 400 — texte courant, formulaires, tableaux. La graisse Inter 500sert à l'emphase.
Label / légende · Inter 500
5. Boutons
6. Couleurs sémantiques
success
Bandeau success
warning
Bandeau warning
danger
Bandeau danger
info
Bandeau info
7. Statuts de transport
Règle d'accessibilité : toujours point coloré + texte. Jamais la couleur seule.
BrouillonAssignéEn coursLivréAnnulé
8. Rayons
sm · 6px
md · 8px
lg · 12px
pill · 999px