talas-group/05_EXPERIENCE_UTILISATEUR/DIRECTION_ARTISTIQUE_TALAS.md

# Direction artistique — Talas & Veza

> 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.
>
> Direction choisie : **lavis japonais interactif (sumi-e numerique)**.
> Derniere mise a jour : 27 mars 2026.

---

## Le probleme

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.

Ce n'est pas ce que Talas est. Talas est un projet artisanal, brut, vivant.
L'interface doit l'etre aussi.

---

## La direction : le lavis

### Le lavis japonais (sumi-e) comme langage

L'interface de Veza n'est pas une interface. C'est un **lavis japonais interactif**.

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.

**Ce n'est pas une metaphore. Ce n'est pas une inspiration. C'est la realite
visuelle de l'interface.** 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.

### Pourquoi le lavis

| Propriete du lavis | Traduction dans l'interface |
|--------------------|----------------------------|
| L'encre se diffuse dans l'eau | Les elements ont des bords diffus, pas des bordures nettes |
| Le papier n'est jamais blanc pur | Les fonds ont une texture de washi, jamais #FFFFFF |
| Les couches d'encre creent de la profondeur | Les surfaces sont des layers semi-transparents empiles |
| Le vide est aussi important que le trait | L'espace negatif est un choix de design, pas du remplissage |
| Chaque geste est irreversible | Les interactions ont du poids — pas de undo visuel instantane |
| Le lavis change avec le temps (l'encre s'oxyde) | L'interface evolue, se patine, respire avec l'heure |
| Une seule touche de couleur suffit | Le cyan est rare et precieux — il n'apparait que la ou ca compte |

### Ce que le design system s'appelle

**SUMI** — le nom du design system est deja "encre" en japonais.
Ce n'etait pas un hasard. La direction etait la depuis le debut.

---

## Principes fondateurs

### 1. L'encre et le papier

Tout dans l'interface est soit de l'encre, soit du papier.

**Le papier (fonds, surfaces) :**
- 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 **diffusions** douces

**L'encre (texte, bordures, elements) :**
- 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

### 2. Le cyan — la touche de couleur

Dans un lavis traditionnel, une seule touche de couleur suffit a tout transformer.
Le cyan est cette touche.

**Regles du cyan :**
- 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

**Les couleurs fonctionnelles (notifications, etats) :**
- Rouge, jaune, vert existent mais en version **pastel diffuse** — 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

### 3. Les layers — la profondeur par diffusion

L'interface est une pile de layers semi-transparents, comme des couches de
papier calque mouille.

**Principe :**
- 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

**Techniquement :**
- `backdrop-filter: blur()` sur les surfaces elevees
- Fonds en `rgba()` avec opacites decroissantes
- Pas de `box-shadow` classique — des diffusions radiales (`background: radial-gradient`)
  ou des `box-shadow` tres larges et tres diffus (spread 20-40px, opacite 3-8%)

### 4. L'interface vivante

L'interface n'est pas statique. Elle respire. Elle change. Elle vit.

**Le rythme circadien :**
- 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 **imperceptible en temps reel** — on ne le voit pas
  changer, on constate qu'il a change

**La patine :**
- 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

**Les micro-mouvements :**
- 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

### 5. L'espace vide (ma) — le vide japonais

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.

**Regles du vide :**
- 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

---

## Langage visuel

### Materiaux de reference

L'identite visuelle de Talas s'inspire du reel, mais un reel specifique :

| Materiau | Ce qu'il evoque | Comment le traduire |
|----------|----------------|-------------------|
| **Papier washi** | Support, grain, chaleur, tradition | Texture de fond partout — jamais de surface lisse |
| **Encre sumi** | Trace, geste, permanence, profondeur | Texte, bordures, elements — toujours noir riche, jamais gris moyen |
| **Eau** | Diffusion, transport, vie, mouvement | Le cyan, les flous, les transitions douces |
| **Pierre a encre (suzuri)** | Outil, poids, ancrage | Les elements fixes (navigation, player) — lourds et stables |
| **Pinceau (fude)** | Geste, precision, irregularite | Les icones, les traits, les waveforms |
| **Aluminium brut** | Le micro lui-meme, le hardware | Les elements techniques (specs, prix, tableaux) |

