oracle banking digital experience · 2019-03-05 · color palette - font colors (secondary) color...
TRANSCRIPT
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.
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.
Primary Elements
User Interface Reference Style Guide 5
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
User Interface Reference Style Guide 6
Grid Details
Grid Example
Primary Elements
User Interface Reference Style Guide 7
Primary Elements
User Interface Reference Style Guide 8
Color Palette
Primary Elements
User Interface Reference Style Guide 9
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
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*
Lato Italic Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*
Color Palette - Font Colors (generic)
Primary Elements
User Interface Reference Style Guide 10
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
User Interface Reference Style Guide 11
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
Desktop Lato R | 13px | #333333 70%
Mobile Lato R | 13px | #333333 70%
My Accounts > Savings
Desktop Lato R | 13px | #333333 70%
Mobile Lato R | 13px | #333333 70%
Primary Elements
User Interface Reference Style Guide 12
Button Style
Primary Button
Secondary Button
Primary Elements
User Interface Reference Style Guide 13
Tertiary Button
Home
Specific Elements
User Interface Reference Style Guide 14
3. Specific Elements
3.1 Font Icons
Specific Elements
User Interface Reference Style Guide 15
Icons
Specific Elements
User Interface Reference Style Guide 16
Specific Elements
User Interface Reference Style Guide 17
Colored Icons
Colored Icons
Specific Elements
User Interface Reference Style Guide 18
Specific Elements
User Interface Reference Style Guide 19
Header & Footer
Breadcrumbs
Home
Specific Elements
User Interface Reference Style Guide 20
4. Common Components
Form Fields, Dropdowns & Button Types
Specific Elements
User Interface Reference Style Guide 21
Cards / Widgets
Specific Elements
User Interface Reference Style Guide 22
Placeholder Cards / Widgets
Specific Elements
User Interface Reference Style Guide 23
Transaction Pages
Modal Window
Specific Elements
User Interface Reference Style Guide 24
Accordions
Specific Elements
User Interface Reference Style Guide 25
Review Page
Confirmation Page
Home
Mobile Screens
User Interface Reference Style Guide 26
5. Mobile Screens
Mobile Cards
Mobile Screens
User Interface Reference Style Guide 27
Mobile Inside Page
Mobile Screens
User Interface Reference Style Guide 28
Mobile Overlay
Home