Themes
neusta Theme
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #000082 |
Background | #ECECEC |
Accent | currentColor |
Border | #FFFFFF |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #000082 |
Border | transparent |
Primary button hover | |
Foreground | #000082 |
Background | #ECECEC |
Border | #FFFFFF |
Secondary button | |
---|---|
Foreground | currentColor |
Background | #FF4B19 |
Border | transparent |
Secondary button hover | |
Foreground | currentColor |
Background | hsl(13,04, 100%, 40%) |
Border | transparent |
Focus outline | #000000 |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Focus outline | #000000 |
Implementation |
<div class="theme neustatheme"></div>
|
Light
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #000082 |
Background | #FFFFFF |
Accent | #FF4B19 |
Border | transparent |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #000082 |
Border | #000082 |
Primary button hover | |
Foreground | #FFFFFF |
Background | #0F2454 |
Border | #0F2454 |
Secondary button | |
---|---|
Foreground | #000082 |
Background | #FFFFFF |
Border | #000082 |
Secondary button hover | |
Foreground | #000082 |
Background | hsl(0, 0%, 85%) |
Border | #000082 |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Implementation |
<div class="theme light-08"></div>
|
Dark
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #FFFFFF |
Background | #000082 |
Accent | currentColor |
Border | transparent |
Primary button | |
---|---|
Foreground | #000082 |
Background | #FFFFFF |
Border | #FFFFFF |
Primary button hover | |
Foreground | #FFFFFF |
Background | #262626 |
Border | #262626 |
Secondary button | |
---|---|
Foreground | #FFFFFF |
Background | #000082 |
Border | #FFFFFF |
Secondary button hover | |
Foreground | #262626 |
Background | #FFFFFF |
Border | #FFFFFF |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Implementation |
<div class="theme dark"></div>
|
Light transparent
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #000082 |
Background | transparent |
Accent | #262626 |
Border | transparent |
Primary button | |
---|---|
Foreground | currentColor |
Background | transparent |
Border | transparent |
Primary button hover | |
Foreground | currentColor |
Background | transparent |
Border | transparent |
Secondary button | |
---|---|
Foreground | currentColor |
Background | transparent |
Border | transparent |
Secondary button hover | |
Foreground | currentColor |
Background | transparent |
Border | transparent |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Implementation |
<div class="theme light-transparent"></div>
|
Dark transparent
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #FFFFFF |
Background | transparent |
Accent | currentColor |
Border | transparent |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | transparent |
Border | transparent |
Primary button hover | |
Foreground | #FFFFFF |
Background | transparent |
Border | transparent |
Secondary button | |
---|---|
Foreground | #FFFFFF |
Background | transparent |
Border | transparent |
Secondary button hover | |
Foreground | #FFFFFF |
Background | transparent |
Border | transparent |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Implementation |
<div class="theme dark-transparent"></div>
|
Light gray
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #000082 |
Background | #F7F7F7 |
Accent | #333333 |
Border | transparent |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #000082 |
Border | transparent |
Primary button hover | |
Foreground | #FFFFFF |
Background | hsl(240, 100%, 40%) |
Border | transparent |
Secondary button | |
---|---|
Foreground | #000082 |
Background | #F7F7F7 |
Border | transparent |
Secondary button hover | |
Foreground | #000082 |
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-light"></div>
|
Gray border
This is the body text of the theme.
This is the accent color of the theme.
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #000082 |
Border | transparent |
Primary button hover | |
Foreground | #FFFFFF |
Background | hsl(240, 100%, 40%) |
Border | transparent |
Secondary button | |
---|---|
Foreground | #000082 |
Background | #FFFFFF |
Border | transparent |
Secondary button hover | |
Foreground | #000082 |
Background | hsl(0, 0%, 85%) |
Border | transparent |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Implementation |
<div class="theme theme-gray-border"></div>
|
Theme darkblue
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #FFFFFF |
Background | #000082 |
Accent | currentColor |
Border | transparent |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | transparent |
Border | #FFFFFF |
Primary button hover | |
Foreground | #000082 |
Background | #FFFFFF |
Border | #FFFFFF |
Secondary button | |
---|---|
Foreground | #000082 |
Background | #FFFFFF |
Border | #000082 |
Secondary button hover | |
Foreground | #000082 |
Background | hsl(0, 0%, 85%) |
Border | #000082 |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Implementation |
<div class="theme theme-darkblue"></div>
|
Base | |
---|---|
Foreground | #000082 |
Background | transparent |
Accent | #FF4B19 |
Border | transparent |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #000082 |
Border | #000082 |
Primary button hover | |
Foreground | #FFFFFF |
Background | #000082 |
Border | #000082 |
Secondary button | |
---|---|
Foreground | #FF4B19 |
Background | transparent |
Border | #FF4B19 |
Secondary button hover | |
Foreground | #FFFCFC |
Background | #FF4B19 |
Border | #FF4B19 |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Implementation |
<div class="theme theme-bluebutton"></div>
|
lightblue
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #000082 |
Background | #F7FAFF |
Accent | #333333 |
Border | transparent |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #000082 |
Border | #000082 |
Primary button hover | |
Foreground | #FFFFFF |
Background | hsl(240, 100%, 40%) |
Border | #000082 |
Secondary button | |
---|---|
Foreground | #333333 |
Background | #FFFFFF |
Border | #333333 |
Secondary button hover | |
Foreground | #333333 |
Background | hsl(0, 0%, 85%) |
Border | #333333 |
Focus outline | #CCCCCC |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Focus outline | #CCCCCC |
Implementation |
<div class="theme theme-light-blue"></div>
|
neusta365Blue Landingpage Theme
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #000082 |
Background | #A4DBFE |
Accent | currentColor |
Border | #FFFFFF |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #000082 |
Border | #000000 |
Primary button hover | |
Foreground | #000082 |
Background | #ECECEC |
Border | #FFFFFF |
Secondary button | |
---|---|
Foreground | currentColor |
Background | #FF4B19 |
Border | transparent |
Secondary button hover | |
Foreground | currentColor |
Background | hsl(13,04, 100%, 40%) |
Border | transparent |
Focus outline | #000000 |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Focus outline | #000000 |
Implementation |
<div class="theme neustathemeblue"></div>
|
neusta365-Orange
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #FFFFFF |
Background | #FF4B19 |
Accent | currentColor |
Border | transparent |
Primary button | |
---|---|
Foreground | #FF4B19 |
Background | #FFFFFF |
Border | #FFFFFF |
Primary button hover | |
Foreground | #FFFFFF |
Background | #E76846 |
Border | #FFFFFF |
Secondary button | |
---|---|
Foreground | currentColor |
Background | #FFFFFF |
Border | transparent |
Secondary button hover | |
Foreground | currentColor |
Background | hsl(0, 0%, 85%) |
Border | transparent |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Implementation |
<div class="theme neusta-theme-orange"></div>
|
Header
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #000082 |
Background | #F7F7F7 |
Accent | #333333 |
Border | transparent |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #000082 |
Border | transparent |
Primary button hover | |
Foreground | #1C429A |
Background | #F7F7F7 |
Border | #1C429A |
Secondary button | |
---|---|
Foreground | #000082 |
Background | #CCCCCC |
Border | transparent |
Secondary button hover | |
Foreground | #000082 |
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-header"></div>
|
Dark gray
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #333333 |
Background | #E6E6E6 |
Accent | currentColor |
Border | transparent |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #333333 |
Border | transparent |
Primary button hover | |
Foreground | #FFFFFF |
Background | hsl(0, 0%, 40%) |
Border | transparent |
Secondary button | |
---|---|
Foreground | #333333 |
Background | #CCCCCC |
Border | transparent |
Secondary button hover | |
Foreground | #333333 |
Background | hsl(0, 0%, 85%) |
Border | transparent |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Implementation |
<div class="theme theme-gray"></div>
|
blue ohne rahmen
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #333333 |
Background | #E3F5FA |
Accent | currentColor |
Border | transparent |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #6BB6D6 |
Border | transparent |
Primary button hover | |
Foreground | #6BB6D6 |
Background | #FFFFFF |
Border | #6BB6D6 |
Secondary button | |
---|---|
Foreground | #6BB6D6 |
Background | #FFFFFF |
Border | transparent |
Secondary button hover | |
Foreground | #6BB6D6 |
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-noborder-blue"></div>
|
Preismodell-theme
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #000000 |
Background | #FFFFFF |
Accent | currentColor |
Border | #EDEDED |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #000082 |
Border | transparent |
Primary button hover | |
Foreground | #244D82 |
Background | #ECECEC |
Border | #FFFFFF |
Secondary button | |
---|---|
Foreground | currentColor |
Background | #2231B5 |
Border | transparent |
Secondary button hover | |
Foreground | currentColor |
Background | hsl(233,88, 68%, 40%) |
Border | transparent |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Implementation |
<div class="theme preismodell-theme"></div>
|
Base | |
---|---|
Foreground | #FFFFFF |
Background | transparent |
Accent | currentColor |
Border | transparent |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | transparent |
Border | #FFFFFF |
Primary button hover | |
Foreground | #27336E |
Background | #F5F5F5 |
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 dark-transparent-button"></div>
|
blue background
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #FFFFFF |
Background | #009EF5 |
Accent | currentColor |
Border | transparent |
Primary button | |
---|---|
Foreground | #009EF5 |
Background | #FFFFFF |
Border | transparent |
Primary button hover | |
Foreground | #009EF5 |
Background | #F0F0F0 |
Border | transparent |
Secondary button | |
---|---|
Foreground | #FFFFFF |
Background | transparent |
Border | #FFFFFF |
Secondary button hover | |
Foreground | #FFFFFF |
Background | transparent |
Border | #FFFFFF |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Implementation |
<div class="theme theme-blue-background"></div>
|
blueborder
This is the body text of the theme.
This is the accent color of the theme.
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #000082 |
Border | #000082 |
Primary button hover | |
Foreground | #FFFFFF |
Background | #008AD6 |
Border | #009EF5 |
Secondary button | |
---|---|
Foreground | #009EF5 |
Background | #FFFFFF |
Border | #009EF5 |
Secondary button hover | |
Foreground | #009EF5 |
Background | hsl(0, 0%, 85%) |
Border | #009EF5 |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Implementation |
<div class="theme theme-blueborder"></div>
|
hellblau-theme
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #000082 |
Background | #F1F6FA |
Accent | #333333 |
Border | transparent |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #000082 |
Border | #000082 |
Primary button hover | |
Foreground | #FFFFFF |
Background | #3E8AD4 |
Border | #000082 |
Secondary button | |
---|---|
Foreground | currentColor |
Background | #FFFFFF |
Border | #000082 |
Secondary button hover | |
Foreground | currentColor |
Background | hsl(0, 0%, 85%) |
Border | #000082 |
Focus outline | #000000 |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Focus outline | #000000 |
Implementation |
<div class="theme hellblau-theme"></div>
|
light-blue-theme
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #000000 |
Background | #A3DAFE |
Accent | currentColor |
Border | transparent |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #000082 |
Border | #469BEE |
Primary button hover | |
Foreground | #FFFFFF |
Background | #3E8AD4 |
Border | #469BEE |
Secondary button | |
---|---|
Foreground | currentColor |
Background | #FFFFFF |
Border | #469BEE |
Secondary button hover | |
Foreground | currentColor |
Background | hsl(0, 0%, 85%) |
Border | #469BEE |
Focus outline | #000000 |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Focus outline | #000000 |
Implementation |
<div class="theme light-blue-theme"></div>
|
orange-blue
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #000082 |
Background | transparent |
Accent | #000082 |
Border | transparent |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #E76846 |
Border | #E76846 |
Primary button hover | |
Foreground | #E76846 |
Background | hsl(12,67, 77%, 40%) |
Border | #E76846 |
Secondary button | |
---|---|
Foreground | #FFFFFF |
Background | #000082 |
Border | transparent |
Secondary button hover | |
Foreground | #000082 |
Background | #FFFFFF |
Border | #000082 |
Focus outline | #000082 |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Focus outline | #000082 |
Implementation |
<div class="theme orange-blue"></div>
|
Gray border orange
This is the body text of the theme.
This is the accent color of the theme.
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #000082 |
Border | transparent |
Primary button hover | |
Foreground | #000082 |
Background | #FFFFFF |
Border | #000082 |
Secondary button | |
---|---|
Foreground | #FFFFFF |
Background | #FF4B19 |
Border | transparent |
Secondary button hover | |
Foreground | #E76846 |
Background | #FFFFFF |
Border | #E76846 |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Implementation |
<div class="theme themegrayborderorange"></div>
|
Gray border blue
This is the body text of the theme.
This is the accent color of the theme.
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #000082 |
Border | transparent |
Primary button hover | |
Foreground | #000082 |
Background | #FFFFFF |
Border | #000082 |
Secondary button | |
---|---|
Foreground | #FFFFFF |
Background | #FF4B19 |
Border | transparent |
Secondary button hover | |
Foreground | #E76846 |
Background | #FFFFFF |
Border | #E76846 |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Implementation |
<div class="theme themegrayborderblue"></div>
|