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.

Brand Identity

Farbwelt

Eine Übersicht über die im Corporate Design definierten Farben. Die Webseite verfügt über einen Standard-Farbmodus (dunkel) und einen alternativen Farbmodus (hell). Die Farben werden über CSS Variablen gesteuert, deshalb bleiben die Bezeichnungen der Farben beim Moduswechsel erhalten, die Farbwerte ändern sich jedoch.

Action - Die Farbe für Call to Action Elemente und Handlungsaufforderungen

Action

Ultra Light

Light

Medium

Dark

Ultra Dark

Accent - Akzentfarbe für Text und Icons

Accent

Ultra Light

Light

Medium

Dark

Ultra Dark

Base - Die am meisten verwendete Farbe

Base

Ultra Light

Light

Medium

Dark

Ultra Dark

Neutral - Eine 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

Buttons sind mit die wichtigsten Elemente einer Webseite.
ActionAction LinkAccentAccent Link
BaseBase Link
Button Skalierung
Button XS
btn--primary / btn--xs
Button S
btn--primary / btn--s
Button M
btn--primary / btn--m
Button L
btn--primary / btn--l
Button XL
btn--primary / btn--xl
Button XXL
btn--primary / btn--xxl

Typografie

Neben Bildern und anderen Elementen sind Überschriften und Fließtexte der Hauptbestandteil der Webseite. Größen und Schriftschnitte werden im Folgenden definiert.

Überschriften: Barlow Semi Condensed

Barlow ist eine leicht abgerundete, kontrastarme Grotesk-Typenfamilie. In Anlehnung an den visuellen Stil der kalifornischen Öffentlichkeit hat Barlow dieselben Eigenschaften wie die Autoschilder, Autobahnschilder, Busse und Züge des Staates.

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.
H1 (--xxl)

Heading 1 Regular

Heading 1 Medium

Heading 1 Bold

H2 (--xl)

Heading 2 Regular

Heading 2 Medium

Heading 2 Bold

H3 (--l)

Heading 3 Regular

Heading 3 Medium

Heading 3 Bold

H4 (--m)

Heading 4 Regular

Heading 4 Medium

Heading 4 Bold

H5 (--s)
Heading 5 Regular
Heading 5 Medium
Heading 5 Bold
H6 (--xs)
Heading 6 Regular
Heading 6 Medium
Heading 6 Bold
Heading 6 Regular
Heading 6 Medium
Heading 6 Bold

Fließtext: Lexend

Lexend-Schriftarten sollen die visuelle Belastung reduzieren und so die Leseleistung verbessern. Ursprünglich wurden sie speziell für Legasthenie und Leseschwierigkeiten entwickelt, doch Bonnie Shaver-Troup, Gründerin des Lexend-Projekts, fand bald heraus, dass diese Schriftarten auch für alle anderen großartig sind.

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.
BODY TEXT (--m)
Text m Regular
Text m Medium
Text m Bold
SMALL TEXT (--s)
Text s Regular
Text s Medium
Text s Bold
XTRA SMALL TEXT (--xs)
Text xs Regular
Text xs Medium
Text xs Bold

Beispiele aus Überschrift und Fließtext

Erst die Kombination aus einer plakativen und auffälligen Schriftart der Überschriften und einem auf allen Endgeräten gut lesbaren Fließtext macht eine gute Typografie aus. Im Folgenden finden Sie Kombinationen aus passenden Schriftschnitten.

Heading 1 (H1)

This is large text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 2 (H2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 3 (H3)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 4 (H4)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 5 (H5)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 6 (H6)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Breiten

Es gibt festgelegte Breiten, die für Elemente auf der Webseite verwendet werden können. Alle sind so programmiert, dass sie automatisch responsiv sind.
--width-xs
--width-s
--width-m
--width-l
--width-xl
--width-xxl
--content-width (max. 1440px)

Section Padding

Die Innenabstände der Section HTML Elemente sind definiert. Auch diese passen sich automatisch auf die Bildschirmgröße an. Die Standardgröße für alle Sections ist M.
None
XS
S
M
L
XL
XXL

Spacing

There are six levels of responsive spacing calculated from a base size and a mathematical scale. This ensures margin, padding, and gaps all match perfectly.
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl

Element Padding

Mehrere Innenabstände sind festgelegt. Diese werden in Anbetracht des Elements, in dem sie verwendet werden, ausgesucht.

Card

This is a card with XS padding. Its content is pretty close to the edges.

Card

This is a card with S padding. It has a little bit tighter padding.

Card

This is a card with M padding. It has standard breathing room.

Card

This is a card with L padding. It has extra breathing room.

Card

This is a card with XL padding. It has significant breathing room.

Card

This is a card with XXL padding. Avoid using this in a confined space.

Border radius

Es sind sechs verschieden Radien definiert. Diese Webseite nutzt hauptsächlich den Radius XS.
Rounded XS
Rounded S
Rounded M
Rounded L
Rounded XL
Rounded XXL