Theme Playground

Customize the Refraction UI theme by editing CSS variables in real time. Preview components with your changes, then export the CSS.

Config Editor

Paste AI-generated CSS custom properties and instantly see your brand applied to every component in a live preview.

Generate Theme

Get a ready-to-copy prompt for ChatGPT or Claude that generates a complete CSS theme matching your brand description.

Theme Reference

Comprehensive documentation for all 95 CSS custom properties — what each controls, acceptable values, and visual examples.

Refraction — Modern, crisp, slightly warm. The default look.

Font

Inter

Radius

0.5rem

Shadow

Defined

Transition

150ms

CSS Variables

Preview

Buttons

Badges

Default
Primary
Secondary
Success
Warning
Error
Outline

Inputs

Card

Sample Card

This card uses the current theme variables for background, border, text, radius, and shadows.

Generated CSS

css
:root {
  /* Colors */
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;
  --primary: 252 85% 60%;
  --primary-foreground: 0 0% 100%;
  --secondary: 240 5% 96%;
  --secondary-foreground: 240 4% 43%;
  --muted: 240 5% 96%;
  --muted-foreground: 240 4% 43%;
  --accent: 252 30% 95%;
  --accent-foreground: 252 50% 45%;
  --destructive: 0 84% 50%;
  --destructive-foreground: 0 0% 100%;
  --border: 240 6% 90%;
  --input: 240 6% 90%;
  --ring: 252 85% 60%;

  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-heading: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Layout */
  --radius: 0.5rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Transitions */
  --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}