Design System
Tokens, Typographie, Farben und Komponenten. Änderungen hier wirken sich auf die gesamte Site aus.
Farbpalette
sand
#F8FAFC
Primary Text
orange
#FF5A1E
Signal Accent
rust
#CC5833
Blog / Secondary
navy
#09121B
Primary BG
teal
#0A1C20
Alt BG
ink
#0B1D22
Card Surface
Opacity-Skala (auf sand)
Aa
/20
Aa
/30
Aa
/40
Aa
/50
Aa
/62
Aa
/80
Aa
/85
Aa
full
Type Scale
text-display-xl — clamp(3rem, 6.5vw, 7rem) · Case Study Hero
Display XL
text-display — clamp(2.5rem, 7vw, 6.5rem) · Page H1
Display
text-h1 — clamp(2.5rem, 5.5vw, 4.5rem) · Artikel / Layout H1
Heading 1
text-h2 — clamp(2rem, 4.5vw, 3.5rem) · Section H2
Heading 2
text-h2-sm — clamp(1.7rem, 3vw, 2.5rem) · Prose H2, CTA
Heading 2 Small
text-h3 — clamp(1.3rem, 2vw, 1.6rem) · Card Heading
Heading 3 / Card Title
text-quote — clamp(1.2rem, 2vw, 1.5rem) · Answer Capsule, Blockquotes
„Strategische Klarheit entsteht nicht durch mehr Daten, sondern durch bessere Fragen."
text-body-lg — clamp(1.1rem, 1.5vw, 1.25rem) · Lead Paragraph
Wer Marke, Technologie und Prozesse nicht als System denkt, optimiert an den falschen Stellen.
text-eyebrow — 0.6875rem (11px) · Section Labels
Projektstudie
text-eyebrow-sm — 0.625rem (10px) · Meta / Tags
März 2026 · Dirk Koppert
Font Families
font-sans
Thin 200
Light 300
Regular 400
Medium 500
Semibold 600
Plus Jakarta Sans
font-drama
Thin Italic
Light Italic
Regular Italic
Plus Jakarta Sans Italic
font-mono
Regular 400
Medium 500
Eyebrow Label
Meta Label
IBM Plex Mono
UI Elemente
Answer Capsule
„KI verändert Marketing nicht, weil sie schneller denkt als Menschen, sondern weil sie strukturlose Prozesse schonungslos sichtbar macht."
Section CTA (Blog)
In 30 Minuten analysieren wir gemeinsam,
welche Architektur zu Ihren Anforderungen passt.
Tags / Pills
Fließtext-Stile
.prose-blog
Abschnitt-Überschrift
Unterabschnitt
So sieht der Fließtext in Blog-Artikeln aus. Gewicht 300, Farbe rgba(248,250,252,0.62), Zeilenabstand 1.78.
- Erster Listenpunkt mit Dash-Marker
- Zweiter Listenpunkt
Ein Zitat im Blockquote-Style
Fett hervorgehobener Text neben normalem Text. Auch Links sehen so aus.
.prose-referenz
Case Study Abschnitt
Methode
Fließtext in Case Studies nutzt denselben Prose-Base-Stil mit accent-farbigen Markierungen.
- Ergebnis mit Accent-Marker
- Weiteres Ergebnis
Zitat mit Accent-Farbe als Border
Starke Aussage im Kontext des Case Studies.
Border Radius
rounded-xl
0.75rem
rounded-2xl
1rem
rounded-3xl
1.5rem
rounded-4xl
2rem
rounded-5xl
3rem
rounded-full
9999px