Theme Builder

Interactive

Pick colors and a radius, see your changes live, then copy the CSS snippet to paste into your project.

Base theme

Colors

Page canvas

Surface 1

Surface 2

Text primary

Text secondary

Border subtle

Border default

Brand accent

Brand text

Radius

Base radius (px)

2px

Preview

Component preview

Tokens update the preview in real time.

Remember me

:root {
  --color-bg-base: #090909;
  --color-bg-surface-1: #111111;
  --color-bg-surface-2: #181818;
  --color-text-primary: #f0f0f0;
  --color-text-secondary: #7d7d7d;
  --color-border-subtle: #161616;
  --color-border-default: #212121;
  --color-brand-bg: #f0f0f0;
  --color-brand-fg: #090909;
  --radius-sm: 2px;
}