Navigation

WidthBreite

Expanded 240 px, collapsed 56 px with icons only; the choice is remembered per viewerAusgeklappt 240 px, eingeklappt 56 px nur mit Icons; die Wahl wird pro Betrachter gemerkt

SurfaceFläche

secondary-000, 1 px secondary-200 line on the right, full height of the appsecondary-000, 1-px-Linie secondary-200 rechts, volle Höhe der App

HeaderKopfzeile

56 px with the app switcher: a 32 px button with the app logo 24 px, 4 px from every edge of its hover area and centered over the icons below, app name 16 px Geist Medium and a 16 px chevron56 px mit dem App-Wechsler: ein 32-px-Button mit dem App-Logo 24 px, 4 px von jedem Rand seiner Hover-Fläche und mittig über den Icons darunter, App-Name 16 px Geist Medium und ein 16-px-Chevron

ItemsEinträge

Nav list items, 2 px apart, 12 px from the edges; long lists scroll inside the navNav-List-Einträge, 2 px Abstand, 12 px vom Rand; lange Listen scrollen innerhalb der Nav

GroupsGruppen

Pages of the app on top, with a 1 px line-color divider between groups of items; the personal things, Notifications and the account, sit at the bottom below a 1 px line, always visibleOben die Seiten der App, mit einer 1-px-Trennlinie in der Linienfarbe zwischen Gruppen von Einträgen; das Persönliche, Notifications und das Konto, sitzt unten unter einer 1-px-Linie, immer sichtbar

NotificationsNotifications

Not a page: a button directly above the account that opens an offcanvas from the right; never the location look, Primary-200 while open; the count pill stays on the entry and clears after “Mark all as read”Keine Seite: ein Button direkt über dem Konto, der ein Offcanvas von rechts öffnet; nie der Look des aktuellen Orts, Primary-200, solange offen; die Anzahl-Pill bleibt am Eintrag und verschwindet nach „Mark all as read“

SearchSuche

Optional entry at the top, right below the header and before the pages: nav list row with lens_search, “Search” and the shortcut as key caps (⌘ K on a Mac, Ctrl K on Windows); opens the search dialog; never the location look, Primary-200 while open; collapsed only the icon with the tooltip “Search · ⌘K”Optionaler Eintrag oben, direkt unter dem Kopf und vor den Seiten: Nav-List-Zeile mit lens_search, „Search“ und dem Tastenkürzel als Tastenkappen (⌘ K am Mac, Ctrl K unter Windows); öffnet den Suchdialog; nie der Ort-Look, Primary-200 solange offen; eingeklappt nur das Icon mit dem Tooltip „Search · ⌘K“

AccountKonto

Initials circle and name at the bottom; opens a menu with Settings, Help, Language and Log outKreis mit Initialen und Name ganz unten; öffnet ein Menü mit Settings, Help, Language und Log out

Bottom entriesEinträge unten

Optional nav list rows above Notifications, e.g. Help or a link back; never the location look; an entry that is also in the account menu leaves the menuOptionale Nav-Listen-Zeilen über Notifications, z. B. Help oder ein Link zurück; nie im Look des aktuellen Orts; ein Eintrag, der auch im Kontomenü steht, fällt dort weg

HelpHilfe

Optional entry at the top of the bottom list, after Styleguide (help with the id of a dialog): opens that dialog, like the Notifications button opens its offcanvas; never the location look, Primary-200 while open; Help then leaves the account menuOptionaler Eintrag oben in der unteren Liste, nach Styleguide (help mit der ID eines Dialogs): öffnet diesen Dialog, so wie der Notifications-Button sein Offcanvas öffnet; nie der Ort-Look, Primary-200 solange offen; Help verschwindet dann aus dem Konto-Menü

Account menu itemsEinträge im Kontomenü

An app may add its own items before Log out, after a 1 px dividerEine App kann eigene Einträge vor Log out ergänzen, nach einer 1-px-Trennlinie

LinksLinks

Every entry that goes to a page is a real link (href): nav items, sub nav items, mobile tabs, More sheet rows and account menu items; Cmd/Ctrl-click opens a new tab; entries that open something (Search, Notifications, Help, account, More) stay buttons; a disabled entry never has a linkJeder Eintrag, der zu einer Seite führt, ist ein echter Link (href): Nav-Einträge, Sub-Nav-Einträge, mobile Tabs, Zeilen im More-Sheet und Einträge im Konto-Menü; Cmd/Strg-Klick öffnet einen neuen Tab; Einträge, die etwas öffnen (Search, Notifications, Help, Konto, More), bleiben Buttons; ein deaktivierter Eintrag hat nie einen Link

