DocumentationCurrent Page

Theme Editor

Customize your design systemwithout writing CSS

The Theme Editor is a visual tool that lets you customize your entire design system through an intuitive interface. Changes are applied as CSS variables, making them instantly available throughout your application.

Colors

22 color tokens for light & dark modes

Typography

Fonts, sizes, and spacing controls

Actions

Apply, export, and download your theme

Key Benefits

✓Real-time preview across multiple page types
✓Auto-generates CSS variables in globals.css
✓Creates AI-friendly documentation (brand.md)
✓Export/import themes as JSON for version control

Getting Started

Learn how to access and use the theme editor interface

Accessing the Theme Editor

Navigate to /theme in your browser to open the visual theme editor.

Open Theme Editor

Interface Overview

The theme editor uses a 3-column layout:

Left: Navigation

Icon-based tabs for Colors, Spacing, Radius, Fonts, and Buttons sections

Center: Preview

Live preview showing your changes on simulated pages (Home, Features, Pricing, Dashboard)

Right: Settings

Controls for the active section with sliders, color pickers, and dropdowns

Tip

Use the Light/Dark toggle in the preview to switch between editing light mode and dark mode colors.

Colors

Customize your color palette for light and dark modes

Color System

The theme editor provides 22 color tokens that work together to create a cohesive design system. Each color has separate values for light and dark modes.

Info

Switch between light and dark mode in the preview panel to edit each mode separately. Maintaining good contrast ratios ensures your design is accessible.

Color Tokens Reference

Token	Purpose	CSS Variable	Tailwind Classes
`primary`	Main brand color for buttons, links, and CTAs	`--primary`	`bg-primary, text-primary, border-primary`
`primaryForeground`	Text color on primary backgrounds	`--primary-foreground`	`text-primary-foreground`
`secondary`	Secondary actions and accents	`--secondary`	`bg-secondary, text-secondary`
`secondaryForeground`	Text on secondary backgrounds	`--secondary-foreground`	`text-secondary-foreground`
`accent`	Highlight color for special elements	`--accent`	`bg-accent, text-accent`
`background`	Main page background	`--background`	`bg-background`
`foreground`	Primary text color	`--foreground`	`text-foreground`
`card`	Card and panel backgrounds	`--card`	`bg-card`
`muted`	Subdued backgrounds and disabled states	`--muted`	`bg-muted, text-muted`
`mutedForeground`	Secondary text and descriptions	`--muted-foreground`	`text-muted-foreground`
`destructive`	Error states and dangerous actions	`--destructive`	`bg-destructive, text-destructive`
`border`	Default border color	`--border`	`border-border`
`input`	Input field borders	`--input`	`border-input`
`ring`	Focus ring color	`--ring`	`ring-ring`
`chart1-5`	Data visualization colors	`--chart-1 to --chart-5`	`bg-chart-1, bg-chart-2, etc.`

Warning

Always ensure sufficient contrast between foreground and background colors for accessibility. A minimum contrast ratio of 4.5:1 is recommended for normal text.

Spacing

Control the spacing scale used throughout your application

The spacing scale defines consistent gaps, padding, and margins. The 6-value scale ensures visual hierarchy and rhythm throughout your design.

Token	Default	Range	Use Case
`xs`	0.25rem	0-6rem	Tight spacing between related elements
`sm`	0.5rem	0-6rem	Small gaps in compact layouts
`md`	1rem	0-6rem	Standard spacing for most elements
`lg`	1.5rem	0-6rem	Medium section spacing
`xl`	2rem	0-6rem	Large section spacing
`2xl`	3rem	0-6rem	Hero sections and major dividers

CSS Variables

:root {
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
}

Tip

Use the spacing scale consistently to create visual rhythm. Avoid arbitrary spacing values.

Border Radius

Define border radius values for different UI elements

Border radius values control the roundness of corners on buttons, cards, inputs, and other elements.

Radius Scale

None (Sharp)

Small (Subtle)

0.125rem

Medium (Default)

0.375rem

Large (Cards)

0.5rem

XL (Features)

0.75rem

2XL (Bold)

1rem

Full (Pills)

9999px

