Global Design and Style System

Colors

Black
Default Text
White
Background
Base #1
Gradient 1
Link
Base #2
Gradient 2
Text
Dark Gray
Mid Gray
Light Gray
Lit Gray
Lit Gray 2
Dark Orange
Heading
Mid Orange
Button Hover
Light Orange
Button
Lit Orange
Dark Section
Lit Orange 2
Mid Section
Lit Orange 3
Light Section
Gray's: Shadows & Overlays, Menu

Spacing

8px
16px
32px
64px
(128 px)
|
Textfluss / Blockfluss / H&B / Sections / (Big)

Typography

Heading Font: Domine @ 1.8 lh *

H1 - 42px, weight 700

H2 - 36px, weight 700

H3 - 30px, weight 700

Body Font: Roboto - 18px, weight 400 @ 1.4 lh
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. *
.utility-heading & .utility-text (letter-spacing, etc.)

Links and Buttons

Box Shadow and Border Radius

.box-shadow
.hover-shadow
.transition
.rounded-corners

Padding and Margin

.small_margin-top (8px)
.medium_margin-top (16px)
.large_margin-top (32px)
.padding-small (8px)
.padding-medium (16px)
.padding-large (32px)

Background / Section / Gradient

 .bg-color_light
 .bg-color_mid
 .bg-color_dark
 .gradient

Other

.divider
.utility-section  .utility-collumn  .utility-div  .utility-image  .utility-icon   etc...     (.end-margin_bottom)
(margin,padding, etc.)
Klassensystem:  name- / primary_name- / secondary_name-
Terminbuchung