Oracle Banking APIs · 2019. 3. 5. · Current & Savings $3000.00 Term Deposits $1500.00 Recurring...

Oracle Banking

APIs

Style Guide 2018

Oracle Banking

APIs

Reference User Interface Style GuideRelease 18.2.0.0.0

Part No. E97825-01 | June 2018

Reference User Interface Style GuideJune 2018

Oracle Financial Services Software Limited Oracle ParkOff Western Express HighwayGoregaon (East)Mumbai, Maharashtra 400 063 IndiaWorldwide Inquiries:Phone: +91 22 6718 3000Fax:+91 22 6718 3001www.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.

Preface

Form Fields, Dropdowns & Button Types

3

23

Widgets

Placeholder Cards / Widgets

24

25

Grid

Inside Pages

5

26

Modal Window 27

12 Column Grid

Accordion

6

28

Retail Grid Example

Administrator Grid Example

Color Palette

Review - Confirm

7

8

9

29

Typography

Mobile Dashboard

10

31

Type Color

Mobile Inside Page

11

32

Typography Styles

Mobile Overlay

12

33

Apple Wearable Color Palette

Apple Wearable Typography

Apple Wearable Dynamic Type Size Table

Apple Wearable Screens

35

36

37

38

Button Style 13

Font Icons 16

Colored Icons 20

Header & Footer 21

Table of Contents

Style Guide | June 2018

1.1 Intended Audience

1.2 Documentation Accessibility

1.3 Access to Oracle Support

1.4 Structure

This document is intended for the following audience:

• Customers

• Partners

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

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.

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

It covers screen layout and UI components details.

Preface


PrimaryElements

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.

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. Note:

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

5Style Guide | June 2018

1253px

56px 56px

13.5px 13.5px

27px

80px

1366px

Grids Details


Grids Example (Retail)

7

Welcome, John Doe

Last login 9th Apr 04:23PM

6

Grocery Grocery

Grocery Grocery

Category2 Category2

Category2 Category2

Category2 Category2

My Spendsfrom last 30 days

View All

£36,857.96Total Amount

25%

63%12%

Current & Savings

$3000.00

Term Deposits

$1500.00

Recurring Deposits

$1500.00

I Have

$8000.00

My Networthon 12 Apr 2018

I Have I Owe

02Feb 2018

Payment for phone bill $400 Dr.

02Feb 2018

Payment for phone bill $400 Dr.

02Apr 2018

Payment for mom’s phone bill $400 Dr.

12Mar 2018

Gas for Car $8000.00 Dr.

12Apr 2018


Upcoming Payments

View All Set Repeat Transfer

Recent Activity

Savings 32345678910123

02Feb 2018

Bought grocery from Supermarket

$400 Dr.

12Mar 2018


12Mar 2018


View All

View All

Application for John Doe is waiting for your approval20 Jun12:00 AM

Card payment for credit card XXXXXXXX3452 due20 Jun12:00 AM

Card payment for successful for credit card XXXXXXXX3452

20 Jun12:00 AM

Notifications 6

Reliance EnergyHome Electricity

Pay

Quick Recharge Quick Bill Pay View All Billers

Reliance EnergyHome Electricity

Rs. 899.12 Due on 19th Mar 2018 Overdue

Pay

Mahanagar GasGas Bill

Rs. 500.60 Due on 01 Apr 2018 19 days left

Pay

VodafoneMobile Bill

Rs. 500.60 Due on 01 Apr 2018 Auto Pay

Pay

My Bills5 bills to pay

Current & Savings $23560.93

Loans & Finances $3034.12

Credit CardYou do not have any credit cards

Term Deposits $1489.93

Recurring Deposits $1489.93

My Relationships

Raise New Request Track Request

02Open

03Recently Closed

New Debit Card RequestReference No. : 12345 | Created on 19 Apr 2018

Replace Debit CardReference No. : 12345 | Created on 19 Apr 2018

Service Request

Transfer Money

Manage Payees &Billers

Pay Bills

Request Money

Favourites

View RepeatTransfers

Payments

ZigBank

