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/Patterns

Connector page

Every tool that connects to external services has a connector page with a fixed shape: live cards at the top, and a "Soon" shelf below that looks exactly like them but has no Connect button.

In codecomponents/soon-connectors.tsxcomponents/connector-catalog.tsx

On this page

  1. Connector card
  2. The "Soon" shelf
  3. Rules
  4. The card in every state

Connector card

The logo in a 48px tile in the brand's own light color, the name in the form "Connect to <brand>" with the brand name untranslated, one line of description, and one action at the end: "Connect" or the connection status.

Live example

Connect Google Drive

See your Drive files next to the Library and attach them to actions; nothing in Drive gets deleted.

Soon

Connect Notion

Soon

Bring Notion pages into Knowledge.

The "Soon" shelf

A service that isn't built yet gets the same card with a "Soon" badge and no "Connect". The only action it can have is "Notify me": it doesn't connect anything, it just remembers on the account that this person wants to know, and that count is what decides which gets built first.

A system admin can hide any "Soon" card from the admin panel.

Why

A "Connect" button that only says "not yet" is a small lie that walks people to the edge of the task. The "Soon" heading already gives the reason.

Rules

Do

"Soon" in the same shape as a live card, at the end of the page.

Don't

A gray, disabled card with a dead "Connect" button.

Do

State the limits of each connection in its description: what it reads, what it doesn't write.

Don't

"Everything syncs" when it doesn't.

<SoonConnectors
  area="meet"
  items={[{ key: "teams", name: "Microsoft Teams", desc: "…", accent: "#5059C9", Logo: serviceLogo("teams") }]}
/>

The card in every state

  • Live card: one action at the end, “Connect” or the connection status. On phones (below 640px) the .conn-card-actions buttons are 40px each and share the width.
  • “Soon” card: the same card, with a badge-soft “Soon” badge and at most “Notify me”.

Do

If the connection is one-way, say so on the card.

Don't

A two-way sync symbol for a connection that only sends.

Do

Show the last sync time.

Don't

“Always in sync” when there's no background worker.

Do

A service whose key isn't configured should say “Unavailable”.

Don't

A connect button that fails on the service's consent screen.

Related pages

Service logosEach service's logo, and monograms.Card and listEvery connector is a card.PrinciplesThe principle of honesty: we don't ship a control that can only say no.Badge, pill, and switchThe "Soon" badge.
PreviousAssistantsNextList, filter, and search

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