Kantin-Petit
9de0132676
Package web/ : React 19 + Vite 8 + Tailwind 4 + react-router 7 + PWA. Tokens dark HUD Jarvis-red, client API, contexte auth JWT, shell + garde de route, écran Login (mot de passe + TOTP). Chat/Review en stubs. Build OK, 0 vuln. docs/ui-design.md. Palier de risque : reversible (front statique, aucun accès infra direct). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1.2 KiB
1.2 KiB
Design UI CHLOVA
Style Dark Mode (OLED) — HUD "Jarvis-red". Sombre, contraste élevé, glow minimal sur l'accent. Grounded via le skill UI/UX (dark ops dashboard).
Tokens (web/src/index.css, @theme)
| Rôle | Hex | Usage |
|---|---|---|
| bg | #020617 |
fond |
| surface / surface-2 | #0F172A / #1E293B |
cartes, barres |
| border | #334155 |
séparateurs |
| fg / muted | #F8FAFC / #94A3B8 |
texte / secondaire |
| accent | #FF3B3B |
identité, action primaire (glow HUD) |
| accent-dim / danger | #B91C1C |
destructif (toujours + icône + confirm) |
| success / warning | #22C55E / #F59E0B |
statuts |
Polices : Fira Sans (corps) + Fira Code (data/mono).
Règles
- Accent rouge = identité ET action primaire ; le destructif (
#B91C1C) est plus sombre et accompagné d'icône + confirmation (la couleur n'est pas le seul indicateur — a11y). - Contraste AA min 4.5:1 ; focus visible (
.ring-accent) ;prefers-reduced-motionrespecté ; cibles tactiles ≥ 44px. - Pas d'emoji comme icône (SVG/Lucide à venir). Transitions 150–300ms.
Stack
React 19 + Vite 8 + Tailwind 4 (@theme) + react-router 7, PWA (installable).
SPA servi same-origin par le backend en prod ; proxy /api en dev.