Overlays

Popover

UseVerwendung: Short information or a quick decision tied to one element; never a form with more than one fieldKurze Information oder schnelle Entscheidung zu einem Element; nie ein Formular mit mehr als einem Feld
PanelPanel: Like the select panels: float surface (raised, lighter than the page in dark mode), 1 px line border, radius 16 px, float shadowWie die Select-Panels: Fläche float (erhöht, im Dark Mode heller als die Seite), 1 px Rand in line, Radius 16 px, Float-Schatten
WidthBreite: 280 px, longer text wraps280 px, längerer Text bricht um
PositionPosition: 8 px below the trigger, left edges aligned; above it when there is no room below8 px unter dem Auslöser, linke Kanten bündig; darüber, wenn unten kein Platz ist
TitleTitel: Optional, 14 px Geist Medium, secondary-900Optional, 14 px Geist Medium, secondary-900
TextText: 14 px Geist Light, 20 px line, secondary-90014 px Geist Light, 20 px Zeilenhöhe, secondary-900
PaddingInnenabstand: 16 px all round, actions included; the text, the title and the visible edge of the × sit 16 px from the border16 px rundum, Aktionen eingeschlossen; Text, Titel und die sichtbare Kante des × liegen 16 px vom Rand entfernt
CloseSchließen: Dark tertiary icon button, 24 px, radius 8 px; the hover stays inside the borderDunkler Tertiary-Icon-Button, 24 px, Radius 8 px; der Hover bleibt innerhalb des Rahmens
ActionsAktionen: Optional: Cancel (secondary) and the action (primary), 50/50 over the full widthOptional: Cancel (Secondary) und die Aktion (Primary), 50/50 über die volle Breite
Closes onSchließt bei: ×, Esc, a click outside or an action; focus goes back to the trigger×, Esc, Klick daneben oder eine Aktion; der Fokus geht zurück zum Auslöser
Info buttonInfo-Button: Explains how something works (e.g. “How filters work” at the end of a filter group): dark tertiary icon button with the 20 px info icon (o_info), 32 px, 40 px hit area, the label as tooltip; inside a frame the 24 px inset button; open Primary-100 with a Primary-400 ring; opens a popover with title and textErklärt, wie etwas funktioniert (z. B. „How filters work“ am Ende einer Filtergruppe): dunkler Tertiary-Icon-Button mit dem 20-px-Info-Icon (o_info), 32 px, 40 px Trefferfläche, das Label als Tooltip; in einem Rahmen der 24-px-Inset-Button; offen Primary-100 mit Primary-400-Ring; öffnet ein Popover mit Titel und Text

Every caseAlle Fälle

		DefaultStandard
Title · belowTitel · unten	Average duration Counted from the first to the last scan of each order in the selected period.	Average duration Counted from the first to the last scan of each order in the selected period.
Actions · aboveAktionen · oben	Clear filters? All stations and vehicles are shown again.	—
Info buttonInfo-Button
Info button · openInfo-Button · offen	How filters work Global filter (across pages) Applies to all pages where the global filter is enabled. Filter (individual page) Applies only to the current page; other pages keep their own filter.	—
Without titleOhne Titel	Synced with the fleet at 06:40.	Synced with the fleet at 06:40.

Try itAusprobieren

Modal