ToggleUmschalter

Dark tertiary inset icon button 24 px, nav_collapse, at the top right of the header; in the collapsed nav the logo takes its placeDunkler Tertiary-Inset-Icon-Button 24 px, nav_collapse, oben rechts im Kopf; in der eingeklappten Nav übernimmt das Logo seine Aufgabe

CollapsedEingeklappt

Only the logo and icons; nothing moves when collapsing; names show as a tooltip on hover and focus, counts and the Beta and Upgrade dots sit on the icon, a group holding the open page is Primary-300; menus open to the rightNur Logo und Icons; beim Einklappen verschiebt sich nichts; Namen erscheinen als Tooltip bei Hover und Fokus, Anzahlen und die Beta- und Upgrade-Punkte sitzen auf dem Icon, eine Gruppe mit der offenen Seite ist Primary-300; Menüs öffnen sich nach rechts

Narrow screensSchmale Bildschirme

Below 768 px the mobile tab bar replaces the nav; sub pages use the mobile sub navUnter 768 px ersetzt die Mobile Tab Bar die Nav; Unterseiten nutzen die Mobile Sub Nav

NotificationsNotifications

PanelPanel

Narrow offcanvas from the right, 16 px padding, title “Notifications” 16 px Medium and a close buttonSchmales Offcanvas von rechts, 16 px Innenabstand, Titel „Notifications“ 16 px Medium und ein Schließen-Button

Mark all as readMark all as read

Tertiary button at the top of the body; only while something is unreadTertiary-Button oben im Inhalt; nur solange etwas ungelesen ist

GroupsGruppen

Grouped by day under the section labels “Today”, “Yesterday” and “Earlier”, newest first; Today and Yesterday show only the time (08:12), Earlier the date (2026-11-07)Nach Tag gruppiert unter den Abschnittslabels „Today“, „Yesterday“ und „Earlier“, neueste zuerst; Today und Yesterday zeigen nur die Uhrzeit (08:12), Earlier das Datum (2026-11-07)

RowsZeilen

20 px icon, title 14 px Medium with the time or date in muted 12 px at the right, one line of text; 1 px lines between rows; the whole row is one link, at least 40 px high, hover Secondary-100, focus ring20-px-Icon, Titel 14 px Medium mit Uhrzeit oder Datum in gedämpften 12 px rechts, eine Zeile Text; 1-px-Linien zwischen den Zeilen; die ganze Zeile ist ein Link, mindestens 40 px hoch, Hover Secondary-100, Fokusring

ClickKlick

Marks the notification as read (the dot disappears, the count on the nav button drops), closes the offcanvas and goes to the notification’s targetMarkiert die Notification als gelesen (der Punkt verschwindet, die Anzahl am Nav-Button sinkt), schließt das Offcanvas und führt zum Ziel der Notification

UnreadUngelesen

8 px app-color dot at the end of the row with the screen-reader text “Unread”8-px-Punkt in App-Farbe am Ende der Zeile mit dem Screenreader-Text „Unread“

EmptyLeer

The “You’re up to date” empty state: “There are no new notifications.”Der Leerzustand „You’re up to date“: „There are no new notifications.“

TriggerAuslöser

Logo, app name and chevron form one button; hover Primary-200, Primary-200 while open, the chevron turns upLogo, App-Name und Chevron bilden einen Button; Hover Primary-200, Primary-200 solange offen, der Chevron zeigt nach oben

PanelPanel

Floating panel 216 px wide, 8 px padding, 6 px below the headerSchwebendes Panel 216 px breit, 8 px Innenabstand, 6 px unter dem Kopf

RowsZeilen

One per app: 24 px app icon (favicon), name 14 px, one muted 12 px line below; at least 32 px, 40 px hit areaEine pro App: 24-px-App-Icon (Favicon), Name 14 px, darunter eine gedämpfte Zeile 12 px; mindestens 32 px, 40 px Klickfläche

ColorsFarben

Hover Primary-200; the current app is the location: Primary-300 with Medium nameHover Primary-200; die aktuelle App ist der Standort: Primary-300 mit Medium-Name

KeyboardTastatur

Opens on the current app; arrow keys, Home and End move, Enter switches, Esc or a click outside closes and focus returns to the logoÖffnet auf der aktuellen App; Pfeiltasten, Pos1 und Ende bewegen, Enter wechselt, Esc oder ein Klick außerhalb schließt und der Fokus kehrt zum Logo zurück

