Flow Brand Manual

Assets + Styles


Flow Mark

The Flow logo should always appear in a single color on a neutral background, or in white on a solid color background. The icon-only version should only be used for small content areas, like social media icons and avatars.

The width of the capital “F” in the logo designates the minimum clearspace—it should never be cropped smaller than or have content within this bounding box.

logo-clearspace Created with Sketch.

Primary Typeface

The Circular font family is Flow’s primary brand typeface. Flow is used in both Book and Bold weights.

Circular Book is the main typeface and is used for larger copy and small body text.

Circular Bold is primarily used for headers and text that highlights key information.


Secondary Typeface

Proxima Nova should be used in Google slides and documents, where Circular Pro cannot be used or uploaded.

Screen Shot 2017-03-15 at 2.52.07 PM.png

Primary Colors

These colors should be used as the primary tones for digital and physical brand assets.

Flow Blue
Pantone ... U
Pantone ... C
C: 100
M: 32
Y: 0
K: 13
#0097DE
R: 0
G: 151
B: 222
 

 
Night
Pantone ... U
Pantone ... C
C: ...
M: ...
Y: ...
K: ...
#052435
R: 5
G: 36
B: 53
 

 
White
Pantone 000 U
Pantone 000 C
C: 0
M: 0
Y: 0
K: 0
#FFFFFF
R: 255
G: 255
B: 255

Secondary Colors

These colors should be used as accents or highlights in text, links, background colors, illustrations, charts, and diagrams. They should complement, not overpower, our primary colors.

The full tonal range for each color can be found in the Material Design Color Palette.
 

Amber
500
#FFC107
50
#FFFDE7
100
#FFECB3
200
#FFE082
300
#FFD54F
400
#FFCA28
500
#FFC107
600
#FFB300
700
#FFA000
800
#FF8F00
900
#FF6F00
Green
500
#4CAF50
50
#E8F5E9
100
#C8E6C9
200
#A5D6A7
300
#81C784
400
#66BB6A
500
#4CAF50
600
#43A047
700
#388E3C
800
#2E7D32
900
#1B5E20
Blue Grey
500
#607D8B
50
#ECEFF1
100
#CFD8DC
200
#B0BEC5
300
#90A4AE
400
#78909C
500
#607D8B
600
#546E7A
700
#455A64
800
#37474f
900
#263238

Illustration Style

Our core illustration style features flat, geometric objects in white on a colored background that draws from our palette. Opacity should be varied to add depth or distinction between parts of the illustration—in the examples to the left, white at 50% opacity is used to create the second tone.

You can also use icons to create illustrations, using the resources linked in the Iconography section.


Iconography

Icons should be visually simple, quickly recognizable, and easy to understand. They are almost always used in context with descriptive text and function to reinforce the message of that text.

In lieu of building our own icon library from scratch, use downloadable assets from the resources linked below.