Style Guide

Farben

Farben

Orange
#F2642C
Grün
#ABE800
Lila
#893FFC
Pink
#F853A2
Gelb
#F3B31E
Türkis
#00D0F5

Neutrale Töne

Neutral 800
#050229
Neutral 700
#3B3B4E
Neutral 600
#676788
Neutral 500
#ACACBE
Neutral 400
#C8C8D5
Neutral 300
#E4E4EB
Neutral 200
#F9F9FB
Neutral 100
#FFFFFF

Typographie

Heading H1 - Aa Bb Cc Dd

Heading 1 - 60px/1.167em

Heading H2 - Aa Bb Cc Dd

Heading 2 - 48px/1.167em

Heading H3 - Aa Bb Cc Dd

Heading 3 - 24px/1.500em

Heading H4 - Aa Bb Cc Dd

Heading 4 - 22px/1.273em
Heading H5 - Aa Bb Cc Dd
Heading 5 - 18px/1.333em
Heading H6 - Aa Bb Cc Dd
Heading 6 - 16px/1.375em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus.

Paragraph klein - 15px/1.600em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph standard - 18px/1.611em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph groß - 20px/1.700em

Bold - Lorem ipsum dolor sit amet

Bold Text

Italic - Lorem ipsum dolor sit amet

Italic Text

Icons linie

Icons ausgefüllt

Social Media Icons

Buttons

Button Text
Button Primär - klein
Button Text
Button Primär - standard
Button Text
Button Primär - groß
Button Text
Button Sekundär - klein
Button Text
Button Sekundär - standard
Button Text
Button Sekundär - groß