CollapsedEingeklappt

Only the logo is visible; on hover and focus it turns into the expand icon (nav_expand), a click expands the nav; apps are switched in the expanded navNur das Logo ist sichtbar; bei Hover und Fokus wird es zum Ausklapp-Icon (nav_expand), ein Klick klappt die Nav aus; Apps wechselt man in der ausgeklappten Nav

HeightHöhe

32 px, 40 px hit area, radius 8 px, 6 px side padding32 px, 40 px Klickfläche, Radius 8 px, 6 px Seitenabstand

ContentInhalt

20 px icon, 8 px gap, 14 px Geist Light label, secondary-900; one line, then …20-px-Icon, 8 px Abstand, Label 14 px Geist Light, secondary-900; eine Zeile, dann …

ColorsFarben

No fill, hover Primary-200, active Primary-300 with Medium textKeine Fläche, Hover Primary-200, aktiv Primary-300 mit Medium-Text

DisabledDeaktiviert

Only for temporary reasons, with a reason tooltip: secondary-400, no hover, cannot be clickedNur aus vorübergehenden Gründen, mit einem Grund als Tooltip: secondary-400, kein Hover, nicht klickbar

CountAnzahl

Dark pill at the right end; in the collapsed nav on the corner of the iconDunkle Pill am rechten Ende; in der eingeklappten Nav an der Ecke des Icons

BetaBeta

Small light gray Tag “Beta” at the right end, where the count sits; in the collapsed nav an 8 px app-color dot on the corner of the icon with the tooltip “Beta”Kleiner hellgrauer Tag „Beta“ am rechten Ende, wo die Anzahl sitzt; in der eingeklappten Nav ein 8-px-Punkt in App-Farbe an der Ecke des Icons mit dem Tooltip „Beta“

UpgradeUpgrade

Missing subscription: the entry stays visible and clickable, not gray, with a small dark app-color Tag “Upgrade” at the right end; in the collapsed nav the app-color dot with the tooltip “Upgrade”; the page shows the upselling empty state; tag and dot disappear as soon as the subscription is there, without reloadingFehlendes Abo: Der Eintrag bleibt sichtbar und klickbar, nicht grau, mit einem kleinen dunklen Tag „Upgrade“ in der App-Farbe am rechten Ende; in der eingeklappten Nav der Punkt in der App-Farbe mit dem Tooltip „Upgrade“; die Seite zeigt den Upselling-Leerzustand; Tag und Punkt verschwinden, sobald das Abo da ist, ohne Neuladen

Missing rightFehlendes Recht

The entry is hiddenDer Eintrag wird ausgeblendet

DividerTrennlinie

1 px line, 6 px above and below, between groups of items; also between sub-items of one group1-px-Linie, 6 px darüber und darunter, zwischen Gruppen von Einträgen; auch zwischen Untereinträgen einer Gruppe

GroupGruppe

Chevron 16 px at the right end, pointing right when closed and down when open; the whole row opens and closesChevron 16 px am rechten Ende, zeigt geschlossen nach rechts und offen nach unten; die ganze Zeile öffnet und schließt

Sub-itemsUntereinträge

No icon, text starts under the parent’s label (34 px indent)Kein Icon, der Text beginnt unter dem Label des Elterneintrags (34 px Einzug)

Open page in a groupOffene Seite in einer Gruppe

Parent label Medium; in the collapsed nav the parent is Primary-300Label des Elterneintrags Medium; in der eingeklappten Nav ist der Elterneintrag Primary-300

UseVerwendung

A task in a few fixed steps (3 to 5) that belong together, e.g. Add vehicle; one step per screenEine Aufgabe in wenigen festen Schritten (3 bis 5), die zusammengehören, z. B. Add vehicle; ein Schritt pro Ansicht

WhereWo

At the top of a modal, an offcanvas or a page, below the title and above the content, across the full widthOben in einem Modal, einem Offcanvas oder auf einer Seite, unter dem Titel und über dem Inhalt, über die volle Breite

StepsSchritte

Number circle 24 px and the step name, 14 px Light, 8 px apart; the steps are joined by a 1 px secondary-300 line that fills the spaceNummernkreis 24 px und der Schrittname, 14 px Light, 8 px Abstand; die Schritte sind durch eine 1-px-secondary-300-Linie verbunden, die den Platz füllt

DoneErledigt

