Theme Builder

Pick colors, customize fonts, preview live, download ready-to-use JSON.

AI Workflow: Paste a screenshot or website URL into Cursor or Claude Code and ask: “Create a figma-kit theme matching these colors.” The AI extracts hex values and runs figma-kit theme init for you.

Seed Colors

Theme Name

Background

Primary Accent

Secondary Accent

Advanced Options

Fonts

Heading Font

Body Font

Mono Font

Status Colors

Warning

Error

Success

Spacing

Compact Standard Spacious

Brand (optional)

Tagline

Website URL

Derived Palette

Live Preview

Heading

Subheading

Body text with the default style and sizing.

Small caption text — muted and secondary.

const theme = loadTheme("custom");

Open Source

Warning Error Success

Sample Card

A card component with the theme's card background and stroke colors.

Generated JSON