---
title: "Flowmapp design system"
variant: extended
source: https://www.flowmapp.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/flowmapp-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Flowmapp · Design System

> Clear UX planning, framed in confident blue

**Theme:** light · **Industry:** saas · **Source:** https://www.flowmapp.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Flowmapp’s homepage pairs oversized black typography with a cool, near-white canvas and vivid blue calls to action. Product diagrams, process cards, client proof, and testimonials explain a visual planning workflow in a spacious, product-led sequence.

## North star

Keep the page calm and spacious, then use oversized black type and saturated blue to make the product workflow unmistakable.

## Overview

The visual system is built on a cool, nearly white canvas (#f6f8fa) with black typography and precise blue accents. The hero uses a large centered headline, a bright blue pill-shaped CTA, and a soft, colourful product scene; the surrounding whitespace keeps this dense composition legible. Inter is used throughout, with heavy display headings, tight negative tracking, and smaller, more restrained supporting copy. Most sections retain the pale canvas, while white bands and cards distinguish the four-step workflow. Rounded cards, thin blue outlines, and diagrams make product capabilities tangible without relying on conventional lifestyle photography. A saturated blue client-logo panel creates the strongest full-width colour break. Testimonials and educational links return to the quieter palette. Spacing is generous between major stories, while card interiors remain information-rich and structured.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Cool Canvas | `#f6f8fa` | `--color-cool-canvas` | surface | Primary page background across the hero, overview, workflow audience, testimonials, and learning sections. |
| Ink Black | `#000000` | `--color-ink-black` | neutral | Headlines, navigation, body copy, and the primary header CTA background. |
| Slate Mist | `#8c9baa` | `--color-slate-mist` | neutral | Muted supporting copy, secondary labels, and low-emphasis interface text. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Workflow section bands, cards, navigation surface, and reversed text on dark or blue controls. |
| Flow Blue | `#0050ff` | `--color-flow-blue` | brand | Thin card outlines and interface emphasis; the measured primary blue and border token. |
| Action Blue | `#0080ff` | `--color-action-blue` | accent | Hero CTA and the large client-logo proof section background. |
| Cloud Blue | `#c5e0fb` | `--color-cloud-blue` | accent | Pale blue highlight surfaces and the light-blue fill behind a secondary planning link. |
| Sky Tint | `#9cccfc` | `--color-sky-tint` | accent | Subtle blue detailing in card illustrations and secondary UI accents, not a defining page background. |

### Semantic aliases

`--color-canvas` → `#f6f8fa` (Cool Canvas) · `--color-surface` → `#ffffff` (Paper White) · `--color-surface-2` → `#c5e0fb` (Cloud Blue) · `--color-text` → `#000000` (Ink Black) · `--color-text-muted` → `#8c9baa` (Slate Mist) · `--color-border` → `#0050ff` (Flow Blue) · `--color-accent` → `#0080ff` (Action Blue) · `--color-accent-2` → `#9cccfc` (Sky Tint)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f6f8fa` | 19.73:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#c5e0fb` | 15.43:1 | AAA |
| `#8c9baa` | `#f6f8fa` | 2.67:1 | fail |
| `#8c9baa` | `#ffffff` | 2.84:1 | fail |
| `#8c9baa` | `#c5e0fb` | 2.09:1 | fail |
| `#0080ff` | `#f6f8fa` | 3.57:1 | AA-large |
| `#0080ff` | `#ffffff` | 3.8:1 | AA-large |
| `#0080ff` | `#c5e0fb` | 2.79:1 | fail |

### Gradients

- `linear-gradient(rgb(246, 248, 250) 0%, rgba(246, 248, 250, 0) 100%)`
- `linear-gradient(0deg, rgb(246, 248, 250) 0%, rgba(246, 248, 250, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 500, 600, 400, 700 | All page typography, from navigation and body copy to display headlines and CTAs. | Inter |

- **Inter:** Use bold weights for headings, compact line-height, and tight negative tracking; keep navigation and body copy in sentence case.

### Type scale — Augmented Fourth (ratio ≈ 1.393, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 84px | 700 | 1.04 | -0.03em | — | Inter | Oversized hero and high-impact promotional headlines. |
| h1 | 72px | 700 | 1 | -0.03em | — | Inter | Primary page headline and major section titles. |
| h2 | 64px | 700 | 1 | -0.029em | — | Inter | Large section headings introducing product stories. |
| h3 | 48px | 700 | 1.04 | -0.03em | — | Inter | Workflow and feature-card titles. |
| h4 | 36px | 700 | 1.09 | -0.02em | — | Inter | Subsection headings and supporting feature titles. |
| body | 16px | 600 | 1.4 | -0.015em | — | Inter | Emphasized explanatory copy and prominent UI text. |
| caption | 13px | 500 | 1.3 | -0.037em | — | Inter | Step labels, small metadata, and card details. |
| nav | 16px | 600 | 1.4 | -0.04em | — | Inter | Main navigation links and header actions. |
| link | 16px | 400 | 1.25 | -0.04em | — | Inter | Inline links and understated supporting navigation. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 5, 6, 7, 8, 10, 11, 12, 14, 16, 20, 24, 26, 32, 40, 48 px.
- Section rhythm 48px · element gap 16px · card padding 24px · max content width 1280px.

The main content is contained within a measured 1280px maximum width, with centered hero messaging and varied multi-column sections below. The page alternates generous, pale-canvas storytelling areas with white two-column product bands and a full-width blue proof panel. Major sections have a measured 48px gap; content stays comfortable rather than compressed. Cards use measured 24px internal padding. Align feature headings to the left, but reserve centered alignment for the opening hero. Keep diagrams and copy visually balanced.

## Shape & elevation

- Radius: button `12px` · card `12px` · media `50%` · nav `8px` · link `9999px` · xs `6px` · sm `8px` · md `12px` · lg `20px` · xl `24px` · 2xl `32px` · pill `9999px`
- Shadow `md` (other): `rgba(0, 0, 0, 0.06) 0px 0px 18px 0px`
- Shadow `xl` (nav): `rgba(120, 124, 132, 0.19) -9.92904px 11.043px 59.7576px 0px`
- Shadow `sm` (other): `rgba(0, 0, 0, 0.2) 0px 4px 4px 0px`
- Shadow `md-2` (card): `rgba(0, 128, 255, 0.34) 0px 8px 10px 0px`
- Shadow `md-3` (card): `rgba(0, 128, 255, 0.25) 0px 8px 10px 0px`
- Shadow `md-4` (card): `rgba(0, 128, 255, 0) 0px 8px 10px 0px`
- Motion: standard transition `0.3s ease` on interactive elements.

Most cards read as clean white or canvas-coloured surfaces, with modest rounded corners and restrained shadows. Blue outlines define selected workflow cards and diagrams; they are more characteristic than heavy elevation. Layered hero UI elements, soft blue glow, and gentle shadows add depth selectively. Avoid turning every surface into a floating card.

## Imagery

Product imagery is primarily interface mockups, sitemap and workflow diagrams, wireframes, proposal previews, and small floating UI details. The hero composes these elements around the central headline as a colourful product-led scene, not lifestyle photography. The blue proof section uses a dense field of customer wordmarks. Testimonial cards mix short quotations with compact profile imagery; illustrations should remain clear and contained.

## Components

### Floating navigation

White rounded bar on the pale canvas with black logo and links; a quiet outlined Log in action sits beside the black Try for free button.

### Hero action

Large bright-blue pill CTA with white label, centered below a bold three-line headline and surrounded by product UI illustrations.

### Workflow feature band

White section with left-aligned step headline and supporting features balanced against a large product-interface preview.

### Outlined capability cards

White cards with 12px measured radius, measured 24px padding, and crisp blue borders for process and audience details.

### Client proof panel

Saturated blue panel with a large white statement, a highlighted Flowmapp link, and a dense grid of customer wordmarks.

### Testimonial collection

Quiet canvas section with compact quote cards, profile details, and a prominent rounded white link to more team stories.

### Learning feed

White rounded content surface pairing a reader-count introduction with compact article links and reading-time metadata.

### Measured component styles

- **Primary button** (“Try for free”): background #000000 · text #ffffff · border 1px solid #000000 · radius 12px · padding 7px 10.1px 7px 16px · 600 16px Inter
- **Secondary button** (“Log in”): transparent background · text #000000 · border 1px solid #e3e4e4 · radius 12px · padding 7px 16px · 600 16px Inter
- **Link** (“Brief”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px Inter
- **Card** (“Rufus Andreas Plattner ruffadelic.net Wa”): background #ffffff · text #000000 · radius 12px · padding 24px · 400 14px Inter
- **Navigation item** (“Try Demo Project”): transparent background · text #000000 · radius 0px · padding 0px · 600 16px Inter

## Do

- Use the measured pale canvas as the default page background.
- Set major headlines in bold Inter with tight tracking.
- Reserve saturated blue for high-priority actions and proof moments.
- Use white bands to separate product workflow stories.
- Show product capability through clear interface mockups and diagrams.
- Keep generous space between sections and structured detail inside cards.

## Don't

- Do not replace the restrained palette with multiple competing colours.
- Do not make every section a white card grid.
- Do not use lifestyle photography as the main product explanation.
- Do not center-align the workflow section headings.
- Do not add heavy shadows to every card.
- Do not use loose, oversized tracking in headlines.

## Agent prompt

Build a new Flowmapp-style page with a cool #f6f8fa canvas, black #000000 Inter typography, and crisp #0080ff accents. Use #0050ff sparingly for borders and interface emphasis; reserve #c5e0fb and #9cccfc for quiet supporting details. Create a spacious, centered opening with a bold oversized headline, vivid pill CTA, and carefully arranged product-interface illustrations. Follow with a varied rhythm of pale sections, white product bands, and structured cards rather than repeating one template. Keep workflow headings left-aligned, pair concise explanatory content with clear diagrams, and use a strong blue customer-proof panel as a deliberate colour break. Use rounded corners, light elevation, readable muted copy in #8c9baa, and generous separation between stories. Avoid lifestyle imagery and unnecessary decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and CTA, with floating interface illustrations arranged around them. | Primary start-planning action, User-count social proof | Oversized black heading, Bright blue pill CTA, Floating product UI |
| 2 | product-showcase | Single-column narrative statement followed by a wide product-interface image. | Workflow overview, Capability summary | Bold inline statement, Wide sitemap preview |
| 3 | feature-grid | Five-column section with audience messaging and grouped capability cards. | Audience-based value framing, Feature comparison at a glance | Blue outlined cards, Product mini-previews |
| 4 | feature-split | White two-column product band with copy on one side and interface preview on the other. | Step-based explanation, Feature details | Bold left-aligned heading, Sitemap interface mockup |
| 5 | feature-split | White two-column section balancing wireframe previews with feature copy. | Related add-on discovery, Template-led product explanation | Wireframe panels, Compact feature list |
| 6 | feature-split | Two-column white feature band with copy and estimation interface previews. | Project-cost planning, Approval support | Cost table mockup, Estimation and invoice panels |
| 7 | feature-split | Two-column white feature band, with export visual and copy arranged side by side. | Proposal completion, Export options | Integration marks, Prominent send-proposal control |
| 8 | logo-cloud | Large blue panel with headline above a tightly arranged customer-logo grid. | Customer social proof, Brand credibility | White headline, Dense logo cloud, Highlighted inline brand link |
| 9 | how-it-works | Left-aligned heading above a three-column sequence of compact process cards. | Numbered workflow, Step-by-step project planning | Outlined cards, Small icons, Concise descriptions |
| 10 | testimonials | Campaign-style proof statement above a two-column field of testimonial cards. | Buyer preference statistic, Customer quotations | Blue emphasis banner, Quote cards, Rounded story link |
| 11 | content-feed | Two-column learning area with reader introduction beside a compact article list. | Editorial discovery, Reading-time cues | Large section heading, White rounded content surface, Article metadata |

## Source CSS custom properties (selected)

```css
--bg: #f6f8fa;
--primary-blue: #0050ff;
--_apps---typography--heading-font: Inter,sans-serif;
--_apps---typography--body-font: Inter,sans-serif;
--_apps---typography--button-font: Inter,sans-serif;
--_apps---sizes--radius: 20px;
--_apps---colors--background: #f6f8fa;
--_apps---colors--foreground: black;
--_apps---colors--card: white;
--_apps---colors--card-foreground: #060606;
--_apps---colors--popover: #ebeaea;
--_apps---colors--popover-foreground: #060606;
--_apps---colors--primary: #0050ff;
--_apps---colors--primary-foreground: #f5f9ff;
--_apps---colors--secondary: #d5efff;
--_apps---colors--secondary-foreground: #0a0d13;
--_apps---colors--muted: #f1f1f1;
--_apps---colors--muted-foreground: #777374;
--_apps---colors--accent: #ddd;
--_apps---colors--accent-foreground: #0d0d0d;
--_apps---colors--destructive: #e8262e;
--_apps---colors--border: #0050ff;
--_apps---colors--input: #0454ff;
--_apps---colors--ring: #275fda;
--_apps---sidebar--sidebar-foreground: #060606;
--_apps---sidebar--sidebar-primary: #0050ff;
--_apps---sidebar--sidebar-primary-foreground: #f5f9ff;
--_apps---sidebar--sidebar-accent: #ddd;
--_apps---sidebar--sidebar-accent-foreground: #0d0d0d;
--_apps---sidebar--sidebar-border: #0050ff;
--_apps---colors--background-dark: #060606;
--_apps---colors--foreground-dark: #f8f8f8;
--_apps---colors--card-dark: #181818;
--_apps---colors--card-foreground-dark: #f8f8f8;
--_apps---colors--popover-dark: #181818;
--_apps---colors--popover-foreground-dark: #f8f8f8;
--_apps---colors--primary-dark: #2572ff;
--_apps---colors--primary-foreground-dark: #090d16;
--_apps---colors--secondary-dark: #021448;
--_apps---colors--secondary-foreground-dark: #f5f9ff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/flowmapp-com