GET STARTED
Home
Overview
ELEMENTS
Colour
Typography
Quotes & Lists
Buttons
Buy Otto Today
Buy Now

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.

Colour Palette

Not sure on something? support@flowbase.co

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

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.
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 Hover
Submit
Button Outline
Submit
Button Disabled

Button Secondary

Submit
Submit
Submit
Submit