Buttons

HeightHöhe

32 px, hit area 40 px32 px, Trefferfläche 40 px

TextText

14 px Geist Light14 px Geist Light

IconIcon

20 px, 6 px from the outer edge20 px, 6 px vom Außenrand

Gap icon–textAbstand Icon–Text

4 px4 px

Side paddingSeitenabstand

12 px from the outer edge, border included12 px vom Außenrand, Rand mitgezählt

RadiusRadius

12 px12 px

ColorsFarben

Primary fill App-700, hover App-800; Secondary and Tertiary text and icons App-900, hover App-200; pressed App-100 with an App-400 line, hover App-200; exception: the Dark variants are neutral and hover Secondary-200Primary-Fläche App-700, Hover App-800; Secondary und Tertiary Text und Icons App-900, Hover App-200; gedrückt App-100 mit App-400-Linie, Hover App-200; Ausnahme: die Dark-Varianten sind neutral und haben Hover Secondary-200

Icon onlyNur Icon

Dark tertiary; Tertiary in the app color only when the icon is the main action of a row or area, e.g. Edit in a table rowDark tertiary; Tertiary in der App-Farbe nur, wenn das Icon die Hauptaktion einer Zeile oder Fläche ist, z. B. Bearbeiten in einer Tabellenzeile

CaretSpitze

16 px, 4 px after the text16 px, 4 px nach dem Text

LabelBeschriftung

Short: verb + object, e.g. Save filter, Export CSV; max. 240 px, then … with the full text as a tooltipKurz: Verb + Objekt, z. B. Save filter, Export CSV; max. 240 px, dann … mit dem ganzen Text als Tooltip

DisabledDeaktiviert

Stays reachable with Tab and always says why in a tooltip (icon only: name and reason); clicks and Enter do nothingBleibt mit Tab erreichbar und sagt im Tooltip immer, warum (nur Icon: Name und Grund); Klicks und Enter bewirken nichts

LoadingLaden

Spinner 16 px in the text color replaces icon and text, the width stays; repeated clicks and Enter are ignoredSpinner 16 px in der Textfarbe ersetzt Icon und Text, die Breite bleibt; weitere Klicks und Enter werden ignoriert

PhoneTelefon

Below 768 px the main actions of a screen go full width, the primary on topUnter 768 px gehen die Hauptaktionen eines Screens über die volle Breite, Primary oben

OpenOffen

A button that opens a menu shows Open (Primary-100 with a Primary-400 line), never OnEin Button, der ein Menü öffnet, zeigt Offen (Primary-100 mit Primary-400-Linie), nie An

As a linkAls Link

A button that only goes to another page is a real link (href) with exactly the same look and states; disabled it has no link, stays reachable with Tab and shows the reason in a tooltipEin Button, der nur zu einer anderen Seite führt, ist ein echter Link (href) mit genau demselben Aussehen und denselben Zuständen; deaktiviert hat er keinen Link, bleibt mit Tab erreichbar und zeigt den Grund im Tooltip

UsageNutzung

PrimaryPrimary

The main action of an area — max. one Primary per area (panel, modal, page header)Die Hauptaktion einer Fläche – max. ein Primary pro Fläche (Panel, Modal, Seitenkopf)

SecondarySecondary

Side actions next to the Primary, e.g. Cancel, Export CSVNebenaktionen neben dem Primary, z. B. Cancel, Export CSV

TertiaryTertiary

Quiet actions, e.g. Clear filters, Show moreLeise Aktionen, z. B. Clear filters, Show more

DangerDanger

Only for irreversible actions, and always with a confirmationNur für unumkehrbare Aktionen und immer mit Bestätigung

BlueBlau

Only inside Notify and InfoNur in Notify und Info

Dark · WhiteDark · White

Only on cards, images and maps; icon-only buttons stay Dark tertiary everywhereNur auf Karten (Cards), Bildern und Maps; Icon-Buttons bleiben überall Dark tertiary

WordingWortwahl

CreateErstellen

A new standalone object: Create [object], e.g. Create map, Create board, Create order, Create workflow, Create chartEin neues eigenständiges Objekt: Create [Objekt], z. B. Create map, Create board, Create order, Create workflow, Create chart

AddHinzufügen

