Simple Web Design

Predefined Colors

Primary

.primary

Secondary

.secondary

Accent

.accent

Blue

.blue #0033ff

Aqua

.aqua #0090cc

Green

.green #1f9900

Yellow

.yellow #e5b800

Orange

.orange #e64500

Red

.red #e60000

Grey

.grey (scheme dependent)

Light

.dark (scheme dependent)

Dark

.light (scheme dependent)

White

.white

Black

.black

The colors for .light and .dark gets changed to thier opposite if darkmode is enabled.

<button class="blue">Blue</button>
<button class="aqua">Aqua</button>
<button class="green">Green</button>
<button class="yellow">Yellow</button>
<button class="orange">Orange</buttond>
<button class="red">Red</button>
<button class="grey">Grey</button>
<button class="light">Light</button>
<button class="dark">Dark</button>
<button class="white">White</button>
<button class="black">Black</button>

Blue Aqua Green Yellow Orange Red

Grey Light Dark White Black

<span class="blue-text">Blue</span>
<span class="aqua-text">Aqua</span>
<span class="green-text">Green</span>
<span class="yellow-text">Yellow</span>
<span class="orange-text">Orange</span>
<span class="red-text">Red</span>
<span class="grey-text">Grey</span>
<span class="light-text">Light</span>
<span class="dark-text">Dark</span>
<span class="white-text">White</span>
<span class="black-text">Black</span>
Default

Define Your Own Color

You can simply redefine the theme color variables. The secondary color is used as hover color by the most components. You can create your own class like .magenta for some elements or overrite the :root pseudoclass to set the color for the whole theme.

<button class="magenta">Magenta Button</button>
<button class="outline magenta">Magenta Button</button>

.magenta {
    --theme-primary-color: hsl(320, 100%, 45%);
    --theme-secondary-color: hsl(320, 100%, 35%);
    --theme-primary-grey-color: var(--theme-primary-color); /*Required if you want to color elements with grey as default*/
    --theme-secondary-grey-color: var(-theme-secondary-color); /*Required if you want to color elements with grey as default*/
    --theme-text-color: #ffffff;
}

Color Scheme

The css applies the systems color scheme by default. If you want to force a scheme for an element, you can add the lightmode or darkmode class to your element. You can put this class in your <body> tag if you want to force the scheme to the whole webseite.

Lightmode Example This card is displayed for lightmode

Color Scheme

Lightmode

<div class="lightmode">...</div>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Darkmode Example This card is displayed for darkmode

Color Scheme

Lightmode

<div class="darkmode">...</div>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Greyscale

Elements with grey background in front of element with grey background can adjust their grey value based on the primary and secondary grey value.

Black Background A card to compare the colors

Background

Black

Inner Card

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Grey Background A card to compare the colors

Background

Black

Inner Card

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

You can implement this behavior for your own elements by overwriting the grey variable for child elements while using the primary grey variable as background.

.grey-element {
background-color: var(--theme-primary-grey-color);
}

.grey-element * {
--theme-primary-grey-color: var(--theme-secondary-grey-color);
}

Theme Colors

You can define your own main color for the theme by overriding the theme variables in the :root class. The theme color applies to menu, buttons, inputs and other elemnts.

:root {
--theme-primary-color: hsl(320, 100%, 45%);
--theme-secondary-color: hsl(320, 100%, 35%);
}

Default colors

Variables	Default
`--theme-primary-color`	#0033ff
`--theme-secondary-color`	#0024b3
`--theme-info-color`	#0033ff
`--theme-success-color`	#1f9900
`--theme-warning-color`	#e5b800
`--theme-error-color`	#e60000

Color Scheme Dependent Variables	Lightmode	Darkmode
`--theme-background-color`	#ffffff	#000000
`--theme-light-color`	#ffffff	#000000
`--theme-dark-color`	#000000	#ffffff
`--theme-primary-grey-color`	#e0e0e0	#1f1f1f
`--theme-secondary-grey-color`	#c2c2c2	#3d3d3d

Color Scheme Dependent Text Variables	Lightmode	Darkmode
`--theme-text-color`	#000000	#ffffff
`--theme-text-grey-color`	#666666	#999999