9d5cbc02ef96dd8bea21e7296ee16589

Design Overview

Colors

Weiß #FFFFFF

Default Farbe Hintergründe

Schwarz #000000

Schriftfarbe Header

Grau 80% #575757

Outline Check- und Radiobox

Grau 60% #878787

Bisher nicht verwendet

Grau 40% #B2B2B2

Disabled-State

Grau 20% #DADADA

Hintergrundfarbe input-Felder u. Footer

Rot 01 #E40028

Haupt-Auszeichnungsfarbe

Rot 02 #EE3B4A

Buttons: Hovered-state

Rot 03 #C40034

Buttons: clicked-statem, Error-State (z.B. input)

Grau #777777

Default Schriftfarbe

Typographie

H1

Source Sans Pro Regular: Das ist die Titelheadline

 Schriftgröße: 26
Zeilenabstand: 120%
Laufweite: 5%
Farbe: Rot1

H2

Source Sans Pro Semibold: So sieht eine Auszeichnung, sie wird im Schriftschnitt “Bold” hervorgehoben

 Schriftgröße: 26
Zeilenabstand: 120%
Laufweite: 5%
Farbe: Rot1

H3

Source Sans Pro Semibold: Das ist die Subline

Source Sans Pro Semibold: Das ist die Subline

 Schriftgröße: 20
Zeilenabstand: 150%
Laufweite: 0%
Farbe: Rot1, #777

H4

Source Sans Pro Regular: Introtext

Source Sans Pro Regular: Introtext

 Schriftgröße: 18
Zeilenabstand: 150%
Laufweite: 0%
Farbe: Rot1, #777

H5
Source Sans Pro Bold: Diese Auszeichnung ist für Headlines über Text-Abschnitte
 Schriftgröße: 18
Zeilenabstand: 160%
Laufweite: 0%
Farbe: #777

Copy

Source Sans Pro Regular: Das ist der Fließtext

 Schriftgröße: 18
Zeilenabstand: 140%
Laufweite: 0%
Farbe: #777

Link

Source Sans Pro Regular: Link

Schriftgröße: 18
Zeilenabstand: 140%
Laufweite: 0%
Farbe: Rot1

Buttons

 Source Sans Pro Semibold: Buttons Schriftgröße: 18
Zeilenabstand: 140%
Laufweite: 0%
Farbe: Rot1, Weiß

Unsortierte Liste
  • Stichpunkt Nummer 1
  • Stichpunkt Nummer 2 geht etwas länger
  • Stichpunkt Nummer 3 läuft so lange, bis es in die nächste Zeile umbricht
 Schriftgröße: 18
Zeilenabstand: 190%
Laufweite: 0%
Farbe: #777

Sortierte Liste
  1. Stichpunkt Nummer 1
  2. Stichpunkt Nummer 2 geht etwas länger
  3. Stichpunkt Nummer 3 läuft so lange, bis es in die nächste Zeile umbricht
 Schriftgröße: 18
Zeilenabstand: 190%
Laufweite: 0%
Farbe: #777

Divider(s)

Badge (aka Textlabel)

1 100 Abgeschlossen

Cards

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Accordion

  • Item 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Item 2

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.

  • Item 3

    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.

Corporate Design

  • Item 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Item 2

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.

  • Item 3

    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.

Buttons

Primary Button Red
Primary Button White
Secondary Button
Text Button
Text Button with Icon

Example Icons

Small Default Large
Solid Outline