UI Style Guide

01. Farben


Farbwert 1 // Orange

CSS-Klasse: orange

HEX-Wert: #ec6609

RGBA-Wert: rgba(236, 102, 9,1)

Farbwert 2 // hellblau

CSS-Klasse: lightblue

HEX-Wert: #1dbae9

RGBA-Wert: rgba(29, 186, 233,1)

Farbwert 3 // hellgrau

CSS-Klasse: lightgrey

HEX-Wert: #5a5a5a

RGBA-Wert: rgba(90, 90, 90,1)

Farbwert 4 // grau

CSS-Klasse: grey

HEX-Wert: #313131

RGBA-Wert: rgba(49, 49, 49,1)

Farbwert 5 // darkgrey

CSS-Klasse: darkgrey

HEX-Wert: #2a2a2a

RGBA-Wert: rgba(42, 42, 42,1)

Farbwert 6 // white

CSS-Klasse: white

HEX-Wert: #ffffff

RGBA-Wert: rgba(255, 255, 255,1)

Farbwert 7 // ultrahellgrau

CSS-Klasse: ultralightgrey

HEX-Wert: #f0f0f0

RGBA-Wert: rgba(240,240,240,1)

//
// Color system
//

$color1:             #ec6609;
$color1-trans1:      rgba(236, 102, 9,.8);
$color1-trans2:      rgba(236, 102, 9,.5);
$color1-trans3:      rgba(236, 102, 9,.2);

$color2:             #1dbae9;
$color2-trans1:      rgba(29, 186, 233,.8);
$color2-trans2:      rgba(29, 186, 233,.5);
$color2-trans3:      rgba(29, 186, 233,.2);

$color3:             #5a5a5a;
$color3-trans1:      rgba(90, 90, 90,.8);
$color3-trans2:      rgba(90, 90, 90,.5);
$color3-trans3:      rgba(90, 90, 90,.2);

$color4:             #313131;
$color4-trans1:      rgba(49, 49, 49,.8);
$color4-trans2:      rgba(49, 49, 49,.5);
$color4-trans3:      rgba(49, 49, 49,.2);

$color5:             #2a2a2a;
$color5-trans1:      rgba(42, 42, 42,.8);
$color5-trans2:      rgba(42, 42, 42,.5);
$color5-trans3:      rgba(42, 42, 42,.2);

$color6:             #ffffff;
$color6-trans1:      rgba(255, 255, 255,.8);
$color6-trans2:      rgba(255, 255, 255,.5);
$color6-trans3:      rgba(255, 255, 255,.2);

$color7:             #f0f0f0;
$color7-trans1:      rgba(240,240,240,.8);
$color7-trans2:      rgba(240,240,240,.5);
$color7-trans3:      rgba(240,240,240,.2);


//
// Class to id assignment
//

$orange:             $color1;
$orange-trans1:      $color1-trans1;
$orange-trans2:      $color1-trans2;
$orange-trans3:      $color1-trans3;

$lightblue:             $color2;
$lightblue-trans1:      $color2-trans1;
$lightblue-trans2:      $color2-trans2;
$lightblue-trans3:      $color2-trans3;

$lightgrey:             $color3;
$lightgrey-trans1:      $color3-trans1;
$lightgrey-trans2:      $color3-trans2;
$lightgrey-trans3:      $color3-trans3;

$grey:             $color4;
$grey-trans1:      $color4-trans1;
$grey-trans2:      $color4-trans2;
$grey-trans3:      $color4-trans3;

$darkgrey:             $color5;
$darkgrey-trans1:      $color5-trans1;
$darkgrey-trans2:      $color5-trans2;
$darkgrey-trans3:      $color5-trans3;

$white:             $color6;
$white-trans1:      $color6-trans1;
$white-trans2:      $color6-trans2;
$white-trans3:      $color6-trans3;

$ultralightgrey:             $color7;
$ultralightgrey-trans1:      $color7-trans1;
$ultralightgrey-trans2:      $color7-trans2;
$ultralightgrey-trans3:      $color7-trans3;

