Socle commun · /kit/vibe.css

Le design system de vibe.

Les couleurs, la typographie et les composants partagés par cette page et par chaque projet. Tout ce qui est montré ici est rendu par le vrai socle, et les valeurs sont lues dans le fichier au moment du build.

Ouvrir vibe.css Démarrer un projet

Principes

Quatre règles tiennent l'ensemble. Le reste se décide projet par projet.

Une seule couleur vive
Le lime du point du i. Il signale ce qui vit ou ce qui compte, jamais une décoration. Les autres couleurs sont des couleurs de données.
Des filets plutôt que des ombres
Un pixel, des rails, des croix aux intersections. La structure se voit, comme dans un outil de dev, sans effet de profondeur.
Clair d'abord, sombre à égalité
Chaque couleur a sa valeur sombre. Le choix est mémorisé pour tout le site et l'accent change de forme pour rester lisible.
Le socle ne touche qu'à ses classes
Il stylise html, body et les classes v-. Un projet garde la main sur sa mise en page et son identité.

Ce que le socle garantit

Un contour de focus visible sur tout élément atteint au clavier.
Les animations et transitions coupées quand l'appareil demande moins de mouvement.
Les trois niveaux de texte au-dessus de 4,5:1 de contraste, sur le fond, les cartes et leur survol, dans les deux thèmes.
Les liens qui ouvrent un onglet annoncés aux lecteurs d'écran (classe .v-sr).
Le thème posé avant l'affichage, sans flash, et la couleur du navigateur mobile qui suit.

Couleurs

Chaque nuance est montrée dans ses deux thèmes, sombre à gauche et clair à droite. Les ratios de contraste suivent les seuils WCAG : 4,5 pour du texte courant, 3 pour du texte large.

Fonds et surfaces

Du plus profond au plus proche. Une carte se pose sur --v-fond-2, un survol passe à --v-surface.

--v-fond
Sombre
#0E0E0E
Clair
#FAFAF8
--v-fond-2
Sombre
#141414
Clair
#FFFFFF
--v-surface
Sombre
#181818
Clair
#F3F3F1
--v-surface-2
Sombre
#1E1E1E
Clair
#ECECEA

Texte

Trois niveaux : le texte, le texte secondaire, les métadonnées. Contraste mesuré sur --v-fond.

--v-texte
Sombre
#EDEDED16,5:1 · AA
Clair
#1A1A1A16,7:1 · AA
--v-texte-2
Sombre
#A1A1A17,5:1 · AA
Clair
#5F5F5F6,1:1 · AA
--v-texte-3
Sombre
#8585855,2:1 · AA
Clair
#6B6B6B5,1:1 · AA

Filets

Un pixel, partout : cartes, rails, barres. Le filet fort borde les boutons et les tags, le filet de survol s'allume au passage.

--v-filet
Sombre
#242424
Clair
#EAEAEA
--v-filet-fort
Sombre
#363636
Clair
#D4D4D4
--v-filet-survol
Sombre
#474747
Clair
#B5B5B5

Accent

La seule couleur vive. --v-accent pour les aplats et les surlignages, --v-accent-texte pour du texte (le lime pur ne se lit pas sur fond clair), --v-sur-accent pour écrire sur le lime.

--v-accent
Sombre
#C6F05A
Clair
#C6F05A
--v-accent-texte
Sombre
#C6F05A14,7:1 · AA
Clair
#4772095,5:1 · AA
--v-sur-accent
Sombre
#1A1A1A13,3:1 · AA
Clair
#1A1A1A13,3:1 · AA

Données

Réservées aux graphiques et aux compteurs, jamais à la décoration. Contraste mesuré sur --v-fond-2.

--v-donnee-jaune
Sombre
#FFD84D13,3:1 · AA
Clair
#E5B3001,9:1 · décor
--v-donnee-ardoise
Sombre
#9AA8BC7,6:1 · AA
Clair
#5B6B825,4:1 · AA
--v-donnee-bleu
Sombre
#5AAEF57,7:1 · AA
Clair
#1E6FC25,1:1 · AA
--v-donnee-vert
Sombre
#4ADE8010,6:1 · AA
Clair
#15803D5,0:1 · AA
--v-donnee-rouge
Sombre
#F871716,7:1 · AA
Clair
#B91C1C6,5:1 · AA