Get 50% offon your purchase

Shop Now

CHRISTMAS50%

off

ZigBank

Learn More

YOUR ULTIMATE

BUSINESS

SOLUTION

The comprehensive list of

services

Tim Philip Sarah EvansRelationship Manager Service Manager

020120200201 020120200201

[email protected] [email protected]

My Advisors

Copyright © 2006, 2017, Oracle and/or its affiliates. All rights reserved. | Security Information | Terms and Conditions


Grids Example (Administrator)


#EFF3F8 #5F2D61 #FAFAFA #FFFFFF .8 #B71C1C #F3A50C#2E7D32

Background

#594577 #79504b #85395e

Account Cards

#333333 #00838f#006AB5

Icons

#333333 #FFFFFF#006AB5

Text & Links

#333333#00838f

Buttons

#333333 #FFFFFF #D9DFE3 #006AB5

Borders & Outlines

#5FEFEF#FCB300 #FF669E #ff7b6d#14BA92

Special Colors

Color Palette


Typography

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!@#$%^&*

Roboto Light

Roboto Regular


Roboto Bold


Roboto Italic Regular


Roboto Specimens

Family

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

5


Primary Color Sample Text #2c3251

Secondary Color Sample Text #2c3251 | opacity: 70%

Disabled Color Sample Text #2c3251 | opacity: 40%

Links Sample Text #006AB5

Color Palette - Font Colors (generic)

Success Color Sample Text #2E7D32

Error Color Sample Text #B71C1C

Warning Sample Text #f3a50c

Warning Sample Text #f3a50c

Color Palette - Font Colors (secondary)

CASA Sample Text #FECA00

Bulk File Sample Text #6B4AA4

Payee & Biller Sample Text #13B6CF

Trade Finance Sample Text #09A276

Bulk Record Sample Text #FF7D0E

Color Palette - Font Colors (exceptional)


Page Title

Manage Account

Desktop Roboto Bold | 18px | #2c3251

Mobile Roboto Light | 16px | #2c3251

Card Title

Quick Access

Desktop Roboto Bold | 18px | #2c3251

Mobile Roboto Light | 16px | #2c3251

Info Heading

Account Information

Desktop Roboto Regular | 16px | #2c3251

Mobile Roboto Regular | 16px | #2c3251

Body (on light)

Principal Liquidation



Sub Heading (on light)

Holding Pattern

Desktop Roboto R | 13px | #2c3251 70%

Mobile Roboto R | 13px | #2c3251 70%

Body (on dark)

Principal Liquidation



Sub - Heading (on dark)

Holding Pattern

Desktop Roboto R | 13px | #2c3251

Mobile Roboto R | 13px | #2c3251

Text Links

Back to Dashboard

Desktop Roboto R | 14px | #006AB5

Mobile Roboto R | 14px | #006AB5

Table Header

Amount Name / Number



Breadcrums (inactive text)

> My Accounts > Savings




Below are visual examples of specific text items styled throughout the site.

The specs apply for both desktop and mobile, unless otherwise mentioned.

The unit used for fonts is REM where 1rem = 16px.

Typographgy Styles

Button Style

Submit Cancel16px 16px

64px minimum width

2px

rounded

corners

Touchable target height

Submit36px Cancel 48pxtouch target

20px

Primary Button

Submitcolor: #FFFFFFfont-size: 14pxfont-face: Lato-Regular

BG Color: #00838F

Default State

Submit

12% #000000 shade

over the color

Hover State

Submit

Disabled text: 30% #FFFFFF

Disabled button: 12% #FFFFFF

(over the color)

Disabled State

Secondary Button

Cancel



(over the color)

Disabled State

Cancelcolor: #FFFFFFfont-size: 14pxfont-face: Lato-Regular

BG Color: #2C3251 80%

Default State

Cancel

12% #000000 shade

over the color

Hover State

Tertiary Button

Back



(over the color)

Disabled State

Backcolor: #FFFFFFfont-size: 14pxfont-face: Lato-Regular

BG Color: #333333 70%

Default State

Back

12% #000000 shade