UseVerwendung: A task that has to be finished or canceled before going onEine Aufgabe, die abgeschlossen oder abgebrochen werden muss, bevor es weitergeht
SizesGrößen: Small 400 px · medium 560 px; never wider than the screenKlein 400 px · mittel 560 px; nie breiter als der Bildschirm
PanelPanel: Float surface, 1 px line border, radius 16 px, float shadow, centeredFläche float, 1 px Rand in line, Radius 16 px, Float-Schatten, zentriert
ScrimAbdunklung: secondary-900 at 40 % over the page, secondary-000 at 70 % in dark modesecondary-900 mit 40 % über der Seite, im Dark Mode secondary-000 mit 70 %
HeaderKopfzeile: Title 16 px Geist Medium, secondary-900; the title and the visible edge of the × sit exactly 16 px from the borderTitel 16 px Geist Medium, secondary-900; der Titel und die sichtbare Kante des × liegen genau 16 px vom Rand entfernt
BodyInhalt: 14 px Geist Light, 16 px left and right, 16 px between blocks; scrolls on its own when the modal is taller than the screen14 px Geist Light, 16 px links und rechts, 16 px zwischen Blöcken; scrollt für sich, wenn das Modal höher als der Bildschirm ist
FooterFußleiste: Cancel (secondary) left, Save (primary) right, 50/50 over the full width, 8 px gap, 16 px padding; a line on top only while the body scrollsCancel (Secondary) links, Save (Primary) rechts, 50/50 über die volle Breite, 8 px Abstand, 16 px Innenabstand; eine Linie oben nur, solange der Inhalt scrollt
Closes onSchließt bei: ×, Cancel, Esc or a click on the scrim; focus stays inside while open and goes back to the trigger×, Cancel, Esc oder Klick auf die Abdunklung; der Fokus bleibt drinnen, solange es offen ist, und geht danach zurück zum Auslöser
OpeningÖffnen: From its own secondary button, or without one from anywhere else, e.g. a menu item in a table row, that names the modal’s idÜber einen eigenen Secondary-Button oder ohne ihn von jeder anderen Stelle aus, z. B. einem Menüeintrag in einer Tabellenzeile, der die ID des Modals nennt
Must readMuss gelesen werden: Terms and similar texts: the primary button stays disabled until the body is scrolled to the end, with the reason as tooltipNutzungsbedingungen und ähnliche Texte: Der Primary-Button bleibt deaktiviert, bis der Inhalt bis zum Ende gescrollt ist, mit dem Grund als Tooltip
ConfirmBestätigen: Small modal, 400 px: the question as the title (“Delete board?”), one sentence on the consequence, Cancel | Delete (Danger) 50/50; focus starts on CancelKleines Modal, 400 px: die Frage als Titel („Delete board?“), ein Satz zur Folge, Cancel | Delete (Danger) 50/50; der Fokus startet auf Cancel
Unsaved changesUngespeicherte Änderungen: After a value was changed, ×, Cancel, Esc or a click on the scrim open the confirm modal “Discard changes?”: Keep editing | Discard (Danger); without changes it closes at once, Save never asksWurde ein Wert geändert, öffnen ×, Cancel, Esc oder ein Klick auf die Abdunklung das Bestätigungs-Modal „Discard changes?“: Keep editing | Discard (Danger); ohne Änderungen schließt es sofort, Save fragt nie
On phonesAuf Smartphones: Below 768 px: stays a modal, full width with 16 px to each side; footer stacked like the offcanvas, Save on top, Cancel below, both full widthUnter 768 px: bleibt ein Modal, volle Breite mit 16 px zu jeder Seite; Footer gestapelt wie beim Offcanvas, Save oben, Cancel darunter, beide volle Breite
SlidesFolien: A short tour (e.g. Feature overview): one slide at a time with a 14 px Medium title and text, “2 of 7” below in 12 px muted; Previous (secondary) | Next (primary) 50/50; Previous disabled on the first slide with the reason, Next becomes “Got it” on the last and closes; × closes at any time; arrow keys ← and → step; opening starts at the first slideEine kurze Tour (z. B. Feature overview): eine Folie nach der anderen mit Titel 14 px Medium und Text, darunter „2 of 7“ in 12 px gedämpft; Previous (Secondary) | Next (Primary) 50/50; Previous auf der ersten Folie deaktiviert mit Grund, Next wird auf der letzten zu „Got it“ und schließt; × schließt jederzeit; Pfeiltasten ← und → blättern; Öffnen beginnt bei der ersten Folie

Every caseAlle Fälle

		ExampleBeispiel
SmallKlein	Rename board The new name is shown to everyone who can see this board. Board name
Small · hoverKlein · Hover	Rename board The new name is shown to everyone who can see this board. Board name
MediumMittel	Edit report Pick the period and the stations for the weekly report. It is sent every Monday at 06:00 to everyone on the list. Report name Recipients
ConfirmBestätigen	Delete board? The board “Morning shift” and its 6 charts are removed for everyone. This cannot be undone.
Unsaved changesUngespeicherte Änderungen	Discard changes? Your changes will be lost.
Slides · firstFolien · erste	Feature overview Welcome to AGILOX Analytics Analyze your vehicle data on boards, one by one or in combination. This overview shows the key features in a few steps. 1 of 3
Slides · lastFolien · letzte	Feature overview Filters The filter applies to the current page. Switch to the global filter to use the same filter on every dashboard; it is highlighted in blue. 3 of 3
Stacked footerGestapelter Footer	Rename board The new name is shown to everyone who can see this board. Board name

Try itAusprobieren

Search dialog

