70 lines
3.2 KiB
Markdown
70 lines
3.2 KiB
Markdown
# Logo vectoriel Livrets — Plan d'implémentation
|
||
|
||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||
|
||
**Goal:** Créer le maître vectoriel `docs/branding/logo.svg` (concept « Tuiles quiz », fond navy) exactement conforme à la spec.
|
||
|
||
**Architecture:** Un unique fichier SVG autonome (rect, circle, path, stroke) — aucune police, aucune référence externe, palette limitée aux 5 couleurs de l'app.
|
||
|
||
**Tech Stack:** SVG 1.1, xmllint pour la validation.
|
||
|
||
## Global Constraints
|
||
|
||
- Livrable unique : `docs/branding/logo.svg` (spec : `docs/superpowers/specs/2026-08-31-logo-design.md`)
|
||
- ViewBox `0 0 128 128` ; aucun élément `<text>` ; aucune référence externe
|
||
- Couleurs autorisées (uniquement) : `#1D3557` `#457B9D` `#A8DADC` `#E63946` `#F1FAEE`
|
||
- Géométrie verbatim de la spec §3 (carte rx 28 ; tuiles 42×42 rx 12 à (18,18)/(68,18)/(18,68)/(68,68) ; glyphes aux coordonnées indiquées)
|
||
|
||
---
|
||
|
||
### Task 1: Créer et valider `docs/branding/logo.svg`
|
||
|
||
**Files:**
|
||
- Create: `docs/branding/logo.svg`
|
||
|
||
**Interfaces:**
|
||
- Consumes: rien (actif autonome)
|
||
- Produces: `docs/branding/logo.svg`, maître vectoriel réutilisable pour les futurs exports icônes
|
||
|
||
- [ ] **Step 1: Créer le fichier SVG**
|
||
|
||
Contenu complet (conforme spec §3) :
|
||
|
||
```svg
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 128 128" role="img" aria-labelledby="title">
|
||
<title id="title">Livrets — entraînement aux tables de multiplication</title>
|
||
<rect x="4" y="4" width="120" height="120" rx="28" fill="#1D3557"/>
|
||
<rect x="18" y="18" width="42" height="42" rx="12" fill="#A8DADC"/>
|
||
<rect x="68" y="18" width="42" height="42" rx="12" fill="#E63946"/>
|
||
<rect x="18" y="68" width="42" height="42" rx="12" fill="#F1FAEE"/>
|
||
<rect x="68" y="68" width="42" height="42" rx="12" fill="#457B9D"/>
|
||
<path d="M29,28 L49,28 L36,50" fill="none" stroke="#1D3557" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path d="M81,31 L97,47 M97,31 L81,47" fill="none" stroke="#F1FAEE" stroke-width="6.5" stroke-linecap="round"/>
|
||
<circle cx="39" cy="82.75" r="5.5" fill="#1D3557"/>
|
||
<circle cx="39" cy="93.25" r="7.5" fill="#1D3557"/>
|
||
<path d="M81,81 C81,73 97,73 97,81 C97,86.5 89,86.5 89,93 L89,95.5" fill="none" stroke="#F1FAEE" stroke-width="6" stroke-linecap="round"/>
|
||
<circle cx="89" cy="102.5" r="3.4" fill="#F1FAEE"/>
|
||
</svg>
|
||
```
|
||
|
||
- [ ] **Step 2: Valider le XML et les contraintes**
|
||
|
||
```bash
|
||
xmllint --noout docs/branding/logo.svg # attendu : aucune sortie (bien formé)
|
||
grep -c "<text" docs/branding/logo.svg # attendu : 0
|
||
grep -oE "#[0-9A-Fa-f]{6}" docs/branding/logo.svg | sort -u
|
||
# attendu exactement : #1D3557 #457B9D #A8DADC #E63946 #F1FAEE
|
||
grep -cE "http" docs/branding/logo.svg # attendu : 1 (namespace xmlns uniquement)
|
||
```
|
||
|
||
- [ ] **Step 3: Contrôle visuel**
|
||
|
||
Pousser l'écran companion (`logo-final.html`) : rendu à 512, 150 et 44 px + URL du fichier. Vérifier la conformité avec la maquette B2 validée (tuiles, glyphes, couleurs).
|
||
|
||
- [ ] **Step 4: Commit**
|
||
|
||
```bash
|
||
git add docs/branding/logo.svg
|
||
git commit -m "feat: logo vectoriel tuiles quiz fond navy"
|
||
```
|