# Styleguide

## The Open Sans Typeface

We have decided to use the Open sans typeface in its various font weights, which allows for more sophisticated typesetting.

# Main Heading (H1) (42px #262626) (32px #262626)

## Secondary Heading (H2) (32px #262626) (23px #262626)

### Tertiary Heading (H3) (26px #262626) (20px #262626)

#### Subheading (H4) (21px #262626) (18px #262626)

##### Subheading (H5) (18px #262626) (14px #262626)

###### Subheading (H6) (18px #262626) (14px #262626)

##### Running Text

Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent id tempor ipsum. Fusce at massa ac nunc porta fringilla sed eget neque. (14px #343434) (14px #343434)

##### An Individual Link

Sed a lorem quis neque interdum et (14px #2a7cca) (14px #2a7cca)

## Colors

The existing colors have been mainly left unchanged, save for some minor adjustments. The link blue, for instance, has been slightly modified to yield better contrast and feel fresher.

At the color palette you can check all colors which the framework supports.

## Buttons

Primary
Secondary
Default

## Spacings

All spacings – be they horizontal or vertical, between two elements or within an element – can have one of six sizes. These sizes are designated as XS, S, M, L, XL, XXL. (See the visualization below for actual values.)

XS (4px) (2px)
S (8px) (4px)
M (16px) (8px)
L (24px) (16px)
XL (32px) (24px)
XXL (42px) (32px)

## Forms

### Demo Form

Label 1
Label 2
Label 3

- Label 4
- Label 5

Lbl 6 / Lbl 7
Lbl 8 / Lbl 9
Zurück

### A Form

Title
Additional Title
First name
Last name
E-Mail
Phone
Website
Street
No.
ZIP
City
Your message
Please accept this. Or not. Your choice. (But we'd appreciate it.)

* Notice about all the hidden subscriptions you are buying along with what you really came here for.

Check this if you've read our Terms and Conditions. Or even clicked and scrolled through them. Actually, why don't you just go ahead and check this, anyway?

## Boxes & Borders

#### Headline

Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus

#### Box with Shadow

Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus

#### Headline

- Duis quis tempor nunc
- Interdum et malesuada fames
- Sed a lorem quis neque interdum

#### Box with default background

Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus

Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus

## Tooltips & Popovers

Name:

## Status Messages

#### Success

Congratulations! Your request has been successfully processed.

#### Heads up

This will interest you. No, really, it will.

#### Look out

If you keep going you may fall to your doom.

#### Broken

You have destroyed everything. Well done.

#### Success

Congratulations! Your request has been successfully processed.

#### Heads up

This will interest you. No, really, it will.

#### Look out

If you keep going you may fall to your doom.

#### Broken

You have destroyed everything. Well done.

## Examples

# Main Heading H1

Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent id tempor ipsum. Fusce at massa ac nunc porta fringilla sed eget neque.

## Secondary Heading H2

Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent id tempor ipsum. Fusce at massa ac nunc porta fringilla sed eget neque. Quisque quis pretium nulla. Fusce eget bibendum neque, vel volutpat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent id tempor ipsum. Fusce at massa ac nunc porta fringilla sed eget neque. Quisque quis pretium nulla. Fusce eget bibendum neque, vel volutpat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent id tempor ipsum. Fusce at massa ac nunc porta fringilla sed eget neque. Quisque quis pretium nulla. Fusce eget bibendum neque, vel volutpat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus.

### Tertiary Heading H3

Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent id tempor ipsum. Fusce at massa ac nunc porta fringilla sed eget neque. Quisque quis pretium nulla. Fusce eget bibendum neque, vel volutpat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Praesent id tempor ipsum. Fusce at massa ac nunc porta fringilla sed eget neque. Quisque quis pretium nulla. Fusce eget bibendum neque, vel volutpat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus.

#### Subheading H4

Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent id tempor ipsum. Fusce at massa ac nunc porta fringilla sed eget neque.

Fusce at massa ac nunc porta fringilla sed eget neque. Quisque quis pretium nulla. Fusce eget bibendum neque, vel volutpat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. ed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent id tempor ipsum. Fusce at massa ac nunc porta fringilla sed eget neque. Quisque quis pretium nulla. Fusce eget bibendum neque, vel volutpat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus.

##### Subheading H5

Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent id tempor ipsum. Fusce at massa ac nunc porta fringilla sed eget neque. Quisque quis pretium nulla. Fusce eget bibendum neque, vel volutpat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent id tempor ipsum. Fusce at massa ac nunc porta fringilla sed eget neque. Quisque quis pretium nulla. Fusce eget bibendum neque, vel volutpat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus.

###### Subheading H6

Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent id tempor ipsum. Fusce at massa ac nunc porta fringilla sed eget neque. Quisque quis pretium nulla. Fusce eget bibendum neque, vel volutpat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent id tempor ipsum. Fusce at massa ac nunc porta fringilla sed eget neque. Quisque quis pretium nulla. Fusce eget bibendum neque, vel volutpat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus.

###### A Link Collection

- Sed a lorem quis neque interdum et
- Sed a lorem quis neque interdum
- Sed a lorem quis neque interdum et
- Sed a lorem quis neque interdum

###### Additional Links

- Sed a lorem quis neque interdum
- Sed a lorem quis neque interdum et malesuada
- Sed a lorem quis neque interdum
- Sed a lorem quis neque interdum et malesuada