### Ce que Talas N'EST PAS visuellement

| Esthetique | Pourquoi non |
|-----------|-------------|
| Material Design / Google | Generique, corporate, oubliable |
| Glassmorphism / Neumorphism | Tendance ephemere, pas de substance |
| Dark mode neon (Spotify, Discord) | Surexploite dans l'audio, pas de personnalite |
| Minimalisme Apple | Trop froid, trop parfait, nie l'artisanat |
| Retro/synthwave | Nostalgique sans raison, pas authentique |
| "Web3 aesthetic" | Contraire aux valeurs, vide de sens |
| Cuivre / steampunk / industriel | Trop litteral, pas assez singulier |

### Ce dont Talas peut s'inspirer (sans copier)

| Reference | Ce qu'il faut en retenir | Lien avec le lavis |
|-----------|------------------------|-------------------|
| **Teenage Engineering** | Un langage visuel si singulier qu'on le reconnait en 1 seconde | Talas doit etre reconnaissable de la meme facon — par le lavis |
| **Are.na** | La lenteur, le vide, le refus du bruit visuel | Le ma japonais — l'espace vide comme choix |
| **Bandcamp** | L'artiste au centre, chaque page est unique | Les espaces artistes personnalisables |
| **Muji** | L'absence de marque visible, la qualite silencieuse | Le lavis est un anti-branding — la beaute vient du silence |
| **Ableton Live** | Une interface qui ne ressemble a rien d'autre | Le courage d'etre radicalement different |
| **Nothing (telephone)** | Dot matrix, systeme visuel complet et proprietaire | Creer un langage visuel total, pas des touches decoratives |
| **Ukiyo-e / estampes** | La composition, les plans, la couleur rare dans le monochrome | Le cyan comme touche de couleur dans un monde N&B |
| **Ryoji Ikeda** | Art visuel+son, minimalisme extreme, noir/blanc/data | L'esthetique data/son traduite en interface |

---

## Typographie

### Approche

La typographie doit evoquer la calligraphie sans tomber dans le pastiche.
Pas de police "japonisante" kitsch. Des caracteres modernes avec du caractere.

### Choix valides

