Ember.Ember

Fondations

Fondations

Ce qui est commun à toute l’application et au site : le logo, les couleurs, la typographie, les espacements, la grille, les rayons, les ombres, les bordures, les icônes et le mouvement.

Couleurs de marque

Une seule palette orange, ember de 50 à 950, la même dans l’application et sur le site. Cliquez sur une couleur pour copier sa valeur.

  • ember-50

    #fff9f5 · RVB 255 249 245

    Fonds de pastilles, icône de carte, état sélectionné

  • ember-100

    #fff2e8 · RVB 255 242 232

    Fond du plan mis en avant, halo de travail

  • ember-200

    #ffe4d1 · RVB 255 228 209

    Bordures de puces

  • ember-300

    #ffcfa3 · RVB 255 207 163

    Survol de bordure

  • ember-400

    #ffb374 · RVB 255 179 116

    Bordure de glisser-déposer

  • ember-500

    #ff8c42 · RVB 255 140 66

    Orange du logo : gros boutons, soulignement actif du menu, frise, pastilles, couleur du thème

  • ember-600

    #f97316 · RVB 249 115 22

    Survol des gros boutons

  • ember-700

    #ea580c · RVB 234 88 12

    Petits boutons (12 px et moins), anneau de focus

  • ember-800

    #c2410c · RVB 194 65 12

    Survol des petits boutons, texte orange, puces

  • ember-900

    #9a3412 · RVB 154 52 18

    Survol du texte orange

  • ember-950

    #7c2d12 · RVB 124 45 18

    Texte orange très foncé

Emploi de l’orange

Emploi de l’orange
RôleClasses
Gros bouton (texte de 14 px et plus)bg-ember-500 text-white hover:bg-ember-600
Petit bouton (texte de 13 px et moins)bg-ember-700 text-white hover:bg-ember-800
Texte orangetext-ember-800, survol text-ember-900
Fond d’un boutonember-500 pour un gros, ember-700 pour un petit, texte blanc, jamais ember-800 au repos
Puce orangeborder-ember-200 bg-ember-50 text-ember-800
Orange sans textelogo, frise, pastilles, jauges, soulignement de menu : ember-500
Anneau de focusring-2 ring-ember-700 ring-offset-2
Règle
Le texte est blanc sur tout bouton orange, jamais foncé. L’orange n’est jamais utilisé en texte hors de ember-800 et ember-900.

Dégradés

Quatre dégradés à 135°, pour les fonds décoratifs seulement : fin de page, illustrations. Jamais sur un bouton, une puce, un avatar ni une carte.

  • bg-gradient-orange

    #ff8c42, #f97316, #ea580c

  • bg-gradient-orange-light

    #fff9f5, #ffe4d1, #ffcfa3

  • bg-gradient-dark

    #1c1917, #292524, #44403c

  • bg-gradient-subtle

    #fafaf9, #f5f5f4, #fff9f5

Mode sombre de l’app

Valeurs sombres des trois teintes claires
TokenClairSombre
ember-50#fff9f5rgb(43 29 19)
ember-100#fff2e8rgb(58 38 21)
ember-200#ffe4d1rgb(87 54 26)

Le mode sombre ne redéfinit que les fonds, bordures, anneaux et dégradés de ces trois teintes. Les oranges de 300 à 950 et les textes ne changent pas. Le site n’a pas de mode sombre : sa surface de marque est claire.

Neutres

