Themes
Black Background
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #121212 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #121212 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #121212 |
| Background | hsl(0, 0%, 85%) |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #121212 |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | #FFFFFF |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme bg-black"></div>
|
Blue Background
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #00539B |
| Accent | #F9F9F9 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #00539B |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #00539B |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Focus outline | #EFEFEF |
| Link button | |
|---|---|
| Link color | #FFFFFF |
| Link button hover | |
| Link hover color | hsl(0, 0%, 85%) |
| Focus outline | #EFEFEF |
| Implementation |
<div class="theme bg-blue"></div>
|
Gray Background
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #343434 |
| Background | #CECECE |
| Accent | #00539B |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #00539B |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(207.87, 100%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #343434 |
| Background | transparent |
| Border | #343434 |
| Secondary button hover | |
| Foreground | #343434 |
| Background | transparent |
| Border | #343434 |
| Focus outline | #919191 |
| Link button | |
|---|---|
| Link color | #00539B |
| Link button hover | |
| Link hover color | hsl(207.87, 100%, 40%) |
| Focus outline | #919191 |
| Implementation |
<div class="theme bg-gray"></div>
|
Light Gray Background
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #343434 |
| Background | #EFEFEF |
| Accent | #00539B |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #00539B |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(207.87, 100%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #343434 |
| Background | transparent |
| Border | #343434 |
| Secondary button hover | |
| Foreground | #343434 |
| Background | transparent |
| Border | #343434 |
| Focus outline | #AEAEAE |
| Link button | |
|---|---|
| Link color | #00539B |
| Link button hover | |
| Link hover color | hsl(207.87, 100%, 40%) |
| Focus outline | #AEAEAE |
| Implementation |
<div class="theme bg-light-gray"></div>
|
Tradeshows
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #00539B |
| Background | #EFEFEF |
| Accent | #343434 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #00539B |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(207.87, 100%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #00539B |
| Background | transparent |
| Border | #00539B |
| Secondary button hover | |
| Foreground | #00539B |
| Background | transparent |
| Border | #00539B |
| Focus outline | #AEAEAE |
| Link button | |
|---|---|
| Link color | #00539B |
| Link button hover | |
| Link hover color | hsl(207.87, 100%, 40%) |
| Focus outline | #AEAEAE |
| Implementation |
<div class="theme theme-tradeshows"></div>
|
Border - Gray
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #121212 |
| Background | #FFFFFF |
| Accent | currentColor |
| Border | #E3E3E3 |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #121212 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #121212 |
| Background | #FFFFFF |
| Border | transparent |
| Secondary button hover | |
| Foreground | #121212 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme border-gray"></div>
|
Light - Blue
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 | #00539B |
| Border | #00539B |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #545454 |
| Border | #545454 |
| Secondary button | |
|---|---|
| Foreground | #00539B |
| Background | #FFFFFF |
| Border | #00539B |
| Secondary button hover | |
| Foreground | #00539B |
| Background | hsl(0, 0%, 85%) |
| Border | #00539B |
| 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-blue"></div>
|
Light - Blue Accent
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #343434 |
| Background | transparent |
| Accent | #00539B |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #00539B |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(207.87, 100%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #00539B |
| Background | transparent |
| Border | #00539B |
| Secondary button hover | |
| Foreground | #00539B |
| Background | transparent |
| Border | #00539B |
| Focus outline | #CECECE |
| Link button | |
|---|---|
| Link color | #00539B |
| Link button hover | |
| Link hover color | hsl(207.87, 100%, 40%) |
| Focus outline | #CECECE |
| Implementation |
<div class="theme light-blue-accent"></div>
|
Light - Red Accent
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #343434 |
| Background | #FFFFFF |
| Accent | #C41230 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #C41230 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(349.89, 83%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #C41230 |
| Background | transparent |
| Border | #C41230 |
| Secondary button hover | |
| Foreground | #C41230 |
| Background | transparent |
| Border | #C41230 |
| Focus outline | #CECECE |
| Link button | |
|---|---|
| Link color | #C41230 |
| Link button hover | |
| Link hover color | hsl(349.89, 83%, 40%) |
| Focus outline | #CECECE |
| Implementation |
<div class="theme light-red-accent"></div>
|
Gray - Dark
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #121212 |
| Background | #919191 |
| Accent | #919191 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #121212 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #121212 |
| Border | #121212 |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #121212 |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #121212 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Focus outline | #919191 |
| Link button | |
|---|---|
| Link color | #121212 |
| Link button hover | |
| Link hover color | hsl(0, 0%, 40%) |
| Focus outline | #919191 |
| Implementation |
<div class="theme gray-dark"></div>
|
Gray - Light
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #121212 |
| Background | #F9F9F9 |
| Accent | #121212 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #121212 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #121212 |
| Background | #F9F9F9 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #121212 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Focus outline | #F9F9F9 |
| Link button | |
|---|---|
| Link color | #121212 |
| Link button hover | |
| Link hover color | hsl(0, 0%, 40%) |
| Focus outline | #F9F9F9 |
| Implementation |
<div class="theme gray-light"></div>
|
Transparent - Light
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #121212 |
| 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 transparent-light"></div>
|
Transparent - Dark
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 transparent-dark"></div>
|
Transparent - Blue
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #00539B |
| Background | transparent |
| Accent | #121212 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #00539B |
| Border | #00539B |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #919191 |
| Border | #919191 |
| Secondary button | |
|---|---|
| Foreground | #00539B |
| Background | #FFFFFF |
| Border | #00539B |
| Secondary button hover | |
| Foreground | #00539B |
| Background | hsl(0, 0%, 85%) |
| Border | #00539B |
| Focus outline | #919191 |
| Link button | |
|---|---|
| Link color | #121212 |
| Link button hover | |
| Link hover color | hsl(0, 0%, 40%) |
| Focus outline | #919191 |
| Implementation |
<div class="theme transparent-blue"></div>
|
PLP - Price
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #00539B |
| Background | #FFFFFF |
| Accent | #121212 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #00539B |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(207.87, 100%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #00539B |
| Background | transparent |
| Border | #00539B |
| Secondary button hover | |
| Foreground | #00539B |
| Background | transparent |
| Border | #00539B |
| Focus outline | #00539B |
| Implementation |
<div class="theme theme-plp-price"></div>
|
standard
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #121212 |
| Background | #FFFFFF |
| Accent | #121212 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #00539B |
| Border | #00539B |
| Primary button hover | |
| Foreground | #00539B |
| Background | #FFFFFF |
| Border | #00539B |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #1786C9 |
| Border | #1786C9 |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(202.58, 79%, 40%) |
| Border | #1786C9 |
| Focus outline | #121212 |
| Implementation |
<div class="theme theme-standard"></div>
|
Standard - Grey BG
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #F2F2F2 |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #00539B |
| Border | #00539B |
| Primary button hover | |
| Foreground | #00539B |
| Background | #FFFFFF |
| Border | #00539B |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #1876C9 |
| Border | #1876C9 |
| Secondary button hover | |
| Foreground | #1876C9 |
| Background | #FFFFFF |
| Border | #1876C9 |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme theme-standard-grey-bg"></div>
|
Standard - Light Grey BG
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #F9F9F9 |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #00539B |
| Border | #00539B |
| Primary button hover | |
| Foreground | #00539B |
| Background | #FFFFFF |
| Border | #00539B |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #1876C9 |
| Border | #1876C9 |
| Secondary button hover | |
| Foreground | #1876C9 |
| Background | #FFFFFF |
| Border | #1876C9 |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme theme-standard-light-grey-bg"></div>
|
Standard Grey - Color text - BG
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 | #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-standard-grey-color-text-bg"></div>
|
qos topic page
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #121212 |
| Background | #FFFFFF |
| Accent | #121212 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #00539B |
| Border | #00539B |
| Primary button hover | |
| Foreground | #00539B |
| Background | #FFFFFF |
| Border | #00539B |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #1786C9 |
| Border | #1786C9 |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(202.58, 79%, 40%) |
| Border | #1786C9 |
| Focus outline | #121212 |
| Implementation |
<div class="theme theme-qos-topic-page"></div>
|
Blue Background - Yellow Accent
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #00539B |
| Accent | #FFF836 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #00539B |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #00539B |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Focus outline | #EFEFEF |
| Link button | |
|---|---|
| Link color | #FFFFFF |
| Link button hover | |
| Link hover color | hsl(0, 0%, 85%) |
| Focus outline | #EFEFEF |
| Implementation |
<div class="theme bg-blue-ylw-accent"></div>
|
Light Grey - EU MDR
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #F9F9F9 |
| Accent | #00539B |
| 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-light-eu"></div>
|
Dark Grey - EU MDR
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #EFEFEF |
| Accent | #00539B |
| 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-dark-eu"></div>
|
Light Grey faq dropdown - QOS
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #EAEAEA |
| 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 lg-faq-dropdown"></div>
|
STANDARD-WHTE BG - Blue accent
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Accent | #00539B |
| 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 | #1876C9 |
| Link button hover | |
| Link hover color | hsl(208.14, 79%, 40%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme theme-white-bg-blue-accent"></div>
|
GREY BG - f2f2f2 - ISO
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #F2F2F2 |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #00539B |
| Background | transparent |
| Border | #00539B |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #00539B |
| Border | #00539B |
| 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-bg-greyf2-iso"></div>
|
BG - PURPLE - ISO
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #825A93 |
| Accent | #FFFFFF |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #DBBD29 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #9E68AF |
| Border | #DBBD29 |
| 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-bg-purple-iso"></div>
|
BG - ORANGE - ISO
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #E87517 |
| Accent | #000000 |
| 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-bg-orange-iso"></div>
|
BG - YELLOW - ISO
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #D2B112 |
| Accent | #000000 |
| 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-bg-yellow-iso"></div>
|
BG - TEAL - ISO
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #36ADAA |
| Accent | #000000 |
| 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-bg-teal-iso"></div>
|
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #F2F2F2 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #00539B |
| Background | #FFFFFF |
| Border | #00539B |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #00539B |
| Border | #00539B |
| Secondary button | |
|---|---|
| Foreground | #00539B |
| Background | #FFFFFF |
| Border | #00539B |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #00539B |
| Border | #00539B |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | #FFFFFF |
| Implementation |
<div class="theme theme-white-button-f2grey-bg"></div>
|
Blue BG - Yellow Button
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #00539B |
| Accent | #FFFFFF |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #000000 |
| Background | #DBBD29 |
| Border | #DBBD29 |
| Primary button hover | |
| Foreground | #DBBD29 |
| Background | #00539B |
| Border | #DBBD29 |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Focus outline | #EFEFEF |
| Link button | |
|---|---|
| Link color | #FFFFFF |
| Link button hover | |
| Link hover color | hsl(0, 0%, 85%) |
| Focus outline | #EFEFEF |
| Implementation |
<div class="theme bg-blue-ylw-btn"></div>
|
BG - PURPLE - ISO - NAV
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #9E68AF |
| Accent | #FFFFFF |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #000000 |
| Background | #DBBD29 |
| Border | transparent |
| Primary button hover | |
| Foreground | #000000 |
| Background | #9E68AF |
| Border | #DBBD29 |
| 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-bg-purple-iso-nav"></div>
|
BG - TEAL - ISO - NAV
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | transparent |
| Accent | #36ADAA |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #36ADAA |
| Border | transparent |
| Primary button hover | |
| Foreground | #36ADAA |
| Background | #FFFFFF |
| Border | #36ADAA |
| 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-teal-iso-nav"></div>
|
qos topic 2 page
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #121212 |
| Background | transparent |
| Accent | #00539B |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #00539B |
| Border | #00539B |
| Primary button hover | |
| Foreground | #00539B |
| Background | #FFFFFF |
| Border | #00539B |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #1786C9 |
| Border | #1786C9 |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(202.58, 79%, 40%) |
| Border | #1786C9 |
| Focus outline | #121212 |
| Implementation |
<div class="theme theme-qos-topic-2-page"></div>
|
TEXT - HEADER GREY ACCENT - ABOUT US
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Accent | #919191 |
| 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 qos-theme-header-grey-about-us"></div>
|
TEXT - GREY - 656565
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #FFFFFF |
| Accent | #656565 |
| 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 qos-theme-grey-65"></div>
|
QOS - RED & BLUE - TEXT COLOR
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #00539B |
| Background | #FFFFFF |
| Accent | #C41230 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #00539B |
| Border | #00539B |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(207.87, 100%, 40%) |
| Border | #00539B |
| 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 qos-theme-red-blue-txt"></div>
|
QOS - GREY - F6F6F6
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #F6F6F6 |
| Accent | #00539B |
| 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 qos-theme-f6f6f6"></div>
|
Blog Page
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #121212 |
| Background | transparent |
| Accent | #121212 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #00539B |
| Border | #00539B |
| Primary button hover | |
| Foreground | #00539B |
| Background | #FFFFFF |
| Border | #00539B |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #1786C9 |
| Border | #1786C9 |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(202.58, 79%, 40%) |
| Border | #1786C9 |
| Focus outline | #121212 |
| Implementation |
<div class="theme theme-blog-page"></div>
|
| Base | |
|---|---|
| Foreground | #00539B |
| Background | #FFFFFF |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #00539B |
| Background | #FFFFFF |
| Border | #00539B |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #00539B |
| Border | #00539B |
| Secondary button | |
|---|---|
| Foreground | #00539B |
| Background | #FFFFFF |
| Border | #00539B |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #00539B |
| Border | #00539B |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | #FFFFFF |
| Implementation |
<div class="theme theme-white-button-white-bg"></div>
|
BIO RESOURCE AEAEAE
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #AEAEAE |
| 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 bio-resource-aeaeae"></div>
|
BOTH BTN DRK BLUE 00539b
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 | #00539B |
| Border | #00539B |
| Primary button hover | |
| Foreground | #00539B |
| Background | #FFFFFF |
| Border | #00539B |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #00539B |
| Border | #00539B |
| Secondary button hover | |
| Foreground | #00539B |
| Background | #FFFFFF |
| Border | #00539B |
| 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 qos-btn-drk-blue"></div>
|
GREY BG - f2f2f2-blue-accent
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #F2F2F2 |
| Accent | #00539B |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #00539B |
| Background | transparent |
| Border | #00539B |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #00539B |
| Border | #00539B |
| 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-bg-greyf2-blue-accent"></div>
|
theme qos topic page
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 | #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 qos-topic"></div>
|
BG - BLUE - BTN - RED
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #00539B |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #C41230 |
| Border | #C41230 |
| Primary button hover | |
| Foreground | #C41230 |
| Background | #FFFFFF |
| Border | #C41230 |
| 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 bg-blue-btn-red"></div>
|
BG LIGHT BLUE
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #1876C9 |
| 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 qos-bg-light-blue"></div>
|
BOTH BTN DRK BLUE GRY BG
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #EFEFEF |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #00539B |
| Border | #00539B |
| Primary button hover | |
| Foreground | #00539B |
| Background | #FFFFFF |
| Border | #00539B |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #00539B |
| Border | #00539B |
| Secondary button hover | |
| Foreground | #00539B |
| Background | #FFFFFF |
| Border | #00539B |
| 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 qos-btn-drk-blue-gry-bg"></div>
|
Video Page
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #121212 |
| Background | transparent |
| Accent | #121212 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #00539B |
| Border | #00539B |
| Primary button hover | |
| Foreground | #00539B |
| Background | #FFFFFF |
| Border | #00539B |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #1786C9 |
| Border | #1786C9 |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(202.58, 79%, 40%) |
| Border | #1786C9 |
| Focus outline | #121212 |
| Implementation |
<div class="theme theme-video-page"></div>
|
Purple Title Copy
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #5354A4 |
| Background | #FFFFFF |
| 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 theme-purple-title-copy"></div>
|
QOS - Green
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #FFFFFF |
| Accent | #00813D |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #00813D |
| Border | transparent |
| Primary button hover | |
| Foreground | #00813D |
| Background | #FFFFFF |
| Border | #00813D |
| 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 qos-green"></div>
|
QOS - White text- Theme
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 | #007DB5 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #007DB5 |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | currentColor |
| Background | transparent |
| 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 qos-whitetext-theme"></div>
|
Transparent - Dark-Piercing
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 | #007DB5 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #007DB5 |
| Border | #FFFFFF |
| 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 transparent-dark-piercing"></div>
|
QOS - New Purple-theme
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #5E3F99 |
| Accent | #FFFFFF |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #5E3F99 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #5E3F99 |
| Background | hsl(0, 0%, 85%) |
| Border | #FFFFFF |
| 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 qos-newpurple-theme"></div>
|
BG - NEW PURPLE
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #5E3F99 |
| Accent | #FFFFFF |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #5E3F99 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #5E3F99 |
| Background | #9E68AF |
| Border | #DBBD29 |
| 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-bg-newpurple"></div>
|
bg-newPurple-bg
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #5E3F99 |
| Accent | #FFFFFF |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #5E3F99 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #5E3F99 |
| Border | #FFFFFF |
| 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 qos-bg-newpurple-bg-theme"></div>
|
QOS - new Teal - theme
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #63C4AD |
| Accent | #FFFFFF |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #63C4AD |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #63C4AD |
| Border | #FFFFFF |
| 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 qos-newteal-theme"></div>
|
QOS - NEW-BLUE-BG
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #003FA5 |
| Accent | #FFFFFF |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #003FA5 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #003FA5 |
| Border | #FFFFFF |
| 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 qos-new-blue-bg"></div>
|
bg-newPurpleBTN-bg
This is the body text of the theme.
This is the accent color of the theme.
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #5E3F99 |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #5E3F99 |
| Background | #FFFFFF |
| Border | #5E3F99 |
| 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 qos-bg-newpurple-btn-theme"></div>
|
QOS-new lightblue-theme
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #B6DEEE |
| Accent | #FFFFFF |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #B6DEEE |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #B6DEEE |
| Border | #FFFFFF |
| 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 qos-newlightblue-theme"></div>
|
bg-newPink-bg
This is the body text of the theme.
This is the accent color of the theme.
| Primary button | |
|---|---|
| Foreground | #5E3F99 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #5E3F99 |
| Background | #F1D5DA |
| Border | #5E3F99 |
| 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 qos-bg-newpink-bg-theme"></div>
|
Light Blue Background - QBlue Accent
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #00539B |
| Background | #B4DEEF |
| Accent | #000000 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #B4DEEF |
| Background | #00539B |
| Border | transparent |
| Primary button hover | |
| Foreground | #00539B |
| Background | #B4DEEF |
| Border | #00539B |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Focus outline | #EFEFEF |
| Link button | |
|---|---|
| Link color | #FFFFFF |
| Link button hover | |
| Link hover color | hsl(0, 0%, 85%) |
| Focus outline | #EFEFEF |
| Implementation |
<div class="theme bg-light-blue-dark-blue-accent"></div>
|
QOS-New-Blue-text
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #003FA5 |
| Background | transparent |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #003FA5 |
| Border | transparent |
| Primary button hover | |
| Foreground | #003FA5 |
| Background | #FFFFFF |
| Border | #003FA5 |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme qos-new-blue-text"></div>
|
QOS-New-Red-text
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #8A1F2F |
| Background | transparent |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #8A1F2F |
| Border | transparent |
| Primary button hover | |
| Foreground | #8A1F2F |
| Background | #FFFFFF |
| Border | #8A1F2F |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #8A1F2F |
| Border | transparent |
| Secondary button hover | |
| Foreground | #8A1F2F |
| Background | #FFFFFF |
| Border | #8A1F2F |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme qos-new-red-text"></div>
|
Light Blue Background - QBlue Accent-RED-button
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #00539B |
| Background | #B4DEEF |
| Accent | #000000 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #8A1F2F |
| Border | transparent |
| Primary button hover | |
| Foreground | #8A1F2F |
| Background | #B4DEEF |
| Border | #8A1F2F |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Focus outline | #EFEFEF |
| Link button | |
|---|---|
| Link color | #FFFFFF |
| Link button hover | |
| Link hover color | hsl(0, 0%, 85%) |
| Focus outline | #EFEFEF |
| Implementation |
<div class="theme bg-light-blue-dark-blue-accent-rd-btn"></div>
|