Customize your design system without writing CSS

Accessing the Theme Editor

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

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.

Color Tokens Reference

Radius Scale

Font Families

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

Text Sizes

Control the font size for different text elements:

Typography Styles

Fine-tune line heights and letter spacing:

Button Properties

Hover Effects

Choose from 5 hover effect styles:

The AI Theme Generator uses advanced language models to create complete design systems from simple descriptions. Describe your vision in plain English, paste a website URL, or upload an inspiration image to get started.

Three Ways to Generate Themes

Using Text Prompts

Simply describe your desired theme in natural language. The AI understands context and can generate themes based on:

• •Style & Mood: "Cyberpunk neon theme", "Soft pastel minimalist", "Warm coffee shop vibes"
• •Industry: "Professional law firm", "Modern tech startup", "Creative agency"
• •Colors: "Navy blue and gold luxury theme", "Forest green nature theme"

Example prompts:
"Cyberpunk neon theme with pink and cyan accents"
"Professional law firm with navy blue and gold"
"Soft pastel minimalist with rounded corners"
"Warm coffee shop vibes with brown tones"

Website URL Scraping

Paste any website URL to extract its colors and design styles. The AI analyzes the site and generates a matching theme.

Example:
"https://stripe.com create a theme like this"
"https://apple.com make it similar to this website"

The AI shows progressive loading status: "Scraping website..." → "Extracting colors and styles..." → "Analyzing design..." → "Generating theme..."

Image Upload

Upload inspiration images or paste them directly from your clipboard. The AI analyzes the image to extract color palettes and design inspiration.

Generated Theme Preview

Each AI-generated theme includes:

• ✓Complete color palette for both light and dark modes
• ✓Font selections for body text and headings
• ✓Typography sizes (H1, H2, H3, body text)
• ✓Border radius, spacing scale, and button styles
• ✓"Apply Theme" button to instantly apply the generated theme

The Theme Editor provides 9 different export formats to integrate your theme into various projects and platforms. All downloads require authentication.

Available Export Formats

1. Starter Pack (ZIP)

A complete Next.js project with your theme pre-configured. Includes all necessary files, dependencies, and folder structure.

2. Tailwind Config (ZIP)

Tailwind CSS v3 configuration file and directives for existing projects.

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['class'],
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    extend: {
      colors: {
        background: 'var(--background)',
        foreground: 'var(--foreground)',
        primary: {
          DEFAULT: 'var(--primary)',
          foreground: 'var(--primary-foreground)',
        },
        // ... more color tokens
      },
    },
  },
  plugins: [require('tailwindcss-animate')],
};

3. tokens.json

Design tokens in the standard JSON format, compatible with design tools and token pipelines.

{
  "$schema": "https://design-tokens.json-schema.org/",
  "name": "VibeCN Theme",
  "colors": {
    "light": {
      "background": { "value": "0 0% 100%", "type": "color" },
      "foreground": { "value": "222.2 84% 4.9%", "type": "color" },
      "primary": { "value": "221.2 83.2% 53.3%", "type": "color" }
    }
  },
  "spacing": {
    "xs": { "value": "0.5rem", "type": "dimension" },
    "sm": { "value": "0.75rem", "type": "dimension" }
  }
}

4. theme.ts

TypeScript file exporting your theme as a typed JavaScript object for programmatic access.

export const theme = {
  name: 'VibeCN Theme',
  colors: {
    light: {
      background: '0 0% 100%',
      foreground: '222.2 84% 4.9%',
      primary: '221.2 83.2% 53.3%',
      // ... more colors
    },
    dark: { /* dark mode colors */ }
  },
  spacing: {
    xs: '0.5rem',
    sm: '0.75rem',
    // ... more spacing
  }
} as const;

5. globals.css

Standalone CSS file with all theme variables. Copy directly into your project's CSS.

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  /* ... more variables */
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  /* ... dark mode overrides */
}

6. brand-skill.md

AI-friendly brand guidelines for Claude and other AI assistants. Helps AI understand your design system when building features.

Usage:
1. Download brand-skill.md
2. Add to your project as a skill or in docs/
3. Reference in AI conversations for consistent styling

7. Vue.js Theme

CSS variables prefixed with --vibecn- for Vue.js projects to avoid conflicts.

:root {
  --vibecn-background: 0 0% 100%;
  --vibecn-foreground: 222.2 84% 4.9%;
  --vibecn-primary: 221.2 83.2% 53.3%;
  /* ... more variables */
}

.dark {
  --vibecn-background: 222.2 84% 4.9%;
  /* ... dark mode overrides */
}

8. Java Constants

Java class with theme constants for Java/Spring projects.

public final class ThemeConstants {
    private ThemeConstants() {
        // Prevent instantiation
    }

    // Colors - Light Mode
    public static final String BACKGROUND = "0 0% 100%";
    public static final String FOREGROUND = "222.2 84% 4.9%";
    public static final String PRIMARY = "221.2 83.2% 53.3%";

    // Spacing
    public static final String SPACING_XS = "0.5rem";
    public static final String SPACING_SM = "0.75rem";
}

9. Java Properties

Spring Boot compatible properties file for configuration-based theme access.

# Colors - Light Mode
theme.colors.light.background=0 0% 100%
theme.colors.light.foreground=222.2 84% 4.9%
theme.colors.light.primary=221.2 83.2% 53.3%

# Spacing
theme.spacing.xs=0.5rem
theme.spacing.sm=0.75rem

# Usage in Spring Boot:
# @Value("${theme.colors.light.primary}")
# private String primaryColor;

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:

1. The :root and .dark blocks in src/app/globals.css are replaced
2. The docs/brand.md file is regenerated with current values
3. 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