talas-group/05_EXPERIENCE_UTILISATEUR/CHARTE_GRAPHIQUE_TALAS.md

# Charte graphique — Talas & Veza

> Document de reference pour l'application de l'identite visuelle.
> Ce document definit les **regles**. Pour la philosophie, voir [[DIRECTION_ARTISTIQUE_TALAS]].
> Pour l'implementation technique, voir [[SUMI_V3_SPECIFICATION]].
> Derniere mise a jour : 2 avril 2026.

---

## 1. Direction en une page

L'identite visuelle de Talas est un **lavis japonais interactif** (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.

**Cinq principes :**
1. **L'encre et le papier** — tout est soit de l'encre, soit du papier
2. **Le cyan unique** — la seule couleur d'accent, rare et precieuse
3. **La profondeur par diffusion** — des couches d'encre diluee, pas des ombres portees
4. **Le vide (ma)** — l'espace negatif est un choix, pas du remplissage
5. **L'interface vivante** — le lavis respire avec l'heure et se patine avec l'usage

---

## 2. Architecture de marque

### 2.1 Les deux entites

| Entite | Nature | Ce qu'elle represente |
|--------|--------|----------------------|
| **Talas** | Marque mere | Le materiel audio, l'entreprise, l'ecosysteme complet |
| **Veza** | Sous-marque | La plateforme web communautaire (boutique + communaute + services) |

### 2.2 Relation visuelle

Talas et Veza partagent le **meme langage visuel** (lavis, palette, typographie) mais
ont chacune leur propre logo.

- **Talas** est la marque visible sur le hardware, le packaging, les communications corporate
- **Veza** est la marque visible dans l'application web, les espaces communautaires
- Quand les deux apparaissent ensemble : "Veza by Talas" ou "Veza — une plateforme Talas"
- Le logo Talas est toujours present dans le footer de Veza (discret, en encre diluee)

### 2.3 Hierarchie d'utilisation

| Contexte | Logo principal | Logo secondaire |
|----------|---------------|----------------|
| Packaging micro | Talas (symbole seul, grave) | — |
| Page produit web | Talas (logotype + symbole) | Veza (dans la navigation) |
| Application Veza | Veza (logotype) | Talas (footer, page a propos) |
| Reseaux sociaux | Talas (symbole avatar) | — |
| Documents officiels | Talas (logotype + symbole) | — |
| Emails transactionnels | Veza (logotype) | Talas (signature) |

---

## 3. Logo

### 3.1 Logo Talas — composition

Le logo Talas se compose de deux elements independants :

**Le symbole :**
- 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

**Le logotype :**
- Le mot **TALAS** 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

### 3.2 Logo Veza — composition

Le logo Veza suit les memes principes :

**Le logotype :**
- Le mot **VEZA** en Space Grotesk Bold
- MAJUSCULES, letter-spacing 0.12em
- Meme traitement que Talas — coherence de la famille

**Le symbole (optionnel) :**
- 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]])

### 3.3 Versions necessaires

Pour chaque marque (Talas, et Veza si symbole propre) :

| Version | Format | Usage principal |
|---------|--------|----------------|
| **Logo principal** | Symbole + logotype, horizontal | Site web, documents, packaging |
| **Logo empile** | Symbole au-dessus du logotype | Format carre, avatar, sticker |
| **Symbole seul** | Carre | Favicon, avatar RS, watermark, gravure |
| **Logotype seul** | Horizontal | Contextes ou le symbole est trop petit |
| **Monochrome noir** | #1A1A1E sur transparent | Fond clair, impression N&B, gravure |
| **Monochrome blanc** | #F2EDE6 sur transparent | Fond sombre, mode nuit |
| **Gravure/marquage** | Traits epaissis, simplifie | Corps du micro (aluminium) |
| **Broderie** | Traits simplifies, min 3mm | Pochette tissu du packaging |
| **Favicon** | Symbole simplifie, 16x16 et 32x32 | Navigateur |

