Design System
Brand guide Koloc. Un système pour garder la cohérence sur tous les projets.
Ce guide documente l'identité visuelle, la typographie, les composants et les règles d'utilisation de la marque Koloc. Conçu pour l'équipe et pour être référencé par Claude dans tout nouveau projet.
01 — Identité
Logo — wordmark et K-mark.
Le logotype Koloc existe en deux versions : la version complète pour toutes les communications, et le K-mark (favicon) pour les usages restreints comme avatars, favicons ou icônes d'app.
Règles d'utilisation
Toujours laisser un espace libre équivalent à la hauteur du "K" autour du logo.
Wordmark : 60px de large minimum. K-mark : 24px minimum.
Étirer, déformer, faire pivoter, changer la couleur hors palette, ou ajouter des effets.
02 — Palette
Couleurs — une palette monochrome restreinte.
La force visuelle de Koloc vient de la retenue chromatique. Quasi-noir et off-white pour la base, avec des niveaux de gris calibrés pour la hiérarchie. Cliquer pour copier.
Titre à double teinte
Un élément signature : les titres combinent texte foncé (#0a0a0a) et texte à 60% d'opacité pour créer un contraste éditorial.
Des résultats éprouvés pour chaque projet, portés par une vision créative affirmée et humaine.
03 — Typographie
Typographie. Deux familles complémentaires.
Berthold Akzidenz-Grotesk BE Ex Bold pour les titres en CAPS uniquement — voix affirmée, signature éditoriale. Inter pour tout le reste (body, captions, UI). Poids Inter dominant : 500 (medium).
04 — Structure
Espacement & radius.
Border-radius 14px pour la majorité des cartes et surfaces. Les espacements suivent un rythme fluide via clamp().
Border-radius
10px : inputs · 14px : cartes · 18px : grands blocs · 50px : pills/boutons
Container widths
Cartes.
Cartes 14px de radius, fond blanc sur fond gris. Ombre très subtile au hover + translateY(-3px).
Formulaires.
Inputs fond gris clair, radius 10px, border-none. Labels en micro-caps au-dessus.
Cartes vidéo.
Format 16:9, radius 14px. Hover : grayscale + blur subtil + grain filmique + bouton play centré.
06 — Motion
Animations — survolez les carrés pour voir.
Trois courbes d'accélération personnalisées. La majorité des transitions durent entre 300ms et 800ms.
--ease
cubic-bezier(0.44,0,0.56,1)
--ease-out
cubic-bezier(.16,1,.3,1)
--spring
cubic-bezier(.34,1.56,.64,1)
07 — Thèmes
Thèmes — deux modes, un même système.
Koloc supporte un mode light (défaut, éditorial) et un mode dark (cinématographique, premium). Le toggle est accessible en haut de chaque page et mémorise le choix en localStorage. Le mode dark introduit des effets glass (verre dépoli) sur toutes les surfaces cartes.
Light — défaut
Fond #f5f5f5, cartes blanches solides. Ton éditorial, magazine, fashion.
Dark — glass
Fond #0a0a0a, cartes semi-transparentes avec backdrop-filter. Ton cinéma, nocturne, moderne.
Glass effect — CSS
Les cartes du mode dark utilisent la technique "frosted glass" pour créer de la profondeur sans alourdir visuellement.
/* Glass card — dark mode */
[data-theme="dark"] .card{
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(20px) saturate(120%);
-webkit-backdrop-filter: blur(20px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 14px;
}
Toggle — comportement
- • Emplacement : sidebar top à droite du logo. Icône sun/moon avec animation spring.
- • Persistance :
localStorage.setItem('koloc-theme', 'dark') - • Transition : 0.5s ease-out sur background, color, border — smooth sans flash.
- • Défaut : light (plus accessible pour documentation, plus éditorial pour marque).
07 — Voix
Ton & voix. Humain, cinématographique, minimal.
Toute la communication Koloc est en français. Ton premium mais jamais prétentieux. Phrases courtes. Des images justes plutôt que des promesses vides.
À faire
« Créer des images percutantes, nées d'une créativité assumée et d'une collaboration réelle. »
À éviter
« Solutions créatives de pointe pour maximiser votre ROI et votre engagement. »
À faire
« On écoute. On pose les bonnes questions. »
À éviter
« Nous mettons à votre disposition notre équipe d'experts... »
08 — Code
Variables CSS — copie-colle pour commencer un nouveau projet.
Le système complet en tokens CSS. Ajoute ce bloc dans :root pour démarrer n'importe quel projet Koloc.
:root{
/* Font */
--font: 'Inter', 'Inter Placeholder', system-ui, sans-serif;
--mono: 'JetBrains Mono', ui-monospace, monospace;
/* Easing */
--ease: cubic-bezier(0.44, 0, 0.56, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--spring: cubic-bezier(0.34, 1.56, 0.64, 1);
/* Colors */
--bg: #f5f5f5;
--bg-card: #ffffff;
--bg-dark: #0a0a0a;
--bg-dark-alt: #121212;
--fg: #0a0a0a;
--fg-60: rgba(10, 10, 10, 0.6);
--fg-40: rgba(10, 10, 10, 0.4);
--fg-muted: #999;
--border: rgba(10, 10, 10, 0.08);
--border-strong: rgba(10, 10, 10, 0.12);
/* Radius */
--radius: 14px;
--radius-lg: 18px;
--radius-sm: 10px;
--radius-pill: 50px;
/* Layout */
--container: 1200px;
--max: 2200px;
--pad: 30px;
}
body{
font-family: var(--font);
font-size: 15px;
font-weight: 500;
line-height: 1.4;
letter-spacing: -0.005em;
color: var(--fg);
background: var(--bg);
-webkit-font-smoothing: antialiased;
}
/* Split-color title utility */
.dim{ color: var(--fg-60); }
09 — Référence IA
Pour Claude. Résumé technique à coller dans un prompt.
Quand tu commences un nouveau projet avec Koloc, colle ce bloc dans ton prompt pour que l'assistant applique directement le bon style.
KOLOC BRAND SYSTEM — référence à appliquer : • Studio : Koloc, production audiovisuelle, Montréal, en français. • Ton : humain, cinématographique, minimal, premium sans prétention. • Font : Inter (400, 500 dominant, 600, 700). Letter-spacing -.04em sur titres, -.005em sur body. Line-height 1.4 body, 1.1 titres. • Palette monochrome : bg #f5f5f5 (défaut) card #ffffff fg #0a0a0a (texte principal) fg-60 rgba(10,10,10,.6) (texte secondaire) fg-40 rgba(10,10,10,.4) (texte tertiaire) dark #0a0a0a (sections dark, footer) border rgba(10,10,10,.08) • Titres à double teinte : premiere partie #0a0a0a, deuxième partie fg-60 via <span class="dim">. • Radius : 14px cartes, 18px gros blocs, 10px inputs, 50px pills. • Layout : container 1200px, wide max 2200px, padding 30px. • Composants clés : - Nav fixed avec mix-blend-mode: difference - Cartes fond #fff, radius 14px, hover translateY(-3px) - Boutons : pill solide #0a0a0a OU lien texte souligné - Inputs : fond bg, radius 10px, border-none - Cartes vidéo 16:9 avec hover grayscale+blur+grain+play • Easing : ease cubic-bezier(.44,0,.56,1) hover/state ease-out cubic-bezier(.16,1,.3,1) reveals spring cubic-bezier(.34,1.56,.64,1) cartes • Animations : fade-up au scroll (IntersectionObserver), transforms scale/translate subtils au hover (300-500ms). • Voice : French. Phrases courtes. Pas de jargon corpo. Exemple OK : « On écoute. On pose les bonnes questions. »
Pour plus de détails, référence-toi à ce guide complet ou au site de production koloc.studio.