KypoLab.
Cette page présente le système visuel réellement utilisé sur le site : logo, couleurs, typographies, grille, composants, mouvement et règles éditoriales.
La direction visuelle reprend les codes d'un banc d'essai : papier technique, grille de mesure, encre noire et cobalt pour les informations actives. Les courbes et les repères servent à lire les contenus du site.
Le fond clair et le cobalt distinguent KypoLab des interfaces sombres souvent associées à l'IA. L'ensemble se rapproche d'un carnet de laboratoire.
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 est dessiné comme un tracé : une polyligne dont les extrémités sont marquées par un point. Cette forme reprend les courbes présentes sur le site. Le monogramme existe en cercle, en carré et dans une version horizontale. Le point cobalt de cette dernière rappelle la ponctuation placée après les titres 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.
La palette repose sur trois familles : un papier tiède pour le fond, une encre presque noire pour le texte et le cobalt pour les éléments actifs, mesurés ou cliquables. Les ratios ci-dessous sont calculé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.
Le site utilise trois familles typographiques : un grotesk technique pour les titres, un monospace pour les données et une linéale humaniste pour les textes longs. Les trois sont auto-hébergées, sans 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.
Les animations utilisent la même courbe d'accélération et une durée de référence de 300 ms. Elles démarrent rapidement, puis ralentissent en fin de mouvement.
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.