senke/talas-group
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
talas-group/05_EXPERIENCE_UTILISATEUR/DIRECTION_ARTISTIQUE_TALAS.md
senke 66471934af Initial commit: Talas Group project management & documentation 
Knowledge base of ~80+ markdown files across 14 domains (00-13),
Logseq graph, hardware design files (KiCAD), infrastructure configs,
and talas-wiki static site.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-04 20:10:41 +02:00

22 KiB
Raw Permalink Blame History

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

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