Web Style Guide

01 — Color

A warm navy world, lit by orange.

Two surfaces dominate the site: a deep navy and a warm cream. Orange does the heavy lifting on calls-to-action; slate-blue, teal, and tan provide rhythm across the product cards.

Core Surfaces

Navy
#0F2238
Hero, footer, dark surface
Navy Deep
#091628
Layered cards, feature strip
Cream
#EFE9DA
Light section background
Cream Soft
#F5F1E6
Cards, page chrome
White
#FFFFFF
Stat pills, inputs

Accents

Orange
#D26E35
Primary CTA, brand accent
Orange Deep
#B85A24
Hover / active state
Orange Soft
#E89263
Italic accent text on dark
Gold
#C9A961
Logomark Lead
Slate Blue
#B8C5D6
SmartSelect card
Teal
#4A7C7E
SmartSelect Pro card
Tan
#D5C591
RateSync card
Tan Soft
#E0D4A8
DataSync, soft accents
02 — Type

A serif that talks, a sans that listens.

Fraunces carries the brand voice in headlines. Inter sets the body, captions, and UI labels. The italic serif does more work than usual — reserve it for the one phrase you want a reader to remember.

Display H1Fraunces 400 / clamp(40,5vw,64)

Turn your website into your highest-converting branch.

Display H2Fraunces 400 / clamp(32,4vw,48)

Guide visitors with clarity

Display H3Fraunces 400 / 28px

Pathway to success for you and your visitors

Card TitleFraunces 500 / 22px
Clarify Financial Decisions
EyebrowInter 600 / 11px / 0.18em letter-spacing
Successful outcomes
LeadInter 400 / 17px

Our embedded solutions help banks and credit unions understand visitors and recommend relevant financial products.

BodyInter 400 / 15px

Lead Capture clarifies financial decisions through goal investigation and financial education.

Pull QuoteFraunces 400 / 24px
“We have found Leadfusion very easy to work with. Their highly professional team helped us get up and running quickly.”
04 — Hero

The hero pattern

Two-column hero with serif headline (one italic phrase carries the message), supporting copy, primary + secondary CTA, paired with a product mockup card.

Turn your website into your highest-converting branch.

Our embedded solutions help banks and credit unions understand visitors, recommend relevant products, and increase applications across digital and branch channels.

Build Savings
05 — Buttons

Three button voices

Primary orange for the one action you want every reader to take. Ghost outline for secondary navigation.

On light surfaces — primary, ghost-dark outline, and a smaller variant.

On dark surfaces — primary, ghost-light outline.

06 — Cards

Three card families

The site uses three distinct card systems: colored product cards for the solution suite, stepped pathway cards for the funnel, and cream-on-dark support cards.

Solution Suite Cards

$

SmartCalc

Clarify Financial Decisions

New

SmartSelect

Personalize Product Selection

SmartSelect Pro

Simplify complex product decisions

New

RateSync

Keep Leadfusion tools updated when rates change

DataSync

Integrate Leadfusion data with your enterprise systems

Pathway Cards

Lead Capture
Clarify Financial Decisions
  • Goal Investigation
  • Financial Education
Lead Maturation
Which product?
  • Product Education
  • Product Selection
Lead Conversion
How to take action?
  • Decision Validation
  • Channel Selection
  • Personal Connection

Feature Strip (4-up on dark)

Low-Touch

Minimal internal resources required

Fully Compliant

Meets exacting ADA and Infosec requirements

All Lines of Business

Lending, deposit, and banking

Industry Insights

Benchmarking against peer group

Support Cards (cream on dark)

Our implementation experts ensure journeys are optimal for your brand.

More →

Our reporting and recommendations provide ongoing insight to maximize results.

More →

Our support team handles modifications, integrations, and customizations.

More →
06 — Cards

Three card families

Colored product cards for the solution suite, stepped pathway cards for the funnel, and cream-on-dark support cards.

