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

List with filter and search

Most pages in the app are a list. The pattern is fixed: a compact search box, a pill bar for filters, and a list of rows in a card, with two separate empty states for "nothing here yet" and "nothing found."

On this page

  1. Live example
  2. Rules
  3. Sizes

Live example

Type, or tap a filter. Search reads both the translated text and the Persian source, so it works in every language, and it understands Persian digits too.

Live example
Campaign briefMine
Contract review
Landing page designMine
Coordinate meeting with clientMine
Monthly expense report
Prepare product demo

Rules

  • Search filters instantly; there's no "Search" button.
  • The active filter is a charcoal pill, and "All" is always the first pill.
  • The result count is announced when a filter is active.
  • Long lists have "More" at the bottom, not numbered pages.
  • The filtered empty state doesn't say "You haven't created anything yet"; it says "Nothing matches that search."

Sizes

Search boxTextField compact · 44px · 14pxTouch 48px · 16px
Box label13px → 10.5pxTruncated with an ellipsis
Pill bargap 8px
Pill30px desktop · 34px phone · 42px touch inside main
Active pill.pill-active · 12.94 : 1 · 14.62 : 1
LoadMoredashed-top · padding 10px 0 · .pill10 rows by default

Do

The search box is type="search" with autoComplete="off".

Don't

A box that opens the browser's autofill history under it.

Do

Show the active filter in a pill, and let “All” be the way back.

Don't

A filter hidden away in a menu where nobody sees it.

Do

A “* left” count next to “Show * more”.

Don't

A “More” button that doesn't say how much is left.

Why

Numbered pagination on a phone means ten small tap targets side by side. “More” is one target and doesn't lose your reading position.

Related pages

Text fieldThe search box, a TextField with compact and an icon.Tabs and filtersThe filter pill bar.Card and listRows and their card.Empty and loading statesTwo different empty states.Badge, pill, and switchFilter pills.
PreviousConnector pageNextForm layout

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