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.
Dunkler Modus
Heller Modus

Action

Diese Farbe wird für alle Elemente verwendet, die zu einer gewünschten Interaktion führen. Dies umfasst Call-To-Action Buttons, interne Links und mehr.

Accent

Die Farbe für Akzente. Hiermit werden bestimmte Überschriften hervorgehoben und wichtige Passagen im Fließtext akzentuiert.

Base

Die Basisfarbe der Webseite, die in verschiedenen Helligkeiten und Transparenzen verwendet wird. Sie macht den farblichen Hauptanteil der Webseite aus.

Neutral

Eine neutrale Graupalette, die vor allem für transparente Overlays benutzt wird, um Elemente zu erhellen und abzudunkeln.

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

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.

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

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
WordPress Cookie Plugin von Real Cookie Banner