Branding & Customization
O.D.I.N. supports full white-label branding. You can replace the application name, upload a logo, set accent colors, and choose from 64 web fonts. Branding applies across the UI and PDF invoices.
System-Level Branding
Configure system-wide branding under Settings → Branding (admin only).
| Field | Description | Where It Appears |
|---|---|---|
| App Name | Replaces "O.D.I.N." everywhere | Page title, sidebar header, PDF invoices, email notifications |
| App Subtitle | Tagline shown below the app name | Sidebar header, login page |
| Primary Color | Main accent color (hex) | Buttons, links, active states, progress bars |
| Accent Color | Secondary highlight color (hex) | Badges, secondary buttons, chart accents |
| Logo | Uploaded image file | Sidebar header, login page, PDF invoice header |
| Font | UI font choice (64 options) | All text throughout the interface |
Branding changes take effect immediately without a container restart. Colors are applied via CSS custom properties and update in all open browser tabs as soon as the settings are saved. Users will see the change on their next page navigation or within a few seconds.
Logo Upload
Supported formats: PNG, JPG, SVG, WebP
- Recommended dimensions: at least 200px wide, square or horizontal aspect ratio works best
- Maximum file size: 2 MB
- Uploaded logos are stored at
/data/static/branding/inside the container volume - The logo is served at
/static/branding/logo.<ext>and linked by the branding API
When a logo is set, it replaces the default O.D.I.N. icon in:
- The sidebar header
- The login page
- PDF invoice headers
Font Selection
64 web fonts are available under Settings → Branding → Font. Fonts are loaded from the CDN on page load. Selecting a new font takes effect immediately.
Popular choices used in production environments:
- Inter (default) — clean, modern, excellent legibility
- Roboto — ubiquitous, reliable for dense data views
- Poppins — friendly rounded style for maker communities
- Fira Code — monospace option for technical audiences
Per-Organization Branding Overrides
When using the Organizations feature (Enterprise license), each organization can have its own branding that overrides the system-level settings for users in that organization.
Per-org branding fields are stored in groups.settings_json and include:
| Key | Description |
|---|---|
branding_app_name | Override app name for this org's users |
branding_logo_url | Override logo URL for this org's users |
Configure per-org branding under Settings → Access → Organizations → [Org Name] → Settings.
See Multi-Org Management for full organization configuration details.
Theme Preferences (Light/Dark)
Each user can independently set their preferred UI theme:
- Light / Dark mode — toggled via the sun/moon icon in the header; persisted to localStorage
- Per-user accent color — stored server-side via
PUT /api/auth/me/theme; syncs across devices
Theme preferences are per-user and do not override the system-level primary/accent colors set in branding — they provide a separate per-user layer.
PDF Invoice Branding
When you generate a PDF invoice from an order (GET /api/orders/{id}/invoice.pdf), the invoice uses your branding settings:
- App name appears in the invoice header
- Logo appears in the top-left of the invoice
- Primary color is used for the header bar and accent elements
See Order Management & Fulfillment for invoice generation details.
See Also
- Multi-Org Management — per-org branding overrides
- Order Management & Fulfillment — PDF invoice generation