Design-System
Farben
Primärfarben
38/0/100/0
180/204/0
#B4CC00
42/0/5/0
145/231/255
#91e7ff
0/20/80/0
255/208/70
#ffd046
Sekundärfarben
kh-Erdbraun
Pantone ?
35/40/70/25
148/128/77
#94804d
kh-Feuerrot
Pantone ?
0/80/85/0
235/84/45
#eb542d
kh-Ozeanblau
Pantone ?
80/15/40/0
2/155/162
#029ba2
Flächen- und Textfarben
kh-Warmweiß
Metapaper ww
0/0/5/5
246/245/238
#f6f5ee
kh-Dunkelgrau
Pantone ?
0/0/30/95
44/43/31
#2c2b1f
kh-Mittelgrau
Pantone ?
0/0/25/80
87/85/71
#575547
Typografie
Schriftart: Router [Adobe Font]
abcdefghijklmnopqrstuvwxyzäöü
ABCDEFGHIJKLMNOPQRSTUVWXYZÄÖÜ
1234567890ß!“§$%&/()=?,;.:-_+*#‘
abcdefghijklmnopqrstuvwxyzäöü
ABCDEFGHIJKLMNOPQRSTUVWXYZÄÖÜ
1234567890ß!“§$%&/()=?,;.:-_+*#‘
abcdefghijklmnopqrstuvwxyzäöü
ABCDEFGHIJKLMNOPQRSTUVWXYZÄÖÜ
1234567890ß!“§$%&/()=?,;.:-_+*#‘
abcdefghijklmnopqrstuvwxyzäöü
ABCDEFGHIJKLMNOPQRSTUVWXYZÄÖÜ
1234567890ß!“§$%&/()=?,;.:-_+*#‘
abcdefghijklmnopqrstuvwxyzäöü
ABCDEFGHIJKLMNOPQRSTUVWXYZÄÖÜ
1234567890ß!“§$%&/()=?,;.:-_+*#‘
abcdefghijklmnopqrstuvwxyzäöü
ABCDEFGHIJKLMNOPQRSTUVWXYZÄÖÜ
1234567890ß!“§$%&/()=?,;.:-_+*#‘
H1
Hier steht die exemplarische Headline H1,
mehrzeilig zur Darstellung des Zeilenabstands.
H2
Hier steht die exemplarische Headline H2,
mehrzeilig zur Darstellung des Zeilenabstands.
H3
Hier steht die exemplarische Headline H3,
mehrzeilig zur Darstellung des Zeilenabstands.
H4
Hier steht die exemplarische Headline H4,
mehrzeilig zur Darstellung des Zeilenabstands.
H5
Hier steht die exemplarische Headline H5,
mehrzeilig zur Darstellung des Zeilenabstands.
H6
Hier steht die exemplarische Headline H6,
mehrzeilig zur Darstellung des Zeilenabstands.
Die Headline H1
in Kombination mit Fließtext [p]. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Die Headline H2
in Kombination mit Fließtext [p]. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Die Headline H1
in Kombination mit Fließtext [p]. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Und einer Subline H2.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Die Headline H2
in Kombination mit Fließtext [p]. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Und einer Subline H6.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Eine mehrzeilige Headline H1, welche nach links flattert.
in Kombination mit linksbündigem Fließtext [p]. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Und einem kurzen, in etwa zweizeiligen Abschnitt mit Fettung. Sieht dann so aus wie hier.
Ein linksbündiger Fließtext [p]. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Mit einem kurzen, in etwa zweizeiligen Abschnitt mit Fettung. Sieht dann so aus wie hier.
Eine mehrzeilige Headline H2, welche nach rechts flattert.
Sieht cool aus.
Eine mehrzeilige Headline H1, welche nach rechts flattert.
in Kombination mit einem Bild und linksbündigem Fließtext [p]. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text-Bild-Text-Kombination, mit linksbündigem Fließtext [p]. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Und einer Subline H2 dazwischen.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Logo
positiv
negativ
Favicon
Kapiteltrenner