Page History

Versions Compared

Key

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

...

UI Tabs

Daylight Theme Colors
Here you will find all colors that can be used in the theme.

Image Removed

Highest Contrast

WCAG AA

WEB AIM

UI Tab

title	Overview

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".

Nightshift Theme Colors
Here you will find all colors that can be used in this theme.

Tokyo Colors

Brand
Colors

Alerts Colors

#hex

Danger

#hex

Warning

#hex

Success

#hex

Note

#hex

Tokyo 100

#202026

Image Removed

Brand 100

#957616

Image Removed

Danger 100

#F50B09

Image Removed

Warning 100

#FF7A00

Image Removed

Success 100

#7FD966

Image Removed

Note 100

#14D2FF

Image Removed

Tokyo 90

#292930

Image Removed

Brand 90

#A88724

Image Removed

Danger 80

#F55150

Image Removed

Warning 80

#FF902A

Image Removed

Success 80

#94DF7F

Image Removed

Note 80

#3BD9FF

Image Removed

Tokyo 80

#373741

Image Removed

Brand 80

#E0B535

Image Removed

Danger 60

#F77373

Image Removed

Warning 60

#FFA655

Image Removed

Success 60

#A9E599

Image Removed

Note 60

#62E1FF

Image Removed

Tokyo 70

#535359

Image Removed

Brand 70

#FACA3D

Image Removed

Danger 40

#F99696

Image Removed

Warning 40

#FFBC7F

Image Removed

Success 40

#BFECB2

Image Removed

Note 40

#89E8FF

Image Removed

Tokyo 60

#7E7E82

Image Removed

Brand 60

#FAD465

Image Removed

Danger 20

#FBB9B9

Image Removed

Warning 20

#FFD2AA

Image Removed

Success 20

#D4F2CC

Image Removed

Note 20

#B0F0FF

Image Removed

Tokyo 50

#A9A9AC

Image Removed

Brand 50

#FBDC83

Image Removed

Danger 00

#FDDCDC

Image Removed

Warning 00

#FFE8D4

Image Removed

Success 00

#E9F8E5

Image Removed

Note 00

#D7F7FF

Image Removed

Tokyo 40

#BCBCBE

Image Removed

Brand 40

#FCE5A2

Image Removed

Tokyo 30

#D4D4D5

Image Removed

Brand 30

#FDEDC1

Image Removed

Tokyo 20

#EFEFEF

Image Removed

Brand 20

#FEF6E0

Image Removed

Tokyo 10

#FFFFFF

Image Removed

Brand 10

#FDFBF4

Image Removed

Tokyo Colors

Brand
Colors

Alerts Colors

#hex

Danger

#hex

Warning

#hex

Success

#hex

Note

#hex

Astronaut 100

#0F0E0D

Image Removed

Brand 100

#BE9C38

Image Removed

Danger 100

#F06464

Image Removed

Warning 100

#FDB225

Image Removed

Success 100

#9FDB57

Image Removed

Note 100

#87DFF0

Image Removed

Astronaut 90

#272625

Image Removed

Brand 90

#D9B23D

Image Removed

Danger 80

#F17575

Image Removed

Warning 80

#FDBA3D

Image Removed

Success 80

#A9DF69

Image Removed

Note 80

#94E2F1

Image Removed

Astronaut 80

#3F3E3D

Image Removed

Brand 80

#F2D43D

Image Removed

Danger 60

#F38686

Image Removed

Warning 60

#FDC355

Image Removed

Success 60

#B4E37C

Image Removed

Note 60

#A1E6F3

Image Removed

Astronaut 70

#575655

Image Removed

Brand 70

#F5DB5D

Image Removed

Danger 40

#F59797

Image Removed

Warning 40

#FDCB6D

Image Removed

Success 40

#BFE78F

Image Removed

Note 40

#AFE9F5

Image Removed

Astronaut 60

#6F6E6D

Image Removed

Brand 60

#F7E06F

Image Removed

Danger 20

#F6A8A8

Image Removed

Warning 20

#FDD485

Image Removed

Success 20

#C9EBA1

Image Removed

Note 20

#BCEDF6

Image Removed

Astronaut 50

#878686

Image Removed

Brand 50

#F7E692

Image Removed

