Typography

ForceManager’s typography is organized to keep things simple and above all, readable. ForceManager’s primary typeface is SF Pro Display. It provides a consistent, legible, and friendly typographic voice.

Primary Typography

SF Pro Display

Alternate Typography

Roboto

ForceManager uses a font stack that adapts to the operating system it runs on, like Windows, iOS, or Android.

  • Apple devices will display San Francisco
  • Android devices will display Roboto
  • Devices running Windows will display Segoe UI
  • Machines running Linux will display the default sans-serif font for any running distribution

Text Weight

SEMIBOLD

SF Pro Display

font-weight: 600;
REGULAR

SF Pro Display

font-weight: 400;
LIGHT

SF Pro Display

font-weight: 200;

Color Text

Primary
  • RGB
  • Web
  • 33 / 37 / 41
  • #212529
Secondary
  • RGB
  • Web
  • 108 / 117 / 125
  • #6C757D
Footer & Nav
  • RGB
  • Web
  • 108 / 117 / 115
  • #ADB5BD
Link & Primary :hover
  • RGB
  • Web
  • 255 / 140 / 0
  • #FF8C00
Link :hover
  • RGB
  • Web
  • 218 / 128 / 0
  • #DA8000
Secondary :hover
  • RGB
  • Web
  • 33 / 37 / 41
  • #212529

Web Typography

Headings
  • H140px2.5 rem
  • H232px2 rem
  • H328px1.75 rem
  • H424px1.5 rem
  • H520px1.25 rem
  • H616px1 rem
  • Heading One
  • Heading Two
  • Heading Three
  • Heading Four
  • Heading Five
  • Heading Six
Body
  • p40px2.5 rem
  • p32px2 rem
  • body28px1.75 rem
  • small24px1.5 rem
  • p20px1.25 rem
  • .htop16px1 rem
  • .htag16px1 rem
  • Lead Text
  • Section Text
  • Body & Navigation
  • Small Text
  • Blog Post
  • Top heading text
  • Top heading tag
Links
  • H140px2.5 rem
  • H232px2 rem
  • H328px1.75 rem
  • H424px1.5 rem
  • H520px1.25 rem
  • H616px1 rem
  • Heading One
  • Heading Two
  • Heading Three
  • Heading Four
  • Heading Five
  • Heading Six
CSS States
  • :hover
  • :hover
  • :hover
  • :active
  • :hover
  • :hover

Pairing

Hero Homepage

We move field sales

Empower your sales team with a mobile assistant
to help them go further.

Hero Pages

Insure your sales team performance

ForceManager helps your team to focus on what really matters: building relationships. Have access to all the information you need including portfolio coverage, policies and real-time interactions between you and your brokers, agencies or agents.

Section Pages

We move field sales

A native application for iOS and Android in the
language of your choice. Access all the sales
information you need on a smart, fast and reliable
application built for the mobile-first world we live in.

Line Height

Headings

font-size: 28px; line-height: 1.2;

List Style

font-size: 18px; line-height: 2;
  • Item List 1
  • Item List 2
  • Item List 3

Paragraph

font-size: 18px; line-height: 1.5;

Typography in documents

A consistent and unified brand maintains its identity in all of its internal and external materials. For a more in-depth guide of typography in different formats, visit the Documents Section.