**Pour les titres / la marque :**
- **Space Grotesk** (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

**Pour le corps de texte :**
- **Inter** (Regular, Semi-Bold) — lisible, neutre mais pas anonyme, variable font
- Interligne genereux (1.6-1.8) — le texte respire comme un poeme

**Pour le code / les specs techniques :**
- **JetBrains Mono** — ligatures, technique, precision

### Regles typographiques

- Titres en MAJUSCULES avec letter-spacing 0.1-0.15em
- Corps en casse normale, interligne genereux
- Le texte n'est jamais colle aux bords — il flotte dans le papier
- Les specs techniques en monospace (coherence avec l'univers circuit/code)
- Le texte secondaire est en gris doux, pas en gris moyen — il s'efface comme
  un lavis dilue

---

## Palette

### Principe

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

### Palette de base

| Role | Couleur | Code | Note |
|------|---------|------|------|
| **Papier (fond)** | Blanc casse chaud | #F2EDE6 | Jamais blanc pur — c'est du washi |
| **Papier sombre (nuit)** | Noir encre | #0D0D0F | Pas un noir pur — un noir d'encre profond |
| **Encre (texte)** | Noir sumi | #1A1A1E | Sur fond clair — dense mais pas dur |
| **Encre claire (nuit)** | Blanc creme | #E8E3DB | Sur fond sombre — doux, pas criard |
| **Encre diluee** | Gris chaud | #9A958D | Texte secondaire, bordures legeres |
| **Lavis (surface)** | Gris diffus | rgba(26,26,30, 0.04-0.12) | Layers d'encre a differentes dilutions |
| **Cyan (accent)** | Bleu cyan | #0098B5 | La touche de couleur — vive sur petit, diffuse sur grand |
| **Cyan hover** | Cyan clair | #00B4D8 | Interaction — un eclat dans l'eau |
| **Cyan muted** | Cyan dilue | rgba(0, 152, 181, 0.15) | Focus rings, backgrounds subtils |
| **Cyan profond (nuit)** | Teal sombre | #006B7F | Le cyan la nuit — plus profond, plus calme |

### Couleurs fonctionnelles (pastel diffuse)

Ces couleurs apparaissent rarement et toujours en version diluee :

| Role | Couleur | Code | Utilisation |
|------|---------|------|------------|
| **Succes** | Vert sauge dilue | rgba(90, 140, 100, 0.60) | Ligne fine, petit point, halo subtil |
| **Erreur** | Rouge brique dilue | rgba(180, 80, 70, 0.55) | Trait fin sous un champ, bordure legere |
| **Warning** | Ambre dilue | rgba(190, 150, 60, 0.55) | Point discret, texte secondaire |
| **Info** | Le cyan lui-meme | #0098B5 | Coherent avec l'accent |

**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"
- Elles ne rivalisent jamais avec le cyan — si le cyan est present au meme
  endroit, la couleur fonctionnelle passe en gris + icone

### Pourquoi le cyan

- Le cyan est la couleur de l'eau — et l'eau est ce qui donne vie au lavis
- Le cyan contraste maximalement avec le noir/blanc (il est pile entre le bleu
  et le vert — ni l'un ni l'autre, singulier)
- Le cyan evoque aussi le signal electronique (oscilloscope, LED d'indication)
- C'est rare comme couleur d'accent dans les apps — differenciation immediate
- En petite quantite sur un fond monochrome, le cyan est electrique — il attire
  le regard sans agresser

### Palette de nuit (inversion)

La nuit (20h-5h), le lavis s'inverse : le papier devient sombre, l'encre
devient claire. Le cyan s'approfondit.

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

La transition entre les deux est un fondu de 30 minutes, imperceptible.

---

## Textures et surfaces

### Le papier washi numerique

Chaque fond porte la texture du papier. Pas un flat color.

**Implementation :**
- Un fichier `washi.png` (512x512, ~8 Ko) — photo d'un vrai papier washi,
  desaturee, avec le grain visible
- Applique en `background-image: repeat` sur le body, en mode `soft-light`
  ou `overlay` 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)

### Les couches d'encre (layers)

Les surfaces elevees sont des couches d'encre diluee posees sur le papier :

| Elevation | Opacite encre | Blur du backdrop | Effet |
|-----------|--------------|-----------------|-------|
| Fond (papier) | 0% | — | Le papier brut |
| Surface (carte) | 4-8% | 8px | Un voile d'encre tres leger |
| Overlay (dropdown) | 8-12% | 16px | Une couche plus dense |
| Modale | 12-20% | 24px | Une zone nettement marquee |
| Player | 20-30% | 32px | L'element le plus "encre" — le plus present |

### L'eau — les effets de diffusion

L'eau est ce qui donne au lavis ses bords doux, ses fondus, ses accidents.

**Dans l'interface :**
- Les bordures ne sont pas des `border: 1px solid` — elles sont des `box-shadow`
  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) — `transform: scale(1.01)` + 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 (`border-radius: 50%` + opacite variable)

---

## Animations et interactions

### Philosophie : le poids de l'eau

Les elements de l'interface ont le poids de ce qu'ils representent
dans le lavis :

| Poids | Elements | Metaphore lavis | Duree | Easing |
|-------|---------|----------------|-------|--------|
| **Goutte** | Tooltips, badges | Goutte d'encre qui tombe | 100ms | ease-out |
| **Trait** | Boutons, icones, liens | Trait de pinceau rapide | 150ms | ease-out avec rebond leger |
| **Lavis** | Cards, dropdowns | Encre qui s'etend dans l'eau | 250ms | cubic-bezier(0.25, 0.8, 0.25, 1) |
| **Vague** | Modales, sidebar, panneaux | Vague lente sur papier mouille | 350ms | cubic-bezier(0.16, 1, 0.3, 1) |
| **Maree** | Navigation, player | Le mouvement de fond de l'ocean | 450ms | cubic-bezier(0.33, 1, 0.68, 1) |

### Les micro-mouvements du fond

Le fond n'est pas statique. Le papier "vit" :
- Une animation CSS tres lente (60-120s par cycle) deplace subtilement
  la texture de fond (`background-position` ou `transform: translate`)
  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

### Les transitions de page

- La page sortante se "dissout" (opacite → 0 en 150ms, comme l'encre qui
  seche et disparait)
- La page entrante "apparait" par couches (fond → elements principaux →
  details, echelonne sur 200ms) — comme un lavis qui se revele couche
  par couche
- Pas de slide lateraux — des fondus verticaux subtils (translateY 4-8px)

---

## Le player audio

Le player est la pierre a encre (suzuri) de l'interface — l'objet le plus
lourd, le plus present, le plus ancre.

**Vision :**
- 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

---

## Iconographie

### Approche : le geste plutot que le trait

Les icones ne sont pas des SVG generes par ordinateur. Elles sont des
**gestes dessines** — comme des caracteres calligraphiques simplifies.

**Contraintes :**
- 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 (`currentColor`)
- 24x24 viewBox
- Maximum 30 icones — chacune est unique et dessinee specifiquement

**Correspondances :**

| Fonction | Metaphore | Description du geste |
|----------|-----------|---------------------|
| Play | Trait de pinceau diagonal | Un triangle forme par un seul trait rapide |
| Pause | Deux traits verticaux | Comme deux colonnes d'encre |
| Recherche | Cercle ouvert | Une enso (cercle zen) non ferme |
| Profil | Capsule de micro | Forme ovale avec un trait de base |
| Chat | Onde sonore | Trois arcs concentriques |
| Upload | Trait ascendant | Un trait qui monte avec une goutte au sommet |
| Settings | Cercle avec trait | Un ensui (roue) simplifie |
| Home | Triangle inverse | Symbole de montagne minimaliste |

---

## Packaging (physique)

Le packaging du micro prolonge le lavis dans le monde physique.

**Direction :**
- 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

---

## Le logo

### Direction validee : logotype + symbole separes

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

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

**Versions necessaires :**
- [ ] 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)

