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: 41, 100%, 41.37%
rgb: 211, 144, 0
hex: #d39000

hsl: 41, 100%, 96.37%
rgb: 255, 249, 236
hex: #fff9ec

hsl: 41, 100%, 91.37%
rgb: 255, 241, 211
hex: #fff1d3

hsl: 41, 100%, 86.37%
rgb: 255, 233, 185
hex: #ffe9b9

hsl: 41, 100%, 81.37%
rgb: 255, 225, 160
hex: #ffe1a0

hsl: 41, 100%, 76.37%
rgb: 255, 217, 134
hex: #ffd986

hsl: 41, 100%, 71.37%
rgb: 255, 209, 109
hex: #ffd16d

hsl: 41, 100%, 66.37%
rgb: 255, 201, 83
hex: #ffc953

hsl: 41, 100%, 61.37%
rgb: 255, 193, 58
hex: #ffc13a

hsl: 41, 100%, 56.37%
rgb: 255, 185, 32
hex: #ffb920

hsl: 41, 100%, 51.37%
rgb: 255, 176, 7
hex: #ffb007

hsl: 41, 100%, 46.37%
rgb: 236, 162, 0
hex: #eca200

hsl: 41, 100%, 41.37%
rgb: 211, 144, 0
hex: #d39000

hsl: 41, 100%, 36.37%
rgb: 185, 127, 0
hex: #b97f00

hsl: 41, 100%, 31.37%
rgb: 160, 109, 0
hex: #a06d00

hsl: 41, 100%, 26.37%
rgb: 134, 92, 0
hex: #865c00

hsl: 41, 100%, 21.37%
rgb: 109, 74, 0
hex: #6d4a00

hsl: 41, 100%, 16.37%
rgb: 83, 57, 0
hex: #533900

hsl: 41, 100%, 11.37%
rgb: 58, 40, 0
hex: #3a2800

hsl: 41, 100%, 6.37%
rgb: 32, 22, 0
hex: #201600

hsl: 41, 100%, 1.37%
rgb: 7, 5, 0
hex: #070500

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

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-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 €

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.