Système de design

Charte Kairos.

Tout ce qui se règle sur le site, au même endroit. Les valeurs ci-dessous ne sont pas recopiées : elles sont lues à l’exécution dans assets/css/style.css. Cette page ne peut donc pas se désynchroniser du site.

Page de travail : noindex, absente du menu et du sitemap.xml. Vous pouvez la supprimer avant la mise en ligne — aucune autre page n’y renvoie.

Couleurs

Treize jetons, déclinés en deux thèmes. Le site est monochrome : une seule teinte, l’ambre, sert d’accent. Changer --accent suffit à modifier l’identité colorée de l’ensemble.

Variable	Sombre	Clair	Valeur sombre	Valeur claire	Rôle

Contrastes du texte sur le fond

Paire	Sombre	Clair	Seuil WCAG AA

Typographie

Deux familles auto-hébergées. Inter pour tout le discours, JetBrains Mono pour les micro-libellés en capitales (surtitres, étiquettes, méta, pied de page). Les tailles d’affichage sont fluides : elles interpolent entre une borne basse et une borne haute selon la largeur de la fenêtre.

Familles

Échelle

Espacement & mise en page

Quatre variables commandent toute la géométrie de la page. Les deux valeurs fluides sont affichées telles que calculées pour la largeur actuelle de votre fenêtre — redimensionnez pour les voir bouger.

Variable	Déclaration	Calculé ici	Aperçu	Rôle

Courbes & durées

Trois courbes seulement. Cliquez une carte pour rejouer l’animation. Toutes sont neutralisées si le visiteur a activé « réduire les animations » dans son système.

Durées en service

Où	Durée	Courbe	Remarque

Effets

Aucun n’utilise d’image : tout est composé en CSS. Les démonstrations ci-dessous sont les vrais éléments du site, pas des reproductions.

Composants

Les briques réutilisables, dans leur état par défaut.

Boutons & liens

Lien fléché

Surtitre & étiquettes

Surtitre de section

React TypeScript PostgreSQL

Champs de formulaire

Libellé de champ

Liste déroulante

Étiquettes de savoir-faire

TypeScript PostgreSQL Docker LLM & agents

Élément de menu

Actif Au repos

Tuile

Intitulé de tuile

Fond, filet, liseré haut et ombre portée. L’état « au premier plan » éclaircit le fond et creuse l’ombre.

Réglages hors variables

Ces valeurs ne sont pas des variables CSS : elles n’étaient utilisées qu’une fois. Voici où les trouver si vous voulez y toucher.

Réglage	Valeur	Sélecteur