Détails du thème

Le dégradé des grands titres et le survol du bouton principal. Ils s'inversent avec le thème.

--v-degrade-haut
Sombre
#FFFFFF
Clair
#000000
--v-degrade-bas
Sombre
#9A9A9A
Clair
#6B6B6B
--v-clair-survol
Sombre
#FFFFFF
Clair
#000000

Typographie

Geist pour le texte, Geist Mono pour les métadonnées et les chiffres. Deux polices variables auto-hébergées dans /kit/fonts, sous licence SIL Open Font.

Geist

--v-sans · 100 à 900

Geist Mono

--v-mono · 100 à 900

Hérosclamp(40px, 6.2vw, 80px) · 600 · -0,045em
Ce que l’IA sait faire
Titre de projetclamp(30px, 3.6vw, 44px) · 600 · -0,04em
Impact IA
Titre de sectionclamp(22px, 2.2vw, 28px) · 600 · -0,03em
Mes projets
Texte17px · 400 · interligne 1,55
Électricité, carbone et eau, pour votre usage réel. Des ordres de grandeur, pas des mesures.
Label.v-label · mono 12px · capitales
Projet · 2026
Chiffre.v-num · mono 600 · unité en small
11,9mg CO₂e

Formes et mouvement

Des rayons francs, une colonne fixe et une seule courbe pour tout ce qui bouge. Les pilules (boutons, pastilles) sont entièrement arrondies.

--v-rayon10px
Petits blocs : cadres, nuances, blocs de code.
--v-rayon-l16px
Cartes et compteurs.
--v-colonne1200px
Largeur de la colonne à rails.
--v-gouttiereclamp(20px, 4vw, 48px)
Marge intérieure, de 20px sur mobile à 48px.
--v-courbecubic-bezier(.2, .7, .2, 1)
Courbe de toutes les transitions : départ vif, arrivée douce.

Pictos

Phosphor, graisse regular, copiés tels quels depuis @phosphor-icons/core 2.1.1 (licence MIT), jamais redessinés. Inline en SVG, couleur du texte, cachés aux lecteurs d'écran : le texte voisin porte le sens. 16px dans un bouton, 12px dans le pied de page, 1em ailleurs.

arrow-right
sun
moon
arrow-down
arrow-up-right
github-logo
list
x
cloud
lightning
drop
device-mobile
car
chat-circle-text
hard-drives
brain
users-three
article
jar

Tous ceux du site et d'Impact IA. Pour en ajouter un, chercher son nom sur phosphoricons.com et copier le chemin du fichier assets/regular/<nom>.svg du paquet.

HTML

<svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true" width="16" height="16">
  <path d="…chemin copié depuis @phosphor-icons/core, assets/regular/<nom>.svg…"/>
</svg>

Composants

Les classes v- du socle, en vrai. Chaque extrait se colle tel quel dans une page qui charge le socle.

Boutons

.v-btn --clair --sombre --petit

Action principale Action secondaire Petit

HTML

<a class="v-btn v-btn--clair" href="#">Action principale</a>
<a class="v-btn v-btn--sombre" href="#">Action secondaire</a>
<a class="v-btn v-btn--clair v-btn--petit" href="#">Petit</a>

Pastille d'état

.v-pill .v-dot --vif

En ligne

En construction

HTML

<p class="v-pill"><span class="v-dot v-dot--vif" aria-hidden="true"></span>En ligne</p>
<p class="v-pill"><span class="v-dot" aria-hidden="true"></span>En construction</p>

Label et tags

.v-label .v-tag

Projet · 2026

HTMLJavaScript

HTML

<span class="v-label">Projet · 2026</span>
<span class="v-tag">HTML</span>
<span class="v-tag">JavaScript</span>

Bascule de thème

.v-theme [data-v-theme]

Essayez : elle bascule toute la page.

HTML

<button type="button" class="v-theme" data-v-theme aria-label="Changer de thème, clair ou sombre" title="Clair / sombre"><svg class="v-theme__soleil" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"/></svg><svg class="v-theme__lune" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z"/></svg></button>

Titre en dégradé et accent

.v-degrade .v-accent

Ce que coûte une requête d'IA

HTML

