Theme Builder
Customize htmxRazor design tokens and preview changes in real time. Download the result as a CSS override file you can drop into your project.
How it works: Change any token on the left and the preview panel updates instantly.
For color palettes, pick a 500 shade and click "Generate palette" to auto-fill all 11 shades.
Semantic colors (Background, Surface, Text, Border) are independent from palettes
and must be set separately.
When you're done, click Download CSS to get a file containing only the tokens you changed.
Semantic Colors
Color Palette: Brand
Color Palette: Neutral
Color Palette: Success
Color Palette: Warning
Color Palette: Danger
Typography
Spacing
Border Radius
Shadows
Live Preview
Buttons
Badges
Neutral
Brand
Success
Warning
Danger
Callouts
This is a brand callout message.
Operation completed successfully.
An error occurred during processing.
Form Controls
Card
Card Title
This is a sample card to preview surface, border, and shadow tokens.