Style Guide

Design-Richtlinien der Website-Entwicklung

Colors

Theme Colors

Primary 1
#e95410
Grays
Gray 900
#101828
Gray 800
#1d2939
Gray 700
#344054
Gray 600
#475467
Gray 500
#667085
Gray 400
#98a2b3
Gray 300
#d0d5dd
Gray 200
#eaecf0
Gray 100
#f2f4f7
Gray 50
#f9fafb
Gray 25
#F8F6F4
Feedback
Success
#57A773
Warning
#F19953
Error
#ED6A5E

Buttons

Button Sizes
Button Small
Button Standard
Button Large
Theme Colors
Primary 1
Theme Colors
Button Primary 2
Button Outline Primary 1
Text Link
Feedback Colors
Erfolgreich
Warnung
Fehler
Circle Buttons

Headings

Class
Size
Line height
Sample
.heading-display
54px
120%
Lorem Ipsum
.heading- xlarge
48px
120%
Lorem Ipsum
.heading-large
40px
120%
Lorem Ipsum
.heading-medium
32px
130%
Lorem Ipsum
.heading-small
24px
130%
Lorem Ipsum
.heading-xs
18px
130%
Lorem Ipsum

Body Text

Class
Size
Line height
Sample
.text-xlarge
20px
160%
Lorem Ipsum
.text-large
18px
160%
Lorem Ipsum
.text-regular
16px
160%
Lorem Ipsum
.text-small
14px
160%
Lorem Ipsum
.text-tiny
12px
140%
Lorem Ipsum

Typography helper classes

Class
What it does
.text-italic
Makes the text italic
.text-semibold
Makes the text bold
.text-semibold
Makes the text semi bold
.text-normal
Makes the text normal
.text-light
Makes the text normal
.text-underlined
Makes the text underlined
.text-cut-2lines
Cuts the text off after two lines and ads three stops at the end
.text-cut-3lines
Cuts the text off after two lines and ads three stops at the end
.text-allcaps
Capitalizes all letters
.text-align-left
Aligns the text to the left
.text-align-center
Aligns the text to the right
.text-align-right
Makes the text bold

Another helper classes

Class
.text-italic
.text-semibold
.text-semibold
.text-normal
.text-light
.text-underlined
.text-cut-2lines
.text-cut-3lines
.text-allcaps
.text-align-left
.text-align-center
.text-align-right

Lists

Unstyled <ul>
  • Dope
  • Sick
  • Amazing
Colored Bullets
  • Dope
  • Sick
  • Amazing
Checklist
  • Dope
  • Sick
  • Amazing

Icons - Interface

Icons - Social

Badges

Default
Badge Text Small
Badge Text
Theme Colors
Primary 1
Primary Gray 400
Feedback Colors
Success
Warning
Error

Cards

Default Styles
Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
With Foot
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Text Link
With Head

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
With Image

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link

Form Inputs

Input Sizes
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Labelled Input
* Sternchen Text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input with Icon
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Radio & Checkbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form Feedback

Shadows

Shadow Small
Shadow
Shadow Large

Tooltips

Hover on this icon
?
Here is a message to help explain the content.

Avatars

Avatar Sizes
Avatar Group
Avatar with Status
Avatar with name
Max Mustermann
Position

FAQ Schema Markup

With a FAQ schema markup you can display a FAQ box directly in Google search results (rich snippet).

FAQ Frage

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.

FAQ Frage

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.

FAQ Frage

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.