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	#EEF3F8
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	#707070
Border	#707070
Primary button hover
Foreground	#F6FCFC
Background	#3A3A3A
Border	#3A3A3A

Secondary button
Foreground	#707070
Background	#F6FCFC
Border	#707070
Secondary button hover
Foreground	#F6FCFC
Background	#707070
Border	#707070
Focus outline	#3A3A3A

Link button
Link color	#707070
Link button hover
Link hover color	#3A3A3A
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	#EEF3F8
Border	transparent

Primary button
Foreground	#4A54A0
Background	#F6FCFC
Border	#4A54A0
Primary button hover
Foreground	#F6FCFC
Background	#4A54A0
Border	#F6FCFC

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	#3A3A3A
Background	#F6FCFC
Accent	#3A3A3A
Border	transparent

Primary button
Foreground	#F6FCFC
Background	#707070
Border	#707070
Primary button hover
Foreground	#F6FCFC
Background	#3A3A3A
Border	#3A3A3A

Secondary button
Foreground	#707070
Background	#F6FCFC
Border	#707070
Secondary button hover
Foreground	#F6FCFC
Background	#707070
Border	#707070
Focus outline	#3A3A3A

Link button
Link color	#707070
Link button hover
Link hover color	#3A3A3A
Focus outline	#3A3A3A

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	#DFF2F4
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	#3A3A3A
Background	#F6FCFC
Accent	#3A3A3A
Border	transparent

Primary button
Foreground	#F6FCFC
Background	#707070
Border	#707070
Primary button hover
Foreground	#F6FCFC
Background	#3A3A3A
Border	#3A3A3A

Secondary button
Foreground	#707070
Background	#F6FCFC
Border	#707070
Secondary button hover
Foreground	#F6FCFC
Background	#707070
Border	#707070
Focus outline	#3A3A3A

Link button
Link color	#707070
Link button hover
Link hover color	#3A3A3A
Focus outline	#3A3A3A

Implementation


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

Enterprise - Primary

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#EBF1FA
Background	#2463A6
Accent	#FFFFFF
Border	transparent

Primary button
Foreground	#2463A6
Background	#EBF1FA
Border	#2463A6
Primary button hover
Foreground	#2463A6
Background	hsl(216, 60%, 85%)
Border	#2463A6

Secondary button
Foreground	#EBF1FA
Background	#2463A6
Border	#EBF1FA
Secondary button hover
Foreground	#EBF1FA
Background	hsl(210.92, 64%, 40%)
Border	#EBF1FA
Focus outline	#EBF1FA

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

Implementation


									<div class="theme enterprise-primary"></div>

Enterprise - Secondary

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#3B7FCC
Background	#EBF1FA
Accent	#2463A6
Border	transparent

Primary button
Foreground	#EBF1FA
Background	#3B7FCC
Border	#3B7FCC
Primary button hover
Foreground	#F6FCFC
Background	#3A3A3A
Border	#3A3A3A

Secondary button
Foreground	#3B7FCC
Background	#EBF1FA
Border	#3B7FCC
Secondary button hover
Foreground	#F6FCFC
Background	#707070
Border	#707070
Focus outline	#2463A6

Link button
Link color	#3B7FCC
Link button hover
Link hover color	#3A3A3A
Focus outline	#2463A6

Implementation


									<div class="theme enterprise-secondary"></div>