Styleguide

Typografie
Farben
Buttons
Icons
Schatten
Abstände
Listen

Typografie

h1 Headline

h2 Headline

h3 Headline

h4 Headline

h5 Headline

h6 Headline

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Basisschrift 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.

h1 Headline

h2 Headline

h3 Headline

h4 Headline

h5 Headline

h6 Headline

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Basisschrift 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.

Farben

Background

hsl: 0, 0%, 97.25%
rgb: 248, 248, 248
hex: #f8f8f8

hsl: 0, 0%, 92.25%
rgb: 235, 235, 235
hex: #ebebeb

hsl: 0, 0%, 87.25%
rgb: 222, 222, 222
hex: #dedede

hsl: 0, 0%, 82.25%
rgb: 210, 210, 210
hex: #d2d2d2

hsl: 0, 0%, 77.25%
rgb: 197, 197, 197
hex: #c5c5c5

hsl: 0, 0%, 72.25%
rgb: 184, 184, 184
hex: #b8b8b8

hsl: 0, 0%, 67.25%
rgb: 171, 171, 171
hex: #ababab

hsl: 0, 0%, 62.25%
rgb: 159, 159, 159
hex: #9f9f9f

hsl: 0, 0%, 57.25%
rgb: 146, 146, 146
hex: #929292

hsl: 0, 0%, 52.25%
rgb: 133, 133, 133
hex: #858585

hsl: 0, 0%, 47.25%
rgb: 120, 120, 120
hex: #787878

hsl: 0, 0%, 42.25%
rgb: 108, 108, 108
hex: #6c6c6c

hsl: 0, 0%, 37.25%
rgb: 95, 95, 95
hex: #5f5f5f

hsl: 0, 0%, 32.25%
rgb: 82, 82, 82
hex: #525252

hsl: 0, 0%, 27.25%
rgb: 69, 69, 69
hex: #454545

hsl: 0, 0%, 22.25%
rgb: 57, 57, 57
hex: #393939

hsl: 0, 0%, 17.25%
rgb: 44, 44, 44
hex: #2c2c2c

hsl: 0, 0%, 12.25%
rgb: 31, 31, 31
hex: #1f1f1f

hsl: 0, 0%, 7.25%
rgb: 18, 18, 18
hex: #121212

hsl: 0, 0%, 2.25%
rgb: 6, 6, 6
hex: #060606

Primary

hsl: 193, 82.53%, 44.9%
rgb: 20, 168, 209
hex: #14a8d1

hsl: 193, 82.53%, 99.9%
rgb: 255, 255, 255
hex: #ffffff

hsl: 193, 82.53%, 94.9%
rgb: 231, 248, 253
hex: #e7f8fd

hsl: 193, 82.53%, 89.9%
rgb: 208, 241, 251
hex: #d0f1fb

hsl: 193, 82.53%, 84.9%
rgb: 185, 235, 248
hex: #b9ebf8

hsl: 193, 82.53%, 79.9%
rgb: 161, 228, 246
hex: #a1e4f6

hsl: 193, 82.53%, 74.9%
rgb: 138, 221, 244
hex: #8addf4

hsl: 193, 82.53%, 69.9%
rgb: 115, 214, 242
hex: #73d6f2

hsl: 193, 82.53%, 64.9%
rgb: 92, 207, 239
hex: #5ccfef

hsl: 193, 82.53%, 59.9%
rgb: 68, 201, 237
hex: #44c9ed

hsl: 193, 82.53%, 54.9%
rgb: 45, 194, 235
hex: #2dc2eb

hsl: 193, 82.53%, 49.9%
rgb: 22, 187, 232
hex: #16bbe8

hsl: 193, 82.53%, 44.9%
rgb: 20, 168, 209
hex: #14a8d1

hsl: 193, 82.53%, 39.9%
rgb: 18, 149, 186
hex: #1295ba

hsl: 193, 82.53%, 34.9%
rgb: 16, 131, 162
hex: #1083a2

hsl: 193, 82.53%, 29.9%
rgb: 13, 112, 139
hex: #0d708b

hsl: 193, 82.53%, 24.9%
rgb: 11, 93, 116
hex: #0b5d74

hsl: 193, 82.53%, 19.9%
rgb: 9, 74, 93
hex: #094a5d

hsl: 193, 82.53%, 14.9%
rgb: 7, 56, 69
hex: #073845

hsl: 193, 82.53%, 9.9%
rgb: 4, 37, 46
hex: #04252e

hsl: 193, 82.53%, 4.9%
rgb: 2, 18, 23
hex: #021217

Buttons

.button-filled

.button-sm

.button-lg

.button-outline

.button-sm

.button-lg

.button-blank

.button-filled .button-primary

Button

.button-outline .button-primary

Button

.button-filled .button-primary .button-invert

Button

.button-outline .button-primary .button-invert

Icons

.svg-icon-xs

.svg-icon-sm

.svg-icon-md

.svg-icon-lg

.svg-icon-xl

Schatten

Schatten (small)
.shadow_sm

Schatten (normal)
.shadow_md

Schatten (large)
.shadow_lg

Abstände

–base_clearance_xs

–base_clearance_sm

–base_clearance_md

–base_clearance_lg

–base_clearance_xl

–base_clearance_xxl

Listen

.list-style-1

Lorem ipsum dolor sit amet
Dolor sit amet consetetur sadipscing
At accusam aliquyam diam diam dolore dolores duo eirmod eos erat
Et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum sanctus sea sed takimata ut vero voluptua
Duis autem vel eum iriure dolor in hendrerit

.list-style-2

Lorem ipsum dolor sit amet
Dolor sit amet consetetur sadipscing
At accusam aliquyam diam diam dolore dolores duo eirmod eos erat
Et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum sanctus sea sed takimata ut vero voluptua
Duis autem vel eum iriure dolor in hendrerit

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

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.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Sed diam nonummy nibh

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Ut wisi enim ad minim veniam

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur

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. 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
Dolor sit amet consetetur sadipscing
At accusam aliquyam diam diam dolore dolores duo eirmod eos erat
Et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum sanctus sea sed takimata ut vero voluptua
Duis autem vel eum iriure dolor in hendrerit

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.