Styleguide

Mit diesem Styleguide kann man sich eine Übersicht der verschiedenen Farbpaletten und Typoeinstellungen machen.

Farbpalette

Brand Farben

Mit diesen Farben wird die Marke oder der Brand dargestellt.

Primary

Secondary

Tertiary

Accent

Neutrale Farben

Farben die auf der Website verwendet werden. Wie z. B. Hintergründe oder Schriften.

Base

Neutral

Semantische Farben

Diese Farbpalette zeigt verschiedene informative Stadien (wie Gut, Schlecht, Warnung, Info).

Success

Danger

Warning

Info

Typographie

Mit diesen Guidelines kann man siehen wie die Schriften angewendet sind.

Schrift Familie

Die Schriften die für Titel und Body verwendet werden.

Karl

Karl

Headings

Alle grössen der Headings.

Heading 1 (H1)

Heading 2 (H2)

Heading 3 (H3)

Heading 4 (H4)

Heading 5 (H5)
Heading 6 (H6)

Body Text

Hierbei handelt es sich um die verschiedenen Darstellungen der Textstile auf der Seite.

This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.

Sometimes it’s nice to put in text just to get an idea of how text will fill in a space on your website.

Traditionally our industry has used Lorem Ipsum, which is placeholder text written in Latin. Unfortunately, not everyone is familiar with Lorem Ipsum and that can lead to confusion. I can’t tell you how many times clients have asked me why their website is in another language!

There are other placeholder text alternatives like Hipster Ipsum, Zombie Ipsum, Bacon Ipsum, and many more. While often hilarious, these placeholder passages can also lead to much of the same confusion.

If you’re curious, this is Website Ipsum. It was specifically developed for the use on development websites. Other than being less confusing than other Ipsum’s, Website Ipsum is also formatted in patterns more similar to how real copy is formatted on the web today.

Schnitt

Verschiedene Schriftschnitte

Aa

Light 300

Aa

Regular 400

Aa

Bold 700

Buttons

Guideline für die verschieden angwendeten Buttons.

Brand Farben

Die Farbpalette wie sie bei den Buttons angewendet aussieht.

Neutrale Farben

Eine Palette mit den neutralen Farben die als Hintergrund verwendet werden.

Semantische Farben

A palette of semantic colors used for button states (such as success, danger, warning, and info).

Grössen

Die verschieden verfügbaren grössen der Buttons.

Primary

(XS)

Primary

(XL)

Primary

(XXL)

Spacing

Es gibt sechs Ebenen von reaktivem Abstand, die aus einer Basisgröße und einer mathematischen Skala berechnet werden. Dies stellt sicher, dass Ränder, Polsterungen und Abstände perfekt übereinstimmen.
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl