// design system

elisa_
design

Référence visuelle et composants partagés — home, budget & recettes

v2.0Unified Design System
1 paletteBeige · Navy · Orange · Lime
3 policesSyne · DM Sans · Space Mono
3 appsHome · Budget · Recettes

01 — Fondations

Couleurs

Scales complètes — chaque couleur déclinée de 50 (le plus clair) à 900 (le plus foncé).

Orange — accent primaire
50#FFF7F2
100#FFEEE5
200#FFD4B8
300#FFAA7A
400#FF7A42
500 ★#FF5500
600#D94800
700#B33C00
800#8C2F00
900#4D1A00
Navy — couleur principale
50#EEEEF6
100#D4D5EA
200#A9ABD5
300#7E81C0
400#5357AB
500#282D96
600#1C2070
700#111450
800 ★#0D1030
900#060818
Lime — accent secondaire
50#F8FFD6
100#EFFFAA
200#DFFF66
300#D2FF33
400 ★#C9FF00
500#A8D600
600#88AD00
700#668400
800#455A00
900#243000
Neutral — gris warm
50#FAF8F3
100#F0EDE4
200#E8E6DF
300#D4D1C8
400#BEBBB0
500 ★#9999AA
600#787788
700#585666
800#383744
900#181822
Sémantique — success · error
success-lt#E8FFCC
success#7DC500
success-dk#527F00
error-lt#FFE5E5
error#FF3B3B
error-dk#CC0000

01b — Fondations

Accessibilité des couleurs

Ratios de contraste WCAG 2.1 calculés pour chaque combinaison. AA = 4.5:1 (texte normal) · AA Large = 3:1 (texte ≥18px ou gras ≥14px, composants UI) · AAA = 7:1.

Texte → Fond
Background
#FAF8F3
Surface
#FFFFFF
Navy
#0D1030
Orange Lt
#FFEEE5
Navy #0D1030
17.45AAA
Aa
18.52AAA
Aa
1.00FAIL
16.42AAA
Aa
Orange #FF5500
3.02AA Large
Aa
3.21AA Large
Aa
5.78AA
Aa
2.84FAIL
Orange 600 #D94800
4.06AA Large
Aa
4.31AA Large
Aa
4.30AA Large
Aa
3.82AA Large
Orange 700 #B33C00
5.55AA
Aa
5.89AA
Aa
3.14AA Large
5.22AA
Aa
Lime #C9FF00
1.11FAIL
1.18FAIL
15.69AAA
Aa
1.05FAIL
Muted #9999AA
2.64FAIL
2.80FAIL
6.61AA
Aa
2.48FAIL
Success #7DC500
2.01FAIL
2.13FAIL
8.69AAA
Aa
1.89FAIL
Error #FF3B3B
3.33AA Large
Aa
3.53AA Large
Aa
5.24AA
Aa
3.13AA Large
Navy 500 #282D96
10.38AAA
Aa
11.02AAA
Aa
1.68FAIL
9.77AAA
Aa
Blanc #FFFFFF
1.06FAIL
1.00FAIL
18.52AAA
Aa
1.13FAIL
AAA≥ 7:1 — texte normal, tout usage
AA≥ 4.5:1 — texte normal minimum
AA Large≥ 3:1 — texte ≥18px, icônes, bordures actives
FAIL< 3:1 — ne pas utiliser

✓ Combinaisons validées

Texte principal Note: muted ≥18px seulement
Navy sur Background — 17.5:1 AAA
Usage : tout le texte principal
Texte sur carte Hint, date, métadonnées
Navy sur Surface — 18.5:1 AAA
Usage : texte dans les cartes blanches
Texte blanc 12 450,00 € // patrimoine
Blanc/Orange/Lime sur Navy
18.5 · 5.78 · 15.7 — AA à AAA
Lien important Texte d'erreur ou lien
Orange 700 sur Background — 5.55:1 AA
Utiliser #B33C00 pour du texte orange lisible

