Skip to main content
Flowra
PricingCommunityFAQ
JoinStart with Flowra
  • PricingPlans, seats and payment
  • Frequently asked questionsEverything you have asked, in one place
  • Contact usWrite to the right team
  • CommunityKaro Studio, who make Flowra

For your team

  • Marketing teamsCampaigns from brief to launch
  • Product and dev teamsFeatures and bugs with full context
  • Design and content teamsBrief, files and delivery side by side
  • Operations teamsWork, documents and costs you can track
  • Sales and services teamsFrom meeting to contract and payment
  • Remote teamsOnline meeting to delivery, on your time

For your role

  • Project managersAction stories instead of chasing the team
  • Freelancers and consultantsFrom brief to contract and settlement

For your workflow

  • Meeting to actionMeeting decisions as trackable work
  • Actions with financial contextCosts next to the work that caused them
  • Actions with contract contextEvery commitment as trackable work
  • Brief to project deliveryEvery project step, one complete action
See all solutionsStart with FlowraJoin
++
Flowra design system

Fundamentals

PrinciplesVoice and writingCopy rules for each surfaceGlossaryRTL and languagesNumbers and datesAccessibility

Foundations

ColorDark modePrintingTypographySpacing and layoutRadius and shadowLayersMotionNotification soundKeyboard shortcutsIconsService logos

Components

ButtonsText fieldPickerDate and timeCheckboxRadioKeySegmented controlSliderMenu and sheetDialogCard and listTables and data listsBadge, pill, and switchTabs and filtersAvatarEmpty and loading statesProgress and stepsToastFloating helpNavigationPage headerAssistants

Patterns

Connector pageList, filter, and searchForm layoutCreation flowUpgrade promptConfirmation and irreversible actionsPhone layoutFixed bars and scrolling

Brand

Flowra brandMark and logoBrand colorBrand typographyMisuse

Design system/Brand

Mark and logo

The mark is one continuous line on a charcoal tile, and the logo is that same mark to the left of the Flowra wordmark. Seven files for light and dark backgrounds, and two rules that keep the logo legible: clear space and minimum size.

In codepublic/brand-kit/components/icons.tsx (FLOW_D, FlowraLogo)

On this page

  1. Files
  2. Which one when
  3. Clear space
  4. Minimum size
  5. The mark in the app
  6. Rules

Files

All SVG and PNG. The wordmark is shaped from Estedad Bold with HarfBuzz and converted to outlines, so it looks the same even on a device that has never seen the font. The files are generated, not hand-drawn; to change them, regenerate them and don't hand-edit the SVG, or the ZIP and the individual files will drift apart.

Live example
Logo

Logo

Mark to the left of the name.

SVGPNG
Logo, dark background

Logo, dark background

For dark backgrounds.

SVGPNG
Mark

Mark

When the name isn't needed beside it.

SVGPNG
Mark, dark background

Mark, dark background

The same mark as in the app's dark mode.

SVGPNG
Monochrome symbol

Monochrome symbol

The line alone, for very small sizes.

SVGPNG
White monochrome symbol

White monochrome symbol

The line alone, on dark.

SVGPNG
App icon

App icon

For app stores and shortcuts.

SVGPNG
Download brand kit

Which one when

When to use it

  • Logo (mark and wordmark): anywhere Flowra is introduced and there's room.
  • Mark: when the name is already said next to it or isn't needed; social media avatars.
  • Monochrome symbol: just the line, for very small sizes or single-color printing.
  • App icon: app stores and shortcuts.

When not to

  • The light version on a dark background; use the "dark background" version.

Clear space

Keep clear space around the logo of at least a quarter of the mark's side. Text, images, and the edge of the page stay out of this space.

Live example
xxxx

x = a quarter of the mark's side

Minimum size

These sizes are for screens. Any smaller and the mark can no longer be read.

Live example

96px

Logo with name width

20px

Mark side

16px

Monochrome symbol width

Logo with name96pxwidth
Mark20pxside
Monochrome symbol16pxwidth

The mark in the app

Inside the app, the mark is drawn with FlowraLogo: a charcoal tile with a corner radius of 29 percent of its size and a line in the on-charcoal color, so it inverts in dark mode. It ripples when the pointer moves over it, and stays still with reduced motion.

Rules

Do

The “dark background” version on a dark background.

Don't

The light version on a photo or a dark background.

Do

Clear space of a quarter of the mark's side, all the way around.

Don't

A logo pressed against the edge of a slide or right next to text.

Do

The single-color symbol below 20px.

Don't

The full logo with wordmark below 96px wide.

Related pages

MisuseNine things not to do with the logo.Flowra brandWhat the mark says.Brand colorCharcoal is the mark's background.IconsThe mark's path, FLOW_D, lives alongside the icons.Service logosOther companies' logos get the same respect.Brand typographyThe wordmark is Estedad Bold.
PreviousFlowra brandNextBrand color

Related pages

  • PageBrand kitThe Flowra mark and logo, colors, typography, clear space and minimum size, and the brand kit files to download.
  • PageDocumentationThe complete Flowra guide: actions, calendar, meetings, knowledge, files, Folio, chat, network, finance, connectors, settings and AI, each with its connections.
  • PageChangelogWhat each release added to Flowra, what got better, and what’s coming next.
  • PageContact usReach the right team: support, sales and plans, partnerships, careers, or security and privacy.
Flowra

Flowra is an all-in-one workspace for managing tasks, projects, finances, meetings, and teamwork, powered by AI to keep everything organized in one place.

Solutions for teams

  • Marketing teams
  • Product and dev teams
  • Design and content teams
  • Operations teams
  • Sales and services teams
  • Remote teams

Roles and flows

  • Project managers
  • Freelancers and consultants
  • Meeting to action
  • Actions with financial context
  • Actions with contract context
  • Brief to project delivery

With Flowra

  • All solutions
  • Pricing
  • Frequently asked questions
  • Documentation
  • Contact us
  • Brand kit
  • Design system
Crafted by Karo Studio
SecurityPrivacyTermsCookies
Version 0.16.0