Skip to main content

Branding & Customization

O.D.I.N. supports white-label branding (Pro license or higher). You can set a custom application name and subtitle, upload a logo, customize the primary and accent colors, and choose fonts from 64 selector entries. Branding applies across the UI and PDF invoices (app name, primary color, footer and a PNG/JPEG/WebP logo).

System-Level Branding​

Configure system-wide branding under Settings → Branding (admin only).

FieldDescriptionWhere It Appears
App NameReplaces "O.D.I.N." everywherePage title, sidebar header, PDF invoices, email notifications
App SubtitleTagline shown below the app nameSidebar header, login page
Primary ColorMain accent color (hex)Buttons, links, active states, progress bars
Accent ColorSecondary highlight color (hex)Badges, secondary buttons, chart accents
LogoUploaded image fileSidebar header, login page, PDF invoice header
FontDisplay (28), body (24) and monospace (12) font choicesAll text throughout the interface
CSS Custom Properties Apply Instantly

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 (PNG, JPEG and WebP logos; an SVG logo is used in the UI but not rendered on invoices)

Font Selection​

The display, body and monospace selectors under Settings → Branding offer 64 entries in total (28 display, 24 body, 12 monospace): 44 distinct typefaces plus system defaults. Inter, Space Grotesk, JetBrains Mono and IBM Plex Mono are bundled with O.D.I.N.; the other typefaces render only when installed locally on the viewer's device. 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 (available on every tier), each organization can have its own branding (Pro license or higher) that overrides the system-level settings for users in that organization.

Per-org branding fields are stored in groups.settings_json and include:

KeyDescription
branding_app_nameOverride app name for this org's users
branding_logo_urlOverride 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​