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

Phone layout

The phone isn't a shrunken desktop. Below 640px, a few things change across the whole app at once, in CSS, so no page has to remember them.

In codeapp/globals.csslib/use-phone.tscomponents/floating.tsx

On this page

  1. What changes
  2. Sample
  3. Rules
  4. Phone and touch, side by side

What changes

  • Every .modal becomes a bottom sheet, with a handle and drag support.
  • Every menu and picker from Floating becomes a .sheet-menu sheet with 48px rows.
  • btn-sm grows to 40px, and page header pills split the line evenly.
  • The page heading grows one step, and the top bar has no title.
  • Buttons at the end of list rows each become a 38px chip with their own background.
  • The dock at the bottom of the screen handles navigation (up to 900px).
  • On touch screens, fields are 48px with a 16px font.

Sample

This same dialog opens centered on desktop; if you open this page on a phone or narrow the window, it rises from the bottom.

Live example

Rules

Do

Decisions CSS can't make use useIsPhone(): a menu or a sheet, how many previews in one cell.

Don't

A new breakpoint for a single component.

Do

Any information that appears on hover on desktop is always visible on phones.

Don't

An action that can only be found by hovering.

Do

Measure horizontal overflow with Playwright at 390 and 1280, in both directions.

Don't

Trusting a screenshot; get a number.

Phone and touch, side by side

Two separate conditions are at work: a width of 640px or less, and a coarse pointer (pointer: coarse). A touch tablet has the second and not the first; a narrow desktop window is the reverse. This table lists them separately.

.btn≤640: 15px · coarse: 48px
.btn-sm≤640: 40px · 13.5px · coarse in main: ≥ 44px
.pill≤640: 34px · 13.5px · coarse in main: ≥ 42px
.icon-btn≤640: 40px · hover:none or coarse: 38px
Floating field58px · coarse: 62px · 17px
Plain .input≤640: 46px · 16px · coarse: 48px
.togglecoarse: 46 × 27px + invisible touch area
Menu row≤640: 46px · in a sheet: 48px
Dialog≤640: sheet · 88vh · 24px 24px 0 0
Button in a dialog sheet≤640: 48px · radius 12px

Why

Touch size depends on the pointer, not the width: a finger on a ten-inch tablet is just as big as on a phone. Width only changes the layout.

Related pages

Spacing and layoutBreakpoints and the column.DialogDialogs become sheets.Menu and sheetMenus become action sheets.AccessibilityTouch targets and hover.NavigationThe dock instead of the sidebar.PrinciplesThe "phone first" principle.PickerPickers are sheets on phones.Page headerPage header pills split the line on phones.Creation flowThe verification code and stepper on phones.
PreviousConfirmation and irreversible actionsNextFixed bars and scrolling

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