Ouvrir
Le point devient un plan. Chaque image s’ouvre depuis un point, puis se pose.
1,5 s · courbe précise
Point, ligne, plan.
La direction artistique de KOSMO. Trois formes, un seul caractère, une couleur par application. Version 1.0, novembre 2026.
- Vous êtes ici
- La charte graphique de KOSMO, de ses deux pôles et de ses applications.
- L’essentiel
- Le point, la ligne et le plan suffisent à tout dessiner.
- Ensuite
- Commencer par le concept
Concept
Tout part du point.
En 1926, au Bauhaus, Vassily Kandinsky publie « Point et ligne sur plan ». Cent ans plus tard, KOSMO en fait sa grammaire : trois formes pour dessiner la marque, ses deux pôles et ses applications.
Le pointLes applicationsUne personne, une intention, une information. Chaque application a le sien, et sa couleur.
La ligneKOSMO SystemsUn parcours, une connexion. Ce qui relie les outils et fait circuler l’information.
Le planKOSMO StudioL’espace, la place que l’on fait. Les images, les sites, les surfaces où une marque existe.
Les quatre motifs de la marque en découlent : le point, la trajectoire, la connexion et l’espace.Jamais de planètes, de fusées ni d’étoiles.
Logo
Un anneau, puis un point.
Le premier O est vide : la place que l’on fait. Le dernier est plein : ce qui compte. Le logo dit la signature avant de l’écrire.
KSM
Mot-symboleHost Grotesk, graisse 500. Les deux O sont redessinés en cercles parfaits, à la hauteur des capitales.
CouleurClarté sur Nuit, ou Nuit sur Clarté. Le point plein prend la couleur de l’application qu’il signe.
Zone de protectionLa hauteur d’un O tout autour, en pointillé ci-dessus. Rien n’y entre.
Taille minimale72 px de large à l’écran. En dessous, on utilise le symbole.
KSM
KSMStudio
KSMSystems
KayrosbyKSM
KimabyKSM
À éviter
Couleurs
La maison est sans couleur.
Une base profonde et neutre. La couleur appartient aux applications : une chacune, jamais deux sur la même page.
Nuit
#0E1216Fond principalNuit 2
#131920BandesNuit 3
#1A2129SurfacesTrait
#232C35FiletsTrait 2
#34404BContoursBrume
#8B959ETexte discret, 6,1:1Brume 2
#B4BCC3Texte courant, 9,7:1Clarté
#ECEEEDTitres et logo, 16,1:1Kayros
#CB6B44La trajectoire · 5,1:1 sur NuitKima
#2FA08CL’équilibre · 5,8:1 sur NuitDomos
#CC9452L’ancrage · 7,1:1 sur NuitAmos
#B47DC1La connexion · 5,9:1 sur NuitProportions d’une page typeBeaucoup de nuit, un peu de clarté, une touche d’accent
- La maison est achromatique : Nuit, Brume et Clarté.
- Une seule couleur d’accent par page, celle de l’application dont on parle.
- Les accents colorent des points, des traits et des boutons. Jamais un long texte.
- Chaque accent dépasse 4,5:1 sur Nuit, le niveau AA pour le texte.
- Kayros garde la terre cuite de son identité Clairière.
- Aucun dégradé, aucun effet de verre, aucune lueur.
Typographie
Un seul caractère.
Host Grotesk, de 300 à 800, sous licence libre. Une grotesque nette et chaleureuse : régulière pour les titres, plus ferme pour l’interface.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 € % & @
- Léger300
- Courant400, titres
- Interface450
- Appui500, logo
Affiche152 px au plus · interligne 0,94
Plus de place
Titre 1112 px · 0,95
Donner forme aux idées
Titre 274 px · 1
De la complexité à l’action
Titre 342 px · 1,06
Comprendre, clarifier, proposer, agir
Titre 426 px · 1,22
Une seule fiche par client, aucun doublon.
Chapeau22 px · 1,46 · Brume 2
Des outils qui s’adaptent à votre manière de travailler.
Texte17 px · 1,6
Une marque ne se résume pas à son site. Elle existe à travers chaque expérience qu’elle propose.
Micro13 px · étiquettes et légendes
KOSMO Studio · Donner forme aux idées
« Pourquoi KOSMO ? »Guillemets français. Espace fine avant ? ! et ;
L’essentiel : agir.Espace insécable avant les deux-points.
1 700 testsChiffres groupés par trois, avec une espace fine.
Aujourd’huiApostrophe typographique, toujours.
Une idée. Une phrase.Pas de tiret long. On coupe en deux phrases.
Pictogrammes
Sept signes, trois formes.
Chaque pictogramme est dessiné avec le point, la ligne et le plan. Un trait de 1,5, des points pleins, aucun dégradé.
Les emblèmes de page
Chaque page s’ouvre sur sa propre planche, dessinée avec les mêmes formes.
Une planche a toujours la même anatomie : des repères de coupe, une trame de points révélée en onde, un intitulé et un numéro de figure, une règle graduée, une légende. Au centre, une figure qui se dessine à l’arrivée, puis vit doucement et suit le pointeur. Les applications ont la leur, dans leur couleur.
Grille et espace
De l’espace, mesuré.
L’espace n’est pas un vide décoratif. Il met en valeur l’essentiel.
- Colonnes
- Douze, une seule grille pour tout le site
- Marges
- De 20 à 72 px selon l’écran
- Gouttières
- De 16 à 24 px
- Sections
- De 104 à 196 px entre deux idées
Mouvement
Quatre gestes.
Le mouvement explique, il ne décore pas. Chaque animation du site répète l’un de ces quatre gestes.
Tracer
Une ligne relie ce qui doit l’être : un parcours, un flux, un diagramme.
1,4 s · courbe précise
Poser
Les points apparaissent un à un, comme des étapes franchies.
0,8 s · décalage de 140 ms
Ce qui compte
Dégager
Le champ de points s’écarte pour faire de la place. Passez le curseur dessus.
1,7 s · ressort amorti
Ouvrir, à l’échelle de la page
D’une page à l’autre, la suivante s’ouvre depuis le point du logo, qui prend aussitôt sa couleur. Le même geste, en plus grand.
0,82 s · courbe précise · transitions de navigation
Les séquences
Les quatre gestes, enchaînés en moments de marque.
- L’ouvertureÀ la première arrivée sur l’accueil, un point naît, devient le logo, puis rejoint l’en-tête. Deux secondes et demie, une seule fois par visite.
- Le filAu défilement, le point final du titre se détache et descend le fil jusqu’au centre de KOSMO. Le champ de points se couche derrière lui.
- L’écosystèmeLe point se pose, la marque se forme, le fil se sépare vers les deux pôles puis les quatre applications. La phrase s’allume au même rythme.
- Du site au systèmeCe que les clients voient se construit, puis ce qui fait tourner l’entreprise, puis une demande traverse les deux et revient au client.
- Les planchesChaque page intérieure s’ouvre sur une figure qui se dessine, puis vit doucement et suit le pointeur à plusieurs profondeurs.
- Le nomSur les pages d’application, le nom se lève lettre par lettre, le point se pose dans sa couleur, les téléphones s’ouvrent en éventail.
- Courbe précise
cubic-bezier(.65, 0, .15, 1)pour ouvrir et tracer- Courbe de sortie
cubic-bezier(.16, 1, .3, 1)pour poser et survoler- Durées
- De 0,3 s pour un survol à 1,5 s pour une image
- Mouvement réduit
- Tout apparaît sans animation si le système le demande
- Outils
- CSS pour les gestes simples, GSAP 3.12.5 et ScrollTrigger pour les séquences liées au défilement, SMIL pour les boucles des planches
Composants
Peu de pièces, toujours les mêmes.
Des boutons en pilule, des liens qui se soulignent au survol, des statuts qui disent la vérité.
Étiquettes
KOSMO Studio
Kima · l’équilibre
Domos · l’ancrage
Statuts
En conceptionEn développementAccès anticipé
Le point se remplit à mesure que le produit avance. Jamais plus vite que lui.
Choix
Rail de lecture
Sur les longues pages, les points se remplissent à mesure que l’on avance.
Point de clarté
- Vous êtes ici
- En haut de chaque page.
- L’essentiel
- Ce qu’il faut retenir.
- Ensuite
- Une seule action proposée.
Une vraie capture, en mode démonstrationEt c’est écrit dessus
Images
Rien d’inventé.
- De vraies captures de nos sites, de nos systèmes et de nos applications.
- Les données de démonstration sont signalées comme telles.
- Aucune image de banque, aucune image générée.
- Un nom de client n’apparaît qu’avec son accord.
- En photographie, des personnes et des situations réelles.
- Un chiffre n’est publié que s’il est vérifié.
- Un concept est toujours présenté comme un cabinet fictif.
Voix
Des phrases courtes.
Naturelles, affirmées, sans jargon. Montrer ce que la technologie rend possible, plutôt que parler de technologie.
Nous écrivonsNous évitons
Moins d’opérations répétitives. Plus de temps pour votre métier.
Révolutionnez votre productivité avec notre solution 360.
Kayros est en accès anticipé.
Kayros, l’application qui va changer votre vie.
Un agent prépare la réponse. Vous validez.
Notre IA magique s’occupe de tout.
Les mots que nous n’employons pasRévolutionner, disruptif, solution 360, IA magique, synergie. Et aucun superlatif.
Les pages
Le site, en entier.
Quinze pages, une même grammaire.
- AccueilL’histoire, l’écosystème, l’essentiel.
- KOSMO StudioSites, identité, photo, vidéo, visibilité.
- Cabinets dentairesQuatre concepts et les règles de l’Ordre.
- KOSMO SystemsCRM, automatisation, IA métier.
- ApplicationsQuatre univers, une même philosophie.
- KayrosTrouver sa voie.
- KimaPrendre soin de soi.
- DomosTrouver sa place.
- AmosCréer des liens.
- RéalisationsSites, systèmes et applications, internes et clients.
- Héritage des AlpesL’étude de cas : le site, le CRM, les agents.
- Aurélia DussyL’étude de cas : un portfolio bilingue.
- À proposL’idée, le manifeste, la méthode, le fondateur.
- ContactParler d’un projet.
- Charte graphiqueCette page.