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 :
| 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 :
Le logotype :
Le logo Veza suit les memes principes :
Le logotype :
Le symbole (optionnel) :
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 :
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 :
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 :
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 :
washi.png (512x512, ~8 Ko)background-repeat avec mix-blend-mode: soft-lightprefers-reduced-motion: reduceLes 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 :
| 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 :
| 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.svgtalas_logo_principal_blanc.svgveza_logotype_noir.svgtalas_favicon_32x32.png