Circle with a 1 px secondary-900 ring and a 16 px check; the step can be clicked to go back, hover Primary-200Kreis mit 1-px-secondary-900-Ring und 16-px-Haken; der Schritt ist klickbar, um zurückzugehen, Hover Primary-200

CurrentAktuell

Primary-300 circle and the name in Medium; marked as the current step for screen readersPrimary-300-Kreis und der Name in Medium; für Screenreader als aktueller Schritt markiert

UpcomingKommend

Circle with a secondary-400 ring, text-muted; can’t be clicked, because steps can’t be skipped; the tooltip says whyKreis mit secondary-400-Ring, text-muted; nicht klickbar, weil Schritte nicht übersprungen werden können; der Tooltip sagt warum

FooterFußleiste

Back | Next split 50/50 in panels; Back is disabled with a reason on the first step; on the last step Next becomes the action (“Add vehicle”); Next stays disabled with a reason while the step is incompleteBack | Next 50/50 geteilt in Panels; Back ist im ersten Schritt mit Grund deaktiviert; im letzten Schritt wird Next zur Aktion („Add vehicle“); Next bleibt mit Grund deaktiviert, solange der Schritt unvollständig ist

KeyboardTastatur

Steps are buttons in the tab order; in a modal ← → go back and forward while the focus is not in a fieldSchritte sind Buttons in der Tab-Reihenfolge; in einem Modal gehen ← → zurück und vor, solange der Fokus nicht in einem Feld ist

Narrow screensSchmale Bildschirme

Only the circles and the name of the current step; the other names stay for screen readersNur die Kreise und der Name des aktuellen Schritts; die anderen Namen bleiben für Screenreader

UseVerwendung

Things in a hierarchy, e.g. customer → union → vehicles: to open one (navigation) or to check several (filter, report)Dinge in einer Hierarchie, z. B. Kunde → Union → Fahrzeuge: um eines zu öffnen (Navigation) oder mehrere anzuhaken (Filter, Bericht)

RowsZeilen

32 px list rows with the 40 px hit area, radius 8 px, 6 px left padding, no gap32-px-Listenzeilen mit 40-px-Trefferfläche, 8 px Radius, 6 px Innenabstand links, kein Abstand

IndentEinzug

24 px per level (16 px chevron + 8 px gap); rows without children keep the chevron space, so the names line up24 px pro Ebene (16-px-Chevron + 8 px Abstand); Zeilen ohne Kinder behalten den Chevron-Platz, damit die Namen bündig stehen

ChevronPfeil

16 px, pointing right when closed and down when open; a click on it opens and closes16 px, zeigt geschlossen nach rechts und offen nach unten; ein Klick darauf öffnet und schließt

ContentInhalt

Optional 20 px icon, the name (one line, then … with a tooltip), the status dot with tooltip on vehicles and the number of vehicles as a light pill on groupsOptionales 20-px-Icon, der Name (eine Zeile, dann … mit Tooltip), der Statuspunkt mit Tooltip bei Fahrzeugen und die Anzahl der Fahrzeuge als helle Pill bei Gruppen

ColorsFarben

Hover Primary-200; the open item is the location: Primary-300 with Medium name, also on hoverHover Primary-200; der geöffnete Eintrag ist der Ort: Primary-300 mit Name in Medium, auch beim Hover

CheckboxesCheckboxen

In checkbox mode the CheckboxBox sits before the icon; checking a group checks everything below it; a partly checked group shows the mixed boxIm Checkbox-Modus sitzt die CheckboxBox vor dem Icon; eine Gruppe anhaken hakt alles darunter an; eine teilweise angehakte Gruppe zeigt die gemischte Box

KeyboardTastatur

One tab stop; ↑ ↓ move, → opens or goes to the first child, ← closes or goes to the parent, Home and End jump, Enter or Space opens or checks; the focus ring shows together with the hover fillEin Tab-Stopp; ↑ ↓ bewegen, → öffnet oder geht zum ersten Kind, ← schließt oder geht zum Elternteil, Pos1 und Ende springen, Enter oder Leertaste öffnet oder hakt an; der Fokusring erscheint zusammen mit der Hover-Füllung

Screen readersScreenreader

tree with tree items: level, position, open state and the selected or checked (mixed) statetree mit tree items: Ebene, Position, Offen-Zustand und der ausgewählte oder angehakte (gemischte) Zustand

UseVerwendung

