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

Design principles

Seven principles we draw the answer from when there's no rule yet for a new situation.

On this page

  1. 1. Context before decoration
  2. 2. One way to do each thing
  3. 3. Phone first
  4. 4. Be honest
  5. 5. Warm and calm, with one accent color
  6. 6. Both directions, both themes
  7. 7. Motion has meaning
  8. From principle to number

1. Context before decoration

Flowra's promise is "every action with its full context." Screens are built to show exactly that: owner, due date, meeting, files, and cost right next to the work. Decoration stays only when it makes something clearer.

2. One way to do each thing

One confirmation dialog, one picker, one empty state, one button shape. People learn each pattern once and use it everywhere.

3. Phone first

Every component is designed for a finger first: menus become bottom sheets on phones, touch targets are at least 40px, and no information hides behind hover alone, because fingers can't hover.

4. Be honest

We don't ship a control that can only say no. A connector that isn't built yet has no "Connect" button; a payment that didn't go through gets no success message; a disabled button explains nothing, so we'd rather keep the button enabled and, after it's pressed, say which field has a problem.

5. Warm and calm, with one accent color

The background is warm and paper-like, the primary button is charcoal, and orange is only for things that must be seen. If everything is emphasized, nothing is.

6. Both directions, both themes

Right-to-left and left-to-right, light and dark: none of them is the second version. Every token has two values, and every layout is written with CSS logical properties so it sits correctly in both directions.

7. Motion has meaning

Motion says where something came from and where it went: sheets from the bottom, toasts from the bottom, menus from their field. We don't use decorative motion, and when your system asks for reduced motion, everything simply fades or settles into place without moving.

From principle to number

Every principle has become a number or a specific rule in code. If a number doesn't match its principle, the number is wrong.

Phone firstbtn-sm 40px · sheet row 48pxBelow 640px
Hover, not on touch@media (hover: hover).icon-btn and .media-row
One accent color--accent #F04D1A / #F4571F
Both themeshtml[data-theme="dark"]Two values for every token
Motion has meaningprefers-reduced-motion → 0.01ms

Do

When there's no rule, ask the principles and add the answer to the system.

Don't

A one-off exception on a single page that lives only there.

Do

If two principles conflict, honesty and accessibility win.

Don't

A prettier control that a screen reader or a finger can't use.

Why

The principles are ordered because decisions collide. “Phone first” sometimes makes a button bigger than would be pretty; that means the principle worked, not that the design broke.

Related pages

Flowra design systemThe system these principles stand behind.Voice and writingThe principle of honesty and simplicity, in words.Phone layoutThe "phone first" principle in practice.ColorThe "warm and calm, one accent color" principle.Connector pageThe principle of honesty on the connector page.Upgrade promptThe principle of honesty in upgrade prompts.
PreviousFlowra design systemNextVoice and writing

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