>

eSuite: StyleguideLast modified:

Font Families


Common Text

Page Heading

Sample Code

Font: Function Pro Light, 32 pixels, #333333 / Prefix: #999999

Intro Paragraph

Sample Code

Font: Arial, 13 pixels, #333333

Color Palettes

Ameriprise Financial

#0d5fa0 #0e3c61 #164e7b

Bank of America CDG

#3366cc #3366cc #6699ff

Bank of America GCD

#3366cc #3366cc #6699ff

Bank of America BB

#3366cc #3366cc #6699ff

CIBC

#bd151e #67533a #8b7253

Chase Private Client

#4f98d8 #beccde #d9e5f4

HNW

#33b6e4 #667887 #8b9dac

HSBC

#cc0000 #990000 #6d0000

JP Morgan

#596607 #70452e #955d40

Merrill Lynch

#006db0 #006db0 #0082be

Morgan Stanley

#0099cc #154073 #25538b

Morgan Stanley / Smith Barney

#0099cc #154073 #1e5ba2

Private Banking & Investment Group

#015da1 #002b58 #003d7c

PNC

#1166ae #000000 #ff9922

UBS

#eb1003 #5d554c #7b7063

US Trust

#857363 #857363 #ac9886

Wells Fargo Advisors

#b41630 #caa66a #e2bf84


Buttons

Primary Button

Primary buttons are used for the principal or top-level intended action of the page including submits, updates, distributions, disclaimer confirmations and edits.
Sample Code

Font: 13px, Arial, Bold, #ffffff / Background: Inherited from client skin, under "Background - Gradient"

Primary Button (with Icon)

Icons lend an extra identifier to the primary action button of the page.
Sample Code

Font: 13px, Arial, Bold, #ffffff / Background: Inherited from client skin, under "Background - Gradient"

Neutral Button

Neutral buttons are used for anscilary actions and groups of buttons. Examples include Updating Changes, Saving, Sending Tests and Previews.
Sample Code

Font: 13px, Arial / Background: #f2f2f2 » #ffffff / Text Color: Inherited from client skin, under "Color - Links"

Neutral Button (with Icon)

Icons lend an extra identifier to the anscilary action buttons of the page.
Sample Code

Font: 13px, Arial / Background: #f2f2f2 » #ffffff / Text Color: Inherited from client skin, under "Color - Links"

Neutral Button (Small)

Used in areas requiring a tighter fit such as in table headings.
Sample Code

Font: 13px, Arial / Background: #f2f2f2 » #ffffff / Text Color: Inherited from client skin, under "Color - Links"

Neutral Button (Small with Icon)

Used in areas requiring a tighter fit such as in table headings. Icons lend an extra identifier to the anscilary action buttons of the page.
Sample Code

Font: 13px, Arial / Background: #f2f2f2 » #ffffff / Text Color: Inherited from client skin, under "Color - Links"

Cancel Button

Used for actions requiring dismissal such as "Cancel" or "Disagree". May also be used to return to a previous page.
Sample Code

Font: 13px, Arial, #999999, Underlined

Iconography

Global Icons

Located in "img/icons/master.png" is a master icon set used throughout the application which includes various states (colors) of each icon for hovers, active and white. (Grey background added to view white icons)

Sample Code

Dimensions: 16 x 16 pixels

Client Icons

Each client has their own set of branded icons replacing the bottom blue row of icons seen above. Each is located in "skins/client/master.png" and is overwritten in their skin's stylesheet.

These icons are used within tables as "Actions", folder types and within "Neutral" buttons.

Sample Code

Dimensions: 16 x 16 pixels

Dashboard Icons

In the Dashboard, each pod has it's own icon giving emphasis to that section of the application.

Sample Code

Dimensions: 128 x 128 pixels

Tables

Table Heading

Sample Code

Font: 18px, Function Pro Book, Normal, #ffffff / Background: Inherited from client skin, under "Background - Gradient"

Table Buttons

Sample Code

See Neutral Button (Small)

Table Subheading

Sample Code

Font: 16px, Function Pro Book / Background: #f2f2f2 / Text Color: Inherited from client skin, under "Color - Links"

Table Subheading (Ascending)

Sample Code

Font: 16px, Function Pro Book / Background: #f2f2f2 / Text Color: Inherited from client skin, under "Color - Links"

Table Subheading (Descending)

Sample Code

Font: 16px, Function Pro Book / Background: #f2f2f2 / Text Color: Inherited from client skin, under "Color - Links"

Table Data

Sample Code

Font: 13px, Arial, #333333

Table Actions

Sample Code

Dimensions: 16 x 16 pixels

Masthead

Logo

Sample Code

Maximum Width: 600 pixels / Height 60 pixels

User Tools

Sample Code

Font: 12 Pixel, Arial, #666666 / Icons: 16 pixels wide x 16 pixels high

Main Menu

Sample Code

Font: 15 Pixel, Function Pro Book, #D1D5D8 / Background: #1f282e


Sample Code

Border: #33b6e4, 3 Pixels / Color: #868d92

Breadcrumb Trail

Sample Code

Font: 11 Pixel, Arial, #33b6e4 / Inactive: #999999

Column Menus

Widget Heading

Sample Code

Font: Function Pro Book, 16 pixels, #ffffff / Background: #667887

Widget Heading: Collapse

Sample Code

Font: Function Pro Book, 16 pixels, #ffffff / Background: #667887

Widget Heading: Expand

Sample Code

