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 | #2369AF |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #262626 |
| Border | #262626 |
| Primary button hover | |
| Foreground | #262626 |
| Background | #FFFFFF |
| Border | #B3B3B3 |
| 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 | #333333 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #333333 |
| 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 Pink
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #CB2686 |
| Accent | #000000 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #CB2686 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #CB2686 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #CB2686 |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(325.09, 68%, 40%) |
| Border | #FFFFFF |
| 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 theme-pink"></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 | #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-border"></div>
|
ES Dark blue
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #2369AF |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #2369AF |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #2369AF |
| Border | #2369AF |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #2369AF |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #2369AF |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme dark-blue"></div>
|
ES Dark Grey
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #555555 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #555555 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #555555 |
| Background | hsl(0, 0%, 85%) |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #555555 |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #555555 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme theme-dark-grey"></div>
|
Light gray2
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #CCCCCC |
| Background | #333333 |
| Border | transparent |
| Primary button hover | |
| Foreground | #CCCCCC |
| 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-gray2"></div>
|
Light green
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #262626 |
| Background | #F1F7F0 |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #F1F7F0 |
| Background | #262626 |
| Border | transparent |
| Primary button hover | |
| Foreground | #F1F7F0 |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #262626 |
| Background | #F1F7F0 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #262626 |
| Background | hsl(111.43, 30%, 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 theme-green"></div>
|
Dark green
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 | #517C4C |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(113.75, 24%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #517C4C |
| Background | transparent |
| Border | #517C4C |
| Secondary button hover | |
| Foreground | #517C4C |
| Background | transparent |
| Border | #517C4C |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme theme-darkgreen"></div>
|
Light transparent blue
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #2369AF |
| Background | transparent |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #2369AF |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(210, 67%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #2369AF |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | #2369AF |
| Background | transparent |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme light-transparentblue"></div>
|
Light gray3
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #CCCCCC |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #CCCCCC |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #CCCCCC |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme theme-gray3"></div>
|
ES Dark green
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #19B47E |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #19B47E |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #19B47E |
| Border | #19B47E |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #19B47E |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #19B47E |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme dark-green"></div>
|
ES Grey border
This is the body text of the theme.
This is the accent color of the theme.
| 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-grey-border"></div>
|
ES Very Light Grey
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #F4F4F4 |
| Accent | #2369AF |
| 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 theme-very-light-grey"></div>
|
Light transparent green
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #19B47E |
| Background | transparent |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #19B47E |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(159.1, 76%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #19B47E |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | #19B47E |
| Background | transparent |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme light-transparentgreen"></div>
|
Light transparent light blue
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #689CCF |
| Background | transparent |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #689CCF |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(209.71, 52%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #689CCF |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | #689CCF |
| Background | transparent |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme light-transparentlightblue"></div>
|
Light transparent black
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | transparent |
| 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 | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | transparent |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme light-transparentblack"></div>
|
Light transparent dark green
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #517C4C |
| Background | transparent |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #517C4C |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(113.75, 24%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #517C4C |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | #517C4C |
| Background | transparent |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme light-transparentdarkgreen"></div>
|
Light transparent green border
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #19B47E |
| Background | transparent |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #19B47E |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(159.1, 76%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #19B47E |
| Background | transparent |
| Border | #19B47E |
| Secondary button hover | |
| Foreground | #19B47E |
| Background | transparent |
| Border | #19B47E |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme light-transparentgreenborder"></div>
|
ES Very Light Grey border
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #F4F4F4 |
| Accent | currentColor |
| Border | #EBEBEB |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | #EBEBEB |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | #EBEBEB |
| 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-very-light-grey-border"></div>
|
Partner Portal Orange
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFA523 |
| Background | #FFFFFF |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFA523 |
| Background | #262626 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFA523 |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #262626 |
| Background | #FFA523 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #262626 |
| Background | hsl(35.45, 100%, 85%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme theme-orange"></div>
|
Light transparent grey
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #555555 |
| Background | transparent |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #555555 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #555555 |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | #555555 |
| Background | transparent |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme light-transparentgrey"></div>
|
Light transparent purple
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #3C175C |
| Background | transparent |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #3C175C |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(272.17, 60%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #3C175C |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | #3C175C |
| Background | transparent |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme light-transparentpurple"></div>
|
ES Very Light blue
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #E1EBF5 |
| Accent | #2369AF |
| 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 | #E1EBF5 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(210, 50%, 85%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme theme-very-light-blue"></div>
|
ES Very Light green
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #E8F8F2 |
| 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 | #E8F8F2 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(157.5, 53%, 85%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme theme-very-light-green"></div>
|
ES Very Light purple
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #ECE8EF |
| 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 | #ECE8EF |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(274.29, 18%, 85%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme theme-very-light-purple"></div>
|
ES Very Light darkblue
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #D3E1EF |
| 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 | #D3E1EF |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(210, 47%, 85%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme theme-very-light-darkblue"></div>
|
ES Blue border
This is the body text of the theme.
This is the accent color of the theme.
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #2369AF |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(210, 67%, 40%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme theme-blue-border"></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 | #2369AF |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #262626 |
| Border | #262626 |
| Primary button hover | |
| Foreground | #262626 |
| Background | #FFFFFF |
| Border | #B3B3B3 |
| Secondary button | |
|---|---|
| Foreground | #1E1A33 |
| Background | transparent |
| Border | #262626 |
| Secondary button hover | |
| Foreground | #1E1A33 |
| Background | transparent |
| Border | #262626 |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme light-trans"></div>
|
Partner Portal Gold Navigation
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFA523 |
| Background | #FFF0DB |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFA523 |
| Background | #262626 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFA523 |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #262626 |
| Background | #FFA523 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #262626 |
| Background | hsl(35.45, 100%, 85%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme theme-gold"></div>
|
Light green Partner Portal
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #19B47E |
| Background | #FFFFFF |
| Accent | currentColor |
| Border | #CCCCCC |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #19B47E |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(159.1, 76%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #19B47E |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | #19B47E |
| Background | transparent |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme light-greenpartnerportal"></div>
|
portal landing page grey and green
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | transparent |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #19B47E |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(159.1, 76%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #2369AF |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(210, 67%, 40%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme portal-landingpage-grey-green"></div>
|
| Base | |
|---|---|
| Foreground | #333333 |
| Background | transparent |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #19B47E |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(159.1, 76%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #689CCF |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(209.71, 52%, 40%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme header-buttons-green-blue"></div>
|
Lighter Pink
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #E677B7 |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #E677B7 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #E677B7 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #E677B7 |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(325.41, 69%, 85%) |
| Border | #FFFFFF |
| 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 theme-pinklighter"></div>
|
Light blue
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #689CCF |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #689CCF |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #689CCF |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #689CCF |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(209.71, 52%, 40%) |
| Border | #FFFFFF |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme theme-blue"></div>
|
Pink transparent
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #CB2686 |
| Background | transparent |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #CB2686 |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(325.09, 68%, 40%) |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #CB2686 |
| Background | #FFFFFF |
| Border | #CB2686 |
| Secondary button hover | |
| Foreground | #CB2686 |
| Background | hsl(0, 0%, 85%) |
| Border | #CB2686 |
| Link button | |
|---|---|
| Link color | #CB2686 |
| Link button hover | |
| Link hover color | hsl(325.09, 68%, 40%) |
| Implementation |
<div class="theme pink-transparent"></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 | #CB2686 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #262626 |
| Border | #262626 |
| Primary button hover | |
| Foreground | #262626 |
| Background | #FFFFFF |
| Border | #B3B3B3 |
| Secondary button | |
|---|---|
| Foreground | #1E1A33 |
| Background | transparent |
| Border | #262626 |
| Secondary button hover | |
| Foreground | #1E1A33 |
| Background | transparent |
| Border | #262626 |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme light-trans2"></div>
|
| Base | |
|---|---|
| Foreground | #262626 |
| Background | transparent |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #CB2686 |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(325.09, 68%, 40%) |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #CB2686 |
| Background | #FFFFFF |
| Border | #CB2686 |
| Secondary button hover | |
| Foreground | #CB2686 |
| Background | hsl(0, 0%, 85%) |
| Border | #CB2686 |
| Link button | |
|---|---|
| Link color | #CB2686 |
| Link button hover | |
| Link hover color | hsl(325.09, 68%, 40%) |
| Implementation |
<div class="theme pink-transparent-button"></div>
|
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #F4F4F4 |
| Accent | #2369AF |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #CB2686 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(325.09, 68%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #CB2686 |
| Background | #F4F4F4 |
| Border | #CB2686 |
| Secondary button hover | |
| Foreground | #CB2686 |
| Background | hsl(0, 0%, 85%) |
| Border | #CB2686 |
| 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 theme-very-light-grey-pinkbutton"></div>
|
ISE Dark blue
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #163259 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #163259 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #2369AF |
| Border | #2369AF |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #163259 |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #2369AF |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme dark-blue-ise"></div>
|
ISE Light blue
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #29A5DF |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #29A5DF |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #2369AF |
| Border | #2369AF |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #29A5DF |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #2369AF |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme light-blue-ise"></div>
|
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #CB2686 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(325.09, 68%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #CB2686 |
| Background | #FFFFFF |
| Border | #CB2686 |
| Secondary button hover | |
| Foreground | #CB2686 |
| Background | hsl(0, 0%, 85%) |
| Border | #CB2686 |
| Link button | |
|---|---|
| Link color | #CB2686 |
| Link button hover | |
| Link hover color | hsl(325.09, 68%, 40%) |
| Implementation |
<div class="theme pink-transparent-button-dark"></div>
|
| Base | |
|---|---|
| Foreground | #333333 |
| Background | transparent |
| 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 | #FFFFFF |
| Background | #3C175C |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(272.17, 60%, 40%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme header-buttons-grey-purple"></div>
|
ES Violet
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #3C175C |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #3C175C |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #3C175C |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #3C175C |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #3C175C |
| Border | #FFFFFF |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme dark-violet"></div>
|