Design Operating System

Unser Designsystem

Die visuellen Grundlagen, die all unsere Projekte einheitlich machen. Tokens, Paletten, Typografie, Abstände — offen und dokumentiert.

Farbpalette

Primary — Terrakotta
--primary: 16 71% 42%

DIE Aktionsfarbe: CTAs, Links. 5,3:1 auf Weiß

Accent — Navy
--accent: 214 52% 25%

Überschriften, Struktur. 11,3:1 auf Weiß

Tiefes Navy
--navy-deep: 213 56% 17%

Hintergründe von Bannern und Footer

Leuchtendes Gold
--gold-bright: 41 88% 62%

Zahlen ausschließlich auf Navy-Hintergrund

Text
--foreground: 215 28% 17%

Fließtext. 14,7:1 auf Weiß

Sekundärtext
--muted-foreground: 215 14% 40%

Hinweise, Bildunterschriften. 6,0:1 auf Weiß

Rosa
--rose: 14 62% 40%

Erweiterte Palette, auf die Farbskala abgestimmt

Violett
--violet: 214 52% 32%

Erweiterte Palette, auf die Farbskala abgestimmt

Cyan
--cyan: 205 48% 33%

Erweiterte Palette, auf die Farbskala abgestimmt

Gold
--gold: 40 90% 30%

Bewertungen, Auszeichnungen. ≥ 4,5:1 auf Weiß

Indigo
--indigo: 213 56% 25%

Erweiterte Palette, auf die Farbskala abgestimmt

Destructive
--destructive: 0 72% 42%

Fehler, Löschen

Typografie

Display — Outfit Variable

Typografische Eleganz aus Lyon

Überschriften, CTAs, Akzente. 100–900.

Body — Plus Jakarta Sans Variable

Optimale Lesbarkeit für lange Absätze, mit sorgfältigem redaktionellem Rhythmus.

Fließtext, Navigation, Beschriftungen. 200–800.

ElementGröße (fluid)ZeilenhöheVerwendung
h1clamp(2.125rem, 1.35rem + 3.3vw, 4.25rem)1.06Seitentitel, erster Bildschirm
h2clamp(1.625rem, 1.2rem + 1.8vw, 2.75rem)1.14Abschnittstitel
h3clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem)1.25Untertitel, Karte
h41.125rem1.35Zwischenüberschrift
h5, h61rem1.4Kleinere Überschriften
body1rem1.65Fließtext (Plus Jakarta Sans)
text-sm0.875rem1.25remSekundärer Text, Hinweise
text-xs0.75rem1remMetadaten, Badges, Bildunterschriften

Abstände (Tailwind-Skala)

0.52px
14px
28px
312px
416px
624px
832px
1248px
1664px
2496px

Schatten

shadow-e1

Kaum wahrnehmbare Linie — Felder, Chips

shadow-e2

Karten im Ruhezustand

shadow-e3

Karten beim Überfahren, schwebende Buttons

shadow-e4

Dialoge, Panels

Eigene CSS-Utilities

.glass

Weiße Karte, feine Linie, weicher Schatten — Karten, Felder

.glass-strong

Gleiche Fläche, stärkerer Schatten — Dialoge, Kopfbereiche

.glass-premium

Hervorgehobene Fläche — erster Bildschirm, Portfolio

.surface-sunken

Abwechselnder kühlgrauer Abschnitt, Ränder über 40 px ausgeblendet

.section-y

Vertikaler Abschnittsrhythmus (--section-y)

.measure

Zeilenlänge auf 68 Zeichen begrenzt

.text-gradient-warm

Terrakotta-Fläche auf einem Titelwort

.text-gradient-cool

Navy-Fläche auf einem Titelwort

.cta-gradient

Terrakotta-Fläche + Beschriftung in --primary-foreground

.section-divider

1-px-Linie, an beiden Enden ausgeblendet

.card-img-frame

Bildrahmen 16/10, kein CLS, Zoom beim Überfahren

.spot-card

Schimmer und Kontur, die dem Cursor folgen

.btn-glow-fill

Gefüllter Button: Glanz + Terrakotta-Halo beim Überfahren

.btn-glow-ring

Kontur-Button: leuchtende Kontur beim Überfahren

.link-grow

Unterstreichung, die sich von links ausdehnt

.skip-link

Sprunglink, bei Fokus sichtbar

Komponentenvorschau

Buttons

Badges

PrimarySuccessWarningError

Verläufe

Kayzen Premium

Modernes Engineering

Glass Strong

Beispielkarte mit der Klasse .glass-strong.

Ein wiederverwendbares Designsystem

Ihre Projekte profitieren von diesem bewährten Designsystem. Visuelle Konsistenz, Barrierefreiheit und Performance sind von Grund auf gewährleistet.

Tech-Stack ansehenÄnderungsprotokollProjekt starten