FlowFuse Branding Guidelines

For FlowFuse Assets (e.g. logos, pictograms, and raw design files), please look in the /design/Media folder on Google Drive.

Composition

Our logo is a combination mark, featuring an abstract symbol that represents the flows connecting the nodes, along with a wordmark displaying our name.

Versions

The horizontal version is the preferred choice. When space and layout constraints make this option an awkward fit, forcing the logo to be too small, the vertical version can be used.

Horizontal Version


Image of the horizontal version of FlowFuse logo

Vertical Version


Image of the vertical version of FlowFuse logo

Minimum Sizes

Only when the size becomes too small for the combination mark to render the wordmark legibly, the symbol can be used independently without the wordmark.

Symbol


Image of the FlowFuse symbol

Construction and correct usage

The order, distance, and proportion of the elements composing the combination mark must not be altered in any way.

A safety area of 2X is defined to ensure proper image usage and readability.

Construction of Horizontal Version


Image depicting the construction process of the logo's horizontal version.

Construction of Vertical Version


Image depicting the construction process of the logo's vertical version.

Chromatic Versions

Depending on the background against which the logo is presented, there are corresponding versions to be used.

Dark Backgrounds


Search for the file name ending with "dark", such as: ff-logo--wordmark--dark.png

Image of the horizontal version of FlowFuse logo for dark backgrounds
Image of the vertical version of FlowFuse logo for dark backgrounds

Light Backgrounds


Search for the file name ending with "light", like: ff-logo--wordmark--light.png

Image of the horizontal version of FlowFuse logo for light backgrounds
Image of the horizontal version of FlowFuse logo for light backgrounds

Please note that the dark background version consists of two colors, while the remaining versions consist of a single color. Additionally, the shade of red varies according to the background.

Monochromatic


When only black or white are allowed, search for the file name ending with "black" or "white". For instance: ff-logo--wordmark--white.png

Image of the monochromatic version of FlowFuse logo
Image of the monochromatic version of FlowFuse logo
Image of the monochromatic version of FlowFuse logo
Image of the monochromatic version of FlowFuse logo

Fonts

In both the FlowFuse application and on our website, we use Tailwind CSS. With Tailwind, comes the font-sans class, which we use across FlowFuse.

For branded materials such as videos and images we have two stylized fonts in-use:

Colour Palette

Black #000000
White #FFFFFF
Grey 50 #F9FAFB
Grey 100 #F3F4F6
Grey 200 #E5E7EB
Grey 300 #D1D5DB
Grey 400 #9CA3AF
Grey 500 #6B7280
Grey 600 #4B5563
Grey 700 #374151
Grey 800 #1F2937
Grey 900 #111827
Red 50 #FFEBEB
Red 100 #FFC6C6
Red 200 #FF8D8D
Red 300 #F16F6F
Red 400 #ED4E4E
Red 500 #D82525
Red 600 #BC3838
Red 700 #AB1818
Red 800 #8F0001
Red 900 #760000
Teal 50 #E4FBFC
Teal 100 #C4F3F5
Teal 200 #B2EBEE
Teal 300 #8CE2E7
Teal 400 #74D4D9
Teal 500 #50C3C9
Teal 600 #35AAB0
Teal 700 #31959A
Teal 800 #397B7E
Teal 900 #406466
Blue 50 #EFF6FF
Blue 100 #DBEAFE
Blue 200 #BFDBFE
Blue 300 #93C5FD
Blue 400 #60A5FA
Blue 500 #3B82F6
Blue 600 #2563EB
Blue 700 #1D4ED8
Blue 800 #1E40AF
Blue 900 #1E3A8A

Iconography

All app and site iconography uses Heroicons, by the makers of Tailwind CSS. Within our flowforge app, we have two icon sizes available which can be assigned with ff-icon and ff-icon-sm.

Pictograms

These larger images are used for stylistic purposes. We use pictograms to communicate in a glance, offer interactivity, or simplify complex ideas.

If you wish to create your own Pictograms, you can use this Adobe Illustrator file as a template: pictogram.ai

An example showing how Pictograms are used in the 'Company Values' section of the FlowFuse website

Sizings:

  • 128 x 128px: Used when showing multiple pictograms in the same section of the website or application.
  • 250 x 250 px: Used as part of page headers, inline with the page title and page description.

Presentations

There's a branded theme for Google Slides presentations available in the FlowFuse template gallery. To access it, you need to be logged in to your FlowFuse account. Look for a theme called "FlowFuse Template".

When you click on it, two things will happen:

  1. A new Google Slides file will be created in your Drive with the theme applied.
  2. The copy of the file will open for editing.

You'll find a fully designed presentation as an example of how to use different layouts. To explore all the predefined options available, check the Layout menu.

Feel free to edit the content, delete or add slides as needed. Any changes you make will only affect your copy in your Drive.

Please note that the theme has predefined typography, margins, and colors. We kindly request that any changes made maintain these design elements as part of the overall composition and design of your presentation.