VFG HERO - Dashboard Showcase

Catalogue descriptif des styles reutilisables pour les pages de production.

01 - Design Tokens

Noms exacts des variables couleur/typo/fond pour reutilisation CSS.

--green
--blue
--rose
--amber
--red
--panel-bg
Press Start 2P / --font-pixel
VT323 / IBM Plex Mono / --font-mono

01b - Typographie (--type-h1 … h4)

Échelle définie dans base.css : hiérarchie resserrée (environ +10 % par niveau), corps et petits textes au même ordre de grandeur pour éviter le zoom « tout ou rien ». Les titres pixel (Press Start) utilisent --type-pixel-sm / --type-pixel-md.

Heading 1 — titre de page (mono)

Heading 2 — section principale

Heading 3 — sous-section

Heading 4 — libellé dense / cartes

Paragraphe corps (--type-body) : lisible à 100 % sans agrandir la fenêtre. Les liens inline héritent de la taille du bloc parent.

Légende / méta (--type-caption) — texte secondaire toujours au-dessus du plancher illisible.

Pixel HUD (--type-pixel-md)

02 - Primitives UI

.ui-card / .ui-card__head / .ui-card__body

Structure de base pour pages docs, admin, settings et nouvelles vues.

03 - Composants Dashboard

■ PANEL / STAT BAR / ACTIONS ■

Stat bars variants ok / low / critical / inverse

Status Effects Strip

+ Focus Boost 2:30
- Fatigue 0:55

Clock + Connection

OFFLINE

Quest Journal Chips

A faire
Lecture docs API +30 XP
En cours
Template dashboard +50 XP
Terminees
Validation responsive +20 XP

04 - Etats Visuels Globaux

RULE TRIGGERED
Hunger Critical
personal.hunger < 25 (val: 18)
-> OSC /alerts/hunger val: 1
.loading-placeholder .loading-placeholder--error

05 - Responsive Rules

Desktop > 960

Grille dashboard multi-colonnes, header complet, panneaux en workstation layout. Pages UI : pleine largeur utile, typo pilotée par --type-* (base.css).

Tablet <= 960

Stack vertical des panels, scroll sur document (règles html/body), sections simplifiees.

Mobile <= 640

Header empile, quetes en 1 colonne. font-scale.js est neutre (facteur 1) : plus de micro-texte imposé par JS.

06 - Nomenclature et Reuse

  • .ui-* : primitives de page/composants transverses.
  • .panel*, .stat-*, .action-btn* : composants metier dashboard.
  • --variant : variantes visuelles (ex: .ui-btn--primary).
  • --state : etats dynamiques (ex: .stat-bar--critical, .panel--collapsed).
  • Favoriser la composition de classes existantes avant de creer de nouveaux styles.