Themes

Take full control of all the colors

Light

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#262626
Background
#FFFFFF
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#262626
Border
#262626
Primary button hover
Foreground
#FFFFFF
Background
#545454
Border
#545454
Secondary button
Foreground
#1E1A33
Background
#FFFFFF
Border
#262626
Secondary button hover
Foreground
#1E1A33
Background
hsl(0, 0%, 85%)
Border
#262626
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme light"></div>

Dark

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#262626
Accent
currentColor
Border
transparent
Primary button
Foreground
#262626
Background
#FFFFFF
Border
#FFFFFF
Primary button hover
Foreground
#FFFFFF
Background
#262626
Border
#262626
Secondary button
Foreground
#FFFFFF
Background
#262626
Border
#FFFFFF
Secondary button hover
Foreground
#262626
Background
#FFFFFF
Border
#FFFFFF
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme dark"></div>

Light transparent

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#262626
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
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme light-transparent"></div>

Dark transparent

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
transparent
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
transparent
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
transparent
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
transparent
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
transparent
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme dark-transparent"></div>

Light gray

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#333333
Background
#F7F7F7
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#333333
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 40%)
Border
transparent
Secondary button
Foreground
#333333
Background
#CCCCCC
Border
transparent
Secondary button hover
Foreground
#333333
Background
hsl(0, 0%, 85%)
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme theme-gray"></div>

Gray border

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#333333
Background
#FFFFFF
Accent
currentColor
Border
#EBEBEB
Primary button
Foreground
#FFFFFF
Background
#333333
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 40%)
Border
transparent
Secondary button
Foreground
#333333
Background
#FFFFFF
Border
transparent
Secondary button hover
Foreground
#333333
Background
hsl(0, 0%, 85%)
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme theme-gray-border"></div>

Theme Matas

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#333333
Background
#EFEDEA
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#333333
Border
#333333
Primary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 40%)
Border
#333333
Secondary button
Foreground
#333333
Background
#FFFFFF
Border
#333333
Secondary button hover
Foreground
#333333
Background
hsl(0, 0%, 85%)
Border
#333333
Focus outline
#CCCCCC
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#CCCCCC
Implementation
<div class="theme theme-khaki"></div>

Theme palegold

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#333333
Background
#DEC492
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#333333
Border
#333333
Primary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 40%)
Border
#333333
Secondary button
Foreground
#333333
Background
#FFFFFF
Border
#333333
Secondary button hover
Foreground
#333333
Background
hsl(0, 0%, 85%)
Border
#333333
Focus outline
#CCCCCC
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#CCCCCC
Implementation
<div class="theme theme-palegold"></div>

Theme paletaupe

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#333333
Background
#C79F81
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#333333
Border
#333333
Primary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 40%)
Border
#333333
Secondary button
Foreground
#333333
Background
#FFFFFF
Border
#333333
Secondary button hover
Foreground
#333333
Background
hsl(0, 0%, 85%)
Border
#333333
Focus outline
#CCCCCC
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#CCCCCC
Implementation
<div class="theme theme-paletaupe"></div>

Yellow-orange

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#262626
Background
#FFCB1F
Accent
#333333
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#333333
Border
#262626
Primary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 40%)
Border
#262626
Secondary button
Foreground
#262626
Background
#CCCCCC
Border
#FFFFFF
Secondary button hover
Foreground
#FFFFFF
Background
#262626
Border
#262626
Focus outline
#CCCCCC
Link button
Link color
#333333
Link button hover
Link hover color
hsl(0, 0%, 40%)
Focus outline
#CCCCCC
Implementation
<div class="theme yellow-orange"></div>

Dark-red

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#AD0000
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#262626
Border
#262626
Primary button hover
Foreground
#FFFFFF
Background
#262626
Border
#262626
Secondary button
Foreground
#262626
Background
#FFFFFF
Border
#FFFFFF
Secondary button hover
Foreground
#FFFFFF
Background
#262626
Border
#262626
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme dark-red"></div>

Dark green

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#375438
Accent
currentColor
Border
transparent
Primary button
Foreground
#314A32
Background
#FFFFFF
Border
transparent
Primary button hover
Foreground
#314A32
Background
hsl(0, 0%, 85%)
Border
transparent
Secondary button
Foreground
#333333
Background
#CCCCCC
Border
transparent
Secondary button hover
Foreground
#333333
Background
hsl(0, 0%, 85%)
Border
transparent
Focus outline
#CCCCCC
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#CCCCCC
Implementation
<div class="theme dark-green"></div>