over the color

Hover State


SpecificElements

Font Icons

Retail Style Guide | July 2017

Icons

Style Guide | June 2018 16


Icons (contd.)


Colored Icons


Colored Icons

budgetnew-credit-card

eligibility-calculator

scan-to-paycreate-standing-instructions

manage-recipientsrequest-money

favorites

view-statementcheque-book-request

goalsnew-debit-card

pay-bills

pay-to-contactview-standing-instructions

manage-debtorsupcoming-payments

transfer-money

installment-calculatorissue-dd

20

Header (Desktop)

Logout

6

10px 10px

24px

24px

48px

48px

Touchable

target area

Touchable

target area

48px

48px10px 15px

Header (Mobile)

> My Accounts > Savings > A/C No 2336432432433 > Manage AccountDashboard

Breadcrums

Type Spec: Breadcrum Link

Type Spec: Breadcrum (inactive link)10px

10px

10px

Header & Footer

Copyright ©2016 Oracle and/or its affliates. All rights reserved10px

Footer (Desktop)

Type Spec: Body (on dark)Bg Color: #531E56


Common Components

Form Fields, Dropdowns & Button Types

Note:

The specification of text type

for all elements have been

specified under the heading

Type Specification and the

same can be refered from the

Typography section.

The type is centered from top &

bottom of the field.

Form field with drop down

Focus State

Type of Cheque BookCatalogue 1

Type Spec: sub heading (on light)

Type Spec: body (on light)

border: 1px #2C3251opacity: 50%

Form field

Selected Accountxxxxxxxxxxxx0206

25px

10px

Selected Accountxxxxxxxxxxxx0206 border: 1px center #01579B

Hover / Selected State

Selected Accountxxxxxxxxxxxx0206 xxxxxxxxxxxx020

6xxxxxxxxxxxx0123

xxxxxxxxxxxx2345xxxxxxxxxxxx5678

fill: #FFFFFF 5%darker

5px5px fill: #FFFFFF

border: 1px #2C3251 50%

Radio Button -

Default

border: 1px center#2C3251 50%

Radio Button -

Hover

border: 1px center#0070BF

Radio Button -

Selected

fill: #00838F

border: 1px center#2c3251 50%

Radio Button -

Disabled

border: 1px center#2C3251 20%

Toggle Button -

Selected

Number Range

border:4px #00838F

border:1px #00838F

Toggle Button -

Default

Number Range

border: 1px #2C3251 70%radius: 2px

Type spec:Body (on light)

5px

Toggle Button -

Disabled

Number

opacity: 20%

5px


24

Assets Liabilities

AssetsCurrent & Savings

Term Deposits(£112,444.42)

(£12,444.42)

LiabilitiesLoans(£10,500.00)

Pending for ActionNon-Financial

Cards / Widgets

Information Panel

SecurityReduce security threats by maintaining 2 Factor Authentication and by defining complex password policy.

Authentication

Manage Security Questions

Password Policy Maintenance

20px

10px

10px

10px 10pxType Spec: Card Title

Type Spec:Sub - Heading (on light)



Type Spec:Body (on light)


15px 20px

20px

20px

5px

35px


22px

22px

Type spec: Page titleOpacity: 70%

30px 30px

30px

Type spec: BodyOpacity: 70%

Type spec:Page title

Type spec:Body

128px

128px

Retail / Corporate Administrator

128px

128px

16px 16px

16px

22px

22px

Type spec:Page title

Type spec:Body

4 columns 3 columns

25

Placeholder Cards / Widgets


Landing Pages (Retail & Corporate)

Cheque Book First Delivery

Will be attempted within 5 working days at your

communication address updated in our records.

There will be two cheque books of 10 leaves each

which will be issued free of charge every quarter.

After that, there is a charge of Rs. 20.00 plus 15.00%

Service Tax per cheque book.

Submit Cancel

Type of Cheque Book

Catalogue 1

Number of Leaves per Book

10

Delivery Location

Branch Near me My Address

Number of Cheque Books

Selected Account

xxxxxxxxxxxx0206

