Theming

Customize colors to match your brand. All components use a consistent color system.

Brand colors

Every component references brand-500 (primary) and brand-400 (hover/active). To change the accent color across all components, update your Tailwind config:

/* app.css */

@theme {

  --color-brand-50: #eef2ff;

  --color-brand-100: #e0e7ff;

  --color-brand-200: #c7d2fe;

  --color-brand-300: #a5b4fc;

  --color-brand-400: #818cf8;

  --color-brand-500: #6366f1;

  --color-brand-600: #4f46e5;

  --color-brand-700: #4338ca;

  --color-brand-800: #3730a3;

  --color-brand-900: #312e81;

}

The default palette is Indigo. Swap the hex values for any color — blue, green, purple, orange, or your custom brand hex.

Color preview

50

100

200

300

400

500

600

700

800

900

Gray palette

Components use Tailwind's default gray scale for backgrounds, borders, and text. The dark theme is built on:

Page background gray-950
Card / panel gray-900
Input background gray-800
Borders gray-800 / gray-700
Primary text white / gray-200
Secondary text gray-400
Muted text gray-500

Semantic colors

Components like Badge, AlertBanner, and Toast use these semantic color variants:

Success
emerald
Warning
amber
Error
red
Info
brand

Fonts

Components inherit your app's font-family. No fonts are bundled. Set your preferred font in your global CSS:

body { font-family: 'Inter', sans-serif; }