### 3.4 Zones d'exclusion

Le logo doit toujours respirer. L'espace minimum autour du logo est egal a la
hauteur du symbole (note **h**).

```
              h
         ┌─────────┐
    h ── │ SYMBOLE  │ ── h
         │  TALAS   │
         └─────────┘
              h
```

- Aucun element graphique, texte ou bord de page ne doit entrer dans cette zone
- Sur fond photographique : le logo doit etre place dans une zone de contraste suffisant
- Si l'espace est insuffisant, utiliser le symbole seul (il a besoin de moins d'espace)

### 3.5 Tailles minimales

| Version | Taille minimale | Contexte |
|---------|----------------|----------|
| Logo principal (symbole + texte) | 120px de large | Web |
| Logotype seul | 80px de large | Web |
| Symbole seul | 24px | Web, app |
| Favicon | 16x16 px | Navigateur |
| Logo imprime | 30mm de large | Print |
| Symbole imprime | 8mm | Marquage produit |

En dessous de ces tailles, le logo devient illisible. Utiliser la version simplifiee
(symbole seul ou favicon).

### 3.6 Usages interdits

**Ne jamais :**
- 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

---

## 4. Palette de couleurs

### 4.1 Palette principale

La palette est celle d'un lavis : noir, blanc casse, les gris entre les deux,
et une seule couleur — le cyan.

#### Mode jour (papier clair)

