Styleguide

Logo variations

Color palette

#78909C

Main color

#0073AA

Secondary color

#E0E0E0

Medium gray

#00000000

Transparent
Black 100% transparency

#607D8B

Main color Hover

#005177

Secondary color – Hover

#F5F5F5

Light gray

#ffffff

White

#424242

Dark gray

#757575

Gray

#212121

Black
Text color

Accessibility Check – Contrast Grid

Background Text	#78909C	#607D8B	#0073AA	#005177	#212121	#424242	#757575	#E0E0E0	#F5F5F5	#FFFFFF
Main color #78909C		Text DNP 1.3	Text DNP 1.5	Text DNP 2.5	Text AA 4.8	Text AA18 3	Text DNP 1.3	Text DNP 2.5	Text AA18 3	Text AA18 3.3
Main color – Hover #607D8B	Text DNP 1.3		Text DNP 1.1	Text DNP 1.9	Text AA18 3.6	Text DNP 2.3	Text DNP 1	Text AA18 3.3	Text AA18 4	Text AA18 4.3
Secondary color #0073AA	Text DNP 1.5	Text DNP 1.1		Text DNP 1.6	Text AA18 3	Text DNP 1.9	Text DNP 1.1	Text AA18 3.9	Text AA 4.7	Text AA 5.2
Secondary color – Hover #005177	Text DNP 2.5	Text DNP 1.9	Text DNP 1.6		Text DNP 1.8	Text DNP 1.1	Text DNP 1.8	Text AA 6.5	Text AAA 7.8	Text AAA 8.5
Black #212121	Text AA 4.8	Text AA18 3.6	Text AA18 3	Text DNP 1.8		Text DNP 1.6	Text AA18 3.4	Text AAA 12.2	Text AAA 14.7	Text AAA 16.1
Dark gray #424242	Text AA18 3	Text DNP 2.3	Text DNP 1.9	Text DNP 1.1	Text DNP 1.6		Text DNP 2.1	Text AAA 7.6	Text AAA 9.2	Text AAA 10
Gray #757575	Text DNP 1.3	Text DNP 1	Text DNP 1.1	Text DNP 1.8	Text AA18 3.4	Text DNP 2.1		Text AA18 3.4	Text AA18 4.2	Text AA 4.6
Medium gray #E0E0E0	Text DNP 2.5	Text AA18 3.3	Text AA18 3.9	Text AA 6.5	Text AAA 12.2	Text AAA 7.6	Text AA18 3.4		Text DNP 1.2	Text DNP 1.3
Light gray #F5F5F5	Text AA18 3	Text AA18 4	Text AA 4.7	Text AAA 7.8	Text AAA 14.7	Text AAA 9.2	Text AA18 4.2	Text DNP 1.2		Text DNP 1
White #FFFFFF	Text AA18 3.3	Text AA18 4.3	Text AA 5.2	Text AAA 8.5	Text AAA 16.1	Text AAA 10	Text AA 4.6	Text DNP 1.3	Text DNP 1
AAA Pass, AAA (7+) AA Pass, AA (4.5+) AA18 Pass, Large Text Only (3+) DNP Does Not Pass About WCAG 2.0 contrast

Typography

Soleil

Headings – 700 (Bold)

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Ä Ö Ü ẞ
a b c d e f g h i j k l m n o p q r s t u v w x y z ä ö ü ß
0 1 2 3 4 5 6 7 8 9 | @ & % § ! ? € / # + – =

Soleil

Text – 500 (Medium), 700 (Bold)

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Ä Ö Ü ẞ
a b c d e f g h i j k l m n o p q r s t u v w x y z ä ö ü ß
0 1 2 3 4 5 6 7 8 9 | @ & % § ! ? € / # + – =

Continuous text with paragraph and enumeration

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

At vero eos et accusam et justo duo dolores et ea rebum.

Scaling

Desktop

1,250 – Major Third (adjusted)

H1 – 3.5em

H2 – 2.25em

H3 – 1.5em

H4-H6 – 1.25em

Basic text size – 18px

Small information texts & Co. – 16px

Smallest font size – 14px

Buttons & Actions- 18px

Decorative headings – 16px

Tablet

1,250 – Major Third (adjusted)

H1 – 3.5em

H2 – 2.25em

H3 – 1.5em

H4-H6 – 1.25em

Normal text size – 18px

Small information texts & Co. – 16px

Smallest font size – 14px

Buttons & Actions- 18px

Decorative headings – 16px

Mobile

1.125 – Major Second

H1 – 2em

H2 – 1.75em

H3 – 1.4em

H4-H6 – 1.2em

Normal text size – 18px

Small information texts & Co. – 16px

Smallest font size – 14px

Buttons & Actions- 18px

Decorative headings – 16px

Icons & Illustrations

Buttons & Links

This is a hyperlink

Forms

CTAs & surfaces

20px Border Radius

for CTA blocks, employee cards, etc.

Layout system

Website settings

1280px content width

Boxed layout for outer containers

0px Padding all around

For all containers

20px Gap between elements

CSS in the child theme

80px padding top and bottom

40px Mobile – overwritable

40px padding right and left

20px Mobile – NOT overwritable

Design rules

Inner container to “full width”

Boxed layout for outer containers

Spacing: multiple of 20px

20px | 40px | 80px | 160px

Options

80px Gap between columns

20px Gap between elements

e.g. for enumerations with icon boxes

Sty­le­gui­de

Logo varia­ti­ons

Color palet­te

#78909C

#0073AA

#E0E0E0

#00000000

#607D8B

#005177

#F5F5F5

#ffffff

#424242

#757575

#212121

Acces­si­bi­li­ty Check – Con­trast Grid

Typo­gra­phy

Soleil

Soleil

Con­ti­nuous text with para­graph and enumeration

Sca­ling

Desktop

H1 – 3.5em

H2 – 2.25em

H3 – 1.5em

H4-H6 – 1.25em

Tablet

H1 – 3.5em

H2 – 2.25em

H3 – 1.5em

H4-H6 – 1.25em

Mobile

H1 – 2em

H2 – 1.75em

H3 – 1.4em

H4-H6 – 1.2em

Icons & Illustrations

But­tons & Links

Forms

CTAs & surfaces

20px Bor­der Radius

Lay­out system

Web­site settings

1280px con­tent width

0px Pad­ding all around

20px Gap bet­ween elements

CSS in the child theme

80px pad­ding top and bottom

40px pad­ding right and left

Design rules

Inner con­tai­ner to “full width”

Spa­cing: mul­ti­ple of 20px

Opti­ons

80px Gap bet­ween columns

20px Gap bet­ween elements

Styleguide

Logo variations

Color palette

Accessibility Check – Contrast Grid

Typography

Continuous text with paragraph and enumeration

Scaling

Buttons & Links

20px Border Radius

Layout system

Website settings

1280px content width

0px Padding all around

20px Gap between elements

80px padding top and bottom

40px padding right and left

Inner container to “full width”

Spacing: multiple of 20px

Options

80px Gap between columns

20px Gap between elements