Personalize your theme

Using your theme

Generate the CSS, paste it after your Tailwind import, then use semantic, unnumbered utilities instead of hardcoded brand colors. Use bg-primary hover:bg-primary-hover for primary actions, text-primary-foreground for content on those actions, and text-primary-content or ring-primary-content for links, emphasis, and focus states. Their values switch with dark mode, while neutral-* utilities use your base palette for surfaces, borders, and body text. I'd recommend keeping red, amber, green, and blue for true status UI.