Documentation
One subsection per page, so each topic stays readable. Use the tabs above to move between them.
The default theme
A light theme: white surfaces and cards on a soft grey page, with blue/cyan accents. Used for the portal itself and for any app that has no theme colour of its own.
Semantic status colours
#22c55e
Warning / elevated · #f59e0b
Critical / error · #ef4444
Informational · #60a5fa
Inactive / unknown · #64748b
These never follow a brand colour. A managed app can change the accent, the buttons and the surfaces — but never what green, amber or red mean. Status has to be readable at a glance, on every app, for everyone.
Branding an app
Set the theme colour on the app's settings page. Everything else is derived from that one value:
| Token | Derivation |
|---|---|
| --it-accent | Your theme colour. |
| --it-accent-ink | The accent darkened for text, so links stay readable on white. |
| --it-accent-strong | The accent darkened, for gradients and borders. |
| --it-button | Your button colour, else the accent. |
| --it-button-text | Black or near-white, whichever is readable on the button. |
Example: Issue Ticca Portal
uses #0891b2 and derives
#055e74.
Where the theme applies
- The whole portal, while that app is the selected one.
- The ticket portal iframe, unless the host overrides it with URL parameters.
- Charts, meters and pills, which read the same CSS variables.
Because it is all CSS custom properties, overriding the theme from a host page is a
matter of setting --it-accent yourself.
Motion
Switching between applications plays a short "breathing" veil, and healthy status dots
pulse gently. Both are disabled automatically under
prefers-reduced-motion: reduce.