Skip to content

Design System

Farben

KD Blau

Pantone ?
100/31/0/0
0/126/199
#007ec7

KD Blaugrau

Pantone ?
70/10/0/85
7/49/66
#073142

KD Blaugrau 85%

Pantone ?
60/9/0/72
37/79/97
#254f61

KD Blaugrau 70%

Pantone ?
49/7/0/60
71/107/127
#476b7f

KD Blaugrau 55%

Pantone ?
38/5/0/47
107/137/156
#6b899c

KD Leuchtblau

Pantone ?
100/0/0/0
0/158/227
#009ee3

KD Leuchtblau 85%

Pantone ? 85%
85/0/0/0
0/172/233
#00ace9

KD Leuchtblau 70%

Pantone ? 70%
70/0/0/0
32/187/239
#20bbef

KD Leuchtblau 55%

Pantone ? 55%
55/0/0/0
110/203/243
#6ecbf3

KD Leuchtblau 40%

Pantone ? 40%
40/0/0/0
160/218/247
#a0daf7

Signal Orange

Pantone x
0/60/100/0
240/124/0
#f07c00

Signal Grün

Pantone x
85/0/85/0
8/162/84
#08a254

Schwarzblau

Pantone ?
30/0/0/90
42/54/59
#2a363b

Weiß


0/0/0/0
255/255/255
#ffffff

Typografie

Titillium Web (Google Font) für Headlines und Copytext

Hier steht die Headline H1, mehrzeilig, um den Zeilenabstand zu verdeutlichen.

Hier steht die Headline H2, mehrzeilig, um den Zeilenabstand zu verdeutlichen.

Hier steht die Headline H3, mehrzeilig, um den Zeilenabstand besser zu verdeutlichen.

Hier steht die Headline H4, mehrzeilig, um den Zeilenabstand besser zu verdeutlichen.

Hier steht die Headline H5, mehrzeilig, um den Zeilenabstand besser zu verdeutlichen.
Hier steht die Headline H6, mehrzeilig, um den Zeilenabstand besser zu verdeutlichen.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Odio euismod lacinia at quis risus sed vulputate odio. At lectus urna duis convallis convallis tellus. Vulputate dignissim suspendisse in est ante in nibh. Mi ipsum faucibus vitae aliquet nec ullamcorper sit. Tellus elementum sagittis vitae et leo duis ut. Id eu nisl nunc mi ipsum faucibus vitae aliquet nec.

Scelerisque mauris pellentesque pulvinar pellentesque habitant. Sit amet commodo nulla facilisi nullam.

Adipiscing commodo elit at imperdiet dui accumsan. Sagittis nisl rhoncus mattis rhoncus urna neque viverra justo. Feugiat in fermentum posuere urna. Augue eget arcu dictum varius duis at consectetur. Etiam tempor orci eu lobortis elementum nibh tellus molestie. Adipiscing elit ut aliquam purus sit amet luctus venenatis lectus. Donec massa sapien faucibus et molestie ac. Eu ultrices vitae auctor eu augue.

Suspendisse interdum consectetur libero id faucibus nisl tincidunt eget nullam. Velit dignissim sodales ut eu sem integer vitae justo eget.

At volutpat diam ut venenatis tellus in. Justo eget magna fermentum iaculis eu non diam phasellus.

Nibh sed pulvinar proin gravida hendrerit. Lorem ipsum dolor sit amet consectetur. Non curabitur gravida arcu ac tortor dignissim convallis aenean. Massa tincidunt dui ut ornare lectus sit amet est. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor magna. Quis risus sed vulputate odio ut enim. Eu ultrices vitae auctor eu augue ut lectus arcu bibendum. Bibendum est ultricies integer quis. Ultrices mi tempus imperdiet nulla malesuada. Lectus proin nibh nisl condimentum id venenatis a. Nulla facilisi nullam vehicula ipsum a. Diam donec adipiscing tristique risus.

Mi eget mauris pharetra et. Tincidunt arcu non sodales neque sodales ut etiam. Nisl vel pretium lectus quam.

Call-to-action-Module