senke/talas-group
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
talas-group/12_DOCUMENTATION/Imprimables/Intercalaire_05.html
senke 1db6d066c0 nettoyage repo : réorganisation fichiers en vrac, ajout body solidworks + studio mic ref 
- Body SolidWorks v1 → 02_PRODUITS_PHYSIQUES/Microphone/Conception/
- Studio Mic KiCAD (DIYPerks) → 02_PRODUITS_PHYSIQUES/R&D_References/DIY/
- cleanup_ports.sh → 04_INFRA_DEPLOIEMENT/
- mockup_jeu_ux → 11_RECHERCHE_&_LAB/
- Printables → 12_DOCUMENTATION/Imprimables/
- Screenshots, ideas, one.html → _BROUILLON/
- all-talas (23Go) → 13_ARCHIVES/
- Supprimé all-talas.zip (20Go doublon), lock files LibreOffice
- Nettoyé .gitignore
- Remote → Forgejo (10.0.20.105:3000)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-09 16:31:26 +02:00

5142 lines
178 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Intercalaire 5 - EXPERIENCE UTILISATEUR</title>
<style>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; max-width: 900px; margin: 0 auto; padding: 20px; color: #333; }
h1 { border-bottom: 2px solid #2c3e50; padding-bottom: 10px; color: #2c3e50; font-size: 2.5em; }
h2 { color: #34495e; margin-top: 1.5em; border-bottom: 1px solid #eee; padding-bottom: 5px; }
h3 { color: #7f8c8d; }
pre { background: #f8f9fa; padding: 15px; border-radius: 5px; overflow-x: auto; font-size: 0.9em; border: 1px solid #e9ecef; }
code { font-family: Consolas, Monaco, monospace; background: #f8f9fa; padding: 2px 4px; border-radius: 3px; }
table { border-collapse: collapse; width: 100%; margin-bottom: 1.5em; }
th, td { border: 1px solid #dee2e6; padding: 10px; text-align: left; }
th { background-color: #f8f9fa; font-weight: bold; }
.doc-header { background-color: #ecf0f1; padding: 15px; border-radius: 5px; margin-bottom: 20px; margin-top: 40px; border-left: 5px solid #3498db; }
.doc-header h2 { margin: 0; border: none; padding: 0; color: #2980b9; }
.doc-path { font-family: monospace; font-size: 0.9em; color: #7f8c8d; }
@media print {
body { max-width: 100%; padding: 0; margin: 1cm; font-size: 11pt; }
.page-break { page-break-before: always; }
pre, code { white-space: pre-wrap; word-wrap: break-word; font-size: 10pt; border: none; background: transparent; }
a { text-decoration: none; color: black; }
h1 { font-size: 24pt; }
h2 { font-size: 18pt; }
h3 { font-size: 14pt; }
.doc-header { border: 1px solid #ccc; background-color: transparent; }
}
</style>
</head>
<body>
<h1>Intercalaire 5 : EXPERIENCE UTILISATEUR</h1>
<p><em>Généré le 4 Avril 2026 - Projet Talas</em></p>
<hr>
<div class='page-break'></div>
<div class='doc-header'>
<h2>📄 README.md</h2>
<div class='doc-path'>Chemin: 05_EXPERIENCE_UTILISATEUR/Accessibilité/README.md</div>
</div>
<h1>Accessibilité (a11y)</h1>
<p>Ce dossier documente les efforts pour rendre les interfaces Talas <strong>accessibles à tous</strong> : normes, audits, guidelines et outils.</p>
<h2>Objectifs :</h2>
<ul>
<li>Respecter les normes WCAG 2.1/2.2.</li>
<li>Permettre une utilisation équitable, quelle que soit la capacité de l’utilisateur.</li>
<li>Identifier les axes d’amélioration (contraste, clavier, ARIA, etc.)</li>
</ul>
<h2>Contenu recommandé :</h2>
<ul>
<li><code>audit_wcag.md</code> : rapport de conformité</li>
<li><code>checklists/</code> : critères à valider (AA / AAA)</li>
<li><code>outil/</code> : axe DevTools, Lighthouse, Pa11y</li>
<li><code>design_guidelines/</code> : composants accessibles</li>
<li><code>tests/</code> : retours personnes concernées (optionnel mais précieux)</li>
</ul>
<blockquote>
<p>L’accessibilité n’est pas un bonus : elle est native à l’UX Talas.</p>
</blockquote>
<div class='page-break'></div>
<div class='doc-header'>
<h2>📄 CHARTE_GRAPHIQUE_TALAS.md</h2>
<div class='doc-path'>Chemin: 05_EXPERIENCE_UTILISATEUR/CHARTE_GRAPHIQUE_TALAS.md</div>
</div>
<h1>Charte graphique — Talas &amp; Veza</h1>
<blockquote>
<p>Document de reference pour l'application de l'identite visuelle.
Ce document definit les <strong>regles</strong>. Pour la philosophie, voir [[DIRECTION_ARTISTIQUE_TALAS]].
Pour l'implementation technique, voir [[SUMI_V3_SPECIFICATION]].
Derniere mise a jour : 2 avril 2026.</p>
</blockquote>
<hr />
<h2>1. Direction en une page</h2>
<p>L'identite visuelle de Talas est un <strong>lavis japonais interactif</strong> (sumi-e numerique).
L'ecran est du papier washi. Les elements sont des traces d'encre. Le cyan est la seule
touche de couleur — comme un pigment rare dans un lavis monochrome.</p>
<p><strong>Cinq principes :</strong>
1. <strong>L'encre et le papier</strong> — tout est soit de l'encre, soit du papier
2. <strong>Le cyan unique</strong> — la seule couleur d'accent, rare et precieuse
3. <strong>La profondeur par diffusion</strong> — des couches d'encre diluee, pas des ombres portees
4. <strong>Le vide (ma)</strong> — l'espace negatif est un choix, pas du remplissage
5. <strong>L'interface vivante</strong> — le lavis respire avec l'heure et se patine avec l'usage</p>
<hr />
<h2>2. Architecture de marque</h2>
<h3>2.1 Les deux entites</h3>
<table>
<thead>
<tr>
<th>Entite</th>
<th>Nature</th>
<th>Ce qu'elle represente</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Talas</strong></td>
<td>Marque mere</td>
<td>Le materiel audio, l'entreprise, l'ecosysteme complet</td>
</tr>
<tr>
<td><strong>Veza</strong></td>
<td>Sous-marque</td>
<td>La plateforme web communautaire (boutique + communaute + services)</td>
</tr>
</tbody>
</table>
<h3>2.2 Relation visuelle</h3>
<p>Talas et Veza partagent le <strong>meme langage visuel</strong> (lavis, palette, typographie) mais
ont chacune leur propre logo.</p>
<ul>
<li><strong>Talas</strong> est la marque visible sur le hardware, le packaging, les communications corporate</li>
<li><strong>Veza</strong> est la marque visible dans l'application web, les espaces communautaires</li>
<li>Quand les deux apparaissent ensemble : "Veza by Talas" ou "Veza — une plateforme Talas"</li>
<li>Le logo Talas est toujours present dans le footer de Veza (discret, en encre diluee)</li>
</ul>
<h3>2.3 Hierarchie d'utilisation</h3>
<table>
<thead>
<tr>
<th>Contexte</th>
<th>Logo principal</th>
<th>Logo secondaire</th>
</tr>
</thead>
<tbody>
<tr>
<td>Packaging micro</td>
<td>Talas (symbole seul, grave)</td>
<td>—</td>
</tr>
<tr>
<td>Page produit web</td>
<td>Talas (logotype + symbole)</td>
<td>Veza (dans la navigation)</td>
</tr>
<tr>
<td>Application Veza</td>
<td>Veza (logotype)</td>
<td>Talas (footer, page a propos)</td>
</tr>
<tr>
<td>Reseaux sociaux</td>
<td>Talas (symbole avatar)</td>
<td>—</td>
</tr>
<tr>
<td>Documents officiels</td>
<td>Talas (logotype + symbole)</td>
<td>—</td>
</tr>
<tr>
<td>Emails transactionnels</td>
<td>Veza (logotype)</td>
<td>Talas (signature)</td>
</tr>
</tbody>
</table>
<hr />
<h2>3. Logo</h2>
<h3>3.1 Logo Talas — composition</h3>
<p>Le logo Talas se compose de deux elements independants :</p>
<p><strong>Le symbole :</strong>
- Un geste calligraphique dessine a la main
- Evoque a la fois l'onde sonore et le trait de pinceau
- Irregulier volontairement — les imperfections du geste sont preservees
- Monochrome strict — jamais de couleur dans le symbole
- Fonctionne seul, sans texte</p>
<p><strong>Le logotype :</strong>
- Le mot <strong>TALAS</strong> en Space Grotesk Bold
- MAJUSCULES, letter-spacing 0.12em
- Sobre, comme une inscription gravee dans la pierre ou frappee sur metal
- Fonctionne seul, sans le symbole</p>
<h3>3.2 Logo Veza — composition</h3>
<p>Le logo Veza suit les memes principes :</p>
<p><strong>Le logotype :</strong>
- Le mot <strong>VEZA</strong> en Space Grotesk Bold
- MAJUSCULES, letter-spacing 0.12em
- Meme traitement que Talas — coherence de la famille</p>
<p><strong>Le symbole (optionnel) :</strong>
- Si un symbole Veza est cree, il doit appartenir au meme langage visuel
(geste calligraphique, monochrome, irregulier)
- Alternative : utiliser le symbole Talas pour les deux, avec le logotype
comme differenciation
- Decision a prendre lors de la creation du logo (voir [[GUIDE_CREATION_LOGO]])</p>
<h3>3.3 Versions necessaires</h3>
<p>Pour chaque marque (Talas, et Veza si symbole propre) :</p>
<table>
<thead>
<tr>
<th>Version</th>
<th>Format</th>
<th>Usage principal</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Logo principal</strong></td>
<td>Symbole + logotype, horizontal</td>
<td>Site web, documents, packaging</td>
</tr>
<tr>
<td><strong>Logo empile</strong></td>
<td>Symbole au-dessus du logotype</td>
<td>Format carre, avatar, sticker</td>
</tr>
<tr>
<td><strong>Symbole seul</strong></td>
<td>Carre</td>
<td>Favicon, avatar RS, watermark, gravure</td>
</tr>
<tr>
<td><strong>Logotype seul</strong></td>
<td>Horizontal</td>
<td>Contextes ou le symbole est trop petit</td>
</tr>
<tr>
<td><strong>Monochrome noir</strong></td>
<td>#1A1A1E sur transparent</td>
<td>Fond clair, impression N&amp;B, gravure</td>
</tr>
<tr>
<td><strong>Monochrome blanc</strong></td>
<td>#F2EDE6 sur transparent</td>
<td>Fond sombre, mode nuit</td>
</tr>
<tr>
<td><strong>Gravure/marquage</strong></td>
<td>Traits epaissis, simplifie</td>
<td>Corps du micro (aluminium)</td>
</tr>
<tr>
<td><strong>Broderie</strong></td>
<td>Traits simplifies, min 3mm</td>
<td>Pochette tissu du packaging</td>
</tr>
<tr>
<td><strong>Favicon</strong></td>
<td>Symbole simplifie, 16x16 et 32x32</td>
<td>Navigateur</td>
</tr>
</tbody>
</table>
<h3>3.4 Zones d'exclusion</h3>
<p>Le logo doit toujours respirer. L'espace minimum autour du logo est egal a la
hauteur du symbole (note <strong>h</strong>).</p>
<pre><code> h
┌─────────┐
h ── │ SYMBOLE │ ── h
│ TALAS │
└─────────┘
h
</code></pre>
<ul>
<li>Aucun element graphique, texte ou bord de page ne doit entrer dans cette zone</li>
<li>Sur fond photographique : le logo doit etre place dans une zone de contraste suffisant</li>
<li>Si l'espace est insuffisant, utiliser le symbole seul (il a besoin de moins d'espace)</li>
</ul>
<h3>3.5 Tailles minimales</h3>
<table>
<thead>
<tr>
<th>Version</th>
<th>Taille minimale</th>
<th>Contexte</th>
</tr>
</thead>
<tbody>
<tr>
<td>Logo principal (symbole + texte)</td>
<td>120px de large</td>
<td>Web</td>
</tr>
<tr>
<td>Logotype seul</td>
<td>80px de large</td>
<td>Web</td>
</tr>
<tr>
<td>Symbole seul</td>
<td>24px</td>
<td>Web, app</td>
</tr>
<tr>
<td>Favicon</td>
<td>16x16 px</td>
<td>Navigateur</td>
</tr>
<tr>
<td>Logo imprime</td>
<td>30mm de large</td>
<td>Print</td>
</tr>
<tr>
<td>Symbole imprime</td>
<td>8mm</td>
<td>Marquage produit</td>
</tr>
</tbody>
</table>
<p>En dessous de ces tailles, le logo devient illisible. Utiliser la version simplifiee
(symbole seul ou favicon).</p>
<h3>3.6 Usages interdits</h3>
<p><strong>Ne jamais :</strong>
- Modifier les proportions du logo (etirer, comprimer)
- Ajouter une couleur au symbole (il est TOUJOURS monochrome)
- Ajouter un contour, une ombre portee, un effet 3D, un degrade
- Placer le logo sur un fond a motifs ou une photo a faible contraste
- Utiliser le logo comme pattern repetitif (ce n'est pas un motif decoratif)
- Modifier le letter-spacing du logotype
- Remplacer la police du logotype par une autre
- Entourer le logo d'un cadre, d'un cercle, d'un badge
- Utiliser le logo en couleur (le cyan est reserve a l'accent UI, pas au logo)
- Lisser ou "corriger" les irregularites du symbole — elles sont intentionnelles</p>
<hr />
<h2>4. Palette de couleurs</h2>
<h3>4.1 Palette principale</h3>
<p>La palette est celle d'un lavis : noir, blanc casse, les gris entre les deux,
et une seule couleur — le cyan.</p>
<h4>Mode jour (papier clair)</h4>
<table>
<thead>
<tr>
<th>Role</th>
<th>Nom</th>
<th>Hex</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Papier</strong></td>
<td>Washi</td>
<td><code>#F2EDE6</code></td>
<td>Fond principal — JAMAIS de blanc pur (#FFFFFF)</td>
</tr>
<tr>
<td><strong>Encre</strong></td>
<td>Sumi</td>
<td><code>#1A1A1E</code></td>
<td>Texte principal, titres, elements forts</td>
</tr>
<tr>
<td><strong>Encre diluee</strong></td>
<td>Usuzumi</td>
<td><code>#9A958D</code></td>
<td>Texte secondaire, placeholders</td>
</tr>
<tr>
<td><strong>Encre tres diluee</strong></td>
<td>Awazumi</td>
<td><code>#B5B0A8</code></td>
<td>Texte tertiaire, texte desactive</td>
</tr>
<tr>
<td><strong>Lavis (surface)</strong></td>
<td>Nijimi</td>
<td><code>rgba(26,26,30, 0.04-0.12)</code></td>
<td>Fonds de cartes, overlays, layers</td>
</tr>
<tr>
<td><strong>Cyan accent</strong></td>
<td>Mizu</td>
<td><code>#0098B5</code></td>
<td>Liens, CTA, focus, elements interactifs</td>
</tr>
<tr>
<td><strong>Cyan hover</strong></td>
<td>—</td>
<td><code>#00B4D8</code></td>
<td>Survol des elements interactifs</td>
</tr>
<tr>
<td><strong>Cyan actif</strong></td>
<td>—</td>
<td><code>#007A94</code></td>
<td>Etat presse/actif</td>
</tr>
<tr>
<td><strong>Cyan dilue</strong></td>
<td>—</td>
<td><code>rgba(0, 152, 181, 0.15)</code></td>
<td>Focus rings, fonds subtils</td>
</tr>
</tbody>
</table>
<h4>Mode nuit (lavis inverse)</h4>
<table>
<thead>
<tr>
<th>Role</th>
<th>Nom</th>
<th>Hex</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Papier sombre</strong></td>
<td>Yami</td>
<td><code>#0D0D0F</code> — JAMAIS de noir pur (#000000)</td>
</tr>
<tr>
<td><strong>Encre claire</strong></td>
<td>Shiroi sumi</td>
<td><code>#E8E3DB</code></td>
</tr>
<tr>
<td><strong>Encre diluee (nuit)</strong></td>
<td>—</td>
<td><code>#9A958D</code></td>
</tr>
<tr>
<td><strong>Cyan profond</strong></td>
<td>Fukai mizu</td>
<td><code>#006B7F</code></td>
</tr>
</tbody>
</table>
<h4>Transition jour/nuit</h4>
<p>La transition est un fondu de 30 minutes, imperceptible en temps reel.
Le passage se fait autour de 20h (vers la nuit) et 5h (vers le jour).</p>
<pre><code>Jour : #F2EDE6 (papier) + #1A1A1E (encre) + #0098B5 (cyan)
Nuit : #0D0D0F (papier) + #E8E3DB (encre) + #006B7F (cyan)
</code></pre>
<h3>4.2 Couleurs fonctionnelles</h3>
<p>Les couleurs fonctionnelles sont des pigments dilues dans beaucoup d'eau.
Elles n'apparaissent qu'en lignes fines, micro-points ou halos subtils.
<strong>Jamais en aplat.</strong></p>
<table>
<thead>
<tr>
<th>Role</th>
<th>Couleur</th>
<th>Code</th>
<th>Regles</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Succes</strong></td>
<td>Vert sauge dilue</td>
<td><code>rgba(90, 140, 100, 0.60)</code></td>
<td>Ligne fine, point, halo</td>
</tr>
<tr>
<td><strong>Erreur</strong></td>
<td>Rouge brique dilue</td>
<td><code>rgba(180, 80, 70, 0.55)</code></td>
<td>Trait fin, bordure legere</td>
</tr>
<tr>
<td><strong>Warning</strong></td>
<td>Ambre dilue</td>
<td><code>rgba(190, 150, 60, 0.55)</code></td>
<td>Point discret</td>
</tr>
<tr>
<td><strong>Info</strong></td>
<td>Cyan</td>
<td><code>#0098B5</code></td>
<td>= accent (coherent)</td>
</tr>
</tbody>
</table>
<p><strong>Regles des couleurs fonctionnelles :</strong>
- Jamais en fond plein (pas de bandeau rouge pour une erreur)
- Opacite maximale : 60% — elles sont toujours "diluees"
- Si le cyan est present au meme endroit, la couleur fonctionnelle cede (gris + icone)</p>
<h3>4.3 Audit d'accessibilite (WCAG 2.1 AA)</h3>
<p>Le standard WCAG AA exige un contraste minimum de <strong>4.5:1</strong> pour le texte normal
et <strong>3:1</strong> pour le texte large (&gt;= 18pt ou &gt;= 14pt bold).</p>
<h4>Mode jour (fond #F2EDE6)</h4>
<table>
<thead>
<tr>
<th>Combinaison</th>
<th>Ratio</th>
<th>Verdict</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td>Encre <code>#1A1A1E</code> sur papier <code>#F2EDE6</code></td>
<td><strong>~14.8:1</strong></td>
<td>AA, AAA</td>
<td>Excellent</td>
</tr>
<tr>
<td>Cyan <code>#0098B5</code> sur papier <code>#F2EDE6</code></td>
<td><strong>~2.9:1</strong></td>
<td><strong>Echec AA texte</strong></td>
<td>Trop clair pour du texte normal</td>
</tr>
<tr>
<td>Cyan actif <code>#007A94</code> sur papier <code>#F2EDE6</code></td>
<td><strong>~4.2:1</strong></td>
<td><strong>Limite</strong></td>
<td>Passe pour texte large uniquement</td>
</tr>
<tr>
<td>Cyan profond <code>#006B7F</code> sur papier <code>#F2EDE6</code></td>
<td><strong>~5.3:1</strong></td>
<td>AA</td>
<td>Utilisable pour tout texte</td>
</tr>
<tr>
<td>Encre diluee <code>#9A958D</code> sur papier <code>#F2EDE6</code></td>
<td><strong>~3.1:1</strong></td>
<td>Texte large OK</td>
<td>Limite pour texte normal</td>
</tr>
<tr>
<td>Encre tres diluee <code>#B5B0A8</code> sur papier <code>#F2EDE6</code></td>
<td><strong>~2.1:1</strong></td>
<td><strong>Echec</strong></td>
<td>Decoratif uniquement</td>
</tr>
</tbody>
</table>
<h4>Mode nuit (fond #0D0D0F)</h4>
<table>
<thead>
<tr>
<th>Combinaison</th>
<th>Ratio</th>
<th>Verdict</th>
</tr>
</thead>
<tbody>
<tr>
<td>Encre claire <code>#E8E3DB</code> sur papier sombre <code>#0D0D0F</code></td>
<td><strong>~16.2:1</strong></td>
<td>AA, AAA</td>
</tr>
<tr>
<td>Cyan profond <code>#006B7F</code> sur papier sombre <code>#0D0D0F</code></td>
<td><strong>~3.4:1</strong></td>
<td>Texte large OK</td>
</tr>
</tbody>
</table>
<h4>Decisions d'accessibilite</h4>
<p>Sur la base de cet audit, voici les regles d'usage du cyan :</p>
<table>
<thead>
<tr>
<th>Contexte</th>
<th>Couleur cyan a utiliser</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Texte normal</strong> (liens, labels)</td>
<td><code>#006B7F</code> (cyan profond) — ratio &gt;= 4.5:1</td>
</tr>
<tr>
<td><strong>Texte large</strong> (titres, CTA, boutons)</td>
<td><code>#0098B5</code> (cyan standard) — ratio &gt;= 3:1</td>
</tr>
<tr>
<td><strong>Elements non-texte</strong> (icones, bordures, focus rings)</td>
<td><code>#0098B5</code> (cyan standard) — ratio &gt;= 3:1</td>
</tr>
<tr>
<td><strong>Fond de bouton</strong> (texte clair dessus)</td>
<td><code>#0098B5</code> avec texte <code>#F2EDE6</code> — ratio ~4.7:1</td>
</tr>
<tr>
<td><strong>Mode high contrast</strong></td>
<td><code>#006B7F</code> partout</td>
</tr>
</tbody>
</table>
<p><strong>Regle : le cyan <code>#0098B5</code> n'est utilise en texte normal QUE si le texte est
accompagne d'un indicateur non-couleur (soulignement, icone, gras).</strong> Sinon,
utiliser <code>#006B7F</code> pour le texte courant.</p>
<p>L'encre diluee <code>#9A958D</code> est reservee au texte secondaire qui n'est <strong>pas</strong>
indispensable a la comprehension (captions, timestamps, metadata).
L'encre tres diluee <code>#B5B0A8</code> est <strong>purement decorative</strong> (ne jamais l'utiliser
pour du contenu informationnel).</p>
<h3>4.4 Regles absolues de la palette</h3>
<ol>
<li><strong>Pas de blanc pur (#FFFFFF).</strong> Le plus clair est <code>#F2EDE6</code> (papier washi).</li>
<li><strong>Pas de noir pur (#000000).</strong> Le plus sombre est <code>#0D0D0F</code> (noir d'encre).</li>
<li><strong>Le cyan est la SEULE couleur d'accent.</strong> Pas de deuxieme couleur. Jamais.</li>
<li><strong>Les couleurs fonctionnelles sont toujours diluees.</strong> Pas d'aplat de couleur.</li>
<li><strong>Les gris sont toujours chauds.</strong> Pas de gris bleu, pas de gris pur neutre.</li>
<li><strong>Tout passe WCAG AA.</strong> Si l'esthetique et l'accessibilite sont en conflit,
l'accessibilite gagne.</li>
</ol>
<hr />
<h2>5. Typographie</h2>
<h3>5.1 Polices</h3>
<table>
<thead>
<tr>
<th>Usage</th>
<th>Police</th>
<th>Poids</th>
<th>License</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Titres, marque</strong></td>
<td>Space Grotesk</td>
<td>Bold (700)</td>
<td>SIL Open Font License</td>
</tr>
<tr>
<td><strong>Corps de texte</strong></td>
<td>Inter</td>
<td>Regular (400), Semi-Bold (600)</td>
<td>SIL Open Font License</td>
</tr>
<tr>
<td><strong>Code, specs</strong></td>
<td>JetBrains Mono</td>
<td>Regular (400)</td>
<td>SIL Open Font License</td>
</tr>
</tbody>
</table>
<p>Toutes les polices sont open-source. Format : <strong>woff2 uniquement</strong>.
<code>font-display: swap</code> obligatoire.</p>
<h3>5.2 Echelle typographique</h3>
<pre><code>H1 Space Grotesk Bold 32px MAJUSCULES letter-spacing 0.15em line-height 1.2
H2 Space Grotesk Bold 24px MAJUSCULES letter-spacing 0.12em line-height 1.3
H3 Space Grotesk Bold 20px MAJUSCULES letter-spacing 0.10em line-height 1.4
H4 Space Grotesk Bold 18px MAJUSCULES letter-spacing 0.08em line-height 1.4
Body Inter Regular 16px casse normale line-height 1.7
Body-sm Inter Regular 14px casse normale line-height 1.6
Caption Inter Semi-Bold 12px MAJUSCULES letter-spacing 0.08em line-height 1.5
Code JetBrains Mono 14px casse normale line-height 1.5
</code></pre>
<h3>5.3 Regles typographiques</h3>
<ul>
<li><strong>Titres toujours en MAJUSCULES</strong> avec letter-spacing large — evoque l'inscription
gravee dans la pierre</li>
<li><strong>Corps en casse normale</strong> — pas de MAJUSCULES dans le texte courant</li>
<li><strong>Interligne genereux</strong> (1.6 minimum) — le texte respire comme un poeme</li>
<li><strong>Le texte flotte</strong> dans le papier — padding genereux autour des blocs de texte</li>
<li><strong>Texte secondaire en encre diluee</strong> (<code>#9A958D</code>) — il s'efface comme un lavis dilue</li>
<li><strong>Pas de gras dans le corps</strong> sauf pour les termes techniques ou les noms propres
— utiliser Semi-Bold (600) avec parcimonie</li>
<li><strong>Les specs techniques en monospace</strong> (JetBrains Mono) — coherence circuit/code</li>
</ul>
<h3>5.4 Chargement des polices (budget performance)</h3>
<p><strong>Maximum 2 fichiers de police au chargement initial :</strong>
1. Space Grotesk Bold (variable font ou static bold, ~25 Ko woff2)
2. Inter Regular (variable font, ~95 Ko woff2 — couvre Regular + Semi-Bold)</p>
<p>JetBrains Mono est charge en lazy (uniquement sur les pages qui affichent du code/specs).</p>
<pre><code class="language-html">&lt;link rel=&quot;preload&quot; href=&quot;/fonts/SpaceGrotesk-Bold.woff2&quot; as=&quot;font&quot; type=&quot;font/woff2&quot; crossorigin&gt;
&lt;link rel=&quot;preload&quot; href=&quot;/fonts/Inter-Variable.woff2&quot; as=&quot;font&quot; type=&quot;font/woff2&quot; crossorigin&gt;
</code></pre>
<p><strong>Budget total polices : &lt; 130 Ko.</strong></p>
<hr />
<h2>6. Iconographie</h2>
<h3>6.1 Principes</h3>
<p>Les icones sont des <strong>gestes dessines a la main</strong> — comme des caracteres calligraphiques
simplifies. Pas des SVG generiques lisses.</p>
<h3>6.2 Contraintes techniques</h3>
<table>
<thead>
<tr>
<th>Propriete</th>
<th>Valeur</th>
</tr>
</thead>
<tbody>
<tr>
<td>Format</td>
<td>SVG inline (pas de sprite, pas de font icon)</td>
</tr>
<tr>
<td>ViewBox</td>
<td>24x24</td>
</tr>
<tr>
<td>Epaisseur de trait</td>
<td>2px, variable (plus epaisse au debut, plus fine a la fin)</td>
</tr>
<tr>
<td>Style</td>
<td>Stroke only (<code>stroke-linecap: round</code>, pas de fill sauf exceptions)</td>
</tr>
<tr>
<td>Couleur</td>
<td><code>currentColor</code> (herite du parent)</td>
</tr>
<tr>
<td>Nombre max</td>
<td>30 icones uniques</td>
</tr>
<tr>
<td>Irregularite</td>
<td>Preservee — pas de lissage automatique</td>
</tr>
</tbody>
</table>
<h3>6.3 Set d'icones prioritaires</h3>
<table>
<thead>
<tr>
<th>Icone</th>
<th>Metaphore lavis</th>
<th>Geste</th>
</tr>
</thead>
<tbody>
<tr>
<td>Play</td>
<td>Trait de pinceau diagonal</td>
<td>Triangle en un seul trait rapide</td>
</tr>
<tr>
<td>Pause</td>
<td>Colonnes d'encre</td>
<td>Deux traits verticaux paralleles</td>
</tr>
<tr>
<td>Recherche</td>
<td>Enso (cercle zen)</td>
<td>Cercle ouvert, non ferme</td>
</tr>
<tr>
<td>Profil</td>
<td>Capsule de micro</td>
<td>Ovale avec trait de base</td>
</tr>
<tr>
<td>Chat</td>
<td>Onde sonore</td>
<td>Trois arcs concentriques</td>
</tr>
<tr>
<td>Upload</td>
<td>Trait ascendant</td>
<td>Trait qui monte avec goutte au sommet</td>
</tr>
<tr>
<td>Settings</td>
<td>Ensui (roue)</td>
<td>Cercle avec trait directionnel</td>
</tr>
<tr>
<td>Home</td>
<td>Montagne</td>
<td>Triangle inverse minimaliste</td>
</tr>
<tr>
<td>Close</td>
<td>Croix de pinceau</td>
<td>Deux traits croises d'un seul geste</td>
</tr>
<tr>
<td>Volume</td>
<td>Ondes</td>
<td>Arc de cercle avec diffusion</td>
</tr>
</tbody>
</table>
<h3>6.4 Production</h3>
<ol>
<li>Dessiner a la main (papier + feutre pinceau, ou tablette)</li>
<li>Scanner ou photographier en haute resolution</li>
<li>Vectoriser manuellement dans Inkscape (pas de trace automatique)</li>
<li>Preserver l'irregularite du trait</li>
<li>Exporter en SVG avec <code>currentColor</code></li>
<li>Integrer comme composant React dans <code>apps/web/src/components/icons/</code></li>
</ol>
<hr />
<h2>7. Textures et surfaces</h2>
<h3>7.1 Papier washi numerique</h3>
<p>Chaque fond porte la texture du papier. Jamais de surface lisse.</p>
<p><strong>Implementation :</strong>
- Un fichier <code>washi.png</code> (512x512, ~8 Ko)
- Photo d'un vrai papier washi, desaturee, grain visible
- Applique en <code>background-repeat</code> avec <code>mix-blend-mode: soft-light</code>
- Opacite : 0.04 (standard) a 0.08 (patine maximale)
- Desactive en mode eco et <code>prefers-reduced-motion: reduce</code></p>
<h3>7.2 Couches d'encre (elevation)</h3>
<p>Les surfaces elevees sont des couches d'encre diluee :</p>
<table>
<thead>
<tr>
<th>Elevation</th>
<th>Opacite</th>
<th>Blur</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td>Papier (fond)</td>
<td>0%</td>
<td>—</td>
<td>Fond de page</td>
</tr>
<tr>
<td>Surface (carte)</td>
<td>4-8%</td>
<td>8px</td>
<td>Cards, sections</td>
</tr>
<tr>
<td>Overlay</td>
<td>8-12%</td>
<td>16px</td>
<td>Dropdowns, menus</td>
</tr>
<tr>
<td>Modale</td>
<td>12-20%</td>
<td>24px</td>
<td>Modales, dialogues</td>
</tr>
<tr>
<td>Suzuri (player)</td>
<td>20-30%</td>
<td>32px</td>
<td>Player audio (element le plus dense)</td>
</tr>
</tbody>
</table>
<h3>7.3 Bordures</h3>
<p><strong>Regle absolue : jamais de <code>border: 1px solid</code>.</strong> Les bords sont des diffusions d'encre.</p>
<pre><code class="language-css">/* NON */
border: 1px solid rgba(0, 0, 0, 0.1);
/* OUI */
box-shadow: 0 0 6px rgba(26, 26, 30, 0.06);
border: none;
</code></pre>
<hr />
<h2>8. Applications</h2>
<h3>8.1 Packaging physique</h3>
<p>Le packaging prolonge le lavis dans le monde physique.</p>
<table>
<thead>
<tr>
<th>Element</th>
<th>Spec</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Boite</strong></td>
<td>Carton kraft non blanchi (brun naturel) — LE papier du lavis</td>
</tr>
<tr>
<td><strong>Impression</strong></td>
<td>Logo Talas (symbole) en noir, comme un hanko (sceau japonais) tamponne</td>
</tr>
<tr>
<td><strong>Livret</strong></td>
<td>Papier recycle, schemas en style trait de pinceau (pas de rendus 3D)</td>
</tr>
<tr>
<td><strong>Sticker</strong></td>
<td>Logo monochrome, encre noire sur fond transparent ou papier</td>
</tr>
<tr>
<td><strong>Pochette tissu</strong></td>
<td>Noire, logo brode en <strong>cyan <code>#0098B5</code></strong> — la SEULE touche de couleur</td>
</tr>
<tr>
<td><strong>Numero de serie</strong></td>
<td>Frappe a froid sur le carton (pas imprime)</td>
</tr>
<tr>
<td><strong>Cable</strong></td>
<td>Noir, sans marquage</td>
</tr>
</tbody>
</table>
<p>Le cyan n'apparait QUE sur la pochette (broderie). Tout le reste est monochrome.</p>
<h3>8.2 Produit physique (microphone)</h3>
<table>
<thead>
<tr>
<th>Element</th>
<th>Spec</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Corps</strong></td>
<td>Aluminium mat, finition brossee ou microbillage</td>
</tr>
<tr>
<td><strong>Marquage</strong></td>
<td>Symbole Talas grave au laser sur le corps</td>
</tr>
<tr>
<td><strong>Texte</strong></td>
<td>"TALAS" grave en petit sous le symbole</td>
</tr>
<tr>
<td><strong>Finition</strong></td>
<td>Mate — pas de brillant (coherence papier/encre)</td>
</tr>
<tr>
<td><strong>Connecteur</strong></td>
<td>XLR, pas de marquage couleur</td>
</tr>
</tbody>
</table>
<h3>8.3 Web (Veza)</h3>
<p>L'interface Veza est l'incarnation numerique du lavis. Le design system SUMI v3
definit l'implementation complete (voir [[SUMI_V3_SPECIFICATION]]).</p>
<p><strong>Principes cles :</strong>
- Fond = texture washi (jamais de surface lisse)
- Elements = couches d'encre a opacites variables
- Accent = cyan, rare et precieux
- Animations = le poids de l'eau (goutte/trait/lavis/vague/maree)
- Bordures = diffusions d'encre (jamais de lignes nettes)
- Player audio = suzuri, l'element le plus dense et le plus soigne</p>
<h3>8.4 Reseaux sociaux</h3>
<table>
<thead>
<tr>
<th>Element</th>
<th>Spec</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Avatar</strong></td>
<td>Symbole Talas sur fond washi <code>#F2EDE6</code> (jour) ou <code>#0D0D0F</code> (nuit)</td>
</tr>
<tr>
<td><strong>Banniere</strong></td>
<td>Photo d'atelier en noir &amp; blanc avec grain, style lavis</td>
</tr>
<tr>
<td><strong>Posts</strong></td>
<td>Fond washi, texte en encre, accent cyan minimal</td>
</tr>
<tr>
<td><strong>Videos</strong></td>
<td>Sous-titres en Space Grotesk Bold, fond = lavis diffus semi-transparent</td>
</tr>
<tr>
<td><strong>Stories</strong></td>
<td>Fond washi + contenu + logo en bas</td>
</tr>
<tr>
<td><strong>Watermark</strong></td>
<td>Symbole Talas semi-transparent (<code>opacity: 0.15</code>) en coin</td>
</tr>
</tbody>
</table>
<p><strong>Style photographique RS :</strong>
- Noir et blanc avec grain prononce (pas de HDR, pas de saturation)
- Eclairage naturel, contrastes forts
- Si couleur : uniquement des touches de cyan ou de lumiere froide
- Pas de filtres Instagram — le traitement est sobre, il ne "joue" pas</p>
<h3>8.5 Documents imprimes</h3>
<table>
<thead>
<tr>
<th>Element</th>
<th>Spec</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Papier</strong></td>
<td>Recycle, non couche, ton naturel/creme</td>
</tr>
<tr>
<td><strong>Impression</strong></td>
<td>Noir uniquement (sauf pochette → cyan)</td>
</tr>
<tr>
<td><strong>Marges</strong></td>
<td>Genereuses — le vide (ma) est aussi important que le contenu</td>
</tr>
<tr>
<td><strong>Titres</strong></td>
<td>Space Grotesk Bold, MAJUSCULES</td>
</tr>
<tr>
<td><strong>Corps</strong></td>
<td>Inter Regular, 11pt minimum</td>
</tr>
<tr>
<td><strong>Logo</strong></td>
<td>Toujours en haut ou en bas de page, jamais au milieu</td>
</tr>
</tbody>
</table>
<hr />
<h2>9. Faire / Ne pas faire</h2>
<h3>Faire</h3>
<ul>
<li>Utiliser les couleurs exactes de la palette (copier les hex codes)</li>
<li>Laisser respirer le logo (zone d'exclusion = hauteur du symbole)</li>
<li>Preserver l'irregularite des gestes (logo, icones)</li>
<li>Tester sur fond clair ET sombre avant de valider</li>
<li>Verifier le contraste WCAG AA sur chaque combinaison texte/fond</li>
<li>Utiliser le vide comme un choix de composition delibere</li>
<li>Traiter les photos en noir et blanc avec grain pour les communications</li>
</ul>
<h3>Ne pas faire</h3>
<ul>
<li>Utiliser du blanc pur (#FFFFFF) ou du noir pur (#000000)</li>
<li>Ajouter une deuxieme couleur d'accent (pas de violet, pas de orange, pas de vert)</li>
<li>Ajouter des effets au logo (ombre, degrade, 3D, contour, lueur)</li>
<li>Utiliser des icones standard (Font Awesome, Material Icons, Lucide, etc.)</li>
<li>Utiliser des bordures CSS nettes (<code>border: 1px solid</code>)</li>
<li>Surcharger les pages (si ca ne tient pas avec du vide, c'est qu'il y a trop d'elements)</li>
<li>Mettre le logo en couleur</li>
<li>Utiliser des photos en couleur saturee dans les communications</li>
<li>Imiter le sumi-e de maniere kitsch (pas de polices "japonisantes", pas de fleurs de cerisier)</li>
<li>Utiliser le cyan pour le logo (le cyan est l'accent UI, le logo est monochrome)</li>
</ul>
<hr />
<h2>10. Glossaire visuel</h2>
<p>Les termes sumi-e utilises dans la documentation Talas :</p>
<table>
<thead>
<tr>
<th>Terme</th>
<th>Japonais</th>
<th>Signification dans le contexte Talas</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Sumi</strong></td>
<td>墨 (encre)</td>
<td>Nom du design system. L'encre = les elements UI</td>
</tr>
<tr>
<td><strong>Washi</strong></td>
<td>和紙 (papier)</td>
<td>La texture de fond. Jamais de surface lisse</td>
</tr>
<tr>
<td><strong>Mizu</strong></td>
<td>水 (eau)</td>
<td>Le cyan. L'eau transporte l'encre et donne vie au lavis</td>
</tr>
<tr>
<td><strong>Ma</strong></td>
<td>間 (vide)</td>
<td>L'espace negatif. Un choix de design, pas du remplissage</td>
</tr>
<tr>
<td><strong>Fude</strong></td>
<td>筆 (pinceau)</td>
<td>Les icones et les traits = gestes de pinceau</td>
</tr>
<tr>
<td><strong>Suzuri</strong></td>
<td>硯 (pierre a encre)</td>
<td>Le player audio = l'element le plus lourd et ancre</td>
</tr>
<tr>
<td><strong>Nijimi</strong></td>
<td>滲み (diffusion)</td>
<td>Les effets de flou et de diffusion d'encre</td>
</tr>
<tr>
<td><strong>Enso</strong></td>
<td>円相 (cercle zen)</td>
<td>Forme de reference pour l'icone de recherche</td>
</tr>
<tr>
<td><strong>Hanko</strong></td>
<td>判子 (sceau)</td>
<td>Le logo imprime seul sur le packaging, comme un sceau</td>
</tr>
<tr>
<td><strong>Wabi-sabi</strong></td>
<td>侘寂</td>
<td>L'esthetique de l'imperfection — les irregularites sont belles</td>
</tr>
</tbody>
</table>
<hr />
<h2>11. Fichiers et organisation</h2>
<h3>11.1 Arborescence des assets</h3>
<pre><code>05_EXPERIENCE_UTILISATEUR/Identite_Visuelle/
├── logo/
│ ├── talas/
│ │ ├── talas_logo_principal.svg (symbole + logotype horizontal)
│ │ ├── talas_logo_empile.svg (symbole au-dessus du logotype)
│ │ ├── talas_symbole.svg (symbole seul)
│ │ ├── talas_logotype.svg (texte seul)
│ │ ├── talas_favicon.svg (symbole simplifie)
│ │ └── talas_gravure.svg (version simplifiee pour marquage)
│ ├── veza/
│ │ ├── veza_logotype.svg
│ │ └── veza_logo_complet.svg (si symbole propre)
│ ├── exports/
│ │ ├── png/ (512, 256, 128, 64, 32, 16)
│ │ ├── favicon/ (ico + png + svg)
│ │ └── og/ (1200x630 pour meta tags)
│ └── REGLES_UTILISATION_LOGO.md
├── palette/
│ ├── palette_talas.svg (planche de swatches)
│ ├── palette_talas.ase (Adobe Swatch Exchange, optionnel)
│ └── AUDIT_ACCESSIBILITE.md (ratios WCAG documentes)
├── typographie/
│ ├── fonts/ (fichiers woff2)
│ └── ECHELLE_TYPOGRAPHIQUE.md
├── icones/
│ ├── originaux/ (scans des dessins a la main)
│ ├── svg/ (icones vectorisees)
│ └── LISTE_ICONES.md
├── textures/
│ ├── washi.png (512x512, ~8 Ko)
│ └── washi_patine_1.png (variante pour patine elevee)
└── templates/
├── rs_avatar_1080x1080.svg
├── rs_banniere_instagram_1080x566.svg
├── rs_banniere_youtube_2560x1440.svg
├── rs_post_1080x1350.svg
├── rs_story_1080x1920.svg
├── rs_watermark.svg
├── og_image_1200x630.svg
└── template_specs_produit_1080x1080.svg
</code></pre>
<h3>11.2 Formats d'export</h3>
<table>
<thead>
<tr>
<th>Usage</th>
<th>Format</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Source vectorielle</td>
<td>SVG</td>
<td>Toujours conserver le SVG source</td>
</tr>
<tr>
<td>Web (logo, icones)</td>
<td>SVG inline ou PNG transparent</td>
<td>SVG prefere</td>
</tr>
<tr>
<td>Reseaux sociaux</td>
<td>PNG 72dpi</td>
<td>Tailles specifiques par plateforme</td>
</tr>
<tr>
<td>Print</td>
<td>SVG ou PDF vectoriel</td>
<td>300dpi minimum si rasterise</td>
</tr>
<tr>
<td>Favicon</td>
<td>ICO (16+32) + PNG (180 Apple Touch) + SVG</td>
<td>Multi-format</td>
</tr>
<tr>
<td>OG/meta</td>
<td>PNG 1200x630</td>
<td>Pour les previews de liens partages</td>
</tr>
</tbody>
</table>
<h3>11.3 Nommage des fichiers</h3>
<p>Convention : <code>{marque}_{type}_{variante}.{ext}</code></p>
<p>Exemples :
- <code>talas_symbole_noir.svg</code>
- <code>talas_logo_principal_blanc.svg</code>
- <code>veza_logotype_noir.svg</code>
- <code>talas_favicon_32x32.png</code></p>
<hr />
<h2>Voir aussi</h2>
<ul>
<li>[[05_EXPERIENCE_UTILISATEUR/DIRECTION_ARTISTIQUE_TALAS]] — Philosophie visuelle complete</li>
<li>[[05_EXPERIENCE_UTILISATEUR/IDENTITE_VISUELLE]] — Brief d'identite visuelle</li>
<li>[[05_EXPERIENCE_UTILISATEUR/SUMI_V3_SPECIFICATION]] — Spec technique du design system</li>
<li>[[05_EXPERIENCE_UTILISATEUR/GUIDE_CREATION_LOGO]] — Guide pratique de creation du logo</li>
<li>[[01_PILOTAGE/ROADMAP_IDENTITE_VISUELLE]] — Roadmap pas-a-pas (V1-V8)</li>
<li>[[07_CONTENUS_MARKETING/Storytelling/MANIFESTE_TALAS]] — Manifeste de marque</li>
<li>[[00_META/TALAS_IDENTITE_PROJET]] — Document d'identite du projet</li>
</ul>
<div class='page-break'></div>
<div class='doc-header'>
<h2>📄 CONCEPTS_INNOVANTS_VEZA.md</h2>
<div class='doc-path'>Chemin: 05_EXPERIENCE_UTILISATEUR/CONCEPTS_INNOVANTS_VEZA.md</div>
</div>
<h1>Concepts innovants — Veza</h1>
<blockquote>
<p>Specification detaillee des fonctionnalites qui n'existent nulle part ailleurs.
Ce document sert de reference pour l'implementation future.</p>
</blockquote>
<hr />
<h2>1. Systeme de patine de l'interface</h2>
<h3>Concept</h3>
<p>L'interface de Veza evolue visuellement avec le temps et l'usage, comme un objet
physique qui se patine. Chaque compte a une interface unique, forgee par son
histoire d'utilisation.</p>
<h3>Variables de patine</h3>
<pre><code>account_age_days → anciennete du compte en jours
total_play_time_hours → temps d'ecoute cumule
total_uploads → nombre de morceaux uploades
total_messages → nombre de messages envoyes
total_exchanges → nombre de trocs realises
zone_usage[zone_id] → nombre d'interactions par zone de l'interface
</code></pre>
<h3>Niveaux de patine</h3>
<table>
<thead>
<tr>
<th>Niveau</th>
<th>Condition</th>
<th>Effet visuel</th>
</tr>
</thead>
<tbody>
<tr>
<td>0 — Neuf</td>
<td>Compte &lt; 7 jours</td>
<td>Interface froide, surfaces lisses, pas de grain</td>
</tr>
<tr>
<td>1 — Rode</td>
<td>Compte &gt; 30 jours + 10h d'ecoute</td>
<td>Leger rechauffement des tons, grain subtil apparait</td>
</tr>
<tr>
<td>2 — Vecu</td>
<td>Compte &gt; 90 jours + 50h d'ecoute + 5 uploads</td>
<td>Tons cuivres plus profonds, textures plus riches, micro-details</td>
</tr>
<tr>
<td>3 — Patine</td>
<td>Compte &gt; 180 jours + 200h + 20 uploads</td>
<td>Palette pleinement rechauffee, usure visible sur les elements frequents</td>
</tr>
<tr>
<td>4 — Heritage</td>
<td>Compte &gt; 365 jours + 500h + activite communautaire</td>
<td>Patine complete, details uniques, effet "objet de famille"</td>
</tr>
</tbody>
</table>
<h3>Regles de patine par zone</h3>
<p>Chaque zone de l'interface se patine independamment selon son usage :
- Le player se patine le plus vite (element le plus utilise)
- La barre de navigation se patine selon les onglets frequentes
- Le profil se patine selon l'activite de publication
- Les zones peu visitees restent "neuves" — creant un contraste naturel</p>
<h3>Contraintes techniques</h3>
<ul>
<li>La patine est un calcul cote client, base sur des compteurs stockes dans le profil</li>
<li>Pas de requete supplementaire au serveur — les compteurs sont inclus dans le
payload d'authentification</li>
<li>Les changements visuels sont des CSS custom properties recalculees au login</li>
<li>Cout en performance : negligeable (quelques calculs au chargement, 0 impact ensuite)</li>
<li>La patine n'est jamais reversible ni achetable — elle est le reflet du temps reel</li>
</ul>
<h3>Ce que la patine N'EST PAS</h3>
<ul>
<li>Pas un systeme de niveaux / XP / gamification (pas de notification "vous avez
atteint le niveau 3 !")</li>
<li>Pas un badge ou un statut visible par les autres</li>
<li>Pas un avantage fonctionnel (pas de features debloquees)</li>
<li>Le changement est si progressif que l'utilisateur ne le "remarque" pas
consciemment — il le ressent</li>
</ul>
<hr />
<h2>2. Recherche comme exploration spatiale</h2>
<h3>Concept</h3>
<p>L'onglet de decouverte se transforme progressivement en un espace navigable
ou chaque artiste est un lieu a explorer, avec un paysage sonore en temps reel.</p>
<h3>Version 1 — Recherche enrichie (implementable maintenant)</h3>
<p>La recherche classique par tags/genres, mais avec une presentation visuelle
plus riche que la norme :
- Les resultats ne sont pas une liste verticale mais un arrangement spatial
(grille organique, pas de rangees uniformes)
- Chaque resultat a une micro-visualisation du son (petite waveform, couleur
dominante de la pochette)
- Le survol d'un resultat declenche un preview audio de 5 secondes
- Les resultats se regroupent visuellement par affinite (genres proches =
resultats proches dans l'espace)</p>
<h3>Version 2 — Carte des artistes (moyen terme)</h3>
<p>Un canvas 2D navigable :
- Chaque artiste est un point dans un espace 2D
- La position est determinee par les tags/genres (pas par popularite, pas par ML)
- L'utilisateur peut zoomer et se deplacer (pan/zoom fluide)
- En zoomant, les points deviennent des cartes avec pochette + nom + preview
- Un algorithme deterministe de placement (t-SNE ou UMAP applique aux vecteurs
de tags, pas de tracking comportemental)
- Le point de depart de l'exploration est determine par les genres preferes
de l'utilisateur (declares, pas devines)</p>
<h3>Version 3 — Paysage sonore (long terme)</h3>
<p>Un monde genere proceduralement :
- Chaque zone a une ambiance sonore (fond ambient genere a partir des morceaux
des artistes de la zone)
- Le terrain est genere a partir de la densite d'artistes (plus d'artistes =
zone plus "peuplee" visuellement)
- L'utilisateur se deplace librement (clavier/touch/souris)
- Decouvrir un artiste = s'approcher d'un point lumineux dans le paysage
- Le paysage est different pour chaque utilisateur (point de depart aleatoire,
mais la topologie est la meme)</p>
<h3>Version 4 — Monde persistant (vision finale)</h3>
<ul>
<li>Les artistes peuvent customiser leur "lieu" dans le monde</li>
<li>Les zones actives (artistes qui publient souvent) sont plus vivantes visuellement</li>
<li>Les collaborations entre artistes creent des chemins visibles entre leurs lieux</li>
<li>L'exploration a une memoire : les lieux deja visites sont marques (comme une
carte qu'on remplit au fur et a mesure)</li>
<li>Les nouveaux artistes apparaissent comme des "lumieres" dans des zones encore
non explorees</li>
</ul>
<h3>Contraintes ethiques (non-negociables)</h3>
<ul>
<li>Le placement n'est JAMAIS base sur la popularite, les revenus ou les paiements</li>
<li>Pas de "boost" payant pour apparaitre en meilleure position</li>
<li>Le classement est deterministe (memes tags = meme voisinage) et transparent</li>
<li>La recherche textuelle classique reste toujours accessible en 1 clic</li>
<li>L'exploration est optionnelle, jamais forcee</li>
</ul>
<hr />
<h2>3. Espaces artistes personnalisables</h2>
<h3>Concept</h3>
<p>Chaque artiste a un espace qu'il peut personnaliser visuellement, pas juste
un profil uniforme.</p>
<h3>Elements personnalisables</h3>
<table>
<thead>
<tr>
<th>Element</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr>
<td>Couleur d'ambiance</td>
<td>Palette libre ou presets</td>
</tr>
<tr>
<td>Image de fond</td>
<td>Upload libre</td>
</tr>
<tr>
<td>Disposition des blocs</td>
<td>Drag &amp; drop (morceaux, bio, visuels, liens, playlist)</td>
</tr>
<tr>
<td>Typographie</td>
<td>Choix parmi 5-8 familles (curees, pas illimitees)</td>
</tr>
<tr>
<td>Player</td>
<td>S'adapte automatiquement aux couleurs de l'espace</td>
</tr>
<tr>
<td>CSS custom (avance)</td>
<td>Zone d'injection CSS limitee pour les utilisateurs techniques</td>
</tr>
</tbody>
</table>
<h3>Themes communautaires</h3>
<ul>
<li>A terme : les utilisateurs peuvent creer des themes complets et les partager</li>
<li>Les themes sont echangeables (troc) ou offerts</li>
<li>Un theme populaire beneficie a son createur (reputation, pas argent)</li>
</ul>
<h3>Inspiration</h3>
<p>L'esprit MySpace (expression personnelle) avec l'execution de 2026
(controles elegants, preview en temps reel, pas de HTML brut).</p>
<hr />
<h2>4. Systeme de troc</h2>
<h3>Concept</h3>
<p>Un tableau d'offres et de demandes ou les competences sont une monnaie.</p>
<h3>Structure d'une annonce de troc</h3>
<pre><code>Titre: &quot;Je cherche un site web pour mon projet musical&quot;
J'offre: &quot;3 beats instrumentaux exclusifs, mix et master inclus&quot;
Je cherche: &quot;Un site one-page responsive avec player integre&quot;
Tags: #beatmaking #webdev #echange
Disponibilite: Flexible
</code></pre>
<h3>Mecanismes</h3>
<ul>
<li>Pas de monnaie interne, pas de points, pas de tokens</li>
<li>Annonce visible par toute la communaute</li>
<li>Les utilisateurs se contactent par le chat pour negocier</li>
<li>Une fois le troc realise, les deux parties le "confirment"</li>
<li>L'historique de trocs est visible sur le profil (reputation)</li>
<li>Pas de systeme d'evaluation (pas de note sur 5, pas d'etoiles — la reputation
est l'historique lui-meme)</li>
</ul>
<h3>Exemples de trocs possibles</h3>
<table>
<thead>
<tr>
<th>J'offre</th>
<th>Je cherche</th>
</tr>
</thead>
<tbody>
<tr>
<td>5 beats exclusifs</td>
<td>Un site web</td>
</tr>
<tr>
<td>Mix + master d'un EP</td>
<td>Un shooting photo</td>
</tr>
<tr>
<td>Design de pochette</td>
<td>3 instrumentales</td>
</tr>
<tr>
<td>Formation MAO (3 sessions)</td>
<td>Logo + charte graphique</td>
</tr>
<tr>
<td>Prise de son live</td>
<td>Montage video</td>
</tr>
<tr>
<td>Preset pack (Serum/Vital)</td>
<td>Enregistrement voix</td>
</tr>
</tbody>
</table>
<h3>Ce que ce n'est pas</h3>
<ul>
<li>Pas une marketplace avec des prix (ca c'est le module Shop)</li>
<li>Pas un systeme de faveurs comptabilisees</li>
<li>Pas un smart contract ou un engagement legal — c'est de la confiance communautaire</li>
<li>Le troc est informel et humain. Veza facilite la mise en relation, pas la transaction.</li>
</ul>
<hr />
<h2>5. Sites artistes (a terme)</h2>
<h3>Concept</h3>
<p>Chaque artiste peut avoir un mini-site public accessible en dehors de Veza,
a une URL propre (artiste.veza.xxx ou un domaine custom).</p>
<h3>Contenu du site artiste</h3>
<ul>
<li>Bio, photo, liens sociaux</li>
<li>Lecteur audio avec ses morceaux</li>
<li>Galerie (pochettes, photos, visuels)</li>
<li>Lien vers le profil Veza</li>
<li>Contact</li>
<li>Design personnalise (theme Veza applique)</li>
</ul>
<h3>Fonctionnement</h3>
<ul>
<li>Genere statiquement a partir du profil Veza (SSG)</li>
<li>Heberge sur les R720 (cout marginal : zero)</li>
<li>Le site se met a jour quand l'artiste modifie son profil Veza</li>
<li>Pas de publicite, pas de tracking</li>
<li>L'artiste peut brancher son propre domaine (CNAME)</li>
</ul>
<h3>Pourquoi c'est important</h3>
<ul>
<li>Un artiste independant n'a souvent pas de site web</li>
<li>Les plateformes (Spotify, SoundCloud) ne permettent pas la personnalisation</li>
<li>Avoir son propre site = legitimite, autonomie, professionnalisme</li>
<li>C'est un argument puissant pour rejoindre Veza (valeur tangible gratuite)</li>
</ul>
<hr />
<h2>6. UI qui ne gaspille pas</h2>
<h3>Philosophie</h3>
<p>L'app doit etre complete et vivante MAIS econome. Chaque octet charge, chaque
requete envoyee, chaque animation jouee doit servir l'experience.</p>
<h3>Contraintes techniques</h3>
<table>
<thead>
<tr>
<th>Metrique</th>
<th>Objectif</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bundle JS initial</td>
<td>&lt; 150 Ko gzip</td>
</tr>
<tr>
<td>First Contentful Paint</td>
<td>&lt; 1.5s</td>
</tr>
<tr>
<td>Time to Interactive</td>
<td>&lt; 2s</td>
</tr>
<tr>
<td>Requetes au chargement</td>
<td>&lt; 5</td>
</tr>
<tr>
<td>Animations simultanees</td>
<td>max 2</td>
</tr>
<tr>
<td>Images : format</td>
<td>WebP ou AVIF, lazy-loaded</td>
</tr>
<tr>
<td>Audio : streaming</td>
<td>HLS adaptatif (qualite selon la connexion)</td>
</tr>
<tr>
<td>Polices</td>
<td>2 max (variable fonts de preference)</td>
</tr>
</tbody>
</table>
<h3>Strategies</h3>
<ul>
<li><strong>Code splitting agressif</strong> : chaque page charge uniquement son code</li>
<li><strong>Prefetch intelligent</strong> : precharger la page la plus probable (pas tout)</li>
<li><strong>Mode hors-ligne</strong> : les morceaux recemment ecoutes sont caches localement</li>
<li><strong>Mode eco</strong> : un toggle qui desactive les textures, les animations et la patine
pour les machines/connexions modestes</li>
<li><strong>Pas de polyfill inutile</strong> : cibler les navigateurs modernes uniquement</li>
<li><strong>SVG &gt; PNG pour les icones</strong> (poids moindre, rendu net a toute taille)</li>
</ul>
<hr />
<h2>Ordre d'implementation suggere</h2>
<table>
<thead>
<tr>
<th>Priorite</th>
<th>Concept</th>
<th>Complexite</th>
<th>Impact</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Identite visuelle (palette, typo, textures, icones)</td>
<td>Moyenne</td>
<td>Fondamental</td>
</tr>
<tr>
<td>2</td>
<td>Player audio repense</td>
<td>Moyenne</td>
<td>Coeur de l'experience</td>
</tr>
<tr>
<td>3</td>
<td>Espaces artistes personnalisables</td>
<td>Moyenne</td>
<td>Differenciation forte</td>
</tr>
<tr>
<td>4</td>
<td>Systeme de troc</td>
<td>Faible</td>
<td>Communaute</td>
</tr>
<tr>
<td>5</td>
<td>Patine de l'interface (V1 : global, pas par zone)</td>
<td>Faible</td>
<td>Signature unique</td>
</tr>
<tr>
<td>6</td>
<td>Recherche enrichie (V1)</td>
<td>Moyenne</td>
<td>UX amelioree</td>
</tr>
<tr>
<td>7</td>
<td>Sites artistes statiques</td>
<td>Moyenne</td>
<td>Valeur ajoutee</td>
</tr>
<tr>
<td>8</td>
<td>Carte des artistes 2D (V2)</td>
<td>Elevee</td>
<td>Innovation</td>
</tr>
<tr>
<td>9</td>
<td>Patine par zone (V2)</td>
<td>Moyenne</td>
<td>Profondeur</td>
</tr>
<tr>
<td>10</td>
<td>Monde explorable (V3-V4)</td>
<td>Tres elevee</td>
<td>Vision long terme</td>
</tr>
</tbody>
</table>
<div class='page-break'></div>
<div class='doc-header'>
<h2>📄 DIRECTION_ARTISTIQUE_TALAS.md</h2>
<div class='doc-path'>Chemin: 05_EXPERIENCE_UTILISATEUR/DIRECTION_ARTISTIQUE_TALAS.md</div>
</div>
<h1>Direction artistique — Talas &amp; Veza</h1>
<blockquote>
<p>Ce document est la reference fondatrice de l'identite visuelle et de l'experience
utilisateur de Talas. Il ne decrit pas des composants UI. Il decrit une philosophie
visuelle, un langage, une matiere. Tout ce qui sera concu — app, site, packaging,
contenu — doit passer par ce filtre.</p>
<p>Direction choisie : <strong>lavis japonais interactif (sumi-e numerique)</strong>.
Derniere mise a jour : 27 mars 2026.</p>
</blockquote>
<hr />
<h2>Le probleme</h2>
<p>Depuis 2014 et l'avenement du Material Design, puis de Tailwind, puis des
design systems corporate, toutes les interfaces se ressemblent. Coins arrondis,
ombres douces, degrades pastel, typographies geometriques, icones lineaires.
C'est propre, c'est efficace, c'est oubliable.</p>
<p>Ce n'est pas ce que Talas est. Talas est un projet artisanal, brut, vivant.
L'interface doit l'etre aussi.</p>
<hr />
<h2>La direction : le lavis</h2>
<h3>Le lavis japonais (sumi-e) comme langage</h3>
<p>L'interface de Veza n'est pas une interface. C'est un <strong>lavis japonais interactif</strong>.</p>
<p>Le sumi-e est un art de la reduction : de l'encre noire, de l'eau, du papier.
Rien d'autre. La beaute vient du contraste entre le vide et la trace, entre
le controle et l'accident, entre la precision du geste et la diffusion de l'encre
dans le papier mouille.</p>
<p><strong>Ce n'est pas une metaphore. Ce n'est pas une inspiration. C'est la realite
visuelle de l'interface.</strong> L'ecran EST le papier washi. Les elements UI SONT
des traces d'encre. Les interactions SONT des gestes de pinceau. La couleur
— le cyan — EST la goutte de pigment dans l'eau noire.</p>
<h3>Pourquoi le lavis</h3>
<table>
<thead>
<tr>
<th>Propriete du lavis</th>
<th>Traduction dans l'interface</th>
</tr>
</thead>
<tbody>
<tr>
<td>L'encre se diffuse dans l'eau</td>
<td>Les elements ont des bords diffus, pas des bordures nettes</td>
</tr>
<tr>
<td>Le papier n'est jamais blanc pur</td>
<td>Les fonds ont une texture de washi, jamais #FFFFFF</td>
</tr>
<tr>
<td>Les couches d'encre creent de la profondeur</td>
<td>Les surfaces sont des layers semi-transparents empiles</td>
</tr>
<tr>
<td>Le vide est aussi important que le trait</td>
<td>L'espace negatif est un choix de design, pas du remplissage</td>
</tr>
<tr>
<td>Chaque geste est irreversible</td>
<td>Les interactions ont du poids — pas de undo visuel instantane</td>
</tr>
<tr>
<td>Le lavis change avec le temps (l'encre s'oxyde)</td>
<td>L'interface evolue, se patine, respire avec l'heure</td>
</tr>
<tr>
<td>Une seule touche de couleur suffit</td>
<td>Le cyan est rare et precieux — il n'apparait que la ou ca compte</td>
</tr>
</tbody>
</table>
<h3>Ce que le design system s'appelle</h3>
<p><strong>SUMI</strong> — le nom du design system est deja "encre" en japonais.
Ce n'etait pas un hasard. La direction etait la depuis le debut.</p>
<hr />
<h2>Principes fondateurs</h2>
<h3>1. L'encre et le papier</h3>
<p>Tout dans l'interface est soit de l'encre, soit du papier.</p>
<p><strong>Le papier (fonds, surfaces) :</strong>
- Jamais blanc pur. Toujours une texture de washi — grain subtil, ton chaud ou froid
selon l'heure
- Les surfaces sont des couches de papier empilees avec des opacites differentes
- Le "papier" respire — il change imperceptiblement au cours de la journee
(plus froid le matin, plus chaud le soir, plus sombre la nuit)
- Les surfaces elevees (cartes, modales) sont comme des feuilles posees sur
d'autres feuilles — pas des ombres portees nettes, mais des <strong>diffusions</strong> douces</p>
<p><strong>L'encre (texte, bordures, elements) :</strong>
- Le texte est de l'encre sur du papier — noir profond mais pas pur, avec une
micro-variation de densite
- Les bordures ne sont pas des lignes CSS nettes — elles sont des traits de pinceau,
legerement irreguliers, avec une opacite variable
- Les icones sont des gestes — dessineux comme des symboles calligraphiques, pas
comme des SVG generes par ordinateur
- Les waveforms audio sont des coups de pinceau horizontaux — le son EST l'encre</p>
<h3>2. Le cyan — la touche de couleur</h3>
<p>Dans un lavis traditionnel, une seule touche de couleur suffit a tout transformer.
Le cyan est cette touche.</p>
<p><strong>Regles du cyan :</strong>
- Le cyan est la SEULE couleur d'accent. Il apparait pour les liens, les CTA,
les focus states, les elements interactifs actifs
- Il n'est jamais sature a 100% dans les grandes surfaces — il est toujours
diffuse, comme du pigment qui s'etend dans l'eau
- Sur les elements petits (icones actives, points de notification, focus ring),
il peut etre plus vif
- Le cyan evoque l'eau — l'element qui transporte l'encre, qui donne vie au lavis
- Il contraste avec le noir/blanc ambiant comme un eclat de ciel dans un paysage
monochrome</p>
<p><strong>Les couleurs fonctionnelles (notifications, etats) :</strong>
- Rouge, jaune, vert existent mais en version <strong>pastel diffuse</strong> — comme des
pigments dilues dans beaucoup d'eau
- Elles apparaissent en lignes fines, en micro-points, en halos subtils —
jamais en aplats
- Elles ne rivalisent jamais avec le cyan — le cyan est le roi, elles sont
des murmures</p>
<h3>3. Les layers — la profondeur par diffusion</h3>
<p>L'interface est une pile de layers semi-transparents, comme des couches de
papier calque mouille.</p>
<p><strong>Principe :</strong>
- Chaque niveau d'elevation (fond → surface → carte → overlay → modale)
est une couche supplementaire avec sa propre opacite et son propre flou
- Les couches superieures ne sont pas "au-dessus" avec une ombre — elles sont
"devant" avec une diffusion (blur) croissante sur les couches en dessous
- Les transitions entre les couches sont des fondus tres doux, comme de l'encre
qui s'etend quand on ajoute de l'eau
- L'effet global : une profondeur atmospherique, pas geometrique. Comme un
paysage de montagne dans la brume — les plans lointains sont flous et clairs,
les plans proches sont nets et sombres</p>
<p><strong>Techniquement :</strong>
- <code>backdrop-filter: blur()</code> sur les surfaces elevees
- Fonds en <code>rgba()</code> avec opacites decroissantes
- Pas de <code>box-shadow</code> classique — des diffusions radiales (<code>background: radial-gradient</code>)
ou des <code>box-shadow</code> tres larges et tres diffus (spread 20-40px, opacite 3-8%)</p>
<h3>4. L'interface vivante</h3>
<p>L'interface n'est pas statique. Elle respire. Elle change. Elle vit.</p>
<p><strong>Le rythme circadien :</strong>
- La "temperature" du papier change avec l'heure :
- Aube (5h-8h) : papier legerement rose/chaud, encre plus douce
- Jour (8h-17h) : papier neutre, contraste maximal, cyan vif
- Crepuscule (17h-20h) : papier qui se rechauffe, encre plus dense
- Nuit (20h-5h) : papier sombre (presque noir), encre claire inversee,
cyan plus profond — le lavis s'inverse, comme un negatif
- Le changement est <strong>imperceptible en temps reel</strong> — on ne le voit pas
changer, on constate qu'il a change</p>
<p><strong>La patine :</strong>
- Avec le temps et l'usage, l'interface se "patine" comme un rouleau ancien
- Les tons se rechauffent progressivement
- Le grain du papier devient plus prononce
- Les traits deviennent plus riches (comme une encre qui a eu le temps de s'oxyder)
- Le cyan prend des nuances plus profondes (teal → petrol)
- L'utilisateur ne le remarque jamais — il le ressent</p>
<p><strong>Les micro-mouvements :</strong>
- Le papier de fond a un mouvement infime — comme une surface d'eau au repos,
avec des ondulations a peine visibles (via une animation CSS tres lente
sur un bruit de Perlin ou un svg animate)
- Les waveforms "respirent" meme au repos (micro-oscillation, comme un
VU-metre idle)
- L'encre des elements au survol "s'etend" legerement, comme si le pinceau
appuyait plus fort</p>
<h3>5. L'espace vide (ma) — le vide japonais</h3>
<p>Dans le sumi-e, le vide (ma, 間) est aussi important que le trait.
L'espace non-rempli n'est pas du "padding". C'est une decision.</p>
<p><strong>Regles du vide :</strong>
- Les pages ne sont jamais surchargees — si un element n'est pas necessaire,
il n'existe pas
- L'espacement entre les elements est genereux — les "traits" ont besoin
d'air pour exister
- Le fond (le papier) est toujours visible entre les elements — il ne
disparait jamais sous une grille compacte
- Le scroll est lent et delibere — pas de feed infini qui force la vitesse</p>
<hr />
<h2>Langage visuel</h2>
<h3>Materiaux de reference</h3>
<p>L'identite visuelle de Talas s'inspire du reel, mais un reel specifique :</p>
<table>
<thead>
<tr>
<th>Materiau</th>
<th>Ce qu'il evoque</th>
<th>Comment le traduire</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Papier washi</strong></td>
<td>Support, grain, chaleur, tradition</td>
<td>Texture de fond partout — jamais de surface lisse</td>
</tr>
<tr>
<td><strong>Encre sumi</strong></td>
<td>Trace, geste, permanence, profondeur</td>
<td>Texte, bordures, elements — toujours noir riche, jamais gris moyen</td>
</tr>
<tr>
<td><strong>Eau</strong></td>
<td>Diffusion, transport, vie, mouvement</td>
<td>Le cyan, les flous, les transitions douces</td>
</tr>
<tr>
<td><strong>Pierre a encre (suzuri)</strong></td>
<td>Outil, poids, ancrage</td>
<td>Les elements fixes (navigation, player) — lourds et stables</td>
</tr>
<tr>
<td><strong>Pinceau (fude)</strong></td>
<td>Geste, precision, irregularite</td>
<td>Les icones, les traits, les waveforms</td>
</tr>
<tr>
<td><strong>Aluminium brut</strong></td>
<td>Le micro lui-meme, le hardware</td>
<td>Les elements techniques (specs, prix, tableaux)</td>
</tr>
</tbody>
</table>
<h3>Ce que Talas N'EST PAS visuellement</h3>
<table>
<thead>
<tr>
<th>Esthetique</th>
<th>Pourquoi non</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material Design / Google</td>
<td>Generique, corporate, oubliable</td>
</tr>
<tr>
<td>Glassmorphism / Neumorphism</td>
<td>Tendance ephemere, pas de substance</td>
</tr>
<tr>
<td>Dark mode neon (Spotify, Discord)</td>
<td>Surexploite dans l'audio, pas de personnalite</td>
</tr>
<tr>
<td>Minimalisme Apple</td>
<td>Trop froid, trop parfait, nie l'artisanat</td>
</tr>
<tr>
<td>Retro/synthwave</td>
<td>Nostalgique sans raison, pas authentique</td>
</tr>
<tr>
<td>"Web3 aesthetic"</td>
<td>Contraire aux valeurs, vide de sens</td>
</tr>
<tr>
<td>Cuivre / steampunk / industriel</td>
<td>Trop litteral, pas assez singulier</td>
</tr>
</tbody>
</table>
<h3>Ce dont Talas peut s'inspirer (sans copier)</h3>
<table>
<thead>
<tr>
<th>Reference</th>
<th>Ce qu'il faut en retenir</th>
<th>Lien avec le lavis</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Teenage Engineering</strong></td>
<td>Un langage visuel si singulier qu'on le reconnait en 1 seconde</td>
<td>Talas doit etre reconnaissable de la meme facon — par le lavis</td>
</tr>
<tr>
<td><strong>Are.na</strong></td>
<td>La lenteur, le vide, le refus du bruit visuel</td>
<td>Le ma japonais — l'espace vide comme choix</td>
</tr>
<tr>
<td><strong>Bandcamp</strong></td>
<td>L'artiste au centre, chaque page est unique</td>
<td>Les espaces artistes personnalisables</td>
</tr>
<tr>
<td><strong>Muji</strong></td>
<td>L'absence de marque visible, la qualite silencieuse</td>
<td>Le lavis est un anti-branding — la beaute vient du silence</td>
</tr>
<tr>
<td><strong>Ableton Live</strong></td>
<td>Une interface qui ne ressemble a rien d'autre</td>
<td>Le courage d'etre radicalement different</td>
</tr>
<tr>
<td><strong>Nothing (telephone)</strong></td>
<td>Dot matrix, systeme visuel complet et proprietaire</td>
<td>Creer un langage visuel total, pas des touches decoratives</td>
</tr>
<tr>
<td><strong>Ukiyo-e / estampes</strong></td>
<td>La composition, les plans, la couleur rare dans le monochrome</td>
<td>Le cyan comme touche de couleur dans un monde N&amp;B</td>
</tr>
<tr>
<td><strong>Ryoji Ikeda</strong></td>
<td>Art visuel+son, minimalisme extreme, noir/blanc/data</td>
<td>L'esthetique data/son traduite en interface</td>
</tr>
</tbody>
</table>
<hr />
<h2>Typographie</h2>
<h3>Approche</h3>
<p>La typographie doit evoquer la calligraphie sans tomber dans le pastiche.
Pas de police "japonisante" kitsch. Des caracteres modernes avec du caractere.</p>
<h3>Choix valides</h3>
<p><strong>Pour les titres / la marque :</strong>
- <strong>Space Grotesk</strong> (Bold) — geometrique avec de la personnalite, letter-spacing large
- Titres en MAJUSCULES avec espacement — evoque les inscriptions sur pierre ou metal
- A terme : exploration d'une police custom avec des traits qui evoquent le pinceau</p>
<p><strong>Pour le corps de texte :</strong>
- <strong>Inter</strong> (Regular, Semi-Bold) — lisible, neutre mais pas anonyme, variable font
- Interligne genereux (1.6-1.8) — le texte respire comme un poeme</p>
<p><strong>Pour le code / les specs techniques :</strong>
- <strong>JetBrains Mono</strong> — ligatures, technique, precision</p>
<h3>Regles typographiques</h3>
<ul>
<li>Titres en MAJUSCULES avec letter-spacing 0.1-0.15em</li>
<li>Corps en casse normale, interligne genereux</li>
<li>Le texte n'est jamais colle aux bords — il flotte dans le papier</li>
<li>Les specs techniques en monospace (coherence avec l'univers circuit/code)</li>
<li>Le texte secondaire est en gris doux, pas en gris moyen — il s'efface comme
un lavis dilue</li>
</ul>
<hr />
<h2>Palette</h2>
<h3>Principe</h3>
<p>La palette est celle d'un lavis : noir, blanc, les gris entre les deux,
et une seule couleur vive — le cyan.</p>
<h3>Palette de base</h3>
<table>
<thead>
<tr>
<th>Role</th>
<th>Couleur</th>
<th>Code</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Papier (fond)</strong></td>
<td>Blanc casse chaud</td>
<td>#F2EDE6</td>
<td>Jamais blanc pur — c'est du washi</td>
</tr>
<tr>
<td><strong>Papier sombre (nuit)</strong></td>
<td>Noir encre</td>
<td>#0D0D0F</td>
<td>Pas un noir pur — un noir d'encre profond</td>
</tr>
<tr>
<td><strong>Encre (texte)</strong></td>
<td>Noir sumi</td>
<td>#1A1A1E</td>
<td>Sur fond clair — dense mais pas dur</td>
</tr>
<tr>
<td><strong>Encre claire (nuit)</strong></td>
<td>Blanc creme</td>
<td>#E8E3DB</td>
<td>Sur fond sombre — doux, pas criard</td>
</tr>
<tr>
<td><strong>Encre diluee</strong></td>
<td>Gris chaud</td>
<td>#9A958D</td>
<td>Texte secondaire, bordures legeres</td>
</tr>
<tr>
<td><strong>Lavis (surface)</strong></td>
<td>Gris diffus</td>
<td>rgba(26,26,30, 0.04-0.12)</td>
<td>Layers d'encre a differentes dilutions</td>
</tr>
<tr>
<td><strong>Cyan (accent)</strong></td>
<td>Bleu cyan</td>
<td>#0098B5</td>
<td>La touche de couleur — vive sur petit, diffuse sur grand</td>
</tr>
<tr>
<td><strong>Cyan hover</strong></td>
<td>Cyan clair</td>
<td>#00B4D8</td>
<td>Interaction — un eclat dans l'eau</td>
</tr>
<tr>
<td><strong>Cyan muted</strong></td>
<td>Cyan dilue</td>
<td>rgba(0, 152, 181, 0.15)</td>
<td>Focus rings, backgrounds subtils</td>
</tr>
<tr>
<td><strong>Cyan profond (nuit)</strong></td>
<td>Teal sombre</td>
<td>#006B7F</td>
<td>Le cyan la nuit — plus profond, plus calme</td>
</tr>
</tbody>
</table>
<h3>Couleurs fonctionnelles (pastel diffuse)</h3>
<p>Ces couleurs apparaissent rarement et toujours en version diluee :</p>
<table>
<thead>
<tr>
<th>Role</th>
<th>Couleur</th>
<th>Code</th>
<th>Utilisation</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Succes</strong></td>
<td>Vert sauge dilue</td>
<td>rgba(90, 140, 100, 0.60)</td>
<td>Ligne fine, petit point, halo subtil</td>
</tr>
<tr>
<td><strong>Erreur</strong></td>
<td>Rouge brique dilue</td>
<td>rgba(180, 80, 70, 0.55)</td>
<td>Trait fin sous un champ, bordure legere</td>
</tr>
<tr>
<td><strong>Warning</strong></td>
<td>Ambre dilue</td>
<td>rgba(190, 150, 60, 0.55)</td>
<td>Point discret, texte secondaire</td>
</tr>
<tr>
<td><strong>Info</strong></td>
<td>Le cyan lui-meme</td>
<td>#0098B5</td>
<td>Coherent avec l'accent</td>
</tr>
</tbody>
</table>
<p><strong>Regles des couleurs fonctionnelles :</strong>
- Jamais en aplat (pas de fond rouge plein pour une erreur)
- Toujours en ligne fine, point, bordure, ou halo diffus
- L'opacite ne depasse jamais 60% — elles sont toujours "diluees"
- Elles ne rivalisent jamais avec le cyan — si le cyan est present au meme
endroit, la couleur fonctionnelle passe en gris + icone</p>
<h3>Pourquoi le cyan</h3>
<ul>
<li>Le cyan est la couleur de l'eau — et l'eau est ce qui donne vie au lavis</li>
<li>Le cyan contraste maximalement avec le noir/blanc (il est pile entre le bleu
et le vert — ni l'un ni l'autre, singulier)</li>
<li>Le cyan evoque aussi le signal electronique (oscilloscope, LED d'indication)</li>
<li>C'est rare comme couleur d'accent dans les apps — differenciation immediate</li>
<li>En petite quantite sur un fond monochrome, le cyan est electrique — il attire
le regard sans agresser</li>
</ul>
<h3>Palette de nuit (inversion)</h3>
<p>La nuit (20h-5h), le lavis s'inverse : le papier devient sombre, l'encre
devient claire. Le cyan s'approfondit.</p>
<pre><code>Jour : papier clair (#F2EDE6) + encre sombre (#1A1A1E) + cyan vif (#0098B5)
Nuit : papier sombre (#0D0D0F) + encre claire (#E8E3DB) + cyan profond (#006B7F)
</code></pre>
<p>La transition entre les deux est un fondu de 30 minutes, imperceptible.</p>
<hr />
<h2>Textures et surfaces</h2>
<h3>Le papier washi numerique</h3>
<p>Chaque fond porte la texture du papier. Pas un flat color.</p>
<p><strong>Implementation :</strong>
- Un fichier <code>washi.png</code> (512x512, ~8 Ko) — photo d'un vrai papier washi,
desaturee, avec le grain visible
- Applique en <code>background-image: repeat</code> sur le body, en mode <code>soft-light</code>
ou <code>overlay</code> a tres faible opacite (3-6%)
- Le grain change avec la patine : un compte jeune a un papier plus lisse,
un compte ancien a un papier plus fibreux (2-3 variantes de texture)</p>
<h3>Les couches d'encre (layers)</h3>
<p>Les surfaces elevees sont des couches d'encre diluee posees sur le papier :</p>
<table>
<thead>
<tr>
<th>Elevation</th>
<th>Opacite encre</th>
<th>Blur du backdrop</th>
<th>Effet</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fond (papier)</td>
<td>0%</td>
<td>—</td>
<td>Le papier brut</td>
</tr>
<tr>
<td>Surface (carte)</td>
<td>4-8%</td>
<td>8px</td>
<td>Un voile d'encre tres leger</td>
</tr>
<tr>
<td>Overlay (dropdown)</td>
<td>8-12%</td>
<td>16px</td>
<td>Une couche plus dense</td>
</tr>
<tr>
<td>Modale</td>
<td>12-20%</td>
<td>24px</td>
<td>Une zone nettement marquee</td>
</tr>
<tr>
<td>Player</td>
<td>20-30%</td>
<td>32px</td>
<td>L'element le plus "encre" — le plus present</td>
</tr>
</tbody>
</table>
<h3>L'eau — les effets de diffusion</h3>
<p>L'eau est ce qui donne au lavis ses bords doux, ses fondus, ses accidents.</p>
<p><strong>Dans l'interface :</strong>
- Les bordures ne sont pas des <code>border: 1px solid</code> — elles sont des <code>box-shadow</code>
tres diffus (spread 0, blur 4-8px, opacite 5-10%)
- Les hover states font "s'etendre" l'element legerement (comme une goutte
d'eau qui s'elargit) — <code>transform: scale(1.01)</code> + ombre qui s'elargit
- Les transitions sont fluides et organiques — pas de timing mecanique,
des courbes qui evoquent le mouvement de l'eau
- Les waveforms audio : pas des barres rectangulaires — des traits de pinceau
avec des bords adoucis (<code>border-radius: 50%</code> + opacite variable)</p>
<hr />
<h2>Animations et interactions</h2>
<h3>Philosophie : le poids de l'eau</h3>
<p>Les elements de l'interface ont le poids de ce qu'ils representent
dans le lavis :</p>
<table>
<thead>
<tr>
<th>Poids</th>
<th>Elements</th>
<th>Metaphore lavis</th>
<th>Duree</th>
<th>Easing</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Goutte</strong></td>
<td>Tooltips, badges</td>
<td>Goutte d'encre qui tombe</td>
<td>100ms</td>
<td>ease-out</td>
</tr>
<tr>
<td><strong>Trait</strong></td>
<td>Boutons, icones, liens</td>
<td>Trait de pinceau rapide</td>
<td>150ms</td>
<td>ease-out avec rebond leger</td>
</tr>
<tr>
<td><strong>Lavis</strong></td>
<td>Cards, dropdowns</td>
<td>Encre qui s'etend dans l'eau</td>
<td>250ms</td>
<td>cubic-bezier(0.25, 0.8, 0.25, 1)</td>
</tr>
<tr>
<td><strong>Vague</strong></td>
<td>Modales, sidebar, panneaux</td>
<td>Vague lente sur papier mouille</td>
<td>350ms</td>
<td>cubic-bezier(0.16, 1, 0.3, 1)</td>
</tr>
<tr>
<td><strong>Maree</strong></td>
<td>Navigation, player</td>
<td>Le mouvement de fond de l'ocean</td>
<td>450ms</td>
<td>cubic-bezier(0.33, 1, 0.68, 1)</td>
</tr>
</tbody>
</table>
<h3>Les micro-mouvements du fond</h3>
<p>Le fond n'est pas statique. Le papier "vit" :
- Une animation CSS tres lente (60-120s par cycle) deplace subtilement
la texture de fond (<code>background-position</code> ou <code>transform: translate</code>)
de quelques pixels — comme la surface de l'eau au repos
- L'amplitude est infime (2-4px de deplacement) — invisible consciemment,
ressenti inconsciemment
- En mode eco : desactive</p>
<h3>Les transitions de page</h3>
<ul>
<li>La page sortante se "dissout" (opacite → 0 en 150ms, comme l'encre qui
seche et disparait)</li>
<li>La page entrante "apparait" par couches (fond → elements principaux →
details, echelonne sur 200ms) — comme un lavis qui se revele couche
par couche</li>
<li>Pas de slide lateraux — des fondus verticaux subtils (translateY 4-8px)</li>
</ul>
<hr />
<h2>Le player audio</h2>
<p>Le player est la pierre a encre (suzuri) de l'interface — l'objet le plus
lourd, le plus present, le plus ancre.</p>
<p><strong>Vision :</strong>
- Le player est une bande horizontale en bas de l'ecran — la surface la plus
"encree" (la plus opaque, la plus dense)
- La waveform est le coeur visuel — elle ressemble a un trait de pinceau
horizontal, avec des variations d'epaisseur et d'opacite
- Les barres de la waveform ne sont pas rectangulaires — elles ont des bords
arrondis et une opacite variable, comme des traits d'encre poses cote a cote
- La partie jouee est en encre dense, la partie a jouer est en lavis dilue
- Le controle de volume est un trait vertical avec un point (comme un trait
de pinceau interrompu par une goutte) — pas un slider classique
- Le player porte la patine la plus visible — c'est l'objet qui "vieillit"
le plus vite
- Quand il est en mode expanded (vue immersive), le lavis du fond s'intensifie
— le papier s'assombrit, l'encre de la waveform s'elargit, le cyan s'illumine</p>
<hr />
<h2>Iconographie</h2>
<h3>Approche : le geste plutot que le trait</h3>
<p>Les icones ne sont pas des SVG generes par ordinateur. Elles sont des
<strong>gestes dessines</strong> — comme des caracteres calligraphiques simplifies.</p>
<p><strong>Contraintes :</strong>
- Dessinees a la main (papier ou tablette), puis vectorisees
- L'irregularite du trace est preservee (pas de lissage automatique)
- Epaisseur de trait : 2px, variable (plus epaisse au debut du geste,
plus fine a la fin — comme un vrai trait de pinceau)
- Monochrome (<code>currentColor</code>)
- 24x24 viewBox
- Maximum 30 icones — chacune est unique et dessinee specifiquement</p>
<p><strong>Correspondances :</strong></p>
<table>
<thead>
<tr>
<th>Fonction</th>
<th>Metaphore</th>
<th>Description du geste</th>
</tr>
</thead>
<tbody>
<tr>
<td>Play</td>
<td>Trait de pinceau diagonal</td>
<td>Un triangle forme par un seul trait rapide</td>
</tr>
<tr>
<td>Pause</td>
<td>Deux traits verticaux</td>
<td>Comme deux colonnes d'encre</td>
</tr>
<tr>
<td>Recherche</td>
<td>Cercle ouvert</td>
<td>Une enso (cercle zen) non ferme</td>
</tr>
<tr>
<td>Profil</td>
<td>Capsule de micro</td>
<td>Forme ovale avec un trait de base</td>
</tr>
<tr>
<td>Chat</td>
<td>Onde sonore</td>
<td>Trois arcs concentriques</td>
</tr>
<tr>
<td>Upload</td>
<td>Trait ascendant</td>
<td>Un trait qui monte avec une goutte au sommet</td>
</tr>
<tr>
<td>Settings</td>
<td>Cercle avec trait</td>
<td>Un ensui (roue) simplifie</td>
</tr>
<tr>
<td>Home</td>
<td>Triangle inverse</td>
<td>Symbole de montagne minimaliste</td>
</tr>
</tbody>
</table>
<hr />
<h2>Packaging (physique)</h2>
<p>Le packaging du micro prolonge le lavis dans le monde physique.</p>
<p><strong>Direction :</strong>
- Boite en carton kraft non blanchi — la surface EST le "papier" du lavis
- Impression minimaliste en noir : le logo seul, comme un sceau (hanko)
tamponne sur le papier
- Le livret de reparation est imprime sur papier recycle, avec des schemas
techniques dessines dans le style trait de pinceau (pas des rendus 3D)
- Un sticker logo monochrome (encre noire sur fond transparent ou papier)
- Le numero de serie est frappe a froid (pas imprime) — comme un sceau
- A l'interieur : le micro dans une pochette en tissu noir avec le logo
brode en cyan — la seule touche de couleur, comme dans le lavis</p>
<hr />
<h2>Le logo</h2>
<h3>Direction validee : logotype + symbole separes</h3>
<p><strong>Le logotype :</strong>
- Le mot "TALAS" dans la typo choisie (Space Grotesk Bold ou custom)
- En MAJUSCULES, letter-spacing large
- Fonctionne seul
- Inspiration : la sobriete d'une inscription sur pierre ou metal</p>
<p><strong>Le symbole :</strong>
- Un geste unique, comme un caractere calligraphique invente
- Doit evoquer a la fois l'onde sonore ET le geste du pinceau
- Doit fonctionner en 16x16 (favicon), en gravure sur metal, en broderie
sur tissu
- Dessinee a la main, vectorisee en conservant l'irregularite
- Monochrome — jamais en couleur</p>
<p><strong>Versions necessaires :</strong>
- [ ] Logotype seul (horizontal)
- [ ] Symbole seul (carre)
- [ ] Logotype + symbole (horizontal et vertical)
- [ ] Favicon (symbole simplifie, 16x16 et 32x32)
- [ ] Version monochrome noir sur blanc
- [ ] Version monochrome blanc sur noir
- [ ] Version pour gravure/marquage metal
- [ ] Version pour broderie (simplifie pour le fil)</p>
<hr />
<h2>Mot de la fin</h2>
<p>Aucune application au monde ne ressemble a un lavis japonais interactif.
C'est ca, la direction. Pas une app audio avec des touches japonaises.
Un lavis qui se trouve etre une app.</p>
<p>Chaque decision de design doit etre passee au filtre de cette question :
<strong>est-ce que ca pourrait exister dans un lavis ?</strong>
Si non, c'est le mauvais choix.</p>
<hr />
<h2>Voir aussi</h2>
<ul>
<li>[[05_EXPERIENCE_UTILISATEUR/CHARTE_GRAPHIQUE_TALAS]] — Charte graphique complete (regles d'application)</li>
<li>[[05_EXPERIENCE_UTILISATEUR/GUIDE_CREATION_LOGO]] — Guide pratique de creation du logo</li>
<li>[[05_EXPERIENCE_UTILISATEUR/SUMI_V3_SPECIFICATION]] — Design system SUMI v3 (implementation technique)</li>
<li>[[05_EXPERIENCE_UTILISATEUR/IDENTITE_VISUELLE]] — Brief d'identite visuelle (logo, palette, typos)</li>
<li>[[05_EXPERIENCE_UTILISATEUR/CONCEPTS_INNOVANTS_VEZA]] — Concepts innovants UX (patine, recherche, troc)</li>
<li>[[07_CONTENUS_MARKETING/STRATEGIE_CONTENU]] — Strategie de contenu (style RS)</li>
<li>[[07_CONTENUS_MARKETING/Storytelling/MANIFESTE_TALAS]] — Manifeste Talas</li>
<li>[[00_META/TALAS_IDENTITE_PROJET]] — Valeurs et identite du projet</li>
</ul>
<div class='page-break'></div>
<div class='doc-header'>
<h2>📄 README.md</h2>
<div class='doc-path'>Chemin: 05_EXPERIENCE_UTILISATEUR/Design_System/README.md</div>
</div>
<h1>Design System Talas</h1>
<p>Ce dossier contient le <strong>design system centralisé</strong> de Talas : composants, tokens, couleurs, typographie, icônes, règles d’utilisation.</p>
<h2>Objectifs :</h2>
<ul>
<li>Unifier l’apparence et le comportement des interfaces Talas.</li>
<li>Permettre la réutilisation de composants entre les applications (Shop, Community, Personal).</li>
<li>Faciliter la collaboration entre designers et développeurs.</li>
</ul>
<h2>Contenu recommandé :</h2>
<ul>
<li><code>components/</code> : boutons, cartes, modales, alertes…</li>
<li><code>tokens/</code> : couleurs, espacement, radius, ombrage (Figma + CSS vars)</li>
<li><code>typography/</code> : hiérarchie des titres, lisibilité, code</li>
<li><code>icons/</code> : pack SVG ou librairie utilisée</li>
<li><code>principes/</code> : règles de composition, exemple d'usage</li>
</ul>
<blockquote>
<p>Ce dossier est le socle de toute l’expérience visuelle Talas.</p>
</blockquote>
<div class='page-break'></div>
<div class='doc-header'>
<h2>📄 README.md</h2>
<div class='doc-path'>Chemin: 05_EXPERIENCE_UTILISATEUR/Figma_Prototypes/README.md</div>
</div>
<h1>Prototypes &amp; Maquettes (Figma)</h1>
<p>Ce dossier contient les <strong>maquettes haute fidélité, prototypes interactifs et wireframes</strong> réalisés sous Figma.</p>
<h2>Objectifs :</h2>
<ul>
<li>Visualiser les interfaces avant implémentation.</li>
<li>Tester les flux avec les utilisateurs en amont.</li>
<li>Documenter l’évolution des parcours.</li>
</ul>
<h2>Contenu recommandé :</h2>
<ul>
<li><code>prototypes/</code> : parcours utilisateur cliquables</li>
<li><code>pages/</code> : accueil, produit, panier, dashboard, chat</li>
<li><code>archivés/</code> : versions anciennes pour comparaison</li>
<li><code>présentations/</code> : fichiers pour feedback d’équipe</li>
</ul>
<blockquote>
<p>Tu peux intégrer des liens publics Figma ou exporter en PDF pour archivage.</p>
</blockquote>
<div class='page-break'></div>
<div class='doc-header'>
<h2>📄 README.md</h2>
<div class='doc-path'>Chemin: 05_EXPERIENCE_UTILISATEUR/Flux_Utilisateurs/README.md</div>
</div>
<h1>Flux &amp; Parcours Utilisateurs</h1>
<p>Ce dossier contient la <strong>cartographie des parcours types</strong> pour chaque profil utilisateur : acheteur, créateur, ambassadeur, contributeur.</p>
<h2>Objectifs :</h2>
<ul>
<li>Identifier les points de friction, leviers d’engagement, et moments clés.</li>
<li>Clarifier l’expérience complète cross-apps (Shop, Community, Personal).</li>
<li>Guider les choix d’UX, UI et fonctionnalités prioritaires.</li>
</ul>
<h2>Contenu recommandé :</h2>
<ul>
<li><code>journeys/</code> : onboarding, commande, partage, troc</li>
<li><code>personas.md</code> : profils types, objectifs, attentes</li>
<li><code>usecases.md</code> : scénarios détaillés</li>
<li><code>flux_graphs.drawio</code> ou <code>.fig</code> : diagrammes</li>
</ul>
<blockquote>
<p>Tu peux croiser ces données avec les retours <code>Tests_Utilisateurs/</code>.</p>
</blockquote>
<div class='page-break'></div>
<div class='doc-header'>
<h2>📄 GUIDE_CREATION_LOGO.md</h2>
<div class='doc-path'>Chemin: 05_EXPERIENCE_UTILISATEUR/GUIDE_CREATION_LOGO.md</div>
</div>
<h1>Guide pratique de creation du logo — Talas &amp; Veza</h1>
<blockquote>
<p>Comment dessiner, scanner, vectoriser et decliner le logo.
Guide pour une personne seule, avec des outils gratuits.
Prerequis : avoir lu [[DIRECTION_ARTISTIQUE_TALAS]] et [[IDENTITE_VISUELLE]].
Derniere mise a jour : 2 avril 2026.</p>
</blockquote>
<hr />
<h2>1. Ce que le logo doit etre (recap)</h2>
<p>Avant de dessiner quoi que ce soit, avoir ces criteres en tete :</p>
<h3>Le symbole Talas</h3>
<ul>
<li>Un <strong>geste unique</strong>, comme un caractere calligraphique invente</li>
<li>Evoque a la fois <strong>l'onde sonore</strong> et <strong>le trait de pinceau</strong></li>
<li><strong>Irregulier</strong> — les imperfections sont intentionnelles (wabi-sabi)</li>
<li><strong>Monochrome</strong> — jamais de couleur</li>
<li>Fonctionne en <strong>16x16 px</strong> (favicon) comme en grand (affiche)</li>
<li>Fonctionne en <strong>gravure laser sur aluminium</strong>, en <strong>serigraphie</strong>, en <strong>broderie</strong></li>
<li>Reconnaissable <strong>sans texte</strong></li>
</ul>
<h3>Le logotype TALAS</h3>
<ul>
<li>Le mot TALAS en <strong>Space Grotesk Bold</strong>, MAJUSCULES, letter-spacing ~0.12em</li>
<li>Sobre, comme une inscription gravee dans la pierre</li>
<li>Fonctionne <strong>sans le symbole</strong></li>
</ul>
<h3>Le test final</h3>
<p>Le logo est bon si et seulement si il passe <strong>tous</strong> ces tests :</p>
<ul>
<li>[ ] Lisible en favicon (16x16 px) ?</li>
<li>[ ] Reconnaissable en monochrome pur (noir sur blanc, blanc sur noir) ?</li>
<li>[ ] Le symbole fonctionne seul (sans texte) ?</li>
<li>[ ] Le texte fonctionne seul (sans symbole) ?</li>
<li>[ ] Coherent avec l'univers sumi-e / papier washi ?</li>
<li>[ ] Pas de confusion avec un logo existant dans l'audio ?</li>
<li>[ ] Fonctionne imagine grave sur du metal ?</li>
<li>[ ] Fonctionne imagine brode sur du tissu (traits assez epais) ?</li>
</ul>
<hr />
<h2>2. Materiel et outils</h2>
<h3>2.1 Pour dessiner a la main (recommande)</h3>
<p>Le logo est un <strong>geste de pinceau</strong>. Le dessiner a la main est coherent avec
l'identite et produit naturellement l'irregularite recherchee.</p>
<p><strong>Materiel minimal :</strong></p>
<table>
<thead>
<tr>
<th>Outil</th>
<th>Ou le trouver</th>
<th>Budget</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Feutre pinceau</strong> (Pentel Sign Brush, Tombow Fudenosuke, ou Pilot Futayaku)</td>
<td>Papeterie, Amazon</td>
<td>3-8 EUR</td>
</tr>
<tr>
<td><strong>Papier blanc lisse</strong> (A4 standard, pas trop texturise)</td>
<td>N'importe ou</td>
<td>0 EUR</td>
</tr>
<tr>
<td><strong>Feutre noir fin</strong> (Pigma Micron 05 ou Staedtler Pigment Liner)</td>
<td>Papeterie</td>
<td>3 EUR</td>
</tr>
</tbody>
</table>
<p><strong>Materiel avance (si disponible) :</strong></p>
<table>
<thead>
<tr>
<th>Outil</th>
<th>Pourquoi</th>
<th>Budget</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Encre de Chine</strong> (Sennelier, Winsor &amp; Newton, ou encre sumi japonaise)</td>
<td>Le vrai sumi-e — diffusion authentique</td>
<td>5-12 EUR</td>
</tr>
<tr>
<td><strong>Pinceau calligraphie</strong> (fude) — taille moyenne</td>
<td>Trait avec variation d'epaisseur naturelle</td>
<td>5-15 EUR</td>
</tr>
<tr>
<td><strong>Papier aquarelle</strong> (grain fin, 200-300 g/m2)</td>
<td>Absorbe l'encre sans gondoler</td>
<td>5-10 EUR</td>
</tr>
<tr>
<td><strong>Pierre a encre</strong> (suzuri) + baton d'encre</td>
<td>L'experience complete — broyer son encre</td>
<td>15-30 EUR</td>
</tr>
</tbody>
</table>
<p><strong>Tu n'as pas besoin de tout ca.</strong> Un feutre pinceau a 5 EUR et du papier A4
suffisent pour produire un excellent logo. L'encre de Chine ajoute de
l'authenticite mais n'est pas indispensable.</p>
<h3>2.2 Pour numeriser</h3>
<table>
<thead>
<tr>
<th>Outil</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Scanner</strong> (si tu en as un)</td>
<td>600 DPI minimum, niveaux de gris ou N&amp;B</td>
</tr>
<tr>
<td><strong>Smartphone</strong> (alternative)</td>
<td>Photo en lumiere naturelle, bien cadree, sans ombre</td>
</tr>
<tr>
<td><strong>Application de scan</strong> (Adobe Scan, Microsoft Lens, ou Open Note Scanner)</td>
<td>Corrige la perspective et augmente le contraste automatiquement</td>
</tr>
</tbody>
</table>
<h3>2.3 Pour vectoriser et decliner</h3>
<table>
<thead>
<tr>
<th>Outil</th>
<th>Usage</th>
<th>Cout</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Inkscape</strong></td>
<td>Vectorisation, assemblage, declinaisons, export SVG</td>
<td>Gratuit (open-source)</td>
</tr>
<tr>
<td><strong>GIMP</strong></td>
<td>Nettoyage du scan (niveaux, contraste, crop)</td>
<td>Gratuit (open-source)</td>
</tr>
<tr>
<td><strong>Krita</strong> (optionnel)</td>
<td>Dessin tablette si tu en as une</td>
<td>Gratuit (open-source)</td>
</tr>
<tr>
<td><strong>Figma</strong> (optionnel)</td>
<td>Mockups rapides pour tester en contexte</td>
<td>Gratuit (usage perso)</td>
</tr>
</tbody>
</table>
<p><strong>Inkscape est l'outil principal.</strong> Il est gratuit, open-source, et coherent
avec les valeurs du projet. Pas besoin d'Adobe Illustrator.</p>
<hr />
<h2>3. Phase 1 — Recherche de references (1-2 heures)</h2>
<h3>3.1 Constituer un moodboard</h3>
<p>Avant de dessiner, nourrir l'oeil. Rassembler 15-20 images de reference.</p>
<p><strong>Ou chercher :</strong>
- Pinterest : "sumi-e logo", "japanese ink branding", "minimal audio logo",
"calligraphy symbol", "enso logo", "brush stroke mark"
- Dribbble : memes recherches
- Are.na : channels "branding", "japanese design", "monochrome"
- Google Images : "teenage engineering logo", "aiaiai logo", "ableton logo",
"native instruments logo", "nothing phone logo"</p>
<p><strong>Ce qu'il faut collecter :</strong>
- Des logos qui fonctionnent en monochrome et en petit
- Des gestes de pinceau (enso, traits, eclaboussures controlees)
- Des exemples de logotypes en geometrique bold + majuscules
- Des exemples de logos graves ou serigraphies sur metal
- Des exemples de logos brodes</p>
<p><strong>Sauvegarder dans :</strong></p>
<pre><code>05_EXPERIENCE_UTILISATEUR/Identite_Visuelle/logo/references/
</code></pre>
<h3>3.2 Etudier les references specifiques</h3>
<p>Prendre 10 minutes pour regarder de pres chacun de ces logos et noter
ce qui fonctionne :</p>
<table>
<thead>
<tr>
<th>Reference</th>
<th>Ce qu'il faut en retenir</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Teenage Engineering</strong></td>
<td>Systeme visuel total, reconnaissable en 1 seconde</td>
</tr>
<tr>
<td><strong>Aiaiai</strong></td>
<td>Logotype pur, pas de symbole, minimalisme radical</td>
</tr>
<tr>
<td><strong>Ableton</strong></td>
<td>Logotype simple, pas de chichi, sérieux sans etre froid</td>
</tr>
<tr>
<td><strong>Native Instruments</strong></td>
<td>Symbole fort (NI imbriques), fonctionne en petit</td>
</tr>
<tr>
<td><strong>Nothing</strong></td>
<td>Dot matrix, langage proprietaire, anti-generic</td>
</tr>
<tr>
<td><strong>Muji</strong></td>
<td>L'absence de marque visible = force tranquille</td>
</tr>
<tr>
<td><strong>Enso traditionnel</strong></td>
<td>Cercle ouvert, pinceau, imperfection = beaute</td>
</tr>
</tbody>
</table>
<hr />
<h2>4. Phase 2 — Croquis rapides (2-3 heures)</h2>
<h3>4.1 Les 6 directions a explorer</h3>
<p>Explorer chaque direction pendant 20-30 minutes. Dessiner vite, ne pas reflechir
trop. Le but est la quantite, pas la qualite. 2-3 croquis par direction minimum.</p>
<h4>Direction A — Logotype brut</h4>
<p>Le mot "TALAS" suffit. Pas de symbole. Jouer sur la typographie.</p>
<ul>
<li>Ecrire TALAS en capitales avec differents outils (feutre, pinceau, stylo)</li>
<li>Essayer : le A sans barre horizontale (triangle ouvert — evoque une onde)</li>
<li>Essayer : ligature T-A ou A-S</li>
<li>Essayer : le mot entier en un seul geste de pinceau (sans lever la main)</li>
<li>Essayer : lettres espacees tres largement</li>
</ul>
<p><strong>Force :</strong> simplicite absolue, pas de risque de symbole "deja vu"
<strong>Faiblesse :</strong> pas de symbole pour favicon/avatar, moins memorable</p>
<h4>Direction B — Enso (cercle d'encre)</h4>
<p>Un cercle de pinceau, ouvert ou ferme, avec ou sans le nom.</p>
<ul>
<li>Dessiner des cercles en un seul geste rapide (sans lever le pinceau)</li>
<li>L'ouverture du cercle est la "respiration" — elle evoque le son qui entre dans le micro</li>
<li>Essayer : enso fin (trait delicat) vs enso epais (trait charge d'encre)</li>
<li>Essayer : enso avec une cassure (comme un signal audio clippe)</li>
<li>Essayer : enso avec le mot TALAS a l'interieur ou a cote</li>
</ul>
<p><strong>Force :</strong> reference sumi-e directe, universel, fonctionne en rond (avatar)
<strong>Faiblesse :</strong> beaucoup de logos utilisent des cercles — risque de banalite</p>
<h4>Direction C — Onde / vibration</h4>
<p>Une forme d'onde audio stylisee en trait de pinceau.</p>
<ul>
<li>Dessiner une sinusoide avec un pinceau (le trait s'epaissit et s'affine naturellement)</li>
<li>Essayer : 1 seule onde (simple), 3 ondes (riche), onde amortie (decroissante)</li>
<li>Essayer : onde qui se transforme en lettre (le T ou le A de TALAS)</li>
<li>Essayer : representation d'une waveform audio en 3-5 traits verticaux d'epaisseurs variables</li>
<li>Essayer : deux arcs paralleles (comme une vibration de membrane)</li>
</ul>
<p><strong>Force :</strong> lien direct avec l'audio, unique dans le paysage des logos micro
<strong>Faiblesse :</strong> peut etre trop litteral si mal execute</p>
<h4>Direction D — Trait unique</h4>
<p>Un seul coup de pinceau. Rien d'autre. Le geste pur.</p>
<ul>
<li>Dessiner un trait horizontal charge d'encre (comme un coup de katana)</li>
<li>Essayer : trait diagonal ascendant (energie, mouvement)</li>
<li>Essayer : trait vertical avec une goutte qui tombe (encre qui coule)</li>
<li>Essayer : trait courbe, comme une virgule geante</li>
<li>Essayer : deux traits qui se croisent (evoque le X d'un XLR ou un circuit)</li>
</ul>
<p><strong>Force :</strong> radical, memorable, wabi-sabi pur, fonctionne en toute taille
<strong>Faiblesse :</strong> peut etre trop abstrait — difficile de faire le lien avec l'audio</p>
<h4>Direction E — Circuit / signal</h4>
<p>Un schema electronique ultra-simplifie. Un clin d'oeil au circuit du preamp.</p>
<ul>
<li>Dessiner un triangle de pinceau (symbole d'amplificateur operationnel)</li>
<li>Essayer : deux lignes paralleles avec un pont (schema simplifie de circuit)</li>
<li>Essayer : le symbole d'une capsule de micro (cercle + trait)</li>
<li>Essayer : un condensateur stylise (deux traits paralleles avec un espace)</li>
<li>Dessiner ces schemas avec un pinceau (pas avec une regle — c'est du sumi-e, pas du KiCAD)</li>
</ul>
<p><strong>Force :</strong> lien direct avec le hardware, open-source, transparence
<strong>Faiblesse :</strong> peut etre trop technique/niche</p>
<h4>Direction F — Hybride</h4>
<p>Combiner les directions les plus fortes.</p>
<ul>
<li>Enso + onde (cercle avec une vibration a l'interieur)</li>
<li>Trait + onde (un trait de pinceau qui ondule)</li>
<li>Logotype + trait (le mot TALAS avec un geste en dessous ou au-dessus)</li>
<li>Circuit + pinceau (un preamp dessine au pinceau)</li>
</ul>
<h3>4.2 Technique de croquis</h3>
<p><strong>Regles pour cette phase :</strong>
- Dessiner en <strong>30 secondes maximum</strong> par croquis — pas plus
- Utiliser un <strong>feutre epais</strong> (pas un stylo fin — on cherche des formes, pas des details)
- Dessiner <strong>grand</strong> (au moins 5 cm de haut par croquis)
- <strong>Ne pas effacer.</strong> Si c'est rate, passer au suivant
- Mettre la date et un numero sur chaque feuille
- <strong>Objectif : 15-20 croquis minimum</strong> sur l'ensemble des directions</p>
<h3>4.3 Selectionner</h3>
<p>Apres les croquis :
1. Laisser reposer <strong>une nuit</strong> — ne pas choisir a chaud
2. Revenir avec un oeil frais
3. Eliminer tout ce qui ne passe pas le test du "reconnaissable en 16x16"
4. <strong>Entourer les 3 pistes les plus fortes</strong>
5. Si aucune ne convainc, recommencer une session de croquis (c'est normal)</p>
<hr />
<h2>5. Phase 3 — Encre reelle (2-3 heures)</h2>
<h3>5.1 Pourquoi passer a l'encre</h3>
<p>Les croquis au feutre donnent la forme. L'encre donne la <strong>matiere</strong> — la diffusion,
l'epaisseur variable du trait, les "accidents" qui font la beaute du sumi-e.</p>
<p>Cette etape transforme une idee en un <strong>objet physique</strong> authentique.</p>
<h3>5.2 Technique au feutre pinceau (methode simple)</h3>
<p>Si tu n'as pas d'encre de Chine, le feutre pinceau (Pentel Sign Brush ou Tombow
Fudenosuke) est un excellent substitut.</p>
<ol>
<li>Preparer 10 feuilles de papier A4 blanc</li>
<li>Sur chaque feuille, dessiner la meme forme <strong>5 fois</strong> (variations du meme geste)</li>
<li>Varier la pression (leger → appuye), la vitesse (rapide → lent), l'angle</li>
<li>Travailler debout si possible — le geste est plus libre</li>
<li>Respirer avant chaque trait — le sumi-e est un art du geste conscient</li>
</ol>
<h3>5.3 Technique a l'encre de Chine (methode authentique)</h3>
<p>Si tu as de l'encre de Chine et un pinceau :</p>
<ol>
<li><strong>Preparer l'encre :</strong> verser un peu d'encre dans un petit recipient
(ou broyer le baton sur la pierre si tu en as une)</li>
<li><strong>Charger le pinceau :</strong> tremper, essorer legerement sur le bord</li>
<li><strong>Papier aquarelle ou papier epais</strong> (le papier standard gondole avec l'encre)</li>
<li><strong>Poser le papier a plat</strong> sur une surface protegee (journal en dessous)</li>
<li><strong>Dessiner en un geste</strong> — ne pas revenir sur le trait</li>
<li>Faire 5-10 versions de chaque piste</li>
<li><strong>Laisser secher completement</strong> (15-30 min) avant de manipuler</li>
</ol>
<p><strong>Astuces :</strong>
- Un pinceau presque sec donne un trait texturise (effet "herbe seche") — tres sumi-e
- Un pinceau tres charge donne un trait dense avec des eclats d'encre — expressif
- Incliner le pinceau donne un trait large ; le tenir vertical donne un trait fin
- Le papier mouille prealablement donne des bords tres diffus (nijimi)</p>
<h3>5.4 Selectionner les 3 meilleurs gestes</h3>
<p>Pour chaque piste retenue :
1. Etaler toutes les versions sur la table
2. Eliminer les traits trop epais, trop fins, trop propres, ou trop chaotiques
3. Garder <strong>le geste qui a le plus de caractere tout en restant lisible</strong>
4. Marquer ce geste d'un point rouge (ou prendre une photo de reference)</p>
<hr />
<h2>6. Phase 4 — Numerisation (30 minutes)</h2>
<h3>6.1 Avec un scanner</h3>
<ol>
<li>Scanner en <strong>600 DPI minimum</strong> (1200 DPI si possible)</li>
<li>Mode <strong>niveaux de gris</strong> (pas couleur, pas N&amp;B binaire)</li>
<li>Poser le papier bien a plat, fermer le capot</li>
<li>Sauvegarder en <strong>TIFF ou PNG</strong> (pas JPEG — perte de qualite)</li>
<li>Nommer : <code>talas_symbole_scan_01.png</code>, <code>talas_symbole_scan_02.png</code>, etc.</li>
</ol>
<h3>6.2 Avec un smartphone</h3>
<ol>
<li>Poser le dessin a plat, en <strong>lumiere naturelle</strong> (pres d'une fenetre)</li>
<li><strong>Pas de flash</strong> (cree des reflets et des ombres dures)</li>
<li>Photographier <strong>bien d'en haut</strong> (perpendiculaire au papier, pas en angle)</li>
<li>Cadrer serre autour du dessin</li>
<li>Utiliser une <strong>app de scan</strong> (Adobe Scan, Microsoft Lens, Open Note Scanner)
qui corrige automatiquement la perspective et le contraste</li>
</ol>
<h3>6.3 Nettoyage dans GIMP</h3>
<ol>
<li>Ouvrir le scan dans GIMP</li>
<li><strong>Image → Mode → Niveaux de gris</strong> (si pas deja fait)</li>
<li><strong>Couleurs → Niveaux</strong> : tirer le curseur blanc vers la gauche pour blanchir
le fond, tirer le curseur noir vers la droite pour noircir l'encre.
Le but : fond blanc pur + encre noire dense, sans perdre les details du trait</li>
<li><strong>Couleurs → Seuil</strong> (optionnel) : pour un N&amp;B binaire ultra-propre.
Attention : ca supprime les nuances de gris — a utiliser avec precaution</li>
<li>Rogner (crop) serré autour du dessin</li>
<li><strong>Exporter en PNG</strong> a haute resolution</li>
</ol>
<hr />
<h2>7. Phase 5 — Vectorisation dans Inkscape (3-4 heures)</h2>
<h3>7.1 Pourquoi vectoriser a la main</h3>
<p>Inkscape a une fonction de <strong>trace automatique</strong> (Chemin → Vectoriser un objet matriciel).
<strong>Ne pas l'utiliser</strong> pour le logo final. Voici pourquoi :</p>
<ul>
<li>Le trace automatique cree des <strong>centaines de noeuds</strong> inutiles</li>
<li>Il <strong>lisse</strong> les irregularites — exactement ce qu'on veut preserver</li>
<li>Il gere mal les traits fins et les details</li>
<li>Le resultat est un SVG lourd et difficile a modifier</li>
</ul>
<p>La vectorisation manuelle prend plus de temps mais produit un SVG <strong>propre, leger
et fidele au geste original</strong>.</p>
<p><strong>Exception :</strong> on peut utiliser le trace automatique comme <strong>point de depart</strong>, puis
nettoyer et simplifier manuellement. C'est un bon compromis pour des formes complexes.</p>
<h3>7.2 Methode pas-a-pas</h3>
<h4>Preparation</h4>
<ol>
<li>Ouvrir Inkscape</li>
<li><strong>Fichier → Importer</strong> le scan PNG</li>
<li>Verrouiller le calque du scan (cadenas dans le panneau Calques)</li>
<li>Creer un <strong>nouveau calque</strong> au-dessus pour le trace vectoriel</li>
<li>Zoomer a 200-400% sur le dessin</li>
</ol>
<h4>Tracer avec l'outil Bezier (touche B)</h4>
<ol>
<li>Selectionner l'outil <strong>Dessiner des courbes de Bezier</strong> (B)</li>
<li>Mode : <strong>Creer un chemin regulier de Bezier</strong> (dans la barre d'outils du haut)</li>
<li>Cliquer pour poser des points le long du contour du trait d'encre</li>
<li><strong>Placer peu de points</strong> — un toutes les 5-10mm. Inkscape interpole entre les points</li>
<li>Ajuster les poignees (tangentes) en les tirant depuis chaque noeud</li>
<li>Fermer le chemin en cliquant sur le premier point</li>
</ol>
<p><strong>Conseil :</strong> tracer le <strong>contour exterieur</strong> du trait, pas le centre. Le symbole
est une forme pleine (fill), pas un trait (stroke). Ceci donne un meilleur
resultat en petite taille.</p>
<h4>Preserver l'irregularite</h4>
<ul>
<li><strong>Ne pas</strong> lisser automatiquement les noeuds (Chemin → Simplifier)
sauf si le trait a trop de noeuds</li>
<li>Garder les petites bosses et irregularites — c'est ce qui fait la difference
entre un logo "dessine" et un logo "genere par ordinateur"</li>
<li>Comparer regulierement avec le scan original : si le trace est trop propre,
ajouter volontairement une ou deux irregularites</li>
</ul>
<h4>Remplissage</h4>
<ol>
<li>Selectionner le chemin trace</li>
<li><strong>Objet → Fond et contour</strong></li>
<li>Fond : <strong>Aplat</strong> → <code>#1A1A1E</code> (noir sumi)</li>
<li>Contour : <strong>Aucune peinture</strong> (pas de bordure)</li>
</ol>
<h3>7.3 Alternative : trace automatique + nettoyage</h3>
<p>Si la forme est trop complexe pour un trace entierement manuel :</p>
<ol>
<li>Selectionner l'image du scan</li>
<li><strong>Chemin → Vectoriser un objet matriciel</strong></li>
<li>Mode : <strong>Detection de luminosite</strong> ou <strong>Detection de contour</strong></li>
<li>Ajuster le seuil pour capturer le trait complet</li>
<li>Cliquer <strong>Appliquer</strong></li>
<li>Supprimer l'image source</li>
<li><strong>Chemin → Simplifier</strong> (Ctrl+L) — reduire le nombre de noeuds</li>
<li>Passer en mode edition de noeuds (N) et <strong>nettoyer manuellement</strong> :
supprimer les noeuds inutiles, ajuster les courbes</li>
<li>Objectif : &lt; 100 noeuds pour le symbole final</li>
</ol>
<h3>7.4 Verifier le resultat</h3>
<p>Avant de passer a la suite :
- [ ] Zoomer a 100% : le symbole est-il propre et lisible ?
- [ ] Zoomer a 3200% : les courbes sont-elles lisses sans etre parfaites ?
- [ ] Reduire a 32x32 px : le symbole est-il reconnaissable ?
- [ ] Reduire a 16x16 px : le symbole est-il encore lisible ?
- [ ] Inverser les couleurs (blanc sur noir) : ca fonctionne ?</p>
<hr />
<h2>8. Phase 6 — Le logotype TALAS (1-2 heures)</h2>
<h3>8.1 Installer Space Grotesk</h3>
<ol>
<li>Telecharger Space Grotesk sur Google Fonts :
https://fonts.google.com/specimen/Space+Grotesk</li>
<li>Installer le fichier <strong>TTF ou OTF</strong> sur ton systeme</li>
<li>Redemarrer Inkscape pour qu'il detecte la nouvelle police</li>
</ol>
<h3>8.2 Creer le logotype</h3>
<ol>
<li>Dans Inkscape, selectionner l'outil <strong>Texte</strong> (T)</li>
<li>Taper : <code>TALAS</code></li>
<li>Dans la barre d'outils ou le panneau Texte :</li>
<li>Police : <strong>Space Grotesk</strong></li>
<li>Poids : <strong>Bold (700)</strong></li>
<li>Taille : <strong>72pt</strong> (pour travailler confortablement, on redimensionnera apres)</li>
<li><strong>Espacement des lettres (letter-spacing) :</strong> selectionner tout le texte,
dans le panneau Texte (Texte → Texte et police), regler l'espacement
a <strong>+8 a +12</strong> (equivalent de ~0.12em). Tester visuellement.</li>
</ol>
<h3>8.3 Ajustements optiques</h3>
<p>La typographie geometrique en MAJUSCULES peut necessiter des ajustements :</p>
<ul>
<li><strong>Verifier l'equilibre visuel :</strong> le T est large, le A est pointu, le L est bas,
le S est courbe. L'ensemble doit paraitre equilibre meme si l'espacement
mathematique est uniforme.</li>
<li><strong>Kerning :</strong> ajuster l'espace entre les paires TA, AL, LA, AS si necessaire.
En general, TA a besoin d'etre reserre et AS d'etre legerement elargi.</li>
<li><strong>Comparer avec le symbole :</strong> le logotype et le symbole doivent avoir le meme
"poids visuel" — ni l'un ni l'autre ne doit dominer</li>
</ul>
<h3>8.4 Convertir en chemins</h3>
<p>Une fois satisfait :</p>
<ol>
<li>Selectionner le texte</li>
<li><strong>Chemin → Objet en chemin</strong> (Shift+Ctrl+C)</li>
<li>Le texte est maintenant un ensemble de formes vectorielles, independant de la police</li>
<li>Sauvegarder le SVG — c'est le logotype source</li>
</ol>
<p><strong>Important :</strong> garder une copie du texte editable avant conversion (dans un
calque cache) au cas ou il faudrait ajuster plus tard.</p>
<h3>8.5 Logotype Veza</h3>
<p>Meme processus exact :</p>
<ol>
<li>Taper <code>VEZA</code> en Space Grotesk Bold, MAJUSCULES, meme letter-spacing</li>
<li>Ajuster le kerning si necessaire (VE et ZA sont les paires critiques)</li>
<li>Convertir en chemins</li>
</ol>
<hr />
<h2>9. Phase 7 — Assemblage et declinaisons (2-3 heures)</h2>
<h3>9.1 Logo principal (symbole + logotype horizontal)</h3>
<ol>
<li>Placer le symbole a gauche, le logotype a droite</li>
<li>Aligner verticalement au centre</li>
<li>Espace entre les deux : environ <strong>la largeur de la lettre A</strong> du logotype</li>
<li>Le symbole et le logotype ont la <strong>meme hauteur</strong> (ajuster si necessaire)</li>
<li>Grouper les deux elements (Ctrl+G)</li>
<li>Sauvegarder : <code>talas_logo_principal.svg</code></li>
</ol>
<h3>9.2 Logo empile (vertical)</h3>
<ol>
<li>Symbole au-dessus, logotype en dessous</li>
<li>Centrer horizontalement</li>
<li>Espace vertical : environ <strong>la moitie de la hauteur du symbole</strong></li>
<li>Sauvegarder : <code>talas_logo_empile.svg</code></li>
</ol>
<h3>9.3 Symbole seul</h3>
<ol>
<li>Le symbole seul, dans un document carre (viewBox carre)</li>
<li>Centrer dans le document</li>
<li>Sauvegarder : <code>talas_symbole.svg</code></li>
</ol>
<h3>9.4 Logotype seul</h3>
<ol>
<li>Le texte TALAS seul</li>
<li>Sauvegarder : <code>talas_logotype.svg</code></li>
</ol>
<h3>9.5 Favicon</h3>
<p>Le favicon est le symbole <strong>simplifie</strong> pour etre lisible en 16x16 et 32x32.</p>
<p>La simplification peut inclure :
- Epaissir les traits fins (en dessous de 2px a 32x32, ils disparaissent)
- Supprimer les details qui ne sont plus visibles en petit
- Renforcer la forme globale</p>
<p><strong>Technique :</strong>
1. Dupliquer le symbole
2. Redimensionner a 32x32 px
3. Zoomer a 800% pour travailler pixel par pixel
4. Ajuster les courbes pour que ca reste lisible
5. Verifier a 16x16 (encore plus simplifie si necessaire)
6. Sauvegarder : <code>talas_favicon.svg</code></p>
<h3>9.6 Versions monochromes</h3>
<p>Pour chaque assemblage :
1. <strong>Version noire</strong> : fill <code>#1A1A1E</code> sur fond transparent → pour fond clair
2. <strong>Version blanche</strong> : fill <code>#F2EDE6</code> sur fond transparent → pour fond sombre</p>
<h3>9.7 Version gravure</h3>
<p>Pour la gravure laser sur aluminium, les traits doivent etre :
- <strong>Plus epais</strong> (minimum 0.5mm en taille reelle sur le micro)
- <strong>Sans detail fin</strong> (les details tres fins ne gravent pas bien)
- <strong>Contours nets</strong> (le laser suit des chemins — pas de flou)</p>
<p>Dupliquer le symbole et epaissir tous les traits de 10-15%.
Sauvegarder : <code>talas_gravure.svg</code></p>
<h3>9.8 Version broderie</h3>
<p>Pour la broderie sur tissu (pochette du packaging) :
- <strong>Traits minimum 3mm de large</strong> en taille reelle
- <strong>Pas de details inferieurs a 2mm</strong>
- <strong>Formes fermees</strong> de preference (plus faciles a broder)</p>
<p>Dupliquer le symbole et simplifier encore plus que la version gravure.
Sauvegarder : <code>talas_broderie.svg</code></p>
<hr />
<h2>10. Phase 8 — Tests en contexte (1-2 heures)</h2>
<p>Avant de valider, tester le logo dans chaque contexte reel.</p>
<h3>10.1 Test favicon</h3>
<ol>
<li>Exporter le favicon en PNG 16x16 et 32x32</li>
<li>L'afficher en taille reelle dans un navigateur (utiliser un fichier HTML local
avec <code>&lt;link rel="icon"&gt;</code>)</li>
<li><strong>Verdict :</strong> est-ce reconnaissable dans un onglet de navigateur ?</li>
</ol>
<h3>10.2 Test avatar RS</h3>
<ol>
<li>Placer le symbole dans un cercle de 110x110 px (taille avatar Instagram)</li>
<li>Fond washi <code>#F2EDE6</code> + symbole <code>#1A1A1E</code></li>
<li>Puis tester en inverse : fond <code>#0D0D0F</code> + symbole <code>#E8E3DB</code></li>
<li><strong>Verdict :</strong> est-ce reconnaissable dans un feed ?</li>
</ol>
<h3>10.3 Test sur fond sombre</h3>
<ol>
<li>Ouvrir le logo sur un fond <code>#0D0D0F</code></li>
<li>Le symbole doit etre en blanc casse <code>#E8E3DB</code></li>
<li><strong>Verdict :</strong> le contraste est-il suffisant ? Le caractere est-il preserve ?</li>
</ol>
<h3>10.4 Test mockup packaging</h3>
<ol>
<li>Trouver une photo de boite en carton kraft (Google Images : "kraft box mockup")</li>
<li>Placer le symbole en noir dessus (dans GIMP ou Inkscape)</li>
<li>Imaginer le rendu reel (impression noir sur kraft)</li>
<li><strong>Verdict :</strong> est-ce que ca evoque un hanko (sceau japonais) ?</li>
</ol>
<h3>10.5 Test mockup micro</h3>
<ol>
<li>Trouver une photo de micro a condensateur (le corps AliExpress, ou un NT1-A)</li>
<li>Placer le symbole en blanc ou noir sur le corps</li>
<li>Imaginer une gravure laser</li>
<li><strong>Verdict :</strong> est-ce elegant et discret ?</li>
</ol>
<h3>10.6 Test page web</h3>
<ol>
<li>Creer un mock rapide (dans Figma, Inkscape, ou meme un fichier HTML) :</li>
<li>Header : fond washi + logo horizontal a gauche</li>
<li>Texte en Inter, titre en Space Grotesk</li>
<li><strong>Verdict :</strong> le logo s'integre-t-il naturellement dans l'univers Sumi ?</li>
</ol>
<h3>10.7 Test aupres de 2-3 personnes</h3>
<p>Montrer les 3 pistes (ou la piste finale) a 2-3 personnes de confiance
dont tu respectes l'avis artistique. Pas un sondage large.</p>
<p>Questions a poser :
- "A quoi ca te fait penser ?" (sans contexte)
- "Si tu voyais ca sur un produit, qu'est-ce que tu imaginerais ?"
- "Lequel tu retiens le plus facilement ?"</p>
<p><strong>Ne pas demander "tu aimes ?" — demander "tu retiens ?"</strong></p>
<hr />
<h2>11. Phase 9 — Export final (1 heure)</h2>
<h3>11.1 Formats et tailles</h3>
<table>
<thead>
<tr>
<th>Fichier</th>
<th>Format</th>
<th>Taille</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td>Logo principal</td>
<td>SVG</td>
<td>Vectoriel</td>
<td>Source, web</td>
</tr>
<tr>
<td>Logo principal</td>
<td>PNG</td>
<td>512x auto</td>
<td>High-res general</td>
</tr>
<tr>
<td>Logo principal</td>
<td>PNG</td>
<td>256x auto</td>
<td>Usage courant</td>
</tr>
<tr>
<td>Symbole</td>
<td>SVG</td>
<td>Vectoriel</td>
<td>Source, web</td>
</tr>
<tr>
<td>Symbole</td>
<td>PNG</td>
<td>512, 256, 128, 64, 32, 16</td>
<td>Tous usages</td>
</tr>
<tr>
<td>Favicon</td>
<td>ICO</td>
<td>16+32</td>
<td>Navigateur</td>
</tr>
<tr>
<td>Favicon</td>
<td>PNG</td>
<td>180x180</td>
<td>Apple Touch Icon</td>
</tr>
<tr>
<td>Favicon</td>
<td>SVG</td>
<td>Vectoriel</td>
<td>Navigateurs modernes</td>
</tr>
<tr>
<td>OG image</td>
<td>PNG</td>
<td>1200x630</td>
<td>Meta tags (preview liens)</td>
</tr>
</tbody>
</table>
<h3>11.2 Exporter depuis Inkscape</h3>
<p><strong>Pour le SVG :</strong>
1. Selectionner l'element a exporter
2. <strong>Fichier → Enregistrer une copie</strong> en SVG simple (pas Inkscape SVG)
3. Nettoyer les metadonnees inutiles</p>
<p><strong>Pour le PNG :</strong>
1. Selectionner l'element
2. <strong>Fichier → Exporter en PNG</strong> (Shift+Ctrl+E)
3. Zone d'export : <strong>Selection</strong>
4. Regler la largeur desiree (la hauteur s'ajuste)
5. Cocher <strong>fond transparent</strong></p>
<p><strong>Pour le ICO (favicon) :</strong>
1. Exporter en PNG 16x16 et 32x32
2. Utiliser un convertisseur en ligne (realfavicongenerator.net) ou ImageMagick :
<code>convert favicon_16.png favicon_32.png favicon.ico</code></p>
<h3>11.3 Organisation des fichiers</h3>
<p>Ranger les fichiers dans l'arborescence definie dans la charte graphique :</p>
<pre><code>05_EXPERIENCE_UTILISATEUR/Identite_Visuelle/
├── logo/
│ ├── talas/
│ │ ├── talas_logo_principal.svg
│ │ ├── talas_logo_empile.svg
│ │ ├── talas_symbole.svg
│ │ ├── talas_logotype.svg
│ │ ├── talas_favicon.svg
│ │ └── talas_gravure.svg
│ ├── veza/
│ │ └── veza_logotype.svg
│ ├── exports/
│ │ ├── png/
│ │ ├── favicon/
│ │ └── og/
│ └── references/ (moodboard, croquis scannes)
│ └── croquis/
...
</code></pre>
<hr />
<h2>12. Le logo Veza</h2>
<h3>12.1 Relation avec Talas</h3>
<p>Veza est la plateforme web de Talas. Son identite visuelle est un <strong>sous-ensemble</strong>
de celle de Talas — meme palette, meme typographie, meme langage visuel.</p>
<h3>12.2 Option A — Logotype seul (recommandee)</h3>
<p>Veza n'a pas de symbole propre. Le mot <strong>VEZA</strong> en Space Grotesk Bold MAJUSCULES
est son seul identifiant visuel.</p>
<p><strong>Avantages :</strong>
- Coherence : Talas et Veza partagent la meme typographie
- Simplicite : pas de confusion entre deux symboles
- Le symbole Talas reste LE symbole de tout l'ecosysteme</p>
<p><strong>Usage :</strong> dans l'app Veza, la navigation affiche "VEZA" en logotype.
Le symbole Talas apparait en footer ou page A propos.</p>
<h3>12.3 Option B — Symbole propre</h3>
<p>Si tu veux que Veza ait son propre symbole, il doit :
- Appartenir au meme langage visuel (geste calligraphique, monochrome)
- Etre distinctement different du symbole Talas (pas une variation du meme geste)
- Pouvoir coexister avec le symbole Talas sans confusion
- Evoquer la <strong>connexion</strong> ou le <strong>reseau</strong> (veza signifie "lien" en serbe)</p>
<p><strong>Pistes :</strong>
- Deux traits qui se croisent ou se rejoignent (lien, connexion)
- Un arc de cercle ouvert (onde qui cherche une autre onde)
- Deux enso imbriques (communaute, echange)</p>
<h3>12.4 Decision</h3>
<p>Cette decision se prend <strong>apres</strong> avoir finalise le logo Talas. Le logo Veza
depend du logo Talas — pas l'inverse.</p>
<p>Pour le lancement, l'option A (logotype seul) est la plus rapide et la plus sure.
L'option B peut etre exploree plus tard si le besoin se fait sentir.</p>
<hr />
<h2>13. Alternatives et complements</h2>
<h3>13.1 IA comme outil d'exploration</h3>
<p>Les modeles de generation d'images (Gemini, DALL-E, Midjourney, Stable Diffusion)
peuvent servir d'outil d'exploration pour <strong>visualiser des directions</strong> avant de
dessiner a la main.</p>
<p><strong>Comment utiliser :</strong>
1. Utiliser le prompt de [[PROMPT_GENERATION_VISUELS]] pour generer des visuels
2. Analyser les resultats : qu'est-ce qui fonctionne dans la composition ?
Quelle direction est la plus forte ?
3. <strong>Ne JAMAIS utiliser directement un resultat genere comme logo final.</strong>
Les logos generes par IA ne sont pas suffisamment uniques, manquent d'irregularite
authentique, et posent des questions de propriete intellectuelle.
4. S'en servir comme <strong>reference visuelle</strong> pour dessiner a la main</p>
<h3>13.2 Faire appel a un calligraphe (futur)</h3>
<p>Si le budget le permet un jour, commander le symbole a un <strong>calligraphe professionnel</strong>
(sumi-e ou calligraphie occidentale) en fournissant le brief.</p>
<p><strong>Avantages :</strong>
- Geste authentique execute par un artisan du trait
- Resultat unique et impossible a reproduire par IA
- Coherence parfaite avec la philosophie sumi-e du projet</p>
<p><strong>Budget indicatif :</strong> 200-500 EUR pour un symbole de logo chez un calligraphe
professionnel. Investissement justifiable une fois que le projet genere du revenu.</p>
<h3>13.3 Police custom (futur)</h3>
<p>A terme, une police personnalisee pour le logotype (basee sur Space Grotesk mais
avec des ajustements specifiques) renforcerait l'unicite. C'est un projet ambitieux
(2000-5000 EUR chez un type designer) a envisager quand le projet est etabli.</p>
<hr />
<h2>14. Planning recapitulatif</h2>
<table>
<thead>
<tr>
<th>Phase</th>
<th>Duree</th>
<th>Ou</th>
<th>Livrable</th>
</tr>
</thead>
<tbody>
<tr>
<td>1. References</td>
<td>1-2h</td>
<td>Partout (telephone)</td>
<td>Dossier moodboard</td>
</tr>
<tr>
<td>2. Croquis rapides</td>
<td>2-3h</td>
<td>Partout (papier + feutre)</td>
<td>15-20 croquis, 3 pistes retenues</td>
</tr>
<tr>
<td>3. Encre reelle</td>
<td>2-3h</td>
<td>Chez toi (encre + papier)</td>
<td>3 gestes finalistes</td>
</tr>
<tr>
<td>4. Numerisation</td>
<td>30min</td>
<td>Chez toi (scanner/telephone)</td>
<td>Scans haute resolution</td>
</tr>
<tr>
<td>5. Vectorisation</td>
<td>3-4h</td>
<td>Laptop (Inkscape)</td>
<td>Symbole SVG vectorise</td>
</tr>
<tr>
<td>6. Logotype</td>
<td>1-2h</td>
<td>Laptop (Inkscape)</td>
<td>TALAS + VEZA en SVG</td>
</tr>
<tr>
<td>7. Assemblage</td>
<td>2-3h</td>
<td>Laptop (Inkscape)</td>
<td>Toutes declinaisons SVG</td>
</tr>
<tr>
<td>8. Tests</td>
<td>1-2h</td>
<td>Laptop (Inkscape/Figma)</td>
<td>Mockups valides</td>
</tr>
<tr>
<td>9. Export</td>
<td>1h</td>
<td>Laptop (Inkscape)</td>
<td>Tous formats finaux</td>
</tr>
<tr>
<td><strong>Total</strong></td>
<td><strong>~14-20h</strong></td>
<td></td>
<td>Logo complet + declinaisons</td>
</tr>
</tbody>
</table>
<p>Ces heures ne sont pas consecutives. Repartir sur 1-2 semaines.
Les phases 1-3 peuvent se faire en deplacement (carnet + feutre).
Les phases 4-9 necessitent un laptop.</p>
<hr />
<h2>Voir aussi</h2>
<ul>
<li>[[05_EXPERIENCE_UTILISATEUR/DIRECTION_ARTISTIQUE_TALAS]] — Philosophie visuelle</li>
<li>[[05_EXPERIENCE_UTILISATEUR/IDENTITE_VISUELLE]] — Brief d'identite visuelle</li>
<li>[[05_EXPERIENCE_UTILISATEUR/CHARTE_GRAPHIQUE_TALAS]] — Charte graphique complete</li>
<li>[[05_EXPERIENCE_UTILISATEUR/SUMI_V3_SPECIFICATION]] — Spec technique design system</li>
<li>[[05_EXPERIENCE_UTILISATEUR/PROMPT_GENERATION_VISUELS]] — Prompt IA pour explorer des directions</li>
<li>[[01_PILOTAGE/ROADMAP_IDENTITE_VISUELLE]] — Roadmap globale V1-V8</li>
</ul>
<div class='page-break'></div>
<div class='doc-header'>
<h2>📄 IDENTITE_VISUELLE.md</h2>
<div class='doc-path'>Chemin: 05_EXPERIENCE_UTILISATEUR/IDENTITE_VISUELLE.md</div>
</div>
<h1>Brief d'identite visuelle — Talas</h1>
<blockquote>
<p>Derniere mise a jour : 27 mars 2026.
Direction validee : <strong>lavis japonais interactif</strong> — voir [[DIRECTION_ARTISTIQUE_TALAS]].</p>
</blockquote>
<hr />
<h2>Direction artistique</h2>
<h3>Le langage</h3>
<p>L'interface de Talas/Veza est un <strong>lavis japonais interactif</strong> (sumi-e numerique).
L'ecran est du papier washi. Les elements sont des traces d'encre. Le cyan est
la seule touche de couleur — comme un pigment rare dans un lavis monochrome.</p>
<h3>Mots-cles de la marque</h3>
<ul>
<li>Lavis, encre, eau, papier, geste</li>
<li>Brut, artisanal, vivant, en mouvement</li>
<li>Contraste, diffusion, couches, profondeur</li>
<li>Independant, anti-corporate, singulier</li>
<li>Durable, solide, silencieux</li>
</ul>
<h3>Ce que Talas N'EST PAS</h3>
<ul>
<li>Pas premium/luxe (pas de dore, pas de serif elegant)</li>
<li>Pas cheap/discount (pas de rouge promo, pas de clipart)</li>
<li>Pas corporate (pas de bleu LinkedIn, pas de stock photos)</li>
<li>Pas "eco-friendly cute" (pas de vert pastel avec des feuilles)</li>
<li>Pas industriel/steampunk (pas de cuivre, pas d'engrenages)</li>
<li>Pas neon/cyberpunk (pas de noir + neon partout)</li>
</ul>
<hr />
<h2>Logo</h2>
<h3>Direction : logotype + symbole separes</h3>
<p>Le logo existe en deux formes independantes qui peuvent etre associees.</p>
<p><strong>Le logotype :</strong>
- Le mot "TALAS" en Space Grotesk Bold (ou custom a terme)
- MAJUSCULES, letter-spacing large (~0.12em)
- Sobre, inscrit — comme grave dans la pierre ou frappe sur metal
- Fonctionne seul, sans le symbole</p>
<p><strong>Le symbole :</strong>
- Un geste dessine a la main, calligraphique
- Evoque a la fois l'onde sonore et le trait de pinceau
- Irregulier volontairement (pas lisse par logiciel)
- Fonctionne en 16x16 (favicon) comme en grand
- Monochrome — pas de couleur dans le symbole</p>
<h3>Contraintes techniques</h3>
<ul>
<li>Fonctionne en monochrome (gravure sur metal, serigraphie)</li>
<li>Lisible en tres petit (favicon, marquage produit)</li>
<li>Fonctionne sur fond sombre ET clair</li>
<li>Reconnaissable sans le texte (symbole seul = suffisant)</li>
</ul>
<h3>Versions necessaires</h3>
<ul>
<li>[ ] Logotype seul (horizontal)</li>
<li>[ ] Symbole seul (carre)</li>
<li>[ ] Logotype + symbole (horizontal)</li>
<li>[ ] Logotype + symbole (vertical — symbole au-dessus)</li>
<li>[ ] Favicon (symbole simplifie, 16x16 et 32x32)</li>
<li>[ ] Version monochrome noir</li>
<li>[ ] Version monochrome blanc</li>
<li>[ ] Version pour gravure/marquage metal</li>
<li>[ ] Version pour broderie sur tissu</li>
</ul>
<hr />
<h2>Palette de couleurs</h2>
<h3>Palette principale — le lavis</h3>
<table>
<thead>
<tr>
<th>Role</th>
<th>Couleur</th>
<th>Code</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Papier (jour)</strong></td>
<td>Blanc casse washi</td>
<td>#F2EDE6</td>
</tr>
<tr>
<td><strong>Papier (nuit)</strong></td>
<td>Noir encre</td>
<td>#0D0D0F</td>
</tr>
<tr>
<td><strong>Encre (jour)</strong></td>
<td>Noir sumi</td>
<td>#1A1A1E</td>
</tr>
<tr>
<td><strong>Encre (nuit)</strong></td>
<td>Blanc creme</td>
<td>#E8E3DB</td>
</tr>
<tr>
<td><strong>Encre diluee</strong></td>
<td>Gris chaud</td>
<td>#9A958D</td>
</tr>
<tr>
<td><strong>Cyan (accent)</strong></td>
<td>Bleu cyan</td>
<td>#0098B5</td>
</tr>
<tr>
<td><strong>Cyan hover</strong></td>
<td>Cyan clair</td>
<td>#00B4D8</td>
</tr>
<tr>
<td><strong>Cyan muted</strong></td>
<td>Cyan dilue</td>
<td>rgba(0, 152, 181, 0.15)</td>
</tr>
<tr>
<td><strong>Cyan profond (nuit)</strong></td>
<td>Teal sombre</td>
<td>#006B7F</td>
</tr>
</tbody>
</table>
<h3>Couleurs fonctionnelles (pastel diffuse)</h3>
<table>
<thead>
<tr>
<th>Role</th>
<th>Couleur</th>
<th>Code</th>
<th>Regles</th>
</tr>
</thead>
<tbody>
<tr>
<td>Succes</td>
<td>Vert sauge dilue</td>
<td>rgba(90, 140, 100, 0.60)</td>
<td>Ligne fine, petit point</td>
</tr>
<tr>
<td>Erreur</td>
<td>Rouge brique dilue</td>
<td>rgba(180, 80, 70, 0.55)</td>
<td>Trait fin, bordure legere</td>
</tr>
<tr>
<td>Warning</td>
<td>Ambre dilue</td>
<td>rgba(190, 150, 60, 0.55)</td>
<td>Point discret</td>
</tr>
<tr>
<td>Info</td>
<td>Cyan</td>
<td>#0098B5</td>
<td>= accent</td>
</tr>
</tbody>
</table>
<p><strong>Regles :</strong> jamais en aplat, toujours dilue, jamais plus fort que le cyan.</p>
<hr />
<h2>Typographie</h2>
<h3>Choix valides</h3>
<table>
<thead>
<tr>
<th>Usage</th>
<th>Police</th>
<th>Poids</th>
</tr>
</thead>
<tbody>
<tr>
<td>Titres</td>
<td>Space Grotesk</td>
<td>Bold (700)</td>
</tr>
<tr>
<td>Corps</td>
<td>Inter</td>
<td>Regular (400), Semi-Bold (600)</td>
</tr>
<tr>
<td>Code/specs</td>
<td>JetBrains Mono</td>
<td>Regular (400)</td>
</tr>
</tbody>
</table>
<h3>Regles</h3>
<ul>
<li>Titres en MAJUSCULES, letter-spacing 0.1-0.15em</li>
<li>Corps en casse normale, interligne 1.6-1.8</li>
<li>Le texte flotte dans le papier — padding genereux</li>
<li>Texte secondaire en gris doux (#9A958D), pas en gris moyen</li>
<li>Open-source uniquement, format woff2, font-display: swap</li>
<li>Max 2 fichiers font charges au chargement initial</li>
</ul>
<hr />
<h2>Applications</h2>
<h3>Packaging</h3>
<ul>
<li>Boite : carton kraft non blanchi (= le "papier" du lavis)</li>
<li>Impression : logo noir seul, comme un hanko (sceau japonais)</li>
<li>Livret : papier recycle, schemas en style trait de pinceau</li>
<li>Sticker : logo monochrome (encre sur papier ou transparent)</li>
<li>Pochette tissu : noire avec logo brode en <strong>cyan</strong> (seule touche de couleur)</li>
<li>Numero de serie : frappe a froid (pas imprime)</li>
</ul>
<h3>Web (Veza)</h3>
<ul>
<li>Le design system SUMI v3 implemente la direction lavis</li>
<li>Fond = texture washi, elements = couches d'encre, accent = cyan</li>
<li>Voir [[SUMI_V3_SPECIFICATION]] pour l'implementation technique</li>
</ul>
<h3>Reseaux sociaux</h3>
<ul>
<li>Avatar : symbole sur fond papier washi (ou fond noir encre)</li>
<li>Banniere : photo d'atelier traitee en noir &amp; blanc avec grain, style lavis</li>
<li>Videos : sous-titres en Space Grotesk, fond = lavis diffus</li>
<li>Le style visuel des posts evoque le lavis sans l'imiter lourdement</li>
</ul>
<h3>Produit physique</h3>
<ul>
<li>Marquage du symbole sur le corps du micro (gravure laser)</li>
<li>Le mot TALAS grave en petit sous le symbole</li>
<li>Finition mate du boitier (pas de brillant — coherent avec le papier)</li>
</ul>
<hr />
<h2>Prochaines etapes</h2>
<ol>
<li>[ ] <strong>Dessiner le symbole</strong> (croquis papier/tablette → vectorisation Inkscape)</li>
<li>[ ] <strong>Tester le logotype</strong> (Space Grotesk Bold en MAJUSCULES, espacement)</li>
<li>[ ] <strong>Creer la texture washi</strong> (photo d'un vrai papier, desature, 512x512)</li>
<li>[ ] <strong>Tester la palette cyan</strong> sur un mock de page produit</li>
<li>[ ] <strong>Dessiner les 10 premieres icones</strong> dans le style geste/pinceau</li>
<li>[ ] <strong>Implementer SUMI v3</strong> dans Veza (palette + grain + base)</li>
<li>[ ] <strong>Creer les declinaisons logo</strong> (toutes les versions listees ci-dessus)</li>
</ol>
<hr />
<h2>Voir aussi</h2>
<ul>
<li>[[05_EXPERIENCE_UTILISATEUR/CHARTE_GRAPHIQUE_TALAS]] — Charte graphique complete (regles d'application)</li>
<li>[[05_EXPERIENCE_UTILISATEUR/GUIDE_CREATION_LOGO]] — Guide pratique de creation du logo</li>
<li>[[05_EXPERIENCE_UTILISATEUR/DIRECTION_ARTISTIQUE_TALAS]] — Direction artistique complete (le "pourquoi")</li>
<li>[[05_EXPERIENCE_UTILISATEUR/SUMI_V3_SPECIFICATION]] — Design system SUMI v3 (le "comment")</li>
<li>[[05_EXPERIENCE_UTILISATEUR/CONCEPTS_INNOVANTS_VEZA]] — Concepts innovants UX</li>
<li>[[07_CONTENUS_MARKETING/STRATEGIE_CONTENU]] — Strategie de contenu (style RS)</li>
<li>[[07_CONTENUS_MARKETING/Storytelling/MANIFESTE_TALAS]] — Manifeste Talas</li>
<li>[[00_META/TALAS_IDENTITE_PROJET]] — Valeurs et identite du projet</li>
<li>[[02_PRODUITS_PHYSIQUES/Microphone/FICHE_PRODUIT]] — Fiche produit micro (design physique)</li>
</ul>
<div class='page-break'></div>
<div class='doc-header'>
<h2>📄 README.md</h2>
<div class='doc-path'>Chemin: 05_EXPERIENCE_UTILISATEUR/Identite_Visuelle/README.md</div>
</div>
<h1>Identite Visuelle — Assets Talas &amp; Veza</h1>
<blockquote>
<p>Ce dossier contient tous les fichiers graphiques de l'identite visuelle.
Pour les regles d'utilisation, voir [[CHARTE_GRAPHIQUE_TALAS]].
Pour la creation du logo, voir [[GUIDE_CREATION_LOGO]].</p>
</blockquote>
<h2>Arborescence</h2>
<pre><code>Identite_Visuelle/
├── logo/
│ ├── talas/ SVG sources du logo Talas (symbole, logotype, declinaisons)
│ ├── veza/ SVG sources du logo Veza
│ ├── exports/
│ │ ├── png/ Exports PNG toutes tailles
│ │ ├── favicon/ ICO + PNG + SVG favicon
│ │ └── og/ Images 1200x630 pour meta tags
│ └── references/
│ └── croquis/ Scans des croquis papier et gestes a l'encre
├── palette/ Planches de swatches, fichiers ASE
├── typographie/
│ └── fonts/ Fichiers woff2 (Space Grotesk, Inter, JetBrains Mono)
├── icones/
│ ├── originaux/ Scans des icones dessinees a la main
│ └── svg/ Icones vectorisees finales
├── textures/ Texture washi (PNG tileable)
└── templates/ Gabarits RS, OG image, templates de communication
</code></pre>
<h2>Statut</h2>
<ul>
<li>[ ] Logo Talas (symbole + logotype)</li>
<li>[ ] Logo Veza (logotype)</li>
<li>[ ] Exports PNG toutes tailles</li>
<li>[ ] Favicon</li>
<li>[ ] Palette (planche de swatches)</li>
<li>[ ] Polices telechargees (woff2)</li>
<li>[ ] Icones (10 prioritaires)</li>
<li>[ ] Texture washi</li>
<li>[ ] Templates RS (avatar, banniere, post, story)</li>
<li>[ ] OG image</li>
</ul>
<div class='page-break'></div>
<div class='doc-header'>
<h2>📄 PROMPT_GENERATION_VISUELS.md</h2>
<div class='doc-path'>Chemin: 05_EXPERIENCE_UTILISATEUR/PROMPT_GENERATION_VISUELS.md</div>
</div>
<h1>Prompt de generation des visuels d'identite graphique — Talas</h1>
<blockquote>
<p>Prompt complet a fournir a un modele de generation d'images (Gemini, etc.)
pour produire les visuels fondateurs de l'identite visuelle Talas.</p>
<p>Base sur : [[DIRECTION_ARTISTIQUE_TALAS]], [[IDENTITE_VISUELLE]], [[SUMI_V3_SPECIFICATION]]</p>
<p>Date de creation : 27 mars 2026.</p>
</blockquote>
<hr />
<h2>Le prompt</h2>
<pre><code>Tu es un directeur artistique specialise en branding et identite visuelle pour des marques artisanales haut de gamme. Tu vas generer les visuels fondateurs de l'identite graphique de TALAS — une marque de materiel audio professionnel (microphones) artisanal, reparable, durable, destinee aux artistes independants (beatmakers, podcasteurs, musiciens home-studio, 15-30 ans).
═══════════════════════════════════════
DIRECTION ARTISTIQUE FONDATRICE
═══════════════════════════════════════
L'identite visuelle de Talas est un LAVIS JAPONAIS INTERACTIF (sumi-e numerique). Ce n'est pas une inspiration ou une metaphore — c'est le langage visuel litteral de la marque.
Le concept : l'ecran est du papier washi. Les elements sont des traces d'encre. Le cyan est la seule touche de couleur — comme un pigment rare dans un lavis monochrome.
Le design system s'appelle SUMI (encre en japonais).
Mots-cles de la marque : lavis, encre, eau, papier, geste, brut, artisanal, vivant, contraste, diffusion, profondeur, independant, anti-corporate, singulier, durable, solide, silencieux.
═══════════════════════════════════════
PALETTE DE COULEURS (stricte)
═══════════════════════════════════════
MODE JOUR :
- Fond &quot;papier washi&quot; : #F2EDE6 (blanc casse chaud, JAMAIS blanc pur)
- Encre/texte : #1A1A1E (noir sumi, dense mais pas dur)
- Encre diluee : #9A958D (gris chaud, texte secondaire)
- Cyan accent : #0098B5 (LA seule couleur vive — rare et precieuse)
- Cyan hover : #00B4D8
MODE NUIT :
- Fond &quot;papier sombre&quot; : #0D0D0F (noir encre profond, pas pur)
- Encre claire : #E8E3DB (blanc creme doux)
- Cyan profond : #006B7F (teal sombre)
Couleurs fonctionnelles (toujours diluees, jamais en aplat) :
- Succes : vert sauge dilue rgba(90, 140, 100, 0.60)
- Erreur : rouge brique dilue rgba(180, 80, 70, 0.55)
- Warning : ambre dilue rgba(190, 150, 60, 0.55)
REGLE ABSOLUE : le cyan est la SEULE couleur d'accent. Il n'apparait que la ou ca compte (liens, CTA, focus, elements interactifs actifs). En grande surface il est toujours diffuse, comme du pigment qui s'etend dans l'eau.
═══════════════════════════════════════
TYPOGRAPHIE
═══════════════════════════════════════
- Titres / marque : Space Grotesk Bold — MAJUSCULES, letter-spacing large (~0.12em). Evoque une inscription gravee dans la pierre ou frappee sur metal.
- Corps : Inter Regular/Semi-Bold — lisible, neutre, interligne genereux (1.6-1.8)
- Code/specs : JetBrains Mono Regular
- Le texte flotte dans le papier avec du padding genereux
- Le texte secondaire s'efface comme un lavis dilue (gris doux #9A958D)
═══════════════════════════════════════
LOGO — SPECIFICATIONS
═══════════════════════════════════════
Le logo existe en DEUX formes independantes qui peuvent etre associees :
1. LE LOGOTYPE :
- Le mot &quot;TALAS&quot; en Space Grotesk Bold
- MAJUSCULES, letter-spacing large
- Sobre, inscrit — comme grave dans la pierre ou frappe sur metal
- Fonctionne seul, sans le symbole
2. LE SYMBOLE :
- Un geste dessine a la main, calligraphique
- Evoque A LA FOIS l'onde sonore ET le trait de pinceau
- Irregulier volontairement (PAS lisse par logiciel — conserver les imperfections du geste)
- Fonctionne en 16x16 (favicon) comme en grand
- Monochrome strict — jamais de couleur dans le symbole
- Doit fonctionner en gravure laser sur aluminium, en serigraphie, en broderie sur tissu
Contraintes techniques :
- Fonctionne en monochrome pur (noir sur blanc ET blanc sur noir)
- Lisible en tres petit (favicon 16x16, marquage produit sur aluminium)
- Reconnaissable sans le texte (symbole seul = suffisant)
Versions a generer :
- Logotype seul (horizontal)
- Symbole seul (carre)
- Logotype + symbole (horizontal — symbole a gauche)
- Logotype + symbole (vertical — symbole au-dessus)
- Favicon (symbole simplifie, carre)
- Version monochrome noir sur fond washi #F2EDE6
- Version monochrome blanc sur fond noir #0D0D0F
- Version pour gravure/marquage metal (traits epais, simplifies)
═══════════════════════════════════════
MATERIAUX DE REFERENCE VISUELS
═══════════════════════════════════════
L'identite traduit ces materiaux reels en numerique :
- Papier washi → texture de fond partout, grain subtil, jamais de surface lisse
- Encre sumi → texte, bordures, elements — noir riche, jamais gris moyen
- Eau → le cyan, les flous, les transitions douces, la diffusion
- Pierre a encre (suzuri) → elements fixes, lourds et stables
- Pinceau (fude) → icones, traits, waveforms
- Aluminium brut → le micro lui-meme, les elements techniques
═══════════════════════════════════════
ICONOGRAPHIE — STYLE &quot;GESTE&quot;
═══════════════════════════════════════
Les icones sont des GESTES DESSINES, comme des caracteres calligraphiques simplifies. PAS des SVG generiques lisses.
Contraintes :
- Aspect dessine a la main, trait de pinceau preserve
- Epaisseur de trait variable (plus epaisse au debut du geste, plus fine a la fin)
- Monochrome (currentColor)
- Maximum 30 icones uniques
Icones cles a generer :
- Play : trait de pinceau diagonal formant un triangle en un seul geste rapide
- Pause : deux traits verticaux comme deux colonnes d'encre
- Recherche : cercle ouvert (enso / cercle zen non ferme)
- Profil : forme de capsule de micro (ovale + trait de base)
- Chat/communaute : trois arcs concentriques (onde sonore)
- Upload : trait ascendant avec goutte au sommet
- Settings : cercle avec trait (roue simplifiee)
- Home : triangle inverse (montagne minimaliste)
═══════════════════════════════════════
PACKAGING PHYSIQUE
═══════════════════════════════════════
Le packaging prolonge le lavis dans le monde physique :
- Boite : carton kraft non blanchi (= le &quot;papier&quot; du lavis)
- Impression : logo noir seul, comme un hanko (sceau japonais) tamponne
- Livret de reparation : papier recycle, schemas en style trait de pinceau
- Sticker : logo monochrome (encre noire sur fond transparent)
- Pochette tissu : NOIRE avec logo brode en CYAN (#0098B5) — la seule touche de couleur
- Numero de serie : frappe a froid (pas imprime)
═══════════════════════════════════════
RESEAUX SOCIAUX
═══════════════════════════════════════
- Avatar : symbole Talas sur fond papier washi #F2EDE6 (ou fond noir encre #0D0D0F)
- Banniere : photo d'atelier traitee en noir &amp; blanc avec grain, style lavis
- Videos : sous-titres en Space Grotesk, fond = lavis diffus
- Le style evoque le lavis sans l'imiter lourdement
═══════════════════════════════════════
CE QUE TALAS N'EST PAS (anti-references)
═══════════════════════════════════════
NE GENERE JAMAIS :
- Du premium/luxe (pas de dore, pas de serif elegant, pas de marbre)
- Du cheap/discount (pas de rouge promo, pas de clipart)
- Du corporate (pas de bleu LinkedIn, pas de stock photos, pas de Material Design)
- Du &quot;eco-friendly cute&quot; (pas de vert pastel avec des feuilles)
- Du industriel/steampunk (pas de cuivre, pas d'engrenages)
- Du neon/cyberpunk (pas de noir + neon partout)
- Du glassmorphism / neumorphism
- Du dark mode Spotify/Discord (neon surexploite dans l'audio)
- Du minimalisme Apple (trop froid, trop parfait)
- Du retro/synthwave
- Du &quot;Web3 aesthetic&quot;
- Des polices &quot;japonisantes&quot; kitsch
INSPIRATIONS AUTORISEES (l'esprit, pas la copie) :
- Teenage Engineering → un langage visuel si singulier qu'on le reconnait en 1 seconde
- Are.na → la lenteur, le vide, le refus du bruit visuel
- Muji → l'absence de marque visible, la qualite silencieuse
- Ableton Live → une interface qui ne ressemble a rien d'autre
- Nothing (telephone) → systeme visuel complet et proprietaire
- Ukiyo-e / estampes japonaises → la composition, les plans, la couleur rare dans le monochrome
- Ryoji Ikeda → art visuel+son, minimalisme extreme, noir/blanc/data
═══════════════════════════════════════
TEXTURES ET SURFACES
═══════════════════════════════════════
- Le fond porte TOUJOURS une texture de papier washi (grain visible, ton chaud)
- Les surfaces elevees sont des couches d'encre diluee posees sur le papier (opacites croissantes)
- Les bordures sont des traits de pinceau, legerement irreguliers, pas des lignes CSS nettes
- Les effets de diffusion imitent l'eau : bords doux, fondus, spread large et opacite faible
- L'espace vide (ma 間) est un choix de design — padding genereux, jamais surcharge
═══════════════════════════════════════
CONTEXTE DE LA MARQUE
═══════════════════════════════════════
Talas est une marque de materiel audio independante fondee par un seul artiste-ingenieur en France. Elle fabrique des microphones a condensateur artisanaux, reparables, avec schemas publics et composants standards. Le manifeste : &quot;Ton micro n'est pas cense mourir au bout de 3 ans. Ton micro n'est pas cense etre impossible a ouvrir.&quot; C'est un outil, pas une marque. Anti-corporate, anti-obsolescence, pro-artiste.
La plateforme web associee s'appelle Veza — une communaute pour artistes independants (partage de samples, streaming, boutique ethique).
═══════════════════════════════════════
CE QUE JE VEUX QUE TU GENERES
═══════════════════════════════════════
Genere les visuels suivants, un par un, en respectant STRICTEMENT la direction artistique ci-dessus :
1. LOGO — Le symbole Talas (geste calligraphique evoquant onde sonore + trait de pinceau, monochrome, irregulier, sur fond washi #F2EDE6)
2. LOGO — Le logotype &quot;TALAS&quot; en Space Grotesk Bold, MAJUSCULES, letter-spacing large, sur fond washi
3. LOGO — Combinaison logotype + symbole (horizontal), sur fond washi
4. LOGO — Meme combinaison sur fond noir encre #0D0D0F (version nuit)
5. FAVICON — Symbole simplifie pour 32x32, monochrome
6. MOCKUP PACKAGING — Boite kraft avec hanko noir, pochette tissu noire avec broderie cyan, sticker monochrome
7. MOCKUP PRODUIT — Microphone a condensateur aluminium mat avec symbole Talas grave, pose sur surface washi, eclairage naturel doux
8. SET D'ICONES — Les 8 icones cles (play, pause, recherche, profil, chat, upload, settings, home) dans le style geste/pinceau, monochrome, sur fond washi
9. AVATAR RESEAUX SOCIAUX — Symbole sur fond washi (version jour) + symbole sur fond noir (version nuit)
10. BANNIERE RESEAUX SOCIAUX — Photo d'atelier audio traitee en noir &amp; blanc grain lavis, avec logotype Talas discret
11. PLANCHE D'AMBIANCE (MOODBOARD) — Composition evoquant l'univers Talas : papier washi, encre sumi, pinceau, eau, aluminium brut, cyan comme seule couleur, espace vide japonais
12. MOCKUP WEB — Page d'accueil Veza : fond texture washi, elements en couches d'encre, accent cyan, typographie Space Grotesk + Inter, espace vide genereux, waveform en trait de pinceau
Pour chaque visuel : haute resolution, style photographique realiste pour les mockups physiques, style flat/graphique pour les elements d'identite. Respect absolu de la palette (washi + encre + cyan uniquement). Aucune autre couleur.
</code></pre>
<hr />
<h2>Voir aussi</h2>
<ul>
<li>[[DIRECTION_ARTISTIQUE_TALAS]] — Direction artistique complete (le "pourquoi")</li>
<li>[[IDENTITE_VISUELLE]] — Brief d'identite visuelle (logo, palette, typos)</li>
<li>[[SUMI_V3_SPECIFICATION]] — Design system SUMI v3 (implementation technique)</li>
</ul>
<div class='page-break'></div>
<div class='doc-header'>
<h2>📄 README.md</h2>
<div class='doc-path'>Chemin: 05_EXPERIENCE_UTILISATEUR/README.md</div>
</div>
<h1>05_EXPERIENCE_UTILISATEUR – UX/UI et Parcours Client</h1>
<p>Ce dossier regroupe tout ce qui concerne l’<strong>interface</strong>, les <strong>flux utilisateurs</strong>, et l’<strong>ergonomie</strong> des applications et produits Talas.</p>
<h2>Objectifs</h2>
<ul>
<li>Créer une interface fluide, intuitive et cohérente avec les valeurs de Talas.</li>
<li>Tester les parcours utilisateurs pour garantir une adoption facile.</li>
<li>Maintenir une <strong>expérience continue</strong> entre site, apps, et matériel.</li>
</ul>
<h2>Contenu attendu</h2>
<ul>
<li><code>Design_System/</code> : composants UI réutilisables, tokens de design.</li>
<li><code>Figma_Prototypes/</code> : maquettes haute fidélité.</li>
<li><code>Flux_Utilisateurs/</code> : parcours types, onboarding, usage quotidien.</li>
<li><code>Tests_Utilisateurs/</code> : retours, A/B testing, sessions enregistrées.</li>
<li><code>Accessibilité/</code> : conformité WCAG, audit a11y.</li>
</ul>
<h2>Responsable</h2>
<p>Lead UX/UI + équipe design</p>
<h2>Connexions transversales</h2>
<ul>
<li><code>03_APPS_&amp;_SERVICES/</code> (implémentation frontend)</li>
<li><code>06_COMMUNAUTE_ECOSYSTEME/</code> (retours utilisateurs)</li>
<li><code>10_QUALITE_TESTS/</code> (tests qualitatifs et quantitatifs)</li>
</ul>
<div class='page-break'></div>
<div class='doc-header'>
<h2>📄 SUMI_V3_SPECIFICATION.md</h2>
<div class='doc-path'>Chemin: 05_EXPERIENCE_UTILISATEUR/SUMI_V3_SPECIFICATION.md</div>
</div>
<h1>SUMI v3 — Specification du Design System</h1>
<blockquote>
<p>Ce document est la specification technique complete de SUMI v3.
Il definit les regles, contraintes et tokens a implementer pour obtenir
une UI singuliere, vivante et econome en ressources.
Toute modification de l'UI doit etre conforme a ce document.</p>
<p>Direction artistique : <strong>lavis japonais interactif (sumi-e numerique)</strong>.
Voir [[05_EXPERIENCE_UTILISATEUR/DIRECTION_ARTISTIQUE_TALAS]] pour la philosophie complete.</p>
</blockquote>
<hr />
<h2>1. Ce qui change entre SUMI v2 et v3</h2>
<table>
<thead>
<tr>
<th>SUMI v2 (actuel)</th>
<th>SUMI v3 (cible)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Palette indigo froide (#7c9dd6)</td>
<td>Palette cyan (#0098B5) — touche de couleur unique dans un lavis monochrome</td>
</tr>
<tr>
<td>Surfaces plates (flat design)</td>
<td>Surfaces = couches d'encre diluee sur papier washi</td>
</tr>
<tr>
<td>Themes statiques (dark/light)</td>
<td>Theme circadien (le lavis suit le soleil — papier chaud/froid/inverse)</td>
</tr>
<tr>
<td>Interface figee</td>
<td>Interface qui se patine (le papier vieillit, l'encre s'oxyde)</td>
</tr>
<tr>
<td>Animations generiques</td>
<td>Animations avec le poids de l'eau (goutte/trait/lavis/vague/maree)</td>
</tr>
<tr>
<td>Icones standard</td>
<td>Icones = gestes calligraphiques dessines a la main</td>
</tr>
<tr>
<td>Player = barre en bas</td>
<td>Player = suzuri (pierre a encre) — objet le plus dense de l'interface</td>
</tr>
<tr>
<td>Performance non budgetee</td>
<td>Budget strict par metrique</td>
</tr>
<tr>
<td>Bordures nettes (border CSS)</td>
<td>Bords diffus comme l'encre dans l'eau (box-shadow tres diffus)</td>
</tr>
</tbody>
</table>
<p><strong>Ce qui est conserve :</strong>
- L'architecture tokens (CSS custom properties + TypeScript)
- Le nommage <code>--sumi-*</code> pour toutes les variables
- La grille de 4px
- Les composants existants (refactores, pas remplaces)
- Tailwind v4 CSS-first
- Les modes accessibilite (high contrast, reduced motion, density)
- Space Grotesk + Inter + JetBrains Mono (deja valides dans la direction artistique)</p>
<hr />
<h2>2. Palette — encre, papier et cyan</h2>
<h3>2.1 Accent principal : le cyan</h3>
<p>Le cyan (#0098B5) est la seule couleur d'accent. Dans un lavis traditionnel,
une seule touche de couleur suffit a tout transformer. Le cyan est cette touche.
Il evoque l'eau — l'element qui transporte l'encre, qui donne vie au lavis.
Il contraste avec le noir/blanc ambiant comme un eclat de ciel dans un
paysage monochrome.</p>
<pre><code class="language-css">/* SUMI v3 — Pigment primaire (cyan) */
--sumi-accent: #0098B5;
--sumi-accent-hover: #00B4D8;
--sumi-accent-active: #007A94;
--sumi-accent-muted: rgba(0, 152, 181, 0.15);
--sumi-accent-subtle: rgba(0, 152, 181, 0.08);
--sumi-accent-emphasis: #006B7F;
/* Focus ring — cyan diffus dans l'eau */
--sumi-border-focus: rgba(0, 152, 181, 0.50);
--sumi-shadow-glow: 0 0 0 3px rgba(0, 152, 181, 0.25);
--sumi-shadow-glow-lg: 0 0 20px rgba(0, 152, 181, 0.12);
</code></pre>
<h3>2.2 Pigments fonctionnels — pastel diffuse</h3>
<p>Les couleurs fonctionnelles sont des pigments dilues dans beaucoup d'eau.
Elles apparaissent rarement : en lignes fines, en micro-points, en halos subtils.
Jamais en aplats. Elles ne rivalisent jamais avec le cyan.</p>
<pre><code class="language-css">--sumi-success: rgba(90, 140, 100, 0.60); /* Vert sauge dilue */
--sumi-error: rgba(180, 80, 70, 0.55); /* Rouge brique dilue */
--sumi-warning: rgba(190, 150, 60, 0.55); /* Ambre dilue */
--sumi-info: #0098B5; /* Le cyan lui-meme */
</code></pre>
<p>Regles des couleurs fonctionnelles :
- Jamais en aplat (pas de fond rouge plein pour une erreur)
- Toujours en ligne fine, point, bordure, ou halo diffus
- L'opacite ne depasse jamais 60% — elles sont toujours "diluees"
- Si le cyan est present au meme endroit, la couleur fonctionnelle passe en gris + icone</p>
<h3>2.3 Fonds — papier washi et encre noire</h3>
<p>Le fond est du papier. Jamais une surface lisse. Jamais du blanc pur.
Jamais du noir pur. Le papier a une texture, une chaleur, une vie.</p>
<pre><code class="language-css">/* Jour (papier washi clair) */
--sumi-bg-void: #EBE5DD; /* Washi vieilli — le papier le plus expose */
--sumi-bg-base: #F2EDE6; /* Fond principal — papier washi */
--sumi-bg-raised: #F7F3EC; /* Surfaces posees sur le papier */
--sumi-bg-overlay: #FBF8F2; /* Dropdowns, overlays */
--sumi-bg-hover: rgba(26, 26, 30, 0.06); /* Encre tres diluee */
--sumi-bg-active: rgba(26, 26, 30, 0.10); /* Encre legerement plus dense */
/* Nuit (lavis inverse — papier sombre, encre claire) */
--sumi-bg-void: #09090B; /* Noir d'encre profond */
--sumi-bg-base: #0D0D0F; /* Fond principal — papier sombre */
--sumi-bg-raised: #141416; /* Surfaces : couche d'encre legerement plus claire */
--sumi-bg-overlay: #1A1A1E; /* Overlays */
--sumi-bg-hover: rgba(232, 227, 219, 0.06); /* Encre claire diluee */
--sumi-bg-active: rgba(232, 227, 219, 0.10); /* Encre claire plus dense */
</code></pre>
<h3>2.4 Texte — encre sur papier</h3>
<p>Le texte est de l'encre posee sur du papier. Noir profond le jour,
blanc creme la nuit. Le texte secondaire est de l'encre diluee.</p>
<pre><code class="language-css">/* Jour */
--sumi-text-primary: #1A1A1E; /* Encre sumi — dense mais pas pur */
--sumi-text-secondary: #9A958D; /* Encre diluee — gris chaud */
--sumi-text-tertiary: #B5B0A8; /* Encre tres diluee — s'efface comme un lavis dilue */
--sumi-text-link: #0098B5; /* Liens = accent cyan */
/* Nuit (inversion) */
--sumi-text-primary: #E8E3DB; /* Encre claire sur papier sombre */
--sumi-text-secondary: #9A958D; /* Encre diluee — reste gris chaud */
--sumi-text-tertiary: #706B63; /* Encre tres diluee en mode nuit */
--sumi-text-link: #006B7F; /* Cyan profond la nuit */
</code></pre>
<hr />
<h2>3. Texture washi et couches d'encre</h2>
<h3>3.1 Principe</h3>
<p>Les surfaces ne sont jamais parfaitement lisses. Le fond porte la texture
du papier washi — grain subtil, fibres visibles, surface vivante. Les elements
poses dessus sont des couches d'encre diluee a differentes concentrations.</p>
<h3>3.2 Implementation technique — texture washi</h3>
<p><strong>Un seul fichier image : <code>washi.png</code> (512x512, ~8 Ko)</strong></p>
<p>Photo d'un vrai papier washi, desaturee, grain visible.
Applique sur le body en pseudo-element.</p>
<pre><code class="language-css">/* Pseudo-element sur le body — texture washi globale */
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: var(--sumi-z-max);
background-image: url('/washi.png');
background-repeat: repeat;
opacity: var(--sumi-washi-opacity, 0.04);
mix-blend-mode: soft-light;
}
/* Variable de controle */
:root {
--sumi-washi-opacity: 0.04; /* Subtil — a peine perceptible */
}
/* Desactive en mode eco ou reduced-motion */
@media (prefers-reduced-motion: reduce) {
body::after { display: none; }
}
[data-eco=&quot;true&quot;] body::after { display: none; }
</code></pre>
<p><strong>Cout en performance :</strong> ~8 Ko au chargement, 0 impact en runtime (image statique,
GPU-composited via <code>position: fixed</code>). Negligeable.</p>
<h3>3.3 Couches d'encre par surface</h3>
<p>Les surfaces elevees sont des couches d'encre diluee posees sur le papier.
Pas de box-shadow traditionnelle — des diffusions douces, comme l'encre
qui s'etend dans du papier mouille.</p>
<pre><code class="language-css">/* Les cartes sont des voiles d'encre poses sur le washi */
.sumi-card {
background: rgba(26, 26, 30, 0.04);
backdrop-filter: blur(8px);
/* Pas de border — un bord diffus d'encre */
box-shadow: 0 0 8px rgba(26, 26, 30, 0.05);
border: none;
}
/* Overlays — encre plus concentree */
.sumi-overlay {
background: rgba(26, 26, 30, 0.08);
backdrop-filter: blur(16px);
box-shadow: 0 0 16px rgba(26, 26, 30, 0.08);
border: none;
}
/* Modales — couche la plus dense */
.sumi-modal {
background: rgba(26, 26, 30, 0.15);
backdrop-filter: blur(24px);
box-shadow: 0 0 24px rgba(26, 26, 30, 0.10);
border: none;
}
</code></pre>
<table>
<thead>
<tr>
<th>Elevation</th>
<th>Opacite encre</th>
<th>Blur du backdrop</th>
<th>Effet</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fond (papier)</td>
<td>0%</td>
<td>—</td>
<td>Le papier washi brut</td>
</tr>
<tr>
<td>Surface (carte)</td>
<td>4-8%</td>
<td>8px</td>
<td>Un voile d'encre tres leger</td>
</tr>
<tr>
<td>Overlay (dropdown)</td>
<td>8-12%</td>
<td>16px</td>
<td>Une couche plus dense</td>
</tr>
<tr>
<td>Modale</td>
<td>12-20%</td>
<td>24px</td>
<td>Une zone nettement marquee</td>
</tr>
<tr>
<td>Player (suzuri)</td>
<td>20-30%</td>
<td>32px</td>
<td>L'element le plus "encre" — le plus present</td>
</tr>
</tbody>
</table>
<h3>3.4 Bordures = diffusion d'encre</h3>
<p>Les bordures ne sont pas des lignes CSS nettes. Elles sont des bords diffus
d'encre, comme le contour d'une tache d'eau sur du papier.</p>
<pre><code class="language-css">/* MAL — bordure nette, mecanique */
border: 1px solid rgba(0, 0, 0, 0.1);
/* BIEN — bord diffus d'encre */
box-shadow: 0 0 6px rgba(26, 26, 30, 0.06);
border: none;
</code></pre>
<p><strong>Regle : jamais de <code>border</code> visible. Toujours un <code>box-shadow</code> diffus
(spread 0, blur 4-8px, opacite 3-8%).</strong></p>
<hr />
<h2>4. Theme circadien — le lavis suit le soleil</h2>
<h3>4.1 Concept</h3>
<p>La "temperature" du papier change avec l'heure, comme la lumiere naturelle
sur un rouleau de papier pose pres d'une fenetre. Le matin, le papier est
chaud. Le jour, il est neutre. Le soir, il se rechauffe. La nuit, le lavis
s'inverse : papier sombre, encre claire, cyan profond.</p>
<h3>4.2 Phases circadiennes</h3>
<table>
<thead>
<tr>
<th>Phase</th>
<th>Heures</th>
<th>Ambiance</th>
<th>Modification</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Aube</strong></td>
<td>05h-08h</td>
<td>Papier rose/chaud, encre douce</td>
<td>Fonds legerement plus chauds, cyan tire vers le teal</td>
</tr>
<tr>
<td><strong>Jour</strong></td>
<td>08h-17h</td>
<td>Papier neutre, contraste maximal</td>
<td>Palette standard — cyan vif</td>
</tr>
<tr>
<td><strong>Crepuscule</strong></td>
<td>17h-20h</td>
<td>Papier qui se rechauffe, encre dense</td>
<td>Fonds plus chauds, cyan plus profond</td>
</tr>
<tr>
<td><strong>Nuit</strong></td>
<td>20h-05h</td>
<td>Lavis inverse</td>
<td>Papier sombre (#0D0D0F), encre claire (#E8E3DB), cyan profond (#006B7F)</td>
</tr>
</tbody>
</table>
<h3>4.3 Implementation technique</h3>
<pre><code class="language-typescript">// circadian.ts — calcule les ajustements de palette
interface CircadianShift {
bgWarmth: number; // -5 to +5 (degres hue shift sur les fonds)
accentWarmth: number; // -3 to +3 (degres hue shift sur l'accent)
brightness: number; // 0.95 to 1.05 (multiplicateur de luminosite)
contrast: number; // 0.97 to 1.0 (multiplicateur de contraste)
}
function getCircadianShift(hour: number): CircadianShift {
if (hour &gt;= 5 &amp;&amp; hour &lt; 8) {
// Aube — papier plus chaud, encre plus douce
return { bgWarmth: 3, accentWarmth: 2, brightness: 1.02, contrast: 0.98 };
}
if (hour &gt;= 8 &amp;&amp; hour &lt; 17) {
// Jour — neutre, contraste maximal, cyan vif
return { bgWarmth: 0, accentWarmth: 0, brightness: 1.0, contrast: 1.0 };
}
if (hour &gt;= 17 &amp;&amp; hour &lt; 20) {
// Crepuscule — papier qui se rechauffe, encre plus dense
return { bgWarmth: 4, accentWarmth: 3, brightness: 0.98, contrast: 0.99 };
}
// Nuit — le lavis s'inverse, cyan s'approfondit
return { bgWarmth: 1, accentWarmth: -1, brightness: 0.95, contrast: 0.97 };
}
</code></pre>
<h3>4.4 Application aux tokens CSS</h3>
<pre><code class="language-typescript">// Dans ThemeProvider, au montage + toutes les 30 minutes
function applyCircadianShift() {
const hour = new Date().getHours();
const shift = getCircadianShift(hour);
// Applique les shifts via des custom properties sur :root
document.documentElement.style.setProperty(
'--sumi-circadian-warmth', `${shift.bgWarmth}deg`
);
document.documentElement.style.setProperty(
'--sumi-circadian-brightness', `${shift.brightness}`
);
}
// Recalcul toutes les 30 min (pas besoin de plus frequent)
setInterval(applyCircadianShift, 30 * 60 * 1000);
</code></pre>
<pre><code class="language-css">/* Les fonds utilisent un filtre CSS plutot que de recalculer les couleurs */
:root {
--sumi-circadian-warmth: 0deg;
--sumi-circadian-brightness: 1;
}
/* Applique sur le conteneur principal, pas sur chaque element */
#app {
filter:
hue-rotate(var(--sumi-circadian-warmth))
brightness(var(--sumi-circadian-brightness));
transition: filter 300s linear; /* Transition de 5 min, imperceptible */
}
</code></pre>
<h3>4.5 Contraintes</h3>
<ul>
<li>Le changement est <strong>imperceptible en temps reel</strong> (transition de 5 min)</li>
<li>L'utilisateur ne doit jamais "voir" le changement — il le ressent</li>
<li>L'accent cyan reste toujours reconnaissable (shift max : +/- 3 degres de hue)</li>
<li>Le mode circadien est optionnel : un toggle dans les settings pour le desactiver</li>
<li>En mode jour (papier clair), le circadien ajuste la temperature mais ne passe
jamais en nuit (papier sombre), et inversement</li>
<li>La nuit est une inversion complete du lavis : papier sombre + encre claire + cyan profond</li>
<li>La transition jour/nuit est un fondu de 30 minutes, imperceptible</li>
<li><strong>Cout CPU : un setInterval de 30 min + 2 CSS custom properties. Negligeable.</strong></li>
</ul>
<hr />
<h2>5. Systeme de patine</h2>
<h3>5.1 Concept</h3>
<p>Avec le temps et l'usage, l'interface se patine comme un rouleau ancien.
Le papier vieillit. L'encre s'oxyde et gagne en profondeur. Le grain du
washi devient plus prononce. Le cyan prend des nuances plus profondes.</p>
<h3>5.2 Tokens de patine</h3>
<pre><code class="language-css">:root {
/* Calculees au login, basees sur le profil utilisateur */
--sumi-patina-level: 0; /* 0-4, entier */
--sumi-patina-warmth: 0; /* 0-10, degres de hue shift additionnel */
--sumi-patina-washi: 0.04; /* 0.04-0.08, opacite de la texture washi */
--sumi-patina-depth: 0; /* 0-3, diffusion d'encre additionnelle */
--sumi-patina-texture: none; /* none | subtle | rich | deep */
}
</code></pre>
<h3>5.3 Calcul de la patine</h3>
<pre><code class="language-typescript">interface UserPatinaData {
accountAgeDays: number;
totalPlayTimeHours: number;
totalUploads: number;
totalMessages: number;
totalExchanges: number;
}
function calculatePatina(data: UserPatinaData): PatinaTokens {
// Score composite (0-100)
const ageScore = Math.min(data.accountAgeDays / 365, 1) * 25;
const playScore = Math.min(data.totalPlayTimeHours / 500, 1) * 25;
const createScore = Math.min(data.totalUploads / 20, 1) * 25;
const socialScore = Math.min(
(data.totalMessages + data.totalExchanges * 5) / 200, 1
) * 25;
const score = ageScore + playScore + createScore + socialScore;
// Niveau discret (0-4)
let level = 0;
if (score &gt;= 15) level = 1; // Rode
if (score &gt;= 35) level = 2; // Vecu
if (score &gt;= 60) level = 3; // Patine
if (score &gt;= 85) level = 4; // Heritage
return {
level,
warmth: level * 2.5, // 0, 2.5, 5, 7.5, 10
washi: 0.04 + (level * 0.01), // 0.04, 0.05, 0.06, 0.07, 0.08
depth: level * 0.75, // 0, 0.75, 1.5, 2.25, 3
texture: ['none', 'subtle', 'subtle', 'rich', 'deep'][level],
};
}
</code></pre>
<h3>5.4 Application visuelle par niveau</h3>
<table>
<thead>
<tr>
<th>Niveau</th>
<th>Texture washi</th>
<th>Chaleur</th>
<th>Diffusion encre</th>
<th>Effet visuel</th>
</tr>
</thead>
<tbody>
<tr>
<td>0 — Neuf</td>
<td>0.04</td>
<td>Aucune</td>
<td>Standard</td>
<td>Papier frais, encre nette</td>
</tr>
<tr>
<td>1 — Rode</td>
<td>0.05</td>
<td>+2.5 hue</td>
<td>Legerement plus diffuse</td>
<td>Papier qui commence a jaunir</td>
</tr>
<tr>
<td>2 — Vecu</td>
<td>0.06</td>
<td>+5 hue</td>
<td>Notablement plus riche</td>
<td>Fibres du washi plus visibles, encre plus chaude</td>
</tr>
<tr>
<td>3 — Patine</td>
<td>0.07</td>
<td>+7.5 hue</td>
<td>Diffusion prononcee</td>
<td>Papier ancien, encre oxydee aux reflets bruns</td>
</tr>
<tr>
<td>4 — Heritage</td>
<td>0.08</td>
<td>+10 hue</td>
<td>Profonde et chaleureuse</td>
<td>Rouleau ancien — texture riche, encre patinee, cyan profond</td>
</tr>
</tbody>
</table>
<h3>5.5 CSS de la patine</h3>
<pre><code class="language-css">/* Applique via data-attribute sur html */
[data-patina=&quot;1&quot;] { --sumi-washi-opacity: 0.05; }
[data-patina=&quot;2&quot;] { --sumi-washi-opacity: 0.06; }
[data-patina=&quot;3&quot;] {
--sumi-washi-opacity: 0.07;
/* Bords d'encre legerement plus diffus — l'encre a eu le temps de s'oxyder */
--sumi-border-default: 0 0 8px rgba(26, 26, 30, 0.08);
}
[data-patina=&quot;4&quot;] {
--sumi-washi-opacity: 0.08;
--sumi-border-default: 0 0 10px rgba(26, 26, 30, 0.12);
--sumi-shadow-sm: 0 2px 8px rgba(26, 26, 30, 0.10), 0 0 4px rgba(0, 152, 181, 0.06);
}
/* La patine se combine avec le circadien */
/* hue-rotate du circadien + hue-rotate de la patine = chaleur cumulee */
#app {
filter:
hue-rotate(calc(var(--sumi-circadian-warmth) + var(--sumi-patina-warmth, 0deg)))
brightness(var(--sumi-circadian-brightness));
}
</code></pre>
<h3>5.6 Regles inviolables de la patine</h3>
<ol>
<li><strong>Invisible consciemment.</strong> Si quelqu'un remarque "tiens l'UI a change", c'est trop fort.</li>
<li><strong>Pas de notification.</strong> Jamais "Felicitations, vous avez atteint le niveau 3".</li>
<li><strong>Pas de badge.</strong> La patine n'est pas visible par les autres utilisateurs.</li>
<li><strong>Pas d'avantage fonctionnel.</strong> Zero feature debloquee par la patine.</li>
<li><strong>Irreversible et non-achetable.</strong> Seul le temps et l'usage la creent.</li>
<li><strong>Calculee au login, pas en temps reel.</strong> Un seul calcul, pas de polling.</li>
</ol>
<hr />
<h2>6. Animations — le poids de l'eau</h2>
<h3>6.1 Principe physique</h3>
<p>Chaque element de l'UI a le poids de ce qu'il represente dans le lavis.
Les elements legers bougent comme des gouttes d'encre. Les elements lourds
bougent comme des vagues. L'eau est la metaphore universelle du mouvement.</p>
<h3>6.2 Classification des elements par masse</h3>
<table>
<thead>
<tr>
<th>Masse</th>
<th>Elements</th>
<th>Metaphore lavis</th>
<th>Duree</th>
<th>Easing</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Goutte</strong></td>
<td>Tooltips, badges, toggles</td>
<td>Goutte d'encre qui tombe</td>
<td>100ms</td>
<td>ease-out</td>
</tr>
<tr>
<td><strong>Trait</strong></td>
<td>Boutons, icones, liens</td>
<td>Trait de pinceau rapide</td>
<td>150ms</td>
<td>ease-out avec rebond leger</td>
</tr>
<tr>
<td><strong>Lavis</strong></td>
<td>Cards, dropdowns, tabs</td>
<td>Encre qui s'etend dans l'eau</td>
<td>250ms</td>
<td>cubic-bezier(0.25, 0.8, 0.25, 1)</td>
</tr>
<tr>
<td><strong>Vague</strong></td>
<td>Modales, sidebar, panneaux</td>
<td>Vague lente sur papier mouille</td>
<td>350ms</td>
<td>cubic-bezier(0.16, 1, 0.3, 1)</td>
</tr>
<tr>
<td><strong>Maree</strong></td>
<td>Navigation de page, player</td>
<td>Le mouvement de fond de l'ocean</td>
<td>450ms</td>
<td>cubic-bezier(0.33, 1, 0.68, 1)</td>
</tr>
</tbody>
</table>
<h3>6.3 Tokens de mouvement v3</h3>
<pre><code class="language-css">:root {
/* Durees par masse */
--sumi-motion-goutte: 100ms;
--sumi-motion-trait: 150ms;
--sumi-motion-lavis: 250ms;
--sumi-motion-vague: 350ms;
--sumi-motion-maree: 450ms;
/* Easings par masse */
--sumi-ease-goutte: cubic-bezier(0.25, 0.1, 0.25, 1);
--sumi-ease-trait: cubic-bezier(0.33, 1, 0.68, 1);
--sumi-ease-lavis: cubic-bezier(0.25, 0.8, 0.25, 1);
--sumi-ease-vague: cubic-bezier(0.16, 1, 0.3, 1);
--sumi-ease-maree: cubic-bezier(0.33, 1, 0.68, 1);
--sumi-ease-rebond: cubic-bezier(0.34, 1.56, 0.64, 1); /* Pour les gouttes/traits */
}
</code></pre>
<h3>6.4 Regle des 2 animations max</h3>
<p><strong>Jamais plus de 2 animations simultanees a l'ecran.</strong> Si un troisieme
element doit s'animer, il attend que le premier termine. Implemente via
un compteur CSS ou un gestionnaire JS leger.</p>
<h3>6.5 Transitions de page</h3>
<pre><code class="language-css">/* La page entrante apparait par couches — comme un lavis qui se revele */
.page-enter {
opacity: 0;
transform: translateY(6px);
}
.page-enter-active {
opacity: 1;
transform: translateY(0);
transition:
opacity var(--sumi-motion-lavis) var(--sumi-ease-trait),
transform var(--sumi-motion-lavis) var(--sumi-ease-vague);
}
/* La page sortante se dissout — comme l'encre qui seche */
.page-exit {
opacity: 1;
}
.page-exit-active {
opacity: 0;
transition: opacity 150ms ease-out;
}
</code></pre>
<h3>6.6 Hover — l'encre s'etend</h3>
<p>Les hover states font "s'etendre" l'element legerement, comme une goutte
d'eau qui s'elargit sur le papier.</p>
<pre><code class="language-css">.sumi-interactive:hover {
transform: scale(1.01);
box-shadow: 0 0 12px rgba(26, 26, 30, 0.08);
transition:
transform var(--sumi-motion-trait) var(--sumi-ease-trait),
box-shadow var(--sumi-motion-trait) var(--sumi-ease-trait);
}
</code></pre>
<hr />
<h2>7. Budgets de performance</h2>
<h3>7.1 Budgets stricts</h3>
<table>
<thead>
<tr>
<th>Metrique</th>
<th>Budget</th>
<th>Actuel (SUMI v2)</th>
<th>Methode de mesure</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bundle JS initial (gzip)</td>
<td><strong>&lt; 120 Ko</strong></td>
<td>~150 Ko</td>
<td><code>vite build --report</code></td>
</tr>
<tr>
<td>Bundle CSS total (gzip)</td>
<td><strong>&lt; 15 Ko</strong></td>
<td>?</td>
<td>Idem</td>
</tr>
<tr>
<td>First Contentful Paint</td>
<td><strong>&lt; 1.2s</strong></td>
<td>&lt; 1.5s</td>
<td>Lighthouse</td>
</tr>
<tr>
<td>Largest Contentful Paint</td>
<td><strong>&lt; 2.0s</strong></td>
<td>?</td>
<td>Lighthouse</td>
</tr>
<tr>
<td>Time to Interactive</td>
<td><strong>&lt; 1.8s</strong></td>
<td>&lt; 2s</td>
<td>Lighthouse</td>
</tr>
<tr>
<td>Cumulative Layout Shift</td>
<td><strong>&lt; 0.05</strong></td>
<td>?</td>
<td>Lighthouse</td>
</tr>
<tr>
<td>Total Blocking Time</td>
<td><strong>&lt; 150ms</strong></td>
<td>?</td>
<td>Lighthouse</td>
</tr>
<tr>
<td>Requetes au chargement initial</td>
<td><strong>&lt;= 5</strong></td>
<td>?</td>
<td>Network tab</td>
</tr>
<tr>
<td>Polices chargees</td>
<td><strong>&lt;= 2 fichiers</strong></td>
<td>3-4</td>
<td>Network tab</td>
</tr>
<tr>
<td>Images texture washi</td>
<td><strong>&lt;= 10 Ko total</strong></td>
<td>0</td>
<td>Taille des assets</td>
</tr>
<tr>
<td>Animations simultanees max</td>
<td><strong>2</strong></td>
<td>Illimite</td>
<td>Audit visuel</td>
</tr>
<tr>
<td><code>requestAnimationFrame</code> actifs au repos</td>
<td><strong>0</strong></td>
<td>?</td>
<td>Performance tab</td>
</tr>
<tr>
<td>Memoire JS heap (idle)</td>
<td><strong>&lt; 30 Mo</strong></td>
<td>?</td>
<td>Chrome DevTools</td>
</tr>
</tbody>
</table>
<h3>7.2 Strategies d'optimisation</h3>
<p><strong>Polices :</strong>
- Inter : charger uniquement Regular (400) et Semi-Bold (600) en variable font
- Space Grotesk : charger uniquement Bold (700) en variable font
- JetBrains Mono : charger uniquement Regular (400) — utilise rarement
- Format : <code>woff2</code> uniquement
- <code>font-display: swap</code> obligatoire
- Preload les 2 polices principales dans <code>&lt;head&gt;</code>
- <strong>Budget total polices : &lt; 80 Ko</strong></p>
<p><strong>Code splitting :</strong></p>
<pre><code class="language-typescript">// Chaque page est un chunk separe
const Library = lazy(() =&gt; import('./pages/Library'));
const Discover = lazy(() =&gt; import('./pages/Discover'));
const Profile = lazy(() =&gt; import('./pages/Profile'));
const Settings = lazy(() =&gt; import('./pages/Settings'));
// Le player est dans le bundle initial (toujours visible)
</code></pre>
<p><strong>Images :</strong>
- Format : WebP (fallback JPEG), AVIF si support
- Lazy loading : <code>loading="lazy"</code> sur toutes les images hors viewport
- Responsive : <code>srcset</code> avec 3 tailles (320w, 640w, 1280w)
- Pochettes d'album : max 300x300 en liste, 600x600 en page artiste
- Avatars : max 128x128</p>
<p><strong>Mode eco :</strong></p>
<pre><code class="language-css">[data-eco=&quot;true&quot;] {
/* Desactive les textures et animations */
body::after { display: none; } /* texture washi */
* { animation-duration: 0ms !important; }
#app { filter: none; } /* circadien + patine */
}
</code></pre>
<p><strong>Prefetch intelligent :</strong>
- Prefetch la page la plus probable (ex: clic sur un artiste -&gt; prefetch sa page)
- Ne PAS prefetch toutes les pages
- Utiliser <code>&lt;link rel="prefetch"&gt;</code> et non <code>preload</code> (priorite basse)</p>
<hr />
<h2>8. Iconographie — gestes calligraphiques</h2>
<h3>8.1 Principes</h3>
<p>Les icones SUMI v3 sont des <strong>gestes dessines</strong> — comme des caracteres
calligraphiques simplifies. Elles ne sont pas des SVG generes par ordinateur.
L'irregularite du trace est volontaire et preservee.</p>
<h3>8.2 Contraintes techniques</h3>
<table>
<thead>
<tr>
<th>Contrainte</th>
<th>Valeur</th>
</tr>
</thead>
<tbody>
<tr>
<td>Format</td>
<td>SVG inline (pas de sprite, pas de font icon)</td>
</tr>
<tr>
<td>Taille de reference</td>
<td>24x24 viewBox</td>
</tr>
<tr>
<td>Epaisseur de trait</td>
<td>2px, variable (plus epaisse au debut du geste, plus fine a la fin)</td>
</tr>
<tr>
<td>Style</td>
<td>Stroke only (pas de fill), sauf exceptions</td>
</tr>
<tr>
<td>Couleur</td>
<td><code>currentColor</code> (herite du texte parent)</td>
</tr>
<tr>
<td>Nombre max d'icones</td>
<td>30 (pas plus — chaque icone est dessinee specifiquement)</td>
</tr>
<tr>
<td>Lignes</td>
<td>Irreguliere comme un vrai trait de pinceau (pas de Bezier parfaites)</td>
</tr>
<tr>
<td>Coins</td>
<td>Mix organique (pas uniformement arrondis)</td>
</tr>
</tbody>
</table>
<h3>8.3 Correspondances icone -&gt; metaphore</h3>
<table>
<thead>
<tr>
<th>Fonction</th>
<th>Metaphore</th>
<th>Description du geste</th>
</tr>
</thead>
<tbody>
<tr>
<td>Play</td>
<td>Trait de pinceau diagonal</td>
<td>Un triangle forme par un seul trait rapide</td>
</tr>
<tr>
<td>Pause</td>
<td>Deux colonnes d'encre</td>
<td>Deux traits verticaux paralleles</td>
</tr>
<tr>
<td>Recherche</td>
<td>Enso (cercle zen)</td>
<td>Un cercle ouvert — non ferme, comme un enso</td>
</tr>
<tr>
<td>Profil</td>
<td>Capsule de micro</td>
<td>Forme ovale avec un trait de base</td>
</tr>
<tr>
<td>Chat / Messages</td>
<td>Onde sonore</td>
<td>Trois arcs concentriques</td>
</tr>
<tr>
<td>Upload</td>
<td>Trait ascendant</td>
<td>Un trait qui monte avec une goutte au sommet</td>
</tr>
<tr>
<td>Settings</td>
<td>Ensui (roue)</td>
<td>Cercle avec trait directionnel</td>
</tr>
<tr>
<td>Home</td>
<td>Montagne</td>
<td>Triangle inverse — symbole de montagne minimaliste</td>
</tr>
<tr>
<td>Notifications</td>
<td>Point d'encre</td>
<td>Cercle avec une onde de diffusion</td>
</tr>
<tr>
<td>Like / Favori</td>
<td>Trait croise</td>
<td>Deux traits qui se rencontrent en pointe</td>
</tr>
<tr>
<td>Volume</td>
<td>Ondes</td>
<td>Arc de cercle avec des ondes de diffusion</td>
</tr>
<tr>
<td>Menu</td>
<td>Trois traits</td>
<td>Trois traits horizontaux d'epaisseur variable</td>
</tr>
<tr>
<td>Close</td>
<td>Croix de pinceau</td>
<td>Deux traits croises d'un seul geste</td>
</tr>
<tr>
<td>Download</td>
<td>Trait descendant</td>
<td>Un trait qui descend vers une ligne de base</td>
</tr>
<tr>
<td>Share</td>
<td>Traces</td>
<td>Trois points relies par des traits de pinceau</td>
</tr>
<tr>
<td>Filter</td>
<td>Entonnoir de traits</td>
<td>Deux traits convergents vers le bas</td>
</tr>
<tr>
<td>Expand</td>
<td>Triangle ouvert</td>
<td>Symbole d'amplification — triangle de pinceau</td>
</tr>
</tbody>
</table>
<h3>8.4 Production</h3>
<p>Dessiner les icones a la main (papier ou tablette), puis vectoriser dans
Inkscape. L'irregularite du trace est volontaire et ne doit pas etre "corrigee"
par l'outil de vectorisation.</p>
<p>Les icones sont stockees comme composants React SVG individuels dans
<code>apps/web/src/components/icons/</code>.</p>
<hr />
<h2>9. Le Player — suzuri (pierre a encre)</h2>
<h3>9.1 Principe</h3>
<p>Le player est la pierre a encre (suzuri) de l'interface — l'objet le plus
lourd, le plus present, le plus ancre. C'est la surface la plus "encree",
la plus opaque, la plus dense. Ce n'est pas une barre generique en bas de
page. C'est le coeur de l'experience.</p>
<h3>9.2 Contraintes de design</h3>
<table>
<thead>
<tr>
<th>Contrainte</th>
<th>Valeur</th>
</tr>
</thead>
<tbody>
<tr>
<td>Position</td>
<td>Bas de page, pleine largeur, toujours visible</td>
</tr>
<tr>
<td>Hauteur collapsed</td>
<td>80px (--sumi-player-height)</td>
</tr>
<tr>
<td>Hauteur expanded</td>
<td>Jusqu'a 60vh (vue immersive — le lavis s'intensifie)</td>
</tr>
<tr>
<td>Waveform</td>
<td>Traits de pinceau horizontaux — le son EST l'encre</td>
</tr>
<tr>
<td>Controle volume</td>
<td>Trait vertical avec un point (goutte de pinceau) — pas un slider classique</td>
</tr>
<tr>
<td>Patine</td>
<td>Le suzuri est l'element qui se patine le plus vite et le plus visiblement</td>
</tr>
<tr>
<td>Adaptabilite</td>
<td>Le player prend les couleurs de l'artiste en cours d'ecoute</td>
</tr>
<tr>
<td>Animation au repos</td>
<td>Micro-oscillation du VU-metre (respiration) — CSS uniquement</td>
</tr>
<tr>
<td>Transition expand/collapse</td>
<td>--sumi-motion-vague + --sumi-ease-vague</td>
</tr>
<tr>
<td>Touch</td>
<td>Swipe up pour expand, swipe down pour collapse</td>
</tr>
</tbody>
</table>
<h3>9.3 Waveform</h3>
<p>La waveform est pre-calculee cote serveur (tableau de 200 valeurs d'amplitude
par morceau). Les barres ne sont pas rectangulaires — elles ont des bords
arrondis et une opacite variable, comme des traits d'encre poses cote a cote.</p>
<pre><code class="language-css">.waveform-bar {
width: 2px;
margin: 0 1px;
background: var(--sumi-accent);
border-radius: 50%; /* Bords arrondis comme un trait de pinceau */
transition: height var(--sumi-motion-goutte) var(--sumi-ease-goutte);
}
.waveform-bar.played {
opacity: 1; /* Encre dense — la partie jouee */
}
.waveform-bar.unplayed {
opacity: 0.25; /* Lavis dilue — la partie a jouer */
}
</code></pre>
<p><strong>Pas de canvas WebGL, pas de Three.js, pas de librairie audio-visualizer.</strong>
200 divs CSS = leger et suffisant.</p>
<h3>9.4 Controle de volume</h3>
<p>Le volume est un trait vertical avec un point — comme un trait de pinceau
interrompu par une goutte. Implementation :
- SVG : un trait vertical (<code>&lt;line&gt;</code>) avec un cercle (<code>&lt;circle&gt;</code>) positionne dessus
- Evenements pointer (pointerdown/move/up) pour le drag vertical
- Le composant entier &lt; 50 lignes de code
- Fallback accessibilite : <code>&lt;input type="range"&gt;</code> pour screen readers (visuellement cache)</p>
<h3>9.5 Mode expanded</h3>
<p>Quand le player est en mode expanded (vue immersive) :
- Le papier de fond s'assombrit (le lavis s'intensifie)
- L'encre de la waveform s'elargit et prend plus de place
- Le cyan s'illumine — il devient plus vif, comme un pigment concentre
- L'espace negatif augmente — le vide (ma) entoure les elements</p>
<hr />
<h2>10. Mode eco</h2>
<h3>10.1 Declenchement</h3>
<p>Le mode eco est active :
- Manuellement par l'utilisateur (toggle dans les settings)
- Automatiquement si <code>prefers-reduced-motion: reduce</code>
- Automatiquement si <code>Save-Data: on</code> (header HTTP)
- Automatiquement si la batterie &lt; 20% (<code>navigator.getBattery()</code> si disponible)</p>
<h3>10.2 Ce que le mode eco desactive</h3>
<table>
<thead>
<tr>
<th>Fonctionnalite</th>
<th>Etat en mode eco</th>
</tr>
</thead>
<tbody>
<tr>
<td>Texture washi</td>
<td>Desactivee</td>
</tr>
<tr>
<td>Circadien</td>
<td>Desactive (palette statique)</td>
</tr>
<tr>
<td>Patine</td>
<td>Desactivee (palette standard)</td>
</tr>
<tr>
<td>Animations</td>
<td>Reduites a 0ms</td>
</tr>
<tr>
<td>Waveform player</td>
<td>Barre de progression simple</td>
</tr>
<tr>
<td>Controle volume</td>
<td>Slider lineaire classique</td>
</tr>
<tr>
<td>Prefetch</td>
<td>Desactive</td>
</tr>
<tr>
<td>Images pochettes</td>
<td>Taille reduite (160x160 max)</td>
</tr>
<tr>
<td>Diffusions d'encre (box-shadow)</td>
<td>Desactivees</td>
</tr>
<tr>
<td>Backdrop-filter (blur)</td>
<td>Desactive</td>
</tr>
</tbody>
</table>
<p>Le mode eco ne change PAS :
- La palette de couleurs de base (cyan, encre, papier)
- La typographie
- La disposition
- Les fonctionnalites</p>
<p><strong>L'app reste complete et utilisable. Elle perd juste sa texture —
comme un lavis sur papier lisse au lieu de papier washi.</strong></p>
<hr />
<h2>11. Themes artistes</h2>
<h3>11.1 Concept</h3>
<p>Quand l'utilisateur navigue sur le profil d'un artiste ou ecoute un de ses
morceaux, l'interface s'adapte aux couleurs choisies par l'artiste.</p>
<h3>11.2 Variables d'artiste</h3>
<p>Chaque artiste peut definir :</p>
<pre><code class="language-css">/* Stocke dans le profil artiste, charge avec les donnees du profil */
--artist-hue: 220; /* Teinte principale (0-360) */
--artist-saturation: 0.6; /* Saturation (0-1) */
--artist-lightness: 0.5; /* Luminosite (0-1) */
</code></pre>
<h3>11.3 Application</h3>
<p>Quand un profil artiste est affiche ou qu'un morceau est en cours de lecture :</p>
<pre><code class="language-css">/* Le player et la page profil utilisent la couleur artiste */
.artist-context {
--sumi-accent: hsl(
var(--artist-hue),
calc(var(--artist-saturation) * 100%),
calc(var(--artist-lightness) * 100%)
);
}
</code></pre>
<p>Les autres elements (navigation, sidebar) restent en cyan standard.
Seuls le player (suzuri) et la zone de contenu s'adaptent.</p>
<h3>11.4 Contraintes</h3>
<ul>
<li>La couleur artiste ne doit jamais nuire a la lisibilite (contraste WCAG AA)</li>
<li>Si le contraste est insuffisant, fallback sur le cyan standard</li>
<li>L'artiste ne controle QUE la teinte — pas les fonds, pas la typo, pas le layout</li>
<li>En mode high contrast, les couleurs artistes sont ignorees</li>
</ul>
<hr />
<h2>12. Regles inviolables de SUMI v3</h2>
<ol>
<li>
<p><strong>Cyan partout.</strong> L'accent est toujours cyan (#0098B5), sauf dans un contexte
artiste. Pas d'autre couleur primaire. Le cyan est la goutte de pigment
dans l'eau noire — rare et precieux.</p>
</li>
<li>
<p><strong>Texture washi toujours.</strong> Sauf en mode eco. Opacite max 0.08.
Le fond n'est jamais une surface lisse.</p>
</li>
<li>
<p><strong>2 animations max.</strong> Jamais 3 elements qui bougent en meme temps.</p>
</li>
<li>
<p><strong>Pas de blanc pur (#FFFFFF).</strong> Le blanc le plus clair est #F2EDE6 (papier washi).
Le blanc pur n'existe pas dans un lavis — le papier a toujours une teinte.</p>
</li>
<li>
<p><strong>Pas de noir pur (#000000).</strong> Le noir le plus profond est #0D0D0F (noir d'encre).
Le noir pur est plat et sans vie — l'encre sumi a toujours de la profondeur.</p>
</li>
<li>
<p><strong>Pas d'icone generique.</strong> Chaque icone est un geste calligraphique dessine
specifiquement. Si une icone n'existe pas dans le set, elle n'est pas utilisee.</p>
</li>
<li>
<p><strong>Le suzuri (player) est sacre.</strong> C'est l'element le plus soigne, le plus teste,
le plus patine. Ne jamais le traiter comme un composant secondaire.</p>
</li>
<li>
<p><strong>Rien n'est lineaire.</strong> Pas de <code>transition: all 0.3s linear</code>. Toute animation
a un easing organique — le mouvement de l'eau, pas d'un mecanisme.</p>
</li>
<li>
<p><strong>Le mode eco doit etre beau aussi.</strong> L'app sans texture/animation/circadien
doit rester coherente et agreable. C'est le lavis sur papier lisse — sobre
mais pas pauvre.</p>
</li>
<li>
<p><strong>Accessible d'abord.</strong> Chaque decision esthetique doit passer le test WCAG AA
(4.5:1 pour le texte, 3:1 pour les grands elements). Si l'esthetique et
l'accessibilite sont en conflit, l'accessibilite gagne.</p>
</li>
<li>
<p><strong>Pas de bordures nettes.</strong> Jamais de <code>border: 1px solid</code>. Les bords sont
des diffusions d'encre — <code>box-shadow</code> diffus, toujours.</p>
</li>
<li>
<p><strong>Le vide est un choix.</strong> L'espace negatif (ma) n'est pas du padding vide.
C'est le papier qui respire entre les traits.</p>
</li>
</ol>
<hr />
<h2>13. Checklist d'implementation</h2>
<table>
<thead>
<tr>
<th>Tache</th>
<th>Priorite</th>
<th>Complexite</th>
<th>Impact</th>
</tr>
</thead>
<tbody>
<tr>
<td>Remplacer la palette indigo par cyan (#0098B5)</td>
<td>1</td>
<td>Faible</td>
<td>Fondamental</td>
</tr>
<tr>
<td>Ajouter la texture washi (washi.png + pseudo-element)</td>
<td>1</td>
<td>Faible</td>
<td>Texture immediate</td>
</tr>
<tr>
<td>Adapter les fonds (papier washi jour/nuit)</td>
<td>1</td>
<td>Faible</td>
<td>Ambiance</td>
</tr>
<tr>
<td>Remplacer les border par des box-shadow diffus</td>
<td>1</td>
<td>Moyenne</td>
<td>Langage visuel</td>
</tr>
<tr>
<td>Implementer les couches d'encre (backdrop-filter + opacites)</td>
<td>1</td>
<td>Moyenne</td>
<td>Profondeur</td>
</tr>
<tr>
<td>Renommer les tokens de mouvement (goutte/trait/lavis/vague/maree)</td>
<td>1</td>
<td>Faible</td>
<td>Coherence</td>
</tr>
<tr>
<td>Implementer les couleurs fonctionnelles pastel diffuse</td>
<td>1</td>
<td>Faible</td>
<td>Etats</td>
</tr>
<tr>
<td>Dessiner les 10 icones prioritaires (gestes calligraphiques)</td>
<td>2</td>
<td>Moyenne</td>
<td>Identite</td>
</tr>
<tr>
<td>Implementer le circadien (ThemeProvider + inversion nuit)</td>
<td>2</td>
<td>Moyenne</td>
<td>Vie</td>
</tr>
<tr>
<td>Refaire le player en suzuri (waveform pinceau + volume trait)</td>
<td>2</td>
<td>Elevee</td>
<td>Coeur de l'UX</td>
</tr>
<tr>
<td>Implementer la patine (niveau 0-2 d'abord)</td>
<td>3</td>
<td>Moyenne</td>
<td>Singularite</td>
</tr>
<tr>
<td>Ajouter le mode eco</td>
<td>3</td>
<td>Faible</td>
<td>Ethique</td>
</tr>
<tr>
<td>Implementer les couleurs artistes</td>
<td>3</td>
<td>Moyenne</td>
<td>Personnalisation</td>
</tr>
<tr>
<td>Patine niveaux 3-4 (encre oxydee, rouleau ancien)</td>
<td>4</td>
<td>Moyenne</td>
<td>Profondeur</td>
</tr>
<tr>
<td>Micro-mouvements du papier de fond (ondulation CSS)</td>
<td>4</td>
<td>Faible</td>
<td>Vie subtile</td>
</tr>
<tr>
<td>Variantes de texture washi pour la patine (2-3 fichiers)</td>
<td>4</td>
<td>Faible</td>
<td>Richesse</td>
</tr>
</tbody>
</table>
<div class='page-break'></div>
<div class='doc-header'>
<h2>📄 README.md</h2>
<div class='doc-path'>Chemin: 05_EXPERIENCE_UTILISATEUR/Tests_Utilisateurs/README.md</div>
</div>
<h1>Tests Utilisateurs</h1>
<p>Ce dossier regroupe toutes les données issues des <strong>tests utilisateurs</strong>, en version alpha/bêta ou en labo : retours qualitatifs, quantitatifs, interviews, sessions enregistrées.</p>
<h2>Objectifs :</h2>
<ul>
<li>Identifier les problèmes d’ergonomie ou de compréhension.</li>
<li>Valider les hypothèses UX avant implémentation complète.</li>
<li>Itérer sur les maquettes et prototypes de façon efficace.</li>
</ul>
<h2>Contenu recommandé :</h2>
<ul>
<li><code>sessions/</code> : notes, vidéos (Blurred ou anonymisées)</li>
<li><code>retours/</code> : tableaux synthèse + scores</li>
<li><code>protocoles/</code> : guide de test, consignes, scénario</li>
<li><code>analyses/</code> : heatmaps, taux de clic, abandon</li>
</ul>
<blockquote>
<p>Ces tests sont essentiels pour orienter la roadmap design.</p>
</blockquote>
</body>
</html>
Reference in a new issue View git blame Copy permalink