Aller au contenu
Rejoindre Komi

Le langage visuel de Komi.

Les règles visuelles et interactives pour concevoir des pages cohérentes, accessibles et immédiatement reconnaissables.

Lire les règles
Komi
Clair dans l’usageChaleureux dans la forme.

Les fondations

Komi doit inspirer confiance sans devenir froid, et rester vivant sans devenir bruyant.

Comprendre avant d’impressionner

La hiérarchie doit rendre le prochain geste évident. L’expression visuelle soutient le contenu, jamais l’inverse.

Une profondeur qui explique

Une ombre ou un matériau signale un niveau fonctionnel. Sans hiérarchie réelle, le contenu reste ouvert et plat.

Accessible dès la première version

Contraste, clavier, focus, texte agrandi et mouvement réduit font partie du composant, pas de la finition.

Une personnalité tenue

Corail, Unbounded et mouvement fluide suffisent à signer Komi. Aucun effet décoratif ne doit lutter avec eux.

Règle maîtresse

Si un élément ne clarifie ni le contenu, ni l’action, ni la hiérarchie, il ne doit pas être ajouté.

Couleurs sémantiques

On choisit une couleur pour son rôle. Une valeur hexadécimale ne doit jamais être recopiée dans un nouveau composant.

Corail

--km-coral

Accent expressif, illustration et grands détails

#ff765d

Corail profond

--km-coral-deep

Actions et liens sur fond clair

#c43d38

Orange

--km-orange

Chaleur secondaire et narration

#ff9a57

Rose

--km-pink

Accent secondaire ponctuel

#ff68a5

Rose clair

--km-rose

Surface douce et sélection

#ffd7df

Crème

--km-cream

Fond éditorial principal

#fff8f2

Sable

--km-sand

Fond de média et zone secondaire

#f2e8df

Blanc chaud

--km-white

Surface élevée et fond calme

#fffdfb

Encre

--km-ink

Texte principal et contrôle sombre

#211e27

Nuit

--km-dark

Surface de contraste et footer

#17131c

Texte secondaire

--km-muted

Texte complémentaire sur fond clair

#6e6670
Texte blanc sur corail profondContraste 5,08:1. Autorisé pour les boutons et petits libellés.
Corail clair sur blanc chaudContraste 2,59:1. Réservé aux formes larges et à la décoration.

Une voix, trois usages

La typographie signale le contexte avant même que le texte soit lu.

Unbounded

Titres identitaires, H1, H2 et moments de marque.

Faire vivre le campus.

Poids 650 à 720. Interlettrage de -0,02 à -0,038 em. Deux lignes maximum dans un hero.

Plus Jakarta Sans

Pages publiques, navigation, formulaires et textes marketing.

Une interface directe, chaleureuse et lisible.

Corps de 16 à 19 px. Interligne de 1,55 à 1,7. Largeur de lecture maximale de 70 caractères.

Albert Sans

Application membre, cockpit et surfaces produit existantes.

Vos billets, vos pages et votre campus au même endroit.

Privilégier la densité utile. La hiérarchie vient du poids avant la taille.

Titres : 8 mots recommandés, 12 maximum.

Paragraphes : 65 à 75 caractères par ligne.

Petit texte : 12 px minimum, 13 px pour une information utile.

Rythme et mise en page

La grille donne de la stabilité. Les décalages créent la personnalité uniquement quand ils servent la lecture.

24 pxConteneur maximum 1240 px
Section desktop
88 à 148 px
Section mobile
68 à 82 px
Gouttière desktop
24 px minimum
Gouttière mobile
16 px minimum

14 px

Champs, contrôles et petites surfaces.

24 px

Cartes utiles et panneaux principaux.

36 px

Médias et grands moments éditoriaux.

Pilule

Badges, filtres et actions compactes uniquement.

  • Utiliser la grille pour aligner les contenus qui se répondent.
  • Laisser plus d’espace avant un titre qu’après lui.
  • Éviter trois cartes identiques quand une liste ouverte suffit.
  • Ne jamais créer une valeur d’espacement isolée sans raison mesurable.