<h1 class="v-degrade">Ce que coûte une <span class="v-accent">requête d'IA</span></h1>

Compteurs

.v-meter --v-c .v-num

Électricité

0,03Wh

Carbone

11,9mg CO₂e

Eau

0,12ml

HTML

<div class="v-meter" style="--v-c: var(--v-donnee-ardoise)">
  <span class="v-label">Carbone</span>
  <p class="v-num">11,9<small>mg CO₂e</small></p>
</div>

Ticket

.v-ticket

Électricité0,03 Wh

Carbone11,9 mg

Total3,6 g / mois

HTML

<div class="v-ticket">
  <p><span>Électricité</span><span>0,03 Wh</span></p>
  <p><span>Carbone</span><span>11,9 mg</span></p>
  <p><strong>Total</strong><strong>3,6 g / mois</strong></p>
</div>

Carte

.v-card

Surface bordée

Fond --v-fond-2, filet d'un pixel, rayon de 16px.

HTML

<div class="v-card">…</div>

Grille de fond

.v-grille

HTML

<section style="position: relative; isolation: isolate">
  <div class="v-grille" aria-hidden="true"></div>
  …
</section>

Images selon le thème

.v-si-sombre .v-si-clair

Deux images, une par thème : seule celle du thème courant s'affiche. C'est ainsi que les captures des projets suivent la bascule.

HTML

<img class="v-si-sombre" src="capture.jpg" alt="…">
<img class="v-si-clair" src="capture-clair.jpg" alt="">

Barre de projet

.v-bar

mon-projet

OutilTous les projets

HTML

