Le design system de nfrancois.fr.

Quatre règles tiennent l’ensemble. Elles viennent de ma charte, la même pour le site, les conférences et les documents.

• Trois couleurs et des grisPapier, encre et jaune. Les captures, les photos et les logos apportent le reste de la couleur.
• Le jaune est rareUn seul usage par écran : un mot surligné, la valeur clé d’un graphique ou un aplat. Jamais de texte jaune sur fond clair.
• Des filets, pas d’ombresUn filet encre ouvre chaque section, un filet gris sépare les lignes. La structure se voit, sans effet de profondeur.
• Clair d’abord, sombre au choixLe site s’ouvre toujours en clair. Le sombre s’applique quand le visiteur le choisit, et le choix est mémorisé.

Ce que le site garantit

• Un contour visible sur tout élément atteint au clavier.
• Les animations coupées quand l’appareil demande moins de mouvement.
• Le texte et le texte secondaire au-dessus de 4,5:1 de contraste, dans les deux thèmes (mesuré plus bas).
• Les chiffres animés écrits en dur dans la page, lisibles sans JavaScript et par les moteurs.
• Le thème posé avant l’affichage, sans flash.
• Une mesure d’audience sans cookies (Plausible).

Chaque couleur est montrée dans ses deux thèmes, clair à gauche et sombre à droite. Les contrastes sont mesurés sur le papier du même thème, avec les seuils WCAG : 4,5:1 pour du texte, 3:1 pour un trait ou un champ.

Hanken Grotesk pour les titres et les chiffres, Familjen Grotesk pour le texte, JetBrains Mono pour les dates, les sources et les repères. Trois polices libres, servies par le site.

• AaHanken Grotesk--font-display · 800 et 900
• AaFamiljen Grotesk--font-sans · 400 à 700
• AaJetBrains Mono--font-mono · 500, en capitales

Titre de l’accueil.nf-hero__title · clamp(40px, 7.2vw, 88px) · 800

Rendre ça clair

Titre de page.page-title · clamp(36px, 5.2vw, 56px) · 800

Ce que je construis

Chapeau.page-lead · 22px · 400

Une introduction en une ou deux phrases.

Textebody · 18px · 400

Le texte courant, sur 680 px de large au plus, pour garder des lignes faciles à lire.

Étiquette.nf-label · 14px · 500

Ma démarche

Repère.nf-fiche__date · 12px · 500

13 octobre 2026

Chiffre.nf-chiffre · clamp(48px, 6vw, 72px) · 900

3 000+

Un seul rayon discret, des pilules pour ce qui se clique, une colonne fixe et deux courbes pour tout ce qui bouge.

• --rayon 6pxPhotos, cartes, captures, blocs de code.
• --radius-full 999pxBoutons, filtres, étiquettes : entièrement arrondis.
• --container 1200pxLargeur de la colonne.
• --measure 680pxLargeur du texte courant.
• --rule-strong 2pxFilet encre qui ouvre une section.
• --rule-thin 1pxFilet gris entre les lignes.

Espacements

• --space-14px
• --space-28px
• --space-312px
• --space-416px
• --space-624px
• --space-832px
• --space-1248px
• --space-1664px
• --space-2496px
• --space-32128px

• --sortie-douce cubic-bezier(.2, .7, .2, 1)Démarre vite, se pose en douceur : survols, surlignage, menus.
• --entree-sortie cubic-bezier(.65, 0, .35, 1)Pour ce qui traverse : l’aplat jaune du bouton principal.
• --duree-courte 160msSurvols et changements d’état.
• --duree-moyenne 320msSoulignés et surlignages qui se tracent.
• --duree-longue 640msBarres de graphique et révélations.

Les pictos du site viennent de Phosphor, en graisse Bold, d’une seule couleur et toujours accompagnés d’un texte. Les logos des outils du Lab sont en une couleur eux aussi, pour rester dans la charte en clair comme en sombre.

Pictos du site

• Lune
• Soleil
• Menu
• Fermer
• Lien externe

Logos des outils

• Vercel
• Supabase
• Neon
• Cloudflare
• Claude
• Claude Code
• Google Cloud
• Google Search Console
• Plausible
• Hostinger
• GitHub
• Gemini
• Mistral
• Mistral Vibe

Tracés de Simple Icons (licence CC0). Sans logo libre : ChatGPT, Google AI Studio, Wispr Flow.

Les classes du site, en vrai. Chaque extrait se colle tel quel dans une page du site.

<a class="nf-btn nf-btn--primaire" href="…"><span class="nf-btn__lbl">Action principale</span></a>
<a class="nf-btn nf-btn--secondaire" href="…">Action secondaire</a>
<a class="nf-btn nf-btn--primaire nf-btn--petit" href="…"><span class="nf-btn__lbl">Petit</span></a>

<a class="nf-link" href="…">Lire la note de lab</a>

<h1>Ce que je <span class="nf-hl">teste avec l’IA</span></h1>

<p class="nf-label">Ma démarche</p>
<p class="lab-etiquette">IA · Data · Prototypes</p>
<span class="article__etiquette">Making-of</span>

<div class="nf-preuve">
  <p><span class="nf-preuve__n">3 000+</span><span class="nf-preuve__l">abonnés à la newsletter</span></p>
</div>

<div class="nf-bars">
  <div class="nf-bar nf-bar--cle">
    <span class="nf-bar__label">Rédaction</span><span class="nf-bar__val">64 %</span>
    <span class="nf-bar__track"><span class="nf-bar__fill" style="width: 64%"></span></span>
  </div>
</div>

<ul class="nf-fiches"><li><a class="nf-fiche" href="…">
  <span class="fiche__quand"><span class="nf-fiche__date">13 octobre 2026</span><span class="fiche__type">Making-of</span></span>
  <span><h3 class="nf-fiche__title">Transformer un tableur Excel en calculatrice web</h3><p class="nf-fiche__meta">Le résumé, en une ou deux lignes.</p></span>
</a></li></ul>

Le tampon NF : le N et la barre du F tracés d’une seule ligne d’encre, puis le point. Il s’anime en se dessinant dans la barre du haut.