Location

Manage Account

Welcome, John DoeLast login 9th Apr 04:23PM

6

Back to Dashboard

Copyright ©2016 Oracle and/or its affliates. All rights reserved

Type Spec: Page Title10px

10px

20px20px

15px

30px

8 columns

4 columns

10px10px

Landing Pages (Administrator)

9 columns

3 columns


Transaction Pages

Cheque Book First Delivery

Will be attempted within 5 working days at your

communication address updated in our records.

There will be two cheque books of 10 leaves each

which will be issued free of charge every quarter.

After that, there is a charge of Rs. 20.00 plus

15.00% Service Tax per cheque book.

Submit Cancel

Type of Cheque Book

Catalogue 1

Number of Leaves per Book

10

Delivery Location

Branch Near me My Address

Number of Cheque Books

Selected Account

xxxxxxxxxxxx0206

Location

Manage Account


6

Back to Dashboard


Type Spec: Page Title10px

10px

20px20px

15px

30px

8 columns

4 columns

10px10px

Repeat Transfer ListSearch

Search by Nickname

Transfer to Next PaymentsTransfer From AmountTransfer Type

16th May 2017Vivek Internal Internal_SI $22Every 6 months




Page of 7 items

View 10| records

1

> Repeat TransfersDashboard

Repeat Transfers

Back to Dashboard



6

Transfer To

Ryan xxxxxxx0021

Start Date

05 Jan 2017

Next Payment

13 Apr 2017Frequency

Monthly

Purpose

Credit Card Payment

Transfer From

xxxxxxx0021End Date

05 Jan 2018

Amount

100.00

Reference

Towards rent

Repeat Transfer - Internal

Payments History

Execution Details

Stop Cancel

View Repeat Transfer

This section will besticky and will notmove while scrolling

fill: #000000 100%opacity: 70%

fill: #5F2D61 100%

Type Sec: Page Title

5px

10px10px

5px10px

10px

10px

Modal Window


Accordions

Review Component

Confirmation Component

(In - Form) Confirmation Component

Payees ListSearch

Enter Payee name

Sort

Alphabetically

Allwyn Dsouza

Joseph Johnson

Rosa John

Rosa John LoanRecent transfers

RTGS

Rosa John PartyRecent transfers

Add New Account | Add New DD

RTGS

Christina Anderson

Lynda Pollock

Page of 7 items View 10| records1

Manage whom

Payees Billers

Want to make a paymentto someone new?

Add New Payee

10px10px


Type Spec: Body on Light

Type Spec: Body on Light

fill: #fdf4e3fill: #9f6b3fborder: 7px

fill: #e7f6e8fill: #2e7d32border: 7px

Type Spec: Body on Lighticon- confirm

Review Page

Confirmation Page

Payee Name

Chris Martin

Account Number

1234567

Account Name

Chris

Pay Via

NEFT

IFSC Code

NWBKGB99

Nickname

Chri

Account Type

Domestic

You initiated a request to add a new bank account. Please review details before you confirm!



6

Back to Manage Account

Confirm

Add Account

Cancel Back

Go to

Payments Page

Go to

Dashboard

What would you like to do next?

Reference Number

00002931235

Add Account



6


MobileScreens

Mobile Cards


10px10px

10px

20px

Mobile Inside Page

Type Spec:Sub heading (on light)

Type Spec: Info Heading

Type Spec: Body on light

Type Spec: Sub - heading


Font Style: Material Heading

15px

fill: #000000opacity: 20%

20px

20px20px

15px

20px

fill: #00838Fshadow: outer * x, y - 0px, 2px * blur - 7px

56px

56px


Mobile Overlay

View Statement

Deposit Cheque

Block card

Request Cheque Book

Debit Card

Cheque Status Enquiry

Type Spec: Body on light10px10px

15px15px


Wearables Style Guide | June 2018

Apple WatchDesigned for 42mm screen. Specifications provided for both 38mm and 42mm.

35Wearables Style Guide | June 2018

Color Palette

#FFFFFF #5AC8FA #2094FA #000000

Background

