Fondations

Tokens et thème Tailwind

Chaque valeur de LSSD existe une seule fois, en variable CSS dans tokens.css, et en classe Tailwind dans theme.css. La palette par défaut de Tailwind est retirée : bg-emerald-500 ou text-slate-900 ne produisent rien.

Couleurs

Chaque couleur s’utilise en classe (bg-surface, text-muted, border-line…) ou en variable (var(--surface)). La valeur suit le thème posé sur <html>.

Token	Clair	Sombre	Usage
`bg` bg-bg, text-bg, border-bg	`#f8fafc`	`#0b1120`	Fond de page de chaque outil et du site. Sombre = le « night » historique de lssd.fr.
`surface` bg-surface, text-surface, border-surface	`#ffffff`	`#111827`	Cartes, barre du haut, panneaux, champs de formulaire.
`surface-2` bg-surface-2, text-surface-2, border-surface-2	`#f1f5f9`	`#1a2333`	Survol de bouton secondaire, lignes de tableau alternées, zones en retrait dans une carte.
`line` bg-line, text-line, border-line	`#e2e8f0`	`#243041`	Bordures décoratives : cartes, séparateurs, bas de la barre du haut. Ne porte pas de sens.
`line-strong` bg-line-strong, text-line-strong, border-line-strong	`#64748b`	`#6b7c93`	Bordure des champs, cases et boutons secondaires (≥ 3:1 sur bg, surface et surface-2 dans les deux thèmes).
`ink` bg-ink, text-ink, border-ink	`#0f172a`	`#f1f5f9`	Texte principal et titres, sur bg, surface, surface-2 et accent-soft.
`muted` bg-muted, text-muted, border-muted	`#475569`	`#8ca0b3`	Texte secondaire : aides de champ, métadonnées, légendes, sur bg, surface, surface-2 et accent-soft.
`accent` bg-accent, text-accent, border-accent	`#047857`	`#10b981`	Émeraude LSSD. Fond des boutons principaux, onglet actif, interrupteurs activés. Texte posé dessus : on-accent.
`accent-hover` bg-accent-hover, text-accent-hover, border-accent-hover	`#065f46`	`#34d399`	Fond des boutons principaux au survol. Texte posé dessus : on-accent.
`on-accent` bg-on-accent, text-on-accent, border-on-accent	`#ffffff`	`#0b1120`	Texte et icônes sur accent et accent-hover (5.5:1 clair, 7.4:1 sombre).
`accent-ink` bg-accent-ink, text-accent-ink, border-accent-ink	`#047857`	`#34d399`	Liens et texte accentué sur bg, surface, surface-2 et accent-soft.
`accent-soft` bg-accent-soft, text-accent-soft, border-accent-soft	`#ecfdf5`	`#0f2a24`	Fond de l'onglet actif, de la sélection et des badges « succès ». Texte dessus : accent-ink ou ink.
`info` bg-info, text-info, border-info	`#0369a1`	`#38bdf8`	Bleu ciel LSSD, couleur secondaire. Information, liens externes, état « en cours ». Jamais en fond de bouton.
`success` bg-success, text-success, border-success	`#047857 (accent-ink)`	`#34d399 (accent-ink)`	Texte d'état réussi ou acquis. Toujours accompagné d'un mot ou d'une icône.
`warn` bg-warn, text-warn, border-warn	`#8a5a00`	`#fbbf24`	Texte d'avertissement sur bg, surface et surface-2. Toujours accompagné d'un mot ou d'une icône.
`danger` bg-danger, text-danger, border-danger	`#b91c1c`	`#f87171`	Erreurs, suppression : texte sur bg, surface, surface-2, ou fond du bouton danger avec on-danger.
`on-danger` bg-on-danger, text-on-danger, border-on-danger	`#ffffff`	`#0b1120`	Texte sur danger (6.5:1 clair, 6.8:1 sombre).
`focus` bg-focus, text-focus, border-focus	`#047857`	`#34d399`	Anneau de focus clavier, 2px plein, décalé de 2px, ≥ 3:1 sur toutes les surfaces.

