Système de design

J’ai démonté le site pour en montrer les pièces : couleurs, polices, boutons, icônes et ces espacements qui font parfois tout dérailler. Testez les éléments et comparez les thèmes clair et sombre. C’est aussi un mémo pour les nouvelles pages : des boutons de la même famille, sans écran qui semble s’être trompé de site

Couleurs

L’accent de base est #46a758. Le bandeau d’annonce utilise un fond gris #2b2c30 et du texte blanc dans les deux thèmes. Les boutons verts ont un texte foncé ; la teinte des liens tient compte du fond.

--color-accent

Thème clair
#46a758

Thème sombre
#46a758

--color-background

Thème clair
#ffffff

Thème sombre
#1d1e20

--color-background-100

Thème clair
#f9f9f9

Thème sombre
#2b2c30

--color-background-200

Thème clair
#f3f3f3

Thème sombre
#2f3035

--color-background-300

Thème clair
#ececec

Thème sombre
#38383d

--color-background-400

Thème clair
#dbdbdb

Thème sombre
#404046

--color-foreground

Thème clair
#252525

Thème sombre
#c7cbd5

--color-secondary

Thème clair
#686868

Thème sombre
#9ca0ac

--color-contrast

Thème clair
#000000

Thème sombre
#ffffff

--color-success

Thème clair
#348f3f

Thème sombre
#348f3f

--color-error

Thème clair
#ff4c4c

Thème sombre
#ff4c4c

--announcement-background

Thème clair
#2b2c30

Thème sombre
#2b2c30

--announcement-foreground

Thème clair
#ffffff

Thème sombre
#ffffff

Typographie

Geist a été créé par Vercel avec basement studio et le créateur de caractères Andrés Briganti. Fin 2022, Vercel a demandé au studio une famille de caractères libre pour sa marque et sa communauté de développeurs. La première version est sortie en 2023. La famille s’inspire de la typographie suisse : des formes simples, un dessin net et une attention particulière au rendu des lettres à l’écran

Geist Sans

J’ai choisi Geist Sans pour le texte courant en raison de son caractère calme. J’y retrouve cette précision des interfaces que j’aime, aussi bien pour lire un long article que pour parcourir des légendes. La police donne de la tenue à la page et laisse toute l’attention au texte

Geist Mono

Geist Mono a son propre rôle. Chaque caractère occupe la même largeur : un i étroit dispose d’autant de place qu’un m large. Cela crée le rythme régulier que l’on connaît du code et des terminaux. J’aime ce côté technique, alors Mono habille les titres, la navigation et les indications techniques. Avec Sans, il relie deux facettes du site : le design et la technologie

Les deux polices sont chargées directement depuis ce site. Lorsqu’un caractère manque dans le fichier, le navigateur utilise une police système. Cela se remarque surtout dans les versions chinoise et arabe

Vercel · Geist · Vercel, basement studio & Andrés Briganti

Geist · 400 / 450 / 550 / 600

Geist Mono · 400 / 450 / 550 / 600

--font-h1 · 2rem