talas-group/05_EXPERIENCE_UTILISATEUR/CHARTE_GRAPHIQUE_TALAS.md
senke 66471934af Initial commit: Talas Group project management & documentation
Knowledge base of ~80+ markdown files across 14 domains (00-13),
Logseq graph, hardware design files (KiCAD), infrastructure configs,
and talas-wiki static site.

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

25 KiB

Charte graphique — Talas & Veza

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


1. Direction en une page

L'identite visuelle de Talas est un lavis japonais interactif (sumi-e numerique). L'ecran est du papier washi. Les elements sont des traces d'encre. Le cyan est la seule touche de couleur — comme un pigment rare dans un lavis monochrome.

Cinq principes :

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

2. Architecture de marque

2.1 Les deux entites

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

2.2 Relation visuelle

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

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

2.3 Hierarchie d'utilisation

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

3.1 Logo Talas — composition

Le logo Talas se compose de deux elements independants :

Le symbole :

  • Un geste calligraphique dessine a la main
  • Evoque a la fois l'onde sonore et le trait de pinceau
  • Irregulier volontairement — les imperfections du geste sont preservees
  • Monochrome strict — jamais de couleur dans le symbole
  • Fonctionne seul, sans texte

Le logotype :

  • Le mot TALAS en Space Grotesk Bold
  • MAJUSCULES, letter-spacing 0.12em
  • Sobre, comme une inscription gravee dans la pierre ou frappee sur metal
  • Fonctionne seul, sans le symbole

3.2 Logo Veza — composition

Le logo Veza suit les memes principes :

Le logotype :

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

Le symbole (optionnel) :

  • Si un symbole Veza est cree, il doit appartenir au meme langage visuel (geste calligraphique, monochrome, irregulier)
  • Alternative : utiliser le symbole Talas pour les deux, avec le logotype comme differenciation
  • Decision a prendre lors de la creation du logo (voir GUIDE_CREATION_LOGO)

3.3 Versions necessaires

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

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

3.4 Zones d'exclusion

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

              h
         ┌─────────┐
    h ── │ SYMBOLE  │ ── h
         │  TALAS   │
         └─────────┘
              h
  • Aucun element graphique, texte ou bord de page ne doit entrer dans cette zone
  • Sur fond photographique : le logo doit etre place dans une zone de contraste suffisant
  • Si l'espace est insuffisant, utiliser le symbole seul (il a besoin de moins d'espace)

3.5 Tailles minimales

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

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

3.6 Usages interdits

