Charte graphique · Système

Système

Ce qui fait tenir l’ensemble : la profondeur, le mouvement, les icônes, la grille et la typographie française. Valeurs de la charte v4, prêtes à coder.

01

Ombres et profondeur

6 ombres, toutes teintées d’encre violette. Le logo n’en porte qu’une : son halo coloré.

Carte
Cartes au repos. Jamais sous le logo du site.
0 1px 2px rgba(27,13,69,.06), 0 12px 32px rgba(27,13,69,.10)
Survol
Carte survolée, qui se lève de 2 px.
0 2px 4px rgba(27,13,69,.05), 0 20px 48px rgba(27,13,69,.14)
Flottant
Menus, fenêtres, barre du bas.
0 2px 6px rgba(27,13,69,.08), 0 24px 64px rgba(27,13,69,.22)
franchıplace
Verre
En-tête translucide au-dessus du contenu.
inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(27,13,69,.06), 0 10px 30px rgba(27,13,69,.12)
Voir la fiche
Bouton
Bouton principal : l’ombre prend la couleur.
0 1px 2px rgba(27,13,69,.10), 0 8px 22px rgba(101,54,232,.28)
Ajouter aux favoris
Focus
Focus clavier, sur tout élément actif.
0 0 0 3px #FFF, 0 0 0 6px #7C4DFF
Halo du logo
Seule ombre du logo : colorée, violette et bleue, proportionnelle à la tuile (valeurs pour 240 px).
0 28px 64px -14px rgba(124,77,255,.5), 0 10px 24px -6px rgba(61,90,254,.35)
✕Ombre grise ou noire
Toutes les ombres sont teintées d’encre violette (27, 13, 69) ou de violet : jamais de gris neutre.
02

Mouvement

Une seule courbe : « doux »
--ease-doux : cubic-bezier(0.22, 1, 0.36, 1)
Départ franc, arrivée qui ralentit longuement. Tout bouge sur cette courbe, du bouton au logo.
3 durées
150 ms
Rapide · couleurs, boutons, champs
220 ms
Moyen · cartes, menus
320 ms
Lent · jauge, barres du bas, candidature, logo
Mouvement réduit
Si le système demande moins de mouvement, l’ambiance s’arrête et le logo reste fixe. Les changements d’état restent visibles, sans déplacement.
03

Icônes

Lucide 1.48.0 · extrait du jeu
grille 24 · bouts et angles arrondis
search
map-pin
store
utensils
scissors
briefcase
shopping-bag
euro
calendar
user
heart
house
file-text
check
circle-check
info
triangle-alert
arrow-right
external-link
chevron-down
menu
x
sun
moon
Le trait suit la taille
16 px
trait 1,5 px
24 px
trait 1,75 px
48 px
trait 2,5 px
stroke-width = 0,75 + 24 / taille (unités de la grille 24)
Rôle
✓Décoratives : le texte porte le sens
✓Couleur du texte voisin
✕Icône seule sans libellé ni nom accessible
173 icônes en 9 familles
largeur proportionnelle au nombre
Métiers88
Objets et repères19
Secteurs15
Actions15
Direction10
Profils10
États9
Services5
Thème2
04

Grilles et marges

Points de rupture et marges
390 px
Téléphone · marge 16 px
zone utile
768 px
Tablette · marge 32 px
zone utile
1280 px
Ordinateur · marge 48 px
zone utile
1440 px
Grand écran · marge 48 px
zone utile
Largeur utile plafonnée à 1 376 px : au-delà, les marges grandissent. Espacements au pas de 4 px.
Pas de carte seule sur sa ligne
✓La dernière ligne se répartit
✕Une carte orpheline
05

Typographie française

Les espaces ne se voient pas mais tiennent la ligne : jamais de « ? » seul en début de ligne.

Règles
espace fine insécableespace insécable
Avant ; ! ?
Prêt à ouvrir?
U+202F
Avant : et à l’intérieur des guillemets
Secteur: «Restauration»
U+00A0
Entre un nombre et son unité
320ms · 15% · 48px
U+00A0
Milliers séparés par une fine
Apport: 12500€
U+202F puis U+00A0
Apostrophe et guillemets français
l’enseigne, « franchise »
’ U+2019 · « » U+00AB/BB