Wana playground

Proposal

Colors

Semantic color roles. Each swatch shows hex, OKLCH, and WCAG contrast against the page background.

Light

Dark

Typography

A fluid clamp()-based type scale with a 65ch measure for comfortable reading.

Sans

The quick brown fox jumps

--font-sans
Serif

The quick brown fox jumps

--font-serif
Mono

The quick brown fox jumps

--font-mono

Measure / line length (65ch)

Typography is the craft of arranging type to make written language legible, readable, and appealing. A comfortable measure keeps lines between roughly 45 and 75 characters so the eye can return to the start of the next line without losing its place. This paragraph is capped at --measure (65ch) to demonstrate the ideal reading width.

Spacing

A modular spacing scale, from --space-2xs to --space-2xl, stacked for visual comparison.

Components

Live preview — every component uses only CSS custom properties, so they update the instant you edit a token.

Buttons

Cards

A basic card. Surfaces sit just above the page background using --surface.

Card with header

New

Header uses the overlay token for separation, with a body below.

Card with image

The placeholder above scales with the card width.

Form inputs

Choices

Badges / Tags

Alerts

Success — your changes have been saved.
Warning — this action cannot be undone.
Error — something went wrong.
Info — a new proposal is available.

Navigation

Code block

:root {
  --accent: oklch(47.5% 0.199 286.2);
  --radius: 0.5rem;
}

.btn-primary {
  background: var(--accent);
  border-radius: var(--radius);
}

Typography in context

The Art of Reading on Screens

Good typography is invisible. When a reader glides through a paragraph without friction, the type is doing its job. This article previews how headings, body text, lists, links, and quotes render with the current tokens.

Why measure matters

Lines that run too long tire the eye; lines too short break rhythm. Aim for a measure of 45–75 characters per line.

  • Comfortable line height
  • Generous paragraph spacing
  • Restrained, purposeful color
Typography is what language looks like.— Ellen Lupton

Ordered priorities

  1. Readability first
  2. Hierarchy second
  3. Personality third

Inline code uses the mono stack, while emphasis like this and this stays in the body font.

Token Editor

Edit the light palette live. Changes apply instantly to the whole page. Toggle the theme to edit the other palette.

Color roles

Editing: accent

Contrast checker

Aa
—

Import / Export

Export the current tokens in multiple formats, or import a saved set.

Import