v1.1 · Open source · MIT

Your design system,
on an infinite canvas.

Build colors, tokens, and themes visually. Self-host on Railway in one click — your data, your domain, your rules.

Deploy on Railway Deploy on your own

No telemetry No cloud account 90-second setup

Brand · 500

#3B82F6

Variable 1

Select token…

Palette · Hover 9

50900

MIT licensed · 1-click Railway deploy · Zero telemetry · Local auth, your Postgres

01 — Canvas

Drag colors. See the system.

Every color is a node. Connect them, and the children update when the parent moves. No spreadsheets. No re-typing values.

Infinite canvas, pan and zoom like a map.
Parent-child color inheritance, live.
Multi-page projects keep things tidy.

Brand · 500

#3B82F6

Variable 1

color.primary

Hover

#60A5FA

Δ L +12 from parent

02 — Palette generator

11 shades from one color.

Pick a base. We draw the curve. Change the base, every shade follows. Tune lightness, saturation, and hue-shift like you would in any color picker.

50 → 950 named automatically.
Linear, ease, or material curves.
Works in HSL, RGB, OKLCH, HCT.

PALETTE Red

Curve ease-in-out

Lightness

03 — Tokens table

Every token, one table.

Search, rename, group, and export. See light and dark values side-by-side. Tokens with smart rules glow softly so you know they're alive.

Export to CSS, Tailwind, DTCG, or Figma.
Per-theme overrides in one view.
Hide what you don't need yet.

Tokens · 124

CSS Variables

Name Group Light Dark Vis Pri Logic

color.primary Brand #3B82F6 #60A5FA

color.hover Brand #60A5FA #93C5FD

color.success Status #10B981 #34D399

color.danger Status #EF4444 #f87171

color.warning Status #FBBF24 #FCD34D

color.muted Neutral #A3A3A3 #525252

surface.canvas Surface #FFFFFF #0A0A0A

04 — Advanced logic

When this, then that.

Make tokens that think. If the parent gets dark, the hover gets lighter. If it's the dark theme, pick a different swatch. Visual rules — no code.

Rules on any channel: H, S, L, A, R, G, B, OKLCH, HCT.
Conditional token assignments per theme.
Live preview, with errors before you ship.

Advanced Logic · Hover Blue

Channel logic Token assignment

If Brand · 500 Lightness > 50 AND theme = dark

Then Lightness = parent + 12

Live output L72%

05 — AI Build Mode

Describe it. Watch it build.

Tell the AI what you want. It creates the nodes, the shades, the tokens — on your canvas, in front of you. You approve every step.

Bring your own Anthropic, OpenAI, or OpenRouter key.
Keys live on your device. The server never sees them.
Undo any batch with one click.

Build Mode Anthropic · Claude 4.6 Sonnet

Create a red palette with 11 shades and assign it to color.danger.

On it. Here's what I'll add

4 Pending actions

Create Palette Node name: "Red", base: #EF4444

Generate 11 shades curve: ease-in-out, range: 50–950

Create Token name: color.danger

Link token to shade 500 token: color.danger → Red · 500

06 — Themes & export

One canvas. Every theme. Every format.

Light, dark, brand-A, brand-B — same canvas, different lenses. Click export and your tokens drop straight into your code in the shape you want.

CSS Variables · Tailwind · DTCG · Figma.
Pick any color space — HSL, OKLCH, HCT, hex.
One ZIP for multi-page projects.

Themes

Light Dark High contrast

Live preview

surface#0A0A0A

primary#3B82F6

hover#60A5FA

text#F5F5F5

border#262626

CSS Tailwind DTCG Figma

/* dark theme */
:root {
  --surface: oklch(0.18 0 0);
  --primary: oklch(0.62 0.18 256);
  --hover:   oklch(0.72 0.16 256);
  --text:    oklch(0.97 0 0);
}

Every detail, considered.

The small things that turn a tool into a workshop.

Pick your color space

HSL for the familiar. OKLCH for the perceptually smooth. HCT when you live in Material.

HSL RGB OKLCH HCT Hex

Lock & diff inheritance

Lock the hue, follow the lightness. Or save a fixed offset. Children stay smart, automatically.

H217°

S91%

Lparent + 12Δ

Multi-page projects

One page for colors. One for type. One for spacing. Same tokens, no clutter.

Colors Typography Spacing

Command palette

Press ⌘K. Type. Done. Every action is one keystroke away.

Search actions… ⌘K

Create new color node ↵

Coming soon

Spacing tokens too

Same canvas, same superpowers — for spacing, radius, and any numeric scale.

Per-theme visibility

Hide what doesn't apply. Dark-only tokens stay out of the light export, and vice versa.

color.primary

color.hover

color.legacy

color.danger

Self-host

Your data. Your server. Your rules.

One Railway service. One Postgres plugin. One click to deploy. No third-party identity. No usage analytics. No lock-in.

Click. Wait 90 seconds. You're live.

Hit the Deploy button. Railway provisions the app and Postgres, and wires DATABASE_URL for you.

Your Postgres. Your domain. Your auth.

Local sign-in with bcrypt passwords and signed session cookies. The setup wizard turns the first visitor into the admin.

No telemetry. No accounts. No lock-in.

We collect nothing. AI API keys live on your device. The whole thing is MIT — fork it, theme it, ship it.

Deploy on Railway

tokens.yourdomain.com

0colors app

/api · JSON / · React SPA $PORT

Postgres

auto-backups ${{Postgres.DATABASE_URL}}

"healthcheckPath": "/api/health" · "restartPolicyType": "ON_FAILURE"

Export

Tokens, ready for your codebase.

Same source of truth, four output formats. Copy. Paste. Ship.

/* 0colors export · dark theme */
:root {
  --surface:        oklch(0.18 0 0);
  --surface-panel:  oklch(0.21 0 0);
  --text:           oklch(0.97 0 0);
  --text-secondary: oklch(0.74 0 0);
  --border:         oklch(0.27 0 0);
  --primary:        oklch(0.62 0.18 256);
  --primary-hover:  oklch(0.72 0.16 256);
  --success:        oklch(0.71 0.16 158);
  --danger:         oklch(0.64 0.22 25);
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        surface:  'var(--surface)',
        primary:  'var(--primary)',
        success:  'var(--success)',
        danger:   'var(--danger)',
      },
    },
  },
}

// tokens.json · DTCG
{
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#3B82F6"
    },
    "hover": {
      "$type": "color",
      "$value": "#60A5FA"
    }
  }
}

// figma-variables.json
{
  "variableCollection": "0colors",
  "modes": ["Light", "Dark"],
  "variables": [
    { "name": "color/primary",
      "resolvedValuesByMode": {
        "Light": "#2563EB",
        "Dark":  "#3B82F6"
      } }
  ]
}

Start with your colors. End with a design system.

Free, open source, runs on your Railway in 90 seconds.

Deploy on Railway View on GitHub

Your design system, on an infinite canvas.