Flow Gurus

Control panel

Back to dashboard

Style guide

Logos

Upload horizontal and vertical logos in both dark and light .png images. (If svg watch this video)

Colours

Brand colours

Upload horizontal and vertical logos in both dark and light .png images. (Roughly 200x600 pixels and 256x256 pixels)
Transparent
Colour 1
Colour 2
Colour 3
Colour 4
Colour 5
Colour 6
Colour 7
BLACK
WHITE
Neutral 1
Neutral 2
Neutral 3
Colour 1 xlight
Colour 2 xlight
Colour 3 xlight
Colour 4 xlight
Colour 5 xlight
Colour 6 xlight
Colour 7 xlight
Colour 1 light
Colour 2 light
Colour 3 light
Colour 4 light
Colour 5 light
Colour 6 light
Colour 7 light
Colour 1 dark
Colour 2 dark
Colour 3 dark
Colour 4 dark
Colour 5 dark
Colour 6 dark
Colour 7 dark
Colour 1 xdark
Colour 2 xdark
Colour 3 xdark
Colour 4 xdark
Colour 5 xdark
Colour 6 xdark
Colour 7 xdark
Colour 1 muted
Colour 2 muted
Colour 3 muted
Colour 4 muted
Colour 5 muted
Colour 6 muted
Colour 7 muted

UTILITY colours

For marking actions as complete, notifying or warning users.
Success
Success light
Highlight
Highlight light
Notice
Notice light
Warning
Warning light

CTA colours

For marking actions as complete, notifying or warning users.
CTA
CTA light

Typography

Global html tags

Warning: Do not edit these without watching this video first

H1

H2

H3

H4

H5
H6
Body text

Paragraph text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.text-italic (click inside Text block to edit HTML tag)
Block Quote

HEADING & TEXT STYLES

These can be edited directly in the style panel

.heading-xlarge

.heading-large

.heading-medium

.pre-heading

.text-large
.text-regular
.text-small
.text-tiny

TEXT ADD-ON CLASSES

For marking actions as complete, notifying or warning users.
.text-strikethrough
.text-white
.text-black
.TEXT-CAPS
.text-highlighted
.text-underline-highlighted
.text-xbold
.text-bold
.text-semibold
.text-normal
.text-light

Buttons

These can be edited directly in the style panel