DESIGN SYSTEM · DIRECTION « REGISTRE »

Les valeurs qui tiennent les quatre maquettes

Tout est dérivé des jetons Nocturne : les rampes tonales fournissent les neutres et l'accent, la densité 0,7× fournit l'espacement, les rayons 4 / 8 / 14. Le mode clair n'est pas une inversion — il change les rôles, pas seulement les valeurs.

01 · Palette

accent unique + neutres · ratios calculés sur le fond de la colonne

L'accent est le blurple #9184d9 de Nocturne, décliné en deux pas : #5d5294 pour le texte accentué en mode clair, #b5abfc en mode sombre. Il ne remplit jamais une surface — il trace des lignes, des points d'état et des bordures de bouton. Motif : un portfolio d'ingénieur qui aplatit une couleur sur un quart d'écran perd le crédit qu'il vient de gagner en données.

MODE CLAIR · PAR DÉFAUT
fond · #f3f5feneutral-100
champ · #e9ecf9100 → 200
surface · #e4e7f5neutral-200
filet · #cfd3e5neutral-300
bordure forte · #b2b6caneutral-400
texte atténué · #595d6c5,9:1
texte courant · #3f424d9,1:1
titres · #292b3112,8:1
accent trait · #796cbf4,1:1 · non textuel
accent texte · #5d52946,1:1
MODE SOMBRE · PAGES PROJET, BANDES OPEN SOURCE
fond · #161826color-bg
panneau · #1e2130bg → surface
surface · #232532color-surface
filet · #292b31neutral-900
bordure forte · #3f424dneutral-800
texte atténué · #9397ab6,1:1
texte courant · #b2b6ca8,8:1
titres · #e9e9ed15,4:1
accent trait · #968ae05,9:1
accent texte · #b5abfc8,6:1

Ce qui change entre les deux modes n'est pas seulement la valeur : en clair, la hiérarchie vient des filets et du vide ; en sombre, elle vient des panneaux légèrement remontés (#1e2130) et de l'accent d'un pas plus clair. Aucune ombre portée en clair, aucun blanc ni noir pur.

02 · Typographie

Inter pour tout ce qui se lit, IBM Plex Mono pour tout ce qui se mesure : chiffres, stack, états, index, étiquettes. La règle est absolue et c'est elle qui fait tenir la direction — un chiffre en Inter serait une faute de grammaire dans ce système.

80 / 1,00 / −3,3 %Inter 500
Titre de page
32 / 1,10 / −2,2 %
Titre de section
26 / 1,20 / −2,0 %
Titre d'enregistrement
17,5 / 1,60
Chapeau — une seule par page, sous le titre.
15 / 1,60
Corps de texte. Mesure bloquée à 48 caractères dans les enregistrements, 66 dans les pages de lecture.
13 / 1,55Plex Mono 400
~175 commits · PostgreSQL + Prisma · ● en production
10,5 / +13 %capitales
PLATEFORME · 3 SURFACES · GESTION FOURNISSEURS

03 · Espacement

Trois familles, jamais mélangées : intérieur de composant, entre blocs, entre sections. Toutes les valeurs sortent de la densité 0,7× de Nocturne arrondie au pair.

4
8
12
16
22
30
44
64
88

04 · Rayons & élévation

Rayons 4 / 8 / 14 pour l'interface, 18 et 26 réservés aux cadres d'appareil dans les maquettes. En mode clair, l'élévation est un filet — pas une ombre. En mode sombre, un filet plus une ombre ambiante.

4
8
14
sm
md
lg

05 · Composants & états

Chaque état est rendu tel qu’il apparaît, pas décrit. Le focus clavier est un anneau accent de 2 px à 2 px de décalage, partout, sans exception — c’est le seul endroit où l’accent a le droit d’être vif.

BOUTON PRIMAIRE — CONTOUR, JAMAIS PLEIN
Me contacterdéfaut
Me contactersurvol
Me contacterpressé
Me contacterfocus clavier
Me contacterdésactivé
BOUTON SECONDAIRE
Télécharger le CVdéfaut
Télécharger le CVsurvol
CHAMP DE FORMULAIRE
ÉTIQUETTES DE STACK
contour · défautaccent · point saillantplein · sur fond clair
neutre · sombreaccent · PR mergéecontour · sombre
LIEN & ÉTAT
lire l’étude de cas → défautlire l’étude de cas → survol● en productionétat · accent, pas de vert◐ bêta testétat intermédiaire · disque à moitié○ contributionétat secondaire · cercle vide
ENREGISTREMENT · SURVOL
01
Défaut — fond de page
filet en bas, dégradé aux deux bouts
02
Survol — surface remontée
#e4e7f5, transition 160 ms, aucun déplacement
03
Survol en mode sombre
#1e2130 — le fond monte, il ne s’éclaire pas

06 · Micro-décisions

Les choix qui ne se déduisent pas de la maquette.

Pas de photo dans le hero
Le tableau « état du parc » tient le rôle du portrait : il occupe la place, il porte l'information, et il ne vieillit pas. Une photo peut arriver plus tard sur la page contact sans casser la grille.
L'état « en production » est accent, pas vert
La palette est mono. Introduire un vert de statut ajouterait une couleur qui ne sert qu'une fois. Le contraste de forme suffit : disque plein en production, disque à moitié en bêta test, cercle vide pour une contribution.
Les filets s'éteignent aux deux bouts
Signature Nocturne, reprise partout : 48 px de dégradé de chaque côté. Sur une page dense, un filet net d'un bord à l'autre découpe la page en tiroirs ; un filet qui s'éteint la laisse respirer.
Les chiffres sont approximatifs et l'assument
« ~175 commits » plutôt que 175 : le tilde indique un relevé, pas une métrique instrumentée. Un recruteur technique repère immédiatement la différence, et la date de relevé figure au-dessus du tableau.
Trois colonnes, pas de vignette imposée
La troisième colonne d'un enregistrement change de nature selon le projet. Un outil sans interface n'a pas de capture à montrer ; le forcer produirait une image vide. Il montre ses chiffres à la place.
Apparition de 10 px seulement
Opacité et 10 px de translation, une fois. Ici l'apparition est purement CSS : sous prefers-reduced-motion rien ne bouge, et le contenu reste visible même si aucun script ne s'exécute.
Le bleu du club reste le bleu du club
Le #2a68af des Archers apparaît en pastille de 11 px, comme référence, jamais comme couleur d'interface. Une charte cliente se cite, elle ne se mélange pas.
Le mode sombre est réservé aux pages de lecture
Accueil et contact en clair, pages projet en sombre : la bascule marque le passage du survol à la lecture longue. Implémenté en scopes de tokens (data-ground), pas en couleurs codées en dur.

07 · Accessibilité — ce qui est vérifié

  • Texte courant à 9,1:1, texte atténué à 5,9:1 — au-dessus de AA dans les deux modes.
  • #796cbf et #968ae0 réservés aux traits, points et bordures : jamais de petit texte à 4,1:1.
  • Focus visible sur tout élément interactif, anneau 2 px décalé de 2 px.
  • Lien d'évitement vers le contenu, révélé au focus clavier.
  • Cibles tactiles à 48 px sur mobile, 44 px minimum pour les liens en ligne.
  • Tableau de parc en table sémantique avec en-têtes — empilé sur mobile par la présentation seule.
  • Aucune information portée par la seule couleur : chaque état porte aussi une forme et un mot.
  • Animations coupées sous prefers-reduced-motion.
  • Menu mobile en disclosure : ordre de tabulation naturel, Échap referme sur le bouton.