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.

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 :

Le logotype :

3.2 Logo Veza — composition

Le logo Veza suit les memes principes :

Le logotype :

Le symbole (optionnel) :

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

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 :


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 :

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

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 :

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 :

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 :

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

Ne pas faire


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 :


Voir aussi