Style guide

Theme 1

One design language. Every block.
Switch themes to explore the colors, type, and details that hold it together.

Color palette

Click a swatch to copy its CSS variable.

Real theme fonts, shown at their actual sizes.

Aa Bb Cc Dd Ee Ff Gg

Thoughtful details make every interaction feel natural. Clear, confident, and easy to read.

Display / 44px

Made for what’s next.

Heading / 32px

Everything in its place.

Subheading / 24px

Small details. Lasting impression.

Body / 16px

A clear path from the first impression to the next step.

Label / 12px

Details worth noticing.

The same markup, styled by global tokens.

Interactive gradient

Unavailable action

Click to preview the X.

Email address

A text linkA quiet label

A shared rhythm across every theme.

--space-14px

--space-28px

--space-312px

--space-416px

--space-624px

--space-832px

Corner radius
--radius: 8px

Global CSS owns the identity. Blocks only consume it.

For Themes 4 and 5, copy the fonts folder alongside tokens.css. Fonts are self-hosted and load only when used. Keep the included font licenses.