Design & theming

Everything that gives an App its character — its colours, fonts, header, navigation chrome, and the in-app assistant — is edited graphically, with no JSON or CSS. It all lives behind one control: Design.

Opening the Design inspector

An App opens full-bleed in view mode — the clean, published surface your audience sees, with no editing chrome. To make changes, click Edit in the header, then Design. A panel slides in from the right with five tabs:

Theme · Header · Nav · Assistant · Pages

Every change previews live on the App behind the panel. Save when you’re happy.

Tip

Double-click the App header while editing to jump straight to the Header tab.

Theme

The Theme tab is where the App’s look comes from — a structured set of design tokens, not hand-written CSS.

Presets

Start from a preset — a curated, cohesive look you can apply in one click:

Preset	Character
Editorial	Warm cream ground, serif headings, green accent
Minimal	White ground, hairline borders, no shadows
Dark Ops	Charcoal ground, elevated surfaces, cyan accent
Corporate	Cool grey ground, blue accent, crisp cards

Picking a preset re-skins the entire App instantly. It’s the fastest way to a polished result; tune from there.

Describe your brand

Prefer words to swatches? Type a plain-English description — “warm editorial look, green accent, rounded cards” or “dark control-room ops, cyan accent with amber highlights” — and click Generate theme. The description is parsed into a preset plus the colours, fonts, and form it implies, and applied live.

Colours, type & form

Below the presets, fine-tune the tokens directly:

• Colours — Accent, Brand mark (a secondary colour for the wordmark / logo square), Background, Cards, Text, and the Up / Down colours for positive / negative values.
• Type — a Headings and a Body font, each from a curated allowlist (the fonts are bundled, never fetched from a CDN), plus Numbers: which stack carries figures — KPI headlines and numeric table cells. Monospace keeps columns of figures aligned and gives the ledger-like look data products use; the other options alias the headings or body stack so changing those carries through.
• Form — corner radius, shadow depth, density (how tight the spacing is), and the KPI edge bar — set it to Tone to colour each KPI tile’s left edge by whether the number is up or down, so a row of KPIs reads at a glance.

Any token you set overrides the preset; untouched tokens keep the preset’s value.

Charts follow the theme

Chart tiles paint from the App’s tokens, not the surrounding Saiku UI — so switching preset re-themes the charts along with everything else: series colours, axis labels, gridlines and titles all move together.

A hand-authored ECharts option tile is layered over that themed baseline. Anything the option states wins; anything it leaves unsaid is inherited. In practice that means you only write the parts of a chart that are genuinely bespoke, and the App’s palette does the rest.

Header

The Header tab controls the branded top bar:

