Flow Brand Identity

A complete profile of Flow's visual system — colors, typography, components, and personality — extracted from https://enterflow.app. Built for designers, agents, and AI tools.

• Page: https://characterquilt.com/branding/flow
• Machine-readable JSON: https://characterquilt.com/branding/flow.json
• Per-page llms.txt: https://characterquilt.com/branding/flow/llms.txt

Quick Facts

Color Palette

• primary: #3898EC
• secondary: #4D8AF8
• accent: #3898EC
• background: #FFFFFF
• textPrimary: #00096A
• link: #00096A

Typography

• primary: DM Sans — https://fonts.google.com/specimen/DM+Sans
• heading: Varela Round — https://fonts.google.com/specimen/Varela+Round

Visual Assets

• Logo: https://cdn.prod.website-files.com/5f0f4be6e2475b738a09fec6/602eedc1aaaec85623155330_flow%20logo%20white.png
• Favicon: https://cdn.prod.website-files.com/5f0f4be6e2475b738a09fec6/603846702754eb896997ef51_flow-orb-logo-small.png
• Social card (og:image): https://cdn.prod.website-files.com/5f0f4be6e2475b738a09fec6/60550c9096329b79ed70a2d6_enterflow%20social.png

UI Components

• buttonPrimary: background=#3898EC, textColor=#FFFFFF, borderRadius=20px, shadow=none

Brand Personality

Tone: modern · Energy: medium · Audience: tech-savvy users looking for productivity tools

Flow Brand in the Wild

Real-world brand assets — ads, campaigns, marketing materials.

• 5 types of music to help you focus
  • Image: https://cdn.prod.website-files.com/5f0f4be613f8bbc5bb027062/605313021d766d31ca27b721_dan-farrell-FnR2U1lXsBQ-unsplash.jpg
  • Source: https://www.enterflow.app/post/best-music-to-help-you-focus
• 4 browser extensions to help you focus
  • Image: https://cdn.prod.website-files.com/5f0f4be613f8bbc5bb027062/6042a7ced6e0d40eb32e2652_avel-chuklanov-DUmFLtMeAbQ-unsplash.jpg
  • Source: https://www.enterflow.app/post/browser-extensions-to-help-you-focus
• Flow Tab Manager: Focus on your tabs that matter.
  • Image: https://cdn.prod.website-files.com/5f0f4be6e2475b738a09fec6/603abc70cdeb023349d62c12_flow-new-tab.png
  • Source: https://www.enterflow.app/
• 4 browser extensions to help you focus
  • Image: https://cdn.prod.website-files.com/5f0f4be613f8bbc5bb027062/6042a6aebfa49d7ad1094ae7_flow-new-tab-dark.png
  • Source: https://www.enterflow.app/post/browser-extensions-to-help-you-focus
• 5 types of music to help you focus
  • Image: https://i.ytimg.com/vi/D8gHFd1Slfo/maxresdefault.jpg
  • Source: https://www.enterflow.app/post/best-music-to-help-you-focus
• 5 types of music to help you focus
  • Image: https://i.ytimg.com/vi/fWRISvgAygU/maxresdefault.jpg
  • Source: https://www.enterflow.app/post/best-music-to-help-you-focus

Working with these fonts

Not found on Google Fonts?

CharacterQuilt.com suggests this flow that can help:

1. Open the company's homepage in a browser with DevTools open.
2. In the Network tab, filter by "Font" (or by extension: woff2, woff, ttf, otf).
3. Hard-reload the page and click around (pricing, blog, careers) — some weights only load on specific routes.
4. For each captured font URL: right-click → Save As to download the file locally.
5. View the page's CSS (DevTools → Sources, or curl the stylesheet URLs) and copy out the matching @font-face declarations. Rewrite each src: url(...) to point to your local file path.

Programmatic alternative: load the URL with Playwright or Puppeteer, listen for response events whose Content-Type starts with font/, and write the body to disk. The CSS extraction step is the same.

Only do this if you have permission to use the brand assets — most proprietary fonts are licensed and may not be redistributable.