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>
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 :
- L'encre et le papier — tout est soit de l'encre, soit du papier
- Le cyan unique — la seule couleur d'accent, rare et precieuse
- La profondeur par diffusion — des couches d'encre diluee, pas des ombres portees
- Le vide (ma) — l'espace negatif est un choix, pas du remplissage
- 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. Logo
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 | |
| 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
- Pas de blanc pur (#FFFFFF). Le plus clair est
#F2EDE6(papier washi). - Pas de noir pur (#000000). Le plus sombre est
#0D0D0F(noir d'encre). - Le cyan est la SEULE couleur d'accent. Pas de deuxieme couleur. Jamais.
- Les couleurs fonctionnelles sont toujours diluees. Pas d'aplat de couleur.
- Les gris sont toujours chauds. Pas de gris bleu, pas de gris pur neutre.
- 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 :
- Space Grotesk Bold (variable font ou static bold, ~25 Ko woff2)
- 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
- Dessiner a la main (papier + feutre pinceau, ou tablette)
- Scanner ou photographier en haute resolution
- Vectoriser manuellement dans Inkscape (pas de trace automatique)
- Preserver l'irregularite du trait
- Exporter en SVG avec
currentColor - 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-repeatavecmix-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 |
| 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.svgtalas_logo_principal_blanc.svgveza_logotype_noir.svgtalas_favicon_32x32.png
Voir aussi
- 05_EXPERIENCE_UTILISATEUR/DIRECTION_ARTISTIQUE_TALAS — Philosophie visuelle complete
- 05_EXPERIENCE_UTILISATEUR/IDENTITE_VISUELLE — Brief d'identite visuelle
- 05_EXPERIENCE_UTILISATEUR/SUMI_V3_SPECIFICATION — Spec technique du design system
- 05_EXPERIENCE_UTILISATEUR/GUIDE_CREATION_LOGO — Guide pratique de creation du logo
- 01_PILOTAGE/ROADMAP_IDENTITE_VISUELLE — Roadmap pas-a-pas (V1-V8)
- 07_CONTENUS_MARKETING/Storytelling/MANIFESTE_TALAS — Manifeste de marque
- 00_META/TALAS_IDENTITE_PROJET — Document d'identite du projet