Submit a Design System

Paste your tokens (or import shadcn CSS variables), preview it live, and publish a downloadable design.md. You'll need to be signed in.

Title *

Tagline

Design brief

Markdown. Principles, when to use it — this goes into the design.md you hand to the AI.

Style

Mood

Frameworks

Design tokens (JSON) *

{
  "color": {
    "light": {
      "background": "#ffffff",
      "foreground": "#0a0a0a",
      "card": "#ffffff",
      "cardForeground": "#0a0a0a",
      "popover": "#ffffff",
      "popoverForeground": "#0a0a0a",
      "primary": "#6366f1",
      "primaryForeground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondaryForeground": "#18181b",
      "muted": "#f4f4f5",
      "mutedForeground": "#71717a",
      "accent": "#eef2ff",
      "accentForeground": "#3730a3",
      "destructive": "#ef4444",
      "border": "#e4e4e7",
      "input": "#e4e4e7",
      "ring": "#6366f1"
    },
    "dark": {
      "background": "#0a0a0f",
      "foreground": "#fafafa",
      "card": "#16161d",
      "cardForeground": "#fafafa",
      "popover": "#16161d",
      "popoverForeground": "#fafafa",
      "primary": "#818cf8",
      "primaryForeground": "#0a0a0f",
      "secondary": "#1f1f29",
      "secondaryForeground": "#e4e4e7",
      "muted": "#1f1f29",
      "mutedForeground": "#a1a1aa",
      "accent": "#26263a",
      "accentForeground": "#c7d2fe",
      "destructive": "#f87171",
      "border": "#2a2a37",
      "input": "#2a2a37",
      "ring": "#6366f1"
    }
  },
  "typography": {
    "fonts": {
      "sans": "Inter",
      "serif": null,
      "mono": "JetBrains Mono"
    },
    "headingFont": "sans"
  },
  "radius": "0.625rem",
  "shadow": {
    "sm": "0 1px 2px rgba(0,0,0,0.06)",
    "md": "0 6px 20px -4px rgba(0,0,0,0.12)",
    "lg": "0 18px 40px -8px rgba(0,0,0,0.18)"
  },
  "spacing": {
    "unit": "0.25rem",
    "scale": [
      0,
      1,
      2,
      3,
      4,
      6,
      8,
      12,
      16,
      24
    ]
  },
  "motion": {
    "duration": {
      "fast": "150ms",
      "base": "250ms",
      "slow": "400ms"
    }
  },
  "principles": {
    "do": [
      "Use one primary accent for actions."
    ],
    "dont": [
      "Don't rely on color alone to convey meaning."
    ]
  }
}

Tokens look valid.

Your name *

Email (optional)

Creator / brand name

Live preview

Lumen

ProductPricingGet started

✦ New release

Build something people love.

A live preview of this theme — every color, font, radius, and shadow you see is rendered straight from its tokens.

Start free Live demo

12.4k

Active users+18%

$48.2k

Revenue+7.1%

4.9

Rating2.1k

Quick actions

Prov2.0

Search anything…

CreateInvite

Contrast (WCAG)AAA ≥ 7 · AA ≥ 4.5

AaBody text

19.8:1AAA

AaMuted text

4.83:1AA

AaPrimary button

4.47:1AA Large

AaCard text

19.8:1AAA

AaAccent

8.88:1AAA