Design System — « Trading Terminal »

Le design system de Patrimo porte le nom de code Trading Terminal. Conçu pour une application financière personnelle à usage intensif, il répond à trois contraintes :

1. Longues sessions → réduire la fatigue oculaire
2. Denses en données → favoriser la lisibilité des chiffres et leur alignement
3. Écrans OLED modernes → exploiter les noirs véritables et réduire la consommation

Principes fondateurs

1. Dark OLED par défaut

Le fond global est quasi-noir (#050506, token --color-bg). Ce n'est ni un thème optionnel ni un « dark mode » rajouté après coup : c'est la surface canonique. Le mode clair n'existe pas à ce jour (voir Mode sombre).

2. Glassmorphism ciblé

Les surfaces flottantes (cartes KPI, modales, card de login) utilisent :

• backdrop-filter: blur(16px)
• background: rgba(255,255,255, 0.05)
• border: 1px solid rgba(255,255,255, 0.08)

La classe utilitaire .glass-card encapsule ce pattern. L'effet crée de la profondeur sans surcharger visuellement.

3. Données en premier

Tout montant financier est affiché en IBM Plex Mono via la classe .tabular-nums (qui active font-variant-numeric: tabular-nums). Cela garantit l'alignement vertical des chiffres dans les tableaux, KPI et cartes.

Sources de vérité

Élément	Fichier	Documentation
Tokens CSS	src/app/globals.css	Tokens (généré)
Polices	src/app/layout.tsx	Typographie
Composants	src/components/**	Composants (props auto-générées)
Tailwind	tailwind.config.ts	—

Règle stricte (voir ADR-005) : ne jamais documenter à la main ce qui est dérivable du code. Les pages tokens, les tableaux de props et les signatures d'API sont produits par scripts :

npm run docs:generate-tokens
npm run docs:generate-component-props
npm run docs:generate-api

Palette en un coup d'œil

• Fond : noir OLED --color-bg
• Accent : ambre #F59E0B (CTA, nav active, highlights)
• Positif : vert #10B981 (variations positives uniquement)
• Négatif : rouge #EF4444 (variations négatives uniquement)
• Texte : #EDEDEF (principal), #8A8F98 (muted), #5A5F6A (subtle)

Palette complète : Couleurs.

Règles d'usage

À faire

• Utiliser .tabular-nums sur tout montant financier, sans exception
• Utiliser --color-positive / --color-negative uniquement pour des variations de valeur, jamais pour des états UI génériques
• Appliquer .glass-card sur les cartes de données flottantes ; réserver .card aux surfaces sans besoin de profondeur
• Préfixer les labels de section avec text-xs font-medium uppercase tracking-widest + --color-text-subtle

À ne pas faire

• Float pour les montants (toujours Decimal — voir CLAUDE.md)
• Créer un nouveau token de couleur sans l'ajouter dans :root de globals.css
• Utiliser text-white ou des couleurs Tailwind brutes (passer par --color-text*)
• Ajouter backdrop-filter sans préfixe -webkit-backdrop-filter (compat Safari)
• 'use client' par défaut (Server Component sauf état interactif)

Aller plus loin

• Couleurs · Typographie · Espacement
• Accessibilité · Responsive
• Contribuer — ajouter un composant ou un token