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

Radius and shadow

The smaller and more interactive something is, the rounder its corners; the higher it sits in the layers, the longer its shadow. All buttons are pills.

In codeapp/globals.csscomponents/floating.tsx

On this page

  1. Radius
  2. Buttons have one shape: the pill
  3. Shadow and layers
  4. Pitfalls
  5. Radius, precisely
  6. Layers, precisely

Radius

Each kind of surface has its own radius. The pill (999) is the most common radius in the whole app: all buttons, pills, toasts, avatars, and switches.

Live example
Badge6.badge-soft and .badge-accent
Icon button8.icon-btn
Row10Sidebar items, menu rows (9)
Menu14.dropdown-menu and the docs menu button
Card16.card
Dialog18.modal on desktop
Sheet24 24 0 0.modal on phones; .sheet-menu at 20
Pill999All .btn elements, .pill, .toast, avatars, and switches

Buttons have one shape: the pill

Buttons used to be rounded rectangles (10px, 8 for btn-sm, 12 on phones) while page header and top bar pills were fully round, and a single page could have both side by side. Now one rule at the end of globals.css makes every .btn a pill, at every size and on every page.

Why

Two shapes for the same job make people wonder whether they're different. One shape means anything round and tappable is a button.

Shadow and layers

Shadows carry the warm color of the background (rgba(24, 20, 14)) and grow taller with each layer: cards on the page, menus on cards, dialogs over everything, and toasts even over dialogs, because they report what the dialog just did.

Live example
CardA quiet surface on the background
Light button.btn-ghost; slightly more on hover
Menu.dropdown-menu, floating above the page
Dialog.modal, the highest interactive layer
Toast.toast, even above dialogs
Dockz 75
Dialog and its backdropz 1200.modal-overlay
Knowledge menusz 1250
Floating panelz 1280FLOAT_Z
Toastz 1300.toast-wrap

Pitfalls

  • A pseudo-element with a negative z-index is painted above its parent's background, not behind it. For a "card behind a card," use an offset shadow with no blur.
  • overflow-x: auto also sets the vertical axis to auto and clips the shadows of cards in a horizontal strip; give the strip vertical inner padding.

Radius, precisely

.btn at every size999pxException: .modal .btn on phones 12px
.card16px
.modal18pxPhone 24px 24px 0 0; full-screen 0
.sheet-menu20px 20px 0 0
.dropdown-menu14px
.dropdown-option9px
.select-chip10px
.input10pxTouch 12px; floating field 0
.field-trailing8px
.icon-btn8pxIn a phone list row 11px
.badge-soft / .badge-accent6px

Why

.modal .btn is more specific than .btn, so in a phone sheet buttons get a 12px radius and a 48px minimum height. This is the only place in the app where a button isn't a pill, and it's intentional: two full-width buttons at the bottom of a sheet read like a thumb bar.

Layers, precisely

Dockz-index 75
Bottom sheet (default)z-index 200.sheet-layer
Dialogz-index 1200.modal-overlay
ActionMenuz-index 1250Menu and its sheet
Floatingz-index 1280FLOAT_Z; picker, calendar
Toastz-index 1300.toast-wrap
  • The sheet shadow points upward: 0 -12px 40px -12px rgba(24, 20, 14, 0.45).
  • Dialog backdrop rgba(20, 16, 12, 0.45) with blur(3px); sheet backdrop rgba(0, 0, 0, 0.38) with no blur.

Related pages

ButtonsAll buttons have a 999px radius.Card and listCard: 16 radius and a quiet shadow.DialogDialog: 18 radius and the tallest shadow.Menu and sheetMenu: 14 radius and a floating shadow.ColorShadows are made from the warm color of the background.Spacing and layoutSpacing and radius are sized together.ToastThe toast is the topmost layer.
PreviousSpacing and layoutNextLayers

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