Token-Playground

Bau im Browser ein Token-Set für das Theme Leitvia: Farben, Schriften, Größen, Abstände und Ecken, geprüft nach WCAG 2.2 AA, während du tippst. Du nimmst es als Datei für Leitvia Studio und als Stilvariante des Themes mit.

Kostenlos und ohne Konto. Starte mit deinem Logo, das dein Browser liest und nicht hochlädt, oder mit der Adresse einer Website. Deine Eingaben gehen nur an unseren Server, damit er Vorschau und Download bauen kann; gespeichert wird nichts, und der Playground setzt keine Cookies. Probier das Set in WordPress Playground mit dem aktuellen Theme und Studio aus. Mit einem bezahlten Tarif speicherst du das Set als Designsystem mit Versionen für dein Team.

Mit deiner Marke starten

Optional: Übernimm die Farben aus deinem Logo oder von deiner Website. Beides zählt Farben auf einfache Weise, ohne KI, und passt sie an, bis die Kontrastpaare erfüllt sind. Prüfe das Ergebnis, bevor du es herunterlädst.

Farben

Elf Rollen, jede mit einer Aufgabe im Theme. Gib eine Farbe als #1a2b3c ein oder wähle eine aus.

SurfacePage background and default section background.

Surface alternateTinted background for alternating sections, cards and bands.

InkBody text, headings and primary buttons; also the background of dark bands, with surface as text color.

Ink mutedSecondary text: lead paragraphs, captions, meta lines, dates.

AccentLinks, eyebrows, hover states and at most one accent band per page. Primary buttons are ink; they take accent only on ink and inverse bands.

On accentText and icons on accent backgrounds only.

StrokeRules, borders and dividers; also eyebrow text on ink bands.

FocusKeyboard focus outline. Never use for decoration.

SuccessText and icons for positive status messages (Success group style).

WarningText and icons for cautionary status messages (Warning group style).

DangerText and icons for errors and destructive actions.

Typografie

Nur Schriften, die mit dem Theme oder mit Leitvia Studio kommen und von dieser Website ausgeliefert werden. Es wird kein Schriftdienst angefragt.

Schrift für Body

Schrift für Heading

Schrift für Mono

Schrift für UI

Größe für Meta in rem

Größe für Body in rem

Größe für Lead in rem

Größe für Heading small in rem

Größe für Heading medium in rem

Größe für Heading large in rem

Größe für Display in rem

Abstände und Ecken

Abstandsskala1 behält die Abstände des Themes bei, 1.25 macht jeden Abstand um ein Viertel größer.

Radius Small in remButtons, form fields and small controls.

Radius Medium in remImage corners inside cards, rarely.

Radius Large in remLarge media frames; use sparingly.

Kontrastprüfung

Die Paare des Theme-Contracts nach WCAG 2.2 AA: 4.5:1 für Text, 3:1 für großen Text, Bedienelemente und den Fokusindikator. Der Fokusrahmen ist doppelt, auf Akzent und Tinte darf jeder der beiden Ringe den Kontrast tragen.

Alle 16 erforderlichen Farbpaare erfüllen WCAG 2.2 AA. Download, Speichern und Playground sind freigeschaltet.

Farbpaar	Verwendet für	Benötigt	Verhältnis	Ergebnis
Ink / Surface	Text	4.5:1	15.81:1	Erfüllt
Ink / Surface alternate	Text	4.5:1	14.36:1	Erfüllt
Ink muted / Surface	Text	4.5:1	7.13:1	Erfüllt
Ink muted / Surface alternate	Text	4.5:1	6.48:1	Erfüllt
Accent / Surface	Text	4.5:1	6.82:1	Erfüllt
Accent / Surface alternate	Text	4.5:1	6.20:1	Erfüllt
On accent / Accent	Text	4.5:1	7.49:1	Erfüllt
Focus / Surface	den Fokusindikator	3:1	6.10:1	Erfüllt
Focus / Surface alternate	den Fokusindikator	3:1	5.54:1	Erfüllt
Focus / Accent	den Fokusindikator	3:1	1.11:1	Erfüllt
Focus / Ink	den Fokusindikator	3:1	2.59:1	Erfüllt
Stroke / Ink	Text	4.5:1	10.25:1	Erfüllt
Stroke / Surface	Rahmen	1.3:1	1.54:1	Erfüllt
Success / Surface	Text	4.5:1	5.83:1	Erfüllt
Warning / Surface	Text	4.5:1	6.49:1	Erfüllt
Danger / Surface	Text	4.5:1	6.72:1	Erfüllt

Vorschau

Einige Patterns und Komponenten des Themes mit deinen Token, geladen von dieser Website. Die Vorschau ist ein Bild fürs Auge, die Kontrastprüfung oben sagt dasselbe in Worten.

Nimm deine Token mit

Das Paket enthält die Token-Datei für Leitvia Studio (DTCG) und dasselbe Set als Stilvariante des Themes (theme.json). Ohne Konto bekommst du genau dieses eine Token-Set, bei uns wird nichts gespeichert.

Alle Patterns in WordPress Playground

WordPress Playground startet ein vollständiges WordPress in deinem Browser mit Leitvia, Leitvia Studio und deinen Token und öffnet eine Seite mit allen Patterns. Stell in der Editor-Vorschau die Breite um, um Smartphone, Tablet und Desktop zu sehen. Playground lädt von playground.wordpress.net, einem Dienst des WordPress-Projekts, und installiert Theme und Plugin aus ihren Releases auf GitHub: Wenn du es öffnest, verbindet sich dein Browser mit diesen Hosts, und sie erhalten deine IP-Adresse. Deine Token stecken im Link. Vor deinem Klick wird nichts geladen.

In WordPress Playground öffnen (neuer Tab)

Als Designsystem speichern

Mit einem bezahlten Tarif speicherst du Token-Sets als Designsysteme mit Versionen für dein Team. Zum Speichern anmelden