BRAND
Logo & assets
Fichiers SVG — à placer à la racine du projet
le-dashboard-bleu-light.svg
le-dashboard-bleu-dark.svg
le-dashboard-mark-bleu-light.svg
(favicon)
(favicon)
Règles d'usage
| Contexte | Asset | Taille |
|---|---|---|
| Header pages internes | bleu-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 dashboard | mark inline SVG | 22px carré |
| Favicon (toutes pages) | mark-bleu-light.svg | SVG 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
--shadow-md
0 4px 16px / 0 1px 4px
--shadow-lg
0 4px 20px / 0 1px 4px
--shadow-xl
0 8px 40px / 0 2px 8px
--shadow-side
4px 0 20px (directionnelle)
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
Titre de page
Titre de section
Sous-titre
Titre modal
Corps de texte principal
Corps secondaire, descriptions
Label de champ
Métadonnée, aide contextuelle
Groupe de navigation
Monospace
DM Mono — valeurs numériques, dates, codes, tickers
14 042,30 €
+2,34 % · 187,50 €
vous@exemple.com
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é
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