A part added to something that exists: Add [part], e.g. Add vehicle, Add action, Add widget, Add stationEin Teil, das zu etwas Bestehendem hinzukommt: Add [Teil], z. B. Add vehicle, Add action, Add widget, Add station

NeverNie

New … or Create new …; Upload; Retry or Load again; Reset all or Reset filterNew … oder Create new …; Upload; Retry oder Load again; Reset all oder Reset filter

ImportImportieren

Import [object], e.g. Import layout, Import workflowImport [Objekt], z. B. Import layout, Import workflow

Clear filtersFilter leeren

Empties filters and search, also at the end of the filter bar and the tableLeert Filter und Suche, auch am Ende der Filterleiste und der Tabelle

ResetZurücksetzen

Restores the defaultsStellt die Standardwerte wieder her

Try againErneut versuchen

After an error or a failed load, everywhereNach einem Fehler oder fehlgeschlagenen Laden, überall

ExportExportieren

Data from a view: Export [format], e.g. Export CSV, Export PNG; never a plain ExportDaten aus einer Ansicht: Export [Format], z. B. Export CSV, Export PNG; nie ein bloßes Export

DownloadHerunterladen

An existing file: Download [file], e.g. Download certificate, Download mapEine bestehende Datei: Download [Datei], z. B. Download certificate, Download map

UseVerwendung

Segmented control vs tabs: segmented switches a view or value of the same content (List/Map, Day/Week); tabs switch between content areasSegmented Control oder Tabs: Segmented wechselt Ansicht oder Wert desselben Inhalts (List/Map, Day/Week); Tabs wechseln zwischen Inhaltsbereichen

KeyboardTastatur

One choice like radio buttons: Tab reaches the chosen entry, the arrow keys switchEine Wahl wie Radio-Buttons: Tab erreicht den gewählten Eintrag, die Pfeiltasten wechseln

BarLeiste

32 px, 4 px inset, 1 px secondary-300 line32 px, 4 px Innenabstand, 1-px-Linie secondary-300

EntriesEinträge

24 px high, 8 px side padding, 4 px apart, hit area 40 px24 px hoch, 8 px Seitenabstand, 4 px Abstand, Trefferfläche 40 px

TextText

14 px Geist Light, icon 16 px14 px Geist Light, Icon 16 px

Icon onlyNur Icon

Entry 24 × 24 px, icon centeredEintrag 24 × 24 px, Icon mittig

OnAn

Primary-100 fill, Primary-400 border; hover Primary-200Fläche Primary-100, Rand Primary-400; Hover Primary-200

RadiusRadius

Bar 12 px, entries 8 px (12 − 4 px inset)Leiste 12 px, Einträge 8 px (12 − 4 px Innenabstand)

TextText

12 px Geist Light, secondary-60012 px Geist Light, secondary-600

ItemEintrag

20 px high, 8 px side padding, radius 8 px, hit area 40 px20 px hoch, 8 px Seitenabstand, Radius 8 px, Trefferfläche 40 px

First itemErster Eintrag

Text only, no iconNur Text, kein Icon

SeparatorTrenner

Arrow right 14 px, secondary-600Pfeil rechts 14 px, secondary-600

HoverHover

App-200 surface, text secondary-900Fläche App-200, Text secondary-900

Last itemLetzter Eintrag

Always the current page: Medium, secondary-900, not a link, no hoverImmer die aktuelle Seite: Medium, secondary-900, kein Link, kein Hover

LinksLinks

Every item before the last is a real link to its page (href); without one it points nowhereJeder Eintrag vor dem letzten ist ein echter Link zu seiner Seite (href); ohne zeigt er nirgendwohin

Long labelsLange Labels

Max. 160 px, then … with the full label as a tooltipMax. 160 px, dann … mit dem ganzen Label als Tooltip

CollapseEinklappen

Only when the trail does not fit: the middle steps fold into …, first and last stay; click … to show every step, the trail then stays open until you leave the pageNur wenn der Pfad nicht passt: die mittleren Schritte klappen in … ein, erster und letzter bleiben; Klick auf … zeigt alle Schritte, der Pfad bleibt dann offen, bis man die Seite verlässt

HeightHöhe

24 px, fully round, hit area 40 px (Input: only the ×)24 px, ganz rund, Trefferfläche 40 px (Input: nur das ×)

TextText

14 px Geist Light, secondary-90014 px Geist Light, secondary-900

