gilles/system_update
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
system_update/consigne_icon.md
T
gilles 0fbca06d3d docs: roadmap tâches 1.9-8 (briefs, gates de validation, designs tâche 2) + plans d'implémentation 
Cartographie complète (liste_taches/coherence_taches), briefs tacheN + gates
validation_tacheN, design tâche 2 (docs/design/tache2/), specs/plans jalon 1-2
et tâche 1.9/2 (Phase 1, Phase 2, SJ-0→3). Validations consignées (1.9 ✅, 2-8 🟡).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-05 19:50:25 +02:00

296 lines
7.8 KiB
Markdown
Raw Permalink Blame History

# 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é :
```text
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
```text
client/public/favicon.ico
```
Exporter depuis le SVG en tailles :
- `16x16`
- `32x32`
- `48x48`
### Icônes smartphone / PWA
```text
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 :
```xml
<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.
Reference in New Issue View Git Blame Copy Permalink