Theme Builder
Customize design tokens and export a global.css
snippet to drop into your project. Changes are previewed live on this page.
Token☀️ Light🌙 Dark
Base
--bambi-background
--bambi-foreground
Surface
--bambi-card
--bambi-card-foreground
--bambi-popover
--bambi-popover-foreground
Brand
--bambi-primary
--bambi-primary-foreground
--bambi-secondary
--bambi-secondary-foreground
--bambi-accent
--bambi-accent-foreground
State
--bambi-muted
--bambi-muted-foreground
--bambi-destructive
--bambi-destructive-foreground
Utility
--bambi-border
--bambi-input
--bambi-ring
Border Radius
SM
MD
LG
XL
Typography
Sans
Mono
Live Preview
Export CSS
/* @bambi-ui/theme custom theme — paste into your global.css */
:root {
--bambi-background: #ffffff;
--bambi-foreground: #171717;
--bambi-card: #ffffff;
--bambi-card-foreground: #171717;
--bambi-popover: #ffffff;
--bambi-popover-foreground: #171717;
--bambi-primary: #3b72e8;
--bambi-primary-foreground: #fafafa;
--bambi-secondary: #f5f5f5;
--bambi-secondary-foreground: #171717;
--bambi-accent: #ebebeb;
--bambi-accent-foreground: #171717;
--bambi-muted: #ebebeb;
--bambi-muted-foreground: #737373;
--bambi-destructive: #dc2626;
--bambi-destructive-foreground: #fafafa;
--bambi-border: #e5e5e5;
--bambi-input: #e5e5e5;
--bambi-ring: #3b72e8;
--bambi-radius-sm: 0.25rem;
--bambi-radius-md: 0.375rem;
--bambi-radius-lg: 0.5rem;
--bambi-radius-xl: 0.75rem;
--bambi-font-sans: system-ui, sans-serif;
--bambi-font-mono: ui-monospace, monospace;
}
.dark {
--bambi-background: #171717;
--bambi-foreground: #fafafa;
--bambi-card: #1e1e1e;
--bambi-card-foreground: #fafafa;
--bambi-popover: #1e1e1e;
--bambi-popover-foreground: #fafafa;
--bambi-primary: #5b8cf7;
--bambi-primary-foreground: #171717;
--bambi-secondary: #262626;
--bambi-secondary-foreground: #fafafa;
--bambi-accent: #2e2e2e;
--bambi-accent-foreground: #fafafa;
--bambi-muted: #262626;
--bambi-muted-foreground: #a3a3a3;
--bambi-destructive: #ef4444;
--bambi-destructive-foreground: #fafafa;
--bambi-border: #404040;
--bambi-input: #404040;
--bambi-ring: #5b8cf7;
}