Skip to main content
assistive.skiplink.to.breadcrumbs
assistive.skiplink.to.header.menu
assistive.skiplink.to.action.menu
assistive.skiplink.to.quick.search

Search

Germanedge

Inspire Design Guidelines

Page History

Versions Compared

Key

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

...

UI Tabs

UI Tab

title	Overview

Highest Contrast

WCAG AA

WEB AIM

UI Tab

title	Usage

Usage of Tokyo Theme Colors

(tbd)

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

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

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

Powered by Atlassian Confluence 9.2.15, themed by Refined 7.7.18 (Cluster node: 538c75b8)