Typographie

Famille	Classe	Pile
Cabinet Grotesk	`font-display`	`"Cabinet Grotesk", "General Sans", ui-sans-serif, system-ui, sans-serif`
General Sans	`font-sans`	`"General Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif`
Monospace	`font-mono`	`ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`

Les styles de texte sont des utilitaires : ils prennent les variantes comme les autres (class="title-2 md:title-1"). Ils fixent famille, taille, interligne et graisse, pas la couleur.

display

48px / 52px, 800, -0.02em

Moins de friction.

Accroche de page d'accueil uniquement (lssd.fr, écrans de bienvenue).

title-1

28px / 34px, 700, -0.01em

Budget de novembre

Titre de page d'un outil, un seul par écran.

brand

18px / 24px, 700, 0.02em

LSSD Calendar

Nom de marque et nom d'outil dans AppHeader.

title-2

20px / 28px, 600

Dépenses récurrentes

Titre de section ou de carte.

title-3

16px / 24px, 600

Prochaines échéances

Sous-titre, en-tête de liste, titre de boîte de dialogue.

body

15px / 24px, 400

Ajoutez une dépense pour commencer votre suivi.

Texte courant de tous les outils.

label

14px / 20px, 500

Montant

Libellés de champs, texte des boutons, onglets.

small

13px / 20px, 400

Modifié il y a 2 minutes

Aides de champ, métadonnées, cellules de tableau denses. En couleur muted.

text-overline

12px / 16px, 600, 0.06em

SOLUTION RP

Catégorie au-dessus d'un titre de carte, texte des badges. En majuscules.

code

13px / 20px, 400

GET /api/v1/events

Code inline, identifiants, montants alignés en tableau.

Espacement

Grille de 4px : l’unité Tailwind vaut 4px, donc p-4 = 16px = var(--space-4). Préférez les pas listés ci-dessous.

Token	Tailwind	Valeur	Usage
`space-1`	`p-1`, `gap-1`	4px	Écart icône–texte, entre libellé et champ.
`space-2`	`p-2`, `gap-2`	8px	Écart entre boutons groupés, padding vertical des boutons.
`space-3`	`p-3`, `gap-3`	12px	Écart entre éléments d'une liste, padding des badges et onglets.
`space-4`	`p-4`, `gap-4`	16px	Écart entre champs d'un formulaire, marge latérale mobile.
`space-6`	`p-6`, `gap-6`	24px	Padding des cartes, écart entre cartes.
`space-8`	`p-8`, `gap-8`	32px	Écart entre sections d'une page.
`space-12`	`p-12`, `gap-12`	48px	Marges hautes de page, sections du site vitrine.

Largeur de contenu : max-w-content (1200px).

Rayons

rounded-sm · 6px

Cases à cocher, code inline, petites pastilles.

rounded-md · 10px

Champs de formulaire, menus déroulants, onglets.

rounded-lg · 16px

Cartes, boîtes de dialogue, panneaux.

rounded-pill · 999px

Tous les boutons et badges : la forme signature de LSSD.

Ombres

shadow-soft

Cartes mises en avant, menus et boîtes de dialogue. Les cartes ordinaires n'ont qu'une bordure line.

shadow-glow

Halo émeraude réservé à l'élément vedette d'une page d'accueil. Un seul par écran.

Thème sombre

La variante dark: suit l’attribut data-theme="dark", pas le réglage du système. Elle sert rarement : les couleurs changent déjà avec le thème. Réservez-la aux détails, comme l’icône du sélecteur de thème (dark:hidden, hidden dark:block).

Pour montrer un aperçu dans un thème précis quel que soit celui de la page, posez data-theme sur l’élément lui-même : c’est ainsi que les pastilles de cette page affichent les deux thèmes côte à côte.