View Source

(work in progress)

Inspire Design Guidelines > Tokyo Theme > Tokyo_Theme.jpg

Highest Contrast

WCAG AA

WEB AIM

Usage of Tokyo Theme Colors

(tbd)

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

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

Tokyo Colors				Brand Colors
		scss variables	#hex			scss variables	#hex
Tokyo 100		$tokyo-100	#202026	Brand 100		$brand-100	#94802b
Tokyo 90		$tokyo-90	#292930	Brand 90		$brand-90	#aa9231
Tokyo 80		$tokyo-80	#31313b	Brand 80		$brand-80	#bea539
Tokyo 70		$tokyo-70	#535359	Brand 70		$brand-70	#c6b056
Tokyo 60		$tokyo-60	#6f6e6d	Brand 60		$brand-60	#eccf4e
Tokyo 50		$tokyo-50	#A9A9AC	Brand 50		$brand-50	#f5dd66
Tokyo 40		$tokyo-40	#bcbcbe	Brand 40		$brand-40	#fbe67e
Tokyo 30		$tokyo-30	#D4D4D5	Brand 30		$brand-30	#fceb98
Tokyo 20		$tokyo-20	#EFEFEF	Brand 20		$brand-20	#fcf0b1
Tokyo 10		$tokyo-10	#FFFFFF	Brand 10		$brand-10	#fdf5cb

Alerts Colors
Danger		scss variables	#hex	Warning		scss variables	#hex	Success		scss variables	#hex	Note		scss variables	#hex
Danger 100		$danger-100	#F50B09	Warning 100		$warning-100	#FF8900	Success 100		$success-100	#7fd966	Note 100		$note-100	#87dff0
Danger 80		$danger-80	N.P.o.MVP	Warning 80		$warning-80	N.P.o.MVP	Success 80		$success-80	N.P.o.MVP	Note 80		$note-80	N.P.o.MVP
Danger 60		$danger-60	#F55150	Warning 60		$warning-60	#F0A835	Success 60		$success-60	#94df7f	Note 60		$note-60	#94e2f1
Danger 40		$danger-40	N.P.o.MVP	Warning 40		$warning-40	N.P.o.MVP	Success 40		$success-40	N.P.o.MVP	Note 40		$note-40	N.P.o.MVP
Danger 20		$danger-20	N.P.o.MVP	Warning 20		$warning-20	N.P.o.MVP	Success 20		$success-20	N.P.o.MVP	Note 20		$note-20	N.P.o.MVP
Danger 00			N.P.o.MVP	Warning 00			N.P.o.MVP	Success 00			N.P.o.MVP	Note 00			N.P.o.MVP

These colors can be used for diagrams and graphics. (work in progress)

Colors
asdf		scss variables	#hex
		xxx	#502f7e
			#eeb200
			#ff6b61
			#3d6d4f
			#17e1e3
			#3c225f
			#96D0FF
			#A46798
			#B18AE0
			#87DCFA
			#00FDFF
			#5C22FF
			#C39D63
			#2C159D
			#89937A
			#FF9320
			#F64A00
			#2A4ED1
			#E10000
			#004E25
			#384D9D
			#F6F3EB
			#1F3B34
			yyy
			yyy
			yyy
			yyy
			yyy
			yyy
			yyy
			yyy
			yyy
			yyy
			yyy
			yyy
			yyy
			yyy