Sonne Sammeln

Style Guide

Auf dieser Seite werden die aktuellen Stile und Standards für die Website Sonne Sammeln beschrieben.

Farben

Eine Übersicht über die Markenfarben dieser Website.

Action

Action

Ultra Light

Light

Medium

Dark

Ultra Dark

Primary

Primary

Ultra Light

Light

Medium

Dark

Ultra Dark

Secondary

Secondary

Ultra Light

Light

Medium

Dark

Ultra Dark

Comp

Accent

Accent

Ultra Light

Light

Medium

Dark

Ultra Dark

Comp

Base

Base

Ultra Light

Light

Medium

Dark

Ultra Dark

Neutral

Neutral

Ultra Light

Light

Medium

Dark

Ultra Dark

Action

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Primary

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Secondary

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

Success

Success

Success Light

Success Dark

Success Hover

Danger

Danger

Danger Light

Danger Dark

Danger Hover

Warning

Warning

Warning Light

Warning Dark

Warning Hover

info

Info

Info Light

Info Dark

Info Hover

Buttons

Einfarbige und umrandete Buttons sind praktisch in allen Farbsätzen verfügbar, einschließlich Schwarz und Weiß. Wir zeigen hier die tatsächlich eingesetzten Buttons.

BUTTONS ON LIGHT BACKGROUND

ActionAction OutlinePrimaryPrimary Outline

Buttons auf dunklem Hintergrund

ActionAction OutlinePrimaryPrimary OutlineWhiteWhite Outline
Button scale
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

Nachfolgend finden Sie eine Übersicht über die Größen und Stärken responsiver Typografie für diese Website. Diese werden aus einer Basisgröße und einem mathematischen Maßstab berechnet.
Überschriften
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
Body Text
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

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 sechs Werte, mit denen Sie die Elementbreite steuern können. Sie werden global definiert.
--width-xs
--width-s
--width-m
--width-l
--width-xl
--width-xxl

Innenabstände von Sektionen

Die Innenabstände der Sektionen ist responsive und basiert auf einem Multiplikator des Kernabstandssystems.
None
XS
S
M
L
XL
XXL

Abstände

Es gibt sechs Stufen von Abstände, die aus einer Basisgröße und einer mathematischen Skala berechnet werden. Dadurch wird sichergestellt, dass Rand, Innenabstand und Lücken (gaps) perfekt übereinstimmen.
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl

Element Innenabstände

Hier sind die sechs Abstandsebenen, die als Innenabstand dienen dargestellt.

Card

Diese Karten hat einen Innenabstand mit dem definierten Wert von XS.

Card

Diese Karten hat einen Innenabstand mit dem definierten Wert von S.

Card

Diese Karten hat einen Innenabstand mit dem definierten Wert von M.

Card

Diese Karten hat einen Innenabstand mit dem definierten Wert von L.

Card

Diese Karten hat einen Innenabstand mit dem definierten Wert von XL.

Card

Diese Karten hat einen Innenabstand mit dem definierten Wert von XXL.

Schatten

Es stehen drei mehrschichtige "Box-Shadows" zur Auswahl. Verwendet wird primär der "Box-Shadow M"
Box shadow M
Box shadow L
Box shadow XL

Rahmenradius

Es gibt sechs verschieden Radien die verwendet werden können. In aller Regel wird jedoch lediglich der Basiswert eingesetzt.
Basis
Global
Rounded XS
Rounded S
Rounded M
Rounded L
Rounded XL
Rounded XXL