# Kouma Labs — Brand Kit (version machine) > Version machine-readable du brand kit , destinée aux > agents IA et aux intégrations automatisées. Décrit l'identité, les assets, la > convention de nommage et les règles d'usage de la marque **Kouma Labs**. > Source de vérité humaine : la page interactive `/brands`. ## Identité - **Nom** : « Kouma Labs » — toujours deux mots, capitales K et L. - **Tagline** : `BUILD · EXPERIMENT · SHIP` (Geist Mono, uppercase, tracking large). - **Registre** : labs / studio façon Vercel Labs — noir & blanc strict, ultra-minimal, marque en dot-matrix pixel, cadres « blueprint », **dark-first**. - **Typographie** : Geist Sans (titres & corps), Geist Mono (labels techniques, code). - **Interdits** : aucune couleur d'accent ; ne pas utiliser le K pixel en favicon (illisible sous 48 px — utiliser le K net) ; ne pas déformer ni recolorer les logos. ## Palette (monochrome strict) | Nom | Hex | Usage | |---|---|---| | Canvas | `#000000` | fond home / OG | | Theme | `#0a0a0a` | `theme-color`, tuiles d'icônes, fond sombre | | Encre | `#171717` | texte & marque en thème clair | | Neutre clair | `#ededed` | texte & marque en thème sombre | | Blanc | `#fafafa` / `#ffffff` | fond clair, titres OG | | Gris | `#6b7280` | labels secondaires | | Gris foncé | `#52525b` | repères mono | ## Convention de nommage des fichiers - Le suffixe décrit la **tonalité de l'asset lui-même** : `-light` = asset clair, `-dark` = asset sombre, sans suffixe = **adaptatif** (ou historique). - **Adaptatif** = le SVG embarque `@media (prefers-color-scheme: dark)` : il suit le thème de l'OS du lecteur, **pas** le fond sur lequel il est posé. Ne jamais l'utiliser sur un fond forcé ni avec un dark mode par classe — prendre une variante figée. - Pour les marques **sans fond**, le fond de destination est l'**inverse** du suffixe (asset clair → fond sombre). Pour les **tuiles** (fond intégré), il est identique. ## Assets SVG Toutes les URLs sont relatives à `https://koumalabs.org`. | URL | Description | Usage | |---|---|---| | `/logo-mark.svg` | K négatif (net), adaptatif | fond neutre suivant le thème | | `/logo-mark-dark.svg` | K net figé `#171717` | fond clair forcé | | `/logo-mark-light.svg` | K net figé `#ededed` | fond sombre forcé | | `/logo-mark-pixel.svg` | K pixel dot-matrix, adaptatif | logo principal (home) | | `/logo-mark-pixel-dark.svg` | K pixel figé `#171717` | fond clair forcé | | `/logo-mark-pixel-light.svg` | K pixel figé `#ededed` | fond sombre forcé | | `/logo-mark-pixel-pulse.svg` | K pixel animé (pulse diagonal) | loader | | `/logo-mark-square.svg` | K net sur tuile `#0a0a0a` arrondie (coins transparents) | icône app sombre (source favicon) | | `/logo-mark-square-light.svg` | K net sur tuile `#fafafa` arrondie | icône app claire | | `/logo-mark-square-pixel.svg` | K pixel sur tuile `#0a0a0a` arrondie | icône app sombre, co-branding | | `/logo-mark-square-pixel-light.svg` | K pixel sur tuile `#fafafa` arrondie | icône app claire, co-branding | | `/logo-wordmark.svg` | wordmark pixels `#171717` figés | fond clair | | `/logo-wordmark-light.svg` | wordmark pixels `#ededed` figés | fond sombre | | `/wordmark-kouma-labs.svg` | texte « Kouma Labs » dot-matrix, adaptatif | titre home | | `/wordmark-kouma-labs-dark.svg` | texte pixel figé `#171717` | fond clair forcé | | `/wordmark-kouma-labs-light.svg` | texte pixel figé `#ededed` | fond sombre forcé | ## Icônes raster | URL | Description | |---|---| | `/favicon.ico` | favicon 16→128, tuile sombre (K net) — **utilisée par le site** | | `/favicon-light.ico` | variante tuile claire (téléchargement uniquement) | | `/icon-192.png` · `/icon-512.png` | icônes PWA, tuile sombre (K pixel) | | `/icon-192-light.png` · `/icon-512-light.png` | variantes tuile claire | | `/apple-touch-icon.png` | 180×180 opaque, tuile sombre | | `/apple-touch-icon-light.png` | 180×180 opaque, tuile claire | Le site référence exclusivement les versions **sombres** (`theme-color: #0a0a0a`). Les tuiles SVG et leurs exports PNG ont des **coins arrondis** (rayon ≈ 22,5 %, transparents en dehors) ; les icônes PNG/ICO ci-dessus restent **plein bord** (requis par `purpose: maskable` et par Apple). ## Exports PNG Motif : `/png/-.png`. Marques et tuiles en 512 et 1024 px ; wordmarks en largeur 1024 et 2048 px. Bases disponibles : `logo-mark-dark`, `logo-mark-light`, `logo-mark-pixel-dark`, `logo-mark-pixel-light`, `logo-mark-square`, `logo-mark-square-light`, `logo-mark-square-pixel`, `logo-mark-square-pixel-light`, `logo-wordmark`, `logo-wordmark-light`, `wordmark-kouma-labs-dark`, `wordmark-kouma-labs-light`. Exemple : `/png/logo-mark-pixel-dark-1024.png`. ## Choisir le bon fichier | Usage | Sur fond clair | Sur fond sombre | Adaptatif | |---|---|---|---| | K négatif (net) | `logo-mark-dark.svg` | `logo-mark-light.svg` | `logo-mark.svg` | | K pixel | `logo-mark-pixel-dark.svg` | `logo-mark-pixel-light.svg` | `logo-mark-pixel.svg` | | Wordmark | `logo-wordmark.svg` | `logo-wordmark-light.svg` | — | | Texte pixel « Kouma Labs » | `wordmark-kouma-labs-dark.svg` | `wordmark-kouma-labs-light.svg` | `wordmark-kouma-labs.svg` | | Tuile app (nette) | `logo-mark-square-light.svg` | `logo-mark-square.svg` | — | | Tuile app (pixel) | `logo-mark-square-pixel-light.svg` | `logo-mark-square-pixel.svg` | — | | Icônes PNG / ICO | `icon-512-light.png` · `favicon-light.ico` | `icon-512.png` · `favicon.ico` | — | Avec un dark mode par classe (Tailwind), permuter les versions figées : ```html Kouma Labs ``` ## Co-branding produit (lockup) Pour signaler qu'un produit appartient à Kouma Labs : icône Kouma (tuile pixel) à gauche, slash fin atténué, nom du produit à droite — `[K] ╱ Produit`. Monochrome strict, dans le header et le footer du site produit. ```html Produit ``` ## Liens - Brand kit interactif : - Site : (FR) · (EN)