Kitty · Design-System

Tokens & Komponenten

Ein lebender Prüfstand: Er rendert die echten Komponenten aus styles.css — was du hier siehst, ist das, was ausgeliefert wird. Stell oben eine Marke ein und beurteile Farben und Hover-Zustände in Hell und Dunkel.

Prüfstand

Marke live einstellen

Alles unten leitet sich aus diesen Werten ab. Texte auf den drei Markenflächen und Markenfarbe als Linktext sind bewusste Kontrast-Entscheidungen. Die Anzeigen geben dafür eine direkte Orientierung, ersetzen aber keinen vollständigen Accessibility-Test.

Links, Primary-Button, Quelle aller Tönungen
Secondary-Button
Störer, Emphasis, Icons
Label auf gefüllten Brand-1-Flächen
Label auf gefüllten Brand-2-Flächen
Label auf gefüllten Complementary-Flächen
Markenstich in „grauen" Flächen
Section-Tint, Pill-BG, Quote
Subtile Drehung Richtung Complementary
Text auf Brand 1: – Text auf Brand 2: – Text auf Complementary: – Live-Regler brauchen JavaScript; die Defaults siehst du trotzdem.

Komponenten

Hell & Dunkel nebeneinander

Dieselben Komponenten, links im Light-, rechts im Dark-Schema. Nutze Maus oder Tastatur, um Hover- und Fokuszustände zu beurteilen.

Light-Schema
Buttons — Hierarchie
Primary Secondary Ghost
Formen · Größen · Icons
Pill-Form Klein Groß Mit Icon
Pills / Badges
Neutral Brand weich Solid Störer Outline
Fließtext & Link

Ein Absatz mit einem markierten Link zum Testen des Hover-Highlights.

Card

Kartentitel

Kurzer Beschreibungstext auf angehobener Fläche.

Mehr
Formularfeld (Fokus prüfen)
Signaturen

Overline

01
Ein kurzes Zitat als Signatur-Baustein.
— Quelle
Dark-Schema
Buttons — Hierarchie
Primary Secondary Ghost
Formen · Größen · Icons
Pill-Form Klein Groß Mit Icon
Pills / Badges
Neutral Brand weich Solid Störer Outline
Fließtext & Link

Ein Absatz mit einem markierten Link zum Testen des Hover-Highlights.

Card

Kartentitel

Kurzer Beschreibungstext auf angehobener Fläche.

Mehr
Formularfeld (Fokus prüfen)
Signaturen

Overline

01
Ein kurzes Zitat als Signatur-Baustein.
— Quelle

Kontext

Immer-dunkles Band (.section--dark)

Ein fest dunkles Band (CTA, Footer) — unabhängig vom Theme. Solide/Störer-Pills und Primary/Secondary poppen; Ghost und neutrale Pills schalten auf helle Kanten.

Primary Secondary Ghost
Neutral Brand weich Solid Störer Outline

Token-Referenz

Farben

Jedes Feld zeigt den echten Token als Fläche — die Swatches laufen mit den Reglern oben mit.

Marken-Identität

Brand--color-brand
Brand 2--color-brand-2
Complementary--color-brand-complement
Brand strong--color-brand-strong
Brand hover--color-brand-hover
Brand 2 hover--color-brand-2-hover

Neutrale Flächen

Surface--color-surface
Surface dim--color-surface-dim
Surface tint--color-surface-tint
Container--color-surface-container
Inset--color-surface-inset

Farbige Flächen

Surface Brand--color-surface-brand
Surface Brand 2--color-surface-brand-2
Surface Complement--color-surface-complement

Outlines

Outline--color-outline
Outline strong--color-outline-strong
Focus--color-focus-outline · --shadow-focus

Text-Hierarchie (Alpha)

--color-text-primaryPrimary Aa
--color-text-secondarySecondary Aa
--color-text-tertiaryTertiary Aa
--color-text-disabledDisabled Aa
--color-brand-inkBrand-Ink Aa

Token-Referenz

Typografie, Abstände, Radien

Schriftrollen

Familie und Größe sind getrennte Achsen. Semantische Textstile kombinieren jeweils eine Rolle mit einer Stufe.

--font-headingHeading · Lexend
--font-bodyBody · Lesetext
--font-displayDisplay · Button-Label
--font-uiUI · Navigation und funktionale Labels
--font-monoMono · --color-brand

Heading-Skala

--text-logokitty.
--text-h1The quick brown fox
--text-h2The quick brown fox jumps
--text-h3The quick brown fox jumps over
--text-h4The quick brown fox jumps over the lazy dog
--text-h5The quick brown fox jumps over the lazy dog

Gemeinsame Textgrößen

Small und Tiny folgen der fluiden Base mit eigenen Abständen. Bei 20px Base ergeben sich 16px und 14px; Mindestwerte sichern kleinere Viewports ab.

--text-baseBase · dominanter Fließtext
--text-smallSmall · Labels und kurze UI-Texte
--text-tinyTiny · --technical-value

Abstands-Skala (8er-Raster)

--space-8
--space-16
--space-24
--space-32
--space-48
--space-64
--space-96

Radius-Skala

--radius-4
--radius-8
--radius-12
--radius-16
--radius-24
--radius-full
--radius-small8px · kompakte und verschachtelte Elemente
--radius-control16px · Buttons und Formfelder
--radius-container16px · Cards, Icon-Boxen und Swatches
--radius-large24px · große Panels, Medien und Modals