Skip to main content

Design & Custom Theming Guide

Radian AI leverages a professional, state-of-the-art semantic token styling architecture built on top of Tailwind CSS and CSS Custom Properties (Variables). This design ensures that every generated section inherits your brand colors automatically while keeping the codebase highly maintainable.

🎨 Semantic CSS Variables​

Every site generated by Radian AI defines its style tokens inside the :root pseudo-class in src/index.css. We use the standard space-separated HSL format to allow Tailwind to apply opacity dynamically.

Here are the key variables that map your theme:

:root {
  /* Core Canvas */
  --background: 220 20% 97%;       /* e.g., Sleek light grey or #1a1a1a brutalist dark */
  --foreground: 220 30% 12%;       /* Primary text color */

  /* Surface Cards & Elements */
  --card: 0 0% 100%;               /* Background for grids, testimonials, items */
  --card-foreground: 220 30% 12%;

  /* Action & Branding Colors */
  --primary: 180 70% 40%;          /* Brand accent (e.g., Vibrant Teal, Cyan, or Magenta) */
  --primary-foreground: 0 0% 100%;
  --primary-glow: 180 80% 55%;

  /* Neutral Utility Surfaces */
  --secondary: 220 15% 92%;
  --secondary-foreground: 220 30% 20%;
  
  /* Borders and Form Controls */
  --border: 220 15% 88%;
  --input: 220 15% 88%;
  --ring: 180 70% 40%;
}

🛠️ Mapping to Tailwind Utilities​

Radian AI maps these CSS custom variables directly to semantic Tailwind classes, making the generated templates completely theme-neutral. When editing or styling, use these tokens instead of hardcoded colors:

1. Canvas & Surfaces​

  • bg-background: Canvas background (var(--background))
  • text-foreground: High-contrast readable text (var(--foreground))
  • bg-card: Card/Grid item card surface (var(--card))
  • text-card-foreground: Text inside cards (var(--card-foreground))

2. Action Elements​

  • bg-primary: Active buttons, branding highlights (var(--primary))
  • text-primary: Accent inline text
  • text-primary-foreground: High-contrast text on top of primary backgrounds

3. Decorative Elements​

  • border-border: Divider lines, card outlines (var(--border))
  • text-muted-foreground: Muted secondary descriptions or captions

💅 Editing Themes inside the Radian Studio​

Inside the Radian Studio Canvas Interface, you don't need to touch CSS to rebrand your site:

  1. Navigate to the Settings or Theme panel on the left sidebar.
  2. Select one of our curated design templates (e.g., Brutalist Dark, Minimalist White, Cyberpunk Neon), or click Custom Theme.
  3. Choose your Primary color and Canvas color.
  4. The Radian preview engine ("snapbox") will automatically compile your CSS variables in real-time, instantly rendering the new color palette across every single component on your page!