Theme & Design System

A design system your editors can actually use.

Design tokens and a theme system keep every page consistent - developers define the system, editors work inside it.

Start free - no credit card Read the docs

Build your first branded client site in the trial.

Theme

tokens.css

ColorsTypographySpacing

--primary

oklch(62% .41 257)

--secondary

oklch(92% .01 257)

--accent

oklch(96% .02 257)

--destructive

oklch(58% .22 20)

Live Preview

ButtonOutlineBadge

Synced across all pages

Style once, reuse everywhere

Reusable design tokens

Define reusable design tokens (colors, fonts, borders, spacing) for consistent styling across the site.

One source of truth

Set spacing, color, and type as tokens once; every page draws from the same system. Built on pure Tailwind CSS, so themes can be imported as CSS.

Theme system

Re-skin without a rebuild

The theme system makes presentation themeable across the whole site. Changing the look means changing the theme - not rebuilding pages one by one.

Indigo

Amber

For developers

You define the system

Encode it once

Build your design system with tokens and themes, then reuse it across projects.

Extend where needed

Add custom blocks and custom panels for presentation the built-ins don't cover.

Editor

AdminEditorViewer

Theme settingsAdmin only

Page contentAll editors

Design tokensAdmin only

For editors

Editors stay on-brand by default

Guardrails built in

Editors work visually inside the design system, with RBAC controlling who can change what.

AI helps with theming too

The in-builder AI assistant can adjust theme and styling on request - no CSS.

Reuse across projects

One system, many sites

Encode a design system once and re-skin it per project instead of rebuilding. For agencies, that means consistent quality and compressed delivery time on every client site.

For agencies

The core difference

Low-code, not no-code

Developers build it. Editors run it.

For developers

A plugin in your Next.js app

Override pages and routing. Plug in your own Payload collections. Extend the builder with custom blocks and panels. Anything the visual builder can't do, you build — by design, not as a workaround.

Override pages & routing — the builder lives inside your app
Plug in your own Payload collections — your schema, your types
Extend with custom blocks — register your own React components
Escape hatches everywhere — if the visual tool can't do it, code it

For editors

RBAC-based visual editing

Build and publish pages with no code. Role-based access control keeps the right people editing the right things — no developer bottleneck, no risky changes.

Drag, drop, and publish — the full page-building workflow
Role-based access control — granular permissions per user
Live preview — see exactly what your audience sees
No developer bottleneck — editors ship independently

One tool. Two audiences. Zero compromise.

Start building today.

Deploy the starter in minutes. No credit card, no email. When you're ready, pick a plan that fits.

The Visual Website Builder

You Actually Own. React + Next.js, low-code, self-hosted. Your data, your infrastructure, every feature included.