neutral est le seul gris : un gris chaud, de 50 à 950. Aucun gris froid ne se mêle à lui.

  • neutral-50

    #fafaf9 · RVB 250 250 249

    Fond du composeur, cadres du chat, sections calmes du site

  • neutral-100

    #f5f5f4 · RVB 245 245 244

    Bulle utilisateur, piste des segmentés, survols

  • neutral-200

    #e7e5e4 · RVB 231 229 228

    Bordure standard

  • neutral-300

    #d6d3d1 · RVB 214 211 209

    Bordure de bouton secondaire, cadre des blocs de code

  • neutral-400

    #a8a29e · RVB 168 162 158

    Texte indicatif (placeholder) seulement

  • neutral-500

    #78716c · RVB 120 113 108

    Légendes, icônes au repos

  • neutral-600

    #57534e · RVB 87 83 78

    Texte secondaire, segment au repos

  • neutral-700

    #44403c · RVB 68 64 60

    Liens de navigation, texte de bouton neutre

  • neutral-800

    #292524 · RVB 41 37 36

    Texte du chat, bulles

  • neutral-900

    #1c1917 · RVB 28 25 23

    Titres et texte principal

  • neutral-950

    #0c0a09 · RVB 12 10 9

    Titres très contrastés, bouton noir

Valeurs du mode sombre de l’app

Valeurs claires et sombres des neutres
TokenClairSombre, texteSombre, fond
neutral-50#fafaf9#1c1c1c#1c1c1c
neutral-100#f5f5f4#2e2e2e#2e2e2e
neutral-200#e7e5e4#3a3a3a#3a3a3a
neutral-300#d6d3d1#4a4a4a#4a4a4a
neutral-400#a8a29e#8f8f8f#5a5a5a
neutral-500#78716c#a3a3a3#6b6b6b
neutral-600#57534e#bdbdbd#4a4a4a
neutral-700#44403c#d4d4d4#3a3a3a
neutral-800#292524#e5e5e5#2a2a2a
neutral-900#1c1917#f2f2f2#0f0f0f
neutral-950#0c0a09#fafafa#0a0a0a
Surfaces du mode sombre
Surface sombreValeurNote
Page#141414Texte #f2f2f2 ; un gris très sombre, jamais noir profond
Coquille (rail, barre)#1a1a1adata-theme-dark="shell"
Panneaux, cartes, menus, composeur#262626Fond blanc réécrit, avec variantes de 95 % à 60 %
Bordure#3a3a3a
Texte de prose#d4d4d4 · #f2f2f2 · #a3a3a3Corps, titres, légendes ; filets #3a3a3a

Couleurs d’état

Quatre jeux, un par rôle : succès, alerte, erreur, information. Chacun a cinq valeurs (50, 200, 500, 700, 800) et un seul couple pour un message.

Les quatre jeux

Succès success

  • success-50

    #ecfdf5 · RVB 236 253 245

  • success-200

    #a7f3d0 · RVB 167 243 208

  • success-500

    #10b981 · RVB 16 185 129

  • success-700

    #047857 · RVB 4 120 87

  • success-800

    #065f46 · RVB 6 95 70

Alerte warning

  • warning-50

    #fffbeb · RVB 255 251 235

  • warning-200

    #fde68a · RVB 253 230 138

  • warning-500

    #f59e0b · RVB 245 158 11

  • warning-700

    #b45309 · RVB 180 83 9

  • warning-800

    #92400e · RVB 146 64 14

Erreur danger

  • danger-50

    #fef2f2 · RVB 254 242 242

  • danger-200

    #fecaca · RVB 254 202 202

  • danger-500

    #ef4444 · RVB 239 68 68

  • danger-700

    #b91c1c · RVB 185 28 28

  • danger-800

    #991b1b · RVB 153 27 27

Information info

  • info-50

    #f0f9ff · RVB 240 249 255

  • info-200

    #bae6fd · RVB 186 230 253

  • info-500

    #0ea5e9 · RVB 14 165 233

  • info-700

    #0369a1 · RVB 3 105 161

  • info-800

    #075985 · RVB 7 89 133

Emploi

  • Succès

    Texte success-800, fond success-50, bordure success-200.

    7,29:1 · AAA

  • Alerte

    Texte warning-800, fond warning-50, bordure warning-200.

    6,84:1 · AA

  • Erreur

    Texte danger-800, fond danger-50, bordure danger-200.

    7,60:1 · AAA

  • Information

    Texte info-800, fond info-50, bordure info-200.

    7,09:1 · AAA

