Styleguide
Das System auf einen Blick
Alle Tokens und Bausteine an einem Ort. Wer gestaltet oder erweitert, findet hier die Bauteile — und wie sie zusammenpassen.
Farben
Monochrom + ein Signal
Gelb erscheint nur an interaktiven Stellen. Der Rest ist eine ruhige Grauskala.
Accent#ffd400
Accent-strong#ecc200
Text#171716
Text-2#54544e
Text-3#70706a
BG#ececeb
Surface#ffffff
Surface-2#f7f7f6
Typografie
Die Skala
Headlines in Lexend, Fließtext in einer klassischen Serif. Die ganze Skala mit Anwendungsbeispielen liegt auf der Typografie-Seite.
H1 · --text-h1
The quick brown fox
H2 · --text-h2
The quick brown fox
H3 · --text-h3
The quick brown fox
Body · --text-body
The quick brown fox jumps over the lazy dog. Fließtext läuft in einer gut lesbaren Serif und ist auf rund 66 Zeichen begrenzt.
Abstände
8er-Raster als Tokens
Alle Abstände laufen über --space-* (in rem).
Keine rohen Pixelwerte für Rhythmus.
--space-88px--space-1616px--space-2424px--space-3232px--space-4848px--space-6464px--space-9696pxButtons
Primär & sekundär
Hover invertiert Gelb ↔ Schwarz.
Layout
Spalten
.cols--250 / 50
.cols--250 / 50
.cols--307030 / 70 — z. B. Bild + Text
.cols--4.cols--4.cols--4.cols--4Baustein
Feature-Grid mit Icons
Icon + Titel
Kurzer Text pro Block. Responsiv 1 → 2 → 3 Spalten.
Monochrom
Icons erben die Textfarbe (currentColor), kein Icon-Font.
Badge
Dezentes Feld in Surface-2, damit das Icon Halt bekommt.
Bausteine
Zahlen, Schritte, Zitat
0
Abhängigkeiten
1
CSS-Datei
8
Raster-Basis
01
Schritt
Nummer mit gelber Signatur-Linie.
02
Schritt
Responsiv, gleiche Klassenlogik.
03
Schritt
Ohne JavaScript nutzbar.
„Ein Baustein, viele Seiten — und alles bleibt konsistent.“
Bausteine
FAQ & Prompt
Native Aufklapp-Frage
Nutzt
<details> — funktioniert ganz ohne JavaScript.Zweite Frage
Antworttext auf Lesebreite.
„Beispiel-Prompt an Kitty — mit gelber linker Kante als Signatur.“
Baustein
Hero-Slider
Signatur-Komponente: Bild, Titel, Text und Button pro Folie. Dots und Pfeile kommen automatisch.
Baustein