UseVerwendung: One search for the whole app: vehicles, stations, pages, error codes and workflows, plus a question to the AIEine Suche für die ganze App: Fahrzeuge, Stationen, Seiten, Fehlercodes und Workflows, dazu eine Frage an die KI
OpeningÖffnen: ⌘K on a Mac, Ctrl+K on Windows, from the Search entry in the nav or from the search button; the shortcut is shown as key caps in both⌘K am Mac, Ctrl+K unter Windows, über den Search-Eintrag in der Navigation oder über den Such-Button; das Tastenkürzel steht in beiden als Tastenkappen
PanelPanel: Float surface, 1 px line border, radius 16 px, float shadow, 640 px wide, 96 px from the top of the screen, centered; scrim like the modalFloat-Fläche, 1 px Linienrahmen, Radius 16 px, Float-Schatten, 640 px breit, 96 px vom oberen Bildschirmrand, zentriert; Scrim wie beim Modal
PaddingInnenabstand: List panel: 8 px all round, the search field on topListenpanel: 8 px rundum, das Suchfeld oben
FieldFeld: The search field with icon, focused on opening, × clearsDas Suchfeld mit Icon, beim Öffnen fokussiert, × leert es
Recent searchesLetzte Suchen: While the field is empty: the last searches with the clock icon; choosing one puts it into the fieldSolange das Feld leer ist: die letzten Suchen mit dem Uhr-Icon; ein Klick setzt sie ins Feld
ResultsErgebnisse: Grouped under section labels in this order: Vehicles, Stations, Pages, Error codes, Workflows; at most 5 per group; empty groups are hiddenUnter Section Labels gruppiert, in dieser Reihenfolge: Vehicles, Stations, Pages, Error codes, Workflows; höchstens 5 pro Gruppe; leere Gruppen werden ausgeblendet
RowsZeilen: List rows of 32 px with the 40 px hit area: 20 px icon, name, muted details (serial number, place, description); no check markListenzeilen mit 32 px und 40 px Trefferfläche: 20 px Icon, Name, gedämpfte Details (Seriennummer, Ort, Beschreibung); kein Häkchen
Ask AIAsk AI: Always the last row once something is typed, below a 1 px line: “Ask AI: ‘term’”; opens the AI side panel with the questionImmer die letzte Zeile, sobald etwas getippt ist, unter einer 1-px-Linie: „Ask AI: ‘Begriff’“; öffnet das KI-Seitenpanel mit der Frage
No resultKein Ergebnis: “No result for ‘term’”, one hint line and Clear search; Ask AI stays below„No result for ‘Begriff’“, eine Hinweiszeile und Clear search; Ask AI bleibt darunter
KeyboardTastatur: Focus stays in the field; ↑ and ↓ move the focus ring through all rows, Enter opens the row, Esc closes; the first row is always markedDer Fokus bleibt im Feld; ↑ und ↓ bewegen den Fokusring durch alle Zeilen, Enter öffnet die Zeile, Esc schließt; die erste Zeile ist immer markiert
Closes onSchließt bei: Esc, a click on the scrim or choosing a row; focus goes back to where it was; the field is empty on the next openingEsc, Klick auf den Scrim oder Wahl einer Zeile; der Fokus springt zurück; beim nächsten Öffnen ist das Feld leer

Every caseAlle Fälle

	ExampleBeispiel
Empty · recent searchesLeer · letzte Suchen	Recent searches Falcon E-204 Buffer 2
Results · keyboardErgebnisse · Tastatur	Vehicles Falcon10072341\|Hall A Nimbus10072378\|Hall A Orion10072415\|Hall B Vega10072452\|Hall B Stations Buffer 2Hall B Production 02Hall A Charger 1Hall A Ask AI: ‘hall’
Results · hoverErgebnisse · Hover	Vehicles Falcon10072341\|Hall A Nimbus10072378\|Hall A Orion10072415\|Hall B Vega10072452\|Hall B Stations Buffer 2Hall B Production 02Hall A Charger 1Hall A Ask AI: ‘hall’
No resultKein Ergebnis	No result for ‘Pegasus’ Check the spelling, search for a serial number or ask the AI. Ask AI: ‘Pegasus’

TriggerAuslöser

	DefaultStandard	HoverHover	OpenOffen
Search buttonSearch button

Try it — press ⌘K or Ctrl+K, type, move with ↑ ↓, open with EnterAusprobieren – ⌘K oder Ctrl+K drücken, tippen, mit ↑ ↓ bewegen, mit Enter öffnen

Offcanvas

