Ein klarer Workflow.
Wiederverwendbarer Inhalt mit einer klaren visuellen Hierarchie.
Themen entdecken
← Zur Startseite
We.Rock.Design.System / V1
Oxygen-native Grundlagen
Klar gestaltet.
Einfach weiterbauen.
Tokens, editierbare Klassen und wiederverwendbare Komponenten. Diese Seite zeigt das WRD-System in beiden Farbmodi.
Farben & Oberflächen
Alle neutralen Farben folgen semantischen Tokens. Akzentfarben bleiben in beiden Modi konstant.
Surface
Primärer Text
Sekundärer Text · Border
Surface Alt
Starke Begrenzung
WRD Orange
wrd-color-accent
Akzent 1
wrd-color-accent-alt-1
Akzent 2
wrd-color-accent-alt-2
Akzent 3
wrd-color-accent-alt-3
Akzent 4
wrd-color-accent-alt-4
Typografie
Display / Oswald
Seitentitel
Abschnittstitel
Kartentitel
Kleiner Titel
Großer Einleitungstext
Einleitung
Fließtext – verständlich erklärt und ohne unnötige Umwege.
Kleiner Fließtext
Eyebrow / Orientierung
Wir rocken digital.
Native Komponenten
Auch lange Inhalte bleiben lesbar.
Ein längerer Beispieltext prüft, ob Karten wachsen dürfen, ohne feste Höhen oder versteckte Inhalte. Darstellung und Inhalt bleiben unabhängig voneinander editierbar.
Themen entdeckenSection S · 1200 px Inhaltsbreite · responsiver Seitenabstand
Section M · alle Schriftgrößen fluid mit clamp()
Section L · Raum ohne zusätzliche Styling-Wrapper
Responsive Hero
Struktur mit Spielraum.
Auf kleinen Hochformat-Displays stehen Text und Bild untereinander. Die Höhe bleibt flexibel, damit lange Inhalte nicht abgeschnitten werden.
We rock!
Kontrast und Farbrollen
Markenorange wird in beiden Themes auch für Akzenttexte verwendet. Kleine orange Texte erreichen auf hellen Flächen nicht durchgehend 4,5:1. Prüfe Hover und Tastaturfokus in beiden Themes.