# Meet Otto  Client Style Kit

Use this style guide template to quickly align your websites brand and visual direction. Take control of global styles to edit typography, colours & elements across the whole site.

### Product Overview

Meet Otto - the perfect template for your next SaaS, Dashboard, App or Software website. Otto provides the ultimate base for Webflow designers and developers to truely craft something special for themselves or their clients. Built and supported by the leading Webflow team, Otto is built for production and your success.

Ultra clean class-naming and construction, variety of core pages, beautiful forms, sections, layouts and everything you need to get started. Otto also contains a comprehensive design system that can help you make the most out of altering colours and typography.

## Colour Palette

### Primary Palette

BRAND COLOURS

Purple 900

- Dark

Purple 700

- Dark

Purple 600

- PRIMARY

Purple 500

- tint

Purple 300

- tint

Purple 100

- tint

Teal 900

- DARK

Teal 700

- DARK

Teal 600

- PRIMARY

Teal 500

- tint

Teal 300

- tint

Teal 100

- tint

Pink 900

- DARK

Pink 700

- DARK

Pink 600

- PRIMARY

Pink 500

- tint

Pink 300

- tint

Pink 100

- tint

### Secondary Palette

GRADIENT

Purple

- Dark

Purple

- Dark

Purple

- PRIMARY

Purple

- tint

Purple

- tint

Purple

- tint

Teal

- DARK

Teal

- DARK

Teal

- PRIMARY

Teal

- tint

Teal

- tint

Teal

- tint

Pink 900

- DARK

Pink 700

- DARK

Pink 600

- PRIMARY

Pink 500

- tint

Pink 300

- tint

Pink 100

- tint

### Typography Palette

HEADING & PARAGRAPH

Grey 900

#2d3958

Grey 700

#546285

Grey 600

#7b88a8

Grey 500

#bcc4da

Grey 300

#e6eaf5

Grey 100

#f8faff

## Typography Styles

### Headings

# Aa Bb Cc Dd Ee

Display 64px

# Aa Bb Cc Dd Ee

Heading 1 48px

## Aa Bb Cc Dd Ee

Heading 2 40px

### Aa Bb Cc Dd Ee

Heading 3 34px

#### Aa Bb Cc Dd Ee

Heading 4 20px

##### Aa Bb Cc Dd Ee

Heading 5 18px

###### Aa Bb Cc Dd Ee

Heading 6 12px

### Paragraph

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Paragraph Large 22px

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Paragraph Normal 16px

Paragraph Small 14px

## Quotes & Lists

### Quotes

> Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Quote 1 Default

> Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Quote 2 Coloured

### Lists

- Example Item 1

- Example Item 2

- Example Item 3

List Dots

- Example Item 1

- Example Item 2

- Example Item 3

List Numbers

- Example Item 1

- Example Item 2

- Example Item 3

List Letters

## Buttons

### Button Primary

[Submit](/content/template/style-guide#/index.html)

Button Primary

[Submit](/content/template/style-guide#/index.html)

Button Outline

[Submit](/content/template/style-guide#/index.html)

Button Outline

[Submit](/content/template/style-guide#/index.html)

Button Outline

### Button Secondary

[Submit](/content/template/style-guide#/index.html)

[Submit](/content/template/style-guide#/index.html)

[Submit](/content/template/style-guide#/index.html)

[Submit](/content/template/style-guide#/index.html)