| Role | Nom | Hex | Usage |
|------|-----|-----|-------|
| **Papier** | Washi | `#F2EDE6` | Fond principal — JAMAIS de blanc pur (#FFFFFF) |
| **Encre** | Sumi | `#1A1A1E` | Texte principal, titres, elements forts |
| **Encre diluee** | Usuzumi | `#9A958D` | Texte secondaire, placeholders |
| **Encre tres diluee** | Awazumi | `#B5B0A8` | Texte tertiaire, texte desactive |
| **Lavis (surface)** | Nijimi | `rgba(26,26,30, 0.04-0.12)` | Fonds de cartes, overlays, layers |
| **Cyan accent** | Mizu | `#0098B5` | Liens, CTA, focus, elements interactifs |
| **Cyan hover** | — | `#00B4D8` | Survol des elements interactifs |
| **Cyan actif** | — | `#007A94` | Etat presse/actif |
| **Cyan dilue** | — | `rgba(0, 152, 181, 0.15)` | Focus rings, fonds subtils |

#### Mode nuit (lavis inverse)

| Role | Nom | Hex |
|------|-----|-----|
| **Papier sombre** | Yami | `#0D0D0F` — JAMAIS de noir pur (#000000) |
| **Encre claire** | Shiroi sumi | `#E8E3DB` |
| **Encre diluee (nuit)** | — | `#9A958D` |
| **Cyan profond** | Fukai mizu | `#006B7F` |

#### Transition jour/nuit

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

```
Jour :   #F2EDE6 (papier) + #1A1A1E (encre) + #0098B5 (cyan)
Nuit :   #0D0D0F (papier) + #E8E3DB (encre) + #006B7F (cyan)
```

### 4.2 Couleurs fonctionnelles

Les couleurs fonctionnelles sont des pigments dilues dans beaucoup d'eau.
Elles n'apparaissent qu'en lignes fines, micro-points ou halos subtils.
**Jamais en aplat.**

| Role | Couleur | Code | Regles |
|------|---------|------|--------|
| **Succes** | Vert sauge dilue | `rgba(90, 140, 100, 0.60)` | Ligne fine, point, halo |
| **Erreur** | Rouge brique dilue | `rgba(180, 80, 70, 0.55)` | Trait fin, bordure legere |
| **Warning** | Ambre dilue | `rgba(190, 150, 60, 0.55)` | Point discret |
| **Info** | Cyan | `#0098B5` | = accent (coherent) |

**Regles des couleurs fonctionnelles :**
- 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)

### 4.3 Audit d'accessibilite (WCAG 2.1 AA)

Le standard WCAG AA exige un contraste minimum de **4.5:1** pour le texte normal
et **3:1** pour le texte large (>= 18pt ou >= 14pt bold).

#### Mode jour (fond #F2EDE6)

| Combinaison | Ratio | Verdict | Note |
|-------------|-------|---------|------|
| Encre `#1A1A1E` sur papier `#F2EDE6` | **~14.8:1** | AA, AAA | Excellent |
| Cyan `#0098B5` sur papier `#F2EDE6` | **~2.9:1** | **Echec AA texte** | Trop clair pour du texte normal |
| Cyan actif `#007A94` sur papier `#F2EDE6` | **~4.2:1** | **Limite** | Passe pour texte large uniquement |
| Cyan profond `#006B7F` sur papier `#F2EDE6` | **~5.3:1** | AA | Utilisable pour tout texte |
| Encre diluee `#9A958D` sur papier `#F2EDE6` | **~3.1:1** | Texte large OK | Limite pour texte normal |
| Encre tres diluee `#B5B0A8` sur papier `#F2EDE6` | **~2.1:1** | **Echec** | Decoratif uniquement |

#### Mode nuit (fond #0D0D0F)

| Combinaison | Ratio | Verdict |
|-------------|-------|---------|
| Encre claire `#E8E3DB` sur papier sombre `#0D0D0F` | **~16.2:1** | AA, AAA |
| Cyan profond `#006B7F` sur papier sombre `#0D0D0F` | **~3.4:1** | Texte large OK |

#### Decisions d'accessibilite

Sur la base de cet audit, voici les regles d'usage du cyan :

| Contexte | Couleur cyan a utiliser |
|----------|------------------------|
| **Texte normal** (liens, labels) | `#006B7F` (cyan profond) — ratio >= 4.5:1 |
| **Texte large** (titres, CTA, boutons) | `#0098B5` (cyan standard) — ratio >= 3:1 |
| **Elements non-texte** (icones, bordures, focus rings) | `#0098B5` (cyan standard) — ratio >= 3:1 |
| **Fond de bouton** (texte clair dessus) | `#0098B5` avec texte `#F2EDE6` — ratio ~4.7:1 |
| **Mode high contrast** | `#006B7F` partout |

**Regle : le cyan `#0098B5` n'est utilise en texte normal QUE si le texte est
accompagne d'un indicateur non-couleur (soulignement, icone, gras).** Sinon,
utiliser `#006B7F` pour le texte courant.

L'encre diluee `#9A958D` est reservee au texte secondaire qui n'est **pas**
indispensable a la comprehension (captions, timestamps, metadata).
L'encre tres diluee `#B5B0A8` est **purement decorative** (ne jamais l'utiliser
pour du contenu informationnel).

### 4.4 Regles absolues de la palette

