White-Label and OEM Branding
5 minute read
White-Label and OEM Branding
Rebrand the entire management interface with a single JSON configuration file. Your logo, your colors, your fonts, your product name. No code changes, no rebuilds, no custom firmware. Edit the config, restart the service, done.
Your customers see your brand. Not ours.
How It Works
The management platform reads branding configuration from /etc/exaviz/management.json at startup. Every element of the UI that displays a brand name, logo, color, or link pulls from this configuration. The branding is also served via a public API endpoint (GET /api/v1/branding) so any external tools or integrations can read your branding settings.
Branding Configuration
Full Example
{
"branding": {
"product_name": "AcmeCam NVR Pro",
"logo_url": "/assets/acme-logo.svg",
"favicon_url": "/assets/acme-favicon.svg",
"primary_color": "#0066CC",
"secondary_color": "#1a1a2e",
"heading_font": "Inter",
"body_font": "Open Sans, sans-serif",
"footer_text": "AcmeCam NVR Pro Management",
"support_url": "https://support.acmecam.com",
"docs_url": "https://docs.acmecam.com",
"company_url": "https://www.acmecam.com",
"company_name": "AcmeCam Inc."
}
}
Field Reference
| Field | Default (Exaviz) | Description |
|---|---|---|
product_name | “Exaviz Management” | Displayed in the header, login page, help modal, and page titles |
logo_url | Exaviz wordmark | Path to your logo file (SVG recommended). Displayed in the header and login page. |
favicon_url | Exaviz favicon | Path to your favicon file (SVG or ICO). Displayed in the browser tab. |
primary_color | #90FF80 (Exaviz Green) | Primary accent color used for links, active states, and buttons |
secondary_color | #1a1a2e | Secondary color for backgrounds and borders |
heading_font | Bruno Ace SC | Font family for headings |
body_font | Arial | Font family for body text |
footer_text | “Exaviz” | Text displayed in the dashboard footer |
support_url | exaviz.com/support | Link target for “Support” in the help modal and footer |
docs_url | docs.exaviz.com | Link target for “Documentation” in the help modal |
company_url | exaviz.com | Link target for the company name in the footer |
company_name | “Axzez LLC” | Company name displayed in copyright notices |
File Placement
Place your logo and favicon files in /usr/share/exaviz/web/assets/:
# Copy your logo and favicon to the board
scp acme-logo.svg board:/usr/share/exaviz/web/assets/
scp acme-favicon.svg board:/usr/share/exaviz/web/assets/
# Update the config
sudo nano /etc/exaviz/management.json
# Restart the service
sudo systemctl restart exaviz-mgmt
SVG files are recommended for logos because they scale cleanly on all screen sizes and resolutions. PNG files work as well.
CSS Variable Theming
Beyond the JSON branding config, the entire visual style of the dashboard is controlled by CSS custom properties (variables). This is a deeper level of customization for OEMs who want to match a specific design system.
Dark Mode Variables (Default)
| Variable | Default | Usage |
|---|---|---|
--bg-primary | #0d1117 | Page background |
--bg-card | #161b22 | Card and tile backgrounds |
--bg-input | #21262d | Input field backgrounds |
--border | #30363d | Card and input borders |
--text-primary | #e6edf3 | Primary text color |
--text-secondary | #8b949e | Muted/secondary text |
--accent | #90FF80 | Brand accent (links, buttons, active states) |
--accent-dim | #90FF8044 | Accent glow and shadow |
--accent-bg | #90FF8015 | Accent background tint |
--danger | #FF4444 | Error and destructive actions |
--danger-light | #FF6666 | Danger hover state |
--danger-dim | #FF444444 | Danger glow |
--warning | #FFD700 | Warning indicators |
--warning-dim | #FFD70044 | Warning glow |
--shadow-card | 0 2px 8px rgba(0,0,0,0.3) | Card drop shadow |
Light Mode Variables
Light mode overrides are defined in [data-theme="light"]:
| Variable | Light Value | Notes |
|---|---|---|
--bg-primary | #ffffff | White page background |
--bg-card | #f6f8fa | Light gray cards |
--bg-input | #ffffff | White inputs |
--border | #d1d9e0 | Lighter borders |
--text-primary | #1f2328 | Dark text |
--text-secondary | #656d76 | Muted text |
--accent | #1a7f37 | Dark green for readability on light backgrounds |
--accent-dim | #1a7f3744 | Green glow |
--danger | #cf222e | Dark red |
--warning | #9a6700 | Dark yellow |
Retheme Example: Blue Brand
To retheme the dashboard for a blue-branded product, override the accent variables:
:root {
--accent: #4F7CFF;
--accent-dim: #4F7CFF44;
--accent-bg: #4F7CFF15;
}
[data-theme="light"] {
--accent: #2563EB;
--accent-dim: #2563EB44;
}
This changes every link, button, active indicator, and glow across the entire dashboard in both dark and light modes.
What Gets Branded
The branding configuration affects every customer-visible element:
| Element | What Changes |
|---|---|
| Header | Product name and logo |
| Login page | Product name, logo, and accent color |
| Browser tab | Favicon and page title |
| Footer | Company name, support link |
| Help modal | Product name, support URL, docs URL |
| Audit log | References to product name |
| Button and link colors | Accent color throughout |
| Toast notifications | Accent color for success messages |
| Port tiles and cards | Border and glow colors |
| File Browser | Branded header, theme colors |
What Does NOT Change
- Port data, system metrics, and API responses are unbranded (they contain hardware data, not branding)
- The REST API endpoint structure (
/api/v1/...) is fixed - The Prometheus metrics endpoint format is standard
Branding API
The branding configuration is accessible via a public endpoint (no authentication required):
curl https://<board-ip>/api/v1/branding
Response:
{
"product_name": "AcmeCam NVR Pro",
"logo_url": "/assets/acme-logo.svg",
"favicon_url": "/assets/acme-favicon.svg",
"primary_color": "#0066CC",
"company_name": "AcmeCam Inc.",
"support_url": "https://support.acmecam.com",
"docs_url": "https://docs.acmecam.com"
}
This endpoint is public because the frontend fetches branding before the user logs in (to display the logo and product name on the login page).
Deployment Workflow
Step 1: Prepare Your Assets
- Logo (SVG, recommended width 200-300px)
- Favicon (SVG or 32x32 ICO/PNG)
- Brand colors (hex values for primary accent)
- Font names (Google Fonts or system fonts)
- Support and documentation URLs
Step 2: Configure the Board
Edit /etc/exaviz/management.json with your branding values and copy your logo/favicon to /usr/share/exaviz/web/assets/.
Step 3: Restart and Verify
sudo systemctl restart exaviz-mgmt
Open the board’s IP in a browser. Your logo, colors, and product name appear on the login page and throughout the dashboard.
Step 4: Export for Fleet Deployment
Once you’re satisfied with the branding on a single board, use the backup/restore feature to clone the configuration to every board in your fleet. Alternatively, include the branding in your custom OS image for zero-touch deployment.
Home Assistant Plugin Branding
The open-source Exaviz PoE Management plugin for Home Assistant can also be white-labeled for customers deploying Home Assistant-based solutions. The plugin supports custom integration names and branding through the Home Assistant brands system.
Next Steps
- API Reference for programmatic access to branding and all other features
- Deployment Guide for architecture details and fleet deployment
- Pricing for volume discounts and support contracts
Last modified April 9, 2026