Astronaut 40

#B7B6B6

Image Removed

Brand 40

#F8EBA7

Image Removed

Astronaut 30

#CFCECE

Image Removed

Brand 30

#F8EFBC

Image Removed

Link

#00AEE2

Image Removed

Astronaut 20

#E7E6E6

Image Removed

Brand 20

#F7F1CF

Image Removed

Astronaut 10

#F2F2F2

Image Removed

Brand 10

#F5F2DE

UI Tab

title	Usage

Usage of the Astronaut Theme Colors

(tbd)

Usage of Tokyo Theme Colors

(tbd)

#id	Role	Value
?	Default page background	Tokyo 100 #202026
?	Default boardlet background	Tokyo 90 #292930

Tone	Name	Hexadecimal	SCSS variable name	Usage
Highlight palette
	Primary Color	#1DC1FD	to be defined	Can be used for links or other elements that we wish to highlight separately.
	Brand Color	#FAD465	to be defined
Messages palette
	Success Color	#49F45D	to be defined	e.g. Positive confirmation for notifications, entries or actions. Positive feedback for error-free production.
	Error Color	#FA3030	to be defined	e.g. negative confirmation for notifications, entries or actions. Negative feedback for dirsturbed production. Used for every kind of error.
	Warning Color	#FF9D00	to be defined	Used, for example, for warnings that can occur in production. Unlike the error, the warning is not as critical.
Neutral palette				The various gradations of grey are used to ensure good contrast and legibility. This allows the remaining colours to be optimally displayed.
	Very Dark Gray	#242424	to be defined
	Darker Gray	#313131	to be defined
	Dark Gray	#3C3C3C	to be defined
	Medium Gray	#505050	to be defined
	Medium Light Gray	#626262	to be defined
	Light Gray	#787878	to be defined
	Lighter Gray	#8D8D8D	to be defined
	Even Lighter Gray	#9A9A9A	to be defined
	Very Light Gray	#A4A4A4	to be defined
	Nearly White	#F0F0F0	to be defined
	True White	#FFFFFF	to be defined

UI Tab

title	Code

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	Brand 100	$brand-100	#957616	Danger 100	$danger-100	#F50B09	Warning 100	$warning-100	#FF7A00	Success 100	$success-100	#7FD966	Note 100	$note-100	#14D2FF
Tokyo 90	$tokyo-90	#292930	Brand 90	$brand-90	#A88724	Danger 80	$danger-80	#F55150	Warning 80	$warning-80	#FF902A	Success 80	$success-80	#94DF7F	Note 80	$note-80	#3BD9FF
Tokyo 80	$tokyo-80	#373741	Brand 80	$brand-80	#E0B535	Danger 60	$danger-60	#F77373	Warning 60	$warning-60	#FFA655	Success 60	$success-60	#A9E599	Note 60	$note-60	#62E1FF
Tokyo 70	$tokyo-70	#535359	Brand 70	$brand-70	#FACA3D	Danger 40	$danger-40	#F99696	Warning 40	$warning-40	#FFBC7F	Success 40	$success-40	#BFECB2	Note 40	$note-40	#89E8FF
Tokyo 60	$tokyo-60	#7E7E82	Brand 60	$brand-60	#FAD465	Danger 20	$danger-20	#FBB9B9	Warning 20	$warning-20	#FFD2AA	Success 20	$success-20	#D4F2CC	Note 20	$note-20	#B0F0FF
Tokyo 50	$tokyo-50	#A9A9AC	Brand 50	$brand-50	#FBDC83	Danger 00		#FDDCDC	Warning 00		#FFE8D4	Success 00		#E9F8E5	Note 00		#D7F7FF
Tokyo 40	$tokyo-40	#BCBCBE	Brand 40	$brand-40	#FCE5A2
Tokyo 30	$tokyo-30	#D4D4D5	Brand 30	$brand-30	#FDEDC1
Tokyo 20	$tokyo-20	#EFEFEF	Brand 20	$brand-20	#FEF6E0
Tokyo 10	$tokyo-10	#FFFFFF	Brand 10	$brand-10	#FDFBF4

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

...

Content

Space Tools

Versions Compared

Old Version 8

New Version 9

Key

Usage of Tokyo Theme Colors