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>
30 lines
1.2 KiB
Markdown
30 lines
1.2 KiB
Markdown
# 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-motion`
|
||
respecté ; 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.
|