GΓ©nΓ©rΓ© le 4 Avril 2026 - Projet Talas
Ce dossier documente les efforts pour rendre les interfaces Talas accessibles Γ tous : normes, audits, guidelines et outils.
audit_wcag.md : rapport de conformitΓ©checklists/ : critΓ¨res Γ valider (AA / AAA)outil/ : axe DevTools, Lighthouse, Pa11ydesign_guidelines/ : composants accessiblestests/ : retours personnes concernΓ©es (optionnel mais prΓ©cieux)LβaccessibilitΓ© nβest pas un bonus : elle est native Γ lβUX Talas.
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.
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
| 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) |
Talas et Veza partagent le meme langage visuel (lavis, palette, typographie) mais ont chacune leur propre logo.
| 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) |
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
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]])
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 |
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
| 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 | |
| Symbole imprime | 8mm | Marquage produit |
En dessous de ces tailles, le logo devient illisible. Utiliser la version simplifiee (symbole seul ou favicon).
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
La palette est celle d'un lavis : noir, blanc casse, les gris entre les deux, et une seule couleur β le cyan.
| 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 |
| 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 |
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)
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)
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).
| 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 |
| 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 |
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).
#F2EDE6 (papier washi).#0D0D0F (noir d'encre).| 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.
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
#9A958D) β il s'efface comme un lavis dilueMaximum 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).
<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.
Les icones sont des gestes dessines a la main β comme des caracteres calligraphiques simplifies. Pas des SVG generiques lisses.
| 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 |
| 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 |
currentColorapps/web/src/components/icons/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
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) |
Regle absolue : jamais de border: 1px solid. Les bords sont des diffusions d'encre.
/* NON */
border: 1px solid rgba(0, 0, 0, 0.1);
/* OUI */
box-shadow: 0 0 6px rgba(26, 26, 30, 0.06);
border: none;
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.
| 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 |
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
| 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
| 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 |
border: 1px solid)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 |
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
| 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 |
| 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 |
Convention : {marque}_{type}_{variante}.{ext}
Exemples :
- talas_symbole_noir.svg
- talas_logo_principal_blanc.svg
- veza_logotype_noir.svg
- talas_favicon_32x32.png
Specification detaillee des fonctionnalites qui n'existent nulle part ailleurs. Ce document sert de reference pour l'implementation future.
L'interface de Veza evolue visuellement avec le temps et l'usage, comme un objet physique qui se patine. Chaque compte a une interface unique, forgee par son histoire d'utilisation.
account_age_days β anciennete du compte en jours
total_play_time_hours β temps d'ecoute cumule
total_uploads β nombre de morceaux uploades
total_messages β nombre de messages envoyes
total_exchanges β nombre de trocs realises
zone_usage[zone_id] β nombre d'interactions par zone de l'interface
| Niveau | Condition | Effet visuel |
|---|---|---|
| 0 β Neuf | Compte < 7 jours | Interface froide, surfaces lisses, pas de grain |
| 1 β Rode | Compte > 30 jours + 10h d'ecoute | Leger rechauffement des tons, grain subtil apparait |
| 2 β Vecu | Compte > 90 jours + 50h d'ecoute + 5 uploads | Tons cuivres plus profonds, textures plus riches, micro-details |
| 3 β Patine | Compte > 180 jours + 200h + 20 uploads | Palette pleinement rechauffee, usure visible sur les elements frequents |
| 4 β Heritage | Compte > 365 jours + 500h + activite communautaire | Patine complete, details uniques, effet "objet de famille" |
Chaque zone de l'interface se patine independamment selon son usage : - Le player se patine le plus vite (element le plus utilise) - La barre de navigation se patine selon les onglets frequentes - Le profil se patine selon l'activite de publication - Les zones peu visitees restent "neuves" β creant un contraste naturel
L'onglet de decouverte se transforme progressivement en un espace navigable ou chaque artiste est un lieu a explorer, avec un paysage sonore en temps reel.
La recherche classique par tags/genres, mais avec une presentation visuelle plus riche que la norme : - Les resultats ne sont pas une liste verticale mais un arrangement spatial (grille organique, pas de rangees uniformes) - Chaque resultat a une micro-visualisation du son (petite waveform, couleur dominante de la pochette) - Le survol d'un resultat declenche un preview audio de 5 secondes - Les resultats se regroupent visuellement par affinite (genres proches = resultats proches dans l'espace)
Un canvas 2D navigable : - Chaque artiste est un point dans un espace 2D - La position est determinee par les tags/genres (pas par popularite, pas par ML) - L'utilisateur peut zoomer et se deplacer (pan/zoom fluide) - En zoomant, les points deviennent des cartes avec pochette + nom + preview - Un algorithme deterministe de placement (t-SNE ou UMAP applique aux vecteurs de tags, pas de tracking comportemental) - Le point de depart de l'exploration est determine par les genres preferes de l'utilisateur (declares, pas devines)
Un monde genere proceduralement : - Chaque zone a une ambiance sonore (fond ambient genere a partir des morceaux des artistes de la zone) - Le terrain est genere a partir de la densite d'artistes (plus d'artistes = zone plus "peuplee" visuellement) - L'utilisateur se deplace librement (clavier/touch/souris) - Decouvrir un artiste = s'approcher d'un point lumineux dans le paysage - Le paysage est different pour chaque utilisateur (point de depart aleatoire, mais la topologie est la meme)
Chaque artiste a un espace qu'il peut personnaliser visuellement, pas juste un profil uniforme.
| Element | Options |
|---|---|
| Couleur d'ambiance | Palette libre ou presets |
| Image de fond | Upload libre |
| Disposition des blocs | Drag & drop (morceaux, bio, visuels, liens, playlist) |
| Typographie | Choix parmi 5-8 familles (curees, pas illimitees) |
| Player | S'adapte automatiquement aux couleurs de l'espace |
| CSS custom (avance) | Zone d'injection CSS limitee pour les utilisateurs techniques |
L'esprit MySpace (expression personnelle) avec l'execution de 2026 (controles elegants, preview en temps reel, pas de HTML brut).
Un tableau d'offres et de demandes ou les competences sont une monnaie.
Titre: "Je cherche un site web pour mon projet musical"
J'offre: "3 beats instrumentaux exclusifs, mix et master inclus"
Je cherche: "Un site one-page responsive avec player integre"
Tags: #beatmaking #webdev #echange
Disponibilite: Flexible
| J'offre | Je cherche |
|---|---|
| 5 beats exclusifs | Un site web |
| Mix + master d'un EP | Un shooting photo |
| Design de pochette | 3 instrumentales |
| Formation MAO (3 sessions) | Logo + charte graphique |
| Prise de son live | Montage video |
| Preset pack (Serum/Vital) | Enregistrement voix |
Chaque artiste peut avoir un mini-site public accessible en dehors de Veza, a une URL propre (artiste.veza.xxx ou un domaine custom).
L'app doit etre complete et vivante MAIS econome. Chaque octet charge, chaque requete envoyee, chaque animation jouee doit servir l'experience.
| Metrique | Objectif |
|---|---|
| Bundle JS initial | < 150 Ko gzip |
| First Contentful Paint | < 1.5s |
| Time to Interactive | < 2s |
| Requetes au chargement | < 5 |
| Animations simultanees | max 2 |
| Images : format | WebP ou AVIF, lazy-loaded |
| Audio : streaming | HLS adaptatif (qualite selon la connexion) |
| Polices | 2 max (variable fonts de preference) |
| Priorite | Concept | Complexite | Impact |
|---|---|---|---|
| 1 | Identite visuelle (palette, typo, textures, icones) | Moyenne | Fondamental |
| 2 | Player audio repense | Moyenne | Coeur de l'experience |
| 3 | Espaces artistes personnalisables | Moyenne | Differenciation forte |
| 4 | Systeme de troc | Faible | Communaute |
| 5 | Patine de l'interface (V1 : global, pas par zone) | Faible | Signature unique |
| 6 | Recherche enrichie (V1) | Moyenne | UX amelioree |
| 7 | Sites artistes statiques | Moyenne | Valeur ajoutee |
| 8 | Carte des artistes 2D (V2) | Elevee | Innovation |
| 9 | Patine par zone (V2) | Moyenne | Profondeur |
| 10 | Monde explorable (V3-V4) | Tres elevee | Vision long terme |
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.
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.
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.
| 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 |
SUMI β le nom du design system est deja "encre" en japonais. Ce n'etait pas un hasard. La direction etait la depuis le debut.
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
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
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%)
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
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
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) |
| 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 |
| 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 |
La typographie doit evoquer la calligraphie sans tomber dans le pastiche. Pas de police "japonisante" kitsch. Des caracteres modernes avec du caractere.
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
La palette est celle d'un lavis : noir, blanc, les gris entre les deux, et une seule couleur vive β le cyan.
| 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 |
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
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.
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 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 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)
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) |
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
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
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 |
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 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)
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.
Ce dossier contient le design system centralisΓ© de Talas : composants, tokens, couleurs, typographie, icΓ΄nes, rΓ¨gles dβutilisation.
components/ : boutons, cartes, modales, alertesβ¦tokens/ : couleurs, espacement, radius, ombrage (Figma + CSS vars)typography/ : hiΓ©rarchie des titres, lisibilitΓ©, codeicons/ : pack SVG ou librairie utilisΓ©eprincipes/ : rΓ¨gles de composition, exemple d'usageCe dossier est le socle de toute lβexpΓ©rience visuelle Talas.
Ce dossier contient les maquettes haute fidΓ©litΓ©, prototypes interactifs et wireframes rΓ©alisΓ©s sous Figma.
prototypes/ : parcours utilisateur cliquablespages/ : accueil, produit, panier, dashboard, chatarchivΓ©s/ : versions anciennes pour comparaisonprΓ©sentations/ : fichiers pour feedback dβΓ©quipeTu peux intΓ©grer des liens publics Figma ou exporter en PDF pour archivage.
Ce dossier contient la cartographie des parcours types pour chaque profil utilisateur : acheteur, crΓ©ateur, ambassadeur, contributeur.
journeys/ : onboarding, commande, partage, trocpersonas.md : profils types, objectifs, attentesusecases.md : scΓ©narios dΓ©taillΓ©sflux_graphs.drawio ou .fig : diagrammesTu peux croiser ces donnΓ©es avec les retours
Tests_Utilisateurs/.
Comment dessiner, scanner, vectoriser et decliner le logo. Guide pour une personne seule, avec des outils gratuits. Prerequis : avoir lu [[DIRECTION_ARTISTIQUE_TALAS]] et [[IDENTITE_VISUELLE]]. Derniere mise a jour : 2 avril 2026.
Avant de dessiner quoi que ce soit, avoir ces criteres en tete :
Le logo est bon si et seulement si il passe tous ces tests :
Le logo est un geste de pinceau. Le dessiner a la main est coherent avec l'identite et produit naturellement l'irregularite recherchee.
Materiel minimal :
| Outil | Ou le trouver | Budget |
|---|---|---|
| Feutre pinceau (Pentel Sign Brush, Tombow Fudenosuke, ou Pilot Futayaku) | Papeterie, Amazon | 3-8 EUR |
| Papier blanc lisse (A4 standard, pas trop texturise) | N'importe ou | 0 EUR |
| Feutre noir fin (Pigma Micron 05 ou Staedtler Pigment Liner) | Papeterie | 3 EUR |
Materiel avance (si disponible) :
| Outil | Pourquoi | Budget |
|---|---|---|
| Encre de Chine (Sennelier, Winsor & Newton, ou encre sumi japonaise) | Le vrai sumi-e β diffusion authentique | 5-12 EUR |
| Pinceau calligraphie (fude) β taille moyenne | Trait avec variation d'epaisseur naturelle | 5-15 EUR |
| Papier aquarelle (grain fin, 200-300 g/m2) | Absorbe l'encre sans gondoler | 5-10 EUR |
| Pierre a encre (suzuri) + baton d'encre | L'experience complete β broyer son encre | 15-30 EUR |
Tu n'as pas besoin de tout ca. Un feutre pinceau a 5 EUR et du papier A4 suffisent pour produire un excellent logo. L'encre de Chine ajoute de l'authenticite mais n'est pas indispensable.
| Outil | Usage |
|---|---|
| Scanner (si tu en as un) | 600 DPI minimum, niveaux de gris ou N&B |
| Smartphone (alternative) | Photo en lumiere naturelle, bien cadree, sans ombre |
| Application de scan (Adobe Scan, Microsoft Lens, ou Open Note Scanner) | Corrige la perspective et augmente le contraste automatiquement |
| Outil | Usage | Cout |
|---|---|---|
| Inkscape | Vectorisation, assemblage, declinaisons, export SVG | Gratuit (open-source) |
| GIMP | Nettoyage du scan (niveaux, contraste, crop) | Gratuit (open-source) |
| Krita (optionnel) | Dessin tablette si tu en as une | Gratuit (open-source) |
| Figma (optionnel) | Mockups rapides pour tester en contexte | Gratuit (usage perso) |
Inkscape est l'outil principal. Il est gratuit, open-source, et coherent avec les valeurs du projet. Pas besoin d'Adobe Illustrator.
Avant de dessiner, nourrir l'oeil. Rassembler 15-20 images de reference.
Ou chercher : - Pinterest : "sumi-e logo", "japanese ink branding", "minimal audio logo", "calligraphy symbol", "enso logo", "brush stroke mark" - Dribbble : memes recherches - Are.na : channels "branding", "japanese design", "monochrome" - Google Images : "teenage engineering logo", "aiaiai logo", "ableton logo", "native instruments logo", "nothing phone logo"
Ce qu'il faut collecter : - Des logos qui fonctionnent en monochrome et en petit - Des gestes de pinceau (enso, traits, eclaboussures controlees) - Des exemples de logotypes en geometrique bold + majuscules - Des exemples de logos graves ou serigraphies sur metal - Des exemples de logos brodes
Sauvegarder dans :
05_EXPERIENCE_UTILISATEUR/Identite_Visuelle/logo/references/
Prendre 10 minutes pour regarder de pres chacun de ces logos et noter ce qui fonctionne :
| Reference | Ce qu'il faut en retenir |
|---|---|
| Teenage Engineering | Systeme visuel total, reconnaissable en 1 seconde |
| Aiaiai | Logotype pur, pas de symbole, minimalisme radical |
| Ableton | Logotype simple, pas de chichi, sΓ©rieux sans etre froid |
| Native Instruments | Symbole fort (NI imbriques), fonctionne en petit |
| Nothing | Dot matrix, langage proprietaire, anti-generic |
| Muji | L'absence de marque visible = force tranquille |
| Enso traditionnel | Cercle ouvert, pinceau, imperfection = beaute |
Explorer chaque direction pendant 20-30 minutes. Dessiner vite, ne pas reflechir trop. Le but est la quantite, pas la qualite. 2-3 croquis par direction minimum.
Le mot "TALAS" suffit. Pas de symbole. Jouer sur la typographie.
Force : simplicite absolue, pas de risque de symbole "deja vu" Faiblesse : pas de symbole pour favicon/avatar, moins memorable
Un cercle de pinceau, ouvert ou ferme, avec ou sans le nom.
Force : reference sumi-e directe, universel, fonctionne en rond (avatar) Faiblesse : beaucoup de logos utilisent des cercles β risque de banalite
Une forme d'onde audio stylisee en trait de pinceau.
Force : lien direct avec l'audio, unique dans le paysage des logos micro Faiblesse : peut etre trop litteral si mal execute
Un seul coup de pinceau. Rien d'autre. Le geste pur.
Force : radical, memorable, wabi-sabi pur, fonctionne en toute taille Faiblesse : peut etre trop abstrait β difficile de faire le lien avec l'audio
Un schema electronique ultra-simplifie. Un clin d'oeil au circuit du preamp.
Force : lien direct avec le hardware, open-source, transparence Faiblesse : peut etre trop technique/niche
Combiner les directions les plus fortes.
Regles pour cette phase : - Dessiner en 30 secondes maximum par croquis β pas plus - Utiliser un feutre epais (pas un stylo fin β on cherche des formes, pas des details) - Dessiner grand (au moins 5 cm de haut par croquis) - Ne pas effacer. Si c'est rate, passer au suivant - Mettre la date et un numero sur chaque feuille - Objectif : 15-20 croquis minimum sur l'ensemble des directions
Apres les croquis : 1. Laisser reposer une nuit β ne pas choisir a chaud 2. Revenir avec un oeil frais 3. Eliminer tout ce qui ne passe pas le test du "reconnaissable en 16x16" 4. Entourer les 3 pistes les plus fortes 5. Si aucune ne convainc, recommencer une session de croquis (c'est normal)
Les croquis au feutre donnent la forme. L'encre donne la matiere β la diffusion, l'epaisseur variable du trait, les "accidents" qui font la beaute du sumi-e.
Cette etape transforme une idee en un objet physique authentique.
Si tu n'as pas d'encre de Chine, le feutre pinceau (Pentel Sign Brush ou Tombow Fudenosuke) est un excellent substitut.
Si tu as de l'encre de Chine et un pinceau :
Astuces : - Un pinceau presque sec donne un trait texturise (effet "herbe seche") β tres sumi-e - Un pinceau tres charge donne un trait dense avec des eclats d'encre β expressif - Incliner le pinceau donne un trait large ; le tenir vertical donne un trait fin - Le papier mouille prealablement donne des bords tres diffus (nijimi)
Pour chaque piste retenue : 1. Etaler toutes les versions sur la table 2. Eliminer les traits trop epais, trop fins, trop propres, ou trop chaotiques 3. Garder le geste qui a le plus de caractere tout en restant lisible 4. Marquer ce geste d'un point rouge (ou prendre une photo de reference)
talas_symbole_scan_01.png, talas_symbole_scan_02.png, etc.Inkscape a une fonction de trace automatique (Chemin β Vectoriser un objet matriciel). Ne pas l'utiliser pour le logo final. Voici pourquoi :
La vectorisation manuelle prend plus de temps mais produit un SVG propre, leger et fidele au geste original.
Exception : on peut utiliser le trace automatique comme point de depart, puis nettoyer et simplifier manuellement. C'est un bon compromis pour des formes complexes.
Conseil : tracer le contour exterieur du trait, pas le centre. Le symbole est une forme pleine (fill), pas un trait (stroke). Ceci donne un meilleur resultat en petite taille.
#1A1A1E (noir sumi)Si la forme est trop complexe pour un trace entierement manuel :
Avant de passer a la suite : - [ ] Zoomer a 100% : le symbole est-il propre et lisible ? - [ ] Zoomer a 3200% : les courbes sont-elles lisses sans etre parfaites ? - [ ] Reduire a 32x32 px : le symbole est-il reconnaissable ? - [ ] Reduire a 16x16 px : le symbole est-il encore lisible ? - [ ] Inverser les couleurs (blanc sur noir) : ca fonctionne ?
TALASLa typographie geometrique en MAJUSCULES peut necessiter des ajustements :
Une fois satisfait :
Important : garder une copie du texte editable avant conversion (dans un calque cache) au cas ou il faudrait ajuster plus tard.
Meme processus exact :
VEZA en Space Grotesk Bold, MAJUSCULES, meme letter-spacingtalas_logo_principal.svgtalas_logo_empile.svgtalas_symbole.svgtalas_logotype.svgLe favicon est le symbole simplifie pour etre lisible en 16x16 et 32x32.
La simplification peut inclure : - Epaissir les traits fins (en dessous de 2px a 32x32, ils disparaissent) - Supprimer les details qui ne sont plus visibles en petit - Renforcer la forme globale
Technique :
1. Dupliquer le symbole
2. Redimensionner a 32x32 px
3. Zoomer a 800% pour travailler pixel par pixel
4. Ajuster les courbes pour que ca reste lisible
5. Verifier a 16x16 (encore plus simplifie si necessaire)
6. Sauvegarder : talas_favicon.svg
Pour chaque assemblage :
1. Version noire : fill #1A1A1E sur fond transparent β pour fond clair
2. Version blanche : fill #F2EDE6 sur fond transparent β pour fond sombre
Pour la gravure laser sur aluminium, les traits doivent etre : - Plus epais (minimum 0.5mm en taille reelle sur le micro) - Sans detail fin (les details tres fins ne gravent pas bien) - Contours nets (le laser suit des chemins β pas de flou)
Dupliquer le symbole et epaissir tous les traits de 10-15%.
Sauvegarder : talas_gravure.svg
Pour la broderie sur tissu (pochette du packaging) : - Traits minimum 3mm de large en taille reelle - Pas de details inferieurs a 2mm - Formes fermees de preference (plus faciles a broder)
Dupliquer le symbole et simplifier encore plus que la version gravure.
Sauvegarder : talas_broderie.svg
Avant de valider, tester le logo dans chaque contexte reel.
<link rel="icon">)#F2EDE6 + symbole #1A1A1E#0D0D0F + symbole #E8E3DB#0D0D0F#E8E3DBMontrer les 3 pistes (ou la piste finale) a 2-3 personnes de confiance dont tu respectes l'avis artistique. Pas un sondage large.
Questions a poser : - "A quoi ca te fait penser ?" (sans contexte) - "Si tu voyais ca sur un produit, qu'est-ce que tu imaginerais ?" - "Lequel tu retiens le plus facilement ?"
Ne pas demander "tu aimes ?" β demander "tu retiens ?"
| Fichier | Format | Taille | Usage |
|---|---|---|---|
| Logo principal | SVG | Vectoriel | Source, web |
| Logo principal | PNG | 512x auto | High-res general |
| Logo principal | PNG | 256x auto | Usage courant |
| Symbole | SVG | Vectoriel | Source, web |
| Symbole | PNG | 512, 256, 128, 64, 32, 16 | Tous usages |
| Favicon | ICO | 16+32 | Navigateur |
| Favicon | PNG | 180x180 | Apple Touch Icon |
| Favicon | SVG | Vectoriel | Navigateurs modernes |
| OG image | PNG | 1200x630 | Meta tags (preview liens) |
Pour le SVG : 1. Selectionner l'element a exporter 2. Fichier β Enregistrer une copie en SVG simple (pas Inkscape SVG) 3. Nettoyer les metadonnees inutiles
Pour le PNG : 1. Selectionner l'element 2. Fichier β Exporter en PNG (Shift+Ctrl+E) 3. Zone d'export : Selection 4. Regler la largeur desiree (la hauteur s'ajuste) 5. Cocher fond transparent
Pour le ICO (favicon) :
1. Exporter en PNG 16x16 et 32x32
2. Utiliser un convertisseur en ligne (realfavicongenerator.net) ou ImageMagick :
convert favicon_16.png favicon_32.png favicon.ico
Ranger les fichiers dans l'arborescence definie dans la charte graphique :
05_EXPERIENCE_UTILISATEUR/Identite_Visuelle/
βββ logo/
β βββ talas/
β β βββ talas_logo_principal.svg
β β βββ talas_logo_empile.svg
β β βββ talas_symbole.svg
β β βββ talas_logotype.svg
β β βββ talas_favicon.svg
β β βββ talas_gravure.svg
β βββ veza/
β β βββ veza_logotype.svg
β βββ exports/
β β βββ png/
β β βββ favicon/
β β βββ og/
β βββ references/ (moodboard, croquis scannes)
β βββ croquis/
...
Veza est la plateforme web de Talas. Son identite visuelle est un sous-ensemble de celle de Talas β meme palette, meme typographie, meme langage visuel.
Veza n'a pas de symbole propre. Le mot VEZA en Space Grotesk Bold MAJUSCULES est son seul identifiant visuel.
Avantages : - Coherence : Talas et Veza partagent la meme typographie - Simplicite : pas de confusion entre deux symboles - Le symbole Talas reste LE symbole de tout l'ecosysteme
Usage : dans l'app Veza, la navigation affiche "VEZA" en logotype. Le symbole Talas apparait en footer ou page A propos.
Si tu veux que Veza ait son propre symbole, il doit : - Appartenir au meme langage visuel (geste calligraphique, monochrome) - Etre distinctement different du symbole Talas (pas une variation du meme geste) - Pouvoir coexister avec le symbole Talas sans confusion - Evoquer la connexion ou le reseau (veza signifie "lien" en serbe)
Pistes : - Deux traits qui se croisent ou se rejoignent (lien, connexion) - Un arc de cercle ouvert (onde qui cherche une autre onde) - Deux enso imbriques (communaute, echange)
Cette decision se prend apres avoir finalise le logo Talas. Le logo Veza depend du logo Talas β pas l'inverse.
Pour le lancement, l'option A (logotype seul) est la plus rapide et la plus sure. L'option B peut etre exploree plus tard si le besoin se fait sentir.
Les modeles de generation d'images (Gemini, DALL-E, Midjourney, Stable Diffusion) peuvent servir d'outil d'exploration pour visualiser des directions avant de dessiner a la main.
Comment utiliser : 1. Utiliser le prompt de [[PROMPT_GENERATION_VISUELS]] pour generer des visuels 2. Analyser les resultats : qu'est-ce qui fonctionne dans la composition ? Quelle direction est la plus forte ? 3. Ne JAMAIS utiliser directement un resultat genere comme logo final. Les logos generes par IA ne sont pas suffisamment uniques, manquent d'irregularite authentique, et posent des questions de propriete intellectuelle. 4. S'en servir comme reference visuelle pour dessiner a la main
Si le budget le permet un jour, commander le symbole a un calligraphe professionnel (sumi-e ou calligraphie occidentale) en fournissant le brief.
Avantages : - Geste authentique execute par un artisan du trait - Resultat unique et impossible a reproduire par IA - Coherence parfaite avec la philosophie sumi-e du projet
Budget indicatif : 200-500 EUR pour un symbole de logo chez un calligraphe professionnel. Investissement justifiable une fois que le projet genere du revenu.
A terme, une police personnalisee pour le logotype (basee sur Space Grotesk mais avec des ajustements specifiques) renforcerait l'unicite. C'est un projet ambitieux (2000-5000 EUR chez un type designer) a envisager quand le projet est etabli.
| Phase | Duree | Ou | Livrable |
|---|---|---|---|
| 1. References | 1-2h | Partout (telephone) | Dossier moodboard |
| 2. Croquis rapides | 2-3h | Partout (papier + feutre) | 15-20 croquis, 3 pistes retenues |
| 3. Encre reelle | 2-3h | Chez toi (encre + papier) | 3 gestes finalistes |
| 4. Numerisation | 30min | Chez toi (scanner/telephone) | Scans haute resolution |
| 5. Vectorisation | 3-4h | Laptop (Inkscape) | Symbole SVG vectorise |
| 6. Logotype | 1-2h | Laptop (Inkscape) | TALAS + VEZA en SVG |
| 7. Assemblage | 2-3h | Laptop (Inkscape) | Toutes declinaisons SVG |
| 8. Tests | 1-2h | Laptop (Inkscape/Figma) | Mockups valides |
| 9. Export | 1h | Laptop (Inkscape) | Tous formats finaux |
| Total | ~14-20h | Logo complet + declinaisons |
Ces heures ne sont pas consecutives. Repartir sur 1-2 semaines. Les phases 1-3 peuvent se faire en deplacement (carnet + feutre). Les phases 4-9 necessitent un laptop.
Derniere mise a jour : 27 mars 2026. Direction validee : lavis japonais interactif β voir [[DIRECTION_ARTISTIQUE_TALAS]].
L'interface de Talas/Veza 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.
Le logo existe en deux formes independantes qui peuvent etre associees.
Le logotype : - Le mot "TALAS" en Space Grotesk Bold (ou custom a terme) - MAJUSCULES, letter-spacing large (~0.12em) - Sobre, inscrit β comme grave dans la pierre ou frappe sur metal - Fonctionne seul, sans le symbole
Le symbole : - Un geste dessine a la main, calligraphique - Evoque a la fois l'onde sonore et le trait de pinceau - Irregulier volontairement (pas lisse par logiciel) - Fonctionne en 16x16 (favicon) comme en grand - Monochrome β pas de couleur dans le symbole
| Role | Couleur | Code |
|---|---|---|
| Papier (jour) | Blanc casse washi | #F2EDE6 |
| Papier (nuit) | Noir encre | #0D0D0F |
| Encre (jour) | Noir sumi | #1A1A1E |
| Encre (nuit) | Blanc creme | #E8E3DB |
| Encre diluee | Gris chaud | #9A958D |
| Cyan (accent) | Bleu cyan | #0098B5 |
| Cyan hover | Cyan clair | #00B4D8 |
| Cyan muted | Cyan dilue | rgba(0, 152, 181, 0.15) |
| Cyan profond (nuit) | Teal sombre | #006B7F |
| Role | Couleur | Code | Regles |
|---|---|---|---|
| Succes | Vert sauge dilue | rgba(90, 140, 100, 0.60) | Ligne fine, petit point |
| 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 |
Regles : jamais en aplat, toujours dilue, jamais plus fort que le cyan.
| Usage | Police | Poids |
|---|---|---|
| Titres | Space Grotesk | Bold (700) |
| Corps | Inter | Regular (400), Semi-Bold (600) |
| Code/specs | JetBrains Mono | Regular (400) |
Ce dossier contient tous les fichiers graphiques de l'identite visuelle. Pour les regles d'utilisation, voir [[CHARTE_GRAPHIQUE_TALAS]]. Pour la creation du logo, voir [[GUIDE_CREATION_LOGO]].
Identite_Visuelle/
βββ logo/
β βββ talas/ SVG sources du logo Talas (symbole, logotype, declinaisons)
β βββ veza/ SVG sources du logo Veza
β βββ exports/
β β βββ png/ Exports PNG toutes tailles
β β βββ favicon/ ICO + PNG + SVG favicon
β β βββ og/ Images 1200x630 pour meta tags
β βββ references/
β βββ croquis/ Scans des croquis papier et gestes a l'encre
βββ palette/ Planches de swatches, fichiers ASE
βββ typographie/
β βββ fonts/ Fichiers woff2 (Space Grotesk, Inter, JetBrains Mono)
βββ icones/
β βββ originaux/ Scans des icones dessinees a la main
β βββ svg/ Icones vectorisees finales
βββ textures/ Texture washi (PNG tileable)
βββ templates/ Gabarits RS, OG image, templates de communication
Prompt complet a fournir a un modele de generation d'images (Gemini, etc.) pour produire les visuels fondateurs de l'identite visuelle Talas.
Base sur : [[DIRECTION_ARTISTIQUE_TALAS]], [[IDENTITE_VISUELLE]], [[SUMI_V3_SPECIFICATION]]
Date de creation : 27 mars 2026.
Tu es un directeur artistique specialise en branding et identite visuelle pour des marques artisanales haut de gamme. Tu vas generer les visuels fondateurs de l'identite graphique de TALAS β une marque de materiel audio professionnel (microphones) artisanal, reparable, durable, destinee aux artistes independants (beatmakers, podcasteurs, musiciens home-studio, 15-30 ans).
βββββββββββββββββββββββββββββββββββββββ
DIRECTION ARTISTIQUE FONDATRICE
βββββββββββββββββββββββββββββββββββββββ
L'identite visuelle de Talas est un LAVIS JAPONAIS INTERACTIF (sumi-e numerique). Ce n'est pas une inspiration ou une metaphore β c'est le langage visuel litteral de la marque.
Le concept : 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.
Le design system s'appelle SUMI (encre en japonais).
Mots-cles de la marque : lavis, encre, eau, papier, geste, brut, artisanal, vivant, contraste, diffusion, profondeur, independant, anti-corporate, singulier, durable, solide, silencieux.
βββββββββββββββββββββββββββββββββββββββ
PALETTE DE COULEURS (stricte)
βββββββββββββββββββββββββββββββββββββββ
MODE JOUR :
- Fond "papier washi" : #F2EDE6 (blanc casse chaud, JAMAIS blanc pur)
- Encre/texte : #1A1A1E (noir sumi, dense mais pas dur)
- Encre diluee : #9A958D (gris chaud, texte secondaire)
- Cyan accent : #0098B5 (LA seule couleur vive β rare et precieuse)
- Cyan hover : #00B4D8
MODE NUIT :
- Fond "papier sombre" : #0D0D0F (noir encre profond, pas pur)
- Encre claire : #E8E3DB (blanc creme doux)
- Cyan profond : #006B7F (teal sombre)
Couleurs fonctionnelles (toujours diluees, jamais en aplat) :
- Succes : vert sauge dilue rgba(90, 140, 100, 0.60)
- Erreur : rouge brique dilue rgba(180, 80, 70, 0.55)
- Warning : ambre dilue rgba(190, 150, 60, 0.55)
REGLE ABSOLUE : le cyan est la SEULE couleur d'accent. Il n'apparait que la ou ca compte (liens, CTA, focus, elements interactifs actifs). En grande surface il est toujours diffuse, comme du pigment qui s'etend dans l'eau.
βββββββββββββββββββββββββββββββββββββββ
TYPOGRAPHIE
βββββββββββββββββββββββββββββββββββββββ
- Titres / marque : Space Grotesk Bold β MAJUSCULES, letter-spacing large (~0.12em). Evoque une inscription gravee dans la pierre ou frappee sur metal.
- Corps : Inter Regular/Semi-Bold β lisible, neutre, interligne genereux (1.6-1.8)
- Code/specs : JetBrains Mono Regular
- Le texte flotte dans le papier avec du padding genereux
- Le texte secondaire s'efface comme un lavis dilue (gris doux #9A958D)
βββββββββββββββββββββββββββββββββββββββ
LOGO β SPECIFICATIONS
βββββββββββββββββββββββββββββββββββββββ
Le logo existe en DEUX formes independantes qui peuvent etre associees :
1. LE LOGOTYPE :
- Le mot "TALAS" en Space Grotesk Bold
- MAJUSCULES, letter-spacing large
- Sobre, inscrit β comme grave dans la pierre ou frappe sur metal
- Fonctionne seul, sans le symbole
2. LE SYMBOLE :
- Un geste dessine a la main, calligraphique
- Evoque A LA FOIS l'onde sonore ET le trait de pinceau
- Irregulier volontairement (PAS lisse par logiciel β conserver les imperfections du geste)
- Fonctionne en 16x16 (favicon) comme en grand
- Monochrome strict β jamais de couleur dans le symbole
- Doit fonctionner en gravure laser sur aluminium, en serigraphie, en broderie sur tissu
Contraintes techniques :
- Fonctionne en monochrome pur (noir sur blanc ET blanc sur noir)
- Lisible en tres petit (favicon 16x16, marquage produit sur aluminium)
- Reconnaissable sans le texte (symbole seul = suffisant)
Versions a generer :
- Logotype seul (horizontal)
- Symbole seul (carre)
- Logotype + symbole (horizontal β symbole a gauche)
- Logotype + symbole (vertical β symbole au-dessus)
- Favicon (symbole simplifie, carre)
- Version monochrome noir sur fond washi #F2EDE6
- Version monochrome blanc sur fond noir #0D0D0F
- Version pour gravure/marquage metal (traits epais, simplifies)
βββββββββββββββββββββββββββββββββββββββ
MATERIAUX DE REFERENCE VISUELS
βββββββββββββββββββββββββββββββββββββββ
L'identite traduit ces materiaux reels en numerique :
- Papier washi β texture de fond partout, grain subtil, jamais de surface lisse
- Encre sumi β texte, bordures, elements β noir riche, jamais gris moyen
- Eau β le cyan, les flous, les transitions douces, la diffusion
- Pierre a encre (suzuri) β elements fixes, lourds et stables
- Pinceau (fude) β icones, traits, waveforms
- Aluminium brut β le micro lui-meme, les elements techniques
βββββββββββββββββββββββββββββββββββββββ
ICONOGRAPHIE β STYLE "GESTE"
βββββββββββββββββββββββββββββββββββββββ
Les icones sont des GESTES DESSINES, comme des caracteres calligraphiques simplifies. PAS des SVG generiques lisses.
Contraintes :
- Aspect dessine a la main, trait de pinceau preserve
- Epaisseur de trait variable (plus epaisse au debut du geste, plus fine a la fin)
- Monochrome (currentColor)
- Maximum 30 icones uniques
Icones cles a generer :
- Play : trait de pinceau diagonal formant un triangle en un seul geste rapide
- Pause : deux traits verticaux comme deux colonnes d'encre
- Recherche : cercle ouvert (enso / cercle zen non ferme)
- Profil : forme de capsule de micro (ovale + trait de base)
- Chat/communaute : trois arcs concentriques (onde sonore)
- Upload : trait ascendant avec goutte au sommet
- Settings : cercle avec trait (roue simplifiee)
- Home : triangle inverse (montagne minimaliste)
βββββββββββββββββββββββββββββββββββββββ
PACKAGING PHYSIQUE
βββββββββββββββββββββββββββββββββββββββ
Le packaging prolonge le lavis dans le monde physique :
- Boite : carton kraft non blanchi (= le "papier" du lavis)
- Impression : logo noir seul, comme un hanko (sceau japonais) tamponne
- Livret de reparation : papier recycle, schemas en style trait de pinceau
- Sticker : logo monochrome (encre noire sur fond transparent)
- Pochette tissu : NOIRE avec logo brode en CYAN (#0098B5) β la seule touche de couleur
- Numero de serie : frappe a froid (pas imprime)
βββββββββββββββββββββββββββββββββββββββ
RESEAUX SOCIAUX
βββββββββββββββββββββββββββββββββββββββ
- Avatar : symbole Talas sur fond papier washi #F2EDE6 (ou fond noir encre #0D0D0F)
- Banniere : photo d'atelier traitee en noir & blanc avec grain, style lavis
- Videos : sous-titres en Space Grotesk, fond = lavis diffus
- Le style evoque le lavis sans l'imiter lourdement
βββββββββββββββββββββββββββββββββββββββ
CE QUE TALAS N'EST PAS (anti-references)
βββββββββββββββββββββββββββββββββββββββ
NE GENERE JAMAIS :
- Du premium/luxe (pas de dore, pas de serif elegant, pas de marbre)
- Du cheap/discount (pas de rouge promo, pas de clipart)
- Du corporate (pas de bleu LinkedIn, pas de stock photos, pas de Material Design)
- Du "eco-friendly cute" (pas de vert pastel avec des feuilles)
- Du industriel/steampunk (pas de cuivre, pas d'engrenages)
- Du neon/cyberpunk (pas de noir + neon partout)
- Du glassmorphism / neumorphism
- Du dark mode Spotify/Discord (neon surexploite dans l'audio)
- Du minimalisme Apple (trop froid, trop parfait)
- Du retro/synthwave
- Du "Web3 aesthetic"
- Des polices "japonisantes" kitsch
INSPIRATIONS AUTORISEES (l'esprit, pas la copie) :
- Teenage Engineering β un langage visuel si singulier qu'on le reconnait en 1 seconde
- Are.na β la lenteur, le vide, le refus du bruit visuel
- Muji β l'absence de marque visible, la qualite silencieuse
- Ableton Live β une interface qui ne ressemble a rien d'autre
- Nothing (telephone) β systeme visuel complet et proprietaire
- Ukiyo-e / estampes japonaises β la composition, les plans, la couleur rare dans le monochrome
- Ryoji Ikeda β art visuel+son, minimalisme extreme, noir/blanc/data
βββββββββββββββββββββββββββββββββββββββ
TEXTURES ET SURFACES
βββββββββββββββββββββββββββββββββββββββ
- Le fond porte TOUJOURS une texture de papier washi (grain visible, ton chaud)
- Les surfaces elevees sont des couches d'encre diluee posees sur le papier (opacites croissantes)
- Les bordures sont des traits de pinceau, legerement irreguliers, pas des lignes CSS nettes
- Les effets de diffusion imitent l'eau : bords doux, fondus, spread large et opacite faible
- L'espace vide (ma ι) est un choix de design β padding genereux, jamais surcharge
βββββββββββββββββββββββββββββββββββββββ
CONTEXTE DE LA MARQUE
βββββββββββββββββββββββββββββββββββββββ
Talas est une marque de materiel audio independante fondee par un seul artiste-ingenieur en France. Elle fabrique des microphones a condensateur artisanaux, reparables, avec schemas publics et composants standards. Le manifeste : "Ton micro n'est pas cense mourir au bout de 3 ans. Ton micro n'est pas cense etre impossible a ouvrir." C'est un outil, pas une marque. Anti-corporate, anti-obsolescence, pro-artiste.
La plateforme web associee s'appelle Veza β une communaute pour artistes independants (partage de samples, streaming, boutique ethique).
βββββββββββββββββββββββββββββββββββββββ
CE QUE JE VEUX QUE TU GENERES
βββββββββββββββββββββββββββββββββββββββ
Genere les visuels suivants, un par un, en respectant STRICTEMENT la direction artistique ci-dessus :
1. LOGO β Le symbole Talas (geste calligraphique evoquant onde sonore + trait de pinceau, monochrome, irregulier, sur fond washi #F2EDE6)
2. LOGO β Le logotype "TALAS" en Space Grotesk Bold, MAJUSCULES, letter-spacing large, sur fond washi
3. LOGO β Combinaison logotype + symbole (horizontal), sur fond washi
4. LOGO β Meme combinaison sur fond noir encre #0D0D0F (version nuit)
5. FAVICON β Symbole simplifie pour 32x32, monochrome
6. MOCKUP PACKAGING β Boite kraft avec hanko noir, pochette tissu noire avec broderie cyan, sticker monochrome
7. MOCKUP PRODUIT β Microphone a condensateur aluminium mat avec symbole Talas grave, pose sur surface washi, eclairage naturel doux
8. SET D'ICONES β Les 8 icones cles (play, pause, recherche, profil, chat, upload, settings, home) dans le style geste/pinceau, monochrome, sur fond washi
9. AVATAR RESEAUX SOCIAUX β Symbole sur fond washi (version jour) + symbole sur fond noir (version nuit)
10. BANNIERE RESEAUX SOCIAUX β Photo d'atelier audio traitee en noir & blanc grain lavis, avec logotype Talas discret
11. PLANCHE D'AMBIANCE (MOODBOARD) β Composition evoquant l'univers Talas : papier washi, encre sumi, pinceau, eau, aluminium brut, cyan comme seule couleur, espace vide japonais
12. MOCKUP WEB β Page d'accueil Veza : fond texture washi, elements en couches d'encre, accent cyan, typographie Space Grotesk + Inter, espace vide genereux, waveform en trait de pinceau
Pour chaque visuel : haute resolution, style photographique realiste pour les mockups physiques, style flat/graphique pour les elements d'identite. Respect absolu de la palette (washi + encre + cyan uniquement). Aucune autre couleur.
Ce dossier regroupe tout ce qui concerne lβinterface, les flux utilisateurs, et lβergonomie des applications et produits Talas.
Design_System/ : composants UI rΓ©utilisables, tokens de design.Figma_Prototypes/ : maquettes haute fidΓ©litΓ©.Flux_Utilisateurs/ : parcours types, onboarding, usage quotidien.Tests_Utilisateurs/ : retours, A/B testing, sessions enregistrΓ©es.AccessibilitΓ©/ : conformitΓ© WCAG, audit a11y.Lead UX/UI + Γ©quipe design
03_APPS_&_SERVICES/ (implΓ©mentation frontend)06_COMMUNAUTE_ECOSYSTEME/ (retours utilisateurs)10_QUALITE_TESTS/ (tests qualitatifs et quantitatifs)Ce document est la specification technique complete de SUMI v3. Il definit les regles, contraintes et tokens a implementer pour obtenir une UI singuliere, vivante et econome en ressources. Toute modification de l'UI doit etre conforme a ce document.
Direction artistique : lavis japonais interactif (sumi-e numerique). Voir [[05_EXPERIENCE_UTILISATEUR/DIRECTION_ARTISTIQUE_TALAS]] pour la philosophie complete.
| SUMI v2 (actuel) | SUMI v3 (cible) |
|---|---|
| Palette indigo froide (#7c9dd6) | Palette cyan (#0098B5) β touche de couleur unique dans un lavis monochrome |
| Surfaces plates (flat design) | Surfaces = couches d'encre diluee sur papier washi |
| Themes statiques (dark/light) | Theme circadien (le lavis suit le soleil β papier chaud/froid/inverse) |
| Interface figee | Interface qui se patine (le papier vieillit, l'encre s'oxyde) |
| Animations generiques | Animations avec le poids de l'eau (goutte/trait/lavis/vague/maree) |
| Icones standard | Icones = gestes calligraphiques dessines a la main |
| Player = barre en bas | Player = suzuri (pierre a encre) β objet le plus dense de l'interface |
| Performance non budgetee | Budget strict par metrique |
| Bordures nettes (border CSS) | Bords diffus comme l'encre dans l'eau (box-shadow tres diffus) |
Ce qui est conserve :
- L'architecture tokens (CSS custom properties + TypeScript)
- Le nommage --sumi-* pour toutes les variables
- La grille de 4px
- Les composants existants (refactores, pas remplaces)
- Tailwind v4 CSS-first
- Les modes accessibilite (high contrast, reduced motion, density)
- Space Grotesk + Inter + JetBrains Mono (deja valides dans la direction artistique)
Le cyan (#0098B5) est la seule couleur d'accent. Dans un lavis traditionnel, une seule touche de couleur suffit a tout transformer. Le cyan est cette touche. Il 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.
/* SUMI v3 β Pigment primaire (cyan) */
--sumi-accent: #0098B5;
--sumi-accent-hover: #00B4D8;
--sumi-accent-active: #007A94;
--sumi-accent-muted: rgba(0, 152, 181, 0.15);
--sumi-accent-subtle: rgba(0, 152, 181, 0.08);
--sumi-accent-emphasis: #006B7F;
/* Focus ring β cyan diffus dans l'eau */
--sumi-border-focus: rgba(0, 152, 181, 0.50);
--sumi-shadow-glow: 0 0 0 3px rgba(0, 152, 181, 0.25);
--sumi-shadow-glow-lg: 0 0 20px rgba(0, 152, 181, 0.12);
Les couleurs fonctionnelles sont des pigments dilues dans beaucoup d'eau. Elles apparaissent rarement : en lignes fines, en micro-points, en halos subtils. Jamais en aplats. Elles ne rivalisent jamais avec le cyan.
--sumi-success: rgba(90, 140, 100, 0.60); /* Vert sauge dilue */
--sumi-error: rgba(180, 80, 70, 0.55); /* Rouge brique dilue */
--sumi-warning: rgba(190, 150, 60, 0.55); /* Ambre dilue */
--sumi-info: #0098B5; /* Le cyan lui-meme */
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" - Si le cyan est present au meme endroit, la couleur fonctionnelle passe en gris + icone
Le fond est du papier. Jamais une surface lisse. Jamais du blanc pur. Jamais du noir pur. Le papier a une texture, une chaleur, une vie.
/* Jour (papier washi clair) */
--sumi-bg-void: #EBE5DD; /* Washi vieilli β le papier le plus expose */
--sumi-bg-base: #F2EDE6; /* Fond principal β papier washi */
--sumi-bg-raised: #F7F3EC; /* Surfaces posees sur le papier */
--sumi-bg-overlay: #FBF8F2; /* Dropdowns, overlays */
--sumi-bg-hover: rgba(26, 26, 30, 0.06); /* Encre tres diluee */
--sumi-bg-active: rgba(26, 26, 30, 0.10); /* Encre legerement plus dense */
/* Nuit (lavis inverse β papier sombre, encre claire) */
--sumi-bg-void: #09090B; /* Noir d'encre profond */
--sumi-bg-base: #0D0D0F; /* Fond principal β papier sombre */
--sumi-bg-raised: #141416; /* Surfaces : couche d'encre legerement plus claire */
--sumi-bg-overlay: #1A1A1E; /* Overlays */
--sumi-bg-hover: rgba(232, 227, 219, 0.06); /* Encre claire diluee */
--sumi-bg-active: rgba(232, 227, 219, 0.10); /* Encre claire plus dense */
Le texte est de l'encre posee sur du papier. Noir profond le jour, blanc creme la nuit. Le texte secondaire est de l'encre diluee.
/* Jour */
--sumi-text-primary: #1A1A1E; /* Encre sumi β dense mais pas pur */
--sumi-text-secondary: #9A958D; /* Encre diluee β gris chaud */
--sumi-text-tertiary: #B5B0A8; /* Encre tres diluee β s'efface comme un lavis dilue */
--sumi-text-link: #0098B5; /* Liens = accent cyan */
/* Nuit (inversion) */
--sumi-text-primary: #E8E3DB; /* Encre claire sur papier sombre */
--sumi-text-secondary: #9A958D; /* Encre diluee β reste gris chaud */
--sumi-text-tertiary: #706B63; /* Encre tres diluee en mode nuit */
--sumi-text-link: #006B7F; /* Cyan profond la nuit */
Les surfaces ne sont jamais parfaitement lisses. Le fond porte la texture du papier washi β grain subtil, fibres visibles, surface vivante. Les elements poses dessus sont des couches d'encre diluee a differentes concentrations.
Un seul fichier image : washi.png (512x512, ~8 Ko)
Photo d'un vrai papier washi, desaturee, grain visible. Applique sur le body en pseudo-element.
/* Pseudo-element sur le body β texture washi globale */
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: var(--sumi-z-max);
background-image: url('/washi.png');
background-repeat: repeat;
opacity: var(--sumi-washi-opacity, 0.04);
mix-blend-mode: soft-light;
}
/* Variable de controle */
:root {
--sumi-washi-opacity: 0.04; /* Subtil β a peine perceptible */
}
/* Desactive en mode eco ou reduced-motion */
@media (prefers-reduced-motion: reduce) {
body::after { display: none; }
}
[data-eco="true"] body::after { display: none; }
Cout en performance : ~8 Ko au chargement, 0 impact en runtime (image statique,
GPU-composited via position: fixed). Negligeable.
Les surfaces elevees sont des couches d'encre diluee posees sur le papier. Pas de box-shadow traditionnelle β des diffusions douces, comme l'encre qui s'etend dans du papier mouille.
/* Les cartes sont des voiles d'encre poses sur le washi */
.sumi-card {
background: rgba(26, 26, 30, 0.04);
backdrop-filter: blur(8px);
/* Pas de border β un bord diffus d'encre */
box-shadow: 0 0 8px rgba(26, 26, 30, 0.05);
border: none;
}
/* Overlays β encre plus concentree */
.sumi-overlay {
background: rgba(26, 26, 30, 0.08);
backdrop-filter: blur(16px);
box-shadow: 0 0 16px rgba(26, 26, 30, 0.08);
border: none;
}
/* Modales β couche la plus dense */
.sumi-modal {
background: rgba(26, 26, 30, 0.15);
backdrop-filter: blur(24px);
box-shadow: 0 0 24px rgba(26, 26, 30, 0.10);
border: none;
}
| Elevation | Opacite encre | Blur du backdrop | Effet |
|---|---|---|---|
| Fond (papier) | 0% | β | Le papier washi 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 (suzuri) | 20-30% | 32px | L'element le plus "encre" β le plus present |
Les bordures ne sont pas des lignes CSS nettes. Elles sont des bords diffus d'encre, comme le contour d'une tache d'eau sur du papier.
/* MAL β bordure nette, mecanique */
border: 1px solid rgba(0, 0, 0, 0.1);
/* BIEN β bord diffus d'encre */
box-shadow: 0 0 6px rgba(26, 26, 30, 0.06);
border: none;
Regle : jamais de border visible. Toujours un box-shadow diffus
(spread 0, blur 4-8px, opacite 3-8%).
La "temperature" du papier change avec l'heure, comme la lumiere naturelle sur un rouleau de papier pose pres d'une fenetre. Le matin, le papier est chaud. Le jour, il est neutre. Le soir, il se rechauffe. La nuit, le lavis s'inverse : papier sombre, encre claire, cyan profond.
| Phase | Heures | Ambiance | Modification |
|---|---|---|---|
| Aube | 05h-08h | Papier rose/chaud, encre douce | Fonds legerement plus chauds, cyan tire vers le teal |
| Jour | 08h-17h | Papier neutre, contraste maximal | Palette standard β cyan vif |
| Crepuscule | 17h-20h | Papier qui se rechauffe, encre dense | Fonds plus chauds, cyan plus profond |
| Nuit | 20h-05h | Lavis inverse | Papier sombre (#0D0D0F), encre claire (#E8E3DB), cyan profond (#006B7F) |
// circadian.ts β calcule les ajustements de palette
interface CircadianShift {
bgWarmth: number; // -5 to +5 (degres hue shift sur les fonds)
accentWarmth: number; // -3 to +3 (degres hue shift sur l'accent)
brightness: number; // 0.95 to 1.05 (multiplicateur de luminosite)
contrast: number; // 0.97 to 1.0 (multiplicateur de contraste)
}
function getCircadianShift(hour: number): CircadianShift {
if (hour >= 5 && hour < 8) {
// Aube β papier plus chaud, encre plus douce
return { bgWarmth: 3, accentWarmth: 2, brightness: 1.02, contrast: 0.98 };
}
if (hour >= 8 && hour < 17) {
// Jour β neutre, contraste maximal, cyan vif
return { bgWarmth: 0, accentWarmth: 0, brightness: 1.0, contrast: 1.0 };
}
if (hour >= 17 && hour < 20) {
// Crepuscule β papier qui se rechauffe, encre plus dense
return { bgWarmth: 4, accentWarmth: 3, brightness: 0.98, contrast: 0.99 };
}
// Nuit β le lavis s'inverse, cyan s'approfondit
return { bgWarmth: 1, accentWarmth: -1, brightness: 0.95, contrast: 0.97 };
}
// Dans ThemeProvider, au montage + toutes les 30 minutes
function applyCircadianShift() {
const hour = new Date().getHours();
const shift = getCircadianShift(hour);
// Applique les shifts via des custom properties sur :root
document.documentElement.style.setProperty(
'--sumi-circadian-warmth', `${shift.bgWarmth}deg`
);
document.documentElement.style.setProperty(
'--sumi-circadian-brightness', `${shift.brightness}`
);
}
// Recalcul toutes les 30 min (pas besoin de plus frequent)
setInterval(applyCircadianShift, 30 * 60 * 1000);
/* Les fonds utilisent un filtre CSS plutot que de recalculer les couleurs */
:root {
--sumi-circadian-warmth: 0deg;
--sumi-circadian-brightness: 1;
}
/* Applique sur le conteneur principal, pas sur chaque element */
#app {
filter:
hue-rotate(var(--sumi-circadian-warmth))
brightness(var(--sumi-circadian-brightness));
transition: filter 300s linear; /* Transition de 5 min, imperceptible */
}
Avec le temps et l'usage, l'interface se patine comme un rouleau ancien. Le papier vieillit. L'encre s'oxyde et gagne en profondeur. Le grain du washi devient plus prononce. Le cyan prend des nuances plus profondes.
:root {
/* Calculees au login, basees sur le profil utilisateur */
--sumi-patina-level: 0; /* 0-4, entier */
--sumi-patina-warmth: 0; /* 0-10, degres de hue shift additionnel */
--sumi-patina-washi: 0.04; /* 0.04-0.08, opacite de la texture washi */
--sumi-patina-depth: 0; /* 0-3, diffusion d'encre additionnelle */
--sumi-patina-texture: none; /* none | subtle | rich | deep */
}
interface UserPatinaData {
accountAgeDays: number;
totalPlayTimeHours: number;
totalUploads: number;
totalMessages: number;
totalExchanges: number;
}
function calculatePatina(data: UserPatinaData): PatinaTokens {
// Score composite (0-100)
const ageScore = Math.min(data.accountAgeDays / 365, 1) * 25;
const playScore = Math.min(data.totalPlayTimeHours / 500, 1) * 25;
const createScore = Math.min(data.totalUploads / 20, 1) * 25;
const socialScore = Math.min(
(data.totalMessages + data.totalExchanges * 5) / 200, 1
) * 25;
const score = ageScore + playScore + createScore + socialScore;
// Niveau discret (0-4)
let level = 0;
if (score >= 15) level = 1; // Rode
if (score >= 35) level = 2; // Vecu
if (score >= 60) level = 3; // Patine
if (score >= 85) level = 4; // Heritage
return {
level,
warmth: level * 2.5, // 0, 2.5, 5, 7.5, 10
washi: 0.04 + (level * 0.01), // 0.04, 0.05, 0.06, 0.07, 0.08
depth: level * 0.75, // 0, 0.75, 1.5, 2.25, 3
texture: ['none', 'subtle', 'subtle', 'rich', 'deep'][level],
};
}
| Niveau | Texture washi | Chaleur | Diffusion encre | Effet visuel |
|---|---|---|---|---|
| 0 β Neuf | 0.04 | Aucune | Standard | Papier frais, encre nette |
| 1 β Rode | 0.05 | +2.5 hue | Legerement plus diffuse | Papier qui commence a jaunir |
| 2 β Vecu | 0.06 | +5 hue | Notablement plus riche | Fibres du washi plus visibles, encre plus chaude |
| 3 β Patine | 0.07 | +7.5 hue | Diffusion prononcee | Papier ancien, encre oxydee aux reflets bruns |
| 4 β Heritage | 0.08 | +10 hue | Profonde et chaleureuse | Rouleau ancien β texture riche, encre patinee, cyan profond |
/* Applique via data-attribute sur html */
[data-patina="1"] { --sumi-washi-opacity: 0.05; }
[data-patina="2"] { --sumi-washi-opacity: 0.06; }
[data-patina="3"] {
--sumi-washi-opacity: 0.07;
/* Bords d'encre legerement plus diffus β l'encre a eu le temps de s'oxyder */
--sumi-border-default: 0 0 8px rgba(26, 26, 30, 0.08);
}
[data-patina="4"] {
--sumi-washi-opacity: 0.08;
--sumi-border-default: 0 0 10px rgba(26, 26, 30, 0.12);
--sumi-shadow-sm: 0 2px 8px rgba(26, 26, 30, 0.10), 0 0 4px rgba(0, 152, 181, 0.06);
}
/* La patine se combine avec le circadien */
/* hue-rotate du circadien + hue-rotate de la patine = chaleur cumulee */
#app {
filter:
hue-rotate(calc(var(--sumi-circadian-warmth) + var(--sumi-patina-warmth, 0deg)))
brightness(var(--sumi-circadian-brightness));
}
Chaque element de l'UI a le poids de ce qu'il represente dans le lavis. Les elements legers bougent comme des gouttes d'encre. Les elements lourds bougent comme des vagues. L'eau est la metaphore universelle du mouvement.
| Masse | Elements | Metaphore lavis | Duree | Easing |
|---|---|---|---|---|
| Goutte | Tooltips, badges, toggles | 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, tabs | 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 de page, player | Le mouvement de fond de l'ocean | 450ms | cubic-bezier(0.33, 1, 0.68, 1) |
:root {
/* Durees par masse */
--sumi-motion-goutte: 100ms;
--sumi-motion-trait: 150ms;
--sumi-motion-lavis: 250ms;
--sumi-motion-vague: 350ms;
--sumi-motion-maree: 450ms;
/* Easings par masse */
--sumi-ease-goutte: cubic-bezier(0.25, 0.1, 0.25, 1);
--sumi-ease-trait: cubic-bezier(0.33, 1, 0.68, 1);
--sumi-ease-lavis: cubic-bezier(0.25, 0.8, 0.25, 1);
--sumi-ease-vague: cubic-bezier(0.16, 1, 0.3, 1);
--sumi-ease-maree: cubic-bezier(0.33, 1, 0.68, 1);
--sumi-ease-rebond: cubic-bezier(0.34, 1.56, 0.64, 1); /* Pour les gouttes/traits */
}
Jamais plus de 2 animations simultanees a l'ecran. Si un troisieme element doit s'animer, il attend que le premier termine. Implemente via un compteur CSS ou un gestionnaire JS leger.
/* La page entrante apparait par couches β comme un lavis qui se revele */
.page-enter {
opacity: 0;
transform: translateY(6px);
}
.page-enter-active {
opacity: 1;
transform: translateY(0);
transition:
opacity var(--sumi-motion-lavis) var(--sumi-ease-trait),
transform var(--sumi-motion-lavis) var(--sumi-ease-vague);
}
/* La page sortante se dissout β comme l'encre qui seche */
.page-exit {
opacity: 1;
}
.page-exit-active {
opacity: 0;
transition: opacity 150ms ease-out;
}
Les hover states font "s'etendre" l'element legerement, comme une goutte d'eau qui s'elargit sur le papier.
.sumi-interactive:hover {
transform: scale(1.01);
box-shadow: 0 0 12px rgba(26, 26, 30, 0.08);
transition:
transform var(--sumi-motion-trait) var(--sumi-ease-trait),
box-shadow var(--sumi-motion-trait) var(--sumi-ease-trait);
}
| Metrique | Budget | Actuel (SUMI v2) | Methode de mesure |
|---|---|---|---|
| Bundle JS initial (gzip) | < 120 Ko | ~150 Ko | vite build --report |
| Bundle CSS total (gzip) | < 15 Ko | ? | Idem |
| First Contentful Paint | < 1.2s | < 1.5s | Lighthouse |
| Largest Contentful Paint | < 2.0s | ? | Lighthouse |
| Time to Interactive | < 1.8s | < 2s | Lighthouse |
| Cumulative Layout Shift | < 0.05 | ? | Lighthouse |
| Total Blocking Time | < 150ms | ? | Lighthouse |
| Requetes au chargement initial | <= 5 | ? | Network tab |
| Polices chargees | <= 2 fichiers | 3-4 | Network tab |
| Images texture washi | <= 10 Ko total | 0 | Taille des assets |
| Animations simultanees max | 2 | Illimite | Audit visuel |
requestAnimationFrame actifs au repos |
0 | ? | Performance tab |
| Memoire JS heap (idle) | < 30 Mo | ? | Chrome DevTools |
Polices :
- Inter : charger uniquement Regular (400) et Semi-Bold (600) en variable font
- Space Grotesk : charger uniquement Bold (700) en variable font
- JetBrains Mono : charger uniquement Regular (400) β utilise rarement
- Format : woff2 uniquement
- font-display: swap obligatoire
- Preload les 2 polices principales dans <head>
- Budget total polices : < 80 Ko
Code splitting :
// Chaque page est un chunk separe
const Library = lazy(() => import('./pages/Library'));
const Discover = lazy(() => import('./pages/Discover'));
const Profile = lazy(() => import('./pages/Profile'));
const Settings = lazy(() => import('./pages/Settings'));
// Le player est dans le bundle initial (toujours visible)
Images :
- Format : WebP (fallback JPEG), AVIF si support
- Lazy loading : loading="lazy" sur toutes les images hors viewport
- Responsive : srcset avec 3 tailles (320w, 640w, 1280w)
- Pochettes d'album : max 300x300 en liste, 600x600 en page artiste
- Avatars : max 128x128
Mode eco :
[data-eco="true"] {
/* Desactive les textures et animations */
body::after { display: none; } /* texture washi */
* { animation-duration: 0ms !important; }
#app { filter: none; } /* circadien + patine */
}
Prefetch intelligent :
- Prefetch la page la plus probable (ex: clic sur un artiste -> prefetch sa page)
- Ne PAS prefetch toutes les pages
- Utiliser <link rel="prefetch"> et non preload (priorite basse)
Les icones SUMI v3 sont des gestes dessines β comme des caracteres calligraphiques simplifies. Elles ne sont pas des SVG generes par ordinateur. L'irregularite du trace est volontaire et preservee.
| Contrainte | Valeur |
|---|---|
| Format | SVG inline (pas de sprite, pas de font icon) |
| Taille de reference | 24x24 viewBox |
| Epaisseur de trait | 2px, variable (plus epaisse au debut du geste, plus fine a la fin) |
| Style | Stroke only (pas de fill), sauf exceptions |
| Couleur | currentColor (herite du texte parent) |
| Nombre max d'icones | 30 (pas plus β chaque icone est dessinee specifiquement) |
| Lignes | Irreguliere comme un vrai trait de pinceau (pas de Bezier parfaites) |
| Coins | Mix organique (pas uniformement arrondis) |
| Fonction | Metaphore | Description du geste |
|---|---|---|
| Play | Trait de pinceau diagonal | Un triangle forme par un seul trait rapide |
| Pause | Deux colonnes d'encre | Deux traits verticaux paralleles |
| Recherche | Enso (cercle zen) | Un cercle ouvert β non ferme, comme un enso |
| Profil | Capsule de micro | Forme ovale avec un trait de base |
| Chat / Messages | Onde sonore | Trois arcs concentriques |
| Upload | Trait ascendant | Un trait qui monte avec une goutte au sommet |
| Settings | Ensui (roue) | Cercle avec trait directionnel |
| Home | Montagne | Triangle inverse β symbole de montagne minimaliste |
| Notifications | Point d'encre | Cercle avec une onde de diffusion |
| Like / Favori | Trait croise | Deux traits qui se rencontrent en pointe |
| Volume | Ondes | Arc de cercle avec des ondes de diffusion |
| Menu | Trois traits | Trois traits horizontaux d'epaisseur variable |
| Close | Croix de pinceau | Deux traits croises d'un seul geste |
| Download | Trait descendant | Un trait qui descend vers une ligne de base |
| Share | Traces | Trois points relies par des traits de pinceau |
| Filter | Entonnoir de traits | Deux traits convergents vers le bas |
| Expand | Triangle ouvert | Symbole d'amplification β triangle de pinceau |
Dessiner les icones a la main (papier ou tablette), puis vectoriser dans Inkscape. L'irregularite du trace est volontaire et ne doit pas etre "corrigee" par l'outil de vectorisation.
Les icones sont stockees comme composants React SVG individuels dans
apps/web/src/components/icons/.
Le player est la pierre a encre (suzuri) de l'interface β l'objet le plus lourd, le plus present, le plus ancre. C'est la surface la plus "encree", la plus opaque, la plus dense. Ce n'est pas une barre generique en bas de page. C'est le coeur de l'experience.
| Contrainte | Valeur |
|---|---|
| Position | Bas de page, pleine largeur, toujours visible |
| Hauteur collapsed | 80px (--sumi-player-height) |
| Hauteur expanded | Jusqu'a 60vh (vue immersive β le lavis s'intensifie) |
| Waveform | Traits de pinceau horizontaux β le son EST l'encre |
| Controle volume | Trait vertical avec un point (goutte de pinceau) β pas un slider classique |
| Patine | Le suzuri est l'element qui se patine le plus vite et le plus visiblement |
| Adaptabilite | Le player prend les couleurs de l'artiste en cours d'ecoute |
| Animation au repos | Micro-oscillation du VU-metre (respiration) β CSS uniquement |
| Transition expand/collapse | --sumi-motion-vague + --sumi-ease-vague |
| Touch | Swipe up pour expand, swipe down pour collapse |
La waveform est pre-calculee cote serveur (tableau de 200 valeurs d'amplitude par morceau). Les barres ne sont pas rectangulaires β elles ont des bords arrondis et une opacite variable, comme des traits d'encre poses cote a cote.
.waveform-bar {
width: 2px;
margin: 0 1px;
background: var(--sumi-accent);
border-radius: 50%; /* Bords arrondis comme un trait de pinceau */
transition: height var(--sumi-motion-goutte) var(--sumi-ease-goutte);
}
.waveform-bar.played {
opacity: 1; /* Encre dense β la partie jouee */
}
.waveform-bar.unplayed {
opacity: 0.25; /* Lavis dilue β la partie a jouer */
}
Pas de canvas WebGL, pas de Three.js, pas de librairie audio-visualizer. 200 divs CSS = leger et suffisant.
Le volume est un trait vertical avec un point β comme un trait de pinceau
interrompu par une goutte. Implementation :
- SVG : un trait vertical (<line>) avec un cercle (<circle>) positionne dessus
- Evenements pointer (pointerdown/move/up) pour le drag vertical
- Le composant entier < 50 lignes de code
- Fallback accessibilite : <input type="range"> pour screen readers (visuellement cache)
Quand le player est en mode expanded (vue immersive) : - Le papier de fond s'assombrit (le lavis s'intensifie) - L'encre de la waveform s'elargit et prend plus de place - Le cyan s'illumine β il devient plus vif, comme un pigment concentre - L'espace negatif augmente β le vide (ma) entoure les elements
Le mode eco est active :
- Manuellement par l'utilisateur (toggle dans les settings)
- Automatiquement si prefers-reduced-motion: reduce
- Automatiquement si Save-Data: on (header HTTP)
- Automatiquement si la batterie < 20% (navigator.getBattery() si disponible)
| Fonctionnalite | Etat en mode eco |
|---|---|
| Texture washi | Desactivee |
| Circadien | Desactive (palette statique) |
| Patine | Desactivee (palette standard) |
| Animations | Reduites a 0ms |
| Waveform player | Barre de progression simple |
| Controle volume | Slider lineaire classique |
| Prefetch | Desactive |
| Images pochettes | Taille reduite (160x160 max) |
| Diffusions d'encre (box-shadow) | Desactivees |
| Backdrop-filter (blur) | Desactive |
Le mode eco ne change PAS : - La palette de couleurs de base (cyan, encre, papier) - La typographie - La disposition - Les fonctionnalites
L'app reste complete et utilisable. Elle perd juste sa texture β comme un lavis sur papier lisse au lieu de papier washi.
Quand l'utilisateur navigue sur le profil d'un artiste ou ecoute un de ses morceaux, l'interface s'adapte aux couleurs choisies par l'artiste.
Chaque artiste peut definir :
/* Stocke dans le profil artiste, charge avec les donnees du profil */
--artist-hue: 220; /* Teinte principale (0-360) */
--artist-saturation: 0.6; /* Saturation (0-1) */
--artist-lightness: 0.5; /* Luminosite (0-1) */
Quand un profil artiste est affiche ou qu'un morceau est en cours de lecture :
/* Le player et la page profil utilisent la couleur artiste */
.artist-context {
--sumi-accent: hsl(
var(--artist-hue),
calc(var(--artist-saturation) * 100%),
calc(var(--artist-lightness) * 100%)
);
}
Les autres elements (navigation, sidebar) restent en cyan standard. Seuls le player (suzuri) et la zone de contenu s'adaptent.
Cyan partout. L'accent est toujours cyan (#0098B5), sauf dans un contexte artiste. Pas d'autre couleur primaire. Le cyan est la goutte de pigment dans l'eau noire β rare et precieux.
Texture washi toujours. Sauf en mode eco. Opacite max 0.08. Le fond n'est jamais une surface lisse.
2 animations max. Jamais 3 elements qui bougent en meme temps.
Pas de blanc pur (#FFFFFF). Le blanc le plus clair est #F2EDE6 (papier washi). Le blanc pur n'existe pas dans un lavis β le papier a toujours une teinte.
Pas de noir pur (#000000). Le noir le plus profond est #0D0D0F (noir d'encre). Le noir pur est plat et sans vie β l'encre sumi a toujours de la profondeur.
Pas d'icone generique. Chaque icone est un geste calligraphique dessine specifiquement. Si une icone n'existe pas dans le set, elle n'est pas utilisee.
Le suzuri (player) est sacre. C'est l'element le plus soigne, le plus teste, le plus patine. Ne jamais le traiter comme un composant secondaire.
Rien n'est lineaire. Pas de transition: all 0.3s linear. Toute animation
a un easing organique β le mouvement de l'eau, pas d'un mecanisme.
Le mode eco doit etre beau aussi. L'app sans texture/animation/circadien doit rester coherente et agreable. C'est le lavis sur papier lisse β sobre mais pas pauvre.
Accessible d'abord. Chaque decision esthetique doit passer le test WCAG AA (4.5:1 pour le texte, 3:1 pour les grands elements). Si l'esthetique et l'accessibilite sont en conflit, l'accessibilite gagne.
Pas de bordures nettes. Jamais de border: 1px solid. Les bords sont
des diffusions d'encre β box-shadow diffus, toujours.
Le vide est un choix. L'espace negatif (ma) n'est pas du padding vide. C'est le papier qui respire entre les traits.
| Tache | Priorite | Complexite | Impact |
|---|---|---|---|
| Remplacer la palette indigo par cyan (#0098B5) | 1 | Faible | Fondamental |
| Ajouter la texture washi (washi.png + pseudo-element) | 1 | Faible | Texture immediate |
| Adapter les fonds (papier washi jour/nuit) | 1 | Faible | Ambiance |
| Remplacer les border par des box-shadow diffus | 1 | Moyenne | Langage visuel |
| Implementer les couches d'encre (backdrop-filter + opacites) | 1 | Moyenne | Profondeur |
| Renommer les tokens de mouvement (goutte/trait/lavis/vague/maree) | 1 | Faible | Coherence |
| Implementer les couleurs fonctionnelles pastel diffuse | 1 | Faible | Etats |
| Dessiner les 10 icones prioritaires (gestes calligraphiques) | 2 | Moyenne | Identite |
| Implementer le circadien (ThemeProvider + inversion nuit) | 2 | Moyenne | Vie |
| Refaire le player en suzuri (waveform pinceau + volume trait) | 2 | Elevee | Coeur de l'UX |
| Implementer la patine (niveau 0-2 d'abord) | 3 | Moyenne | Singularite |
| Ajouter le mode eco | 3 | Faible | Ethique |
| Implementer les couleurs artistes | 3 | Moyenne | Personnalisation |
| Patine niveaux 3-4 (encre oxydee, rouleau ancien) | 4 | Moyenne | Profondeur |
| Micro-mouvements du papier de fond (ondulation CSS) | 4 | Faible | Vie subtile |
| Variantes de texture washi pour la patine (2-3 fichiers) | 4 | Faible | Richesse |
Ce dossier regroupe toutes les donnΓ©es issues des tests utilisateurs, en version alpha/bΓͺta ou en labo : retours qualitatifs, quantitatifs, interviews, sessions enregistrΓ©es.
sessions/ : notes, vidéos (Blurred ou anonymisées)retours/ : tableaux synthèse + scoresprotocoles/ : guide de test, consignes, scénarioanalyses/ : heatmaps, taux de clic, abandonCes tests sont essentiels pour orienter la roadmap design.