Six modules around the fluid core

Addons

Fluid is the framework. These six addons are optional. Use the ones you need, ignore the rest.

Colors

OKLCH-based color system. Three hues, sixteen variants per color, automatic opacity and brightness modifiers.

Explore →

Gradients

Emmet-style syntax. Linear, radial, animated. from-brand to-accent d-r — that's the API.

Explore →

Grids

Three paradigms: auto-fit for cards, classic 12-col for layouts, fraction notation for precise control.

Explore →

Flex

Two axes, three keywords. flex y, flex x, center, space. Done.

Explore →
A a

Fonts

Fluid typography with three intensity modifiers. Type that flows from mobile to desktop without media queries.

Explore →

Sizes

One number, four flavors. Padding, margin, gap, width, height — all on the same fluid scale.

Explore →

Tools

Two interactive helpers to generate themes and explore variables.

Auto Theme

Drop an image, get an OKLCH theme. Brand, accent, extra extracted automatically.

Open in Playground →

JS Calculator

Configure your scale, see every generated variable and class. Live preview, no install.

Open in Playground →
For your AI assistant

All addons. One markdown file.

Every variable, every modifier, every formula across all six addons. /llms.txt condenses it for direct AI consumption.

Open /llms.txt →