Designsystem

Hier habe ich die Website in ihre Einzelteile zerlegt: Farben, Schriften, Buttons, Icons und die Abstände, die manchmal alles verrutschen lassen. Probiert die Elemente aus und vergleicht das helle und das dunkle Theme. Das ist auch der Spickzettel für neue Seiten: Buttons aus einer Familie, ohne dass ein neuer Bildschirm wie ein Fremder auf der eigenen Website wirkt

Farben

Die Grundakzentfarbe ist #46a758. Die Ankündigungsleiste hat in beiden Designs einen grauen Hintergrund (#2b2c30) mit weißem Text. Grüne Schaltflächen haben dunklen Text; Linkfarben berücksichtigen den Hintergrund.

--color-accent

Helles Design
#46a758

Dunkles Design
#46a758

--color-background

Helles Design
#ffffff

Dunkles Design
#1d1e20

--color-background-100

Helles Design
#f9f9f9

Dunkles Design
#2b2c30

--color-background-200

Helles Design
#f3f3f3

Dunkles Design
#2f3035

--color-background-300

Helles Design
#ececec

Dunkles Design
#38383d

--color-background-400

Helles Design
#dbdbdb

Dunkles Design
#404046

--color-foreground

Helles Design
#252525

Dunkles Design
#c7cbd5

--color-secondary

Helles Design
#686868

Dunkles Design
#9ca0ac

--color-contrast

Helles Design
#000000

Dunkles Design
#ffffff

--color-success

Helles Design
#348f3f

Dunkles Design
#348f3f

--color-error

Helles Design
#ff4c4c

Dunkles Design
#ff4c4c

--announcement-background

Helles Design
#2b2c30

Dunkles Design
#2b2c30

--announcement-foreground

Helles Design
#ffffff

Dunkles Design
#ffffff

Typografie

Geist entstand bei Vercel gemeinsam mit basement studio und dem Schriftgestalter Andrés Briganti. Ende 2022 beauftragte Vercel das Studio mit einer frei verfügbaren Schriftfamilie für seine Marke und die Entwicklergemeinschaft. Die erste Version erschien 2023. Die Familie orientiert sich an Schweizer Typografie: einfache Formen, klare Buchstaben und viel Aufmerksamkeit dafür, wie sie auf dem Bildschirm wirken

Geist Sans

Ich habe Geist Sans wegen ihres ruhigen Charakters für den Fließtext gewählt. Sie hat diese Präzision, die ich an Benutzeroberflächen mag, beim Lesen eines langen Artikels ebenso wie beim Überfliegen von Beschriftungen. Sie hält die Seite zusammen und lenkt den Blick auf den Text

Geist Mono

Geist Mono hat ihre eigene Aufgabe. Jedes Zeichen nimmt dieselbe Breite ein: Ein schmales i bekommt genauso viel Platz wie ein breites m. So entsteht der gleichmäßige Rhythmus, den man aus Code und Terminals kennt. Mir gefällt dieser technische Charakter. Deshalb verwende ich Mono für Überschriften, Navigation und technische Beschriftungen. Zusammen mit Sans verbindet sie zwei Seiten dieser Website: Design und Technologie

Beide Schriften werden direkt von dieser Website geladen. Fehlt ein Zeichen in der Schriftdatei, verwendet der Browser dafür eine Systemschrift. Das fällt besonders in der chinesischen und arabischen Ausgabe auf

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

Geist · 400 / 450 / 550 / 600

Geist Mono · 400 / 450 / 550 / 600

--font-h1 · 2rem