Flowwork Complete Design System

Flowwork is a workflow automation platform for building AI agents. This reference covers the marketing website and the product application.

Website

Flowwork Design System

The marketing site uses a clean, light design with Onest display headings and DM Sans body text. The app uses IBM Plex Sans for a functional, information-dense interface.

Source: · Platform: Next.js + React · Theme: light

Key Tokens (Website)

Brand Blue	#4461ff
Blue Tint	#ecefff
Background	#ffffff → #ecefff gradient
Primary Text	#212121
Display Font	Onest (700, 600)
Body Font	DM Sans (400, 500, 600, 700)
Navbar Height	64px
Max Content Width	1160px
Border Radius	8px (buttons) / 12–16px (cards)

Website

Colors

Brand

#4461ff

blue

#3351ee

blue-hover

#0022e6

active-blue

#ecefff

light-blue

#dfe4ff

active-lt-blue

#000f66

navy

Backgrounds

#ffffff

white

#f8f9fa

light-gray

#ebeced

lt-gray-active

#f5f6fc

surface

#ecefff

blue-tint

Text

#212121

primary

#424242

secondary

#757575

tertiary

#999999

muted

#4461ff

accent

Semantic

#25a029

success

#e9f5e9

success-lt

#c62d30

error

#fbf2f2

error-lt

#b35d30

warning

#fef5cc

warning-lt

#ad70fb

purple

Website

Typography

Display (Onest)

Hero Title

Size	56–64px
Weight	700
Tracking	-2px

Section Title

Size	40–48px
Weight	600
Tracking	-1.6px

Body (DM Sans)

Subsection — 28/700

Size	28px
Weight	700

Body text — The easiest way to create AI agents and automate work tasks.

Size	16px
Weight	400
Line Height	21px

Caption — A quick learning curve to get started.

Size	14px
Weight	400

Website

Spacing

4px

8px

12px

16px

24px

32px

2xl

48px

3xl

64px

4xl

96px

6xl

120px

section

Website

Borders & Shadows

Border Radius

4pxsm

8pxmd

12pxlg

16pxxl

pillfull

Box Shadows

Website

Buttons

Website

Inputs

Monthly / Annual

Website

Navigation

Flowwork

Product Learn Resources Pricing Start for free

Website

Hero Section

Build an AI team that works for you

Flowwork is the easiest way to create AI agents.

Start for free

Website

Pricing Cards

Free

Free forever

✓ 200 steps/mo

✓ 500 AI credits

✓ 1 user

Pro

$19

/mo (annual)

✓ 750 steps/mo

✓ 2,000 AI credits

Team

$69

/mo (annual)

✓ 2,000 steps/mo

✓ 10 users

Enterprise

Custom

✓ Custom limits

✓ SOC 2

Website

Testimonials

"This is the BEST UI in the market currently to work with."

Ivan E.

Automation Engineer

"UX feels leaps ahead of alternatives."

Notion Coach

Productivity Expert

Website

Integrations

Gmail

Slack

HubSpot

Notion

Stripe

GitHub

Airtable

Sheets

Salesforce

App / Portal

Flowwork App

The product application uses IBM Plex Sans with a denser, functional layout. A left sidebar provides navigation; the main canvas displays the visual workflow editor with connected node cards.

Key Tokens (App)

Primary Font	"IBM Plex Sans", sans-serif
Mono Font	"IBM Plex Mono", monospace
Brand Blue	#4461ff
App Background	#ffffff
Sidebar Background	#f8f9fa
Canvas Background	#fafbfc
Sidebar Width	240px
Header Height	52px
Node Width	280px

App / Portal

App Colors

Backgrounds

#ffffff

app-bg

#f8f9fa

sidebar

#fafbfc

canvas

#ecefff

selected

#ebeced

hover

Text

#212121

primary

#424242

secondary

#757575

tertiary

#bdbdbd

disabled

App / Portal

App Typography

Page Title — 24/700

Size	24px
Weight	700

Card Title — 16/600

Size	16px
Weight	600

Body — Build workflows that automate tasks.

Size	14px
Weight	400

const workflow = await agent.run();

