system_update/consigne_icon.md

Consigne icônes — system_update

Type : brief de création d'icônes SVG et assets applicatifs. Langue : français. But : transmettre à un agent spécialisé les contraintes de création d'icônes pour la webapp system_update.

---

1. Contexte

system_update est une application d'administration système agentless SSH :

• suivi de machines Debian, Ubuntu, Proxmox, Raspberry Pi OS ;
• update/analyse APT ;
• Docker Compose ;
• scripts post-install ;
• métriques simples ;
• logs/rapports ;
• discussion Hermes ;
• terminal SSH.

Le design system est Gruvbox seventies :

• rétro-industriel ;
• console de monitoring ;
• SCADA / terminal années 70 ;
• fond brun/gris usé ;
• accent orange brûlé ;
• UI technique, dense, lisible.

Lire aussi :

• design_system/consigne_design_system.md
• design_system/tokens/tokens.css
• design_system/tokens/tokens.gnome.css
• design_system/tokens/tokens.json
• tache3.md

---

2. Règles absolues

• Ne pas utiliser d'emoji.
• on peut utiliser des logos officiels de distributions, Docker, Proxmox, Raspberry Pi, NVIDIA, etc.
• on peut utiliser des mascotte.
• Ne pas créer d'illustration complexe.
• Icônes lisibles en 16px, 20px, 24px, 32px.
• SVG monochrome ou bichrome maximum.
• Les couleurs doivent être pilotables par CSS : currentColor, variables CSS ou classes.
• Pas de hex en dur dans les SVG finaux, sauf si un export bitmap final est explicitement demandé.
• Stroke régulier, formes simples, angles légèrement industriels.
• Éviter les arrondis excessifs.
• Les icônes UI courantes doivent d'abord utiliser Font Awesome via Icon; créer un SVG custom seulement pour les concepts spécifiques.

---

3. Assets applicatifs à créer

Favicon principal

Fichier cible recommandé :

client/public/favicon.svg

Concept :

• petit terminal ou serveur ;
• LED de statut ;
• flèche d'update ;
• grille machine ou stack discret.

Contraintes :

• lisible à 16x16 ;
• pas de texte ;
• silhouette reconnaissable ;
• version dark/light compatible.

Fallback navigateur

client/public/favicon.ico

Exporter depuis le SVG en tailles :

• 16x16
• 32x32
• 48x48

Icônes smartphone / PWA

client/public/apple-touch-icon.png
client/public/icon-192.png
client/public/icon-512.png
client/public/maskable-512.png

Contraintes :

• fond plein compatible thème Gruvbox ;
• symbole centré ;
• marge de sécurité pour icône maskable ;
• lisible sur fond clair et sombre ;
• pas de détails fins.

---

4. Direction visuelle

Formes recommandées :

• serveur rack compact ;
• terminal carré ;
• grille 2x2 de machines ;
• LED ronde ;
• flèche circulaire d'update ;
• ligne de terminal ;
• stack de conteneurs ;
• puce CPU ;
• disque ;
• bouclier sécurité.

Palette conceptuelle :

• fond : utiliser les tokens --bg-2, --bg-3 ;
• trait principal : --ink-1 ou currentColor ;
• accent : --accent ;
• statut ok : --ok ;
• warning : --warn ;
• erreur : --err.

Le SVG doit rester utilisable en currentColor. Les variantes colorées ne doivent être utilisées que pour favicon/app icon, pas pour toutes les icônes UI.

---

5. Liste d'icônes nécessaires

Navigation et layout

Alias	Usage	Source recommandée
app-logo	logo app, favicon	SVG custom
machines	onglet machines	Font Awesome ou SVG custom
hermes	volet discussion agent	SVG custom si identité locale nécessaire
settings	paramètres	Font Awesome
terminal	volet terminal	Font Awesome
logs	logs bruts	Font Awesome
report	rapport Markdown	Font Awesome
copy	copier message/commande	Font Awesome
fullscreen	terminal plein écran	Font Awesome
collapse	réduire volet	Font Awesome

