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

Numbers, digits, and dates

Numbers use each language's own digits and separators, numeric inputs accept all three digit systems, and dates inside the app default to the Solar Hijri calendar.

In codelib/tr.tslib/session.tslib/jalali.ts

On this page

  1. Number format
  2. Numeric input
  3. Tabular digits
  4. Date
  5. Size and behavior

Number format

Every toLocaleString in the app is called with numLocale(), never with a fixed tag like fa-IR. numLocale() reads from the language list, so German gets a period for thousands, French a thin space, and Persian gets Persian digits with the "٬" separator. For amounts, formatAmount does the same.

Live example

normalizeDigits →1234567٫89

Englishen-US·
Deutschde-DE·
Türkçetr-TR·
فارسیfa-IR·
العربيةar·
Françaisfr-FR·
Հայերենhy-AM·
Portuguêspt-BR·
Русскийru-RU·
n.toLocaleString(numLocale())
formatAmount(480000)            // lib/session.ts
normalizeDigits("۱۲۳٤")          // "1234"

Numeric input

Someone typing on a Persian or Arabic keyboard should be able to enter amounts and times just as they are. normalizeDigits converts Persian and Arabic digits to Latin digits before reading them. Passwords are the exception: they're never normalized, because they must come back exactly as typed.

Tabular digits

Columns of amounts and times use equal-width digits (tabular-nums) so digits line up. In tabular mode, Estedad stretched the thousands separator to the width of a digit, so a small font called Digit Separators draws only "٫", "٬", and the middle dot, and sits first in the font list.

Date

Inside the app, dates default to the Solar Hijri calendar, and formatJalali respects each user's calendar preference. Gregorian month and day names are built with Intl in the active language.

Public site pages use formatPublicDate, which depends only on the language: an English reader who has never opened the app shouldn't see a Solar Hijri date.

Live example
In the appformatJalali·
Public pageformatPublicDate·
Stored valueISO·

Size and behavior

Tabular figuresfont-variant-numeric: tabular-nums.select-chip
Date valueyyyy-mm-dd
Time valueHH:MM
List filternormalizeDigits(q)۱۲, ١٢, and 12 are the same
Verification codeinputMode="numeric" · one-time-code

Do

Show numbers with toLocaleString(numLocale()) or formatAmount.

Don't

toLocaleString("fa-IR"); German gets Persian digits too.

Do

Normalize input digits with normalizeDigits before parsing.

Don't

Number("۱۲"), which returns NaN.

Do

Amount and time columns use tabular-nums.

Don't

Proportional figures in a column; the numbers don't line up.

Related pages

RTL and languagesnumLocale() reads from the same language list.Date and timeDateField shows the Solar Hijri calendar following the same rules.Text fieldNumeric fields accept Persian and Arabic digits through normalizeDigits.TypographyTabular digits and the separators font.
PreviousRTL and languagesNextAccessibility

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