Versions Compared

Old Version 12

changes.mady.by.user Sascha Ziegler

Saved on

compared with

New Version 13

changes.mady.by.user Sascha Ziegler

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

UI Tabs


UI Tab
titleOverview

The color concept.

Maintaining consistent and engaging digital experiences within Germanedge, whether applications or experiences, requires a sensitive use of color. The following color concepts form the basis for our efforts to create a unique user interface design. The color world of our user interface "Inspire" is clean and reduced. 

The colour system is based on 2 main colours, the brand colour and the primary colour "Tokyo". The two colours together, because they are complementary to each other, result in a rounded colour picture. In addition, various alarm colours are added, but it should be noted that the alarm colours never resemble the brand- and primary colours.


The color palette of Germanedge is basically divided into two different themes. The "Daylight" and "Nightshift" theme.  The color palette of each theme brings a uniform and recognizable consistency to our interface.



The anatomy of the Germanedge colours.

As the basis for both themes, the neutral "Tokyo" colour family dominates, separating the contents with subtle nuances. 
It is important that the nuances do not run into each other. The yellow brand colour is the primary action colour for all Germanedge products and experiences. Additional colours are used sparingly and purposefully.





The themes.

The themes serve as a framework for colour worlds within Inspire, with each theme based on a specific primary background colour. There are two standard themes. The Daylight theme "Astronaut" and the Nightshift theme"Tokyo at Night". 









Highest Contrast

WCAG AA

WEB AIM



UI Tab
titleUsage

Usage of the Astronaut Theme Colors

(tbd)


Usage of Tokyo Theme Colors

(tbd)

#idRoleValue
?Default page backgroundTokyo 100
#202026

?Default boardlet backgroundTokyo 90
#292930



UI Tab
titleCode

https://wasp2-dev.myapp.de:444/live-style-guide/theming



Tokyo Colors



Brand
Colors





Alerts Colors




















scss variables#hex


scss variables#hex
Danger
scss variables#hex
Warning
scss variables#hex
Success
scss variables#hex
Note
scss variables#hex
Tokyo 100
$tokyo-100#202026

Image Modified

Brand 100
$brand-100#957616

Image Modified

Danger 100
$danger-100#F50B09

Image Modified

Warning 100
$warning-100#FF7A00

Image Modified

Success 100
$success-100#7FD966

Image Modified

Note 100
$note-100#14D2FF

Image Modified

Tokyo 90
$tokyo-90#292930

Image Modified

Brand 90
$brand-90#A88724

Image Modified

Danger 80
$danger-80#F55150

Image Modified

Warning 80
$warning-80#FF902A

Image Modified

Success 80
$success-80#94DF7F

Image Modified

Note 80
$note-80#3BD9FF

Image Modified

Tokyo 80
$tokyo-80#373741

Image Modified

Brand 80
$brand-80#E0B535

Image Modified

Danger 60
$danger-60#F77373

Image Modified

Warning 60
$warning-60#FFA655

Image Modified

Success 60
$success-60#A9E599

Image Modified

Note 60
$note-60#62E1FF

Image Modified

Tokyo 70
$tokyo-70#535359

Image Modified

Brand 70
$brand-70#FACA3D

Image Modified

Danger 40
$danger-40#F99696

Image Modified

Warning 40
$warning-40#FFBC7F

Image Modified

Success 40
$success-40#BFECB2

Image Modified

Note 40
$note-40#89E8FF

Image Modified

Tokyo 60
$tokyo-60#7E7E82

Image Modified

Brand 60
$brand-60#FAD465

Image Modified

Danger 20
$danger-20#FBB9B9

Image Modified

Warning 20
$warning-20#FFD2AA

Image Modified

Success 20
$success-20#D4F2CC

Image Modified

Note 20
$note-20#B0F0FF

Image Modified

Tokyo 50
$tokyo-50#A9A9AC

Image Modified

Brand 50
$brand-50#FBDC83

Image Modified

Danger 00

#FDDCDC

Image Modified

Warning 00

#FFE8D4

Image Modified

Success 00

#E9F8E5

Image Modified

Note 00

#D7F7FF

Image Modified

Tokyo 40
$tokyo-40#BCBCBE

Image Modified

Brand 40
$brand-40#FCE5A2

Image Modified





















Tokyo 30
$tokyo-30#D4D4D5

Image Modified

Brand 30
$brand-30#FDEDC1

Image Modified





















Tokyo 20
$tokyo-20#EFEFEF

Image Modified

Brand 20
$brand-20#FEF6E0

Image Modified





















Tokyo 10
$tokyo-10#FFFFFF

Image Modified

Brand 10
$brand-10#FDFBF4

Image Modified



























Astronaut Colors



Brand
Colors





Alerts Colors




















scss variables#hex


scss variables#hex
Danger
scss variables#hex
Warning
scss variables#hex
Success
scss variables#hex
Note
scss variables#hex
Astronaut 100
$astronaut-100#0F0E0D

Brand 100
$brand-100#BE9C38

Danger 100
$danger-100#F06464

Warning 100
$warning-100#FDB225

Success 100
$success-100#9FDB57

Note 100
$note-100#87DFF0

Astronaut 90
$astronaut-90#272625

Brand 90
$brand-90#D9B23D

Danger 80
$danger-80#F17575

Warning 80
$warning-80#FDBA3D

Success 80
$success-80#A9DF69

Note 80
$note-80#94E2F1

Astronaut 80
$astronaut-80#3F3E3D

Brand 80
$brand-80#F2D43D

Danger 60
$danger-60#F38686

Warning 60
$warning-60#FDC355

Success 60
$success-60#B4E37C

Note 60
$note-60#A1E6F3

Astronaut 70
$astronaut-70#575655

Brand 70
$brand-70#F5DB5D

Danger 40
$danger-40#F59797

Warning 40
$warning-40#FDCB6D

Success 40
$success-40#BFE78F

Note 40
$note-40#AFE9F5

Astronaut 60
$astronaut-60#6F6E6D

Brand 60
$brand-60#F7E06F

Danger 20
$danger-20#F6A8A8

Warning 20
$warning-20#FDD485

Success 20
$success-20#C9EBA1

Note 20
$note-20#BCEDF6

Astronaut 50
$astronaut-50#878686

Brand 50
$brand-50#F7E692





















Astronaut 40
$astronaut-40#B7B6B6

Brand 40
$brand-40#F8EBA7





















Astronaut 30
$astronaut-30#CFCECE

Brand 30
$brand-30#F8EFBC
















Link
tbd#00AEE2

Astronaut 20
$astronaut-20#E7E6E6

Brand 20
$brand-20#F7F1CF





















Astronaut 10
$astronaut-10#F2F2F2

Brand 10
$brand-10#F5F2DE
























...