Generate Your Brand Theme
Use an LLM to generate a complete theme config for your brand. Follow the steps below, then paste the result into the Config Editor to see it live.
Ask the AI for just colors, fonts, and radius (~25 variables)
1
Describe
Type your brand description below
2
Copy
Copy the complete prompt
3
Paste
Paste into ChatGPT or Claude
4
Get CSS
The LLM returns complete CSS
5
Apply
Paste CSS into Config Editor
Type your brand description here and it will be automatically inserted into the prompt below. Leave blank to use the placeholder text.
Complete Prompt
prompt (simple mode)
I need a CSS theme configuration for a UI component library called Refraction UI.
My brand is: [DESCRIBE YOUR BRAND HERE - e.g., "a luxury hotel booking platform with warm, inviting aesthetics"]
Generate CSS custom properties in this EXACT format. Only the essential brand variables are needed:
:root {
/* ═══════════════════════════════════════════
BRAND COLORS
═══════════════════════════════════════════ */
--background: 0 0% 99%;
--foreground: 240 10% 10%;
--primary: 250 50% 50%;
--primary-foreground: 0 0% 100%;
--secondary: 240 5% 96%;
--secondary-foreground: 240 4% 44%;
--muted: 240 5% 96%;
--muted-foreground: 240 4% 44%;
--accent: 250 30% 95%;
--accent-foreground: 250 50% 40%;
--destructive: 0 84% 50%;
--destructive-foreground: 0 0% 100%;
--border: 240 6% 92%;
--input: 240 6% 92%;
--ring: 250 50% 50%;
/* ═══════════════════════════════════════════
FONTS
═══════════════════════════════════════════ */
--font-sans: 'Inter', system-ui, sans-serif;
--font-heading: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
/* ═══════════════════════════════════════════
SHAPE & FEEL
═══════════════════════════════════════════ */
--radius: 0.375rem;
}
Replace every value above with values that match my brand. Here is what each variable controls:
- COLORS: HSL values (hue saturation% lightness%) for surfaces, brand, semantic, borders
- FONTS: Font family stacks for body text, headings, and monospace code
- RADIUS: Base border-radius that sets the overall shape feel
Requirements:
1. All foreground/background color pairs must meet WCAG AA contrast ratio (4.5:1 minimum)
2. Colors should be beautiful and cohesive, not random
3. The overall feel should match my brand description
4. Output ONLY the CSS — no explanation needed