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

Motion

Motion in Flowra is short and explains something: where it came from, where it went, and whether it did its job. Five curves and a few durations make up all of it.

In codeapp/globals.csslib/use-reveal.tscomponents/text-field.tsx

On this page

  1. Curves
  2. Durations
  3. Press feedback
  4. Section entrance
  5. Rules
  6. Every motion, precisely
  7. With reduced motion

Curves

Tap "Play" to see each curve along a path. "Ease out" is the most used; "Spring" is for things that should feel a little alive, and "Sheet" is the same curve iOS sheets use.

Live example
Ease outcubic-bezier(0.22, 1, 0.36, 1)

0.3–0.5s The most-used curve, for sections and panels entering: starts fast and settles gently.

Springcubic-bezier(0.34, 1.56, 0.64, 1)

0.28–0.3s Overshoots the target slightly and comes back: dialogs opening on desktop and the switch handle.

Sheetcubic-bezier(0.32, 0.72, 0, 1)

0.24–0.34s The iOS sheet curve: dialogs and menus rising from the bottom on phones.

Toastcubic-bezier(0.16, 1, 0.3, 1)

0.4s Toasts entering from the bottom; they exit in 0.35 seconds with ease.

Standardcubic-bezier(0.4, 0, 0.2, 1)

0.18s Moving a field's floating label.

Durations

Button hover and press0.15sPress: 0.06s
Color and border on theme switch0.25s
Field floating label0.18s
Dialog opening0.3sPhone: 0.34s
Menu sheet0.24s
Toast entrance0.4sStays: 3.6s
Field underline ripple1.35s

Press feedback

A button rises 1px under the pointer and shrinks to 97 percent under a finger; a pill shrinks to 94 percent. A large button (btn-lg) doesn't rise, it only shrinks, because on screens like sign-in it's the page's only job and shouldn't jitter under the pointer.

Section entrance

On the public site, useReveal adds the is-in class the first time a section is seen and then stops watching it; a section that animates again on every scroll is distracting. The class is written directly on the node, without re-rendering anything.

Rules

Live example

Your device: ·

@media (prefers-reduced-motion: reduce)

Do

A keyframe that starts from opacity zero should write to explicitly.

Don't

A keyframe with only from; it goes from zero to zero and nothing shows.

Do

JavaScript motion should check prefers-reduced-motion before starting.

Don't

Relying on the global CSS rule for an animation built with requestAnimationFrame.

Every motion, precisely

.btnall 0.15s easePress 0.06s · scale(0.97)
.pill (button)0.15s · scale(0.94)
Dropdown listdropIn 0.24s cubic-bezier(0.34, 1.56, 0.64, 1)From translateY(-8px) scale(0.96)
ActionMenudropIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)
Desktop dialogpopIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)From scale(0.5), opacity 0
Dialog backdropfadeInFlat 0.2s ease
Phone dialogmodalSheetUp 0.34s cubic-bezier(0.32, 0.72, 0, 1)
Menu sheetsheetUp 0.24s cubic-bezier(0.32, 0.72, 0.25, 1)
ToasttoastIn 0.4s cubic-bezier(0.16, 1, 0.3, 1)Exit toastOut 0.35s ease
Switch knob0.28s cubic-bezier(0.34, 1.56, 0.64, 1)
Field icon0.28s spring · scale(1.35)
List arrow0.22s spring · rotate(180deg)
Floating label0.18s cubic-bezier(0.4, 0, 0.2, 1)
Underline colorstroke 0.25s ease
SkeletonknShimmer 1.3s ease-in-out infinite
Spinnerspin 0.6s linear infinite
Dock hiding0.35s cubic-bezier(0.32, 0.72, 0.25, 1)Phone, scrolling down

With reduced motion

Everythinganimation/transition-duration: 0.01ms !important
Phone dialogmodalFadeIn 0.18s easeInstead of sliding up
Sheet and its backdropanimation: none
Underline waveDoes not runmatchMedia before starting

Do

Enter with a soft curve, exit shorter with ease.

Don't

An exit longer than the entrance; people end up waiting for it to leave.

Do

Springy only for small things: menus, switches, icons.

Don't

Springy on a full-width sheet; the whole screen wobbles.

Related pages

AccessibilityReduced motion for everything, in one place.DialogDialogs spring open on desktop and slide up from the bottom on phones.ToastToast entrance and exit.Text fieldThe ripple on a field's underline on focus.ButtonsPress feedback: a slight shrink.
PreviousLayersNextNotification sound

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