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: 351, 99.06%, 41.57%
rgb: 211, 1, 32
hex: #d30120

hsl: 351, 99.06%, 96.57%
rgb: 255, 238, 240
hex: #ffeef0

hsl: 351, 99.06%, 91.57%
rgb: 255, 212, 219
hex: #ffd4db

hsl: 351, 99.06%, 86.57%
rgb: 255, 187, 197
hex: #ffbbc5

hsl: 351, 99.06%, 81.57%
rgb: 255, 161, 175
hex: #ffa1af

hsl: 351, 99.06%, 76.57%
rgb: 254, 136, 154
hex: #fe889a

hsl: 351, 99.06%, 71.57%
rgb: 254, 111, 132
hex: #fe6f84

hsl: 351, 99.06%, 66.57%
rgb: 254, 85, 111
hex: #fe556f

hsl: 351, 99.06%, 61.57%
rgb: 254, 60, 89
hex: #fe3c59

hsl: 351, 99.06%, 56.57%
rgb: 254, 35, 67
hex: #fe2343

hsl: 351, 99.06%, 51.57%
rgb: 254, 9, 46
hex: #fe092e

hsl: 351, 99.06%, 46.57%
rgb: 236, 1, 36
hex: #ec0124

hsl: 351, 99.06%, 41.57%
rgb: 211, 1, 32
hex: #d30120

hsl: 351, 99.06%, 36.57%
rgb: 186, 1, 29
hex: #ba011d

hsl: 351, 99.06%, 31.57%
rgb: 160, 1, 25
hex: #a00119

hsl: 351, 99.06%, 26.57%
rgb: 135, 1, 21
hex: #870115

hsl: 351, 99.06%, 21.57%
rgb: 109, 1, 17
hex: #6d0111

hsl: 351, 99.06%, 16.57%
rgb: 84, 0, 13
hex: #54000d

hsl: 351, 99.06%, 11.57%
rgb: 59, 0, 9
hex: #3b0009

hsl: 351, 99.06%, 6.57%
rgb: 33, 0, 5
hex: #210005

hsl: 351, 99.06%, 1.57%
rgb: 8, 0, 1
hex: #080001

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