Foundations · 01

Die Regeln hinter jeder Komponente

Farbe, Typografie, Radius, Spacing und Layout. Alle Werte sind als Figma-Variablen definiert und hier als CSS-Custom-Properties gespiegelt.

Farbe

Schwarz, Weiß und ein Rot. Rot ist Akzent und Fokus — nie Fläche für Interaktion. Graustufen tragen Sekundärtext und Trennlinien.

#ffffffprimitive/white
#000000primitive/black
#e5000fprimitive/red
#171717primitive/grey-900
#a3a3a3primitive/grey-400
#f5f5f5semantic/bg/subtle
#6b6b6bsemantic/text/on-light-secondary
#e5e5e5semantic/border/on-light
#404040semantic/border/on-dark

Typografie

Geist für alles Lesbare, Geist Mono für Eyebrows, Tags und Code. Headlines und Labels sind konsequent lowercase.

Display/XL
Geist Bold · 160/150 · −4%
Zeit
Headline/L
Geist Bold · 40/48 · −2%
Ein System, drei Ebenen
Title/L
Geist SemiBold · 22/28 · −1%
Foundations
Title/M
Geist SemiBold · 20/26 · −1%
Discovery, Browsing, Kauf
Body/Lead
Geist Regular · 20/30
Zeit ist das Wertvollste, was wir haben.
Body/L
Geist Regular · 17/26
Grundlage ist die reale Struktur von Zeitgeist Marketplace.
Body/M
Geist Regular · 15/23
Farbe, Typografie, Radius, Spacing, Layout.
Body/XS
Geist Regular · 13/18
Bachelorarbeit Mediendesign — IU · 2026
Label/M
Geist Medium · 15/20 · lowercase
foundations ansehen
Mono/Eyebrow
Geist Mono Medium · 12/16 · +12%
Designsystem · V0.1
Mono/Tag
Geist Mono Medium · 11/14 · +10%
Endkund:innen
Mono/Code
Geist Mono Medium · 13/18
zeit.mlsdigital.de

Radius

Der Standardradius ist 0. Die einzige Ausnahme ist der Primary-Button als Pill (999px) — die Hauptaktion einer Ansicht.

TokenWertVerwendung
radius/default0Cards, Inputs, Badges, Secondary/Tertiary Buttons
radius/pill999Primary Button

Spacing

Eine Skala, kein Zwischenwert. Abstände werden ausschließlich aus dieser Reihe gewählt.

8
12
16
24
28
40
48
56
64
80
96

Layout

Desktop-Raster auf 1440px Breite mit 160px Seitenrand und 1120px Inhaltsbreite. Karten laufen in drei Spalten mit 24px Gutter; unterhalb von 900px in einer Spalte.

TokenWert
layout/margin160 (clamp 16–160)
layout/content1120
layout/gutter24
nav/height72

Content, Icons, Accessibility

  • Sprache: Deutsch, du-Form, Doppelpunkt-Gendern (Endkund:innen). Kurz, konkret, ohne Füllwörter.
  • Icons: monochrom, 24px Raster, 1.5px Strich, ohne Füllung. Keine Farbicons.
  • Kontrast: Alle Textfarben erfüllen WCAG AA auf ihrer Fläche (Sekundärtext #6b6b6b auf Weiß: 5.7:1).
  • Fokus: sichtbarer 2px roter Ring auf allen interaktiven Elementen. Tastaturbedienung für jede Komponente.