Create a design system

Pick a brand color and a vibe — the palette is auto-derived to pass WCAG by construction. Every step previews live. Prefer to edit tokens directly? Open the freeform editor.

Identity

Nameid: untitledCategoryTagscomma-separated

Vibe

Two sliders set sensible defaults you can refine later.

SeriousPlayful

DenseAiry

Live preview updates as you choose

Color

brand.primary

oklch(0.5403 0.1841 278.28)

brand.secondary

oklch(0.5403 0.1289 313.28)

brand.onBrand

oklch(0.99 0 278.28)

text.primary

oklch(0.25 0.02 278.28)

text.muted

oklch(0.5 0.02 278.28)

text.link

oklch(0.5403 0.1841 278.28)

surface.base

oklch(0.99 0.006 278.28)

surface.raised

oklch(0.975 0.008 278.28)

border.default

oklch(0.92 0.01 278.28)

state.success

oklch(0.534 0.15 150)

state.danger

oklch(0.55 0.2 25)

state.warning

oklch(0.556 0.16 75)

state.info

oklch(0.542 0.13 245)

Typography

3xlThe quick brown fox

2xlThe quick brown fox

xlThe quick brown fox

lgThe quick brown fox

baseThe quick brown fox

smThe quick brown fox

Components

Buttons

Inputs

Fintech

Selection

Notifications

AutoManual

Feedback

successdangerwarninginfo

Tokens validatedAll contrast checks pass WCAG AA.

Data

AMRKJD+5

2,847+12%

Storage64%

Navigation

OverviewTokensActivity

Home/Library/Item

123

Cards

Confetti

A bright, joyful design language with playful motion.

Pro

$12/ mo

Unlimited exports

Private systems

Priority support

Aria Moss

Owner

success

Ravi Kohli

Editor

info

Lena Park

Viewer

warning

Radius, shadow & spacing

full