#00F5EA #2094FA

Text & Links


Typography


San Francisco (SF) Light

San Francisco (SF) Regular


San Francisco (SF) Medium


San Francisco (SF) Bold


San Francisco (SF) Specimens

San Francisco (SF) is the system typeface in iOS. The fonts of this typeface are optimized to give your text unmatched legibility, clarity, and consistency.

5

Dynamic Type Size TableFont weight, size, and leading values for dynamic text sizes at all size settings. Font values in points (@2x resolution).

SB15pt, 17.5L

R15pt, 17.5L

R14pt, 16.5L

R13pt, 15.5L

R10pt, 14.5L

R10pt, 14.5L

SB16pt, 18.5L

R16pt, 18.5L

R15pt, 17.5L

R14pt, 16.5L

R11pt, 15.5L

R11pt, 15.5L

Small LargeDefault 38 mm Default 42 mm

Caption 3

Footnote

Caption 2

Caption 1

Body

Headline

Balance

Links

SB17pt, 17.5LLight#00F5EA

R15pt, 17.5LRegular#2094FA

Caption 3

Footnote

Caption 2

Caption 1

Body

Headline

Balance

Links

SB18pt, 17.5LLight#00F5EA


Semi Bold#FFFFFF

Regular#FFFFFF

Regular#FFFFFF

Regular#FFFFFF

Regular#FFFFFF

Regular#9BA0AA

Semi Bold#FFFFFF

Regular#FFFFFF

Regular#FFFFFF

Regular#FFFFFF

Regular#FFFFFF

Regular#9BA0AA

37Wearable Style Guide | June 2018


10:09

Login

Snapshot

Locate Us

Type Specs: Body

xxxxxxxxxxxx1234 xxxxxxxxxxxx1234Chris Wilson Chris Wilson

Saving A/C | Islamic

$8,00,0000

Christopher Christopherxxxxxxxxxxxx1234

10#09

$10,50,000Available Balancefont-face: Caption 1

type spec: Balance

20px

fill: #2094FA radius: 20pt

fill: #5AC8FA 15%radius: 6.5pt

16px 16px16px

10px

16px

Type Specs: Footnote

Type Specs: Caption 2

Type Specs: Caption 3

color: #00F5EAfont-size: 28pt

Saving A/C | Islamic Saving A/C | Islamic

$8,00,0000


10#09Accounts

22nd May 2017$2500

Recent Transactions

28th May 2017$500Petrol Pump

Supermarket purchase for grocery and home products

Type Specs: Footnote

Type Specs: Links

Type Specs: Caption 2Type Specs: Caption 2

Wearable Style Guide | June 2018

Android WearDesigned for 42mm screen. Specifications provided for both 38mm and 42mm.


Typography


Roboto Condensed Light

Roboto Condensed RegularABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!@#$%^&*

Roboto Condensed BoldABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!@#$%^&*

Roboto Condensed Specimens

Roboto Condensed is the primary font used in Android Wear.

5

Dynamic Type Size TableFont weight, size, and leading values for dynamic text sizes at all size settings.

20pt, 18.5L

R16pt, 19.2L

18pt, 17.5L

16pt, 16.5L

12pt, 15.5L

12pt, 15.5L

Caption 3

Footnote

Caption 2

Caption 1

Body

Headline

Balance

Links

22pt, 17.5LLight#00F5EA


Semi Bold#FFFFFF

Regular#FFFFFF

Regular#FFFFFF

Regular#FFFFFF

Regular#FFFFFF

Regular#9BA0AA


10

Login

Snapshot

Locate Us

xxxxxxxxxxxx1234Chris Wilson Chris Wilson

10#09

$10,50,000Available Balance

Saving A/C | Islamic Saving A/C | Islamic

$8,00,0000



ThankYou

June 2018

Oracle Banking APIs · 2019. 3. 5. · Current & Savings $3000.00 Term Deposits $1500.00 Recurring...

Documents

Transcript of Oracle Banking APIs · 2019. 3. 5. · Current & Savings $3000.00 Term Deposits $1500.00 Recurring...