Main navigation below 768 px, at the bottom of the screen; replaces the nav and the hamburger menuHauptnavigation unter 768 px, am unteren Bildschirmrand; ersetzt die Nav und das Hamburger-Menü

TabsTabs

Up to 4 main areas plus More, equal width; 20 px icon above a 12 px label, 2 px apartBis zu 4 Hauptbereiche plus More, gleich breit; 20-px-Icon über einem 12-px-Label, 2 px Abstand

SizeGröße

Radius 8 px, 40 px hit area, 4 px apart; 1 px line on top, surface backgroundRadius 8 px, 40 px Klickfläche, 4 px Abstand; 1-px-Linie oben, Hintergrund surface

ColorsFarben

No fill, hover Primary-200; the current area is the location: Primary-300 with Medium label, without changing its widthKeine Fläche, Hover Primary-200; der aktuelle Bereich ist der Standort: Primary-300 mit Medium-Label, ohne die Breite zu ändern

MoreMehr

Fifth tab; opens the More sheet and is Primary-200 while it is open; it shows the location when the open area comes from the sheetFünfter Tab; öffnet das More-Sheet und ist Primary-200, solange es offen ist; zeigt den Standort, wenn der offene Bereich aus dem Sheet kommt

More sheetMore-Sheet

Floating panel from the bottom, radius 16 px on top, 8 px padding, scrim behind; title “More” 14 px Medium and a close buttonSchwebendes Panel von unten, Radius 16 px oben, 8 px Innenabstand, Scrim dahinter; Titel „More“ 14 px Medium und ein Schließen-Button

App linksApp-Links

In a real app every other app in the app switcher and in the More sheet is a link to that app (appLinks); without links the guide examples only switch the app colorIn einer echten App ist jede andere App im App-Wechsler und im More-Sheet ein Link zu dieser App (appLinks); ohne Links wechseln die Guide-Beispiele nur die App-Farbe

Account linksAccount-Links

Settings and Language can go to a page in the account menu and the More sheet (accountLinks); Log out stays a buttonSettings und Language können im Account-Menü und im More-Sheet auf eine Seite führen (accountLinks); Log out bleibt ein Button

Help in the sheetHelp im Sheet

Help and Notifications follow the page entries and open their dialog; the sheet closes, the title and the location stayHelp und Notifications folgen auf die Seiteneinträge und öffnen ihren Dialog; das Sheet schließt, Titel und Ort bleiben

Sheet rowsSheet-Zeilen

Nav list rows of 32 px without gaps: the remaining areas, the apps with their logos, then the account and its entries, divided by 1 px lines; one level, no accordionsNav-List-Zeilen mit 32 px ohne Abstand: die übrigen Bereiche, die Apps mit ihren Logos, dann das Konto und seine Einträge, getrennt durch 1-px-Linien; eine Ebene, keine Akkordeons

ClosingSchließen

Close button, a tap on the scrim, Esc or choosing a row; focus returns to MoreSchließen-Button, Tippen auf den Scrim, Esc oder Wahl einer Zeile; der Fokus kehrt zu More zurück

TopOben

The page title and the mobile sub nav stay at the top while the page scrollsSeitentitel und Mobile Sub Nav bleiben oben, während die Seite scrollt

UseVerwendung

Sub pages of the open page on screens below 768 px, right below the page title; both stay at the top while the page scrollsUnterseiten der offenen Seite auf Bildschirmen unter 768 px, direkt unter dem Seitentitel; beide bleiben oben, während die Seite scrollt

ItemsEinträge

32 px, 40 px hit area, radius 12 px, 16 px side padding, 14 px Geist Light, the active item Medium without changing its width, 8 px apart32 px, 40 px Klickfläche, Radius 12 px, 16 px Seitenabstand, 14 px Geist Light, der aktive Eintrag Medium, ohne seine Breite zu ändern, 8 px Abstand

ColorsFarben

Primary-100, hover Primary-200, active Primary-300 with Medium text, like tabsPrimary-100, Hover Primary-200, aktiv Primary-300 mit Medium-Text, wie Tabs

ScrollScrollen

Scrolls sideways, no scroll bar; the open sub page always scrolls into viewScrollt seitwärts, ohne Scrollbalken; die offene Unterseite scrollt immer ins Bild

FadeVerlauf

32 px fade to the surface on each side where more items are hidden32 px Verlauf zur Fläche auf jeder Seite, auf der weitere Einträge verborgen sind

MoreMehr

Dark tertiary button at the right end, lists every sub pageDunkler Tertiary-Button am rechten Ende, listet alle Unterseiten