Solution Suite Cards

$

SmartCalc

Clarify Financial Decisions

New

SmartSelect

Personalize Product Selection

SmartSelect Pro

Simplify complex product decisions

New

RateSync

Keep Leadfusion tools updated when rates change

DataSync

Integrate Leadfusion data with enterprise systems

Pathway Cards

Lead Capture
Clarify Financial Decisions
  • Goal Investigation
  • Financial Education
Lead Maturation
Which product?
  • Product Education
  • Product Selection
Lead Conversion
How to take action?
  • Decision Validation
  • Channel Selection
  • Personal Connection

Feature Strip (4-up on dark)

Low-Touch

Minimal internal resources required

Fully Compliant

Meets exacting ADA and Infosec requirements

All Lines of Business

Lending, deposit, and banking

Industry Insights

Benchmarking against peer group

Support Cards (cream on dark)

Our implementation experts ensure journeys are optimal for your brand.

More →

Our reporting and recommendations provide ongoing insight to maximize results.

More →

Our support team handles modifications, integrations, and customizations.

More →
07 — Rich Text

Rich text styles

All elements that render inside a Webflow Rich Text field — use this as the canonical reference when styling CMS body fields like article body or one-pager intro.

Heading 1 — article opening

Paragraph copy sits at 17px Inter on a generous 1.7 line-height. The brand reads calm, never cramped. Use plain paragraphs for the bulk of any rich-text body. Long passages should rarely exceed a 720px measure for comfortable reading.

Heading 2 anchors a new section

Body paragraphs continue at 17px. Inline emphasis uses italic or bold sparingly — italics are reserved for the one phrase that carries the argument, set in serif and colored orange when accented.

Heading 3 for sub-sections

Slightly smaller than H2, in serif at 24px / 500. Use sparingly — most rich-text articles need only H2 with optional H3.

Heading 4

Inter 600 at 16px. Functional, used for callout titles inside body copy.

Heading 5

Inter 600 at 14px / uppercase / letter-spacing 0.08em. Rare in body content; appears in side rails or labelled blocks.

Heading 6

Inter 700 at 11px / uppercase / letter-spacing 0.14em. Eyebrow-tier label.

Unordered list

  • Diamond bullets in orange anchor every list item.
  • Use lists for parallel ideas of equal weight.
  • Keep nesting to two levels max.

Ordered list

  1. Numbered lists use serif numerals in orange.
  2. Reserve them for genuinely sequential steps.
  3. If the order doesn’t matter, use an unordered list.

Blockquote

“We have found Leadfusion very easy to work with. Their highly professional implementation team helped us get up and running quickly.”— Director of Digital, Fifth Third Bank

Inline code & code block

Reference variables inline like --orange, --navy, or clamp(40px, 5vw, 64px).

:root {
  --orange: #D26E35;
  --navy:   #0F2238;
  --cream:  #EFE9DA;
}

Horizontal rule


Content continues after the rule.

Image with caption

[ image asset — 16:9 placeholder ]
Caption text sits in 12px Inter, italic, ink-muted color.
08 — Stats

Stat pills

A floating-pill format. Big serif number, small uppercase label, on a white pill with soft shadow.

$7For Home Equity Loans
$2For Savings and CDs
$2For Business Checking
09 — Charts

Bar chart on dark

Bars use orange and gold; labels are uppercase Inter; the value sits above the bar in serif.

Qualified Leads
% Clicking
24%
Loan
32%
Card
24%
Deposit
24%
Checking
10 — Tables

Data tables

Quiet, readable tables with a cream header row and soft hover. No vertical rules.

Line of BusinessConversion RateCost / ConversionIndustry Cost / Lead
Business Checking51%$1.89$41 to $154
Credit Card32%$47.70$36 to $198
Auto Loan24%$13.67$30 to $100
Home Equity Loan16%$7.02$50 to $347
Savings and CD24%$2.37$32 to $88