Fifth Third Bank Style Guide Library.

Fifth Third Bank Style Guide includes the resources to create user interfaces consistent with Fifth Third's principles, design language, and best practices. Rather than focusing on pixels, developers can focus on application logic, while designers can focus on user experience, interactions, and flows.

About

This site provides a range of resources for designers and developers, which includes:

  • semantic and accessible component markup
  • cross-browser compatible CSS
  • icons, font, and design guidelines

Browser Support

This site provides a range of browser support

  • Chrome 55+
  • FF 50+
  • Internet Explorer 10+
  • Microsoft Edge 14+
  • Safari 10+
  • iOS Safari 10.1
  • Android Browser 53

New to Fifth Third Bank Style Guide?

If you're new to Fifth Third Bank Style Guide check this page out for examples of our components.

Brand Colors

  • $color-brand-blue-primary
    #1D4094
  • $color-brand-blue
    #2c62e3
  • $color-brand-lt-blue
    #6aade4
  • $color-brand-blue
    #e4f2fa

Neautral Colors

  • $color-23
    #333
  • $color-gray-02
    #D8D8D8
  • $color-gray-15
    #F1F1F1
  • $color-gray-35
    #F9F9F9
  • $color-white
    #FFF

Utility Colors

  • $color-utility-green
    #509236
  • $color-utility-lt-green
    #e6eee3
  • $color-utility-error
    #C4022B
  • $color-utility-yellow
    #F1E220

Wam Colors

  • $color-utility-wam-blue
    #485674
  • $color-utility-red
    #E1E7EB
  • $color-utility-lt-blue
    #e4f2fa

Fonts

[Blurb around 53 Fonts]

Open Sans Light
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Open Sans Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Open Sans Semibold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Open Sans Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

[NEED SERIF FONT]

Icons

  • icon-check-reordering e805
  • icon-error e811
  • icon-instant-alerts e820
  • icon-fifth-third-direct e826
  • icon-scheduled-payments e82d
  • icon-facebook-squared e83a
  • icon-down-dir e83b
  • icon-up-dir e83c
  • icon-youtube-play e83f
  • icon-twitter e840
  • icon-linkedin-squared e841
  • icon-gplus-squared e843
  • icon-ok e844
  • icon-down-open-big e845
  • icon-left-open-big e846
  • icon-right-open-big e847
  • icon-up-open-big e848
  • icon-cancel e84b
  • icon-plus-squared-alt e84e
  • icon-minus-squared-alt e84f

Label

Lorem Ipsum

Headings

H1 - 48px / 3rem

H2 - 27px / 1.6875rem

H3 - 20px / 1.25rem

H4 - 16px / 1rem

H5 - 14px / 0.875rem
H6 - 12px / 0.719rem

Headings Content

H1 - 48px / 3rem

H2 - 27px / 1.6875rem

H3 - 20px / 1.25rem

H3 - 20px / 1.25rem

H4 - 16px / 1rem

H5 - 14px / 0.875rem
H6 - 12px / 0.719rem

Headers

Page Header - Open Sans / bold 700, capitalize, h1, #FFF/Inherit

Subheadline

Section Header - Open SansRegular 400, H2, #000000

Product Header - Open Sans Semibold / Semi-bold 600, H3, #1D4094

Product Header - Open Sans Semibold / Semi-bold 600, H3, #1D4094

Paragraph - Open Sans, Regular / Normal 400, h4, #000000

Text

Inline Elements

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

This text is deleted and This text is inserted

This text has a strikethrough

Superscript®

Subscript for things like H2O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variarble element, such as x = y

Paragraph

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Paragraph Disclaimer

The views expressed by the author are not necessarily those of Fifth Third Bank and are solely the opinions of the author. This article is for informational purposes only. It does not constitute the rendering of legal, accounting, or other professional services by Fifth Third Bank or any of their subsidiaries or affiliates, and are provided without any warranty whatsoever. Deposit and credit products provided by Fifth Third Bank.