Dark-red button

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#262626
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#AD0000
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#7A0000
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
transparent
Border
#FFFFFF
Secondary button hover
Foreground
#262626
Background
#FFFFFF
Border
#FFFFFF
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme dark-redbutton"></div>

djois - standard

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#000000
Background
#FFFFFF
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#78B9CD
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#4AA9BA
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#C3ABBF
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
#C3A2BE
Border
transparent
Focus outline
#36A3AA
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#36A3AA
Implementation
<div class="theme djois-standard"></div>

Djois - top video

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#000000
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#36A3AA
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#4AA9BA
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#262626
Border
#FFFFFF
Secondary button hover
Foreground
#262626
Background
#FFFFFF
Border
#FFFFFF
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme djois-top-video"></div>

djois - color background

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#824081
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#36A3AA
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#4AA9BA
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#924A8E
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
#AA78A7
Border
transparent
Focus outline
#36A3AA
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#36A3AA
Implementation
<div class="theme djois-color-background"></div>

djois - category

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#295459
Background
#F5FFFD
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#36A3AA
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#4AA9BA
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#924A8E
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
#AA78A7
Border
transparent
Focus outline
#36A3AA
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#36A3AA
Implementation
<div class="theme djois-category"></div>

Base
Foreground
#737373
Background
#1D1D1D
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#36A3AA
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#4AA9BA
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#924A8E
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
#AA78A7
Border
transparent
Focus outline
#FFFFFF
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#FFFFFF
Implementation
<div class="theme djois-footer"></div>

djois - purple

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#333333
Background
#FFFFFF
Accent
#333333
Border
transparent
Primary button
Foreground
#000000
Background
transparent
Border
#000000
Primary button hover
Foreground
#FFFFFF
Background
#000000
Border
#000000
Secondary button
Foreground
#000000
Background
#FFFFFF
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 85%)
Border
transparent
Focus outline
#000000
Link button
Link color
#333333
Link button hover
Link hover color
hsl(0, 0%, 40%)
Focus outline
#000000
Implementation
<div class="theme djois-purple"></div>

djois - yellow

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#000000
Background
#F8EFE0
Accent
currentColor
Border
transparent
Primary button
Foreground
#000000
Background
#F8EFE0
Border
#000000
Primary button hover
Foreground
#000000
Background
hsl(37.5, 63%, 85%)
Border
#000000
Secondary button
Foreground
#000000
Background
#FFFFFF
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 85%)
Border
transparent
Focus outline
#000000
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#000000
Implementation
<div class="theme djois-yellow"></div>

djois - green

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#000000
Background
#ECF7EC
Accent
currentColor
Border
transparent
Primary button
Foreground
#000000
Background
#ECF7EC
Border
#000000
Primary button hover
Foreground
#000000
Background
hsl(120, 41%, 85%)
Border
#000000
Secondary button
Foreground
#000000
Background
#FFFFFF
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 85%)
Border
transparent
Focus outline
#000000
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#000000
Implementation
<div class="theme djois-green"></div>

Gray border - pink button

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#333333
Background
#FFFFFF
Accent
currentColor
Border
#EBEBEB
Primary button
Foreground
#C3ABBF
Background
#FFFFFF
Border
#C3ABBF
Primary button hover
Foreground
#C3ABBF
Background
hsl(0, 0%, 85%)
Border
#C3ABBF
Secondary button
Foreground
#333333
Background
#FFFFFF
Border
transparent
Secondary button hover
Foreground
#333333
Background
hsl(0, 0%, 85%)
Border
transparent
Focus outline
#CCCCCC
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#CCCCCC
Implementation
<div class="theme theme-gray-border-pink-button"></div>

djois - light purple

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#000000
Background
#F1E1EB
Accent
currentColor
Border
transparent
Primary button
Foreground
#F6ECF2
Background
#FFFFFF
Border
#000000
Primary button hover
Foreground
#F6ECF2
Background
hsl(0, 0%, 85%)
Border
#000000
Secondary button
Foreground
#000000
Background
#FFFFFF
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 85%)
Border
transparent
Focus outline
#000000
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#000000
Implementation
<div class="theme djois-purple-light-purple"></div>

Base
Foreground
#FFFFFF
Background
transparent
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
transparent
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#FFFFFF
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
transparent
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
#FFFFFF
Border
transparent
Focus outline
#FFFFFF
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#FFFFFF
Implementation
<div class="theme djois-footer-font"></div>

