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? support@flowbase.co

Primary Palette

BRAND COLOURS
#E75300
Dark
#EB702A
Dark
#EF8C55
PRIMARY
#F3A980
tint
#F7C6AA
tint
#FBE2D5
tint
#4CCFA3
DARK
#6AD7B2
DARK
#88DFC2
PRIMARY
#A6E7D1
tint
#C3EFE0
tint
#E1F7F0
tint
#0d1858
DARK
#353E74
DARK
#5E6590
PRIMARY
#868CAC
tint
#AEB2C7
tint
#D7D9E3
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

Not sure on something? support@flowbase.co

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? support@flowbase.co

Quotes

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 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? support@flowbase.co

Button Primary

Submit
Button Primary
Submit
Button Outline
Submit
Button Outline
Submit
Button Outline
Submit

Button Secondary