Token playground

Build a token set for the Leitvia theme in your browser: colors, fonts, sizes, spacing and corners, checked against WCAG 2.2 AA while you type. Take it with you as a file for Leitvia Studio and as a style variation of the theme.

Free and without an account. Start from your logo, which is read in your browser and not uploaded, or from the address of a website. Your entries go to our server only to build the preview and the download; nothing is stored, and the playground sets no cookies. Try the set in WordPress Playground with the current theme and Studio. With a paid plan you can save the set as a design system with versions for your team.

Start from your brand

Optional: take the colors from your logo or from your website. Both count colors in a simple way, without AI, and adjust them until the contrast pairs pass. Check the result before you download.

Colors

Eleven roles, each with a job in the theme. Enter a color as #1a2b3c or pick one.

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.

Typography

Only fonts that come with the theme or with Leitvia Studio, served from this site; no font service is asked.

Body font

Heading font

Mono font

UI font

Meta size in rem

Body size in rem

Lead size in rem

Heading small size in rem

Heading medium size in rem

Heading large size in rem

Display size in rem

Spacing and corners

Spacing scale1 keeps the spacing of the theme; 1.25 makes every gap a quarter larger.

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.

Contrast check

The pairs of the theme contract after WCAG 2.2 AA: 4.5:1 for text, 3:1 for large text, controls and the focus indicator. The focus ring is double; on accent and ink either ring may carry the contrast.

All 16 required color pairs pass WCAG 2.2 AA. Download, saving and Playground are open.

Color pair	Used for	Needs	Ratio	Result
Ink / Surface	text	4.5:1	15.81:1	Passes
Ink / Surface alternate	text	4.5:1	14.36:1	Passes
Ink muted / Surface	text	4.5:1	7.13:1	Passes
Ink muted / Surface alternate	text	4.5:1	6.48:1	Passes
Accent / Surface	text	4.5:1	6.82:1	Passes
Accent / Surface alternate	text	4.5:1	6.20:1	Passes
On accent / Accent	text	4.5:1	7.49:1	Passes
Focus / Surface	the focus indicator	3:1	6.10:1	Passes
Focus / Surface alternate	the focus indicator	3:1	5.54:1	Passes
Focus / Accent	the focus indicator	3:1	1.11:1	Passes
Focus / Ink	the focus indicator	3:1	2.59:1	Passes
Stroke / Ink	text	4.5:1	10.25:1	Passes
Stroke / Surface	borders	1.3:1	1.54:1	Passes
Success / Surface	text	4.5:1	5.83:1	Passes
Warning / Surface	text	4.5:1	6.49:1	Passes
Danger / Surface	text	4.5:1	6.72:1	Passes

Preview

A few patterns and components of the theme with your tokens, loaded from this site. The preview is a picture for the eyes; the contrast check above says the same in words.

Take your tokens with you

The package holds the token file for Leitvia Studio (DTCG) and the same set as a style variation of the theme (theme.json). Without an account you get exactly this one token set; nothing is kept on our side.

Every pattern in WordPress Playground

WordPress Playground runs a complete WordPress in your browser with Leitvia, Leitvia Studio and your tokens, and opens a page with every pattern; switch the width in the editor preview to see phone, tablet and desktop. Playground loads from playground.wordpress.net, a service of the WordPress project, and installs theme and plugin from their releases on GitHub: when you open it, your browser connects to these hosts and they receive your IP address. Your tokens travel in the link. Nothing is loaded before you click.

Open in WordPress Playground (new tab)

Save as a design system

With a paid plan you save token sets as design systems with versions for your team. Log in to save