<header class="v-bar"><div class="v-bar__in">
  <div class="v-bar__fil"><a class="v-bar__home" href="/" aria-label="vibe, tous les projets"><svg class="vibe" viewBox="396 188 981 524" aria-hidden="true"><path class="vibe__lettres" fill-rule="evenodd" d="M 687.4 404.8 C 676.9 408.5, 666.8 418.8, 660.9 431.8 C 656.9 440.5, 653.9 450.9, 647.9 476 C 636 526.2, 625.3 558.3, 613.7 578.7 C 599.3 603.9, 585.8 614.2, 576.8 606.7 C 568.6 600, 561.2 572.8, 550.5 509.5 C 541.4 455.8, 536.3 441.1, 522.8 428.5 C 500.5 407.9, 471.1 413.7, 433.5 446.1 C 404.4 471.2, 393.5 491.4, 401.1 506.2 C 409.4 522.5, 428.7 524.6, 453.5 511.7 C 460.6 508, 462 507.6, 462.5 508.9 C 462.7 509.8, 464.3 519.3, 466 530 C 482.1 633.6, 507.8 682.5, 552.7 695.2 C 586 704.6, 628.8 686.9, 661.8 650 C 719.2 585.8, 757.5 463.3, 732.9 422.4 C 728.8 415.7, 721.8 409.1, 715.3 405.9 C 708.7 402.7, 694.8 402.2, 687.4 404.8 M 862 191.6 C 839.9 196.3, 822.3 212.2, 811.9 237 C 799.9 265.6, 778.3 362.7, 764.6 450 C 751.8 531, 745.1 593.7, 742.9 650 C 742.3 666.8, 741.6 680.8, 741.4 681.2 C 740.5 682.7, 752.8 693.8, 759.3 697.5 C 777 707.3, 795.9 710.5, 832 709.7 C 858.6 709.1, 870.4 707.7, 889.8 703 C 955.7 687, 1010.4 649, 1033.4 603.1 C 1037.5 595, 1037.9 595, 1040.5 603 C 1053.8 644, 1084.7 675.4, 1124.6 688.5 C 1138 692.9, 1144.9 694.1, 1161.5 694.7 C 1199.5 696.1, 1229.3 688.3, 1278.5 664 C 1289.5 658.6, 1301.7 652.2, 1305.5 650 C 1325.3 638.3, 1330.8 634.8, 1345.3 625.2 C 1364.6 612.5, 1371 606.6, 1373.5 599.1 C 1377.9 585.7, 1369.7 570.5, 1354.2 563.2 C 1343.1 558, 1325.8 559.6, 1312.5 567.1 C 1310.8 568, 1302.8 572.6, 1294.5 577.3 C 1257 598.5, 1227.5 610.9, 1202.3 615.9 C 1179.2 620.6, 1157.8 616.8, 1147 606 C 1142.8 601.8, 1136.4 590.1, 1137.8 589 C 1138.2 588.6, 1144.1 586.7, 1151 584.6 C 1249.9 554.8, 1318.3 496.3, 1320.7 439.5 C 1321.9 411.4, 1308.9 391.5, 1280.4 377.9 C 1231.3 354.5, 1149.5 378.5, 1092.6 433 C 1077.5 447.4, 1057.6 473.5, 1051.1 487.5 C 1050 489.7, 1047.8 494.5, 1046.1 498.3 C 1044.4 502, 1042.8 505, 1042.6 505 C 1042.4 505, 1041.2 501.3, 1040 496.8 C 1026.9 448.1, 984.1 418.9, 933.3 424 C 908.9 426.4, 890.1 433, 866.1 447.4 C 859.1 451.6, 857 452.5, 857 451.2 C 857 450.2, 859.7 439.6, 863.1 427.6 C 866.4 415.5, 870 401.8, 871.1 397.1 C 873.2 388.2, 876.4 376, 883 353 C 885.1 345.6, 888.9 332.3, 891.3 323.5 C 893.8 314.7, 899.7 294.1, 904.4 277.8 C 909.1 261.5, 913.7 244.4, 914.6 239.9 C 921.4 206.5, 897 184.1, 862 191.6 M 1209.3 443.5 C 1177.5 450.4, 1131.4 491.4, 1127.3 516.3 L 1126.8 519.9 1134.1 517.6 C 1175.1 504.9, 1221.3 475.9, 1228.7 458.3 C 1234 445.5, 1226.5 439.8, 1209.3 443.5 M 917.5 514.9 C 875.4 525.5, 836.7 571.7, 830.8 618.4 C 828.8 634.3, 832.2 637.5, 850 636.6 C 904.5 633.8, 959.3 585.4, 959.4 540 C 959.4 529.9, 958 525.1, 953.3 519.9 C 947.1 513.1, 932.8 511.1, 917.5 514.9"/><circle class="vibe__point" cx="699.5" cy="317.9" r="65.2"/></svg></a><span class="v-bar__sep" aria-hidden="true">/</span><span class="v-bar__nom">mon-projet</span></div>
  <nav class="v-bar__liens" aria-label="Dans cette page"><a class="v-bar__lien" href="#outil">Outil</a><button type="button" class="v-theme" data-v-theme aria-label="Changer de thème, clair ou sombre" title="Clair / sombre"><svg class="v-theme__soleil" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"/></svg><svg class="v-theme__lune" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z"/></svg></button><a class="v-btn v-btn--sombre v-btn--petit v-bar__retour" href="/">Tous les projets</a></nav>
</div></header>

Pied de page

.v-pied

Le même partout, sans variante : c'est celui en bas de cette page. Ce qui concerne un projet (sources, licence, date de calcul) va dans le projet, au-dessus. L'année se met à jour seule grâce à data-v-annee.

HTML

<footer class="v-pied"><div class="v-pied__in">
  <ul class="v-pied__liens">
    <li><a href="https://nfrancois.fr/" target="_blank" rel="noopener">nfrancois.fr<span class="v-sr"> (nouvel onglet)</span><svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"/></svg></a></li>
    <li><a href="https://www.linkedin.com/in/n-francois/" target="_blank" rel="noopener me">LinkedIn<span class="v-sr"> (nouvel onglet)</span><svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"/></svg></a></li>
    <li><a href="https://www.iatechtravel.cafe" target="_blank" rel="noopener">IA, Tech &amp; Travel Café<span class="v-sr"> (nouvel onglet)</span><svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"/></svg></a></li>
    <li><a href="/design-system">Design system</a></li>
    <li><a href="https://nfrancois.fr/mentions-legales/">Mentions légales</a></li>
  </ul>
  <p class="v-pied__copy">© <span data-v-annee>2026</span> Nicolas François</p>
</div></footer>

Logo et icône

Le logo vibe est un dessin à la main, vectorisé tel quel, avec le point du i en lime. Il prend la couleur du texte, donc il suit le thème. Dans l'en-tête, il s'écrit au chargement, geste par geste.

