Themes

Take full control of all the colors

No theme (transparent)

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	currentColor
Background	transparent
Accent	currentColor
Border	transparent

Primary button
Foreground	currentColor
Background	transparent
Border	transparent
Primary button hover
Foreground	currentColor
Background	transparent
Border	transparent

Secondary button
Foreground	currentColor
Background	transparent
Border	transparent
Secondary button hover
Foreground	currentColor
Background	transparent
Border	transparent
Focus outline	#CCCCCC

Link button
Link color	currentColor
Link button hover
Link hover color	currentColor
Focus outline	#CCCCCC

Implementation


									<div class="theme no-theme"></div>

D4P - Primary

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#F6FCFC
Background	#4D4D4C
Accent	#F6FCFC
Border	transparent

Primary button
Foreground	#4D4D4C
Background	#F6FCFC
Border	#F6FCFC
Primary button hover
Foreground	#4D4D4C
Background	hsl(180, 50%, 85%)
Border	#F6FCFC

Secondary button
Foreground	#F6FCFC
Background	#4D4D4C
Border	#F6FCFC
Secondary button hover
Foreground	#F6FCFC
Background	hsl(60, 1%, 40%)
Border	#F6FCFC
Focus outline	#F6FCFC

Link button
Link color	#F6FCFC
Link button hover
Link hover color	hsl(180, 50%, 85%)
Focus outline	#F6FCFC

Implementation


									<div class="theme signature-grey"></div>

D4P - Secondary

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#3A3A3A
Background	#F6FCFC
Accent	#3A3A3A
Border	transparent

Primary button
Foreground	#F6FCFC
Background	#3A3A3A
Border	#3A3A3A
Primary button hover
Foreground	#F6FCFC
Background	hsl(0, 0%, 40%)
Border	#3A3A3A

Secondary button
Foreground	#3A3A3A
Background	#F6FCFC
Border	#3A3A3A
Secondary button hover
Foreground	#3A3A3A
Background	hsl(180, 50%, 85%)
Border	#3A3A3A
Focus outline	#3A3A3A

Link button
Link color	#3A3A3A
Link button hover
Link hover color	hsl(0, 0%, 40%)
Focus outline	#3A3A3A

Implementation


									<div class="theme ice-blue"></div>

EMEA - Primary

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#F6FCFC
Background	#4A54A0
Accent	#F6FCFC
Border	transparent

Primary button
Foreground	#4A54A0
Background	#F6FCFC
Border	#4A54A0
Primary button hover
Foreground	#4A54A0
Background	hsl(180, 50%, 85%)
Border	#4A54A0

Secondary button
Foreground	#F6FCFC
Background	#4A54A0
Border	#F6FCFC
Secondary button hover
Foreground	#F6FCFC
Background	hsl(233.02, 37%, 40%)
Border	#F6FCFC
Focus outline	#F6FCFC

Link button
Link color	#F6FCFC
Link button hover
Link hover color	hsl(180, 50%, 85%)
Focus outline	#F6FCFC

Implementation


									<div class="theme vibrant-purple"></div>

EMEA - Secondary

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#191919
Background	#F6FCFC
Accent	#191919
Border	transparent

Primary button
Foreground	#F6FCFC
Background	#191919
Border	#191919
Primary button hover
Foreground	#FFFFFF
Background	#545454
Border	#545454

Secondary button
Foreground	#191919
Background	#FFFFFF
Border	#191919
Secondary button hover
Foreground	#191919
Background	hsl(0, 0%, 85%)
Border	#191919
Focus outline	#191919

Link button
Link color	#191919
Link button hover
Link hover color	hsl(0, 0%, 40%)
Focus outline	#191919

Implementation


									<div class="theme light-violet"></div>

DOK - Primary

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#F6FCFC
Background	#008A95
Accent	#F6FCFC
Border	transparent

Primary button
Foreground	#00666E
Background	#F6FCFC
Border	#00666E
Primary button hover
Foreground	#00666E
Background	hsl(180, 50%, 85%)
Border	#00666E

Secondary button
Foreground	#F6FCFC
Background	#00666E
Border	#F6FCFC
Secondary button hover
Foreground	#F6FCFC
Background	hsl(184.36, 100%, 40%)
Border	#F6FCFC
Focus outline	#F6FCFC

Link button
Link color	#00666E
Link button hover
Link hover color	hsl(184.36, 100%, 40%)
Focus outline	#F6FCFC

Implementation


									<div class="theme signature-teal"></div>

DOK - Secondary

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#191919
Background	#F6FCFC
Accent	#191919
Border	transparent

Primary button
Foreground	#F6FCFC
Background	#191919
Border	transparent
Primary button hover
Foreground	#F6FCFC
Background	hsl(0, 0%, 40%)
Border	transparent

Secondary button
Foreground	#191919
Background	#F6FCFC
Border	#191919
Secondary button hover
Foreground	#191919
Background	hsl(180, 50%, 85%)
Border	#191919
Focus outline	#191919

Link button
Link color	#191919
Link button hover
Link hover color	hsl(0, 0%, 40%)
Focus outline	#191919

Implementation


									<div class="theme fresh-green"></div>

Dark

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#F6FCFC
Background	transparent
Accent	#4A54A0
Border	transparent

Primary button
Foreground	#F6FCFC
Background	#3A3A3A
Border	#3A3A3A
Primary button hover
Foreground	#F6FCFC
Background	hsl(0, 0%, 40%)
Border	#3A3A3A

Secondary button
Foreground	#3A3A3A
Background	#F6FCFC
Border	#F6FCFC
Secondary button hover
Foreground	#3A3A3A
Background	hsl(180, 50%, 85%)
Border	#F6FCFC
Focus outline	#CCCCCC

Link button
Link color	#FFFFFF
Link button hover
Link hover color	hsl(0, 0%, 85%)
Focus outline	#CCCCCC

Implementation


									<div class="theme theme-dark"></div>