UseVerwendung: Editing one item next to the page it belongs to: details, settings, longer formsEin Element neben seiner Seite bearbeiten: Details, Einstellungen, längere Formulare
WidthBreite: 500 px, full height, slides in from the right; never wider than the screen500 px, volle Höhe, gleitet von rechts herein; nie breiter als der Bildschirm
PanelPanel: Float surface, square corners, flush with the right screen edge at full height, 1 px line border on the left, float shadow; scrim like the modalFläche float, eckig, bündig am rechten Bildschirmrand in voller Höhe, 1 px Rand in line links, Float-Schatten; Abdunklung wie beim Modal
HeaderKopfzeile: Same as the modal: title 16 px Geist Medium, × 16 px from the border; stays in placeWie beim Modal: Titel 16 px Geist Medium, × 16 px vom Rand; bleibt stehen
BodyInhalt: Scrolls on its own between header and footer, 16 px padding, 16 px between blocksScrollt eigenständig zwischen Kopf- und Fußzeile, 16 px Innenabstand, 16 px zwischen Blöcken
FooterFußleiste: Always visible, 16 px padding; a line on top only while the body scrolls; Cancel (secondary) | Save (primary) 50/50Immer sichtbar, 16 px Innenabstand; eine Linie oben nur, solange der Inhalt scrollt; Cancel (secondary) | Save (primary) 50/50
OpeningÖffnen: Like the modal: from its own button or from anywhere else by its idWie beim Modal: über einen eigenen Button oder von jeder anderen Stelle aus über seine ID
Stacked footerGestapelter Footer: Below 768 px: both buttons full width, Save on top, Cancel belowUnter 768 px: beide Buttons volle Breite, Save oben, Cancel darunter
Closes onSchließt bei: ×, Cancel, Esc or a click on the scrim; focus stays inside while open×, Cancel, Esc oder Klick auf die Abdunklung; der Fokus bleibt drinnen, solange es offen ist
Unsaved changesUngespeicherte Änderungen: Like the modal: after a value was changed, closing without Save asks “Discard changes?” firstWie beim Modal: Wurde ein Wert geändert, fragt Schließen ohne Save zuerst „Discard changes?“
Header actionsAktionen im Kopf: Optional (actions): dark tertiary inset icon buttons before the ×, e.g. Copy link; 24 px, radius 8 px, 40 px hit area, 4 px apart, each with its tooltip; at most two, the × always lastOptional (actions): dunkle Tertiary-Inset-Icon-Buttons vor dem ×, z. B. Copy link; 24 px, Radius 8 px, 40 px Trefferfläche, 4 px Abstand, jeder mit Tooltip; höchstens zwei, das × immer zuletzt

Every caseAlle Fälle

		ExampleBeispiel
Split footerGeteilter Footer	Edit station Station name Area Max. speed m/s Changes are sent to every vehicle on the next order. Vehicles that are driving finish their current order first. The station keeps its orders and statistics when it is renamed. Moving it to another area changes which shift leads see it on their boards. The max. speed applies within 2 m around the station and overrides the area speed. Vehicles that are offline get the change as soon as they reconnect.
Split footer · hoverGeteilter Footer · Hover	Edit station Station name Area Max. speed m/s Changes are sent to every vehicle on the next order. Vehicles that are driving finish their current order first. The station keeps its orders and statistics when it is renamed. Moving it to another area changes which shift leads see it on their boards. The max. speed applies within 2 m around the station and overrides the area speed. Vehicles that are offline get the change as soon as they reconnect.
Header actionsAktionen im Kopf	Edit station Station name Area Changes are sent to every vehicle on the next order. Vehicles that are driving finish their current order first.
Stacked footerGestapelter Footer	Edit station Station name Area Max. speed m/s Changes are sent to every vehicle on the next order. Vehicles that are driving finish their current order first.

Try itAusprobieren

Keyboard shortcuts

Every caseAlle Fälle

	ExampleBeispiel
KeysTasten	`⌘KEsc↑↓Enter`
Search buttonSearch button
Search button · hoverSuch-Button · Hover
In a menuIn einem Menü
In a menu · hoverIn einem Menü · Hover
In a tooltipIn einem Tooltip
OverviewÜbersicht	Keyboard shortcuts General Search `⌘K` Show keyboard shortcuts `?` Close panel or dialog `Esc` Lists and tables Move up and down `↑↓` Open or choose `Enter` Expand or collapse `←→` Number fields Step `↑↓` 10 steps `⇧↑`

Try it — press ? or open the overviewAusprobieren – ? drücken oder die Übersicht öffnen

Popover

Modal

Rename board

Rename board

Edit report

Delete board?

Discard changes?

Feature overview

Welcome to AGILOX Analytics

Boards

Filters

Feature overview

Welcome to AGILOX Analytics

Boards

Filters

Rename board

Search dialog

Offcanvas

Edit station

Edit station

Edit station

Edit station

Keyboard shortcuts

Keyboard shortcuts

General

Lists and tables

Number fields