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%, 100%
rgb: 255, 255, 255
hex: #ffffff

hsl: 0, 0%, 95%
rgb: 242, 242, 242
hex: #f2f2f2

hsl: 0, 0%, 90%
rgb: 230, 230, 230
hex: #e6e6e6

hsl: 0, 0%, 85%
rgb: 217, 217, 217
hex: #d9d9d9

hsl: 0, 0%, 80%
rgb: 204, 204, 204
hex: #cccccc

hsl: 0, 0%, 75%
rgb: 191, 191, 191
hex: #bfbfbf

hsl: 0, 0%, 70%
rgb: 179, 179, 179
hex: #b3b3b3

hsl: 0, 0%, 65%
rgb: 166, 166, 166
hex: #a6a6a6

hsl: 0, 0%, 60%
rgb: 153, 153, 153
hex: #999999

hsl: 0, 0%, 55%
rgb: 140, 140, 140
hex: #8c8c8c

hsl: 0, 0%, 50%
rgb: 128, 128, 128
hex: #808080

hsl: 0, 0%, 45%
rgb: 115, 115, 115
hex: #737373

hsl: 0, 0%, 40%
rgb: 102, 102, 102
hex: #666666

hsl: 0, 0%, 35%
rgb: 89, 89, 89
hex: #595959

hsl: 0, 0%, 30%
rgb: 77, 77, 77
hex: #4d4d4d

hsl: 0, 0%, 25%
rgb: 64, 64, 64
hex: #404040

hsl: 0, 0%, 20%
rgb: 51, 51, 51
hex: #333333

hsl: 0, 0%, 15%
rgb: 38, 38, 38
hex: #262626

hsl: 0, 0%, 10%
rgb: 26, 26, 26
hex: #1a1a1a

hsl: 0, 0%, 5%
rgb: 13, 13, 13
hex: #0d0d0d

hsl: 0, 0%, 0%
rgb: 0, 0, 0
hex: #000000

Primary

hsl: 202, 100%, 32.94%
rgb: 0, 106, 168
hex: #006aa8

hsl: 202, 100%, 97.94%
rgb: 244, 251, 255
hex: #f4fbff

hsl: 202, 100%, 92.94%
rgb: 219, 242, 255
hex: #dbf2ff

hsl: 202, 100%, 87.94%
rgb: 193, 232, 255
hex: #c1e8ff

hsl: 202, 100%, 82.94%
rgb: 168, 223, 255
hex: #a8dfff

hsl: 202, 100%, 77.94%
rgb: 142, 214, 255
hex: #8ed6ff

hsl: 202, 100%, 72.94%
rgb: 117, 204, 255
hex: #75ccff

hsl: 202, 100%, 67.94%
rgb: 91, 195, 255
hex: #5bc3ff

hsl: 202, 100%, 62.94%
rgb: 66, 186, 255
hex: #42baff

hsl: 202, 100%, 57.94%
rgb: 40, 176, 255
hex: #28b0ff

hsl: 202, 100%, 52.94%
rgb: 15, 167, 255
hex: #0fa7ff

hsl: 202, 100%, 47.94%
rgb: 0, 155, 244
hex: #009bf4

hsl: 202, 100%, 42.94%
rgb: 0, 139, 219
hex: #008bdb

hsl: 202, 100%, 37.94%
rgb: 0, 123, 193
hex: #007bc1

hsl: 202, 100%, 32.94%
rgb: 0, 106, 168
hex: #006aa8

hsl: 202, 100%, 27.94%
rgb: 0, 90, 142
hex: #005a8e

hsl: 202, 100%, 22.94%
rgb: 0, 74, 117
hex: #004a75

hsl: 202, 100%, 17.94%
rgb: 0, 58, 91
hex: #003a5b

hsl: 202, 100%, 12.94%
rgb: 0, 42, 66
hex: #002a42

hsl: 202, 100%, 7.94%
rgb: 0, 26, 40
hex: #001a28

hsl: 202, 100%, 2.94%
rgb: 0, 9, 15
hex: #00090f

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

Button

.button-filled .button-black

Button

.button-outline .button-black

Button

.button-filled .button-white

Button

.button-outline .button-white

Icons

.svg-icon-primary

.svg-icon-primary-hover

.svg-icon-primary-disabled

.svg-icon-primary-contrast

.svg-icon-white

.svg-icon-black

.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

.list-style-3

.list-style-4

Lorem ipsum dolor sit amet 9.00 €
Dolor sit amet consetetur sadipscing 7.50 €
At accusam aliquyam diam diam dolore dolores duo eirmod eos erat 21.00 €
Et nonumy sed tempor et kasd magna no vero voluptua 23.50 €
Duis autem vel eum iriure dolor in hendrerit +2 €

.list-style-5

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.

Styleguide

Typografie

h1 Headline

h2 Headline

h3 Headline

h4 Headline

h5 Headline

h6 Headline

h1 Headline

h2 Headline

h3 Headline

h4 Headline

h5 Headline

h6 Headline

Farben

Background

Primary

Buttons

Icons

Schatten

Abstände

Listen

.list-style-1

.list-style-2

.list-style-3

.list-style-4

.list-style-5

.list-tags-1

.list-tags-2

.list-tags-3

.list-tags-4

.list-tags-5

.list-tags-6

Lorem ipsum

dolor sit amet consetetur sadipscing elitr sed diam nonumy eirmod

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Sed diam nonummy nibh

Ut wisi enim ad minim veniam