Colors

Primary per app

100200300400500600700800900950

Analytics / World

Also the fixed success green in every app (success text, icon, fill, border and background), so success never takes another app’s colorAuch das feste Erfolgs-Grün in allen Apps (Erfolgs-Text, -Icon, -Fläche, -Rand und -Hintergrund), damit Erfolg nie die Farbe einer anderen App annimmt

lifecycle

plan

academy

docs

selftest

Secondary

000100200300400500600700800900

Red

100200300400500600700800900950

Yellow

100200300400500600700800900950

States

Vehicle states in productivity charts and occupancy bars. Fixed tones, the same in every app.Fahrzeugzustände in Produktivitäts-Charts und Belegungsbalken. Feste Töne, in jeder App gleich.

Busystate-busy
Chargingstate-charging
Waiting for orderstate-waiting-order
Waiting for signalstate-waiting-signal
Protective field violationstate-protective
Obstructionstate-obstruction
Process issuestate-process-issue
Technical issuestate-technical-issue
Manual + Maintenancestate-manual
Offlinestate-offline
state-error
state-no-data
state-later

Chart

Series colors for charts, used in this order (WidgetColors in the apps). The same in light and dark mode.Reihenfarben für Charts, in dieser Reihenfolge verwendet (WidgetColors in den Apps). In Hell und Dunkel gleich.

0102030405060708091011121314
1516171819202122232425262728

Roles

Grouped by library tone; each tone lists the roles that use it and what for. “App” follows the app color; a different dark-mode tone is noted.Nach Library-Ton gruppiert; jeder Ton nennt die Rollen, die ihn nutzen, und wofür. „App“ folgt der App-Farbe; ein anderer Ton im Dark Mode steht dabei.

Secondary 000
  • page – Page backgroundSeitenhintergrund
  • surface – Cards, panels, fieldsKarten, Panels, Felder
  • float – White buttons that float on a mapWeiße Buttons, die auf einer Karte schweben (dark Secondary 100dunkel Secondary 100)
  • on-fill – Text on colored fills (always white)Text auf farbigen Flächen (immer weiß)
  • on-dark – Text on the dark buttonText auf dem dunklen Button
Secondary 100
  • map – Map background in examplesKartenhintergrund in Beispielen
  • heat-empty
Secondary 200
  • line – Dividers and card bordersTrennlinien und Kartenränder
  • map-grid – Grid lines on the mapRasterlinien auf der Karte
Secondary 500
  • status-inactive
  • failure-warning (dark Secondary 500dunkel Secondary 500)
Secondary 600
  • text-faint – Placeholders, captionsPlatzhalter, Bildunterschriften
Secondary 700
  • label – Labels before a value (“Vehicles: 3”)Beschriftung vor einem Wert („Vehicles: 3“)
  • text-muted – Hints and secondary textHinweise und Nebentext (dark Secondary 700dunkel Secondary 700)
Secondary 900
  • text – All regular text and iconsNormaler Text und Icons
  • on-yellow – Text on yellow (always dark)Text auf Gelb (immer dunkel)
  • cursor – Mouse pointer in hover examples (always dark, white edge)Mauszeiger in Hover-Beispielen (immer dunkel, weißer Rand)
  • scrim – Dims the page behind a modal, offcanvas or sheet, at 40 % (70 % in dark mode)Dunkelt die Seite hinter Modal, Offcanvas oder Sheet ab, mit 40 % (im Dark Mode 70 %) (dark Secondary 000dunkel Secondary 000)
  • link – Links in textLinks im Text
App 200
  • heat-1
App 400
  • heat-2
App 600
  • heat-3
App 700
  • fill – Primary buttons, checked boxesPrimary-Buttons, angehakte Kästchen
App 800
  • fill-hover – Hover of fillHover von fill
  • heat-4 (dark App 800dunkel App 800)
App 900
  • accent-text – Text and icons in the app colorText und Icons in der App-Farbe
  • heat-5
App 950
  • badge-fill
Analytics 100
  • success-bg – Success message backgroundHintergrund Erfolgsmeldung
Analytics 700
  • success – Success status (fixed, never the app color)Status Erfolg (fest, nie die App-Farbe)
  • success-border – Success message borderRand Erfolgsmeldung
Analytics 950
  • success-icon – Success icon (at least 3:1 on its background)Icon Erfolg (mindestens 3:1 auf seinem Hintergrund)
  • success-fill (dark Analytics 950dunkel Analytics 950)
  • success-text
Plan 100
  • info-bg – Info message backgroundHintergrund Info-Meldung
Plan 200
  • blue-hover – Hover surface in the global filterHover-Fläche im Global filter
Plan 400
  • blue-ring – Line of an open segment in the global filterLinie eines offenen Segments im Global filter
Plan 700
  • focus – Focus ringFokusring
  • blue-fill – Blue buttonsBlaue Buttons (dark Plan 700dunkel Plan 700)
Plan 800
  • blue-fill-hover – Hover of blue buttonsHover blauer Buttons
Plan 900
  • blue-text – Blue textBlauer Text
  • info-border – Info message borderRand Info-Meldung
  • info-icon
Docs 100
  • warning-bg – Warning message backgroundHintergrund Warnmeldung
Docs 700
  • fault-mid
Docs 900
  • warning-border – Warning message border and iconRand und Icon Warnmeldung
  • problem-icon
Red 100
  • error-bg – Error message backgroundHintergrund Fehlermeldung
Red 700
  • fault-high
Red 800
  • error – Errors, danger buttonsFehler, Danger-Buttons
  • error-icon
  • failure-error
  • danger-text
Red 900
  • error-border – Error message borderRand Fehlermeldung
  • danger-text-hover
Yellow 700
  • fault-low
Yellow 950
  • warning-icon
  • failure-problem
chart-area
  • chart-area – Area under a single-series line chart: chart-01 at 20 %Fläche unter einem Liniendiagramm mit einer Reihe: chart-01 mit 20 %

Shadow

Class: shadow-<name>.Klasse: shadow-<Name>.

VariableVariableClassKlasseValueWertUsed forVerwendet für
--shadow-floatfloat0 0 12px light-dark(rgb(0 0 0 / 0.2), rgb(0 0 0))
Everything that floats: select panels, menus, popover, modal, offcanvas, more sheet, coach mark, columns panel, video control bar, toasts and the white buttonAlles, was schwebt: Select-Panels, Menüs, Popover, Modal, Offcanvas, More-Sheet, Coach mark, Columns-Panel, Video-Steuerleiste, Toasts und der White-Button
--shadow-pagerpagerinset 0 6px 6px -6px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.55))
Soft edge above the table paginationWeiche Kante über der Seitenanzeige der Tabelle
--shadow-sticky-edgesticky-edge-6px 0 6px -6px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.55))
Edge of the sticky actions column while the table scrolls sidewaysKante der klebenden Aktionsspalte, wenn die Tabelle seitlich scrollt
--shadow-sticky-startsticky-start6px 0 6px -6px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.55))