Design System
UI-Design Assets & Information
Alle wichtigen Informationen und Assets für die Gestaltung der Website.
Typografie
Verwendung von Schriften
Schriftart, Schriftschnitte und -größen von Headlines und Fließtext.
Schriftschnitte
Genius Light
abcdefghijklmnopqrstuvwxyzäöüß
abcdefghijklmnopqrstuvwxyzäöüß
1234567890!Ҥ$%&/()=?,.-;:_+
Genius Regular
abcdefghijklmnopqrstuvwxyzäöüß
abcdefghijklmnopqrstuvwxyzäöüß
1234567890!Ҥ$%&/()=?,.-;:_+
Genius Semibold
abcdefghijklmnopqrstuvwxyzäöüß
abcdefghijklmnopqrstuvwxyzäöüß
1234567890!Ҥ$%&/()=?,.-;:_+
Genius Bold
abcdefghijklmnopqrstuvwxyzäöüß
abcdefghijklmnopqrstuvwxyzäöüß
1234567890!Ҥ$%&/()=?,.-;:_+
Headlines
Eine exemplarische Accent Headline.
Hier steht die exemplarische Headline H1 in maximal zwei Zeilen
Hier steht die exemplarische Headline H2 in maximal zwei Zeilen
Hier steht die exemplarische Headline H3 in maximal zwei Zeilen
Hier steht die exemplarische Headline H4 in maximal zwei Zeilen
Hier steht die exemplarische Headline H5 in maximal zwei Zeilen
Hier steht die exemplarische Headline H6 in maximal zwei Zeilen
Copytext
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,
Textkombinationen
Eine exemplarische Accent Headline.
Hier steht die exemplarische Headline H1 in maximal zwei Zeilen
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,
Farbklima
Verwendung von Farben
Farbharmonien und ihre Gewichtung im User Interface Design
Primary
CMYK: 55/20/8/0
RGB: 123/175/212
HEX: #7bafd4
HSL: 205/51/66
Base
CMYK: 55/20/8/0
RGB: 123/175/212
HEX: #7bafd4
HSL: 205/51/66
Action
CMYK: 55/20/8/0
RGB: 123/175/212
HEX: #7bafd4
HSL: 205/51/66
Neutral
CMYK: 55/20/8/0
RGB: 123/175/212
HEX: #7bafd4
HSL: 205/51/66
Primary Hover
Primary Ultra-Light
Primary Light
Primary Medium
Primary Dark
Primary Ultra-Dark
Base Hover
Base Ultra-Light
Base Light
Base Medium
Base Dark
Base Ultra-Dark
Action Hover
Action Ultra-Light
Action Light
Action Medium
Action Dark
Action Ultra-Dark
Success
Danger
Warning
Info
Logos
Verwendung des Logos
Maximale und minimale Größen, positive und negative Varianten. Anpassung der Schriftschnitte bei Verkleinerung für die optimierte Darstellung.
Positiv | Negativ
Logo Size l
Logo Size m
Logo Size s
Logo Size l
Logo Size m
Logo Size s
Fotografie
Bildstil der Fotos
Klares Bildkonzept und dessen Umsetzung. Fotografische Inszenierung des Unternehmens.
Portraits
Moods