---

## Mot de la fin

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.

Chaque decision de design doit etre passee au filtre de cette question :
**est-ce que ca pourrait exister dans un lavis ?**
Si non, c'est le mauvais choix.

---

## Voir aussi

- [[05_EXPERIENCE_UTILISATEUR/CHARTE_GRAPHIQUE_TALAS]] — Charte graphique complete (regles d'application)
- [[05_EXPERIENCE_UTILISATEUR/GUIDE_CREATION_LOGO]] — Guide pratique de creation du logo
- [[05_EXPERIENCE_UTILISATEUR/SUMI_V3_SPECIFICATION]] — Design system SUMI v3 (implementation technique)
- [[05_EXPERIENCE_UTILISATEUR/IDENTITE_VISUELLE]] — Brief d'identite visuelle (logo, palette, typos)
- [[05_EXPERIENCE_UTILISATEUR/CONCEPTS_INNOVANTS_VEZA]] — Concepts innovants UX (patine, recherche, troc)
- [[07_CONTENUS_MARKETING/STRATEGIE_CONTENU]] — Strategie de contenu (style RS)
- [[07_CONTENUS_MARKETING/Storytelling/MANIFESTE_TALAS]] — Manifeste Talas
- [[00_META/TALAS_IDENTITE_PROJET]] — Valeurs et identite du projet