CDesign system
Bold Modern
Le portail comme une marque de style de vie et un produit tech : aplats de couleur, formes géométriques, cartes très arrondies.
Bricolage Grotesque, très grasse, pour les titres ; Figtree pour le texte ; des pilules et des grilles bento partout.
Des interactions qui répondent au toucher : faire ses démarches devient agréable.
Polices : Bricolage Grotesque (variable, axes de taille optique et de largeur) et Figtree (variable).
Thème du site (niveau 3), appliqué à toute la page
- theme.accent
- rose
- theme.secondary
- orange
- theme.gradient
- rose.500 → orange.500
- theme.heroTone
- sunset
- theme.motion
- expressive
01Palette
Palette
Niveau 1. Chaque teinte partage la même grammaire de paliers ; les sites choisissent des échelles, jamais des valeurs hexadécimales.
navy
rose
orange
turquoise
gold
green
sand
red
amber
sky
violet
blush
ink
Rôles garantis par le script de contraste : 300 = texte sombre · 400 = fond sombre · 500 = fond clair · 700 = texte clair.
02Tokens sémantiques
Tokens sémantiques
Niveaux 2 et 3, résolus pour État de Leonida. Les composants n’utilisent que ces noms.
| Token | Clair | Sombre | Niveau |
|---|---|---|---|
| --bg | #FFF6EC | #0A0F1F | sémantique (2) |
| --bg-subtle | #F8ECDD | #0E1428 | sémantique (2) |
| --surface | #FFFFFF | #121A31 | sémantique (2) |
| --surface-2 | #FFFBF6 | #18203A | sémantique (2) |
| --surface-inverse | #0E1A3A | #FFF6EC | sémantique (2) |
| --fg | #0E1A3A | #FFF6EC | sémantique (2) |
| --fg-muted | #4F5B7A | #A7B0C8 | sémantique (2) |
| --fg-inverse | #FFF6EC | #0E1A3A | sémantique (2) |
| --border-strong | #77819B | #77819B | sémantique (2) |
| --accent | #FF5F8Frose.500 | #FF7AA4rose.400 | site (3) |
| --accent-hover | #E8457Arose.600 | #FF9DBArose.300 | site (3) |
| --on-accent | #0E1A3Anavy.900 | #0A0F1Fink.950 | site (3) |
| --accent-ink | #C2245Crose.700 | #FF9DBArose.300 | site (3) |
| --accent-soft | #FFE0E9rose.100 | #3D1226rose.900 | site (3) |
| --secondary | #FF9A3Corange.500 | #FFAA55orange.400 | site (3) |
| --on-secondary | #0E1A3Anavy.900 | #0A0F1Fink.950 | site (3) |
| --secondary-ink | #A84F05orange.700 | #FFC183orange.300 | site (3) |
| --secondary-soft | #FFE9D1orange.100 | #3A220Eorange.900 | site (3) |
| --gradient-from | #FF5F8Frose.500 | #FF7AA4rose.400 | site (3) |
| --gradient-to | #FF9A3Corange.500 | #FFAA55orange.400 | site (3) |
| --focus | #C2245C | #FF9DBA | sémantique (2) |
| --success | #237F48 | #5AC67D | sémantique (2) |
| --warning | #F5A70A | #FFC233 | sémantique (2) |
| --danger | #D23129 | #FF7570 | sémantique (2) |
| --info | #1F6CD1 | #5EA8FF | sémantique (2) |
| --blush | #FFB2C6 | #FFB2C6 | sémantique (2) |
| --on-blush | #0E1A3A | #0A0F1F | sémantique (2) |
| --blush-ink | #A63E66 | #FFB2C6 | sémantique (2) |
| --blush-soft | #FFE8EF | #3B1A2B | sémantique (2) |
03Contraste
Contraste
Calculé à partir des mêmes sources de tokens que le CSS. Changez le thème du site ci-dessus pour auditer un autre site.
124 paires sur 124 respectent le WCAG AA pour État de Leonida. Même vérification en CI : pnpm check:contrast.
- Clair
- Aafg / bg16.00AA
- Aafg / bg-subtle14.69AA
- Aafg / surface17.11AA
- Aafg / surface-216.60AA
- Aafg-muted / bg6.32AA
- Aafg-muted / bg-subtle5.80AA
- Aafg-muted / surface6.75AA
- Aafg-muted / surface-26.55AA
- Aaaccent-ink / bg5.31AA
- Aaaccent-ink / bg-subtle4.87AA
- Aaaccent-ink / surface5.67AA
- Aaaccent-ink / surface-25.51AA
- Aaaccent-ink / accent-soft4.62AA
- Aasecondary-ink / bg5.19AA
- Aasecondary-ink / bg-subtle4.76AA
- Aasecondary-ink / surface5.55AA
- Aasecondary-ink / surface-25.38AA
- Aasecondary-ink / secondary-soft4.71AA
- Aaon-accent / accent5.94AA
- Aaon-accent / accent-hover4.53AA
- Aaon-secondary / secondary8.10AA
- Aaon-secondary / secondary-hover6.26AA
- Aaon-gradient / gradient-from5.94AA
- Aaon-gradient / gradient-to8.10AA
- Aafg-inverse / surface-inverse16.00AA
- Aafg-on-image / scrim16.00AA
- Aaon-blush / blush10.13AA
- Aablush-ink / bg5.61AA
- Aablush-ink / bg-subtle5.15AA
- Aablush-ink / surface6.00AA
- Aablush-ink / surface-25.82AA
- Aablush-ink / blush-soft5.15AA
- Aafg / blush-soft14.70AA
- Aafg-muted / blush-soft5.80AA
- Aasuccess-ink / success-soft5.51AA
- Aasuccess-ink / bg6.11AA
- Aasuccess-ink / surface6.53AA
- Aaon-success / success5.00AA
- Aawarning-ink / warning-soft5.14AA
- Aawarning-ink / bg5.41AA
- Aawarning-ink / surface5.78AA
- Aaon-warning / warning8.48AA
- Aadanger-ink / danger-soft5.29AA
- Aadanger-ink / bg6.11AA
- Aadanger-ink / surface6.54AA
- Aaon-danger / danger4.99AA
- Aainfo-ink / info-soft5.51AA
- Aainfo-ink / bg6.27AA
- Aainfo-ink / surface6.70AA
- Aaon-info / info5.09AA
- Aamarine-ink / marine-soft6.59AA
- Aamarine-ink / bg7.62AA
- Aamarine-ink / surface8.15AA
- Aaon-marine / marine6.00AA
- border-strong / bg3.64UI
- border-strong / bg-subtle3.34UI
- border-strong / surface3.89UI
- border-strong / surface-23.78UI
- focus / bg5.31UI
- focus / bg-subtle4.87UI
- focus / surface5.67UI
- focus / surface-25.51UI
- Sombre
- Aafg / bg17.84AA
- Aafg / bg-subtle17.09AA
- Aafg / surface16.13AA
- Aafg / surface-215.04AA
- Aafg-muted / bg8.80AA
- Aafg-muted / bg-subtle8.43AA
- Aafg-muted / surface7.95AA
- Aafg-muted / surface-27.41AA
- Aaaccent-ink / bg9.79AA
- Aaaccent-ink / bg-subtle9.38AA
- Aaaccent-ink / surface8.85AA
- Aaaccent-ink / surface-28.25AA
- Aaaccent-ink / accent-soft8.21AA
- Aasecondary-ink / bg12.00AA
- Aasecondary-ink / bg-subtle11.49AA
- Aasecondary-ink / surface10.85AA
- Aasecondary-ink / surface-210.11AA
- Aasecondary-ink / secondary-soft9.33AA
- Aaon-accent / accent7.79AA
- Aaon-accent / accent-hover9.79AA
- Aaon-secondary / secondary10.11AA
- Aaon-secondary / secondary-hover12.00AA
- Aaon-gradient / gradient-from7.79AA
- Aaon-gradient / gradient-to10.11AA
- Aafg-inverse / surface-inverse16.00AA
- Aafg-on-image / scrim17.84AA
- Aaon-blush / blush11.29AA
- Aablush-ink / bg11.29AA
- Aablush-ink / bg-subtle10.82AA
- Aablush-ink / surface10.21AA
- Aablush-ink / surface-29.52AA
- Aablush-ink / blush-soft9.09AA
- Aafg / blush-soft14.35AA
- Aafg-muted / blush-soft7.08AA
- Aasuccess-ink / success-soft8.85AA
- Aasuccess-ink / bg10.89AA
- Aasuccess-ink / surface9.85AA
- Aaon-success / success8.91AA
- Aawarning-ink / warning-soft10.56AA
- Aawarning-ink / bg13.28AA
- Aawarning-ink / surface12.01AA
- Aaon-warning / warning11.82AA
- Aadanger-ink / danger-soft8.07AA
- Aadanger-ink / bg9.50AA
- Aadanger-ink / surface8.59AA
- Aaon-danger / danger7.29AA
- Aainfo-ink / info-soft8.37AA
- Aainfo-ink / bg10.24AA
- Aainfo-ink / surface9.26AA
- Aaon-info / info7.74AA
- Aamarine-ink / marine-soft8.05AA
- Aamarine-ink / bg9.26AA
- Aamarine-ink / surface8.37AA
- Aaon-marine / marine6.55AA
- border-strong / bg4.90UI
- border-strong / bg-subtle4.70UI
- border-strong / surface4.43UI
- border-strong / surface-24.13UI
- focus / bg9.79UI
- focus / bg-subtle9.38UI
- focus / surface8.85UI
- focus / surface-28.25UI
04Typographie
Typographie
Bricolage Grotesque 800 en taille optique 96 pour les titres, approche -0.04em, majuscule en début de phrase seulement. Figtree pour le texte (17 px, 1.55) et les libellés en gras des pilules.
Leonida, bonjour
00Surtitre avec index
Surtitre avec icône
Surtitre discret
Un chapô présente une section en une ou deux phrases, jamais plus.
Le texte courant est en Figtree à 17 px avec un interlignage de 1.55. Les paragraphes restent sous 70 caractères par ligne, pour qu’un avis de renouvellement se lise aussi facilement qu’un récit de voyage.
- --step--113px → 14pxRenouvelez votre permis en dix minutes, en ligne.
- --step-756px → 144pxSol, Mare, Libertas
- --step-648px → 104pxSol, Mare, Libertas
- --step-540px → 72pxSol, Mare, Libertas
- --step-434px → 52pxSol, Mare, Libertas
- --step-328px → 38pxSol, Mare, Libertas
- --step-223px → 28pxRenouvelez votre permis en dix minutes, en ligne.
- --step-119px → 22pxRenouvelez votre permis en dix minutes, en ligne.
- --step-016px → 18pxRenouvelez votre permis en dix minutes, en ligne.
05Forme et rythme
Forme et rythme
Cartes de 32 px, images de 24 px, contrôles et badges en pilule. Rayon intérieur = rayon extérieur moins la marge interne. Des ombres douces teintées par l’accent du site.
Rayon
--radius-control
--radius-card
--radius-media
--radius-badge
Élévation
--shadow-1
--shadow-2
--shadow-3
--shadow-4
--shadow-card
--shadow-raised
- --guttermarges latérales
- --grid-gapgouttière de 12 colonnes
- --section-yespace entre les sections
- Valeurs communes : gouttière clamp(1.25rem, 0rem + 5.5556vw, 5rem) ; largeur max. du contenu 100rem.
06Mouvement
Mouvement
Des apparitions espiègles avec un léger rebond, des micro-interactions élastiques, un bandeau défilant pour les alertes. Sobre sur les sites de services, rien quand le mouvement est réduit. Survolez les lignes.
- --duration-instant 90ms
- --duration-fast 160ms
- --duration-base 260ms
- --duration-slow 480ms
- --duration-slower 800ms
- --duration-cinematic 1400ms
- --ease-standardcubic-bezier(.2,0,0,1)
- --ease-out-expocubic-bezier(.16,1,.3,1)
- --ease-in-outcubic-bezier(.65,0,.35,1)
- --ease-springcubic-bezier(.34,1.56,.64,1)
reveal
type:scale, y:32, duration:0.9, ease:back.out(1.4), stagger:0.07
split
mask:true, yPercent:105, duration:1, stagger:0.08, ease:expo.out
hero
scaleFrom:1.1, duration:2, ease:expo.out, parallax:0.12
counter
duration:1.6, ease:power3.out
08Badges et alertes
Badges et alertes
L’alerte ouragan défile comme un bandeau : elle se met en pause au survol et au focus, peut être arrêtée et reste fixe quand le mouvement est réduit ou sur les sites sobres.
Clair
Saison des ouragans
La saison des ouragans dure jusqu’au 30 novembre. Connaissez votre zone d’évacuation, gardez un kit de sept jours prêt et inscrivez-vous à LeoAlert pour recevoir les alertes officielles par SMS.
Connaissez votre zone d’évacuation.
Les zones ont été redessinées cette année dans tous les comtés côtiers.
Voir ma zoneLa Causeway est fermée dimanche matin.
Votre renouvellement a été envoyé.
Nous ne demandons jamais de paiement par téléphone.
Sombre
Saison des ouragans
La saison des ouragans dure jusqu’au 30 novembre. Connaissez votre zone d’évacuation, gardez un kit de sept jours prêt et inscrivez-vous à LeoAlert pour recevoir les alertes officielles par SMS.
Connaissez votre zone d’évacuation.
Les zones ont été redessinées cette année dans tous les comtés côtiers.
Voir ma zoneLa Causeway est fermée dimanche matin.
Votre renouvellement a été envoyé.
Nous ne demandons jamais de paiement par téléphone.
09Cartes
Cartes
Des aplats de couleur, chacun avec son ton : accent doux, secondaire doux, surface, inverse, accent et dégradé. Les cartes d’agence ouvrent une portée de site imbriquée et portent les couleurs de cette agence.
Clair
Sombre
10Formulaires
Formulaires
Des champs en pilule avec des libellés visibles, des erreurs annoncées par un texte et une icône, jamais par la couleur seule. Les choix radio sont des puces.
Clair
Sombre
11Accordéon et carrousel
Accordéon et carrousel
Clavier : Tab jusqu’à une diapositive, puis les flèches, Début et Fin. Souris : faites glisser la piste.
Clair
Sombre
13Sceau et emblèmes
Sceau et emblèmes
Illustrations originales. Chaque agence a sa propre silhouette (écusson, carreau, fleur, hexagone) avec un contour blanc façon autocollant, pour rester lisible sur n’importe quel fond ; les couleurs restent fixes dans les deux thèmes, comme de vrais insignes. La géométrie est décorative et masquée aux technologies d’assistance.
Clair
Comté de KalagaPhoto utilisée sur les cartes : Des bateaux ancrés autour d’un banc de sable dans une eau bleue et claire, des gens qui nagent et se détendent sur le pont sous le soleil.
Sombre
Comté de KalagaPhoto utilisée sur les cartes : Des bateaux ancrés autour d’un banc de sable dans une eau bleue et claire, des gens qui nagent et se détendent sur le pont sous le soleil.