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

Not sure on something? [email protected]

Primary Palette

BRAND COLOURS
Brand Blue
PRIMARY
Pink
tint
Blue
tint
Magenta
tint
Purple
DARK
Cerulean
DARK
Green
PRIMARY
Orange
tint
Red
tint

Secondary Palette

GRADIENT
Pink - soft
Tint
Blue - soft
tint
Magenta - soft
tint
Purple - soft
tint
Cerulean - soft
tint
Green - soft
tint
Orange - soft
Tint
Red - soft
tint
Pink - light
tint
Blue - light
tint
Magenta - light
tint
Purple - light
tint
Cerulean - light
tint
Green - light
tint
Orange - light
tint
Red - light
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

Not sure on something? [email protected]

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

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 Small
14px

Quotes & Lists

Not sure on something? [email protected]

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

Not sure on something? [email protected]

Button Primary

Submit
Button Primary
Submit
Button Hover
Submit
Button White
Submit
Button Outline

Button Secondary