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

Creation flows and steps

Creating something new in Flowra is either a short dialog or a few clear steps. In both, the main action is in the footer, defaults are sensible, and nothing is created until the final confirmation.

In codecomponents/code-input.tsxcomponents/step-arrow.tsxcomponents/knowledge/ui.tsx (Dialog)

On this page

  1. Creation dialog
  2. Verification code steps
  3. Number stepper
  4. Rules
  5. Verification code, precisely
  6. Creation form footer

Creation dialog

A heading that says what's being created ("New action"), the fields that are needed and no more, and two buttons in the footer: cancel and the create verb. Defaults come from where you're standing: the current project, today, and yourself as owner.

Verification code steps

Sign-up and password recovery are two steps: the form, then a six-digit code. CodeInput has one box per digit but is a single value: pasting the whole code into any box fills them all, Backspace in an empty box moves back one, the row is left to right in both languages, and the sixth digit submits the form on its own.

Live example

Number stepper

For a number that goes up and down by one, like member count, two 40px buttons that both look like buttons even at rest, because phones can't hover. Only a button that can't go any further is faded.

Live example
Members
3

Rules

Do

Pressing confirm twice shouldn't create something twice.

Don't

A new record on every click.

Do

Previous and next in that order in the DOM, with StepArrow.

Don't

Arrows flipped by hand for each language.

Do

The error next to its own field.

Don't

A general message at the top of the form that doesn't say which field.

Verification code, precisely

Rowdir="ltr" · gap 8px · role="group"
Box58px · 22px / 700 · tabular-nums
ErrorDigits --red
Inactiveopacity 0.55
InflowinputMode numeric · maxLength 1Only the first box one-time-code
Keyboard← → · Backspace on an empty box · paste
  • Each box has its number as its aria-label, and the group has the label the page passes to CodeInput.
  • Only the first box has autoComplete="one-time-code"; if all six boxes asked for it, each would claim the whole code.
  • A code the page filled in itself (the no-email dev mode) doesn't submit the form; only a sixth digit the person typed does.

Creation form footer

Desktopjustify-content: flex-end · gap 8pxButton min-width 128px
Phoneflex 1 1 0 · min-height 48px
Creatingdisabled + .spinner

Do

Default values from where the person is standing.

Don't

An empty form that asks for the current project again.

Do

The button is disabled while a required field is empty; after that it stays enabled and states the error next to the field.

Don't

A disabled button for a wrong value; it doesn't say why.

Related pages

DialogMost creation happens inside dialogs.Text fieldFields and their errors.AssistantsThe assistant drafts, and you confirm.RTL and languagesStepArrow takes the direction of movement, not the side of the screen.Phone layoutThe verification code and stepper are sized for fingers.
PreviousForm layoutNextUpgrade prompt

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