Styleguide der Webseite
Auf dieset Seite finden Sie die Gestaltung-Richtlinien unserer Webseite. Viele Elemente und Regeln enstpringen unserem Corporate Design. Einige Elemente finden sich speziell auf der Webseite wieder.
Farbwelt
Action
Accent
Base
Neutral
Abstufungen der Action-Color
Action
Ultra Light
Light
Medium
Dark
Ultra Dark
Abstufungen der Accent-Color
Accent
Ultra Light
Light
Medium
Dark
Ultra Dark
Abstufungen der Base-Color
Base
Ultra Light
Light
Medium
Dark
Ultra Dark
Neutrale Graupalette
Shade
Ultra Light
Light
Medium
Dark
Ultra Dark
Action
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Accent
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Base
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Shade
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Buttons
BaseBase Link
Typografie
Überschriften: Barlow Semi Condensed
Dies ist die Semi Condensed-Familie, die zusammen mit Condensed und Normal mit jeweils 9 Strichstärken in Roman und Italic Teil der Superfamilie ist.
Heading 1 Regular
Heading 1 Medium
Heading 1 Bold
Heading 2 Regular
Heading 2 Medium
Heading 2 Bold
Heading 3 Regular
Heading 3 Medium
Heading 3 Bold
Heading 4 Regular
Heading 4 Medium
Heading 4 Bold
Heading 5 Regular
Heading 5 Medium
Heading 5 Bold
Heading 6 Regular
Heading 6 Medium
Heading 6 Bold
Heading 6 Regular
Heading 6 Medium
Heading 6 Bold
Fließtext: Lexend
Der erste Satz Lexend-Schriftarten von Thomas Jockin (Deca, Exa, Giga, Mega, Peta, Tera, Zetta) wird breiter und offener angeordnet (auch als „Tracked Out“ bekannt). Diese neue Version von Lexend ist eine variable Schriftart mit einer Gewichtsachse.
Bitte beachten Sie, dass die Erstveröffentlichung dieser Schriftart eine geringere normale Schriftstärke hatte. Für das Update im Juli 2021 wurde beschlossen, die normale Strichstärke an die etwas kräftigere Schriftstärke von Lexend Deca anzugleichen. Lexend und Lexend Deca sind daher (vorerst…) gleich. Letztendlich wird diese Version eine HyperExpansion-Achse bieten, die eine Variation des Innen- und Außenraums von Buchstabenformen ermöglicht.
Beispiele aus Überschrift und Fließtext
Heading 1 (H1)
Heading 2 (H2)
Heading 3 (H3)
Heading 4 (H4)
Heading 5 (H5)
Heading 6 (H6)
Breiten
Section Padding
Spacing
Element Padding
Card
Card
Card
Card
Card
Card
Content Width & Spacing
Die Webseite verfügt über ein global gesteuertes und skalierbares Abstands-System (gap-property). Damit stellen wir eine homogene Darstellung der Seiteninhalte sicher. Die generelle Breite des Contents beträgt 1440px.
Alle Abstände werden über clamp-Funktionen flüssig über alle Bildschirmgrößen hinweg skaliert. Es gibt keine "Sprünge" zwischen einzelnen Viewport-Dimensionen. Somit ergibt sich eine optimale und passende Darstellung unabhängig vom Endgerät.
Content Width 1440px
Grid Gap
Card Gap
Content Gap
Container Gap