Composants de base

Une même apparence implique le même comportement. Les exemples ci-dessous sont les contrats à réutiliser.

Boutons

Une action principale par zone. Le libellé commence par un verbe et tient sur une ligne.

Vérifier la page Lire la gouvernance
className="km-button km-button-primary"

Champ de formulaire

Le label reste visible. L’aide précède l’erreur et le placeholder ne remplace jamais le label.

Surface informative

Une carte existe seulement si son contour permet de comprendre un regroupement ou un niveau.

Prêt à publier

Guide de rentrée

Une information, un statut et une prochaine action. Rien de décoratif.

Le mouvement confirme

Une animation doit expliquer une relation, un changement d’état ou la conséquence d’un geste.

Entrée

Partir de la position visible. 180 à 400 ms, sans délai artificiel.

Interaction

Répondre dès l’appui. Utiliser un ressort sans rebond pour les contrôles usuels.

Sortie

Reprendre le chemin d’entrée et rester interruptible à tout moment.

Réduction

Remplacer translation et parallaxe par un changement instantané ou un fondu court.

L’accessibilité est un état normal

Le design Komi doit fonctionner sans souris, sans animation et avec une lecture agrandie.

4,5:1

Contraste minimum du texte courant et des libellés de contrôle.

3:1

Contraste minimum du grand texte et des limites d’un composant.

44 px

Taille tactile minimale, même si l’icône visible est plus petite.

200 %

Zoom supporté sans perte d’information ni chevauchement.

  • Focus visible sur chaque élément interactif.
  • Ordre du DOM identique à l’ordre de lecture.
  • États transmis par du texte, pas par la couleur seule.
  • Messages d’erreur placés près du champ concerné.

Essayez avec la touche Tab

Lien avec focus Komi

Un système, plusieurs contextes

Les surfaces partagent la marque, mais pas la même densité. Chaque règle reste dans son périmètre CSS.

ScopeSurfaceSourceRègle
.km-siteSite publicmarketing.cssPalette chaude, Plus Jakarta Sans, expression éditoriale.
.kr-siteRessourcesresources.cssLecture longue, recherche et contenu éditorial.
.admin-shellCockpitadmin.cssDécisions, listes et actions denses avec la marque en détail.
:rootApplication webglobals.cssTokens fonctionnels, thème clair ou sombre et composants produit.
Réutiliser

Chercher un token, un composant ou un motif existant avant d’ajouter du CSS.

Garder local

Une valeur utilisée une seule fois reste dans le composant si elle décrit sa géométrie propre.

Promouvoir

Créer un token après trois usages cohérents ou dès qu’un contrat traverse plusieurs surfaces.

Retirer

Supprimer le doublon dans la même livraison. Deux sources de vérité ne sont jamais acceptées.

Avant chaque livraison

Cette checklist est le seuil minimum. Une page non vérifiée n’est pas une page terminée.

  1. Un seul H1, une hiérarchie de titres sans saut de niveau.
  2. Le corail profond porte les petites actions, jamais le corail clair.
  3. Chaque contrôle interactif mesure au moins 44 px sur son axe tactile.
  4. Tous les états ont été prévus : repos, survol, focus, actif, désactivé et erreur.
  5. La lecture reste confortable à 200 % de zoom et sur 320 px de large.
  6. Les images ont une taille réservée, un texte alternatif utile ou un alt vide si elles décorent.
  7. Le mouvement ne modifie que transform et opacity, sauf effet matériel justifié.
  8. prefers-reduced-motion conserve le sens sans translation ni parallaxe.
  9. Aucune nouvelle couleur, ombre ou forme ne duplique un token existant.
  10. La page a été vérifiée au clavier, en mobile et dans son contexte réel.

La cohérence vient des décisions répétées.

Quand une règle ne couvre pas un besoin réel, documentez d’abord l’exception. Ensuite seulement, faites évoluer le système.

Revenir au début