Design Tokens
O.D.I.N. uses CSS custom properties (design tokens) to control the visual appearance of the UI. These tokens are the mechanism behind the Branding & Customization settings — when you change colors or fonts in the admin UI, O.D.I.N. updates these properties at runtime.
How Tokens Work
Design tokens are set as CSS custom properties on the :root element. The frontend reads them at render time, so changes apply instantly without a page reload or container restart.
When an admin saves branding settings, the server persists the values to the database and the frontend applies them via :root style overrides. All open browser tabs pick up the change within seconds.
Core Tokens
Color Tokens
| Token | Default | Description |
|---|---|---|
--color-primary | #3B82F6 | Primary brand color — buttons, links, active states, progress bars |
--color-accent | #8B5CF6 | Secondary accent — badges, secondary buttons, chart highlights |
--color-bg | #0F172A (dark) / #FFFFFF (light) | Page background |
--color-surface | #1E293B (dark) / #F8FAFC (light) | Card and panel backgrounds |
--color-border | #334155 (dark) / #E2E8F0 (light) | Border color for cards, inputs, dividers |
--color-text | #F1F5F9 (dark) / #0F172A (light) | Primary text color |
--color-text-muted | #94A3B8 | Secondary/muted text |
--color-success | #22C55E | Success states — completed prints, healthy printers |
--color-warning | #F59E0B | Warning states — low filament, approaching limits |
--color-error | #EF4444 | Error states — failed prints, offline printers, AI detections |
Typography Tokens
| Token | Default | Description |
|---|---|---|
--font-family | 'Inter', sans-serif | UI font — changeable via Settings → Branding → Font (64 options) |
--font-size-base | 14px | Base font size |
--font-size-sm | 12px | Small text — metadata, timestamps |
--font-size-lg | 16px | Large text — section headers |
--font-size-xl | 20px | Page titles |
Spacing and Layout Tokens
| Token | Default | Description |
|---|---|---|
--radius-sm | 4px | Small border radius — inputs, badges |
--radius-md | 8px | Medium border radius — cards, panels |
--radius-lg | 12px | Large border radius — modals, dialogs |
--sidebar-width | 240px | Sidebar navigation width |
Overriding Tokens
Via the Admin UI (Recommended)
The simplest way to customize colors and fonts is through Settings → Branding. This persists changes to the database and applies them for all users.
See Branding & Customization for full details.
Via CSS Injection
For customizations beyond what the branding UI exposes, you can inject custom CSS by mounting a stylesheet into the container:
services:
odin:
volumes:
- ./custom.css:/app/static/custom.css:ro
In custom.css, override any token:
:root {
--color-primary: #E11D48;
--radius-md: 4px;
--font-family: 'JetBrains Mono', monospace;
}
Custom CSS injection works but is not officially supported. Token names may change between versions. Prefer the branding UI for stable customization.
Per-Organization Overrides
When using the Organizations feature (Enterprise license), each organization can override --color-primary and the app name/logo via per-org branding settings. These overrides apply only to users who belong to that organization.
See Multi-Org Management for configuration details.
Theme Switching
O.D.I.N. supports light and dark themes. The active theme sets a data-theme attribute on <html>, which toggles the background, surface, border, and text color tokens between their light and dark values. Users toggle the theme via the sun/moon icon in the header.
The primary and accent colors remain constant across themes — only the neutral palette (background, surface, text, borders) changes.
See Also
- Branding & Customization — admin UI for colors, fonts, and logos
- Multi-Org Management — per-org branding overrides
- Environment Variables — Docker-level configuration