L

Styling & Themes

Customize colors, fonts, and design tokens for your AI-generated website. Create a consistent visual identity.

Create a cohesive visual identity for your website by defining and customizing your design system.

Colors

Setting Brand Colors

Tell the AI your brand colors:

"Use these colors throughout the site:

  • Primary: #1985FF (blue)
  • Secondary: #10B981 (green)
  • Background: #0A0A0A (near black)
  • Text: #FAFAFA (white)"

The AI applies them consistently across all components.

Color Palettes

For a complete palette:

"Create a color system with:

  • Primary: #1985FF with 5 shades (100-900)
  • Neutral: Gray scale for text and backgrounds
  • Semantic: Success (green), Warning (yellow), Error (red)"

Typography

Fonts

Choose custom fonts:

"Use Inter for headings and system-ui for body text"

"Use Playfair Display for a more elegant look"

The AI adds the font imports automatically.

Text Scales

Define your type scale:

"Use these font sizes:

  • H1: 48px / bold
  • H2: 36px / semibold
  • H3: 24px / semibold
  • Body: 16px / regular
  • Small: 14px"

Spacing

Consistent Spacing

Define your spacing system:

"Use an 8px spacing system:

  • Small: 8px
  • Medium: 16px
  • Large: 32px
  • XL: 64px"

Applies to padding, margins, and gaps.

Components

Button Styles

Customize buttons:

"Buttons should be:

  • Primary: Blue background, white text, 8px radius
  • Secondary: Transparent with blue border
  • Hover: Slight scale and shadow"
Card Styles

Define card appearance:

"Cards should have:

  • 16px padding
  • 12px border radius
  • Subtle border (#262626)
  • Hover shadow effect"

Dark/Light Mode

Default Theme

Set your default:

"Make dark mode the default theme"

or

"Start with light mode"

Theme Toggle

For both themes:

"Add a theme toggle in the header that switches between dark and light mode"

The AI creates appropriate color variables for both.

Next Steps