//
// Background color classes
//

.bg-color1,
.bg-orange {
	background-color: $orange;
}

.bg-color2,
.bg-lightblue {
	background-color: $lightblue;
}

.bg-color3,
.bg-lightgrey {
	background-color: $lightgrey;
}

.bg-color4,
.bg-grey {
	background-color: $grey;
}

.bg-color5,
.bg-darkgrey {
	background-color: $darkgrey;
}

.bg-color6,
.bg-white {
	background-color: $white;
}

.bg-color7,
.bg-ultralightgrey {
	background-color: $ultralightgrey;
}


//
// Copy&paste colors for _styleguide.scss
//

&.bg-color1 {
	background-color: $orange;
}

&.bg-color2 {
	background-color: $lightblue;
}

&.bg-color3 {
	background-color: $lightgrey;
}

&.bg-color4 {
	background-color: $grey;
}

&.bg-color5 {
	background-color: $darkgrey;
}

&.bg-color6 {
	background-color: $white;
}

&.bg-color7 {
	background-color: $ultralightgrey;
}

02.Typography


Font/Font Weight

Aa

Cabin Regular

Aa

Cabin Kursiv

Aa

Cabin Fett

Aa

Cabin Fett Kursiv

Überschriften

H1 Überschrift mit Link

H2 Überschrift mit Link

H3 Überschrift mit Link

H4 Überschrift mit Link

H5 Überschrift mit Link
H6 Überschrift mit Link
Überschriften mit Linie

H1 Überschrift mit Link und etwas mehr Text über mehrere Zeilen um zu sehen was mit der Linie passiert

H2 Überschrift mit Link und etwas mehr Text über mehrere Zeilen um zu sehen was mit der Linie passiert

H3 Überschrift mit Link und etwas mehr Text über mehrere Zeilen um zu sehen was mit der Linie passiert

H4 Überschrift mit Link und etwas mehr Text über mehrere Zeilen um zu sehen was mit der Linie passiert

H5 Überschrift mit Link und etwas mehr Text über mehrere Zeilen um zu sehen was mit der Linie passiert
H6 Überschrift mit Link und etwas mehr Text über mehrere Zeilen um zu sehen was mit der Linie passiert
Überschriften zentriert

H1 Überschrift mit Link

H2 Überschrift mit Link

H3 Überschrift mit Link

H4 Überschrift mit Link

H5 Überschrift mit Link
H6 Überschrift mit Link
Überschriften rechtsbündig

H1 Überschrift mit Link

H2 Überschrift mit Link

H3 Überschrift mit Link

H4 Überschrift mit Link

H5 Überschrift mit Link
H6 Überschrift mit Link
Überschriften

H1 Überschrift mit Link

H2 Überschrift mit Link

H3 Überschrift mit Link

H4 Überschrift mit Link

H5 Überschrift mit Link
H6 Überschrift mit Link
Paragraph

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula Link eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


Donec quam felis, ultricies nec, pellentesque eu, pretium Link quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac.

Listen // ungeornete Liste & geordnete Liste
  • Cum sociis natoque Link penatibus et magnis dis parturient montes
  • Donec pede justo, fringilla vel, aliquet nec, Link vulputate eget, arcu
  • In enim justo Link rhoncus ut imperdiet a venenatis vitae justo
  1. Cum sociis natoque Link penatibus et magnis dis parturient montes
  2. Nascetur ridiculus mus donec quam felis ultricies nec pellentesque eu
  3. In enim justo Link rhoncus ut imperdiet a venenatis vitae justo

03.Icons und Logos


Icons

instagram

document-file-pdf

loop

map-marker

file-empty

download

mail-open

search

home

mail

phone

youtube

history

heart

graduation-hat

cross

arrow-down

arrow-left

arrow-right

arrow-up

facebook

laptop

plus

warning

users

thumbs-up

sun

star

select

menu

leaf