icon.svg apple-icon.png

HTML

<svg class="vibe" viewBox="396 188 981 524" aria-hidden="true"><path class="vibe__lettres" fill-rule="evenodd" d="M 687.4 404.8 C 676.9 408.5, 666.8 418.8, 660.9 431.8 C 656.9 440.5, 653.9 450.9, 647.9 476 C 636 526.2, 625.3 558.3, 613.7 578.7 C 599.3 603.9, 585.8 614.2, 576.8 606.7 C 568.6 600, 561.2 572.8, 550.5 509.5 C 541.4 455.8, 536.3 441.1, 522.8 428.5 C 500.5 407.9, 471.1 413.7, 433.5 446.1 C 404.4 471.2, 393.5 491.4, 401.1 506.2 C 409.4 522.5, 428.7 524.6, 453.5 511.7 C 460.6 508, 462 507.6, 462.5 508.9 C 462.7 509.8, 464.3 519.3, 466 530 C 482.1 633.6, 507.8 682.5, 552.7 695.2 C 586 704.6, 628.8 686.9, 661.8 650 C 719.2 585.8, 757.5 463.3, 732.9 422.4 C 728.8 415.7, 721.8 409.1, 715.3 405.9 C 708.7 402.7, 694.8 402.2, 687.4 404.8 M 862 191.6 C 839.9 196.3, 822.3 212.2, 811.9 237 C 799.9 265.6, 778.3 362.7, 764.6 450 C 751.8 531, 745.1 593.7, 742.9 650 C 742.3 666.8, 741.6 680.8, 741.4 681.2 C 740.5 682.7, 752.8 693.8, 759.3 697.5 C 777 707.3, 795.9 710.5, 832 709.7 C 858.6 709.1, 870.4 707.7, 889.8 703 C 955.7 687, 1010.4 649, 1033.4 603.1 C 1037.5 595, 1037.9 595, 1040.5 603 C 1053.8 644, 1084.7 675.4, 1124.6 688.5 C 1138 692.9, 1144.9 694.1, 1161.5 694.7 C 1199.5 696.1, 1229.3 688.3, 1278.5 664 C 1289.5 658.6, 1301.7 652.2, 1305.5 650 C 1325.3 638.3, 1330.8 634.8, 1345.3 625.2 C 1364.6 612.5, 1371 606.6, 1373.5 599.1 C 1377.9 585.7, 1369.7 570.5, 1354.2 563.2 C 1343.1 558, 1325.8 559.6, 1312.5 567.1 C 1310.8 568, 1302.8 572.6, 1294.5 577.3 C 1257 598.5, 1227.5 610.9, 1202.3 615.9 C 1179.2 620.6, 1157.8 616.8, 1147 606 C 1142.8 601.8, 1136.4 590.1, 1137.8 589 C 1138.2 588.6, 1144.1 586.7, 1151 584.6 C 1249.9 554.8, 1318.3 496.3, 1320.7 439.5 C 1321.9 411.4, 1308.9 391.5, 1280.4 377.9 C 1231.3 354.5, 1149.5 378.5, 1092.6 433 C 1077.5 447.4, 1057.6 473.5, 1051.1 487.5 C 1050 489.7, 1047.8 494.5, 1046.1 498.3 C 1044.4 502, 1042.8 505, 1042.6 505 C 1042.4 505, 1041.2 501.3, 1040 496.8 C 1026.9 448.1, 984.1 418.9, 933.3 424 C 908.9 426.4, 890.1 433, 866.1 447.4 C 859.1 451.6, 857 452.5, 857 451.2 C 857 450.2, 859.7 439.6, 863.1 427.6 C 866.4 415.5, 870 401.8, 871.1 397.1 C 873.2 388.2, 876.4 376, 883 353 C 885.1 345.6, 888.9 332.3, 891.3 323.5 C 893.8 314.7, 899.7 294.1, 904.4 277.8 C 909.1 261.5, 913.7 244.4, 914.6 239.9 C 921.4 206.5, 897 184.1, 862 191.6 M 1209.3 443.5 C 1177.5 450.4, 1131.4 491.4, 1127.3 516.3 L 1126.8 519.9 1134.1 517.6 C 1175.1 504.9, 1221.3 475.9, 1228.7 458.3 C 1234 445.5, 1226.5 439.8, 1209.3 443.5 M 917.5 514.9 C 875.4 525.5, 836.7 571.7, 830.8 618.4 C 828.8 634.3, 832.2 637.5, 850 636.6 C 904.5 633.8, 959.3 585.4, 959.4 540 C 959.4 529.9, 958 525.1, 953.3 519.9 C 947.1 513.1, 932.8 511.1, 917.5 514.9"/><circle class="vibe__point" cx="699.5" cy="317.9" r="65.2"/></svg>

