ConversionLab – Brand Guide

01 Color palette

Primary – purple

Purple

#7357F6

Primary CTA buttons, links, active states, acquisition badge, nav highlight

Purple hover

#5B42EA

Button hover / pressed state

Purple dark

#4E37DD

Active / focus ring, deep accent

Purple light

#EDE9FE

Acquisition badge background, subtle chip fills

Purple soft

#EFF3FA

Hero section background tint, acquisition service card bg

Purple card

#F7F6FB

Card surface fill, table row alternate

Usage rule: Purple is the universal brand color across all pages and service areas. It is not limited to acquisition contexts – it is the primary ConversionLab color everywhere.

Accent – green (retention context only)

Green

#059669

Retention badge text, retention funnel labels, retention zone headings

Green dark

#065F46

Retention body text on light green backgrounds

Green light

#D1FAE5

Retention badge background, growth path chip

Green soft

#F2F8F6

Retention service card background, section bg tint on retention side

Usage rule: Green appears exclusively when the two service areas (acquisition + retention) are shown side by side – service cards, funnel diagram zone labels, and badge treatments. It is not a general-purpose accent. Do not use green on retention-only pages or standalone CTAs.

Testimonial – cream / amber

Cream

#FDF2E4

Testimonial block background, quote card fill

Amber mid

#F4CE92

Warm decorative elements within testimonial

Amber

#E8B56F

Star ratings, accent within cream block

Amber dark

#DCA45C

Border accent on cream block

Ink scale – text

Ink

#2F353E

H1, H2, H3 headings, high-emphasis body

Ink mid

#343B55

Standard body copy on white backgrounds

Body

#535F6D

Secondary body, supporting paragraph copy

Meta

#595F75

Nav links, captions, form labels, meta text

Muted

#7E93B0

Placeholder text, disabled states, column header labels

Surface & border

White

#FFFFFF

Card backgrounds, modal surfaces, input fields

Surface

#F7F6FB

Page background, alternating table row

Border

#DCE1F5

All card borders, dividers, input borders

Orange accent

#F78059

Secondary visual accent – stat highlights, A/B report loss indicator

02 Typography

Font family

Hanken Grotesk

Weights in use: 400 (body), 500 (nav/label), 600 (subheadings), 700 (headings, CTAs), 800 (hero/display). Google Fonts. Secondary font for some legacy nav items: DM Sans 500/700.

Display / hero H1

74px / line-height 80px
weight 800
color #2F353E

Convert more

H1 – section hero

48px / line-height 56px
weight 800
color #2F353E

No guesswork. Just a repeatable process.

H2 – section heading

32px / line-height 38px
weight 700
color #2F353E

The full funnel – covered

H3 – card heading

18px / line-height 26px
weight 700
color #2F353E

One expert on your account, always

H4 – sub-heading

16px / line-height 24px
weight 600
color #343B55

Results that build on themselves over time

Body

16px / line-height 26px
weight 400
color #535F6D

Each winning test raises the baseline for the next. Six months in, you're testing from a much stronger position than when you began.

Body small

14px / line-height 22px
weight 400
color #535F6D

ConversionLab applies the same data-driven optimization discipline at both ends – so you grow from both directions at once.

Stat / display number

102px / line-height 1
weight 800
color #7357F6 or #2F353E

1187%

Label / eyebrow

11–12px
weight 700
letter-spacing 0.12em
UPPERCASE
color #7357F6 or #7E93B0

Why ConversionLab

Trusted by SaaS companies

Microcopy / caption

12px / line-height 20px
weight 400–500
color #7E93B0 or #595F75

Based on solid hypothesis and across several pages.

03 Buttons

Rendered examples

Specifications

Name	Background	Text color	Border radius	Padding	Font size / weight	Hover state
Primary CTA	#7357F6	#FFFFFF	100px (pill)	14–16px 28–36px	15–16px / 700	Background → #5B42EA
Primary CTA small	#7357F6	#FFFFFF	100px (pill)	10px 20px	13px / 700	Background → #5B42EA
Secondary / ghost	Transparent	#595F75	100px (pill)	14px 28px	15px / 700	Border + text → #7357F6
Nav link	Transparent	#595F75	4px	10px 16px	14px / 500	Text → #7357F6

CTA copy rule: Use first-person, outcome-specific copy. "Get my free strategy session" not "Contact us". "Request my free audit" not "Submit". Pill shape (border-radius 100px) is reserved for primary CTAs only.

04 Components

Stat cards

A/B tests performed

33

Across 10 landing pages

Uplift in CVR

1187%

Cumulative across full engagement

Reduction in CAC

64%

Increased CVR = lower acquisition cost

Stat cards use border-radius: 8px, border: 1px solid #DCE1F5, white background. Label in all-caps muted text, value in 32px/800, delta in 11px meta text. Purple for CVR/primary metrics, green in acquisition–retention split contexts only.

Badges & eyebrow labels

Acquisition Retention Case study How it works

Why ConversionLab

Trusted by SaaS companies

Two areas. One discipline.

Acquisition Retention Entry point Growth Entry point Growth

