Typography System

Headings

Heading 1 - 46px/38px desktop/mobile (115% line height, -1% letter spacing)

Heading 2 - 38px/32px desktop/mobile (115% line height, -1%/0 letter spacing)

Heading 3 - 32px/26px desktop/mobile (115% line height, 0 letter spacing)

Heading 4 - 24px/24px desktop/mobile (115% line height, 0 letter spacing)

Heading 5 - 20px Both

Display Styles

Display 1 - 74px/64px desktop/mobile
Display 2 - 46px/46px desktop/mobile
Display 3 - 38px Both
Display 4 - 32px/32px desktop/mobile
Display 5 - 24px/20px Desktop/Mobile

Eyebrow Styles (Display 6)

EYEBROW TEXT - 14px/14px desktop/mobile
EYEBROW UNDERLINE - 14px/14px desktop/mobile

Paragraph Styles

Regular paragraph - 16px/16px desktop/mobile with 150% line height

Large paragraph (lead) - 16px/16px desktop/mobile with 150% line height

Small paragraph - 14px/14px desktop/mobile with 150% line height

Bold text and underlined text use semantic HTML tags rather than separate type styles

Button & Link Styles

BUTTON TEXT - 16px Both with 115% line height
NAV LINK TEXT - 14px Both with 115% line height
Detail Link - 16px Both with 160% line height
Detail Link with Icon - 16px Both with 160% line height

Color System

Base Colors

White
#ffffff
Gray 3
#FAFAFB
Gray 2
#E6E8E9
Gray 1
#C0C4C9
Blue
#003A5C
Brown
#68441A
Black
#222222
Warning
#B20000

Active/Hover Colors

Blue Active
#396F9C
Brown Active
#9C753A

Button System

Primary Buttons (Blue)

Default States:
Sizes:
Block Button:

Secondary Buttons (Solid Brown)

Default States:
Sizes:

Light Buttons (Gray)

Default States:
Sizes:

Link Buttons (Text Only)

Default States:

Button Groups


Buttons on Dark Backgrounds

Primary remains the same:
Secondary remains solid brown:
Light becomes translucent:

Interactive Examples

Focus States (try tabbing through):
Loading State:
Note: Loading animation shows a spinner

Usage Guidelines

Primary

Use for the most important action on a page. Only one primary button per section.

Secondary (Brown)

Use for secondary actions or when you need multiple buttons in the same area.

Light

Use for subtle actions or in dense interfaces where less visual weight is needed.

Typography on Backgrounds

LIGHT BACKGROUND

This is a headline on light background

This is body copy on a light background. Notice how the eyebrow is blue, while the headline and body copy are black for optimal contrast and readability.

MEDIUM BACKGROUND

This is a headline on medium background

This is body copy on a medium background. The color scheme maintains good contrast while working with the gray background tone.

DARK BACKGROUND

This is a headline on dark background

This is body copy on a dark background. All text switches to white for optimal contrast against the blue background.

Gradient Backgrounds

Blue Gradient Left
90deg gradient
Blue Gradient Right
90deg gradient
Black Gradient Vertical
180deg gradient

Link Styles

Light Background Links

Regular link

Visited link example

Dark Background Links

Regular link on dark

Visited link on dark

ADA AA Compliant Combinations

Auto Text Color

This uses the automatic text color function - black text on light backgrounds.

Auto Text Color

This uses the automatic text color function - white text on dark backgrounds.

Component Examples

Hero Block Example

FINANCIAL ADVISORY

Business Valuation Excellence

Mercer Capital provides comprehensive business valuation and financial advisory services to help you make informed decisions about your most important transactions.

Complete Typography Scale

Display 1
Display 2
Display 3
Display 4
Display 5

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Regular paragraph text with proper line height and spacing.