Oracle Banking Digital Experience...My Dashboard ATM/Branch Arabic India Welcome John Doe, Last...

Oracle Banking

Digital Experience

User Interface Reference Style GuideRelease 19.2.0.0.0

Part No. F25153-01 | December 2019

User Interface Reference Style GuideDecember 2019

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 © 2019, 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.

Apple Wearable Color Palette

Apple Wearable Typography

Apple Wearable Dynamic Type Size Table

Apple Wearable Screens

Android Wearable Typography

Android Wearable Dynamic Type Size Table

Table of Contents

Preface•

•

••

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

Header and Footer

Cards

Tree Structure

Grid

Train and Table

Form Fields, Dropdowns & Button Types

12 Column Grid

Widgets

Retail Grid Example

Administrator Grid Example

Color Palette

Placeholder Cards / Widgets

Typography

Inside Pages

Type Color

Modal Window

Typography Styles

Accordion

Review - Confirm

Mobile Dashboard

Mobile Inside Page

Mobile Overlay

Button Style

Button Icons

Font Icons

Colored Icons

Colored Icons for Information Panel

Style Guide | December 2019

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


1253px

56px 56px

13.5px 13.5px

27px

80px

1366px

Grids Details


Grids Example (Administrator)


#e7e7e9 #FFFFFF #FAFAFA

Background

#171C28 #02629f

Icons

#171C28 #76b8e1 #cbcccd #FFFFFF#02629f

Text & Links

#454953(#171c28 80%)

#C74634

Buttons

#EAEAED(#171c28 10%)

#FFFFFF #D9DFE3 #006AB5 #B86200 #C74634 #759c6c

Borders & Outlines

#3E913E#13B6CF #FF7D0E #EF0073 #C0392B #FFE45C #205D86 #FF9538#FECA00

Graph Colors

#171c28

#FFE45C

#ffffff

#0A6C99

#171c28

#759C6C

#ffffff

#B71C1C

#ffffff

#171c28

#ffffff

#2C446E

#ffffff

#1E7C9F

#ffffff

#90722C

#ffffff

#C35409

#171c28

#D9BC00

#ffffff

#5C6068(#171c28 10%)

#ffffff

#006AB5

Tag 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 #171C28

Secondary Color Sample Text #B86200(#171C28 | opacity: 80%)

Disabled Color Sample Text #B7B7B7

Links Sample Text #02629F

Color Palette - Font Colors (generic)

Success Color Sample Text #759C6C

Error Color Sample Text #C74634

Warning Sample Text #c35409

Color Palette - Font Colors (secondary)


Card / Page Title

Manage Account

Desktop Roboto Light | 18px | #171c28

Mobile Roboto Light | 16px | #171c28

Information Text

Balance

Desktop Roboto Light | 12px | #171c28

Mobile Roboto Light | 12px | #171c28

Information Heading

Account Information

Desktop Roboto Regular | 16px | #171c28

Mobile Roboto Regular | 16px | #171c28

Body (on light)

Principal Liquidation



Sub Heading (on light)

Holding Pattern

Desktop Roboto L | 13px | #171c28 80%

Mobile Roboto L | 13px | #171c28 80%

Body (on dark)

Principal Liquidation



Sub - Heading (on dark)

Holding Pattern

Desktop Roboto L | 13px | #171c28

Mobile Roboto L | 13px | #171c28

Text Links

Back to Dashboard

Desktop Roboto R | 14px | #006AB5

Mobile Roboto R | 14px | #006AB5

Table Header

Amount Name / Number

Desktop Roboto R | 13px | #171c28

Mobile Roboto R | 13px | #171c28

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 font size is REM where 1rem = 16px.

Typographgy Styles


Button Style / Links

Submit Cancel

16px 16px

64px minimum width

5px rounded

corners

Touchable target height

Submit36px Cancel 48pxtouch target

20px

Primary Button

Submit

color: #FFFFFFfont-size: 14pxfont-face: Roboto

BG Color: #C74634

Default State

Submit

#A13324

Hover State

Submit

Disabled text: #B7B7B7

Disabled button: #F7F7F7

Disabled State

Secondary Button

Cancel


Disabled button: #F7F7F7

Disabled State

Cancel

color: #FFFFFFfont-size: 14pxfont-face: Roboto

BG Color: #2C3251 80%

Default State

Cancel

20% #000000 shade

over the color

Hover State

Tertiary Button

Back


Disabled State

Backcolor: #FFFFFFfont-size: 14pxfont-face: Roboto Light

Font Color: #02629f

Default State

BackBack

Font Color: #004672

Hover State

In- Form / Ghost Button

Createcolor: #02629ffont-size: 14pxfont-face: Roboto

Boder Color:#02629f

Default State

#4D91BB

over the color

Hover State

Create


Raised

Initiated

Initiated

Modified

Partially-Accepted Partially-Financed Partially-Paid Other

Accepted

Rejected OverdueDisputed

Cancelled Closed

Financed Unpaid

Paid Active

Tags


4px 4px

