oracle banking digital experience · 2019-03-05 · color palette - font colors (secondary) color...

Oracle Banking Digital

Experience User Interface Reference Style Guide

Release 18.1.0.0.0

Part No. E92727-01

January 2018

User Interface Reference Style Guide ii

User Interface Reference Style Guide

January 2018

Oracle Financial Services Software Limited

Oracle Park

Off Western Express Highway

Goregaon (East)

Mumbai, Maharashtra 400 063

India

Worldwide Inquiries:

Phone: +91 22 6718 3000

Fax:+91 22 6718 3001 www.oracle.com/financialservices/

Copyright © 2018, Oracle and/or its affiliates. All rights reserved.

Oracle and Java are registered trademarks of Oracle and/or its affiliates. Other names may be trademarks of their respective owners.

U.S. GOVERNMENT END USERS: Oracle programs, including any operating system, integrated software, any programs installed on the hardware, and/or documentation, delivered to U.S. Government end users are “commercial computer software” pursuant to the applicable Federal Acquisition Regulation and agency-specific supplemental regulations. As such, use, duplication, disclosure, modification, and adaptation of the programs, including any operating system, integrated software, any programs installed on the hardware, and/or documentation, shall be subject to license terms and license restrictions applicable to the programs. No other rights are granted to the U.S. Government.

This software or hardware is developed for general use in a variety of information management applications. It is not developed or intended for use in any inherently dangerous applications, including applications that may create a risk of personal injury. If you use this software or hardware in dangerous applications, then you shall be responsible to take all appropriate failsafe, backup, redundancy, and other measures to ensure its safe use. Oracle Corporation and its affiliates disclaim any liability for any damages caused by use of this software or hardware in dangerous applications.

This software and related documentation are provided under a license agreement containing restrictions on use and disclosure and are protected by intellectual property laws. Except as expressly permitted in your license agreement or allowed by law, you may not use, copy, reproduce, translate, broadcast, modify, license, transmit, distribute, exhibit, perform, publish or display any part, in any form, or by any means. Reverse engineering, disassembly, or decompilation of this software, unless required by law for interoperability, is prohibited.

The information contained herein is subject to change without notice and is not warranted to be error-free. If you find any errors, please report them to us in writing.

This software or hardware and documentation may provide access to or information on content, products and services from third parties. Oracle Corporation and its affiliates are not responsible for and expressly disclaim all warranties of any kind with respect to third-party content, products, and services. Oracle Corporation and its affiliates will not be responsible for any loss, costs, or damages incurred due to your access to or use of third-party content, products, or services.

http://www.oracle.com/financialservices/

User Interface Reference Style Guide iii

Table of Contents

1. Preface ................................................................................................................................................. 4 1.1 Intended Audience ........................................................................................................................ 4

1.2 Documentation Accessibility ......................................................................................................... 4

1.3 Access to Oracle Support ............................................................................................................. 4

1.4 Structure ........................................................................................................................................ 4

2. Primary Elements ............................................................................................................................... 5 3. Specific Elements ............................................................................................................................. 14

3.1 Font Icons .................................................................................................................................... 14

4. Common Components ..................................................................................................................... 20 5. Mobile Screens ................................................................................................................................. 26

Preface

User Interface Reference Style Guide 4

1. Preface

1.1 Intended Audience

This document is intended for the following audience:

Customers

Partners

1.2 Documentation Accessibility

For information about Oracle's commitment to accessibility, visit the Oracle Accessibility Program

website at http://www.oracle.com/pls/topic/lookup?ctx=acc&id=docacc.

1.3 Access to Oracle Support

Oracle customers have access to electronic support through My Oracle Support. For information, visit

http://www.oracle.com/pls/topic/lookup?ctx=acc&id=info or visit

http://www.oracle.com/pls/topic/lookup?ctx=acc&id=trs if you are hearing impaired.

1.4 Structure

This manual includes reference user interface style guide for Desktop, Tablet and Mobile.

