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

Color

Eighteen color tokens, each with a light value and a dark value. No component hard-codes a color; they all read from these tokens, and switching themes just means these variables change value.

In codeapp/globals.css

On this page

  1. Tokens in both themes
  2. Charcoal, not black
  3. Status colors
  4. Rules
  5. Color pairs and their contrast

Tokens in both themes

Each swatch has two halves: light and dark. Tap a token name to copy it. The dark theme is turned on with data-theme="dark" on html, and a script reads it from the saved preference before hydration, so the page never flashes light.

Live example

Surface and background

On#F6F5F3Dark#151311
BackgroundThe page background. Warm, not a cold gray.
On#FFFFFFDark#1E1C19
CardCards, dialogs, menus, and any surface that sits on the background.
On#F4F3F1Dark#262320
SubtleRow hover, pill backgrounds, and soft badges.
On#ECEAE7Dark#2A2723
linesCard borders and dividers.
On#E2E0DCDark#383430
Strong lineLight button borders, the line under fields, and dashed dividers between rows.

Text

On#21201EDark#EDEAE5
Primary textHeadings and text that needs to be read.
On#716D67Dark#9C968E
Secondary textDescriptions, labels, and supporting text.
On#B3B0AADark#6B665F
Tertiary textMinor details, hints under fields, and quiet icons.

Action and emphasis

On#34312DDark#EDEAE5
CharcoalThe primary button, active pill, and toast. Turns light in dark mode.
On#211F1CDark#FFFFFF
Charcoal hoverThe same button under the pointer.
On#FFFFFFDark#1B1916
On charcoalText and icons on charcoal.
On#F04D1ADark#F4571F
Flow orangeEmphasis: active state, focus, counters, and the one important button on a page.
On#C8390BDark#C8390B
Strong orangeThe orange surface that carries white text: btn-accent and badge-accent; white on it is 5.19 to 1.
On#C43A0FDark#FF7040
Orange textOrange text: a focused field's label, the selected option, the active link; AA in both themes.
On#FDEEE8Darkrgba(240,77,26,.14)
Soft orangeOrange badge background, the assistant icon, and upgrade prompts.
On#DEDCD8Dark#3B3833
Switch offThe switch track when it's off.

Status

On#137A40Dark#43B374
GreenDone, success, payment received.
On#E9F6EEDarkrgba(46,160,96,.14)
Soft greenSuccess badge background.
On#CC3424Dark#E05747
RedErrors, overdue, delete, and unread counters.
On#CC3424Dark#C4301F
Strong redThe red surface with white text: btn-danger and badge-count; white on it is 5.14 and 5.54.
On#FDEEECDarkrgba(221,59,42,.15)
Soft redBackground of the delete icon in confirmation dialogs.
.my-surface {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
}
/* Tailwind shorthand */
<p className="text-(--text-secondary)" />

Charcoal, not black

The primary button and active pill are charcoal (--dark), not orange. In dark mode the same token turns light and the text on it (--dark-contrast) turns dark, so the primary button has the highest contrast on the page in both themes without spending the brand color.

Why

Orange is rare so that it gets noticed when it shows up. If every primary button were orange, unread counters, active states, and errors would all compete with each other.

Status colors

Green for done and success; red for errors, delete, and overdue. Each has a soft version for backgrounds. In dark mode the soft versions are translucent so they sit on any surface.

Live example
DoneOverdueNew3

Rules

Do

One strong orange element per page: the active state or one important button.

Don't

Several orange buttons side by side; none of them is more important anymore.

Do

var(--card) for a new surface and var(--border) for its edge.

Don't

#fff or a hand-picked gray; in dark mode it stays a white rectangle.

Do

For a mixed color, use color-mix with a token, like 10 percent orange on transparent.

Don't

A new hex value that only works in the light theme.

Color pairs and their contrast

Every combination is measured in both themes. The dark soft colors are semi-transparent, so their ratios are calculated on --card: dark --accent-soft on a card becomes #3B2319.

Text on background14.94 · 15.45AAA in both
Primary button12.94 · 14.62--dark-contrast on --dark; AAA
Secondary text on card5.14 · 5.80AA in both
Tertiary text on card2.16 · 2.99Fails; not needed for text
White on strong orange5.19 · 5.19--accent-strong; btn-accent and badge-accent
Orange text on card5.30 · 6.19--accent-text; AA
White on brand orange3.63 · 3.37Avatars and icons only; not labels
Orange on soft orange3.21 · 4.32The “Review” status badge
Green on soft green4.86 · 5.38AA
Red on card5.14 · 4.55AA in both
White on strong red5.14 · 5.54--red-strong; btn-danger and badge-count
Secondary text on subtle4.64 · 5.33.pill and .badge-soft; AA
Switch off on card1.37 · 1.46Non-text, below 3

Do

Text that needs to be read uses --text.

Don't

Essential descriptions in --text-tertiary; in the light theme it's 2.16 to 1.

Do

Say the status in words too: “Done” next to the green dot.

Don't

Just a green or red dot.

Do

Define a new color in both :root and html[data-theme="dark"].

Don't

A token with only a light value; in dark it stays light.

Why

Charcoal was chosen for the primary button because it's above 12 to 1 in both themes. Orange with white is only 3.6; that's why orange is for emphasis, not for frequent surfaces that carry text.

Related pages

Brand colorThe brand palette is drawn from these same tokens.PrinciplesThe "warm and calm, with one accent color" principle.Badge, pill, and switchBadges and pills combine soft backgrounds with text.Radius and shadowShadows carry the warm tone of the background, not pure black.AccessibilityColor is never the only carrier of meaning.Flowra design systemThe map of the whole system, with color as its base.AvatarCharcoal, orange, or gradient avatars.Upgrade promptSoft orange is the background of upgrade prompts.
PreviousAccessibilityNextDark mode

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