about

This style guide is intended to serve as a best practices reference tool and a repository for design guidelines and standards. It will help you design a consistent, usable template and communicate your message more clearly.

As you’ll see, combining pre-defined visual styles, UX elements and a responsive grid system will result in a cohesive experience for users regardless of where they are in the Next Generation Business Bill Pay Product.

colors

Colors give the template clarity and consistency. The look, feel and usability of the template relies heavily on using a handful of specific colors, which help convey meaning and purpose.

Click on a color to copy HEX code.


Action Item Colors

#999999
#3498db
#00b16a
#6BB9F0
#e67e22
#c0392b


Text and Background Colors

#666666
#cccccc
#dddddd
#f0efef

grid

The grid is fairly standard. Simply create rows with .columns and individual columns with a column class and fraction class. Here’s how it works:

Add a .container class to wrap everything and provide you with sufficient horizontal gutter space.

Create your outer row to clear the floated columns with <div class="columns">.

Add your columns with individual <div class="columns"> .

Add your fractional width classes to set the width of the columns (e.g., .one-fourth).

The default grid system is 12 columns at a width of 940px. See the chart below and the grid examples for more details (including smartphone sizing).


Default Bootstrap Grid

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

Recommended Grid

When used with left navigation. ( 2 - 6 - 4 )

.col-md-2
.col-md-6
.col-md-4

When used with right navigation. ( 4 - 6 - 2 )

.col-md-4
.col-md-6
.col-md-2

When used with top navigation. ( 8 - 4 )

.col-md-8
.col-md-4

typography

Using a crisp, readable screen font invites readers into a page and helps you deliver a clear and direct message.

For optimum readability, use Arial, sans serif – Regular for body copy, and lower priority headings (h2, h3, h4, h5, h6).

It complements Arial Bold, which is strictly used for page headings (h1), top-level content headings and in graphics. Please do not use it for any body copy.

Also, use typography to create a visual hierarchy on the page. This helps users understand which messages are most important.

Font

Arial, sans-serif; - Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%&*


Arial, sans-serif; - Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%&*


Arial, sans-serif; - Italic

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%&*


Text Sizes

Page Title: Arial regular; 30px

.bp_pageTitle{
  font-family: Arial,sans-serif; 
  font-weight: normal;
  font-size: 30px;
}

Breadcrumbs: Arial regular; 18px

.bp_breadcrumbs{
  font-family: Arial,sans-serif; 
  font-weight: normal;
  font-size: 18px;
}

Navigation: Arial regular; 16px

.bp_navigation{
  font-family: Arial,sans-serif; 
  font-weight: normal;
  font-size: 16px;
}

Module Header: Arial bold; All caps; 18px

.bp_moduleHeader{
  font-family: Arial,sans-serif; 
  font-weight: normal;
  font-size: 18px;
  text-transform: uppercase;
}

Module Subhead: Arial bold; 16px

.bp_moduleSubhead{
  font-family: Arial,sans-serif; 
  font-weight: bold;
  font-size: 16px;
}

Module Body Copy: Arial regular; 14px

.bp_moduleBodyCopy{
  font-family: Arial,sans-serif; 
  font-weight: normal;
  font-size: 14px;
}

Form Fields: Arial regular; 14px

.bp_formFields{
  font-family: Arial,sans-serif; 
  font-weight: normal;
  font-size: 14px;
}
.bp_link{
  font-family: Arial,sans-serif; 
  font-weight: normal;
  font-size: 14px;
  text-decoration: underline;
}

Announcements Banner Headline – Arial regular; 24px.

.bp_announcementsHeadline{
  font-family: Arial,sans-serif; 
  font-weight: normal;
  font-size: 24px;
}

Announcements Banner Body – Arial regular; 14px

.bp_announcementsBody{
  font-family: Arial,sans-serif !important; 
  font-weight: normal;
  font-size: 14px;
}

Activity Module Date Heading – Arial regular; 21px

.bp_activityDateHeading{
  font-family: Arial,sans-serif !important; 
  font-weight: normal;
  font-size: 21px;
}

Activity Module Body – Arial regular; 14px

.bp_activityDateBody{
  font-family: Arial,sans-serif !important; 
  font-weight: normal;
  font-size: 14px;
}

announcements

Usage Notes