Emploi des couleurs d’état
EmploiClasses
Message (alerte, bandeau)rounded-xl border border-{rôle}-200 bg-{rôle}-50 px-4 py-3 text-{rôle}-800
Texte seul sur blanctext-{rôle}-700
Point ou icône de statutbg-{rôle}-500 ou text-{rôle}-500
Erreur de champborder-danger-700, message text-sm text-danger-700 avec role="alert"
Bouton destructifbg-danger-700 text-white hover:bg-danger-800
Statuts de moduledisponible success-500, accès limité warning-500, aperçu neutral-400, prévu neutral-300
Mode sombre de l’apppositif #6ee7b7, négatif #fda4af

Contrastes mesurés

Rapports WCAG 2.x calculés à partir des valeurs réelles. Seuils : 4,5:1 pour un texte normal (AA), 3:1 pour un gros texte (18,66 px gras ou 24 px et plus) et pour les éléments d’interface, 7:1 pour AAA. Le texte blanc sur les oranges de bouton est un choix de charte.

Texte blanc sur les oranges (boutons)

Le texte reste blanc sur tout bouton orange. Le contraste de ember-500 est un choix de charte.
Texte blanc sur les oranges (boutons)
AperçuCoupleRatioNiveauEmploi
white #ffffff sur ember-500 #ff8c422,31:1charteGros bouton
white #ffffff sur ember-600 #f973162,80:1charteSurvol du gros bouton
white #ffffff sur ember-700 #ea580c3,56:1chartePetit bouton
white #ffffff sur ember-800 #c2410c5,18:1AASurvol du petit bouton

Orange utilisé comme texte

Orange utilisé comme texte
AperçuCoupleRatioNiveauEmploi
ember-800 #c2410c sur white #ffffff5,18:1AATexte orange de référence
ember-800 #c2410c sur ember-50 #fff9f54,96:1AAPuce orange
ember-800 #c2410c sur ember-100 #fff2e84,71:1AAPlan mis en avant
ember-900 #9a3412 sur white #ffffff7,31:1AAASurvol du texte orange
ember-700 #ea580c sur white #ffffff3,56:1gros texteAnneau de focus (indicateur, 3:1 requis)

Neutres

Neutres
AperçuCoupleRatioNiveauEmploi
neutral-900 #1c1917 sur white #ffffff17,49:1AAATitres et texte principal
neutral-800 #292524 sur white #ffffff15,17:1AAATexte du chat
neutral-800 #292524 sur neutral-50 #fafaf914,52:1AAACadres du chat
neutral-700 #44403c sur white #ffffff10,27:1AAALiens de navigation
neutral-600 #57534e sur white #ffffff7,63:1AAATexte secondaire
neutral-600 #57534e sur neutral-100 #f5f5f46,99:1AASegment au repos
neutral-500 #78716c sur white #ffffff4,80:1AALégendes, icônes au repos
neutral-500 #78716c sur neutral-50 #fafaf94,59:1AALégendes sur cadre calme
neutral-400 #a8a29e sur white #ffffff2,52:1échecTexte indicatif (placeholder) seulement
white #ffffff sur neutral-900 #1c191717,49:1AAABouton noir

Couleurs d’état

Couleurs d’état
AperçuCoupleRatioNiveauEmploi
success-800 #065f46 sur success-50 #ecfdf57,29:1AAAMessage de succès
success-700 #047857 sur white #ffffff5,48:1AATexte de succès
warning-800 #92400e sur warning-50 #fffbeb6,84:1AAMessage d’alerte
warning-700 #b45309 sur white #ffffff5,02:1AATexte d’alerte
danger-800 #991b1b sur danger-50 #fef2f27,60:1AAAMessage d’erreur
danger-700 #b91c1c sur white #ffffff6,47:1AATexte d’erreur
info-800 #075985 sur info-50 #f0f9ff7,09:1AAAMessage d’information
info-700 #0369a1 sur white #ffffff5,93:1AATexte d’information
white #ffffff sur danger-700 #b91c1c6,47:1AABouton destructif

