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