livrets/docs/superpowers/plans/2026-08-31-logo-vectoriel.md

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 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

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

git add docs/branding/logo.svg
git commit -m "feat: logo vectoriel tuiles quiz fond navy"