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

Page assistant

One pill in the page header opens every assistant, and the whole conversation lives in one window: a dialog sized to the conversation on desktop, and a full-height sheet on phones. One component for every page that has an assistant.

In codecomponents/assistant-panel/index.tsxcomponents/assistant-panel/composer.tsx

On this page

  1. Sample
  2. Three stages
  3. Honest about AI
  4. Sizes
  5. States and accessibility

Sample

The assistant pill is a btn-ghost with an orange sparkle icon; while the assistant is busy, an orange dot sits on its corner.

Live example

Action planner

Summer campaign

Without AI

Tell me what's coming up; I'll ask a few short questions and suggest actions.

When does it need to be done?
By end of month

Three stages

  • Intro: a title, a short description, suggestion pills, and an input box.
  • Conversation: bubbles, a typing indicator, questions the assistant asks with answer pills (or a date, person, or picker), and a compose box with attachments.
  • Draft: an editable preview of what will be created, and a confirm button. Nothing is created until you confirm.

Honest about AI

If the flag, plan, or service key is missing, or the service doesn't respond, the assistant doesn't stop: it moves ahead with ready-made questions and plans, and its card says "Without AI." When the plan is what's in the way, an upgrade prompt appears above the conversation and the path without AI is still available.

Sizes

Desktop dialog640px × 85vh.modal.assist-modal
Phone sheet92vh.sheet-menu.assist-sheet
Assistant mark30px · accent-soft
<AssistantPanel
  id="plan"
  userId={session.id}
  title={tr("برنامه‌ریز اقدام‌ها")}
  intro={tr("بگو چه کاری در پیش است؛ چند سؤال کوتاه می‌پرسم و اقدام‌ها را پیشنهاد می‌کنم.")}
  /* ask → produce → confirm */
/>

States and accessibility

Busy dot7px · top 4px · inset-inline-end 6pxaria-hidden
Pill iconcolor: var(--accent)
Pill focus2px solid var(--accent) · offset 2px
Badge--accent on --accent-soft3.21 : 1 · 4.32 : 1
  • The window on desktop and the sheet on phones both have role="dialog", aria-modal="true", and an aria-label equal to the assistant's title.
  • The chat body is aria-live="polite", so a new assistant message gets read; the typing indicator has the aria-label “Writing…”.
  • Reply pills have aria-pressed, and the date pill has aria-haspopup="dialog" and aria-expanded.
  • The busy dot is aria-hidden; being busy is also visible in the chat itself.

Do

An editable draft and one confirm button.

Don't

Creating something before the person confirms.

Do

When AI isn't available, a “No AI” card and a ready-made path.

Don't

An assistant that only returns errors.

Related pages

Upgrade promptWhen you don't have the AI plan, that's said first.DialogThe same .modal on desktop, the same sheet on phones.Page headerThe assistant pill in the page header's action row.Creation flowThe assistant drafts, and you confirm.Badge, pill, and switchStarter suggestions are pills.
PreviousPage headerNextConnector page

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