Design-System

Farben

Primärfarben
kh-Froschgrün
 
Pantone ?
38/0/100/0
180/204/0
#B4CC00
kh-Himmelblau
Pantone ?
42/0/5/0
145/231/255
#91e7ff
kh-Strohgelb
Pantone ?
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

kathrin-haibel-soulconnection-energetic-leadership-coaching-soul-messages-avatar-guest-v1

Favicon

Kapiteltrenner