djois - blue

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#78B9CD
Accent
currentColor
Border
transparent
Primary button
Foreground
#000000
Background
#C3ABBF
Border
#000000
Primary button hover
Foreground
#000000
Background
hsl(310, 17%, 85%)
Border
#000000
Secondary button
Foreground
#000000
Background
#FFFFFF
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 85%)
Border
transparent
Focus outline
#000000
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#000000
Implementation
<div class="theme djois-blue"></div>

djois - red

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#CF6478
Accent
currentColor
Border
transparent
Primary button
Foreground
#000000
Background
#C3ABBF
Border
#000000
Primary button hover
Foreground
#000000
Background
hsl(310, 17%, 85%)
Border
#000000
Secondary button
Foreground
#000000
Background
#FFFFFF
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 85%)
Border
transparent
Focus outline
#000000
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#000000
Implementation
<div class="theme djois-red"></div>

Base
Foreground
#737373
Background
#303030
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#36A3AA
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#4AA9BA
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#924A8E
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
#AA78A7
Border
transparent
Focus outline
#FFFFFF
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#FFFFFF
Implementation
<div class="theme djois-footer-grey-lighter"></div>

Djois product page variant

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#303030
Background
transparent
Accent
currentColor
Border
transparent
Primary button
Foreground
#303030
Background
#FFFFFF
Border
#303030
Primary button hover
Foreground
#FFFFFF
Background
#FFFFFF
Border
#FFFFFF
Secondary button
Foreground
#303030
Background
#FFFFFF
Border
#DBDBDB
Secondary button hover
Foreground
#303030
Background
#FFFFFF
Border
#3D3D3D
Link button
Link color
currentColor
Link button hover
Link hover color
#FFFFFF
Implementation
<div class="theme djois-product-page-variant"></div>

Djois category page

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#303030
Background
transparent
Accent
currentColor
Border
#EAE8ED
Primary button
Foreground
#303030
Background
#FF3030
Border
#303030
Primary button hover
Foreground
#8DFF70
Background
#FF0D0D
Border
#9EFF4A
Secondary button
Foreground
#303030
Background
#A0FF24
Border
#C6DB0B
Secondary button hover
Foreground
#FF3333
Background
#24FF50
Border
#ED874C
Focus outline
#7E29FF
Link button
Link color
#C9FFE2
Link button hover
Link hover color
#FF0000
Focus outline
#7E29FF
Implementation
<div class="theme djois-category-page"></div>

3L big slider

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#FFFFFF
Accent
#333333
Border
transparent
Primary button
Foreground
#FFFFFF
Background
transparent
Border
#FFFFFF
Primary button hover
Foreground
#333333
Background
#FFFFFF
Border
#FFFFFF
Secondary button
Foreground
#333333
Background
#CCCCCC
Border
#333333
Secondary button hover
Foreground
#333333
Background
#CCCCCC
Border
#333333
Focus outline
#FFFFFF
Link button
Link color
#FFFFFF
Link button hover
Link hover color
hsl(0, 0%, 85%)
Focus outline
#FFFFFF
Implementation
<div class="theme t3l_usa"></div>

Biodegradable colours

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#40B948
Background
#FFFFFF
Accent
#333333
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#40B948
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#39A640
Border
transparent
Secondary button
Foreground
#40B948
Background
transparent
Border
#40B948
Secondary button hover
Foreground
#FFFFFF
Background
#40B948
Border
#40B948
Focus outline
#FFFFFF
Link button
Link color
#FFFFFF
Link button hover
Link hover color
hsl(0, 0%, 85%)
Focus outline
#FFFFFF
Implementation
<div class="theme biodegradable_colours"></div>

Contact button

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#333333
Background
#FFFFFF
Accent
#333333
Border
transparent
Primary button
Foreground
#000000
Background
#333333
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#000000
Border
transparent
Secondary button
Foreground
#000000
Background
transparent
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
transparent
Border
transparent
Focus outline
#000000
Link button
Link color
#333333
Link button hover
Link hover color
hsl(0, 0%, 40%)
Focus outline
#000000
Implementation
<div class="theme contact_button"></div>

3L Grey background

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#1F1F1F
Background
#F5F5F7
Accent
#A8A8A8
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#666666
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 40%)
Border
transparent
Secondary button
Foreground
#333333
Background
#EAEAEA
Border
transparent
Secondary button hover
Foreground
#333333
Background
hsl(0, 0%, 85%)
Border
transparent
Focus outline
#EAEAEA
Link button
Link color
#333333
Link button hover
Link hover color
hsl(0, 0%, 40%)
Focus outline
#EAEAEA
Implementation
<div class="theme greay_background"></div>

