KypoLab.
L'identité visuelle qui gouverne ce site, dans le détail : le principe directeur, le logo, la palette, la typographie, la grille, les composants, le mouvement et le ton. Tout ce que vous voyez ici est le système réel, pas une maquette de présentation.
La direction se résume en une image : un banc d'essai. Une feuille de papier technique, une grille de mesure, une encre noire, et une seule couleur de signal pour ce qui compte. Le site ne cherche pas à décorer un contenu, il le relève, comme un instrument affiche une lecture.
Contre-pied assumé : la quasi-totalité des portfolios en IA adoptent un fond noir avec un accent néon. Le papier clair et le cobalt fonctionnel prennent le parti inverse, plus proche du carnet de laboratoire que de l'écran de science-fiction.
La grille est visible et structure la page. Rien n'est posé au hasard, tout s'aligne.
Les graphiques affichent des données réelles issues des projets. Aucune courbe décorative.
Une seule couleur d'accent, employée avec parcimonie. Le reste est du noir sur du papier.
Le mouvement sert la lecture : révéler, tracer, réagir au pointeur. Jamais gratuit.
Le K n'est pas une lettre pleine, c'est un tracé : une polyligne aux extrémités marquées d'un point, comme un relevé de mesure. C'est le même vocabulaire que les courbes du site, le logo dit donc littéralement ce que fait la marque. Décliné en cercle et en carré, avec un verrouillage horizontal où le point final cobalt sert de signature, celui que l'on retrouve après chaque titre de page.
monogramme · cercle
monogramme · carré
Déclinaisons officielles. Le monogramme en cercle sert de favicon.
Zone de protection : une marge libre égale à la moitié de la hauteur du monogramme, sur les quatre côtés. Taille minimale d'affichage : 24 px.
Trois familles seulement. Un papier tiède pour le fond, une encre presque noire pour le texte, et le cobalt comme unique couleur de signal : il ne décore jamais, il désigne ce qui est actif, mesuré ou cliquable. Les ratios ci-dessous sont mesurés sur le fond papier.
Le fond de toutes les pages, support de la grille de mesure.
Titres et texte principal. Le noir est adouci pour éviter la vibration.
Le signal. Liens, courbes, états actifs, ponctuation de marque.
Texte secondaire, chapôs et paragraphes de corps.
Labels en mono, métadonnées, unités et annotations.
Surfaces posées sur le fond : cartes, panneaux, champs.
Unique exception au cobalt : la pastille de disponibilité, un signal de vie.
Réservée aux erreurs de formulaire. Jamais décorative.
Palette complète. Toute nouvelle couleur doit se justifier par un rôle, pas par un goût.
Chaque famille a une fonction précise et ne déborde jamais sur celle des autres : un grotesk technique pour affirmer, un monospace pour tout ce qui relève de la donnée, une linéale humaniste pour le confort de lecture. Les trois sont auto-hébergées, aucune requête vers un service tiers.
Échelle typographique. Toutes les tailles sont fluides (clamp), jamais fixées en pixels durs.
Le fond porte une grille de mesure de 40 px, discrète mais toujours présente : c'est elle qui donne au site son air d'instrument. Les espacements suivent une échelle de 4 px, et la mise en page tient dans un shell de 1200 px, avec une mesure de texte limitée à 720 px pour le confort de lecture.
Échelle d'espacement, de 4 px à 96 px. Les sections respirent sur au moins 100 px de vertical.
Ces composants ne sont pas des captures : ce sont les vrais éléments du site, rendus par la même feuille de style. Survolez-les, ils réagissent comme partout ailleurs.
Rayons : 6 px pour les petites surfaces, 10 px pour les cartes, 14 px pour les grands panneaux, pilule pour les boutons.
Une seule courbe d'accélération pour tout le site, et une durée de référence de 300 ms. Le mouvement démarre franchement puis se pose en douceur, ce qui donne cette sensation d'objet physique plutôt que d'animation.
cubic-bezier(.22, 1, .36, 1)
- Révéler : les blocs montent de 24 px en fondu à leur entrée à l'écran, en cascade.
- Tracer : les courbes se dessinent au fil du défilement, jamais en boucle décorative.
- Réagir : le pointeur allume la grille de mesure autour de lui, le fond devient vivant.
- Respecter : tout est désactivé si le visiteur a demandé moins d'animations à son système.
Démonstration de la courbe, en continu.
L'identité ne s'arrête pas au visuel. Le texte suit ses propres règles, y compris dans les réponses de l'assistant conversationnel.
Tout le contenu visible est en français, y compris les libellés d'interface. Les termes techniques consacrés restent en anglais.
Aucun tiret cadratin ni demi-cadratin dans les textes du site. On emploie la virgule, le deux-points, les parenthèses ou le tiret simple.
Les chiffres affichés sont vérifiables et proviennent des projets réels. Pas de métrique décorative, pas d'arrondi flatteur.
Direct et sobre, à la première personne. On explique un choix technique plutôt que de l'annoncer.
Les déclinaisons produites à partir du système : l'icône de l'onglet, l'image de partage sur les réseaux, et l'icône d'application sur mobile.
Tous les visuels sont générés depuis les mêmes sources vectorielles, en cobalt.