Sonne Sammeln
Style Guide
This page describes the current styles and standards for the Sonne Sammeln website.
Colours
An overview of the brand colours on this 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
Single-colour and bordered buttons are available in practically all colour sets, including black and white. We show the buttons actually used here.
Typography
Below you will find an overview of the sizes and strengths of responsive typography for this website. These are calculated from a base size and a mathematical scale.
Headings
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
Examples
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.
Widths
There are six values with which you can control the element width. They are defined globally.
Internal spacing of sections
The internal spacing of the sections is responsive and is based on a multiplier of the core spacing system.
Distances
There are six levels of spacing, which are calculated from a base size and a mathematical scale. This ensures that the edge, inner spacing and gaps match perfectly.
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl
Element Internal clearances
The six spacing levels that serve as internal spacing are shown here.
Card
This card has an internal spacing with the defined value of XS.
Card
This card has an internal spacing with the defined value of S.
Card
This card has an internal spacing with the defined value of M.
Card
This card has an internal spacing with the defined value of L.
Card
This card has an internal spacing with the defined value of XL.
Card
This card has an internal spacing with the defined value of XXL.
Shadow
There are three multi-layered "box shadows" to choose from. The "Box-Shadow M" is primarily used
Box shadow M
Box shadow L
Box shadow XL
Frame radius
There are six different radii that can be used. As a rule, however, only the base value is used.
Base
Global
Global
Rounded XS
Rounded S
Rounded M
Rounded L
Rounded XL
Rounded XXL
English (UK) 
Deutsch