Build · Experiment · Ship
Brand kit de Kouma Labs. Registre labs / studio: noir & blanc strict, typographie Geist, marque en dot-matrix pixel, cadres « blueprint ». Tout est ci-dessous — logos, textes, couleurs, typo et fichiers à télécharger.
K négatif — net
K pixel — dot-matrix
Icône app — tuile nette
Icône app — tuile pixel
Monogramme « K » évidé dans un carré arrondi (vrai négatif). Version pixel(carrés arrondis, densité 32) pour la home & les icônes ; le K net est réservé au favicon (lisible à 16 px).
Loading
Loader — pulse diagonal (↖ → ↘)
Le K pixel pulse en diagonale : une onde de points traverse le monogramme, en boucle. Composant <Loader /> (props size · label · fullScreen).
Respecte prefers-reduced-motion.
Wordmark — K pixel + « Kouma Labs »
Identité dark-first, déclinée clair / sombre. Le site n’a pas de toggle : le thème suit prefers-color-scheme. Deux familles d’assets — les SVG adaptatifs embarquent la media query et suivent le thème du visiteur (jamais sur fond forcé, ni avec un dark mode par classe) ; les SVG figés ont une couleur fixe : on choisit le fichier selon le fond.
| 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 | — |
Sur un site avec dark mode par classe (Tailwind), on permute les versions figées :
<!-- wordmark : version sombre en clair, version claire en sombre -->
<img src="/logo-wordmark.svg" alt="Kouma Labs" class="dark:hidden" />
<img src="/logo-wordmark-light.svg" alt="Kouma Labs" class="hidden dark:block" />theme-color figé #0a0a0a · le site référence les icônes sombres.
Pour signaler qu’un produit appartient à Kouma Labs, on pose l’icône Kouma à gauche, un slash fin atténué, puis le nom du produit à droite — [K] ╱ Produit. Monochrome strict, dans le header et le footer du site produit.
L’icône reprend la tuile pixel de la marque (l’app-icon Kouma), en version adaptative : tuile sombre sur fond sombre, tuile claire sur fond clair. Le nom du produit hérite de la couleur de texte du site produit et suit donc son thème clair / sombre.
<!-- header/footer du site produit : icône Kouma ╱ produit -->
<a href="https://koumalabs.org" target="_blank" aria-label="Kouma Labs">
<!-- tuile claire en clair, tuile sombre en sombre (prefers-color-scheme) -->
<img src="/logo-mark-square-pixel-light.svg" alt="" class="h-12 w-12 rounded-[22%] dark:hidden" />
<img src="/logo-mark-square-pixel.svg" alt="" class="hidden h-12 w-12 rounded-[22%] dark:inline-block" />
</a>
<span aria-hidden="true" style="opacity:.3">/</span>
<a href="/">Produit</a>Assets : tuile sombre ↓ · tuile claire ↓
Titre — dot-matrix pixel (home)
Kouma Labs
Toujours « Kouma Labs » (deux mots, capitales K/L).
Build · Experiment · Ship
Ton : minimal, technique, orienté « ship ».
Canvas
#000000
fond home / OG
Theme
#0a0a0a
theme-color · tuiles
Encre
#171717
texte (light)
Neutre clair
#ededed
marque (dark)
Blanc
#fafafa
titres OG
Gris
#6b7280
labels 2ⁿᵈ
Gris foncé
#52525b
repères mono
Monochrome strict — pas de couleur d’accent. Dark-first (theme #0a0a0a).
Kouma Labs
Aa Bb Cc — 0 1 2 3 4 5 6 7 8 9
Kouma Labs
Build · Experiment · Ship
const ship = () => "🚀";
OpenGraph · 1200×630
Icônes app / apple / OG = pixel · favicon = K net (lisibilité en petit). Chaque icône existe en tuile sombre et claire — le site référence les versions sombres.
Cadre blueprint · repères + · halo
Sources SVG + icônes du site. Les exports PNG (512 / 1024 / 2048) sont disponibles via les boutons sous chaque visuel ci-dessus, servis depuis /png/. Version machine pour agents IA : brands.md.
