Guide de style

Documentation technique et interactive des composants

BRAND
Logo & assets
Fichiers SVG — à placer à la racine du projet
Wordmark light
le-dashboard-bleu-light.svg
Wordmark dark
le-dashboard-bleu-dark.svg
le-dashboard-mark-bleu-light.svg
(favicon)
Règles d'usage
ContexteAssetTaille
Header pages internesbleu-light / dark (switch auto)160px large
Page d'accueil (nav)bleu-light / dark (switch auto)140px large
Pages auth (centré)bleu-light / dark (switch auto)180px large
Mock dashboardmark inline SVG22px carré
Favicon (toutes pages)mark-bleu-light.svgSVG natif
Couleurs brand
Alignées sur les tokens UI
Bleu (référence)
light #2563eb · var(--blue)
dark  #3b82f6 · var(--blue)
Vert
light #1a9e6e · var(--green)
dark  #22c47f · var(--green)
Ambre
light #b87318 · var(--amber)
dark  #e8a030 · var(--amber)
Rouge
light #d04a39 · var(--red)
dark  #f06b5a · var(--red)
Encre
light #181714 · var(--text)
dark  #f0ede8 · var(--text)
Typographie brand
Polices du logo — non chargées dans l'interface
LOGOTYPE
Le Dashboard
Wordmark complet
Google Fonts · Archivo
Interface UI
L'interface utilise DM Sans (corps, boutons, labels) et DM Mono (valeurs numériques, codes). Les polices brand ne sont pas chargées dans les pages HTML pour éviter toute régression.
TOKENS
Couleurs UI — Surfaces & textes
Automatiquement adaptées light/dark
--bg
light #f4f2ee · dark #111110
--surface
light #ffffff · dark #1c1c1a
--surface2
light #ede9e3 · dark #242422
--surface3
light #e6e1da · dark #2e2e2b
--text
light #181714 · dark #f0ede8
--text2
light #6a6760 · dark #9a9790
--text3
light #7a7874 · dark #8a8780
--ring
light transparent · dark rgba fff 5%
Couleurs sémantiques
Chaque couleur en 3 variantes : fond · texte · couleur principale
--green
--green-bg · --green-text
light #1a9e6e · dark #22c47f
--red
--red-bg · --red-text
light #d04a39 · dark #f06b5a
--blue
--blue-bg · --blue-text
light #2563eb · dark #3b82f6
--amber
--amber-bg · --amber-text
light #b87318 · dark #e8a030
--neutral / --purple
--neutral-bg · --neutral-text
--purple-bg · --purple-text
Espacements, rayons, ombres & layout
--sp-* · --r-* · --shadow-* · --header-h · --logo-sz
Espacements (base 4px)
--sp-1
4px
--sp-2
8px
--sp-3
12px
--sp-4
16px
--sp-5
20px
--sp-6
24px
--sp-8
32px
Ombres
--shadow-sm
0 1px 3px / 0 1px 2px
--shadow
0 2px 8px / 0 1px 3px
Rayons
--r-xs
4px
--r-sm
8px
--r
12px
Layout
--header-h
56px
--logo-sz
30px
TYPOGRAPHIE
Échelle typographique
DM Sans — corps, titres, labels, boutons
22px / 600 — page-title
Titre de page
18px / 600 — section h2
Titre de section
16px / 600 — h3, header
Sous-titre
15px / 600 — confirm-title
Titre modal
14px / 400 — corps principal
Corps de texte principal
13px / 400 — corps secondaire
Corps secondaire, descriptions
12.5px / 500 — labels
Label de champ
11px / 400 — text3, sous-titres
Métadonnée, aide contextuelle
10px / 600 — nav group labels
Groupe de navigation
Monospace
DM Mono — valeurs numériques, dates, codes, tickers
20px / 600 — kpi-value
14 042,30 €
14px / 400 — cours, PRU
+2,34 % · 187,50 €
12px / 400 — info-row-val
vous@exemple.com
11px / 400 — badges, labels
Portefeuille boursier personnel
COMPOSANTS
Boutons
.btn · .btn-save · .btn-danger · .btn-today
États normaux
États désactivés
Badges
.bp (PEA) · .bc (CTO std) · .bn (CTO étranger) · .bs (crypto)
PEA CTO Standard CTO Étranger Crypto
+12,4 % −3,1 % Bientôt Beta
Inputs
États : normal · focus · error · disabled
Le mot de passe est trop court
Cards & sections
.sg-card — structure header / body · .danger-section
Titre de section
Fond var(--surface), bordure var(--border), rayon var(--r), ombre var(--shadow-sm).
Zone dangereuse
Bordure var(--red). Opacité .85 au repos → 1 au survol. Réservé aux actions destructives.
KPIs
Grille auto-fit — min 130px · .kpi-card · .kpi-value · .kpi-sub
Portefeuille total
14 042 €
+82 € aujourd'hui
Performance
+12,4 %
depuis le début
+/- Valeur
+1 546 €
latent
Capital investi
12 496 €
dont frais inclus
Toasts
.toast-success · .toast-error · .toast-info · .toast-warning
Modifications enregistrées
Erreur lors de la sauvegarde
Cours mis à jour — 14h32
ASML dépasse le seuil de 25 %
Confirm
.confirm-box — affiché dans un overlay fixed en production
Supprimer la position
Cette action est irréversible. Toutes les transactions associées à LVMH.PA seront perdues.
Toggles
.sg-toggle · .sg-toggle.on — paramètres et indices
Actif (cliquer pour basculer)
Inactif
Désactivé
Info rows
.info-row · .info-row-label · .info-row-val · .info-badge
Compte membre depuis27 mai 2026
Type de comptePEA
Versionv1.50
StatutActif
Marché
.market-open · .market-closed — panneau info · .info-market-badge
Marché ouvert Marché fermé
Skeleton loading
.skel · .skel-title · .skel-line · .skel-block — shimmer pendant chargement des prix
Icônes
Lucide Icons v0.383.0 — CDN unpkg.com — aucun emoji · .ic12 .ic13 .ic13m .ic14m
Classes de taille
.ic12 — 12px
.ic13 / .ic13m — 13px
.ic14m — 14px
Icônes utilisées dans le projet
trending-up
trending-down
plus
trash-2
settings-2
refresh-cw
user
mail
lock
eye
eye-off
camera
save
download
upload
bar-chart-2
pie-chart
info
alert-triangle
check-circle
x-circle
clock
circle
arrow-left
arrow-right
chevron-down
sun
moon
log-in
log-out
user-plus
user-x
search
x
check
archive
image
key
bell
external-link
Patterns
Conventions d'affichage récurrentes dans le projet
Nombres & couleurs — .pos · .neg · .neu · DM Mono obligatoire
+1 546,30 € −342,00 € 0,00 €
+12,4 % −3,1 % 0,00 %
Mode présentation — .pres-blur · filter:blur(7px) · survol pour révéler
+1 546,30 € ← survoler pour révéler
Danger zone — bouton danger + confirm-box
→ ouvre une modale .confirm-box