Rule: Eyebrows above section headings use uppercase, 700 weight, letter-spacing 0.12em. Purple for brand/acquisition eyebrows, muted grey (#7E93B0) for neutral labels. Never use em dash. Never mix acquisition purple and retention green on the same component unless explicitly side-by-side comparison.

Service cards – acquisition & retention

Acquisition

Convert strangers into customers

Landing pages, trial signups, demo requests. Every element tested until it earns its place.

Entry point

Design Project – one landing page in 5 business days. Fixed price, clear brief, ready to launch.

Growth

CRO retainer – ongoing A/B testing that builds on itself.

Retention

Convert customers to loyal ones

Onboarding flows, trial-to-paid conversion, pricing page optimization. Fix the leaks before they cost you MRR.

Entry point

Free retention teardown – a structured analysis of where your product is losing users and why.

Growth

Ongoing retention optimization – systematic testing at onboarding, activation, and renewal.

Service cards: border-radius: 12px, padding: 28px. Acquisition card uses #EFF3FA bg + #DCE1F5 border. Retention card uses #F2F8F6 bg + rgba(5,150,105,0.15) border.

Testimonial / quote block

"ConversionLab played a key role in accelerating Campaign Monitor's growth by optimizing our landing pages for maximum performance. We increased conversion rates by 260% in the first 6 months and 1187% cumulatively across the full engagement, and saw a 64% reduction in customer acquisition cost."

Shamita Jayakumar

Senior Marketing Manager, Campaign Monitor

Quote blocks use #FDF2E4 (cream) background, border-radius: 12px, padding: 32px 36px. Body copy 16px / 400 / italic, attribution 13px / 700 ink, title 12px / 400 meta.

Problem cards

📉

Traffic isn't the problem

Your PPC is delivering. The gap is between what visitors expect and what the page delivers.

🔁

One-off fixes don't compound

A sprint finds the obvious friction. A sustained engagement finds everything else.

👥

Junior teams, senior problems

Most agencies hand work to juniors. The person who writes the hypothesis should run the test.

Problem cards: white background, border-radius: 12px, border: 1px solid #DCE1F5, padding: 24px. Icon container: 40×40px, border-radius: 8px, #F7F6FB bg.

USP / value prop cards

✓

More revenue from traffic you're already paying for

No extra ad spend required. Higher conversion rates mean your existing budget goes further – and every improvement stacks on the one before it.

✓

One expert on your account, always

No juniors, no account managers, no handoffs. The person who writes the hypothesis is the person who runs the test – and the one you can actually talk to.

USP cards: white background, same border/radius as problem cards. Check mark: 20×20px circle, #EDE9FE bg, #7357F6 text. Heading 15px / 700, body 13px / 400.

05 Layout & spacing

Core layout values

Max page width1080px

Min page width (desktop)1080px

Section padding (top/bottom)80–120px

Mobile canvas max width320px (Unbounce hard limit)

Column gutter16–24px

Card padding (standard)24px

Card padding (large)28–36px

Border radius tokens

Radius SM4px – badges, chips, table rows

Radius MD8px – stat cards, icon containers, form inputs

Radius LG12px – service cards, quote blocks, problem cards

Radius XL20–30px – modal overlays, floating panels

Radius pill100px – primary CTA buttons only

Nav card12px

Standard card border1px solid #DCE1F5

Section background map

Hero section – bg #EFF3FA (purple-soft), nav bar on white card

Social proof strip – white bg, stat values on white

Benefits / USP section – white bg, cards on white with border

Testimonial block – cream bg #FDF2E4

Acquisition card – #EFF3FA

Retention card – #F2F8F6

Problem section – white or surface bg

CTA section / footer area – purple bg #7357F6

Section alternation rule: Sections alternate between white and tinted backgrounds to create visual rhythm. Purple-tinted (#EFF3FA) opens the page. Green-tinted (#F2F8F6) appears only alongside purple-tinted in split acquisition–retention layouts. Cream appears exclusively for testimonial blocks. Solid purple is reserved for hero headers and bottom CTAs.

06 Voice & copy rules

Core rules

CaseSentence case always – "Conversion rate optimization" not "Conversion Rate Optimization"

DashEn dash (–) for mid-sentence breaks. Never em dash (—). Never ellipsis (...)

PersonFirst person on CTAs: "Get my free session" not "Get a free session"

PositioningOne-person shop is a selling point – "One expert on your account, always"

Agency languageNever use "boutique agency". Never "paid traffic" (implies we run ads). Never "compounding" as a concept word.

Color languagePurple = acquisition, green = retention (only in split-view context)

ToneDirect, evidence-led, no hedging. Proof before claim.

Do / don't examples

DoHow Campaign Monitor cut CAC by 64%

Don'tHow Our Boutique Agency Helped Campaign Monitor Achieve Compounding Results

DoOne expert on your account, always

Don'tA dedicated account manager manages your relationship

DoMore revenue from traffic you're already paying for

Don'tWe help you maximize your paid traffic ROI

DoConversionLab starts where the click lands

Don'tWe offer end-to-end funnel optimization solutions...

DoNo extra ad spend required – every improvement stacks on the one before it

Don'tOur compounding methodology delivers exponential, synergistic results

DoGet my free strategy session

Don'tSchedule A Free Consultation Today!

LinkedIn-specific: Posts use practitioner voice – first person, specific data points, hypothesis-led thinking. No engagement-bait, no "hot take" openers. Lead with a concrete observation, follow with proof, close with a single implication. No more than one CTA per post.