Style
Typography
Typeface & Color
Arial is the default typeface, with a line-height of 1.42857143 (10:7). If a financial institution has selected a Heading font in Admin Platform, Heading 1 will display in their selected font.
Text colors are Hex #333333 or #666666. The default is #333333. To use text that is #666666, apply the class text-light. These colors meet level AA of WCAG 2.0 when used on a white background or light gray (#ededed) background.
Heading 1 Arial 28px #333333, line-height 40px
Heading 2 Arial 24px #333333, line-height 34px
Heading 3 Arial 18px #333333, line-height 26px
Main font size Arial 16px #333333 or Arial #666666, line-height 23px
For long paragraph Arial 14px #666666, line-height 20px
Legal text Arial 13px #666666, line-height 19px
Links (#0055CC in case of FI then FI Color) inherit the size of body font size.
Success Heading Arial 24px #2E6F03
Success messages Arial 14px #2E6F03
Error messages 14px #C90202
Typography by resolution
| Screen size | Heading 1 | Heading 2 | Heading 3 | Body text | Small | Legal |
| Large | 28px | 24px | 18px | 16px | 14px | 13px |
| Medium | 28px | 24px | 18px | 16px | 14px | 13px |
| Small | 28px | 24px | 18px | 16px | 14px | 13px |
| XS | 24px | 22px | 16px | 14px * | 14px | 13px |
* If the specifcations call for a constant font size across all break points then use the class: constant-font-size, Ex.: <body class="constant-font-size">
Color
Color Palette
To better coordinate with any financial institution’s color scheme, Leapfrog primarily uses a grayscale palette. Links and icons are defaulted to use #0055CC. The default application is designed to level AA of WCAG 2.0. The FI may specify the primary accent color for Online Banking. Details are covered in the Branding section.
Default color palette:
#333333
#666666
#CCCCCC
#EDEDED
#0055CC
Example:
These are the standard colors used for messaging. These cannot be overriden with branding values that a financial Institution selects.
It is suggested you use these colors where ever possible for elements that are meant for messaging or drawing attention.
#2E6F03
#C90202
#E0EAD9
#FFE7E5
#FFF8E5
#EDEDED
Examples:
Accessibility
- For all colors selected, when be tested against a white background (#FFFFFF) and the light gray callout background (#EDEDED), the contrast ratio should meet level AA of WCAG 2.0.
- Here is a site that offers a way to test and adjust colors: http://snook.ca/technical/colour_contrast/colour.html
Branding
Financial Institutions may select accent colors for Online Banking. These choices override the default colors for links, icons, controls and other elements. To maintain visual contrast consistent with the application’s defaults, selected colors need to meet level AA of Web Content Accessibility Guidelines 2.0. Digital Insight’s Admin Platform branding tool assesses the contrast ratios of solid colors, and this site offers a way to test and adjust foreground and background colors: http://snook.ca/technical/colour_contrast/colour.html.
Default example
FI color example