✕ Erreurs fréquentes à éviter

Texte corps orange 500 Description en orange sur fond clair
3.02:1 FAIL pour texte normal
Orange #FF5500 ne passe qu'en ≥18px ou gras ≥14px
Titre en lime Texte lime sur fond clair
1.11:1 FAIL — invisible
Lime ne fonctionne QUE sur fond navy
Texte muted pour info Placeholder ou texte secondaire
2.64:1 FAIL — texte normal
Muted uniquement pour texte ≥18px décoratif
✓ Paiement validé Confirmation en vert success
2.01:1 FAIL
Success #7DC500 = fond coloré + texte navy, pas l'inverse

Guide rapide — quand utiliser chaque couleur

Orange #FF5500
✓ Fond de bouton, icône active, bordure active, texte ≥18px ✗ Texte corps normal sur fond clair — utiliser #B33C00 à la place
Lime #C9FF00
✓ Texte/icône sur fond navy uniquement (15.7:1) ✗ Jamais sur fond clair (1.1:1) — invisible
Muted #9999AA
✓ Métadonnées ≥18px, dates, placeholders visuels, labels décoratifs ✗ Texte informatif — 2.64:1, échoue WCAG AA
Success #7DC500
✓ Fond de tag/badge (texte navy dessus), icône sur fond navy, barre de progression ✗ Texte coloré sur fond clair — 2.01:1 FAIL
Error #FF3B3B
✓ Icône d'erreur, bordure de champ invalide, texte ≥18px ou gras (3.33 AA Large) ✗ Texte d'erreur corps 14px sur fond clair — utiliser un fond coloré clair + texte navy
Orange 700 #B33C00
✓ Texte orange lisible sur fond clair — 5.55:1 AA ✓ — utiliser pour les liens ou labels orange

Patterns accessibles pour les états colorés

✓ Budget OK
Fond success-lt + texte navy
AA ✓ lisible
✕ Erreur
Fond error-lt + texte navy
AA ✓ lisible
⚠ Attention
Fond orange-lt + texte orange-700
5.22:1 AA ✓
✓ Actif
Fond navy + texte lime
15.7:1 AAA ✓
− 42,00 €
Fond navy + texte orange
5.78:1 AA ✓

02 — Fondations

Typographie

Syne pour les titres et l'affichage. DM Sans pour le corps et les labels UI. Space Mono pour les valeurs numériques et le code.

Display
Syne 800 / 48px
Titre H1
Syne 700 / 32px
Titre H2
Syne 700 / 22px
Titre H3
Syne 600 / 16px
Corps de texte — lecture normale, descriptions, instructions de recettes.
DM Sans 400 / 16px
Label medium, boutons, éléments interactifs
DM Sans 500 / 14px
12 450,00 €
Space Mono 700 / tabular-nums
// section label
DM Sans 400 / 11px / ls 0.15em

03 — Fondations

Espacement

Échelle de 7 niveaux.

xs — 4px
sm — 8px
md — 16px
lg — 24px
xl — 32px
2xl — 48px
3xl — 64px

04 — Fondations

Radius & Ombres

Radius

0px
sm8px
md12px
lg16px
xl20px
2xl24px
fullpill

Ombres

soft6%
card10%
float16%

05b — Composants

Icônes

Bibliothèque Lucide — icônes utilisées dans les apps. Stroke-width 1.5 (repos) / 2.5 (actif). Hover sur une icône pour voir la couleur d'accentuation.

Navigation & structure
Receipt
Target
Wallet
Tag
Home
Dashboard
Sidebar
Menu
Actions
Plus
Pencil
Trash2
Search
Filter
ArrowUpDown
Download
ExternalLink
Copy
Share2
LogOut
Settings
Feedback & états
CircleCheck
Info
TriangleAlert
OctagonX
Loader2
X
XCircle
Check
Bell
BellOff
Navigation directionnelle
ChevronLeft
ChevronRight
ChevronUp
ChevronDown
ArrowLeft
ArrowRight
MoveUpRight
MoveDownLeft
Finance (recettes & budget)
TrendingUp
TrendingDown
Banknote
PiggyBank
BarChart3
CircleDollar
Utensils
ShoppingCart
BookOpen
Clock
Calendar
Star

