# Flowformance brand

The icon, name, colors, type, and words to use when you write about Flowformance or link to it.

## Icon

The icon is a procedure: three steps joined by one line, two done and one to go. It is the thing Flowformance makes — a process written down so the next person can follow it.

- [Icon (SVG)](https://flowformance.com/brand/icon.svg): Vector, any size from 48px up.
- [Icon, 1024px (PNG)](https://flowformance.com/brand/icon-1024.png): Square, full bleed.
- [Icon, 512px (PNG)](https://flowformance.com/brand/icon-512.png): Square, full bleed.
- [Rounded icon, 1024px (PNG)](https://flowformance.com/brand/icon-rounded-1024.png): Corners already rounded, transparent outside.
- [Rounded icon, 512px (PNG)](https://flowformance.com/brand/icon-rounded-512.png): Corners already rounded, transparent outside.
- [Small icon (SVG)](https://flowformance.com/brand/icon-small.svg): Drawn bolder for 16–48px: favicons, tabs, small avatars.

Usage:

- Use the square PNG where the host rounds or masks the corners itself (app stores, directories).
- Below 48px, use the small icon. The full one loses its line and ring at that size.
- Leave clear space around the tile of at least a quarter of its width.
- Don't recolor, rotate, stretch, outline, or add shadows or effects.

## Name

- Write it exactly as shown: Flowformance.
- Don't split it, camel-case it, abbreviate it, or put it in all capitals in running text.

## Tagline

> SOPs for humans and agents. Work that flows, for teams that perform.

## Boilerplate

Short:

> Flowformance turns the way your team works into SOPs that people and AI assistants can follow.

Long:

> Flowformance is where teams keep their standard operating procedures. Record a job once with your screen and voice, and about three minutes later there is a step-by-step SOP to review. Your team follows it in a shared library, customers find it on your public site, and AI assistants such as Claude, ChatGPT, and Perplexity answer from it through a connector, with the sources cited. One source of truth, written in plain markdown, so the work keeps flowing when the person who knew how is out.

## Colors

| Name | Hex | Use |
| --- | --- | --- |
| Deep teal | `#0E3B3A` | The icon tile, primary buttons and links in the app. |
| Night teal | `#0B2A2A` | Dark surfaces: the landing hero, footers. |
| Teal | `#3E9C8F` | Lines and quiet accents. |
| Bright teal | `#57BCA9` | Highlights, completed steps. |
| Mint | `#8FC3B8` | Display emphasis on dark backgrounds. |
| Mist | `#F2F5F3` | Light text on dark surfaces, and the icon's step bars. |
| Sand | `#E8E2D4` | Warm panels, and the main sign-up buttons on dark marketing pages. |
| Paper | `#F8FBF9` | App and page backgrounds. |
| Ink | `#14201E` | Body text. |
| Clay | `#C4553F` | Recording, errors, and destructive actions. Also the default link color on public help pages. |
| Gold | `#C08A2E` | Drafts and items waiting for review. |

## Type

- [IBM Plex Sans](https://fonts.google.com/specimen/IBM+Plex+Sans): The wordmark (Medium, slightly tight tracking), headings, and interface text.
- [Instrument Serif](https://fonts.google.com/specimen/Instrument+Serif): Large marketing headlines only, with italic for the emphasized line.
- [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono): Small labels, code, and URLs.

## Voice

- Marketing copy can lean into the name: work that flows, teams that perform.
- Product copy is plain. Buttons say what they do, and errors say what broke.
- Say what the product does for a real person, with real numbers where we have them.
- Skip hype words like "seamless", "leverage", "unlock", and "supercharge".

## Contact

Press and partnership questions: https://flowformance.com/contact