Farben und Farbverläufe
Farben
primary
.bg-primary
HEX #2077B9
RGB 127, 198, 0
secondary
.bg-secondary
HEX #2EBBB3
RGB 46, 187, 179
transparent
.bg-transparent
HEX #ffffff
RGB 255, 255, 255
light
.bg-sectionLight
HEX #F9F9F9
RGB 249, 249, 249
section
.bg-section
HEX #282828
RGB 40, 40, 40
Farbverläufe
gradient
.bg-gradient
linear-gradient(222.43deg, #2077B9 0%, #00C6BF 100%)
Background Overlays
Background Overlays Farbe
hero dark
.hero-overlay
0.8 Opacity over images
HEX #282828
RGB 40, 40, 40
different sections
.bg-overlay
0.8 Opacity over images
HEX #FFFFFF
RGB 255, 255, 255
Background Overlays Farbverlauf
hero gray
background-image: linear-gradient(222.43deg, transparent, #282828);
hero color
background-image: linear-gradient(222.43deg, #2077B9 0%, #009BA4 100%);
hero dark
background-image: linear-gradient(222.43deg, #2077B9 0%, #00C6BF 100%);
card
background-image: linear-gradient(180deg, RGBA (40, 40, 40, 0) 50%, RGBA (40, 40, 40, 0.3) 70%);
Typografie
Überschriften
Überschrift 1
Überschrift 2
Überschrift 3
Überschrift 4
Überschrift 5
<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
<h3>Überschrift 3</h3>
<h4>Überschrift 4</h4>
<h5>Überschrift 5</h5>Texte
Lead 1.33rem Medium: Unser Ökostrom setzt Maßstäbe in Sachen Nachhaltigkeit und Transparenz.
Kicker 1rem Regular: Unser Ökostrom setzt Maßstäbe in Sachen Nachhaltigkeit und Transparenz.
Absatz 1rem Regular: Wenn es um erneuerbare Energien geht, sind wir 100% dabei. Deshalb treiben wir die Einbindung von Windkraft in den Strommix voran.
Kapitälchen 1rem Regular uppercase: Datum/Dachzeile Card
„Blockquote 1.33rem Medium: Sed posuere consectetur est at lobortis.“
Absatz small 0.88rem Regular: Wenn es um erneuerbare Energien geht, sind wir 100% dabei. Deshalb treiben wir die Einbindung von Windkraft in den Strommix voran.
Assistive Text (Inputfields) 0.77rem Regular: Wenn es um erneuerbare Energien geht, sind wir 100% dabei. Deshalb treiben wir die Einbindung von Windkraft in den Strommix voran.
<p class="lead">Lead 1.33rem Medium: Unser Ökostrom setzt Maßstäbe in Sachen Nachhaltigkeit und Transparenz.</p>
<p class="kicker">Kicker 1rem Regular: Unser Ökostrom setzt Maßstäbe in Sachen Nachhaltigkeit und Transparenz.</p>
<p>Absatz 1rem Regular: Wenn es um erneuerbare Energien geht, sind wir 100% dabei. Deshalb treiben wir die Einbindung von Windkraft in den Strommix voran.</p>
<p class="caps">KAPITÄLCHEN 1REM REGULAR UPPERCASE: DATUM/DACHZEILE CARD</p>
<p class="blockquote">„Blockquote 1.33rem Medium: Sed posuere consectetur est at lobortis.“</p>
<p class="small">Absatz small 0.88rem Regular: Wenn es um erneuerbare Energien geht, sind wir 100% dabei. Deshalb treiben wir die Einbindung von Windkraft in den Strommix voran.</p>
<p class="assistive">Assistive Text (Inputfields) 0.77rem Regular: Wenn es um erneuerbare Energien geht, sind wir 100% dabei. Deshalb treiben wir die Einbindung von Windkraft in den Strommix voran.</p>