Side paddingSeitenabstand

12 px from the outer edge, border included; the × button sits 4 px from the right edge12 px vom Außenrand, Rand mitgezählt; der ×-Button sitzt 4 px vom rechten Rand

GapAbstand

4 px to an icon and to the ×4 px zum Icon und zum ×

InputInput

Remove: small dark tertiary inset button, 16 px with the 16 px circled × (o_cross) in secondary-900, on hover the filled circle (o_cross_filled); an exception to the 24 px inset button, which does not fit a 24 px chip; 4 px to the frame, 40 px hit area; no fill behind the icon, only the × reactsEntfernen: kleiner Dark-Tertiary-Inset-Button, 16 px mit dem 16-px-× im Kreis (o_cross) in secondary-900, beim Hover der gefüllte Kreis (o_cross_filled); eine Ausnahme vom 24-px-Inset-Button, der nicht in einen 24-px-Chip passt; 4 px zum Rahmen, 40 px Trefferfläche; keine Fläche hinter dem Icon, nur das × reagiert

WhereWo

Input chips only inside fields (multi select, inputs); in a filter bar a set value is always the removable filter buttonInput-Chips nur in Feldern (Multi-Select, Inputs); in einer Filterleiste ist ein gesetzter Wert immer der entfernbare Filter-Button

LineLinie

1 px secondary-400; hover Primary-200 with a Primary-400 line; on Primary-100 with a Primary-400 line and a check, hover Primary-2001 px secondary-400; Hover Primary-200 mit Primary-400-Linie; an: Primary-100 mit Primary-400-Linie und Haken, Hover Primary-200

CheckHaken

Off: 22 px side padding; on: the 16 px check takes that space, so the chip keeps its width and nothing next to it movesAus: 22 px Seitenabstand; an: der 16-px-Haken nimmt diesen Platz ein, der Chip behält seine Breite und daneben verschiebt sich nichts

PartsTeile

Filter bar (the row) · Filter group (the mode and what it controls) · Filter segment (one entry of the group) · Filter button (a single filter after the group)Filter bar (die Zeile) · Filter group (der Modus und was er steuert) · Filter segment (ein Eintrag der Gruppe) · Filter button (ein einzelner Filter nach der Gruppe)

HeightHöhe

32 px, hit area 40 px32 px, Trefferfläche 40 px

ContentsInhalt

Only filters and search; page actions such as Create chart or Export CSV sit in the page header above the barNur Filter und Suche; Seitenaktionen wie Create chart oder Export CSV stehen im Seitenkopf über der Leiste

TextText

14 px Geist Light, the value Medium, the key secondary-700 (white in dark)14 px Geist Light, der Wert Medium, der Schlüssel secondary-700 (weiß im Dark Mode)

IconsIcons

20 px; caret arrow down 16 px, turns while open20 px; Pfeil nach unten 16 px, dreht sich, solange offen

RadiusRadius

12 px like Button; the first and last segment fill the corners, no inner line12 px wie Button; erstes und letztes Segment füllen die Ecken, keine innere Linie

LinesLinien

Group and filter button 1 px secondary-300, separators secondary-200; Global filter: group line Blue-700Gruppe und Filter button 1 px secondary-300, Trenner secondary-200; Global filter: Gruppenlinie Blue-700

Filter groupFilter group

The mode segment comes first and decides what the group controls — time frame, vehicles, granularity, excluded days. The other segments have no fill; hover and open are the same: Primary-200, no inner lineDas Modus-Segment steht vorne und bestimmt, was die Gruppe steuert – Zeitraum, Fahrzeuge, Granularität, ausgeschlossene Tage. Die anderen Segmente haben keine Fläche; Hover und offen sind gleich: Primary-200, keine innere Linie

Global filterGlobal filter

The mode segment turns Blue-100 with a Blue-900 icon and the group line Blue-700 — blue means “applies above this page”; segments hover and open are the same: Blue-200, no inner lineDas Modus-Segment wird Blue-100 mit Blue-900-Icon, die Gruppenlinie Blue-700 – Blau heißt „gilt über dieser Seite“; Segmente Hover und offen gleich: Blue-200, keine innere Linie

Filter buttonFilter button