Token	Use Case	Examples
`none`	Sharp corners	Data tables, technical UIs
`sm`	Subtle rounding	Small buttons, inputs
`md`	Standard rounding	Default buttons, cards
`lg`	Card-like elements	Modals, large cards
`xl`	Feature sections	Hero cards, callouts
`2xl`	Bold rounding	Large feature cards
`full`	Circular/pill shape	Badges, avatars, pill buttons

Typography

Customize fonts, text sizes, and typographic styles

Font Families

The theme editor integrates with Google Fonts and provides three font family slots:

Font	Purpose	Options
`sans`	Body text and UI	Inter, Roboto, Poppins, Open Sans, and 14 more
`mono`	Code blocks	JetBrains Mono, Fira Code, Source Code Pro, and 6 more
`heading`	Headlines	Playfair Display, Merriweather, Montserrat, and 12 more

Text Sizes

Control the font size for different text elements:

Element	CSS Variable	Default Range
`h1`	`--text-h1`	2-10rem
`h2`	`--text-h2`	1.5-4rem
`h3`	`--text-h3`	1.25-2rem
`h4`	`--text-h4`	1-1.5rem
`p`	`--text-p`	0.75-1.25rem
`blockquote`	`--text-blockquote`	Dropdown presets
`label`	`--text-label`	Dropdown presets
`code`	`--text-code`	Dropdown presets

Typography Styles

Fine-tune line heights and letter spacing:

Property	CSS Variable	Range
Body Line Height	`--line-height`	1.0-2.5
H1 Line Height	`--line-height-h1`	0.8-1.8
H2 Line Height	`--line-height-h2`	0.8-1.8
H3 Line Height	`--line-height-h3`	0.8-1.8
Letter Spacing	`--letter-spacing`	-0.05em to 0.2em

Warning

Important: Do not override typography sizes with Tailwind classes like text-4xl or leading-tight on headings. The theme editor controls these via CSS variables. Use font-bold, text-primary, and spacing classes instead.

Buttons

Customize button styling and hover effects

Control button appearance including border radius, font weight, font size, and hover effects.

Button Properties

Property	CSS Variable	Options
Border Radius	`--button-radius`	0-3rem slider
Font Weight	`--button-font-weight`	300-900 (100 steps)
Font Size	`--button-font-size`	0.75-1.5rem + presets

Hover Effects

Choose from 5 hover effect styles:

None

No hover effect

Opacity

Fade to 80% opacity

Lift

Raise with shadow

Scale

Slightly enlarge (1.05x)

Glow

Subtle glow effect

Info

Button hover effects use CSS variables like --button-hover-opacity, --button-hover-transform, and --button-hover-shadow.

Actions

Apply your theme, export settings, and download starter projects

Apply to Project

Updates globals.css with new CSS variables and regenerates brand.md documentation

Export JSON

Download brand-theme.json with all settings for backup or version control

Import JSON

Load a previously saved theme from a JSON file

View CSS

Preview the CSS code that will be generated before applying

Download Starter

Generate a ZIP file with a starter project using your current theme

Warning

After clicking "Apply to Project", you must refresh your browser to see the changes take effect.

brand.md Integration

Understand how the theme editor generates AI-friendly documentation

What is brand.md?

docs/brand.md is an auto-generated file that documents your entire design system in a human-readable and AI-parseable format.

What it contains

•Complete color palette tables (light and dark modes)
•Typography settings (fonts, sizes, line heights)
•Spacing scale and border radius values
•Button styles and hover effects
•Raw theme JSON for programmatic access

How it updates

When you click "Apply to Project" in the theme editor:

The :root and .dark blocks in src/app/globals.css are replaced
The docs/brand.md file is regenerated with current values
Both files are updated atomically in a single operation

AI Integration

AI code assistants (like Claude, Cursor, GitHub Copilot) can read brand.md to understand your design system and generate code that follows your brand guidelines.

# Example: Ask your AI assistant
"Create a new feature card component using the design system from brand.md"

# The AI will use your custom colors, spacing, and typography

Tip

Include brand.md in your version control to track design system changes over time.

File Locations

docs/brand.md

Auto-generated design system documentation

src/app/globals.css

CSS variables updated by theme editor

.cursor/commands/brand.md

Developer guidelines for using the design system