Page History

Versions Compared

Key

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

...

UI Tabs

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

Highest Contrast

WCAG AA

WEB AIM

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

Image Removed

Primary Color

#1DC1FD

to be defined

Can be used for links or other elements that we wish to highlight separately.

Image Removed

Brand Color

#FAD465

to be defined

Messages palette

Image Removed

Success Color

#49F45D

to be defined

e.g. Positive confirmation for notifications, entries or actions. Positive feedback for error-free production.

Image Removed

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.

Image Removed

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.

Image Removed

Very Dark Gray

#242424

to be defined

Image Removed

Darker Gray

#313131

to be defined

Image Removed

Dark Gray

#3C3C3C

to be defined

Image Removed

Medium Gray

#505050

to be defined

Image Removed

Medium Light Gray

#626262

to be defined

Image Removed

Light Gray

#787878

to be defined

Image Removed

Lighter Gray

#8D8D8D

to be defined

Image Removed

Even Lighter Gray

#9A9A9A

to be defined

Image Removed

Very Light Gray

#A4A4A4

to be defined

Image Removed

Nearly White

#F0F0F0

to be defined

Image Removed

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 9

New Version 10

Key

Usage of Tokyo Theme Colors