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

Upgrade prompt

When a feature isn't in the current plan, the same prompt appears everywhere: the feature name, the name of the plan that includes it, an upgrade button, and, if there's another way, that way.

In codecomponents/plan-gate.tsx

On this page

  1. Live example
  2. Rules
  3. A limit, not a penalty
  4. Sizes and accessibility

Live example

The server still refuses on its own; this component only turns the readable half of that refusal, { gate: "plan", requiredPlan, requiredPlanName }, into one sentence and one button. The plan name comes from the plan row in the database, so renaming a plan updates every prompt with it.

Live example

This feature is part of the Prime plan.

Without it the assistant still works with ready-made questions and plans.

This feature is part of the Prime plan.

Rules

Do

If there's a way forward without upgrading, put it alongside: "Continue without AI".

Don't

Blocking the task when its simple version works.

Do

One place, right next to the thing that was asked for.

Don't

An upgrade popup on every sign-in.

Do

The button goes to the subscription page with that plan already selected.

Don't

Sending people to the pricing page to figure out again what they wanted.

if (isPlanGate(res)) return <PlanGate info={res} detail={tr("…")} onFallback={runScripted} />;

A limit, not a penalty

A plan limit is a cap on "adding", never a reason to take something away. A workspace whose plan has run out keeps all its members and just can't invite the next one. The upgrade prompt says exactly that, not a threat.

Sizes and accessibility

Containerradius 12px · padding 14px · gap 10pxcompact: 10px · gap 8px
Color--accent-soft · border 1px var(--accent)
Mark32px · icon 14pxcompact 26px · 12px · #fff on --accent
Heading13px / 700 · leading 24pxcompact 12px
About12px · --text-secondary
Buttonsbtn-sm · btn-accent and btn-ghost36px · phone 40px
Rolerole="note"Symbol aria-hidden
  • The title is --text on soft orange: 14.4 to 1 in light and 12.15 in dark.
  • The description, --text-secondary on soft orange, is 4.55 to 1 in light and 4.98 in dark, AA in both; even so, the main message always goes in the heading.
  • The upgrade button is btn-accent, white on --accent-strong (5.19 to 1 in both themes); its label is short and bold and has a lightning icon.

Related pages

AssistantsAssistants show this first.Buttonsbtn-accent for upgrading, btn-ghost for the path without it.ColorA soft orange background with an orange border.PrinciplesHonest, no pressure.
PreviousCreation flowNextConfirmation and irreversible actions

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