Base
Foreground
#666666
Background
#EAEAEA
Accent
#333333
Border
transparent
Primary button
Foreground
#575757
Background
#D6D6D6
Border
transparent
Primary button hover
Foreground
#575757
Background
#D6D6D6
Border
#B0B0B0
Secondary button
Foreground
#333333
Background
#EAEAEA
Border
transparent
Secondary button hover
Foreground
#333333
Background
hsl(0, 0%, 85%)
Border
transparent
Focus outline
#CCCCCC
Link button
Link color
#333333
Link button hover
Link hover color
hsl(0, 0%, 40%)
Focus outline
#CCCCCC
Implementation
<div class="theme footer-3lop"></div>

3L top menu test

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FF2E51
Background
transparent
Accent
currentColor
Border
transparent
Primary button
Foreground
#000000
Background
#C3ABBF
Border
transparent
Primary button hover
Foreground
#000000
Background
hsl(310, 17%, 85%)
Border
transparent
Secondary button
Foreground
#000000
Background
#FFFFFF
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 85%)
Border
transparent
Focus outline
#000000
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#000000
Implementation
<div class="theme 3l-top-menu-test"></div>

Office Blue

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#72AAB8
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#FFC865
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(38.57, 100%, 85%)
Border
transparent
Secondary button
Foreground
#333333
Background
#996BA0
Border
transparent
Secondary button hover
Foreground
#333333
Background
hsl(292.08, 22%, 40%)
Border
transparent
Focus outline
#CCCCCC
Link button
Link color
#333333
Link button hover
Link hover color
hsl(0, 0%, 40%)
Focus outline
#CCCCCC
Implementation
<div class="theme office_blue_new"></div>

Office Light Blue

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#C7D9D9
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#72AAB8
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(192, 33%, 85%)
Border
transparent
Secondary button
Foreground
#333333
Background
#996BA0
Border
transparent
Secondary button hover
Foreground
#333333
Background
hsl(292.08, 22%, 40%)
Border
transparent
Focus outline
#CCCCCC
Link button
Link color
#333333
Link button hover
Link hover color
hsl(0, 0%, 40%)
Focus outline
#CCCCCC
Implementation
<div class="theme 3l_office_light_blue"></div>

3L Office light blue

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#000000
Background
#C7D9D9
Accent
#333333
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#333333
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 40%)
Border
transparent
Secondary button
Foreground
#333333
Background
#CCCCCC
Border
transparent
Secondary button hover
Foreground
#333333
Background
hsl(0, 0%, 85%)
Border
transparent
Focus outline
#CCCCCC
Link button
Link color
#333333
Link button hover
Link hover color
hsl(0, 0%, 40%)
Focus outline
#CCCCCC
Implementation
<div class="theme 3l-office-light-blue-new"></div>

Light Gray 3L Office

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#333333
Background
#F7F7F7
Accent
#333333
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#72AAB8
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(192, 33%, 85%)
Border
transparent
Secondary button
Foreground
#72AAB8
Background
transparent
Border
#72AAB8
Secondary button hover
Foreground
#88CBDB
Background
#FFFFFF
Border
#72AAB8
Focus outline
#CCCCCC
Link button
Link color
#333333
Link button hover
Link hover color
hsl(0, 0%, 40%)
Focus outline
#CCCCCC
Implementation
<div class="theme light_gray_3l-office"></div>

White BG+Blue CTA

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#333333
Background
#FFFFFF
Accent
#333333
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#72AAB8
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(192, 33%, 85%)
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#CCCCCC
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 85%)
Border
transparent
Focus outline
#CCCCCC
Link button
Link color
#333333
Link button hover
Link hover color
hsl(0, 0%, 40%)
Focus outline
#CCCCCC
Implementation
<div class="theme white-blue"></div>

Trans BG+Blue CTA

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
transparent
Accent
#FFFFFF
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#72AAB8
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(192, 33%, 85%)
Border
transparent
Secondary button
Foreground
#88CBDB
Background
transparent
Border
#72AAB8
Secondary button hover
Foreground
#88CBDB
Background
transparent
Border
#72AAB8
Focus outline
#CCCCCC
Link button
Link color
#8BCFE0
Link button hover
Link hover color
#C3E6EF
Focus outline
#CCCCCC
Implementation
<div class="theme trans-blue"></div>

By clicking 'Accept All' you consent that we may collect information about you for various purposes, including: Functionality, Statistics and Marketing