3px

3px

InitiatedType Color: refer tagFont: Information Text

Note:The images have been enlarged for better readability

Icons for Generic Buttons

Submit, Ok, Continue, Initiate, Verify

Save

Create, Add

Proceed, Next

Save as Template

Back

Save as Draft

Reset, Refresh, Clear

Review

Pay

Edit

Search

Make Copy & Save

Download

Upload

Login

Delete


Cancel, No

SpecificElements

Font Icons

Retail Style Guide | July 2017

Icons



Icons (contd.)



Icons (contd.)

dth

electricity

gas

interest-certificate

internet

keyboard

liquidity-management

mail-box

medical

multi-select

music

new-account

pause

play

radio

re-initiate

request-parameters

reset-fit

resume

search-line

star

loan-account-preference, virtual-account

chat

check-box

detail-view

downward-arrow


summary-view

tabular-view

telecom

text

thumbs-up

tree

upi

upward-arrow

user-experience

water

zoom-in

zoom-out

Icons (Contd.)


Colored Icons


Colored Icons

new-debit-card

eligibility-calculator, tools-calculator

scan-to-pay

view-standing-instructions

manage-recipients

manage-debtors

account-details, user-file-identifier, invoices

ad-hoc-payment

add-favorites

security, change-password, authentication

upcoming-payments

cheque-book-request, issue-dd alert-options

share

dashboard

pay-now, purchase

face-recognition

home

multiple-payment

multiple-transfer

view-statement, programs

payment-options

associated-parties

download-structure

new-structure

atm-branch

contact-us

face-id

products

push-notifications

add-nominee

open-account

redeem

favorites

pay-bills

app-tracker

installment-calculator

pay-to-contact

request-money, loans

new-credit-card

transfer-money, repeat, switch-funds

create-standing-instructions


Colored Icons

touchID

security-question

add-virtual-account

create-virtual-account

list-structure, reports

pdf-download

business-details

post-shipment

file-upload-identifier

pre-shipment

term-loan

access-point-group

?

view-cancel

reset-wearable

risk-profiling access-points

collateral-evaluation

working-capital

configuration

entitlement

equipment-finance, facility

foreign-exchange

inquire-collateral, real-estate

liquidity-management

mobile-app

relationship-mapping

relationship-matrix

sms-banking

summary, view-finances

user-helpdesk

user-limits

vam

atm-maintenance

audit

visible-pattern

manage-pattern

soft-token

wearables

status

registered-devices

create-invoice, service-request-def


Colored Icons for Information Panel

delivery

loans

password

prepaid-recharge

rewards

saving

speed

spends

standing-instructions

term-deposit

tips

budget

create

add-payee

generate-pin

create-goal

credit-card, new-debit

goals

benefits

note

Login

20px

35px

IndiaArabicATM/Branch

Submit

1440px

66px

30px

110px

20px

40px

Header and Sub Header (Desktop- Pre Login)font-family: Roboto-Regular;font-size: 11px;color: #FFFFFF 90%;

20px

20px 20px

BG color: #C74634font-size: 14pxfont color: #ffffff

BG color: #171c28

Login

20px

35px

IndiaArabicMy Dashboard ATM/Branch

Welcome John Doe,Last login 19 Nov 11:57AM

1440px

66px

30px

110px

20px

40px

Header and Sub Header (Desktop- Post Login)font-family: Roboto-Regular;font-size: 11px;color: #FFFFFF 90%;

20px 20px

20px

Specs: Body (on light)

Specs: Information Text

BG color: #171c28

Touchabletarget area

48px

48px

10px 10px

Header (Mobile)

Header & Footer

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

10px

Footer

Type Spec: Informatiopn textBg Color: #fafafa


Common Components

Cards and Filters


Active Sweep

Sweep Paused

Class: Card- title

15px

15px 15px

10px

15px

15px

color: #2C3251font-size: 13px

5px

fill: #FFFFFFborder: 1px #CBCCCD

Reliance Group UK

Reliance BirminghamACGBPU10009011$ 10000.00

Internal

Reliance Group UK

Reliance Birminghamxxxxxxxx10009011$ 10000.00

Class: Font Class LargeColor: #ffffff

Class: Font Class LargeColor: #ffffff

Class: Font Class DefaultColor: #ffffff

10px

15px

15px

15px

Reliance Group UK

Reliance Birminghamxxxxxxxxxx9011$ 10000.00 Priority 1

Internal

Internal

Reliance Group UK


Reliance Group UK


Internal

Class: Font Class Large

Class: Font Class Default

10px

15px

15px

15px240px

10px

Active Sweep

Start Date

End Date

Interest Method

Status Priority

26 Jul 2018

26 Oct 2018

Interest Method

99

Sweep Paused

Class: Label Class: Input Field10px

15px

15px

15px 15px

Status Reset

Active

Expired

Paused

Resumed

Structure Type

Hybrid

Views

Class: Label

Dropdown Component

Class: Label

Class: Input Field

Class: Link Text

10px

15px

15px

15px