Tailles

14px
16px
18px
★ défaut
22px
tab bar
28px
36px
48px
empty state

Stroke width — repos vs actif

stroke 1.5
repos / inactif
stroke 2.5
actif / sélectionné
stroke 1.5
stroke 2.5
stroke 1.5
stroke 2.5

Couleurs

Navy
défaut
Orange
actif / CTA
Lime
accent
Muted
inactif
Success
Error
Warning
orange-600

Sur fond sombre

blanc · blanc/30% · orange · lime

Icônes dans les boutons

Icône avec badge

05 — Composants

Boutons

Matrice complète : type × couleur × état × taille × icône.

Couleur Filled Outlined Ghost
Orange
Navy
Lime
—
Error
Success
—
Muted

États — Orange filled comme référence

Default bg #FF5500 · text #fff
Hover bg #D94800 · translateY(-2px) · shadow
Active bg #B33C00 · scale(0.97)
Focus outline 3px var(--orange) · offset 2px · blanc sur fonds colorés
Disabled bg border · color muted · opacity 0.7 · cursor not-allowed
Loading spinner centré · text transparent · pointer-events none

Tailles

XS 4px 10px · r-6px · 11px
SM 6px 12px · r-sm · 12px
MD ★ 9px 18px · r-md · 14px — défaut
LG 12px 24px · r-lg · 15px
XL 14px 32px · r-xl · 17px

Boutons avec icônes

Icône gauche
Icône droite
Icon-only SM
Icon-only MD
Icon-only LG (FAB)

06 — Composants

Champs de saisie

Focus → bordure orange
Format invalide
État succès
Toggle
Checkbox

07 — Composants

Cartes

4 patterns communs aux 3 apps.

Stat card — home

// mémoire
67%

Hero dark — budget

// patrimoine total
12 450,00 €

Recipe card — recettes

Poulet rôti au citron
⏱ 45 min
Volaille Four +2

Budget progress card

🛒 Courses58%
il reste 42,00 €
⚠ 🍔 Restau88%
il reste 6,00 €
⚠ 🎮 Loisirs102%
−2,00 € au-dessus du plafond

08 — Composants

Tags & Badges

Tags Orange Navy Lime Muted Succès Erreur
Badges 3 7 !

10 — Composants

Feedback & États

Alertes

ℹ
InformationMise à jour disponible.
✓
SuccèsTransaction enregistrée.
⚠
AttentionBudget à 88%.
✕
ErreurMot de passe incorrect.

Progress bars

CPU42%
Mémoire67%
Disque23%

État vide

🧾
Aucune transaction

Commence par ajouter ta première dépense.

FAB + Bottom sheet

zone de contenu

// ajouter une transaction

11 — Principes

Motion

Hover sur les cartes pour voir l'effet ease-out-expo.

Ease-out expocubic-bezier(0.16,1,0.3,1) 0.4s
LifttranslateY(-4px) scale(1.04) 0.18s
Colorbackground, color 0.15s ease
Progresswidth 0.6s ease

✓ À faire

  • Animer uniquement les changements d'état
  • Utiliser ease-out-expo cubic-bezier(0.16,1,0.3,1)
  • Animer transform et opacity
  • Respecter prefers-reduced-motion

✗ À éviter

  • Animer width, height, top, left
  • Animations en boucle décorative
  • Durées > 500ms sur les micro-interactions
  • Effets sans sens fonctionnel

12 — Composants

Tableau de données

Pour les listes de transactions. Survol sur les lignes, montants en monospace, tags inline.

