Skip to content
Designsystem – STEPS Leaders
Logo
Colours
Typography
Icons
Forms & Button
Thumbnails
More
Share
Explore

icon picker
Colours

Als Grundfarbe für das neue Design wird die Farbe des Jahres 2020, Pantone Classic Blue, verwendet. Blau drückt unter anderem Seriösität, Professionalität und Zuverlässigkeit aus. Diese Farbwahrnehmung soll auch mit STEPS Leaders assoziiert werden und “abfärben”.
⁠
grafik.png
⁠
⁠
Name: Classic Blue bzw. BLUE-0
Hex: #004B82
Durch die Schnittflächen resultieren daraus fünf unterschiedliche Farben, die hauptsächlich im Thema verwendet werden. Um die Farben unabhängig vom Hintergrund verwendent zu können, werden diese digital gemischt und die entsprechenden Hex-Codes ausgelesen. Für den Printbereich muss das selbe nochmals mit CMYK evaluiert werden, damit die Farbverhältnisse stringent bleiben.
Blautöne
0
hex
name
preview
use
origin
1
#004b82
blue-0
keycolour, Informationstext
​
2
#1d5286
blue-1
​
mitte
3
#2d6a98
blue-2
​
unten-mitte
4
#215c8d
blue-3
​
oben-mitte
5
#729bba
blue-4
​
unten
6
#3d769f
blue-5
Informationsfeldhintergrund
oben
There are no rows in this table
⁠

Weitere Farben

Zur Hervorhebung verschiedener Elemente und Abgrenzung von Bereichen sind weitere Farben notwendig.
Signalfarben
0
hex
name
preview
use
origin
1
#d4edda
success-background
Erfolgsnachricht, Hintergrund
Bootstrap
2
#155724
success-text
Erfolgsnachricht, Text
Bootstrap
3
#fff3cd
warning-background
Warnungsfeld, Hintergrund
Bootstrap
4
#856404
warning-text
Warnungstext
Bootstrap
5
#f8d7da
error-hintergrund
Fehlerbenachrichtigung, Hintergrund
Bootstrap
6
#721c24
error-text
Fehlertext
Bootstrap
7
#004b82
info-background
Informationsfeld, Hintergrund
keycolour
8
#729bba
info-text
Informationstext
blue-4
There are no rows in this table
⁠
Akzente
0
hex
name
preview
use
origin
1
#DF2227
highlight-red
​
rotes STEPS Logo
There are no rows in this table
⁠
Grautöne
0
hex
name
preview
use
origin
1
#EDEDED
grey-dark
Bereichsabgrenzung
​
2
#F5F5F5
grey-light
Bereichsabgrenzung
​
3
#505050
grey-text
Grauer Text
​
There are no rows in this table
⁠

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.