Mode sombre de l’app

Mode sombre de l’app
AperçuCoupleRatioNiveauEmploi
#f2f2f2 sur #14141416,46:1AAATexte sur la page
#f2f2f2 sur #26262613,52:1AAATexte sur un panneau
#d4d4d4 sur #26262610,21:1AAATexte de prose
#bdbdbd sur #2626268,06:1AAAneutral-600 sombre
#a3a3a3 sur #1414147,30:1AAAneutral-500 sombre sur la page
#a3a3a3 sur #2626266,00:1AAneutral-500 sombre sur un panneau
ember-500 #ff8c42 sur #2626266,54:1AAOrange en texte sur panneau sombre
#6ee7b7 sur #2626269,93:1AAASuccès sombre
#fda4af sur #2626268,00:1AAAErreur sombre

Typographie

Deux familles de marque et une famille de code. Satoshi porte le logo et les titres, Inter l’interface et le texte courant.

  • Aa

    Satoshi

    Logo et titres

    ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 & ? ! €

    Classe font-satoshi. Fichiers locaux en woff2 (graisses 500 et 700) et otf ; la graisse 700 est préchargée. Graisses utilisées : Bold 700 et Medium 500.

  • Aa

    Inter

    Interface et texte courant

    ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 & ? ! €

    Classe font-sans, chargée par next/font dans les deux produits (variable --font-inter, display: swap). Graisses utilisées : Regular 400, Medium 500, Semibold 600.

Familles typographiques
FamilleRôleClasseGraisses
SatoshiLogo, titresfont-satoshi500, 700
InterInterface, textefont-sans400, 500, 600
MonoCodefont-mono400, 500

Échelle du site

L’échelle du site est écrite dans site-container.ts et testée. Chaque échantillon ci-dessous utilise la constante réelle : redimensionnez la fenêtre pour voir le passage du téléphone au bureau.

  • H1 des pages

    Financez, créez, prospectez.

    Téléphone
    40 px
    Bureau
    56 px (md)
    Graisse
    Satoshi 700
    Interligne
    1,04 puis 1,02
    Approche
    -0,02em

    max-w-[900px]

  • H1 Produit, Solutions, Tarifs

    Financez, créez, prospectez.

    Téléphone
    40 px
    Bureau
    64 px
    Graisse
    Satoshi 700
    Interligne
    1,04 puis 1,02
    Approche
    -0,02em

  • H2 de section

    Financez, créez, prospectez.

    Téléphone
    32 px
    Bureau
    44 px
    Graisse
    Satoshi 700
    Interligne
    1,08
    Approche
    -0,02em

  • H3 (cartes, questions)

    Financez, créez, prospectez.

    Téléphone
    24 px
    Bureau
    28 px
    Graisse
    Satoshi 700
    Interligne
    1,2
    Approche
    -0,02em

  • Titre de carte module

    Financez, créez, prospectez.

    Téléphone
    20 px
    Bureau
    20 px
    Graisse
    Satoshi 700

  • Prix (Tarifs)

    0 €

    Téléphone
    56 px
    Bureau
    56 px
    Graisse
    Satoshi 700
    Interligne
    1
    Approche
    -0,045em, chiffres tabulaires

  • Sous-titre de haut de page

    Dites ce qui bloque, Ember s’en charge.

    Téléphone
    17 px
    Bureau
    20 px
    Graisse
    400
    Interligne
    1,5
    Approche
    neutral-600

  • Chapeau de page interne

    Une page interne commence par un chapeau court.

    Téléphone
    17 px
    Bureau
    20 px
    Graisse
    400
    Interligne
    1,6
    Approche
    neutral-600, max-w-[720px]

  • Question de FAQ

    Combien de temps dure le live ?

    Téléphone
    18 px
    Bureau
    18 px
    Graisse
    Satoshi 500
    Interligne
    28 px

  • Réponse de FAQ

    Une heure, et pas une minute de théorie.

    Téléphone
    16 px
    Bureau
    16 px
    Graisse
    400
    Interligne
    1,65
    Approche
    neutral-600

  • Lien de navigation

    Solutions

    Bureau
    15 px
    Graisse
    500
    Approche
    neutral-700

  • Entrée de méga-menu

    Finance ta croissance

    Un dossier de financement sourcé.

    Bureau
    titre 15 px, texte 13 px
    Graisse
    Satoshi 500
    Interligne
    24 / 20 px

  • Surtitre (menu, colonnes)

    Ressources

    Téléphone
    11 px
    Bureau
    11 px
    Graisse
    600, majuscules
    Interligne
    20 px
    Approche
    +0,12em, neutral-500

    Référence de tous les surtitres

  • Bouton

    Commencer gratuitement

    Téléphone
    16 px (hérité) ou 15 px
    Graisse
    600

  • Lien du pied de page

    Questions fréquentes

    Téléphone
    15 px
    Graisse
    400
    Interligne
    24 px
    Approche
    neutral-600

  • Mentions légales

    Conditions d’utilisation

    Téléphone
    12 px
    Graisse
    400
    Approche
    neutral-500

