Minimalisme utile
La hiérarchie vient d’abord de la typographie, de l’espace et d’un bleu d’accent unique.
Design System
Le référentiel vivant de franck.matsos.dev : fondations, primitives HTML, composants, formulaires, responsive, accessibilité et motion.
01 · Direction
Principes
Cohérence avant variété
Une même intention réutilise les mêmes tokens, primitives et comportements sur toutes les pages.
Accessible par défaut
Contraste, focus, clavier, HTML natif et réduction des animations font partie du composant.
Les effets de profondeur sont hiérarchisés : contenu courant sans ombre, surface secondaire avec ombre douce, élément réellement détaché avec ombre élevée. Les dégradés restent monochromatiques et les flous sont réservés aux couches de navigation ou aux halos décoratifs.
02 · Fondations
Couleurs
La couleur ne porte jamais seule une information. Texte courant : 4,5:1 minimum ; grand texte et composants graphiques utiles : 3:1 minimum.
Fond
- Token
- --color-background
- Valeur
- #ffffff
Fond sombre
- Token
- --color-background-dark
- Valeur
- #090a0c
Texte
- Token
- --color-foreground
- Valeur
- #000000
Primaire
- Token
- --color-primary
- Valeur
- #2563eb
Primaire sombre
- Token
- --color-primary-dark
- Valeur
- #60a5fa
Texte secondaire
- Token
- --text-secondary
- Valeur
- #525252 / #d4d4d4
Texte atténué
- Token
- --text-muted
- Valeur
- #6b7280 / #a3a3a3
03 · Fondations
Typographie
H1 · Inter Variable · 36–48 px · 700
Construire des systèmes lisibles.
H2 · 24–30 px · 600
Une hiérarchie nette, sans bruit.
Corps · 16–18 px
Inter sert la lecture. JetBrains Mono est réservé aux dates, tokens, commandes et fragments techniques.
Métadonnées · 12–14 px
Secondaires visuellement, sans jamais descendre sous le contraste requis.
04 · Fondations
Espacements
| Échelle | Valeur | Usage |
|---|---|---|
| 1 | 4 px | Micro-espacement |
| 2 | 8 px | Micro-espacement |
| 3 | 12 px | Micro-espacement |
| 4 | 16 px | Composants |
| 6 | 24 px | Composants |
| 8 | 32 px | Composants |
| 12 | 48 px | Sections majeures |
| 16 | 64 px | Sections majeures |
05 · Interface
Composants
Actions
Badges et tags
Défaut Primaire Accent
#PHP
#Symfony
#IA
Liens
Dans un texte, le lien reste identifiable autrement que par la couleur.
Surface
Panneau statique
Bordure fine et ombre douce.
Interactive
Surface cliquable
Hover, focus et déplacement subtil partagent le même langage.
06 · Primitives
Éléments HTML
Le thème couvre aussi les éléments rarement utilisés aujourd’hui. HTML natif d’abord ; un composant Astro n’est créé que lorsqu’une responsabilité supplémentaire le justifie.
Sémantique inline
Strong, emphase, marquage, texte secondaire.
Commande npm run build et raccourci Ctrl + K.
Une citation doit rester lisible sans devenir une carte.
Listes et définitions
- Élément non ordonné
- Second élément
- Première étape
- Étape suivante
- Token
- Valeur sémantique réutilisable.
- Primitive
- Brique de style sans logique métier.
| Élément | Rôle | Comportement |
|---|---|---|
| table | Données structurées | Conteneur scrollable sur petit écran |
| details | Disclosure | Animation progressive, contenu accessible sans JS |
Disclosure et statut
Détails natifs
Le contenu apparaît avec une transition courte. Sans animation ou sans JavaScript, le comportement natif reste fonctionnel.
Dialog natif
07 · Primitives
Formulaires
Les champs partagent une primitive visuelle unique : bordure sobre, surface neutre, focus bleu explicite. Les états d’erreur ne reposent jamais uniquement sur la couleur.
08 · Mise en page
Responsive
Mobile d’abord
Une colonne par défaut, aucune information dépendante du hover, aucun débordement horizontal à 320 px.
Conteneur
64 rem maximum ; gouttières progressives de 16, 24, 32 puis 48 px.
09 · Qualité
Accessibilité
- Contraste : 4,5:1 texte courant, 3:1 grand texte et composants utiles.
- Focus : toujours visible, contour ou ring distinct de l’état hover.
- Clavier : toute action est opérable sans pointeur ; les dialogues modaux confinent le focus.
- Sémantique : un H1, landmarks explicites, HTML natif avant ARIA.
- Images : alternative utile ou
alt=""si décorative. - Reflow : aucun défilement horizontal de page à 320 px.
- États : jamais indiqués par la seule couleur, exposés aux technologies d’assistance.
- Motion : aucun contenu essentiel ne dépend d’un reveal ou d’un effet de déplacement.
10 · Comportement
Animations & transitions
La motion explique un changement d’état, renforce la hiérarchie ou fournit un feedback. Elle ne sert pas à occuper visuellement l’espace.
| Usage | Token | Valeur | Cible |
|---|---|---|---|
| Interaction | --motion-fast | 220 ms | Hover, focus, icônes |
| Transition | --motion-medium | 360 ms | Surfaces, menus, marqueurs |
| Reveal | --motion-reveal | 520 ms | Entrée de contenu complexe |
| Reveal long | --motion-reveal-long | 620 ms | Timeline uniquement |
| Fluide | --ease-fluid | cubic-bezier(0.2, 0.8, 0.2, 1) | Interaction directe |
| Reveal | --ease-reveal | cubic-bezier(0.16, 1, 0.3, 1) | Apparition de contenu |
Interaction
Surface
Translation de 2 px et ombre renforcée au hover.
Reveal
Entrée verticale
8 px maximum, opacité + transform uniquement.
Stagger
Listes
30–50 ms entre quelques éléments visibles, jamais sur une archive entière.
Conserver
- soulignement progressif des liens ;
- hover et reveal des listes d’articles ;
- menu mobile et rotateur terminal du header ;
- timeline et progression au scroll ;
- reveal très léger des headers de page.
Éviter
- parallax et blur animé ;
- scale important ou animation permanente du contenu éditorial ;
- animation de largeur/hauteur lorsqu’un transform suffit ;
- reveals imbriqués sur plusieurs niveaux d’une même page.
prefers-reduced-motion: reduce neutralise les mouvements non essentiels. L’état final reste immédiatement visible et totalement opérable.