15px

10px

10px

Class: OJ Pop Up

40px

Status Reset

Active

Expired

Paused

Resumed

Structure Type

Hybrid

Views

Cards (contd.)


15px15px

15px

Counter Party Name10px

Class: Card- title

Class: Label

10px

10px

10pxAddress of the counter party

CP Id

Counter Party Name

Address of the counter party

CP Id

fill: #FFFFFFborder: 1px #00838F

15px 15px

10pxClass: Card- title

Class: Card- title

Class: LabelClass: Information text

10px

10px

10px

Class: Label

Class: Input Field

Information Card

Tree Structure


Pool Pool

Internal

Reliance Group UK


Reliance Group UK


Internal

Reliance Group UK


Internal

Overlay

Selected Account

xxxxxxxxxxxx0206

Headercolor: #2C3251font-size: Card Title

20px

20px

10px

The width of overlay depends on the content and

can be stretched till 95% of the screen

Train (Horizontal) Train (Vertical)


Table

28px

28px

bg color: #027BC7font-size: Sub heading on dark

bg color: #fffffffont-size: Sub heading on light

2 3

2

3

Class: Font Class Large

Class: Font Class Body

Class: Text Links

Class: Tags on dark

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 Book

Catalogue 1

Type Spec: sub heading (on light)

Type Spec: body (on light)

border: 1px #2C3251opacity: 50%

Form field

Selected Account

xxxxxxxxxxxx020625px

10px

Selected Account

xxxxxxxxxxxx0206border: 1px center #2c3251

Hover / Selected State

Select

xxxxxxxxxxxx0206

xxxxxxxxxxxx0206

xxxxxxxxxxxx0123

xxxxxxxxxxxx2345

xxxxxxxxxxxx5678

fill: #FFFFFF 5%darker

5px

5pxfill: #FFFFFFborder: 1px #2C3251 50%

Radio Button -

Default

border: 1px center#171c28 50%

Radio Button -

Hover

border: 1px center#02629F

Radio Button -

Selected

fill: #C74634

border: 1px center#171c28 50%

Radio Button -

Disabled

border: 1px center#2C3251 20%

Toggle Button

RangeNumber

border: 1px #cbcccdradius: 1px

font size: 14pxcolor: #C74634

Toggle Button -

Disabled

Number

Disabled text: #B7B7B7 Disabled button: #F7F7F7

5px



Assets Liabilities

Assets

Current & Savings

Term Deposits

(£112,444.42)

(£12,444.42)

Liabili@es

Loans

(£10,500.00)

Pending for Ac@onNon-Financial

Cards / Widgets

Information Panel

Security

Reduce security threats by maintaining 2 Factor

Authen@ca@on and by defining complex

password policy.

Authen@ca@on

Manage Security Ques@ons

Password Policy Maintenance

20px

10px

10px

10px 10px

Type Spec: Card Title

Type Spec:Sub - Heading (on light)



Type Spec:Body (on light)


15px 20px

20px

20px

5px

35px

20px

20px Type spec: Page title

30px 30px

30px

Type spec: Body

Retail / Corporate / Admin

128px

128px

4 columns


Placeholder Cards / Widgets

Landing Pages (Retail & Corporate)

Type Spec: Page Title10px

10px

20px

20px

15px

30px

8 columns4 columns

10px


fill: #000000opacity: 30%

Box Shadow:0.1rem 0.1rem 0.6rem 0Color: #000000 45%

Font size: 16pxColor: #C74634 20px

20px

20px

10px

10px

Modal Window



Box Shadow:0.1rem 0.1rem 0.6rem 0Color: #000000 45%

Font size: 20pxFont Weight: BoldColor: #171c28

20px

20px 20px

10px 10px

Overlay Window


Accordions

Review Component

CONFIRMATION Type Color: #759C6CYou initiated a request for Cheque Book. Please review details before you confirm!

Confirmation Component

Error Component

ERROR

You initiated a request for Cheque Book. Please review details before you confirm! Type Spec: Body on Light

Type Color: #C74634

fill: #fffffffill: #C74634border: 7px

(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

REVIEW

You initiated a request for Cheque Book. Please review details before you confirm! Type Spec: Body on Light

Type Color: #B86200

fill: #fffffffill: #B86200border: 7px

fill: #fffffffill: #759C6Cborder: 7px

Type Spec: Body on Light

icon- confirm


Review Page

Confirmation Page

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


20px

20px

20px

15px

20px


Mobile Overlay

10px10px

15px

Wearables Style Guide | December 2019

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


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

Wearable Style Guide | December 2019


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 16px

16px

10px

16px

Type Specs: Footnote

Type Specs: Caption 2


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




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


Typography


Roboto Condensed Light

Roboto Condensed Regular


Roboto Condensed Bold


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


Oracle Banking Digital Experience...My Dashboard ATM/Branch Arabic India Welcome John Doe, Last...

Documents

Transcript of Oracle Banking Digital Experience...My Dashboard ATM/Branch Arabic India Welcome John Doe, Last...