Date Description Catégorie Montant Statut
31 mar. Courses Monoprix Courses −48,30 € Validé
30 mar. Salaire mars Revenu +2 400,00 € Validé
28 mar. Netflix Abonnements −17,99 € Validé
27 mar. Remboursement Sarah Divers +25,00 € En attente
25 mar. Loyer avril Logement −850,00 € Prévu

13 — Composants

Toast & Snackbar

Notifications flottantes — feedback après action. Apparaissent en bas de l'écran ou en haut à droite. Durée : 3–5 s.

✓
Transaction enregistrée
−48,30 € · Courses
⚠
Budget courses à 88 %
Il reste 36,00 € ce mois-ci.
ℹ
Mise à jour disponible
Recharge la page pour l'appliquer.

Règles d'usage

  • Succès — confirmer une action (3 s)
  • Erreur — bloquer, ne pas auto-fermer
  • Avertissement — info à ne pas manquer (5 s)
  • Info — neutre, facultatif (4 s)

ARIA live regions

role="alert" pour erreurs · role="status" pour le reste

14 — Composants

Toggle & Radio

Contrôles de formulaire avancés — extension des inputs de base.

Toggle Switch

Notifications push
Activées
Mode sombre
Désactivé
Synchronisation
Active
Option désactivée
Non disponible

Boutons radio

Type de compte

En ligne (toggle group)

15 — Composants

Graphiques

Palette de 5 couleurs chart-1→5 pour les visualisations. Hover sur les barres.

Dépenses mensuelles (barres)

Jan Fév Mar Avr Mai ★ Jun
Mois actuel
Mois précédents
Prévisionnel

Répartition par catégorie (anneau)

Courses
35 %
Logement
25 %
Transport
20 %
Loisirs
12 %
Autres
8 %

Tokens chart

chart-1
chart-2
chart-3
chart-4
chart-5

16 — Composants

Squelettes & Chargement

États de chargement cohérents — skeleton shimmer + spinners pour actions async.

Squelette — carte stat

Squelette — ligne transaction

Spinners — actions asynchrones

sm · 16px
md · 28px
lg · 44px

Bouton en chargement

Règles

  • Skeleton pour chargements initiaux (> 300 ms)
  • Spinner pour actions ponctuelles
  • Toujours ajouter aria-busy="true"

17 — Composants

Tooltip

Infobulles contextuelles — survol ou focus. CSS pur, pas de JS requis.

Survole les éléments ↓

Courses

Accessibilité

Ajouter role="tooltip" + aria-describedby sur l'élément déclencheur. Visible au focus clavier.

18 — Référence

Tokens CSS

Variables à copier dans vos fichiers CSS ou tokens.js.

/* Couleurs */
--bg:       #FAF8F3;
--surface:  #FFFFFF;
--navy:     #0D1030;
--orange:   #FF5500;
--lime:     #C9FF00;
--orange-lt:#FFEEE5;
--muted:    #6B6880;
--border:   #E8E6DF;
--success:  #7DC500;
--error:    #FF3B3B;

/* Typographie */
--display: 'Syne', sans-serif;
--sans:    'DM Sans', sans-serif;
--mono:    'Space Mono', monospace;
/* Spacing */
--sp-xs:  4px;
--sp-sm:  8px;
--sp-md:  16px;
--sp-lg:  24px;
--sp-xl:  32px;
--sp-2xl: 48px;
--sp-3xl: 64px;

/* Radius */
--r-sm:   8px;
--r-md:   12px;
--r-lg:   16px;
--r-xl:   20px;
--r-2xl:  24px;
--r-full: 9999px;

/* Shadows */
--sh-soft:
  0 2px 8px rgba(13,16,48,.06);
--sh-card:
  0 4px 20px rgba(13,16,48,.10);
--sh-float:
  0 8px 32px rgba(13,16,48,.16);

/* Easing */
/* Expo:   cubic-bezier(0.16, 1, 0.3, 1)  */
/* Smooth: cubic-bezier(.4, 0, .2, 1)     */