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.

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 #FFEFEA
Red 100 #FFD9CE
Red 200 #FFC5B3
Red 300 #FFB29A
Red 400 #FA9170
Red 500 #EB6D46
Red 600 #DA3D0B
Red 700 #B33109
Red 800 #8D2606
Red 900 #671D06
Indigo 50 #EEF2FF
Indigo 100 #E0E7FF
Indigo 200 #C7D2FE
Indigo 300 #A5B4FC
Indigo 400 #818CF8
Indigo 500 #6366F1
Indigo 600 #4F46E5
Indigo 700 #4338CA
Indigo 800 #3730A3
Indigo 900 #312E81
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.