Roadmap Identite Visuelle & Design System — Guide pas-a-pas

Priorite absolue. Rien ne sort publiquement (RS, landing page, packaging, Veza) tant que l'identite visuelle n'est pas finalisee. Tout est faisable en nomade — laptop, tablette, ou papier. Derniere mise a jour : 1er avril 2026.


Contexte : ce qui existe deja

Tu as deja une direction artistique forte et documentee :

Le langage visuel est clair : papier washi, encre noire, cyan unique, pas de bordures nettes, ombres diffuses, espace negatif (ma), rythme circadien. Il manque l'execution.


V1 — Exploration logo (3-5 jours)

Objectif : 10-15 pistes de logo sur papier, 3 directions retenues.

Preparation mentale

Croquis papier (la partie la plus importante)

Direction Idee Ce que ca evoque
A. Logotype brut Le mot "TALAS" en typo forte, sans symbole. Jeu sur les lettres (A sans barre, ligatures) Confiance, simplicite, comme Ableton ou Aiaiai
B. Enso / cercle d'encre Un cercle de pinceau (enso) avec ou sans le nom Sumi-e pur, zen, cycle, ouverture, micro vu de face
C. Onde / vibration Forme d'onde audio ou vibration stylisee Audio, son, frequence — lien direct au produit
D. Trait de pinceau Un seul trait de calligraphie — comme un coup de pinceau unique Geste, artisanat, authenticite, wabi-sabi
E. Circuit / signal Schematique audio tres epuree — un circuit preamp minimaliste Ingenierie, transparence, open-hardware
F. Hybride Combiner deux directions (ex: logotype + trait de pinceau) Identite unique

Criteres de selection

Le bon logo doit passer TOUS ces tests :


V2 — Vectorisation + Raffinage (3-4 jours)

Objectif : les 3 pistes vectorisees, testees dans differents contextes.

Outils

Vectorisation

Pour chaque piste retenue :

Test dans les contextes reels

Pour chaque piste, creer un mock rapide (15 min chacun) :

Decision


V3 — Declinaisons du logo (2-3 jours)

Objectif : toutes les versions du logo necessaires pour tous les usages.

Versions a creer

Zones d'exclusion et tailles minimales

Exports

Organisation des fichiers

05_EXPERIENCE_UTILISATEUR/Identite_Visuelle/
├── logo/
│   ├── talas_logo_principal.svg
│   ├── talas_logo_empile.svg
│   ├── talas_symbole.svg
│   ├── talas_logotype.svg
│   ├── exports/
│   │   ├── png/        (toutes tailles)
│   │   ├── favicon/    (ico + png)
│   │   └── og/         (1200x630)
│   └── REGLES_UTILISATION_LOGO.md
├── palette/
├── typographie/
└── templates/

V4 — Palette de couleurs (1-2 jours)

Objectif : palette definitive, testee en accessibilite, documentee avec codes hex.

La palette est deja definie dans la DA

La direction artistique Sumi V3 impose :

Role Couleur Hex Usage
Papier (fond jour) Washi creme #F2EDE6 Fond principal mode jour — JAMAIS de blanc pur
Encre (texte jour) Noir profond #1A1A1E Texte, titres, elements principaux
Papier (fond nuit) Noir chaud #1A1A1E Fond principal mode nuit
Encre (texte nuit) Creme clair #E8E3DB Texte en mode nuit
Accent unique Cyan sumi #0098B5 Liens, CTA, elements interactifs — la SEULE couleur
Encre diluee Gris chaud #8C8578 Texte secondaire, placeholders
Lavis Gris pale #D9D4CC Bordures, separateurs, fonds secondaires

Ce qu'il faut faire

Couleurs supplementaires (uniquement si necessaire)

Regle absolue : jamais de couleur saturee. Tout est desature, terreux, encre diluee.


V5 — Typographie (1-2 jours)

Objectif : paire de polices choisie, telechargee, testee.

La spec Sumi V3 preconise

Usage Police Style Notes
Titres Space Grotesk Bold, UPPERCASE, letter-spacing 0.1-0.15em Geometrique, technique, moderne
Corps Inter Regular + Semi-Bold, line-height 1.6-1.8 Lisibilite maximale, neutre
Code/specs JetBrains Mono Regular Pour les specs techniques et le code

Ce qu'il faut faire

Definir l'echelle typographique

Titre H1 :  Space Grotesk Bold  32px / UPPERCASE / 0.15em spacing
Titre H2 :  Space Grotesk Bold  24px / UPPERCASE / 0.12em spacing
Titre H3 :  Space Grotesk Bold  20px / UPPERCASE / 0.10em spacing
Corps :      Inter Regular       16px / line-height 1.7
Corps small: Inter Regular       14px / line-height 1.6
Caption :    Inter Semi-Bold     12px / UPPERCASE / 0.08em spacing
Code :       JetBrains Mono      14px / line-height 1.5

V6 — Templates de communication (2-3 jours)

Objectif : tous les gabarits prets pour publier sur les RS et le web.

Templates a creer dans Inkscape ou Figma

Chartes d'application


V7 — Design system Sumi V3 — Integration (5-7 jours)

Objectif : le design system de Veza integre l'identite visuelle finalisee. Faisable en nomade — c'est du code frontend (React/Tailwind). Le code est dans /home/senke/git/talas/veza.

Configuration Tailwind

Composants de base a mettre a jour

Systeme de theme circadien

La spec Sumi V3 definit un theme qui change selon l'heure du jour :

Animations (classification Sumi V3)

Texture washi (optionnel mais distinctif)

Budget performance

La spec impose :


V8 — Validation finale (1-2 jours)

Objectif : tout est coherent, documente, et pret a etre utilise.

Checklist de coherence

Documenter


Estimation totale

Etape Temps estime Faisable ou
V1 — Exploration logo 3-5 jours Partout (papier)
V2 — Vectorisation 3-4 jours Laptop (Inkscape)
V3 — Declinaisons 2-3 jours Laptop
V4 — Palette 1-2 jours Laptop
V5 — Typographie 1-2 jours Laptop
V6 — Templates 2-3 jours Laptop
V7 — Design system 5-7 jours Laptop (code React/Tailwind)
V8 — Validation 1-2 jours Laptop
Total ~18-28 jours

Les etapes V4 et V5 peuvent se faire en parallele de V2. V6 depend de V3 (declinaisons finales). V7 depend de V4 + V5 (palette et typos validees).


Voir aussi