Otto - Webflow HTML Website Template
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
Button Primary
Button Outline
Button Outline
Button Outline