1. **Pas de blanc pur (#FFFFFF).** Le plus clair est `#F2EDE6` (papier washi).
2. **Pas de noir pur (#000000).** Le plus sombre est `#0D0D0F` (noir d'encre).
3. **Le cyan est la SEULE couleur d'accent.** Pas de deuxieme couleur. Jamais.
4. **Les couleurs fonctionnelles sont toujours diluees.** Pas d'aplat de couleur.
5. **Les gris sont toujours chauds.** Pas de gris bleu, pas de gris pur neutre.
6. **Tout passe WCAG AA.** Si l'esthetique et l'accessibilite sont en conflit,
   l'accessibilite gagne.

---

## 5. Typographie

### 5.1 Polices

| Usage | Police | Poids | License |
|-------|--------|-------|---------|
| **Titres, marque** | Space Grotesk | Bold (700) | SIL Open Font License |
| **Corps de texte** | Inter | Regular (400), Semi-Bold (600) | SIL Open Font License |
| **Code, specs** | JetBrains Mono | Regular (400) | SIL Open Font License |

Toutes les polices sont open-source. Format : **woff2 uniquement**.
`font-display: swap` obligatoire.

### 5.2 Echelle typographique

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

### 5.3 Regles typographiques

- **Titres toujours en MAJUSCULES** avec letter-spacing large — evoque l'inscription
  gravee dans la pierre
- **Corps en casse normale** — pas de MAJUSCULES dans le texte courant
- **Interligne genereux** (1.6 minimum) — le texte respire comme un poeme
- **Le texte flotte** dans le papier — padding genereux autour des blocs de texte
- **Texte secondaire en encre diluee** (`#9A958D`) — il s'efface comme un lavis dilue
- **Pas de gras dans le corps** sauf pour les termes techniques ou les noms propres
  — utiliser Semi-Bold (600) avec parcimonie
- **Les specs techniques en monospace** (JetBrains Mono) — coherence circuit/code

### 5.4 Chargement des polices (budget performance)

**Maximum 2 fichiers de police au chargement initial :**
1. Space Grotesk Bold (variable font ou static bold, ~25 Ko woff2)
2. Inter Regular (variable font, ~95 Ko woff2 — couvre Regular + Semi-Bold)

JetBrains Mono est charge en lazy (uniquement sur les pages qui affichent du code/specs).

```html
<link rel="preload" href="/fonts/SpaceGrotesk-Bold.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/Inter-Variable.woff2" as="font" type="font/woff2" crossorigin>
```

**Budget total polices : < 130 Ko.**

---

## 6. Iconographie

### 6.1 Principes

Les icones sont des **gestes dessines a la main** — comme des caracteres calligraphiques
simplifies. Pas des SVG generiques lisses.

### 6.2 Contraintes techniques

| Propriete | Valeur |
|-----------|--------|
| Format | SVG inline (pas de sprite, pas de font icon) |
| ViewBox | 24x24 |
| Epaisseur de trait | 2px, variable (plus epaisse au debut, plus fine a la fin) |
| Style | Stroke only (`stroke-linecap: round`, pas de fill sauf exceptions) |
| Couleur | `currentColor` (herite du parent) |
| Nombre max | 30 icones uniques |
| Irregularite | Preservee — pas de lissage automatique |

### 6.3 Set d'icones prioritaires

| Icone | Metaphore lavis | Geste |
|-------|----------------|-------|
| Play | Trait de pinceau diagonal | Triangle en un seul trait rapide |
| Pause | Colonnes d'encre | Deux traits verticaux paralleles |
| Recherche | Enso (cercle zen) | Cercle ouvert, non ferme |
| Profil | Capsule de micro | Ovale avec trait de base |
| Chat | Onde sonore | Trois arcs concentriques |
| Upload | Trait ascendant | Trait qui monte avec goutte au sommet |
| Settings | Ensui (roue) | Cercle avec trait directionnel |
| Home | Montagne | Triangle inverse minimaliste |
| Close | Croix de pinceau | Deux traits croises d'un seul geste |
| Volume | Ondes | Arc de cercle avec diffusion |

### 6.4 Production

1. Dessiner a la main (papier + feutre pinceau, ou tablette)
2. Scanner ou photographier en haute resolution
3. Vectoriser manuellement dans Inkscape (pas de trace automatique)
4. Preserver l'irregularite du trait
5. Exporter en SVG avec `currentColor`
6. Integrer comme composant React dans `apps/web/src/components/icons/`

---

## 7. Textures et surfaces

### 7.1 Papier washi numerique

Chaque fond porte la texture du papier. Jamais de surface lisse.

**Implementation :**
- Un fichier `washi.png` (512x512, ~8 Ko)
- Photo d'un vrai papier washi, desaturee, grain visible
- Applique en `background-repeat` avec `mix-blend-mode: soft-light`
- Opacite : 0.04 (standard) a 0.08 (patine maximale)
- Desactive en mode eco et `prefers-reduced-motion: reduce`

### 7.2 Couches d'encre (elevation)

Les surfaces elevees sont des couches d'encre diluee :

| Elevation | Opacite | Blur | Usage |
|-----------|---------|------|-------|
| Papier (fond) | 0% | — | Fond de page |
| Surface (carte) | 4-8% | 8px | Cards, sections |
| Overlay | 8-12% | 16px | Dropdowns, menus |
| Modale | 12-20% | 24px | Modales, dialogues |
| Suzuri (player) | 20-30% | 32px | Player audio (element le plus dense) |

### 7.3 Bordures

**Regle absolue : jamais de `border: 1px solid`.** Les bords sont des diffusions d'encre.

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

---

## 8. Applications

### 8.1 Packaging physique

Le packaging prolonge le lavis dans le monde physique.

| Element | Spec |
|---------|------|
| **Boite** | Carton kraft non blanchi (brun naturel) — LE papier du lavis |
| **Impression** | Logo Talas (symbole) en noir, comme un hanko (sceau japonais) tamponne |
| **Livret** | Papier recycle, schemas en style trait de pinceau (pas de rendus 3D) |
| **Sticker** | Logo monochrome, encre noire sur fond transparent ou papier |
| **Pochette tissu** | Noire, logo brode en **cyan `#0098B5`** — la SEULE touche de couleur |
| **Numero de serie** | Frappe a froid sur le carton (pas imprime) |
| **Cable** | Noir, sans marquage |

Le cyan n'apparait QUE sur la pochette (broderie). Tout le reste est monochrome.

### 8.2 Produit physique (microphone)

| Element | Spec |
|---------|------|
| **Corps** | Aluminium mat, finition brossee ou microbillage |
| **Marquage** | Symbole Talas grave au laser sur le corps |
| **Texte** | "TALAS" grave en petit sous le symbole |
| **Finition** | Mate — pas de brillant (coherence papier/encre) |
| **Connecteur** | XLR, pas de marquage couleur |

### 8.3 Web (Veza)

L'interface Veza est l'incarnation numerique du lavis. Le design system SUMI v3
definit l'implementation complete (voir [[SUMI_V3_SPECIFICATION]]).

**Principes cles :**
- 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

### 8.4 Reseaux sociaux

| Element | Spec |
|---------|------|
| **Avatar** | Symbole Talas sur fond washi `#F2EDE6` (jour) ou `#0D0D0F` (nuit) |
| **Banniere** | Photo d'atelier en noir & blanc avec grain, style lavis |
| **Posts** | Fond washi, texte en encre, accent cyan minimal |
| **Videos** | Sous-titres en Space Grotesk Bold, fond = lavis diffus semi-transparent |
| **Stories** | Fond washi + contenu + logo en bas |
| **Watermark** | Symbole Talas semi-transparent (`opacity: 0.15`) en coin |

**Style photographique RS :**
- 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

### 8.5 Documents imprimes

| Element | Spec |
|---------|------|
| **Papier** | Recycle, non couche, ton naturel/creme |
| **Impression** | Noir uniquement (sauf pochette → cyan) |
| **Marges** | Genereuses — le vide (ma) est aussi important que le contenu |
| **Titres** | Space Grotesk Bold, MAJUSCULES |
| **Corps** | Inter Regular, 11pt minimum |
| **Logo** | Toujours en haut ou en bas de page, jamais au milieu |

---

## 9. Faire / Ne pas faire

### Faire

- Utiliser les couleurs exactes de la palette (copier les hex codes)
- Laisser respirer le logo (zone d'exclusion = hauteur du symbole)
- Preserver l'irregularite des gestes (logo, icones)
- Tester sur fond clair ET sombre avant de valider
- Verifier le contraste WCAG AA sur chaque combinaison texte/fond
- Utiliser le vide comme un choix de composition delibere
- Traiter les photos en noir et blanc avec grain pour les communications

### Ne pas faire

- Utiliser du blanc pur (#FFFFFF) ou du noir pur (#000000)
- Ajouter une deuxieme couleur d'accent (pas de violet, pas de orange, pas de vert)
- Ajouter des effets au logo (ombre, degrade, 3D, contour, lueur)
- Utiliser des icones standard (Font Awesome, Material Icons, Lucide, etc.)
- Utiliser des bordures CSS nettes (`border: 1px solid`)
- Surcharger les pages (si ca ne tient pas avec du vide, c'est qu'il y a trop d'elements)
- Mettre le logo en couleur
- Utiliser des photos en couleur saturee dans les communications
- Imiter le sumi-e de maniere kitsch (pas de polices "japonisantes", pas de fleurs de cerisier)
- Utiliser le cyan pour le logo (le cyan est l'accent UI, le logo est monochrome)

---

## 10. Glossaire visuel

Les termes sumi-e utilises dans la documentation Talas :

| Terme | Japonais | Signification dans le contexte Talas |
|-------|----------|--------------------------------------|
| **Sumi** | 墨 (encre) | Nom du design system. L'encre = les elements UI |
| **Washi** | 和紙 (papier) | La texture de fond. Jamais de surface lisse |
| **Mizu** | 水 (eau) | Le cyan. L'eau transporte l'encre et donne vie au lavis |
| **Ma** | 間 (vide) | L'espace negatif. Un choix de design, pas du remplissage |
| **Fude** | 筆 (pinceau) | Les icones et les traits = gestes de pinceau |
| **Suzuri** | 硯 (pierre a encre) | Le player audio = l'element le plus lourd et ancre |
| **Nijimi** | 滲み (diffusion) | Les effets de flou et de diffusion d'encre |
| **Enso** | 円相 (cercle zen) | Forme de reference pour l'icone de recherche |
| **Hanko** | 判子 (sceau) | Le logo imprime seul sur le packaging, comme un sceau |
| **Wabi-sabi** | 侘寂 | L'esthetique de l'imperfection — les irregularites sont belles |

---

## 11. Fichiers et organisation

### 11.1 Arborescence des assets

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

### 11.2 Formats d'export

| Usage | Format | Notes |
|-------|--------|-------|
| Source vectorielle | SVG | Toujours conserver le SVG source |
| Web (logo, icones) | SVG inline ou PNG transparent | SVG prefere |
| Reseaux sociaux | PNG 72dpi | Tailles specifiques par plateforme |
| Print | SVG ou PDF vectoriel | 300dpi minimum si rasterise |
| Favicon | ICO (16+32) + PNG (180 Apple Touch) + SVG | Multi-format |
| OG/meta | PNG 1200x630 | Pour les previews de liens partages |

### 11.3 Nommage des fichiers

Convention : `{marque}_{type}_{variante}.{ext}`

Exemples :
- `talas_symbole_noir.svg`
- `talas_logo_principal_blanc.svg`
- `veza_logotype_noir.svg`
- `talas_favicon_32x32.png`

---

## Voir aussi

- [[05_EXPERIENCE_UTILISATEUR/DIRECTION_ARTISTIQUE_TALAS]] — Philosophie visuelle complete
- [[05_EXPERIENCE_UTILISATEUR/IDENTITE_VISUELLE]] — Brief d'identite visuelle
- [[05_EXPERIENCE_UTILISATEUR/SUMI_V3_SPECIFICATION]] — Spec technique du design system
- [[05_EXPERIENCE_UTILISATEUR/GUIDE_CREATION_LOGO]] — Guide pratique de creation du logo
- [[01_PILOTAGE/ROADMAP_IDENTITE_VISUELLE]] — Roadmap pas-a-pas (V1-V8)
- [[07_CONTENUS_MARKETING/Storytelling/MANIFESTE_TALAS]] — Manifeste de marque
- [[00_META/TALAS_IDENTITE_PROJET]] — Document d'identite du projet