Themes & Styling
Customize your brand's look and feel with colors, fonts, and styling rules.
Firebuzz gives you granular control over your workspace aesthetic. Create multiple themes and switch between them for different landing pages or audiences.
Managing Themes
- Navigate to Brand → Themes.
- Select an existing theme tab or click New Theme.
Templates
Jumpstart your design by applying a pre-configured template. Templates automatically set your Colors, Fonts, and Border Radius.
Select a template to instantly apply a cohesive design system:
- Modern Minimal: Clean, minimalist design with blue accents
- T3 Chat: Pink/magenta theme with playful styling
- Twitter: Twitter/X-inspired blue theme with rounded corners
- Mocha Mousse: Warm, earthy browns and creams
- Notebook: Handwritten, sketchy aesthetic
- Catppuccin: Popular pastel color scheme
- Graphite: Professional grayscale palette
- Neo Brutalism: Bold colors with hard shadows
- Cyberpunk: Neon pinks and cyans
- Mono: Monochrome black and white
Templates are starting points. After applying one, you can customize any color, font, or radius setting.
Color Palette
You can override any color in the theme. Firebuzz fully supports Dark Mode for every theme you create.
- Click on a color to open the color picker.
- Choose a new color using the picker or enter a Hex code.
- Toggle between Light and Dark mode to verify contrast.
Typography
Define your global font stack. Firebuzz supports Google Fonts and system fonts.
- Sans: UI elements and body text (e.g., Inter, Roboto, Open Sans)
- Serif: Feature headings or quotes (e.g., Playfair Display, Merriweather)
- Mono: Code blocks and data (e.g., JetBrains Mono, Fira Code)
Border Radius
Adjust the global radius to control the "roundness" of your UI elements.
| Value | Appearance |
|---|---|
0 | Sharp, boxy aesthetic |
0.5rem | Subtle roundness (default) |
1rem | Moderate roundness |
1.5rem | High roundness |
2rem | Pill-shaped buttons and inputs |