Copy Source
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        <li data-target="#carousel-example-generic" data-slide-to="4"></li>
        <li data-target="#carousel-example-generic" data-slide-to="5"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <div class="announcement-message">
            <h3>System maintenance 10-5-15</h3>
            <p>Business online banking will be down on 10-5-15 for maintenance.</p>
          </div>
        </div>
        <div class="item">
          <div class="announcement-message">
            <h3>System maintenance 10-5-15</h3>
            <p>Business online banking will be down on 10-5-15 for maintenance.</p>
          </div>
        </div>
        <div class="item">
          <div class="announcement-message">
            <h3>System maintenance 10-5-15</h3>
            <p>Business online banking will be down on 10-5-15 for maintenance.</p>
          </div>
        </div>
        <div class="item">
          <div class="announcement-message">
            <h3>System maintenance 10-5-15</h3>
            <p>Business online banking will be down on 10-5-15 for maintenance.</p>
          </div>
        </div>
        <div class="item">
          <div class="announcement-message">
            <h3>System maintenance 10-5-15</h3>
            <p>Business online banking will be down on 10-5-15 for maintenance.</p>
          </div>
        </div>
        <div class="item">
          <div class="announcement-message">
            <h3>System maintenance 10-5-15</h3>
            <p>Business online banking will be down on 10-5-15 for maintenance.</p>
          </div>
        </div>
      </div>
    </div>

buttons

Buttons should always contain actions. The language should be active, clear and concise. Capitalize the first letter of every word, including articles. It’s OK to use an ampersand in button copy if necessary.

Standard buttons in the template include:

  • Default
  • Primary
  • Success
  • Info
  • Warning
  • Danger

Button Sizes

Usage Notes

Copy Source
<p>Buttons should always contain actions. The language should be active, clear and concise. Capitalize the first letter of every word, including articles. It’s OK to use an ampersand in button copy if necessary.</p>

<p>Standard buttons in the template include:</p>
<ul>
  <li>Default</li>
  <li class="primary">Primary</li>
  <li class="success">Success</li>
  <li class="info">Info</li>
  <li class="warning">Warning</li>
  <li class="danger">Danger</li>
</ul>

<p>
  <!-- Standard button -->
  <button type="button" class="btn btn-default">Default</button>

  <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
  <button type="button" class="btn btn-primary">Primary</button>

  <!-- Indicates a successful or positive action -->
  <button type="button" class="btn btn-success">Success</button>

  <!-- Contextual button for informational alert messages -->
  <button type="button" class="btn btn-info">Info</button>

  <!-- Indicates caution should be taken with this action -->
  <button type="button" class="btn btn-warning">Warning</button>

  <!-- Indicates a dangerous or potentially negative action -->
  <button type="button" class="btn btn-danger">Danger</button>
</p>
<h3 class="sg-h3 subhead">Button Sizes</h3>
<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<!--<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>-->

data

Payments
125
Transfers
85
Send Money
36

Usage Notes

Copy Source
<canvas id="myChart" width="400" height="400"></canvas>

<div class="progress">
  <div class="progress-bar-data-1 data-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;">
    Payments
    <div class="data-display" id="data-1">125</div>
  </div>
</div>
<div class="progress">
  <div class="progress-bar-data-2 data-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    Transfers
    <div class="data-display" id="data-2">85</div>
  </div>
</div>
<div class="progress">
  <div class="progress-bar-data-3 data-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
    Send Money
    <div class="data-display" id="data-3">36</div>
  </div>
</div>

feedback

Warning Message! Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Error Message! Numquam quos fuga quam suscipit sapiente perferendis magnam.
Success Message! Totam officiis dolorum voluptatibus maxime molestiae iste.
Info Message! Consequatur facere deleniti cumque ducimus maiores nemo.

Usage Notes

Copy Source
<div class="alert alert-warning alert-dismissible">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning Message!</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
</div>

<div class="alert alert-danger alert-dismissible">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Error Message!</strong> Numquam quos fuga quam suscipit sapiente perferendis magnam. 
</div>

<div class="alert alert-success alert-dismissible">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Success Message!</strong> Totam officiis dolorum voluptatibus maxime molestiae iste.
</div>

<div class="alert alert-info alert-dismissible">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Info Message!</strong> Consequatur facere deleniti cumque ducimus maiores nemo.
</div>

forms

Usage Notes

Copy Source

<form class="form-inline">
 <input type="text" class="form-control" placeholder="Text field" style="width: 120px">
 <input type="password" class="form-control" placeholder="$0.00" style="width: 120px">
 <select class="form-control" style="width: 120px">
  <option>Payee</option>
  <option>Payee</option>
  <option>Payee</option>
  <option>Payee</option>
  <option>Payee</option>
