Dashboards inherit your platform's theme but can be styled further to give each one a distinct feel — colour palette, density, typography, custom CSS. This article covers the controls.
Style Settings per Dashboard
- Theme palette: Choose from preset palettes or define a custom one (primary, secondary, accent, background, text).
- Density: Compact (more blocks visible) vs Comfortable (more whitespace).
- Block corner radius: Square, slightly-rounded, fully-rounded.
- Headers: Bold, regular, hidden.
- Background: Solid, gradient, image.
- Font choice: System, custom sans-serif, custom serif.
- Custom CSS: For everything else — scoped to this dashboard.
Themed Dashboards by Audience
- Executive dashboard: Comfortable density, large typography, premium colour palette.
- Operations dashboard: Compact density, high contrast, emphasised status colours.
- Customer-facing dashboard: Brand colours of the customer; comfortable density.
- Public TV-mode dashboard: Huge typography, high contrast, auto-cycling slides.
Custom CSS Examples
- Hide block headers:
.dashboard-block-header { display: none; }. - Make KPI tiles pop:
.kpi-tile { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }. - Branded header bar:
.dashboard-header { background: linear-gradient(...); }. - Dark mode override:
.dashboard { background: #0a0a0a; color: #fafafa; }.
Tip: Avoid custom CSS that fights the global theme. Most needs are met by the preset palette and density choices; reach for CSS only when the built-in knobs fall short.