Filled (Primary-100, Primary-400 line) only while its value differs from the default; open the same Primary-100 with a Primary-400 line as open segments and menu buttons, the caret turnsGefüllt (Primary-100, Primary-400-Linie) nur, solange der Wert vom Standard abweicht; offen dasselbe Primary-100 mit Primary-400-Linie wie offene Segmente und Menü-Buttons, die Spitze dreht sich

RemovableEntfernbar

A filter set from somewhere else, e.g. an order picked in a table row — always filled, only the circled × is clickable (filled on hover, no fill behind it) and shows everything again; the only way a filter bar shows a removable value, input chips stay inside fieldsEin Filter, der woanders gesetzt wurde, z. B. ein Auftrag aus einer Tabellenzeile – immer gefüllt, nur das × im Kreis ist klickbar (beim Hover gefüllt, keine Fläche dahinter) und zeigt wieder alles; die einzige Art, wie eine Filterleiste einen entfernbaren Wert zeigt, Input-Chips bleiben in Feldern

ResultErgebnis

Once anything differs from how the page opened: “x of y” in 12 px text-muted and Clear filters (tertiary) at the end of the bar, like tables; Clear filters empties the filters and the search and brings the bar back to how the page openedSobald etwas vom Seitenstart abweicht: „x of y“ in 12 px text-muted und Clear filters (Tertiary) am Ende der Leiste, wie bei Tabellen; Clear filters leert Filter und Suche und bringt die Leiste zurück auf den Seitenstart

Too narrowZu schmal

The group stands alone in the first row and the filter buttons follow below; if the group itself does not fit, it breaks into full rows with straight separatorsDie Gruppe steht allein in der ersten Zeile, die Filter buttons folgen darunter; passt die Gruppe selbst nicht, bricht sie in volle Zeilen mit geraden Trennern um

UseVerwendung

Shows what a control is set to, attached to it — e.g. the own filter of a board next to the board filter buttonZeigt, worauf ein Bedienelement steht, direkt daran angehängt — z. B. den eigenen Filter eines Boards neben dem Board-Filter-Button

RightRechts

32 px high, tucked 12 px under the control, 20 px left padding32 px hoch, 12 px unter das Bedienelement geschoben, 20 px Abstand links

BottomUnten

Below 768 px it sits under its button, full width, tucked 12 px under itUnter 768 px sitzt es unter seinem Button, volle Breite, 12 px darunter geschoben

ColorsFarben

App: primary-100 with a primary-400 border · Neutral: secondary-100 with a secondary-300 borderApp: primary-100 mit Rand primary-400 · Neutral: secondary-100 mit Rand secondary-300

Long textLanger Text

Cut with …; the full text appears as a tooltipMit … gekürzt; der ganze Text erscheint als Tooltip

InteractionInteraktion

None: information only, no hover, no pointer cursor, not clickableKeine: nur Information, kein Hover, kein Hand-Cursor, nicht klickbar

UseVerwendung

A choice that starts something bigger: open a board for analysis, a file to download, a suggested question; in grids of two columns, one column on phonesEine Auswahl, die etwas Größeres startet: ein Board zur Analyse öffnen, eine Datei herunterladen, eine vorgeschlagene Frage; in Rastern mit zwei Spalten, auf Handys eine Spalte

FrameRahmen

Surface, 1 px line border, radius 12 px, 8 px padding, at least 48 px highFläche, 1-px-Rahmen in Linienfarbe, Radius 12 px, 8 px Innenabstand, mindestens 48 px hoch

IconIcon

32 px square, radius 8 px, Primary-200, 20 px icon32-px-Quadrat, Radius 8 px, Primary-200, 20-px-Icon

TextText

14 px Geist Light, secondary-900, 12 px gap to the icon; optional muted 12 px line below; one line each, then …14 px Geist Light, secondary-900, 12 px Abstand zum Icon; optional eine gedämpfte 12-px-Zeile darunter; je eine Zeile, dann …

HoverHover

Secondary-100 (a large area)Secondary-100 (eine große Fläche)

DisabledDeaktiviert

Secondary-100 without border, text and icon secondary-400, icon square Secondary-200, no hover; stays reachable with Tab, the tooltip says why (reason), a click goes nowhereSecondary-100 ohne Rahmen, Text und Icon secondary-400, Icon-Quadrat Secondary-200, kein Hover; bleibt mit Tab erreichbar, der Tooltip sagt warum (reason), ein Klick führt nirgendwohin