• App name and an optional accent word — a substring of the name rendered in the brand-mark colour (e.g. “FoodMart Ops”).
• Eyebrow — a small uppercase tagline after a divider (“Store Intelligence”).
• Context pill — a labelled selector on the right (e.g. Store · Portland #14). See below.
• Live badge — a status chip with a dot. See below.

Context pill

The pill is a real control, not decoration: give it options and a level to filter on, and choosing one re-scopes every tile in the App — on every page, not just the one you’re looking at. The selection follows you as you move through the pages.

Set the Label (“Store”) and a Default value, then choose where the options come from:

• From cube (recommended) — every member of the level the pill filters on, read live. A store that opens, closes or gets renamed shows up without anyone editing the App.
• Typed list — options you write by hand, for cases where you want a curated subset or friendlier wording than the cube’s captions.

Under Filters on, name the dimension, hierarchy and level the selection applies to. Leave those blank for a purely cosmetic pill — selecting then only changes the header text.

Tick Add an “all” entry for a row that clears the filter (word it however you like — “All stores · National”).

The current selection rides in the URL as ?ctx=…, so a link you copy while scoped to a region opens scoped to that region. A tile-level click filter can still narrow past the pill on the page you’re on — the pill sets the App’s scope, not a ceiling on every interaction.

Note

The pill has no cube of its own: it reads its members from the first cube-bound tile in the App. On a brand-new App with no tiles yet the inspector says so rather than reporting an empty level.

Note

A dropdown stops being usable somewhere around a couple of hundred entries, so a cube-sourced pill caps its list. When a level is bigger than that the inspector tells you exactly how many members it found and how many will be offered — you’re never shown a partial list as though it were the whole level. For a level that large, a filter tile is the better control.

Live badge

Type the wording you want for the connected state (“Live · Saiku”, “Connected to Acme BI”), and the badge reflects an actual probe of the backend:

State	Shows
Connected	your wording, in green
Demo instance	”Demo data”, in amber
Unreachable	”Offline”, in red

Leave the field blank to hide the badge entirely. It deliberately stays neutral until the first probe answers rather than claiming a healthy connection it hasn’t confirmed.

Navigation

The Nav tab controls the menu:

• Placement — left rail or top tabs.
• Start collapsed — open the rail as icons-only.
• Full height — run the rail the whole height of the shell with the header beside it, rather than the header spanning the top. This is the product-shell look where the rail is the outermost chrome.
• Rail footer — pin a settings gear, and a user disc:

User disc	Shows
Signed-in user	initials derived from whoever is viewing
Fixed	the same initials for everyone — a mock-up or a shared kiosk
Off	no disc

Tip

Prefer Signed-in user. A fixed disc badges every viewer with one person’s initials, which reads as a bug the moment somebody else opens the App.

Assistant

The Assistant tab configures the optional in-app Ask panel — a natural-language chat scoped to the App’s cube:

• Turn it on, set the title (“Ask FoodMart”), persona, and scope note.
• Write the opening greeting.
• Choose the header icon (sparkles or crosshair).
• Add suggested prompts and skill chips (the ⌘ shortcuts) with the list editors.
• Set the composer footer hint and attribution.

Pages

The Pages tab manages the App’s pages and their titles:

• Add a page, and set each page’s nav title and icon.
• Give a page a heading, subheading, and right-aligned meta — the title band that opens the page (e.g. Portland #14 · Today / Regional manager view / Thu · Week 41).

Live values in page text

A heading typed as plain text is frozen at the moment you wrote it — it will still say “Portland #14” when the App is scoped to Seattle, and “Thu · Week 41” forever. Headings, subheadings and meta lines therefore accept bindings, resolved every time the page renders:

Binding	Resolves to
{context}	the context pill’s current selection
{filter:Store}	the current selection for a named dimension
{user.name}	the signed-in user
{user.initials}	their initials
{app.name}	the App’s name
{date}	today’s date
{date:weekday}	day name — Thu
{date:month}, {date:year}	October, 2026
{week}	ISO week number

So a heading of {context} · Overview follows the store selector, and a meta line of {date:weekday} · Week {week} is always today. Expand Insert a live value under the meta field to see the list and click one to copy it.

Note

Anything that isn’t a recognised binding is used literally — a mistyped {user.nmae} renders as-is rather than vanishing, so you can see the typo. Write {{ for a literal brace.

Advanced — custom CSS

The presets and tokens cover the vast majority of branding. For the rare long-tail case, the Theme tab has an Advanced — custom CSS disclosure.

Tip

Reach for it late. The FoodMart Ops reference App that ships with Saiku — branded header, icon rail, KPI row, themed trend chart, ranked “Movers” card and in-app assistant — contains no custom CSS at all. If you find yourself writing selectors to reshape a tile, there is usually a tile type or token that does it properly, and that version will survive a theme change where hand-written CSS won’t.

Note

Custom CSS is always sanitised and scoped to that App before it’s applied — it can’t leak into the rest of the Saiku UI, and unsafe constructs are dropped rather than partially applied. You shouldn’t need it for standard branding.

Related

• App Builder overview — what an App is and how it differs from a dashboard.
• Building pages & tiles — add pages, drop tiles, and bind them to your cubes.
• Embedding an App — put a themed App on any web page.