</select>
<div class="form-group">
  <div class="date" style="width: 130px">
      <div class="input-group input-append date" id="datePicker">
          <input type="text" class="form-control" placeholder="Date field" name="date"  />
          <span class="input-group-addon add-on"><div class="icon-calendar-dark form-icon"></div></span>
      </div>
  </div>
</div>
</form>

icons

Primary Icons

Add eBill
Apps
Attachment
Bill Simple
eBill Available
eBill Warning
Send Money
Search
Payees
Payments
Payroll
Calendar
Rush Delivery
Timeline
My Company
Reminders
Recurring Payment
Transfers
Dashboard
 

Secondary Icons

Edit
Filter
Print
Arrow
Delete
     

Usage Notes

Copy Source
<h3 class="sg-h2">Primary Icons</h3>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" width="25%">
      <div class="icon-addebill sg-icons icon-default"></div>
      <div class="icon-label">Add eBill</div>
    </td>
    <td align="center" width="25%">
      <div class="icon-apps sg-icons icon-default"></div>
      <div class="icon-label">Apps</div>
    </td>
    <td align="center" width="25%">
      <div class="icon-attachment sg-icons icon-default"></div>
      <div class="icon-label">Attachment</div>
    </td>
    <td align="center" width="25%">
      <div class="icon-billsimple sg-icons icon-default"></div>
      <div class="icon-label">Bill Simple</div>
    </td>    
  </tr>
  <tr>
    <td align="center">
      <div class="icon-ebillavailable sg-icons icon-default"></div>
      <div class="icon-label">eBill Available</div>
    </td>
    <td align="center">
      <div class="icon-ebillwarning sg-icons icon-default"></div>
      <div class="icon-label">eBill Warning</div>
    </td>
    <td align="center">
      <div class="icon-sendmoney sg-icons icon-default"></div>
      <div class="icon-label">Send Money</div>
    </td>
    <td align="center">
      <div class="icon-search sg-icons icon-default"></div>
      <div class="icon-label">Search</div>
    </td>   
  </tr>
  <tr>
    <td align="center">
      <div class="icon-payees sg-icons icon-default"></div>
      <div class="icon-label">Payees</div>
    </td>
    <td align="center">
      <div class="icon-payments sg-icons icon-default"></div>
      <div class="icon-label">Payments</div>
    </td>
    <td align="center">
      <div class="icon-payroll sg-icons icon-default"></div>
      <div class="icon-label">Payroll</div>
    </td>
    <td align="center">
      <div class="icon-calendar sg-icons icon-default"></div>
      <div class="icon-label">Calendar</div>
    </td>    
  </tr>
  <tr>
    <td align="center">
      <div class="icon-rushdelivery sg-icons icon-default"></div>
      <div class="icon-label">Rush Delivery</div>
    </td>
    <td align="center">
      <div class="icon-timeline sg-icons icon-default"></div>
      <div class="icon-label">Timeline</div>
    </td>
   
    <td align="center">
      <div class="icon-mycompany sg-icons icon-default"></div>
      <div class="icon-label">My Company</div>
    </td>
    <td align="center">
      <div class="icon-reminders sg-icons icon-default"></div>
      <div class="icon-label">Reminders</div>
    </td>
  </tr>
  <tr>
    <td align="center">
      <div class="icon-recurringpayment sg-icons icon-default"></div>
      <div class="icon-label">Recurring Payment</div>
    </td>
    <td align="center">
      <div class="icon-transfers sg-icons icon-default"></div>
      <div class="icon-label">Transfers</div>
    </td>
    <td align="center">
      <div class="icon-dashboard sg-icons icon-default"></div>
      <div class="icon-label">Dashboard</div>
    </td>
    <td>&nbsp;</td>
  </tr>
</table>
<h3 class="sg-h2">Secondary Icons</h3>
<table width="100%" border="0" cellspacing="0" cellpadding="0">

  <tr> 
    <td align="center">
      <div class="icon-edit-dark sg-icons icon-dark"></div>
      <div class="icon-label">Edit</div>
    </td>
    <td align="center">
      <div class="icon-filter-dark sg-icons icon-dark"></div>
      <div class="icon-label">Filter</div>
    </td>
    <td align="center">
      <div class="icon-print-dark sg-icons icon-default-dark"></div>
      <div class="icon-label">Print</div>
    </td>
    <td align="center">
      <div class="icon-arrow-dark sg-icons icon-dark"></div>
      <div class="icon-label">Arrow</div>
    </td>   
  </tr>

  <tr>
    <td align="center">
      <div class="icon-delete-dark sg-icons icon-dark"></div>
      <div class="icon-label">Delete</div>
    </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
 