Actions système

Alias	Usage	Source recommandée
refresh	analyse/refresh	Font Awesome
analyze	update + analyse	Font Awesome
upgrade	upgrade	Font Awesome
full-upgrade	full/dist-upgrade	SVG custom optionnel
reboot	reboot	Font Awesome
reboot-verified	reboot vérifié	SVG custom optionnel
stop	arrêter action	Font Awesome
dry-run	simulation	Font Awesome
approve	validation action	Font Awesome
reject	refus action	Font Awesome

Type de machine

Alias	Usage	Source recommandée
server	machine générique	Font Awesome
vm	machine virtuelle	SVG custom optionnel
physical-host	machine physique	SVG custom optionnel
proxmox-host	hôte hyperviseur générique	SVG custom, sans logo Proxmox
container	LXC/container	Font Awesome ou SVG custom
raspberry-pi	Raspberry Pi générique	SVG custom sans logo officiel
workstation	poste/serveur GPU	Font Awesome

Hardware et métriques

Alias	Usage	Source recommandée
cpu	CPU/load	Font Awesome existant
memory	RAM	Font Awesome existant
disk	disque/df	Font Awesome existant
network	réseau	Font Awesome existant
gpu	GPU	SVG custom optionnel
temperature	température	Font Awesome
smart-disk	SMART disk	SVG custom optionnel
benchmark	benchmark	Font Awesome
machine-probe	détection hardware	SVG custom optionnel

APT, Docker, scripts

Alias	Usage	Source recommandée
package	paquet APT	Font Awesome
repository	dépôt APT	Font Awesome
firmware	firmware	SVG custom optionnel
driver	driver	SVG custom optionnel
docker	Docker installé/absent	SVG custom ou Font Awesome si disponible
compose-stack	stack Compose	SVG custom recommandé
container-image	image Docker	SVG custom optionnel
prune	nettoyage images	SVG custom optionnel
script	script install	Font Awesome
profile	profil post-install	Font Awesome

Sécurité et états

Alias	Usage	Source recommandée
ok	succès	Font Awesome
warning	warning	Font Awesome
error	erreur	Font Awesome
locked	action verrouillée	Font Awesome
secret	secret masqué	Font Awesome
key	clé SSH/API	Font Awesome
shield	sécurité	Font Awesome
disconnected	machine/Hermes déconnecté	Font Awesome
running	action en cours	Font Awesome

---

6. Icônes SVG custom prioritaires

Priorité haute :

1. app-logo
2. compose-stack
3. machine-probe
4. reboot-verified

Priorité moyenne :

1. proxmox-host
2. physical-host
3. vm
4. gpu
5. firmware
6. driver

Priorité basse :

1. smart-disk
2. prune
3. container-image
4. raspberry-pi

---

7. Format attendu des SVG

Recommandation :

<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
  <path d="..." stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Contraintes :

• viewBox="0 0 24 24" pour icônes UI ;
• viewBox="0 0 512 512" possible pour logo/app icon source ;
• stroke-width entre 1.6 et 2;
• pas de filtre SVG, pas de blur ;
• pas de texte vectorisé ;
• pas de dépendance externe ;
• fichiers nommés en kebab-case.

---

8. Validation visuelle

Chaque icône doit être vérifiée :

• en dark theme ;
• en light theme ;
• en 16px, 20px, 24px, 32px ;
• sur fond --bg-2 et --bg-3 ;
• en état normal, warning, error si applicable ;
• avec le composant IconButton et tooltip.

Critères d'acceptation :

• silhouette compréhensible sans label à 20px ;
• pas de confusion entre refresh, upgrade, reboot ;
• pas de confusion entre vm, physical-host, proxmox-host, container ;
• pas de dépendance à une marque externe ;
• rendu cohérent avec le design system Gruvbox seventies.