Working with Xanthan’s Design System

Xanthan uses CSS variables (like var(--spacing-md)) for consistent design. When asking for changes, you can:

Reference existing variables:

“Use the accent-primary color for all buttons”

Ask about the system:

“What color variables are available?” “What spacing sizes can I use?”

Request system-aware changes:

“Increase spacing but stay consistent with the design system”

The AI understands Xanthan’s structure and will suggest changes that fit the existing patterns.

Common Customizations to Try

Once you’re comfortable, try these common requests:

Typography

• “Make body text use a serif font”
• “Increase line spacing in paragraphs”
• “Make h2 headings bold”

Colors

• “Create a dark mode theme”
• “Change the accent color to teal”
• “Make links a brighter blue”

Spacing

• “Add more space around images”
• “Reduce the gap between sections”
• “Increase padding in navigation items”

Layout

• “Make the content area wider”
• “Center the page content”
• “Add a border around code blocks”