Ne jamais :

  • Modifier les proportions du logo (etirer, comprimer)
  • Ajouter une couleur au symbole (il est TOUJOURS monochrome)
  • Ajouter un contour, une ombre portee, un effet 3D, un degrade
  • Placer le logo sur un fond a motifs ou une photo a faible contraste
  • Utiliser le logo comme pattern repetitif (ce n'est pas un motif decoratif)
  • Modifier le letter-spacing du logotype
  • Remplacer la police du logotype par une autre
  • Entourer le logo d'un cadre, d'un cercle, d'un badge
  • Utiliser le logo en couleur (le cyan est reserve a l'accent UI, pas au logo)
  • Lisser ou "corriger" les irregularites du symbole — elles sont intentionnelles

4. Palette de couleurs

4.1 Palette principale

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

Mode jour (papier clair)

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

Mode nuit (lavis inverse)

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

Transition jour/nuit

La transition est un fondu de 30 minutes, imperceptible en temps reel. Le passage se fait autour de 20h (vers la nuit) et 5h (vers le jour).

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

4.2 Couleurs fonctionnelles

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

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

Regles des couleurs fonctionnelles :

  • Jamais en fond plein (pas de bandeau rouge pour une erreur)
  • Opacite maximale : 60% — elles sont toujours "diluees"
  • Si le cyan est present au meme endroit, la couleur fonctionnelle cede (gris + icone)

4.3 Audit d'accessibilite (WCAG 2.1 AA)

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

Mode jour (fond #F2EDE6)

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

Mode nuit (fond #0D0D0F)

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

Decisions d'accessibilite

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

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

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

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

4.4 Regles absolues de la palette

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

5. Typographie

5.1 Polices

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

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

5.2 Echelle typographique

H1       Space Grotesk Bold    32px    MAJUSCULES    letter-spacing 0.15em    line-height 1.2
H2       Space Grotesk Bold    24px    MAJUSCULES    letter-spacing 0.12em    line-height 1.3
H3       Space Grotesk Bold    20px    MAJUSCULES    letter-spacing 0.10em    line-height 1.4
H4       Space Grotesk Bold    18px    MAJUSCULES    letter-spacing 0.08em    line-height 1.4
Body     Inter Regular         16px    casse normale                          line-height 1.7
Body-sm  Inter Regular         14px    casse normale                          line-height 1.6
Caption  Inter Semi-Bold       12px    MAJUSCULES    letter-spacing 0.08em    line-height 1.5
Code     JetBrains Mono        14px    casse normale                          line-height 1.5

5.3 Regles typographiques

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

5.4 Chargement des polices (budget performance)

Maximum 2 fichiers de police au chargement initial :

  1. Space Grotesk Bold (variable font ou static bold, ~25 Ko woff2)
  2. Inter Regular (variable font, ~95 Ko woff2 — couvre Regular + Semi-Bold)

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

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

Budget total polices : < 130 Ko.


6. Iconographie

6.1 Principes

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

6.2 Contraintes techniques

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

6.3 Set d'icones prioritaires

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

6.4 Production

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

7. Textures et surfaces

7.1 Papier washi numerique

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

Implementation :

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

7.2 Couches d'encre (elevation)

Les surfaces elevees sont des couches d'encre diluee :

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

7.3 Bordures

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

/* NON */
border: 1px solid rgba(0, 0, 0, 0.1);

/* OUI */
box-shadow: 0 0 6px rgba(26, 26, 30, 0.06);
border: none;

8. Applications

8.1 Packaging physique

Le packaging prolonge le lavis dans le monde physique.

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

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

8.2 Produit physique (microphone)

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

8.3 Web (Veza)

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

Principes cles :

  • Fond = texture washi (jamais de surface lisse)
  • Elements = couches d'encre a opacites variables
  • Accent = cyan, rare et precieux
  • Animations = le poids de l'eau (goutte/trait/lavis/vague/maree)
  • Bordures = diffusions d'encre (jamais de lignes nettes)
  • Player audio = suzuri, l'element le plus dense et le plus soigne

8.4 Reseaux sociaux

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

Style photographique RS :

  • Noir et blanc avec grain prononce (pas de HDR, pas de saturation)
  • Eclairage naturel, contrastes forts
  • Si couleur : uniquement des touches de cyan ou de lumiere froide
  • Pas de filtres Instagram — le traitement est sobre, il ne "joue" pas

8.5 Documents imprimes

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

9. Faire / Ne pas faire

Faire

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

Ne pas faire

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

10. Glossaire visuel

Les termes sumi-e utilises dans la documentation Talas :

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

11. Fichiers et organisation

11.1 Arborescence des assets

05_EXPERIENCE_UTILISATEUR/Identite_Visuelle/
├── logo/
│   ├── talas/
│   │   ├── talas_logo_principal.svg       (symbole + logotype horizontal)
│   │   ├── talas_logo_empile.svg          (symbole au-dessus du logotype)
│   │   ├── talas_symbole.svg              (symbole seul)
│   │   ├── talas_logotype.svg             (texte seul)
│   │   ├── talas_favicon.svg              (symbole simplifie)
│   │   └── talas_gravure.svg              (version simplifiee pour marquage)
│   ├── veza/
│   │   ├── veza_logotype.svg
│   │   └── veza_logo_complet.svg          (si symbole propre)
│   ├── exports/
│   │   ├── png/                           (512, 256, 128, 64, 32, 16)
│   │   ├── favicon/                       (ico + png + svg)
│   │   └── og/                            (1200x630 pour meta tags)
│   └── REGLES_UTILISATION_LOGO.md
├── palette/
│   ├── palette_talas.svg                  (planche de swatches)
│   ├── palette_talas.ase                  (Adobe Swatch Exchange, optionnel)
│   └── AUDIT_ACCESSIBILITE.md            (ratios WCAG documentes)
├── typographie/
│   ├── fonts/                             (fichiers woff2)
│   └── ECHELLE_TYPOGRAPHIQUE.md
├── icones/
│   ├── originaux/                         (scans des dessins a la main)
│   ├── svg/                               (icones vectorisees)
│   └── LISTE_ICONES.md
├── textures/
│   ├── washi.png                          (512x512, ~8 Ko)
│   └── washi_patine_1.png                 (variante pour patine elevee)
└── templates/
    ├── rs_avatar_1080x1080.svg
    ├── rs_banniere_instagram_1080x566.svg
    ├── rs_banniere_youtube_2560x1440.svg
    ├── rs_post_1080x1350.svg
    ├── rs_story_1080x1920.svg
    ├── rs_watermark.svg
    ├── og_image_1200x630.svg
    └── template_specs_produit_1080x1080.svg

11.2 Formats d'export

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

11.3 Nommage des fichiers

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

Exemples :

  • talas_symbole_noir.svg
  • talas_logo_principal_blanc.svg
  • veza_logotype_noir.svg
  • talas_favicon_32x32.png

Voir aussi