Operator UI reference

This page describes the visual structure of the ioki Operator web app—the persistent application frame and the sidebar navigation—in enough detail to reconstruct the layout from the description alone. For what each page does, see the Operator section; for how the navigation is grouped and why pages appear or disappear, see Get started.

Application frame

Every screen shares the same frame: a dark, collapsible sidebar down the left, a small cluster of floating controls in the top-right corner, and the main content area filling the rest. There is no full-width top bar—the content and map extend to the top edge, and the top-right controls float over them.

┌────────────────────┬──────────────────────────────────────────────────┐
│ SIDEBAR (256px,    │                        [🔔] [📢] [👤] │ [▦]        │
│ dark navy)         │                                                    │
│                    │  MAIN CONTENT (full-bleed; map fills the area)     │
│  [k] OPERATOR      │                                                    │
│  ┌───────────────┐ │  ┌───────────────┐                                │
│  │ Product     ⇄ │ │  │ Active vehicles│                                │
│  └───────────────┘ │  └───────────────┘                                │
│                    │                                                    │
│  ▧ Live operations │                                                    │
│  ▤ Planning        │                                                    │
│  ◇ Rides           │                                        ┌───┐       │
│  ▦ Setup           │                                        │ ⊙ │       │
│                    │                                        │ + │       │
│                    │                                        │ − │       │
│               [⟨⟩] │                                        └───┘       │
└────────────────────┴──────────────────────────────────────────────────┘

Top-right controls

A small cluster of icon buttons floats in the top-right corner, about 12px from the top edge, in a 60px-tall row. It has no background of its own and sits over the content; during a guided tutorial or on empty-state pages it gains a white backing. From left to right it contains:

product validations—a bell icon that shows a magenta badge with a count when the product has open validation issues, and opens a panel listing them;
administrator notifications—an announcements icon that shows a badge with the unread count and opens the notification list;
the profile menu—an account icon that opens a dropdown for account actions and sign out;
a thin divider, then the app suite button—a nine-dot grid icon that opens the app switcher for moving to Control Center and the other ioki apps the administrator can reach (see Handoffs).

A vertical navigation rail fixed down the left, running the full height of the window, in dark ioki navy with light text and icons. It has two widths:

Expanded (default): 256px. Icons with text labels.
Collapsed: 60px. Icons only; navigation labels appear as tooltips on hover to the right, and the product switcher shows the product initials with a Select product tooltip. A floating toggle button in the bottom-right corner of the sidebar switches between the two states, and the choice is remembered between visits.

Top to bottom the sidebar holds the ioki signet and the OPERATOR wordmark, a product switcher (the current product name with a switch icon, for administrators who manage more than one product), then the navigation items. The collapse toggle is pinned in the bottom-right corner.

The sidebar background color reflects the environment. Production, demo, and staging all use the same dark navy; only local development uses a distinct colored gradient. There is no separate environment badge.

On screens narrower than 768px the sidebar is hidden and the content uses the full width; the interface targets desktop widths.

Main content area

Everything to the right of the sidebar, extending to the top edge of the window. Content pages carry comfortable horizontal padding and shift right to sit flush against the sidebar, animating when the sidebar collapses or expands. Map-centered pages such as Live operations drop the padding and fill the whole area edge to edge, with floating panels and controls layered over the map (see Live operations).

The sidebar is a flat list of four top-level items, with no group headings. Every label below is the label shown in the app.

Live operations
Planning
Rides
Setup

Live operations. The real-time operations map.
Planning. Vehicle and shift planning.
Rides. The rides overview.
Setup. A dedicated landing page that gathers the setup and configuration pages (see The Setup page).

Each navigation item has an icon on the left and, when expanded, its label. Selecting a page marks it as active.

Active. A solid magenta (berry accent) background with white text, on rounded corners.
Hover (inactive). A slightly lighter background over the navy.
Default (inactive). Light text and icon, no background.

The Setup page

Setup is no longer a sidebar fly-out. Selecting Setup opens a dedicated page that collects the setup and configuration pages into six categories. The labels below are the labels shown in the app:

Operations. Vehicles, Drivers, Driver connections, Restricted ride relations, and Lines.
Locations. Stations, Places, and Points of Interest.
Area. Service areas, Restricted areas, and Zones.
Incidents. Driver emergencies, Driver reports, and Service violations.
Communication. In-App banner, Passenger Push-Notifications, and Driver Push-Notifications.
Configuration. Passenger options, Passenger types, Ride options, Cancellation statements, Matching configurations, and Product settings.

Matching configurations and Product settings open the previous ioki Operator interface rather than a page in the redesigned app.

The Setup page also links to My Features, which lists the product’s active features, outside the six categories.

Page visibility

Navigation adapts to the administrator’s product access, permissions, and the product’s active features: a page is hidden when its permission is missing or its feature is off. See Get started for the details and examples.

Live operations

Live operations fills the content area with a full-bleed map and layers floating elements over it:

an Active vehicles panel in the top-left—a translucent, blurred white card that lists the active vehicles and can be collapsed;
map controls in the bottom-right—a recenter button above a divider, then zoom-in and zoom-out buttons, on a rounded white card;
vehicle markers on the map itself.

Visual design

ioki Operator uses the ioki brand palette, the Cera Pro typeface, a 4px spacing grid, and small corner radii. The values below cover the frame described above.

Color

Role	Value	Used for
Primary	`#3246C8`	primary actions, accents
Accent (berry)	`#D11064`	active navigation item, product validations badge, focus
Sidebar (navy)	`#000046`	sidebar background
Sidebar action blue	`#1432A0`	collapse toggle, secondary badges
Surface	`#F8FAFC`	page background
Border	`#E2E8F0`	dividers, table lines
Text (primary)	`#0F172A`	headings and labels
Text (secondary)	`#64748B`	muted text
Success	`#00BF7F`	positive status
Warning	`#F59E0B`	caution status
Error	`#FF004A`	errors, destructive actions

Type, spacing, and shape

Typeface: Cera Pro, with a system sans-serif fallback.
Common sizes: body 14–16px, small/labels 12px, headings 20–30px; medium (500) is the default UI weight, 400 for body text, 700 for emphasis.
Spacing: multiples of 4px (4, 8, 12, 16, 24, 32 …).
Corner radius: 4px for buttons and inputs, rounded corners (roughly 12px) for cards, panels, and navigation items, fully rounded for pills and avatars.

Key dimensions

Sidebar width: 256px expanded, 60px collapsed
Top-right control row height: 60px
Navigation icons: 20px