Démarrer un projet

Un projet est une page autonome dans public/<nom>/index.html, servie à /<nom>. Trois blocs suffisent pour qu'il appartienne au site.

Charger le socle dans le head

Le script de thème se charge sans defer, pour poser le thème avant l'affichage.

HTML

<link rel="preload" href="fonts/Geist-Variable.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="fonts/GeistMono-Variable.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/kit/vibe.css">
<meta name="theme-color" content="#FAFAF8">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-icon.png">
<script src="/kit/theme.js"></script>

Poser la barre vibe en haut

Le logo ramène au hub ; sur mobile, les liens et le bouton de retour s'effacent.

HTML

<header class="v-bar"><div class="v-bar__in">
  <div class="v-bar__fil"><a class="v-bar__home" href="/" aria-label="vibe, tous les projets"><svg class="vibe" viewBox="396 188 981 524" aria-hidden="true"><path class="vibe__lettres" fill-rule="evenodd" d="M 687.4 404.8 C 676.9 408.5, 666.8 418.8, 660.9 431.8 C 656.9 440.5, 653.9 450.9, 647.9 476 C 636 526.2, 625.3 558.3, 613.7 578.7 C 599.3 603.9, 585.8 614.2, 576.8 606.7 C 568.6 600, 561.2 572.8, 550.5 509.5 C 541.4 455.8, 536.3 441.1, 522.8 428.5 C 500.5 407.9, 471.1 413.7, 433.5 446.1 C 404.4 471.2, 393.5 491.4, 401.1 506.2 C 409.4 522.5, 428.7 524.6, 453.5 511.7 C 460.6 508, 462 507.6, 462.5 508.9 C 462.7 509.8, 464.3 519.3, 466 530 C 482.1 633.6, 507.8 682.5, 552.7 695.2 C 586 704.6, 628.8 686.9, 661.8 650 C 719.2 585.8, 757.5 463.3, 732.9 422.4 C 728.8 415.7, 721.8 409.1, 715.3 405.9 C 708.7 402.7, 694.8 402.2, 687.4 404.8 M 862 191.6 C 839.9 196.3, 822.3 212.2, 811.9 237 C 799.9 265.6, 778.3 362.7, 764.6 450 C 751.8 531, 745.1 593.7, 742.9 650 C 742.3 666.8, 741.6 680.8, 741.4 681.2 C 740.5 682.7, 752.8 693.8, 759.3 697.5 C 777 707.3, 795.9 710.5, 832 709.7 C 858.6 709.1, 870.4 707.7, 889.8 703 C 955.7 687, 1010.4 649, 1033.4 603.1 C 1037.5 595, 1037.9 595, 1040.5 603 C 1053.8 644, 1084.7 675.4, 1124.6 688.5 C 1138 692.9, 1144.9 694.1, 1161.5 694.7 C 1199.5 696.1, 1229.3 688.3, 1278.5 664 C 1289.5 658.6, 1301.7 652.2, 1305.5 650 C 1325.3 638.3, 1330.8 634.8, 1345.3 625.2 C 1364.6 612.5, 1371 606.6, 1373.5 599.1 C 1377.9 585.7, 1369.7 570.5, 1354.2 563.2 C 1343.1 558, 1325.8 559.6, 1312.5 567.1 C 1310.8 568, 1302.8 572.6, 1294.5 577.3 C 1257 598.5, 1227.5 610.9, 1202.3 615.9 C 1179.2 620.6, 1157.8 616.8, 1147 606 C 1142.8 601.8, 1136.4 590.1, 1137.8 589 C 1138.2 588.6, 1144.1 586.7, 1151 584.6 C 1249.9 554.8, 1318.3 496.3, 1320.7 439.5 C 1321.9 411.4, 1308.9 391.5, 1280.4 377.9 C 1231.3 354.5, 1149.5 378.5, 1092.6 433 C 1077.5 447.4, 1057.6 473.5, 1051.1 487.5 C 1050 489.7, 1047.8 494.5, 1046.1 498.3 C 1044.4 502, 1042.8 505, 1042.6 505 C 1042.4 505, 1041.2 501.3, 1040 496.8 C 1026.9 448.1, 984.1 418.9, 933.3 424 C 908.9 426.4, 890.1 433, 866.1 447.4 C 859.1 451.6, 857 452.5, 857 451.2 C 857 450.2, 859.7 439.6, 863.1 427.6 C 866.4 415.5, 870 401.8, 871.1 397.1 C 873.2 388.2, 876.4 376, 883 353 C 885.1 345.6, 888.9 332.3, 891.3 323.5 C 893.8 314.7, 899.7 294.1, 904.4 277.8 C 909.1 261.5, 913.7 244.4, 914.6 239.9 C 921.4 206.5, 897 184.1, 862 191.6 M 1209.3 443.5 C 1177.5 450.4, 1131.4 491.4, 1127.3 516.3 L 1126.8 519.9 1134.1 517.6 C 1175.1 504.9, 1221.3 475.9, 1228.7 458.3 C 1234 445.5, 1226.5 439.8, 1209.3 443.5 M 917.5 514.9 C 875.4 525.5, 836.7 571.7, 830.8 618.4 C 828.8 634.3, 832.2 637.5, 850 636.6 C 904.5 633.8, 959.3 585.4, 959.4 540 C 959.4 529.9, 958 525.1, 953.3 519.9 C 947.1 513.1, 932.8 511.1, 917.5 514.9"/><circle class="vibe__point" cx="699.5" cy="317.9" r="65.2"/></svg></a><span class="v-bar__sep" aria-hidden="true">/</span><span class="v-bar__nom">mon-projet</span></div>
  <nav class="v-bar__liens" aria-label="Dans cette page"><a class="v-bar__lien" href="#outil">Outil</a><button type="button" class="v-theme" data-v-theme aria-label="Changer de thème, clair ou sombre" title="Clair / sombre"><svg class="v-theme__soleil" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"/></svg><svg class="v-theme__lune" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z"/></svg></button><a class="v-btn v-btn--sombre v-btn--petit v-bar__retour" href="/">Tous les projets</a></nav>