Font: Function Pro Book, 16 pixels / Color: #ffffff / Background: #667887

Widget Branded: Link

Sample Code

Font: Arial, 12 pixels / Color: #33b6e4

Widget Branded: Link with Icon

Sample Code

Font: Arial, 12 pixels / Color: #33b6e4

Widget Branded: Active

Sample Code

Font: Arial, 12 pixels / Color: #33b6e4

Widget: Link

Sample Code

Font: Arial, 12 pixels, #666666

Widget: Link with Icon

Sample Code

Font: Arial, 12 pixels, #666666

Widget: Link with Count

Sample Code

Font: Arial, 12 pixels, #666666

Dashboard

Dashboard Structure

Dashboard Pods

Sample Code

Width: 344px / Height: 150px (additional classes are "podContacts", "podReports", "podSettings" and "podUrl".

Dashboard Pod Title

Sample Code

Font: 22px, Function Pro Book, Normal / Text Color: Inherited from client skin, under "Color - Links"

Dashboard Pod Description

Sample Code

Font: 13px, Arial, Normal, #333333

Counter

Sample Code

Background: Inherited from client skin, under "Background - Gradient".

To change the numbers of the display, update the number after the hyphen.

Counter: Split-Flap

Sample Code

Background: Inherited from client skin, under "Background - Gradient".

To change the numbers of the display, update the number after the hyphen.

Counter: Text

Sample Code

Font: 12px, Arial, Bold, Uppercase, #ffffff

Counter: Button

Sample Code

Font: 12px, Arial, Normal / Text Color: Inherited from client skin, under "Color - Links" / Background: #ffffff

New Content

Sample Code

New Content: Heading

Sample Code

Font: 16px, Function Pro Book, Normal, #ffffff / Background: Inherited from client skin, under "Background - Gradient".

New Content: Links

Sample Code

Font: 12px, Arial, Normal / Text Color: Inherited from client skin, under "Color - Links"

Recent Deliveries

Sample Code

Recent Deliveries: Heading

Sample Code

Font: 16px, Function Pro Book, Normal, #ffffff / Background: Inherited from client skin, under "Background - Gradient".

Recent Deliveries: Count

Sample Code

Large Number: Font: 36px, Arial, Bold
1st Number: Class = colorLightGrey #cccccc
2nd Number: Class = colorGrey #cccccc
3rd Number: Class = highlight Inherited from client skin under "Color - Headings".

Notations: Font: 11px, Arial
Line 1: Normal, #666666
Line 2: Bold, #666666

Recent Deliveries: Duration

Sample Code

Font: 12px, Arial, Bold

Inactive: Color: #ffffff

Active: Color: Inherited from client skin under "Color - Headings" / Background: #ffffff

Library

Library Structure

Library Pods

Sample Code

Width: 320px / Height: Defined by content.

Library Pod: Thumbnail

Sample Code

Width: 320px / Height: 80px / Image is applied to background inline.

Library Pod: New Banner

Sample Code

Width: 54px / Height: 54px / Span is added within the thumbnail anchor tag

Library Pod: Heading

Sample Code

Font: 18px, Function Pro Book, Normal / Text Color: Inherited from client skin, under "Color - Links"

Library Pod: Description

Sample Code

Font: 12px, Arial, Normal, #333333

Library Pod: Meta

Sample Code

Font: 11px, Arial, Normal, #333333

Library Pod: Channels

Sample Code

Width 16px / Height 16px

Selected State: class = channelSelected

Active State: class = channelActive

Inactive State: class = channelInactive

Library Pod: Subscribe To

Sample Code

Font: 11px, Arial / Background: #f2f2f2 » #ffffff / Text Color: Inherited from client skin, under "Color - Links"

Contacts

Contacts Structure

Bulk Actions

Sample Code

Width: 150px / Used in conjunction with checkboxes. Appears both above and below table.

Search

Sample Code

Width: 125px / Search button is the magnifying glass icon. It overlaps the form field. Appears both above and below table.

Search

Sample Code

Appears both above and below table.

Actions

Sample Code

Each icon is 16 x 16 pixels. In order, the icons represent "Salesforce", "Reports", "Edit" and "Delete".

Icons

Sample Code

Icons appear in left column.

Reports

Reports Structure

Content Buttons

Sample Code

Unused / Font: 12px, Arial, Normal, #ffffff / Background: Inherited from client skin, under "Background - Gradient"

Content Buttons (Active)

Sample Code

Unused / Font: 12px, Arial, Normal, #666666 / Background: #ffffff

Duration Buttons

Sample Code

Unused / Font: 12px, Arial, Bold / Background: #ffffff » #f2f2f2 / Text Color: Inherited from client skin, under "Color - Links"

Duration Buttons (Active)

Sample Code

Unused / Font: 12px, Arial, Bold / Background: Inherited from client skin, under "Color - Links"

Settings

Settings Structure Review

Column Heading

Sample Code

Font: 15px, Arial, Bold, #667887 (Must be within "columnSettings" dev)

Pod Heading

Sample Code

Font: 16px, Function Pro Book, Bold, #ffffff / Background: #667887

Pod Heading (Red)

Sample Code

Font: 16px, Function Pro Book, Bold, #ffffff / Background: #cc0033

Pod Text

Sample Code

Font: 13px, Arial, Normal, #333333

Settings Structure

Font Families

Common Text

Color Palettes

Buttons

Tables

Iconography

Masthead

Column Menus

Dashboard

Library

Contacts

Reports

Settings

 

 

Close