Le H1 de l’accueil fait 40 px, 56 px dès md et 64 px dès lg, centré dès md, max-w-[900px]. Les pages contrôlées à 768 px gardent l’échelle téléphone jusqu’à 1 024 px grâce à SITE_H1_TABLET_OVERRIDE et SITE_H2_TABLET_OVERRIDE.

Règles de mise en forme du texte

  • Pas de mot orphelin : h1 à h4 en text-wrap: balance et hyphens: manual, p et li en text-wrap: pretty (#2573). Utilitaire .text-balance, aussi disponible dans l’app.
  • Lissage : -webkit-font-smoothing: antialiased dans les deux apps.
  • Titres en deux temps (pages Solutions) : le public sur sa ligne, la promesse dessous, espaces insécables avant « : » et entre les deux premiers mots.
  • Émphase Markdown : italique ; les citations n’ajoutent aucun guillemet.

Échelle de l’interface

Une seule échelle pour l’interface de l’application et du site. Plancher : 11 px pour un libellé non essentiel, 12 px pour tout texte utile.
Échelle de l’interface
RôleTailleAperçuClasses
Surtitre, libellé de colonne11 pxRessourcestext-[11px] font-semibold uppercase tracking-[0.12em] text-neutral-500
Légende, puce, petit bouton12 pxModifié hiertext-xs
Texte dense : tableau, en-tête d’email, menu13 pxObjet : rendez-voustext-[13px]
Interface (défaut), bouton14 pxEnregistrertext-sm
Messages, liens de navigation et de pied de page15 pxVoici le plan proposé pour votre décision.text-[15px] leading-relaxed
Corps, champs sur téléphone16 pxRédigez un one-pagertext-base
Question de FAQ18 pxCombien de temps dure le live ?font-satoshi text-[18px] font-medium
Titre de carte, de modale, de section d’écran20 pxNouveau dossierfont-satoshi text-xl font-bold
Titre d’écran24 puis 30 pxSecond Cerveaufont-satoshi text-2xl font-bold md:text-[30px]
Titre d’accueil de l’app30 pxQue construit-on ensemble ?font-satoshi text-3xl font-bold tracking-tight
Code13 px, interligne 1,6const total = 12;font-mono text-[13px] leading-[1.6]
Règle
Titres : l’échelle SITE_H1, SITE_H2, SITE_H3. Surtitres : un seul interlettrage, tracking-[0.12em]. Titres : tracking-[-0.02em]. Tailles interdites : 8, 9, 10 px et demi-pixels.

Espacements

L’échelle est celle de Tailwind, par pas de 4 px : 1 = 4 px, 2 = 8 px, 4 = 16 px, 16 = 64 px.

L’échelle

  • p-14 px
  • p-28 px
  • p-312 px
  • p-416 px
  • p-624 px
  • p-832 px
  • p-1248 px
  • p-1664 px
  • p-28112 px
Règle
Icône de 18 px : h-[18px] w-[18px].

Gouttières

SITE_CONTAINER = mx-auto w-full max-w-[1280px] px-4 sm:px-6 lg:px-12 : 16 px sur téléphone, 24 px sur tablette, 48 px sur bureau.

Téléphone

< 640 px

16 px

Tablette

640 à 1023 px

24 px

Bureau

≥ 1024 px

48 px

Rythme vertical des sections

SITE_SECTION_Y = 'py-16 md:py-28' : 64 px sur téléphone, 112 px dès 768 px, pour toute section de page publique. Haut de page : pt-14 md:pt-20.

Aperçu à l’échelle : marge haute et basse d’une section

Téléphone
64 px
Bureau
112 px

Marges intérieures

Les aires teintées sont les marges intérieures, en px.

Aperçu vivant, marges cotées

contenu
24 px

Carte du site, téléphone : p-6

contenu
32 px

Carte du site, bureau : md:p-8

contenu
20 px

Carte de tarif : p-5 sm:p-6

contenu
16 px

Carte de l’app : p-4

contenu
12 px

Alerte : px-4 py-3

Marges intérieures
SurfaceMarge
Site : cartep-6 md:p-8
Site : carte de tarifp-5 sm:p-6
Site : carte de choixp-5
Site : colonne du méga-menup-6
App : cartep-4 (p-3 pour une carte dense)
App : alertepx-4 py-3
App : composeurligne px-2.5 py-2 gap-1.5 ; cadre px-4 md:px-8 pt-3

Écran de l’app

Rythme d’un écran de l’app
ÉlémentValeur
Marges de l’écranpx-4 md:px-8
Écart entre blocsspace-y-6 (24 px)
Intérieur d’une cartep-4 (16 px)
Titre de pagefont-satoshi text-2xl font-bold md:text-[30px]
Titre de sectionfont-satoshi text-xl font-bold

Grille et points de rupture

Les points de rupture de Tailwind, avec 1 024 px comme seuil bureau commun à l’application et au site.

Points de rupture

À l’échelle

xs
475 px
sm
640 px
md
768 px
lg
1024 px
xl
1280 px
2xl
1536 px
Points de rupture
SeuilEmploi
xsPetits téléphones (app)
smGouttière de 24 px, boutons de haut de page à leur taille
mdUne colonne devient deux, titres de section de 44 px
lgSeuil bureau : menu complet du header, rail de l’app déplié, cibles compactes
xlGrille de tarifs à quatre colonnes
2xlGrands écrans

Règle mobile

Règle mobile commune
SujetTéléphone (< 640)Tablette (640 à 1023)Bureau (≥ 1024)
Gouttière16 px24 px48 px
H140 px40 px56 à 64 px
H232 px32 px40 à 44 px
H324 px24 px28 px
Rythme entre sections64 px64 px112 px
Bouton principal d’un haut de pagepleine largeur (w-full sm:w-auto)à sa tailleà sa taille
Cibles tactiles44 px44 px40 px au moins
  • Menu complet du header à partir de 1 024 px ; en dessous, menu mobile plein écran.
  • Grilles de cartes en une colonne sous 768 px ; aucune image coupée.

Conteneurs et largeurs de lecture

Conteneur du site, 1 280 px au plus

48
1 184 px utiles
Conteneurs et largeurs de lecture
OùValeur
Contenu du siteSITE_CONTAINER : 1 184 px utiles
Sections pleine largeur au-delà de 1 920 pxSITE_CONTAINER_WIDE : max-w-[1440px]
Texte long, chapeaux, réponsesmax-w-[680px]
Titresmax-w-[900px]
Fil de conversation et composeur (app)max-w-3xl
Bulles (app)85 % (utilisateur), 92 % (assistant)
Grille de tarifsmd:grid-cols-2 xl:grid-cols-4
Pied de pagemd:grid grid-cols-4 gap-8

Rayons

Cinq valeurs, du petit contrôle à la carte, et le rond pour les puces.

  • rounded

    4 px

    Code en ligne

  • rounded-lg

    8 px

    Petits contrôles, entrées de menu, bouton burger

  • rounded-xl

    12 px

    Boutons, champs, cartes de l’app, pastilles d’icône

  • rounded-2xl

    16 px

    Fenêtres, menus flottants, états vides

  • rounded-3xl

    24 px

    Cartes du site, composeur, panneaux

  • rounded-full

    plein

    Puces, boutons icône ronds, segmentés

Règle
Un bloc de 24 px bordé de 1 px qui en contient un autre : rounded-[calc(1.5rem-1px)]. Tout bouton rectangulaire est en rounded-xl ; rounded-full est réservé aux boutons icône ronds, aux puces et aux segmentés.

Ombres et élévations

Trois ombres pour les panneaux flottants, et rien ailleurs : ni sur les boutons, ni sur les cartes, ni sur les segmentés, ni sur les puces.

Les niveaux

  • 0

    À plat

    none

    Boutons, cartes, puces, segmentés, bandeau cookies

  • 1

    shadow-menu

    0 8px 24px rgba(0,0,0,0.06)

    Menus, popovers, toasts

  • 2

    shadow-modal

    0 18px 48px rgba(41,37,36,0.08)

    Fenêtres, feuilles mobiles, visionneuses

  • 3

    shadow-footer

    0 20px 60px rgba(88,48,20,0.12)

    Carte du pied de page du site

Jetons

Le curseur actif d’un segmenté est border border-neutral-200 bg-white, sans ombre. La dictée active porte ring-4 ring-danger-500/20.

Bordures

1 px partout. neutral-200 pour séparer, neutral-300 pour un contrôle, ember-500 pour la sélection ou le survol.

  • Carte

    border border-neutral-200

    1 px neutral-200 ; survol ember-500 (site) ou neutral-300 (app)

  • Champ

    border border-neutral-200

    1 px neutral-200 ; focus ember-700

  • Bouton secondaire

    border border-neutral-300

    1 px neutral-300

  • État vide

    border-dashed border-neutral-300

    Tirets de 1 px

  • Onglet souligné

    border-b-2 border-ember-500

    Actif : 2 px ember-500

  • Sélection

    border-2 border-ember-500

    Plan mis en avant : 2 px ember-500

Header du site : bordure basse transparente, puis neutral-200 après 24 px de défilement. Mode sombre : la bordure claire devient #3a3a3a. Aucune bordure orange pâle.

Icônes

Une seule bibliothèque : lucide-react, au trait de 2, avec la syntaxe h-* w-*. Les icônes de marque (LinkedIn, X, YouTube) sont des composants dédiés.

Les plus utilisées

  • Loader2
  • X
  • Check
  • Sparkles
  • FileText
  • Mail
  • ArrowRight
  • ChevronDown
  • Plus
  • Minus
  • ArrowUp
  • ArrowDown
  • Square
  • Search
  • Globe
  • Menu
  • Sun
  • Moon
  • CheckCircle2

Tailles

Aperçu vivant, tailles réelles

12 px
14 px
16 px
18 px
20 px
Tailles d’icône
TailleClassesEmploi
12 pxh-3 w-3Icônes de puce, spinner de pièce jointe
14 pxh-3.5 w-3.5Dans un texte de 12 px, chevron de langue
16 pxh-4 w-4Taille par défaut : boutons, menus, composeur
18 pxh-[18px] w-[18px]Rail de l’app, fonctionnalités des tarifs
20 pxh-5 w-5Boutons icône de 44 px, burger, fermeture, réseaux, icône de carte
Règle
16 px par défaut ; 20 px pour les boutons icône de 44 px.

Trait

Aperçu vivant, trait de 2

24 px
32 px
40 px

Le trait est celui de lucide par défaut : 2. Aucun strokeWidth explicite.

Pastille d’icône

Aperçu vivant

Site

h-11 w-11 rounded-xl bg-ember-50 text-ember-800 + icône 20 px

App

h-9 w-9 rounded-lg bg-neutral-50 text-ember-800 + icône 16 px

Règle
Pas d’icône ni de logo dans un bouton d’action, sauf le spinner de chargement et la flèche des deux boutons d’inscription.

Mouvement

Un ease-out doux, sans rebond, et deux durées : 150 ms pour le survol, 280 ms pour les apparitions. Les mêmes jetons servent l’application et le site.

Démos rejouables

Durées

Même distance, même courbe : seule la durée change.

fast
150 ms
base
280 ms

Cascade

Pas de 40 ms, plafond de 240 ms, montée de 6 px en 280 ms (motion-fade-up).

Survol et appui d’un bouton rempli

Au survol : montée de 2 px et agrandissement de 1,02 en 280 ms. À l’appui : 0,98 en 150 ms. Jamais d’ombre. Approchez le pointeur ou appuyez.

--motion-lift-y: -2px · --motion-lift-scale: 1.02 · --motion-press-scale: 0.98

Jetons

Variables CSS et classes Tailwind du préréglage commun. Cliquez pour copier.

Classes Tailwind

duration-fast  duration-base  ease-motion  motion-reduce:transition-none

Gabarits de mouvement

Gabarits de mouvement
GabaritEffet
.transition-interactiveCouleur, fond, bordure, transform, opacité, filtre en --motion-fast
.hover-liftBoutons remplis : au survol d’un pointeur réel, translateY(-2px) scale(1.02) en 280 ms ; à l’appui scale(0.98) en 150 ms ; jamais d’ombre ; exclu si désactivé
.motion-fade-upEntrée avec montée de 6 px
.motion-reveal-wordMot à mot : 8 px et flou de 6 px
.motion-dialog-inFenêtre : échelle 0,97
.motion-sheet-inFeuille mobile : 12 px
.motion-pop-inMenu : 150 ms
.motion-backdrop-inVoile
.motion-brand-inEntrée du logo : 360 ms
.motion-delayed-inFondu après 300 ms : chargement discret
.motion-curtainDépliage en hauteur, de 0fr à 1fr
Sitechevron qui pivote, soulignement glissant du menu, accordéons grid-rows, curseur du segmenté : tous en 280 ms ; méga-menu : ouverture après 120 ms, fermeture après 200 ms

Surbrillance des CTA

Décrite ici, non rejouée : la page du design system n’affiche aucun effet de surbrillance.
Surbrillance des CTA
ÉlémentValeur
Classeember-primary-cta-highlight
RefletBande de 42 %, dégradé blanc à 100° (pic 68 %), skewX(-18°). Traverse entre 4 % et 20 % d’une boucle de 4 s ease-in-out, opacité max 0,88
Haloinset 0 0 13px rgb(255 255 255 / 48 %), opacité de 0,18 à 0,52 en 2,5 s
DésactivéAnimation coupée
Mouvement réduitReflet figé (largeur 100 %, opacité 0,12), halo à 0,24
Boutons concernésTrois seulement : « Commencer gratuitement » du header, « Choisir Pro » et « Composer mon équipe »
Règle
Un seul bouton en surbrillance par écran. Tout autre bouton reste plein, sans reflet, sans halo et sans ombre.

Réduction du mouvement

  • Toutes les entrées sont coupées, les transitions passent à 0,01 ms, aucun déplacement au survol ni à l’appui. Le mode incognito garde un fondu de 200 ms, les confettis sont masqués, les diapositives passent en fondu de 120 ms.
  • motion-reduce:transition-none dans toutes les classes de transition ; reflet des CTA figé ; motion-safe:animate-hero-rise.
  • scroll-behavior: smooth sur html.
Règle
Les démos de cette page respectent la préférence système : essayez « Réduire les animations » dans votre système.