</div></header>

Finir par le pied de page commun

Copié tel quel. Les crédits du projet vont au-dessus, dans le projet.

HTML

<footer class="v-pied"><div class="v-pied__in">
  <ul class="v-pied__liens">
    <li><a href="https://nfrancois.fr/" target="_blank" rel="noopener">nfrancois.fr<span class="v-sr"> (nouvel onglet)</span><svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"/></svg></a></li>
    <li><a href="https://www.linkedin.com/in/n-francois/" target="_blank" rel="noopener me">LinkedIn<span class="v-sr"> (nouvel onglet)</span><svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"/></svg></a></li>
    <li><a href="https://www.iatechtravel.cafe" target="_blank" rel="noopener">IA, Tech &amp; Travel Café<span class="v-sr"> (nouvel onglet)</span><svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"/></svg></a></li>
    <li><a href="/design-system">Design system</a></li>
    <li><a href="https://nfrancois.fr/mentions-legales/">Mentions légales</a></li>
  </ul>
  <p class="v-pied__copy">© <span data-v-annee>2026</span> Nicolas François</p>
</div></footer>

L'inscrire sur l'accueil
Une entrée dans content/projects.ts, une règle dans next.config.js et deux captures en 2880×1800, une sombre, une claire. Le détail est dans le README.

Le design system de vibe.

Une seule couleur vive

Des filets plutôt que des ombres

Clair d'abord, sombre à égalité

Le socle ne touche qu'à ses classes

Ce que le socle garantit

Fonds et surfaces

Texte

Filets

Accent

Données

Détails du thème

Geist

Geist Mono

Charger le socle dans le head

Poser la barre vibe en haut

Finir par le pied de page commun

L'inscrire sur l'accueil