Branding & Theming
Apply your organization brand with custom logos, colors, and product names. Configure themes and accent colors for your workspace.
The platform supports full white-label branding, allowing you to replace the default product identity with your organization's name, logo, colors, and styling. Both the web platform and desktop app can be rebranded.
Theming
Color Themes
Choose between three display modes:
- Light — Clean, bright interface ideal for well-lit environments
- Dark — Reduced eye strain for extended use or low-light settings
- System — Automatically matches your operating system preference
Accent Colors
Seven accent color presets are available to customize the look and feel:
| Color | Hex | Best For |
|---|---|---|
| Blue | #3B82F6 | Professional, trustworthy |
| Violet | #8B5CF6 | Creative, modern |
| Green | #22C55E | Growth, success |
| Orange | #F97316 | Energetic, warm |
| Red | #EF4444 | Bold, attention-grabbing |
| Pink | #EC4899 | Friendly, approachable |
| Yellow | #EAB308 | Optimistic, cheerful |
Change your accent color in Settings > Preferences.
Desktop App Backgrounds
The desktop app supports custom background images for the workspace:
- Upload your own background image
- Choose from preset backgrounds
- Set opacity and blur levels
White-Label Branding
What Can Be Branded
| Element | Description |
|---|---|
| Product Name | Your custom product name throughout the UI |
| Logo | Primary logo, icon, and favicon |
| Tagline | Product tagline shown on marketing pages |
| Colors | Primary, secondary, and accent colors |
| Typography | Custom font families |
| App Icon | Desktop app icon |
| Splash Screen | Desktop app launch screen |
Branding Configuration
Branding is configured through the branding.json file at the root of the project:
{
"name": "Your Product Name",
"slug": "your-product",
"tagline": "Your product tagline",
"logo": {
"light": "/images/logo-light.svg",
"dark": "/images/logo-dark.svg"
},
"icon": "/images/icon.svg",
"colors": {
"primary": "#3B82F6",
"secondary": "#1E40AF"
}
}
Applying Branding
After updating branding.json:
- The branding system automatically syncs across all surfaces
- Marketing pages, app chrome, and email templates update
- Desktop app icon and splash screen reflect your branding
- The product slug determines configuration file paths (
~/.<slug>/)
What Gets Branded
- Web Platform — Navigation, footer, login pages, marketing site
- Desktop App — Title bar, sidebar, splash screen, system tray
- Emails — Transactional emails and notifications
- Documentation — Product references throughout the docs
Tips
- Provide SVG logos — They scale cleanly across all screen sizes
- Test both themes — Ensure your branding looks good in both light and dark mode
- Keep contrast — Ensure text remains readable against your custom colors
- Favicon sizes — Provide icons at 16x16, 32x32, and 180x180 for best coverage