</table>

navigation

Usage Notes

Copy Source
<!-- vertical Nav -->
<div class="container">
<div class="row">
  <div class="col-sm-3">
    <div class="sidebar-nav">
      <div class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <span class="visible-xs navbar-brand">Sidebar menu</span>
        </div>
        <div class="navbar-collapse collapse sidebar-navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active">
              <a href="#">
                <span class="iconlink icon-dashboard"></span>
                <span class="nav-label">Dashboard</span>
              </a>
            </li>
            <li>
              <a href="#">
                <span class="iconlink icon-payments"></span>
                <span class="nav-label">Payments</span>
              </a>
            </li>
            <li>
              <a href="#">
                <span class="iconlink icon-payees"></span>
                <span class="nav-label">Payees</span>
              </a>
            </li>
            <li>
              <a href="#">
                <span class="iconlink icon-payroll"></span>
                <span class="nav-label">Payroll</span>
              </a>
            </li>
            <li>
              <a href="#">
                <span class="iconlink icon-timeline"></span>
                <span class="nav-label">Timeline</span>
              </a>
            </li>
            <li>
              <a href="#">
                <span class="iconlink icon-mycompany"></span>
                <span class="nav-label">My Company</span>
              </a>
            </li>
            <li>
              <a href="#">
                <span class="iconlink icon-apps"></span>
                <span class="nav-label">Apps</span>
              </a>
            </li>
            <li>
              <a href="#">
                <span class="iconlink icon-billsimple"></span>
                <span class="nav-label">Bill Simple</span>
              </a>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
  </div>
  <div class="col-sm-9">
    <!--Main content goes here-->
  </div>
</div>
</div><!-- admin Nav -->
<nav class="navbar" role="navigation" style="border-bottom: none;">
  <h3 class="sg-h2">Admin Navigation</h3>
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>  
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li class="pipe">|</li>
        <li><a href="#">Link</a></li>
        <li class="pipe">|</li>
        <li class="dropdown">

          <a href="#" class="dropdown-toggle nav-alert-box" data-toggle="dropdown">Dropdown <b class="caret"></b><span class="nav-alert"><div id="notification-total">6</div></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<!-- breadcrumbs-->
<h3 class="sg-h2">Breadcrumbs</h3>
<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

page header

Usage Notes

Copy Source
<div class="page-header">
  <h1 class="bp_pageTitle">Example page header</h1>
</div>

panels

Panel title

Panel content

Usage Notes

Copy Source
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

tables

Checking Balance
Account ...0061
Account ...9786
$525.72
$1,000.83
Savings Balance
Account ...0081
Account ...0086
$3,525.72
$1,500.83
Visa Balance
Account ...1075 $327.15

Usage Notes

Copy Source
<table class="table table-striped">
  <tbody>
    <tr>
      <td>
        <table class="table table-condensed sg-table">
          <thead>
            <tr>
              <th width="60%">Checking</th>
              <th>Balance</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Account ...0061<br/>Account ...9786</td>
              <td>$525.72<br/>$1,000.83</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table class="table table-condensed sg-table">
          <thead>
            <tr>
              <th width="60%">Savings</th>
              <th>Balance</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Account ...0081<br/>Account ...0086</td>
              <td>$3,525.72<br/>$1,500.83</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>
      <table class="table table-condensed sg-table">
          <thead>
            <tr>
              <th width="60%">Visa</th>
              <th>Balance</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Account ...1075</td>
              <td>$327.15</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

tabs

Payments...

Send Money...

Transfers...

Usage Notes

Copy Source
<ul class="nav nav-tabs" id="sg-tabs">
  <li class="active">
    <a href="#payments" aria-controls="payments" role="tab" data-toggle="tab">
      Payments
    </a>
  </li>
  <li>
    <a href="#send-money" aria-controls="send-money" role="tab" data-toggle="tab">
      Send Money
    </a>
  </li>
  <li>
    <a href="#transfers" aria-controls="transfers" role="tab" data-toggle="tab">
      Transfers
    </a>
  </li>
</ul>
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="payments">
    <h4>Payments...</h4>
  </div>
  <div role="tabpanel" class="tab-pane" id="send-money">
    <h4>Send Money...</h4>
  </div>
  <div role="tabpanel" class="tab-pane" id="transfers">
    <h4>Transfers...</h4>
  </div>
</div>

tooltip


Usage Notes

Copy Source
<div style="text-align: center;"><button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button><br/>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top" style="margin-top: 60px;">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom" style="margin-top: 60px;">
  Tooltip on bottom
</button>


</div>