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

Typography

One font family for everything, a short scale of sizes, and weight instead of color to build hierarchy.

In codeapp/globals.cssapp/layout.tsxcomponents/page-header.tsx

On this page

  1. Fonts
  2. Scale
  3. Headings are bigger on phones
  4. Rules
  5. Sizes in code

Fonts

Estedad is the main font: variable from weight 100 to 900, hosted on Flowra's own server, with separate subsets for Arabic and Latin scripts so each page loads only the part it needs. English is set in Inter, and any Persian letter in the middle of it falls back to Estedad. Scripts Estedad doesn't cover, like Cyrillic and Armenian, come from the system sans-serif font.

Live example

Aa ابج

EstedadPersian, Arabic, and most Latin languages; 100 to 900.

Aa

InterEnglish text; 400 to 700.

480,000,000

Digit SeparatorsSeparators only, so tabular digits don't get spaced out.

Scale

These sizes are the ones actually used in the code. Body text is 14px; headings are tightened with weight 700 to 800 and slightly negative letter spacing, and Persian text breathes with open line height, about twice the size.

Live example

Personal space

Dashboard heading30 / 800 · 1.4PageHeader size="xl" on phones; 24 on desktop.

Design system

Public page heading28 / 800 · 1.5The heading for docs and this page.

Today's actions

Page title25 / 700 · 1.5PageHeader on phones; 19 on desktop.

Upcoming meetings

Section title18 / 800 · 1.6Section headings in articles and large cards.

Delete this action?

Dialog heading17 / 600 · 1.6The heading for confirmation dialogs and sheets.

Every action carries its full context.

Text14 / 400 · 2Default body text; the body font at 14px.

Create task

Button13.5 / 600 · 1.btn and page header pills.

Edited yesterday

Small text12.5 / 500 · 1.8Subtitles, pills, btn-sm; 13 on desktop.

At least 8 characters

Help11.5 / 400 · 1.7.field-hint and underlines.

Soon

Badge10.5 / 600 · 1.badge-soft and counters.

Headings are bigger on phones

Page headings on phones are one step larger than on desktop: 25 versus 19, and 30 versus 24 on the dashboard. On desktop, the app's top bar names the page; on phones, the heading is the only line that tells you where you are, and a 19px heading next to 16px text can't be read at arm's length. Headings wrap; they aren't truncated.

Rules

Do

Build hierarchy with weight and size.

Don't

Don't make everything bold for emphasis; one orange word is enough.

Do

Write code, values, and keys in the system monospace font.

Don't

Writing code in the text font; zero and O look the same.

Do

Need a new size? First check whether one of the existing steps works.

Don't

13.2px for one card; the scale falls apart.

Sizes in code

Body14pxbody · font-family: var(--font-fa), ui-sans-serif, system-ui
PageHeader title25/19 · 27/21 · 30/24Phone/desktop · font-semibold 600 · leading-tight
Page header description12.5px · 13pxmd · lg and xl
Floating field value16px / 500Touch 17px
Floating label14px → 11px / 600compact: 13px → 10.5px
Field hint11.5px.field-hint
Menu row14px / 500Phone 14.5px
Toast13px / 500
Dialog heading15px / 600Dialog; ConfirmDialog 17px
  • iOS zooms the page on a field with a font smaller than 16px; that's why the floating field is always 16, and below 640px every .input becomes 16 too.
  • The page title has overflow-wrap: anywhere: it wraps, it doesn't get cut off.
  • On desktop the page header description is one line with an ellipsis, and the full text goes in title; on phones it wraps in full with a line height of 1.75.

Related pages

Brand typographyBrand typography, which is Estedad as well.RTL and languagesWhich font each language reads from.Numbers and datesTabular digits and the separators font.Page headerPage heading steps on phones and desktop.
PreviousPrintingNextSpacing and 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