Flow AI Style Guide

Foundations (design tokens) and elements (atomic building blocks). For composed components (hero, cards, sections), see the Component Library. Both match index.html exactly.

Typography

Font: Inter (400, 500, 600, 700). H1 = hero; H2 = section titles; H3 = feature headings; H4 = subheadings.

H1 — text-5xl sm:text-6xl md:text-7xl font-bold

Book more meetings on LinkedIn

H2 — text-4xl md:text-5xl font-medium

Meet Flow AI

H3 — text-2xl md:text-3xl font-medium

Find ideal buyers from 300M+ leads

H4 — text-lg md:text-xl font-semibold

Section subtitle

Body large — text-lg md:text-xl text-theme-body

The LinkedIn automation tool with everything you need to find ideal buyers and book more meetings.

Body — text-sm md:text-base text-theme-body

Easily search and find your ideal buyers using the greatest database on Earth—without scraping websites and relying on expensive 3rd-party databases.

Muted — text-sm text-theme-muted

For secondary or supporting text.

Small / caption — text-xs

Small labels, captions, and metadata.

Colors

Theme swatches. Primary = CTAs, links. Dark = headings, dark CTAs. Body/Muted = copy. Light/Border = surfaces, dividers.

Primary

#6E40D7

Dark

#1A1A1A

Body

#374151

Muted

#6B7280

Light

#F3F4F6

Border

#E5E7EB

Pills

Use for: Labels, status, categories. Purple/Green/Orange: feature labels. Pink/Blue/Red: accent.

Purple Green Orange Pink Blue Red

Background Gradients

Animated radial gradients using the pill palette. Sized to match homepage context for visual reference.

hero-gradient-morph

Use for: Hero section background (above fold). Creates soft ambient glow. White content sits on top via .hero-gradient-content.

Full hero-height demo. Same proportions as homepage hero—soft purple, blue, orange, green, pink, red with animated fade.

pricing-team-gradient

Use for: Team pricing card only. Same palette, different layout. Wraps the highlighted plan card.

Card-sized demo. Team plan uses this gradient behind pricing content.

Buttons

Each variant has a specific use. Match the context below when choosing.

Primary — hero, nav, sticky footer CTA Try Flow AI free
Primary + arrow — nav CTA when hover reveals Try Flow AI free
Secondary small — secondary actions, pills Secondary small
Dark — dark CTA section, high contrast Dark
Dark large — sticky footer, prominent CTAs Try Flow AI free
Gray / Explore — playbook, feature links, tertiary Explore

Magic CTA (pricing)

Use for: Team plan CTA only. Animated glow and sparkles.

Try Flow AI free

Form Elements

Match the input type to the context.

Use for: Hero signup, footer CTA. Pair with primary CTA button.

Use for: Mega menu search, filter/search within sections.

Trust Badges

Use for: Hero (inline badges under CTA), feature sections (benefit lists). Trust bar: above logo marquee.

Inline badges — hero, feature sections

No card required Trial premium features Easy 60-sec setup

Trust bar overlay — centered above logo marquee

Trusted by 100s of GTM teams

Video Play Button

Use for: Hero video (below hero form). Thumbnail with centered play button overlay. Dark overlay on hover.

Border Radius

Use for: rounded-lg = inputs, buttons; rounded-xl = cards, thumbnails; rounded-2xl = sections, large cards; rounded-full = avatars, pills.

rounded-lg 8px — inputs, buttons
rounded-xl 12px — cards, thumbnails
rounded-2xl 16px — sections, large cards
rounded-full 50% — avatars, pills

Shadows

Two shadow levels used on the homepage. shadow-sm is the default for all elevated elements. shadow-xl is used exclusively for the video play button overlay.

shadow-sm Cards, buttons, testimonial chip, carousel buttons, playbook card, step cards
shadow-xl Video play button only

Spacing & Layout

Consistent spacing and layout rules for all homepage sections. Follow these exactly when creating new pages.

Page container

max-w-container 1200px — all content wraps in this
px-6 md:px-10 Horizontal padding on every section container
mx-auto Center the container

Section vertical spacing

Classes When to use
py-16 md:py-24 Standard — most sections (features, pricing, FAQ, CTA, integrations, steps, customer stories)
py-20 md:py-28 Emphasis — testimonial section
py-24 md:py-32 Large — playbook section, other standout blocks

Breakpoints (Tailwind config)

Prefix Min-width Typical use
sm: 480px Stacked → side-by-side forms, small grids
md: 768px Tablet — multi-column grids, larger type
lg: 992px Desktop — wider padding, feature sections
xl: 1280px Large desktop — rarely used, max container handles most

Common inner spacing patterns

gap-6 Between cards in a grid
gap-8 Between step cards, larger card grids
gap-12 md:gap-20 Between text column and image in feature sections
mb-10 md:mb-14 Section heading to content
space-y-2 Between FAQ items, stacked list items

Accent Colors

Used sparingly for emphasis. Gold for star ratings, orange for alerts and badges.

Gold

#DAAF56

Use for: Star ratings in hero testimonial and customer stories.

text-theme-accent-gold

Orange

#F23B1B

Use for: Alerts, emphasis, warning badges.

Alert badge

Pricing Toggle

Use for: Pricing section only. Monthly / Yearly billing switch with SAVE 20% badge.

Monthly Yearly SAVE 20%

Info Tooltip

Use for: Pricing feature labels that need clarification (e.g. “1 account” → tooltip explains one LinkedIn account).

1 account One connected LinkedIn account.