Themes
Take full control of all the colors
B. Text/Background - Blue/Green
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #163E81 |
| Background | #E4F6C8 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #163E81 |
| Border | transparent |
| Primary button hover | |
| Foreground | #163E81 |
| Background | hsl(217.57, 71%, 40%) |
| Border | #163E81 |
| Secondary button | |
|---|---|
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Focus outline | #163E81 |
| Implementation |
<div class="theme text-and-background-blue-green"></div>
|
B. Text/Background - Blue/Yellow
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #163E81 |
| Background | #FFF1C4 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #163E81 |
| Border | transparent |
| Primary button hover | |
| Foreground | #163E81 |
| Background | hsl(217.57, 71%, 40%) |
| Border | #163E81 |
| Secondary button | |
|---|---|
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Focus outline | #163E81 |
| Implementation |
<div class="theme text-and-background-blue-yellow"></div>
|
B. Text/Background - White/Light Pink
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #17478C |
| Background | #FFD6D5 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #17478C |
| Border | transparent |
| Primary button hover | |
| Foreground | #17478C |
| Background | hsl(215.38, 72%, 40%) |
| Border | #17478C |
| Secondary button | |
|---|---|
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Implementation |
<div class="theme text-and-background-white-light-pink"></div>
|
B. Text/Background - Blue/Light yellow
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #163E81 |
| Background | #FFFCF4 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #163E81 |
| Border | transparent |
| Primary button hover | |
| Foreground | #163E81 |
| Background | hsl(217.57, 71%, 40%) |
| Border | #163E81 |
| Secondary button | |
|---|---|
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Focus outline | #163E81 |
| Implementation |
<div class="theme text-and-background-blue-lightyellow"></div>
|
B. Text/Background - White/Medium Pink
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #FF6E70 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FF6E70 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #FF6E70 |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Implementation |
<div class="theme text-and-background-white-medium-pink"></div>
|
B. Text/Background - White/Dark Pink
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #EF3340 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #EF3340 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #EF3340 |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #EF3340 |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(355.85, 85%, 40%) |
| Border | #FFFFFF |
| Implementation |
<div class="theme text-and-background-white-dark-pink"></div>
|
B. Text/Background - Blue/White
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #163E81 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #163E81 |
| Border | transparent |
| Primary button hover | |
| Foreground | #163E81 |
| Background | #FFFFFF |
| Border | #163E81 |
| Secondary button | |
|---|---|
| Foreground | #000000 |
| Background | transparent |
| Border | #000000 |
| Secondary button hover | |
| Foreground | #000000 |
| Background | transparent |
| Border | #000000 |
| Focus outline | #163E81 |
| Implementation |
<div class="theme text-and-background-blue-white"></div>
|
B. Text/Background - Light Blue/Dark Blue
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #E1F1FB |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #17478C |
| Border | transparent |
| Primary button hover | |
| Foreground | #17478C |
| Background | hsl(215.38, 72%, 40%) |
| Border | #17478C |
| Secondary button | |
|---|---|
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme text-and-background-light-blue-dark-blue"></div>
|
B. Text/Background - White/Dark Blue
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #00223B |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #00223B |
| Background | #B2D9F2 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(203.44, 71%, 85%) |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme theme-new"></div>
|
E. Hero
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #EF3340 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #64A70B |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #163E81 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #163E81 |
| Background | #FFFFFF |
| Border | #163E81 |
| Focus outline | #163E81 |
| Implementation |
<div class="theme hero-block"></div>
|
| Base | |
|---|---|
| Foreground | currentColor |
| Background | transparent |
| 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 |
| Implementation |
<div class="theme slider-and-text"></div>
|
| Base | |
|---|---|
| Foreground | #333333 |
| Background | transparent |
| 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 |
| Implementation |
<div class="theme slider"></div>
|
H. Row - Three images
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #163E81 |
| Border | transparent |
| Primary button hover | |
| Foreground | #163E81 |
| Background | hsl(217.57, 71%, 40%) |
| Border | #163E81 |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Focus outline | #163E81 |
| Implementation |
<div class="theme row-three-images"></div>
|
| Base | |
|---|---|
| Foreground | #163E81 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #163E81 |
| Border | transparent |
| Primary button hover | |
| Foreground | #163E81 |
| Background | #FFFFFF |
| Border | #163E81 |
| Secondary button | |
|---|---|
| Foreground | #000000 |
| Background | #FFFFFF |
| Border | #000000 |
| Secondary button hover | |
| Foreground | #000000 |
| Background | hsl(0, 0%, 85%) |
| Border | #000000 |
| Focus outline | #163E81 |
| Implementation |
<div class="theme product-slider"></div>
|
H. Products
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Primary button hover | |
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme products"></div>
|
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #163E81 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Primary button hover | |
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Focus outline | #FFFFFF |
| Implementation |
<div class="theme footer"></div>
|