Flowmapp. White blueprint desk with one blue pen.
- SaaS
- Light theme
- 8 colors
- 1 typeface
Flowmapp uses a bright, airy, almost lab-notebook language: near-pure white canvas, oversized bold black headlines, pill-shaped blue CTAs, and a constellation of small floating product mockups that act as proof rather than decoration. The system relies on a single vivid blue (#0080ff) as the only saturated signal, with everything else staying achromatic or near-gray so that color reads as action, not as noise. Shapes are aggressively rounded — cards arc at 20–32px, buttons and tags become full pills at 1600px, and the hero CTA even has a hand-drawn wavy tail that makes the primary action feel sketched rather than templated. Layout is max-width contained with generous breathing room; content is broken by small product screenshots, floating UI fragments, and a row of pastel circular icon badges that punctuate long-form copy.

Flowmapp design system
Brand1
Blue supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Accent2
Decorative card border glow, hero gradient bloom, chromatic outline accents on floating mockups — sits one notch deeper than Signal Blue for layered brand moments
Gray supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Neutrals5
Headlines, primary body, button text, logo wordmark — the dominant voice of the system at AAA contrast on white
Navigation text, dense UI labels where pure black feels heavy
Secondary body copy, inactive nav items, supporting descriptions
Muted body text, hairline borders, nav dividers, step badges, tertiary metadata
Page background, card surface, button text on Signal Blue, inverted surfaces
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Ink on Signal Blue
5.53 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictFails AAA 7











