Gardienne du Design System

Chiara

Senior Design Systems Lead. Pose les règles transverses (modales, drawers, formulaires, tokens, hiérarchies). CC la consulte avant chaque fix UI. Voix posée, exigeante, sobre. Vouvoiement Lorenzo strict — la distance est son outil.

Source de véritéTokens · Composants · Patterns · Règles modales

Design System

Tokens · Composants · Patterns — source de vérité du logiciel

Couleurs

Toujours via var(--…). Ratios WCAG calculés sur fond parchment light.

Fonds (parchemin)

Parchment

--parchment

#FAF7F2·#15101D

Fond global de la page.

Parchment elevated

--parchment-elevated

#FFFFFF·#1F1729

Cartes, modals, éléments en relief.

Parchment subtle

--parchment-subtle

#F5EFE5·#1A1325

Hover, inputs, surfaces secondaires.

Parchment deep

--parchment-deep

#EBE4D5·#2A1F38

Surfaces profondes, états actifs.

Textes (encres)

Ink 1

--ink-1

#1F1029·#F0E8D8

Texte primaire, titres, contenu.

L · 16.88 · AAAD · 15.34 · AAA

Ink 2

--ink-2

#5A4A36·#C8B89C

Texte secondaire, body explicatif.

L · 7.96 · AAAD · 9.60 · AAA

Ink 3

--ink-3

#8A7A5E·#9B8B70

Métadonnées, eyebrows, captions.

L · 3.91 · AA LargeD · 5.62 · AA

Ink muted

--ink-muted

#B8AC92·#6E5F4A

Placeholder, ligne tertiaire désactivée.

L · 2.10 · FailD · 3.02 · AA Large

Accents

Gold

--gold

#B8902F·#D4B66A

Couleur primaire Eleonora — CTAs, accents.

Gold soft

--gold-soft

#D4B66A·#E8CC85

Hover, dégradés vers la lumière.

Gold deep

--gold-deep

#8A6F2A·#B8902F

Texte sur fond pâle, hover du Gold.

Violet

--violet

#4A2A5E·#9670AC

Accent secondaire, soir/nuit.

Violet soft

--violet-soft

#7C5A92·#B294C2

Variation claire de l'aubergine.

Sémantique

Success

--success

#6B8E5A·#8FA572

Validation, accomplis.

Warning

--warning

#C9A961·#D4B66A

Attention douce.

Danger

--danger

#B8553F·#D6664E

Erreur, destructive.

Danger deep

--danger-deep

#8B3A28·#A14633

Hover du Danger.

Danger soft

--danger-soft

#C73E32·#E07556

Top accent gradient destructive.

Typographie

Classes utilitaires définies dans globals.css. À privilégier vs styles inline.

Eleonora

Hero / display — pages d'accueil, splash.

Réglages

Titre de page italique.

Top 3 du jour

Titre de widget (14px medium).

Compteurs / statistiques (32px or).

Aujourd'hui, prends 10 minutes.

Phrase d'Eleonora — voix incarnée.

Salut Lorenzo, comment tu te sens ce matin ?

Corps de message dans le chat (Apple system stack 14.5px).

Texte courant. Lisible et confortable.

Corps standard 14px.

Métadonnée discrète.

Texte secondaire 12px (couleur héritée).

Section

Eyebrow 10.5px uppercase tracking-wide.

Eleonora

Eyebrow doré (rituels, vision).

Numéraux romains widgets (I. II. III.).

Spacing

Échelle 4px / 8pt grid. Tailwind p-N (1 unit = 4px).

--space-1p-1

4px

Gap minimal entre icônes serrées.

--space-2p-2

8px

Padding compact, gap formulaire.

--space-3p-3

12px

Padding bouton, item liste.

--space-4p-4

16px

Padding card standard.

--space-5p-5

20px

Padding section confort.

--space-6p-6

24px

Padding bulle hero, dialog.

--space-7p-7

28px

Padding wide modal.

--space-8p-8

32px

Section large.

--space-10p-10

40px

Hero section.

--space-12p-12

48px

Aération maximale.

Radius

5 niveaux. Le squircle (22%) est exception pour les avatars.

--radius-sm0.5rem · 8px

Boutons compacts, badges, chips.

--radius-md0.75rem · 12px

Boutons CTA, dropdowns, inputs.

--radius-lg1.125rem · 18px

Cards, dialogs.

--radius-xl1.5rem · 24px

Bulles signatures, hero modal.

--radius-2xl1.75rem · 28px

Photo hero exception.

Shadows

3 niveaux d'élévation. Toujours via var(--shadow-…).

--shadow-sm

Subtil — inputs, items list, hover discret.

--shadow-md

Standard — cards, dropdowns, popovers.

--shadow-lg

Élévation forte — modals, menus contextuels, dialogs.

Z-index

Hiérarchie systématisée. N'introduis JAMAIS un nombre nu (ex: z-[120]).

--z-base0Contenu standard.

--z-grid-overlay10Overlay du grid (resize handles, drag preview).

--z-dropdown20Menus déroulants inline.

--z-popover30Popovers, tooltips persistants.

--z-sticky40Header sticky, navigation flottante.

--z-modal50Dialogs, modals standard.

--z-toast60Notifications Sonner, toasts.

--z-critical100Deep focus mode plein écran, menu contextuel feedback.