Family	IBM Plex Mono
Size	13px

App / Portal

Workflow Node Colors

⚡

Trigger

⚙️

Action

🤖

👤

Human

Run Status

Completed

#25a029

Failed

#c62d30

Running

#4461ff

Needs Attention

#b35d30

Paused

#ad70fb

App / Portal

App Buttons

App / Portal

App Inputs

Human in the loop

App / Portal

Badges & Status

✓ Completed ✕ Failed ● Running ⚠ Needs attention ⏸ Paused Draft

Step Types

Trigger Action AI Human Webhook

App / Portal

Workflow Nodes

⚡

New email received

Gmail — When new email arrives

🤖

Classify email intent

AI — Extract intent and priority

👤

Review before sending

Human — Approve draft reply

📧

Send reply

Gmail — Send email

App / Portal

Run History

Email Assistant — #1042

Completed

2m ago

Lead Enrichment — #891

Running

now

Invoice Processing — #340

Failed

1h ago

Onboarding — #88

Needs attention

3h ago

App / Portal

Modal

App / Portal

Toasts

✓

Workflow saved

Connection failed

ℹ

Run #1042 completed

App / Portal

App Layout

Sidebar Width	240px
Sidebar (Collapsed)	64px
Header Height	52px
Config Panel Width	360px
Node Width	280px
Node Min Height	80px
Canvas Grid	20px
Node Border Radius	12px

Motion

Transitions are smooth and quick — 0.2s ease for most interactions.

Hover metranslateY(-2px)

Fast (0.15s)ease

Slow (0.3s)ease

Fast	0.15s ease
Default	0.2s ease
Slow	0.3s ease
Hover Lift	translateY(-2px)
Card Hover Shadow	0 6px 20px rgba(68,97,255,0.1)

CSS Variables

Extracted directly from the site's stylesheets.

--primary-color	#4461ff
--secondary-color	#ecefff
--blue	#4461ff
--active-blue	#0022e6
--light-blue	#ecefff
--active-light-blue	#dfe4ff
--blue-navy	#000f66
--black	#212121
--dark-gray	#424242
--gray	#757575
--light-gray	#f8f9fa
--divider-gray	#e5e5e5
--green	#25a029
--red / --error-color	#c62d30
--orange	#b35d30
--purple	#ad70fb
--white	#fff
--desktop-navbar-height	64px
--breakpoint-desktop	1150px
--breakpoint-mobile	600px

Tailwind Mapping

The paired JSON export now includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating this system.

// tailwind.config.js
import designSystem from './design-system.json';

export default {
  theme: {
    extend: designSystem.tailwind.website.theme.extend,
  },
};

// Swap to designSystem.tailwind.app.theme.extend for app/portal surfaces.

Scope	Primary	Body Font	Radius	Shadow	Breakpoint
Website	`—`	`—`	`—`	`—`	`{'max': '600px'}`
App / Portal	`—`	`—`	`—`	`—`	`—`

Scope	Recipe	Class Pattern	Notes
Website	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 text-body font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
Website	`surfaceCard`	`rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6`	Default surface/card treatment for high-visibility content areas.
Website	`inputField`	`rounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 text-body focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.
App / Portal	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 text-body font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
App / Portal	`surfaceCard`	`rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6`	Default surface/card treatment for high-visibility content areas.
App / Portal	`inputField`	`rounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 text-body focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.

Flowwork Complete Design System

Flowwork Design System

Key Tokens (Website)

Colors

Brand

Backgrounds

Text

Semantic

Typography

Display (Onest)

Body (DM Sans)

Spacing

Borders & Shadows

Border Radius

Box Shadows

Buttons

Inputs

Navigation

Hero Section

Build an AI team that works for you

Pricing Cards

Testimonials

Integrations

Footer

Product

Learn

Resources

Company

Flowwork App

Key Tokens (App)

App Colors

Backgrounds

Text

App Typography

Workflow Node Colors

Run Status

App Buttons

App Inputs

Badges & Status

Step Types

Workflow Nodes

App Sidebar

Run History

Modal

Create new workflow

Toasts

App Layout

Motion

CSS Variables

Tailwind Mapping