It covers screen layout and UI components details.

http://www.oracle.com/pls/topic/lookup?ctx=acc&id=docacc

Primary Elements


2. Primary Elements

Grid

The application follows a responsive bootstrap grid system which allows uotp 12 columns acoss the page. All the designs are created within and around the grid and breakpoints. They have a minimum of 10px outer margin

Why 1200?

The modern monitors (mostly wide-screen) support at least 1280 x 1024 pixel resolution.

1200 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 40, 48, 60, 80, 120, 150,

200, 240 and 400. This makes it a highly flexible base number to work with.

Desktop

Grid size: 1366px, 12 column

Maximum width: Website locks at 1400px

Tablet

Grid size: 768px, 12 column

Maximum width: Website locks at 1400px

Phone

Comp size: 320px, 12 column

Grids are used to structure the page layout. They allows elements to be aligned horizontally and vertically, which creates columns that keep things organized. Optimal spacing, type sizes and layout relationships should be maintained throughout.

The following grid examples show the transition from desktop designs to tablet and down to phone.

Note: Some images in the style guide have been reduced in size to fit the dimensions of this guide’s layout.

Primary Elements


Grid Details

Grid Example

Primary Elements


Primary Elements


Color Palette

Primary Elements


Typography

Family

Lato, a free google font, has been set for the type. The following weights for the font have been used: Light, Regular, Italic Regular, Bold.

Lato Specimens

Lato Light

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*

Lato Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*5

Lato Bold


Lato Italic Regular


Color Palette - Font Colors (generic)

Primary Elements


Color Palette - Font Colors (secondary)

Color Palette - Font Colors (exceptional)

Typographgy Styles

Below are visual examples of specific text items styled throughout the site. The specs apply for both desktop and mobile, unless otherwise mentioned.

Primary Elements


Page Title Body (on light)

Manage Account

DesktopLato Bold | 18px | #333333

Mobile Lato Light | 16px | #333333

Principal Liquidation

DesktopLato Regular | 14px | #333333

Mobile Lato Regular | 14px | #333333.

Card Title Sub Heading (on light)

Quick Access

Desktop Lato Bold | 18px | #333333

Mobile Lato Light | 16px | #333333

Holding Pattern

Desktop Lato R | 13px | #333333 70%

Mobile Lato R | 13px | #333333 70%

Info Heading Body (on dark)

Account Information

Desktop Lato Regular | 16px | #333333

Mobile Lato Regular | 16px | #333333

Principal Liquidation

Desktop Lato Regular | 14px | #ffffff

Mobile Lato Regular | 14px | #ffffff

Text Links Sub - Heading (on dark)

Back to Dashboard

Desktop Lato R | 14px | #0070BF

Mobile Lato R | 14px | #0070BF

Holding Pattern

Desktop Lato R | 13px | #ffffff

Mobile Lato R | 13px | #ffffff

Table Header Breadcrums (inactive text)

Amount Name / Number


Mobile Lato R | 13px | #333333 70%

My Accounts > Savings


Mobile Lato R | 13px | #333333 70%

Primary Elements


Button Style

Primary Button

Secondary Button

Primary Elements


Tertiary Button

Home

Specific Elements


3. Specific Elements

3.1 Font Icons

Specific Elements


Icons

Specific Elements


Specific Elements


Colored Icons

Colored Icons

Specific Elements


Specific Elements


Header & Footer

Breadcrumbs

Home

Specific Elements


4. Common Components

Form Fields, Dropdowns & Button Types

Specific Elements


Cards / Widgets

Specific Elements


Placeholder Cards / Widgets

Specific Elements


Transaction Pages

Modal Window

Specific Elements


Accordions

Specific Elements


Review Page

Confirmation Page

Home

Mobile Screens


5. Mobile Screens

Mobile Cards

Mobile Screens


Mobile Inside Page

Mobile Screens


Mobile Overlay

Home

oracle banking digital experience · 2019-03-05 · color palette - font colors (secondary) color...

Documents