Oracle Banking Digital Experience - User Interface Reference Style Guide Release 19.1.0.0.0 Part No. F18558-01 | May 2019 - Docs. oracle. com
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
Oracle Banking Digital Experience User Interface Reference Style Guide Release 19.1.0.0.0 Part No. F18558-01 | May 2019
User Interface Reference Style Guide May 2019 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 © 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.
Table of Contents
• Preface • Apple Wearable Color Palette
• Grid • Apple Wearable Typography
• 12 Column Grid • Apple Wearable Dynamic Type Size Table
• Retail Grid Example • Apple Wearable Screens
• Administrator Grid Example • Android Wearable Typography
• Color Palette • Android Wearable Dynamic Type Size
Table
• Typography
• Type Color
• Typography Styles
• Button Style
• Button Icons
• Font Icons
• Colored Icons
• Header and Footer
• Cards
• Tree Structure
• Train and Table
• Form Fields, Dropdowns & Button Types
• Widgets
• Placeholder Cards / Widgets
• Inside Pages
• Modal Window
• Accordion
• Review - Confirm
• Mobile Dashboard
• Mobile Inside Page
• Mobile Overlay
Style Guide | May 2019
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.
Style Guide | May 2019
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. Note:
Style Guide | May 2019
Grids Details
13.5px 13.5px
56px 27px 56px
80px
1253px
1366px
Style Guide | May 2019
Grids Example (Retail)
6
Welcome, John Doe
Last login 9th Apr 04:23PM
My Networth I Have I Owe Recent Activity My Spends
on 12 Apr 2018 from last 30 days
Savings 32345678910123
£36,857.96
Total Amount
02 Bought grocery from $400 Dr.
Current & Savings Grocery Grocery
Feb 2018 Supermarket 25%
$3000.00 Category2 Category2
12 Gas for Car $8000.00 Dr. Category2 Category2
$8000.00 Term Deposits
Mar 2018 12%
63%
I Have Grocery Grocery
$1500.00
12 Gas for Car Category2 Category2
$8000.00 Dr.
Recurring Deposits Mar 2018
$1500.00
View All View All
My Relationships Upcoming Payments
My Bills
5 bills to pay
02 Payment for phone bill $400 Dr.
Current & Savings $23560.93 Reliance Energy
Pay Feb 2018
Home Electricity
Rs. 899.12 Due on 19th Mar 2018 Overdue
12 Gas for Car $8000.00 Dr.
Term Deposits $1489.93 Mahanagar Gas Mar 2018
Pay
Gas Bill
Rs. 500.60 Due on 01 Apr 2018 19 days left 02 Payment for mom’s phone bill $400 Dr.
Apr 2018
Recurring Deposits $1489.93
Vodafone
Pay
Mobile Bill 12 Gas for Car $8000.00 Dr.
Rs. 500.60 Due on 01 Apr 2018 Auto Pay
Apr 2018
Loans & Finances $3034.12
Reliance Energy 02 Payment for phone bill $400 Dr.
Pay Feb 2018
Home Electricity
Credit Card
You do not have any credit cards
View All Set Repeat Transfer
Quick Recharge Quick Bill Pay View All Billers
Payments Service Request Notifications 6
02 03 20 Jun
12:00 AM
Application for John Doe is waiting for your approval
Open Recently Closed
Transfer Money Pay Bills Favourites
20 Jun Card payment for credit card XXXXXXXX3452 due
New Debit Card Request 12:00 AM
Reference No. : 12345 | Created on 19 Apr 2018
20 Jun Card payment for successful for credit card
Replace Debit Card 12:00 AM XXXXXXXX3452
Reference No. : 12345 | Created on 19 Apr 2018
Manage Payees & Request Money View Repeat
Billers Transfers Raise New Request Track Request View All
CHRISTMAS ZigBank
50%
My Advisors off
YOUR ULTIMATE
Tim Philip Sarah Evans Get 50% off BUSINESS
Relationship Manager Service Manager on your purchase SOLUTION
020120200201 020120200201
tim.phillip@zigbank.com s.evans@zigbank.com The comprehensive list of Learn More
Shop Now ZigBank services
Copyright © 2006, 2017, Oracle and/or its affiliates. All rights reserved. | Security Information | Terms and Conditions
Style Guide | May 2019
Grids Example (Administrator)
Style Guide | May 2019
Color Palette
Background
#EFF3F8 #5F2D61 #FAFAFA #000000 .8 #2E7D32 #B71C1C #F3A50C
Account Cards Text & Links
#594577 #79504b #85395e
#2C3251 #006AB5 #FFFFFF
Icons Buttons
#2C3251 #006AB5 #00838f #00838f #2C3251
Borders & Outlines
#333333 #FFFFFF #D9DFE3 #006AB5
Special Colors
#FAC85A #14BA92 #FF669E #33C5CF #256c9a #A65496 #2C446E #1E7C9F #90722C
Style Guide | May 2019Typography
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.
Roboto Specimens
Roboto Light
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*
Roboto Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
5
1234567890!@#$%^&*
Roboto Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*
Roboto Italic Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*
Style Guide | May 2019Color Palette - Font Colors (generic)
Primary Color Sample Text #2c3251
Secondary Color Sample Text #2c3251 | opacity: 80%
Disabled Color Sample Text #2c3251 | opacity: 40%
Links Sample Text #006AB5
Color Palette - Font Colors (secondary)
Success Color Sample Text #2E7D32
Error Color Sample Text #B71C1C
Warning Sample Text #f3a50c
Color Palette - Font Colors (exceptional)
CASA Sample Text #FECA00
Payee & Biller Sample Text #13B6CF
Bulk Record Sample Text #FF7D0E
Bulk File Sample Text #6B4AA4
Trade Finance Sample Text #09A276
Style Guide | May 2019Typographgy Styles
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.
Card / Page Title Sub Heading (on light)
Manage Account Holding Pattern
Desktop Roboto Light | 18px | #2c3251 Desktop Roboto L | 13px | #2c3251 80%
Mobile Roboto Light | 16px | #2c3251 Mobile Roboto L | 13px | #2c3251 80%
Information Text Body (on dark)
Balance Principal Liquidation
Desktop Roboto Light | 11px | #2c3251 Desktop Roboto Regular | 14px | #2c3251
Mobile Roboto Light | 11px | #2c3251 Mobile Roboto Regular | 14px | #2c3251
Information Heading Sub - Heading (on dark)
Account Information Holding Pattern
Desktop Roboto Regular | 16px | #2c3251 Desktop Roboto L | 13px | #2c3251
Mobile Roboto Regular | 16px | #2c3251 Mobile Roboto L | 13px | #2c3251
Text Links Breadcrums (inactive text)
Back to Dashboard > My Accounts > Savings
Desktop Roboto R | 14px | #006AB5 Desktop Roboto R | 13px | #2c3251 70%
Mobile Roboto R | 14px | #006AB5 Mobile Roboto R | 13px | #2c3251 70%
Table Header Tags (on light)
Amount Name / Number Sweep
Desktop Roboto R | 13px | #2c3251 Desktop Roboto R | 10px | #2c3251
Mobile Roboto R | 13px | #2c3251 Mobile Roboto R | 10px | #2c3251
Body (on light) Tags (on dark)
Principal Liquidation Sweep
Desktop Roboto Regular | 14px | #2c3251 Desktop Roboto R | 10px | #ffffff
Mobile Roboto Regular | 14px | #2c3251 Mobile Roboto R | 10px | #ffffff
Style Guide | May 2019Button Style / Links
64px minimum width
20px
36px Submit Cancel 48px Submit Cancel
touch target
16px 16px
Touchable target height 2px rounded
corners (suggested)
Primary Button
Default State Hover State Disabled State
color: #FFFFFF
Submit font-size: 14px Submit Submit
font-face: Roboto
BG Color: #00838F 12% #000000 shade Disabled text: 30% #FFFFFF
over the color Disabled button: 12% #FFFFFF
(over the color)
Secondary Button
Default State Hover State Disabled State
color: #FFFFFF
Cancel font-size: 14px Cancel Cancel
font-face: Roboto
BG Color: #2C3251 80% 20% #000000 shade Disabled text: 80% #FFFFFF
over the color Disabled button: 12% #FFFFFF
(over the color)
Tertiary Button
Default State Hover State Disabled State
color: #FFFFFF
Back font-size: 14px Back Back
font-face: Roboto
BG Color: #2c3251 70% 20% #000000 shade Disabled text: 80% #FFFFFF
over the color Disabled button: 12% #FFFFFF
(over the color)
In- Form / Ghost Button Text Links
Default State Hover State
Add more
color: #006AB5
Create font-size: 14px Create
font-face: Roboto Color: #006AB5
Font Size: #14px
Boder Color: #006AB5 30% #006AB5 shade
over the color
Style Guide | May 2019Icons for Generic Buttons
Submit, Ok, Continue, Initiate, Verify
Cancel, No
Save
Create, Add
Proceed, Next
Back
Save as Template
Save as Draft
Reset, Refresh, Clear
Review
Pay
Edit
Search
Make Copy & Save
Download
Upload
Login
Delete
Style Guide | May 2019Specific Elements
Font Icons
Icons
Retail Style Guide | July 2017
Style Guide | May 2019Icons (contd.)
Retail Style Guide | July 2017
Style Guide | May 2019Icons (contd.)
check-box
detail-view
downward-arrow
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
loan-account-preference, virtual-account search-line
chat star
Retail Style Guide | July 2017
Style Guide | May 2019Icons (Contd.)
summary-view
tabular-view
telecom
text
thumbs-up
tree
upi
upward-arrow
user-experience
water
zoom-in
zoom-out
Style Guide | May 2019Colored Icons
Colored Icons
cheque-book-request, issue-dd alert-options
create-standing-instructions dashboard
view-standing-instructions share
request-money, loans pay-now, purchase
upcoming-payments face-recognition
new-credit-card home
new-debit-card multiple-payment
favorites multiple-transfer
transfer-money, repeat, switch-funds view-statement, programs
eligibility-calculator, tools-calculator payment-options
pay-bills associated-parties
app-tracker download-structure
installment-calculator
new-structure
scan-to-pay atm-branch
pay-to-contact contact-us
manage-recipients face-id
manage-debtors products
account-details, user-file-identifier, invoices push-notifications
ad-hoc-payment add-nominee
add-favorites open-account
security, change-password, authentication redeem
Style Guide | May 2019Colored Icons
risk-profiling access-points
status working-capital
view-cancel collateral-evaluation
manage-pattern configuration
reset-wearable registered-devices
soft-token entitlement
touchID equipment-finance, facility
visible-pattern foreign-exchange
wearables inquire-collateral, real-estate
?
security-question liquidity-management
create-invoice, service-request-def mobile-app
add-virtual-account relationship-mapping
create-virtual-account relationship-matrix
list-structure, reports sms-banking
pdf-download summary, view-finances
business-details user-helpdesk
post-shipment user-limits
file-upload-identifier vam
pre-shipment atm-maintenance
budget
term-loan
audit
access-point-group
goals
Style Guide | May 2019Header & Footer
Header (Desktop)
48px
10px 10px
24px 6 48px
Welcome User
Last login 04:00
24px Touchable
target area
Header (Mobile) 48px
10px 15px
48px
Touchable
target area
Breadcrums
Type Spec: Breadcrum Link
10px
Dashboard > My Accounts > Savings > A/C No 2336432432433 > Manage Account
10px 10px
Type Spec: Breadcrum (inactive link)
Footer (Desktop)
10px
Copyright ©2016 Oracle and/or its affliates. All rights reserved
Type Spec: Body (on dark)
Bg Color: #531E56
Style Guide | May 2019Common Components
Cards and Filters
10px 15px
Active Sweep Class: Card- title Active Sweep
15px 15px 5px color: #2C3251Sweep Paused
Sweep Paused font-size: 13px
15px 15px
15px
fill: #FFFFFF Class: Label
border: 1px #CBCCCD
Start Date Class: Input Field 26 Jul 2018
10px
End Date 26 Oct 2018
15pxInterest Method Interest Method15px
Status Priority 99
15px
10px
Class: Font Class Large
Reliance Group UK Reliance Group UK Color: #ffffff
15px
Reliance Birmingham
Reliance Birmingham Class: Font Class Default Class: Font Class Large
ACGBPU10009011 Internal Color: #ffffff
xxxxxxxx10009011
xxxxxxxx10009011 Internal Color: #ffffff
$ 10000.00
$ 10000.00
15px
15px
10px
10px
Reliance Group UK Class: Font Class Large
Reliance Group UK 15px
Reliance Birmingham
Reliance Birmingham
xxxxxxxxxx9011 Internal
Class: Font Class Default
xxxxxxxxxx9011 Internal
$ 10000.00 Priority 1
$ 10000.00 Priority 1 15px
15px
240px
10px 15px
Status Reset Status Class: Label Reset
10px
Active Active Class: Link Text
15px
Expired Expired Class: Input Field
15px
Paused Paused
10px
Resumed Resumed Class: OJ Pop Up
Structure Type Structure Type
Dropdown Component
Hybrid Hybrid
Views Views Class: Label
40px 15px
Style Guide | May 2019Cards (contd.)
10px 10px
Counter Party Name Class: Card- title Counter Party Name
15px
CP Id Class: Label 15px CP Id
15px
10px
Address of the counter party Address of the counter party
10px
fill: #FFFFFF
border: 1px #00838F
10px
Class: Card- title
15px 15px
Class: Card- title
Class: Information text
Class: Label
10px
Information Card
Class: Label
10px
10px
Class: Input Field
Style Guide | May 2019Tree Structure
Reliance Group UK
Reliance Birmingham
xxxxxxxx10009011 Internal
$ 10000.00
Pool Pool
Reliance Group UK Reliance Group UK
Reliance Birmingham Reliance Birmingham
xxxxxxxxxx9011 Internal xxxxxxxxxx9011 Internal
$ 10000.00 Priority 1 $ 10000.00 Priority 1
Overlay
20px
color: #2C3251
10px Header font-size: Card Title
20px
Selected Account
xxxxxxxxxxxx0206
The width of overlay depends on the content and
can be stretched till 95% of the screen
Style Guide | May 2019Train (Horizontal) Train (Vertical)
28px 2 3
28px bg color: #027BC7 bg color: #ffffff
font-size: Sub heading on dark font-size: Sub heading on light
2
3
Table
Class: Font Class Large
Class: Text Links
Class: Tags on dark
Class: Font Class Body
Style Guide | May 2019Form Fields, Dropdowns & Button Types
Form field Type Spec: sub heading (on light)
Type of Cheque Book Note:
Catalogue 1 Type Spec: body (on light) The specification of text type
for all elements have been
border: 1px #2C3251 specified under the heading
opacity: 50%
Type Specification and the
Form field with drop down same can be refered from the
Typography section.
Selected Account
25px 5px
xxxxxxxxxxxx0206 The type is centered from top &
10px bottom of the field.
Focus State
Selected Account
xxxxxxxxxxxx0206 border: 1px center #2c3251
Hover / Selected State
Select
xxxxxxxxxxxx0206
5px
xxxxxxxxxxxx0206 fill: #FFFFFF
5px border: 1px #2C3251 50%
xxxxxxxxxxxx0123
xxxxxxxxxxxx2345 fill: #FFFFFF 5%darker
xxxxxxxxxxxx5678
Radio Button - Radio Button - Radio Button - Radio Button -
Default Hover Selected Disabled
border: 1px center
#2c3251 50%
fill: #00838F
border: 1px center border: 1px center border: 1px center
#2C3251 50% #00838F #2C3251 20%
Toggle Button Toggle Button -
Disabled
font size: 14px
Number Range color: 00838f
Number
border: 1px #cbcccd
radius: 1px opacity: 20%
Style Guide | May 2019Cards / Widgets
Type Spec:
10px Body (on light)
Pending for Ac@on Type Spec: Card Title
Non-Financial
10px 10px
Security
Type Spec: Reduce security threats by maintaining 2 Factor
Assets
Sub - Heading (on light) Authen@ca@on and by defining complex
Current & Savings
(£112,444.42) password policy.
Type Spec:
Term Deposits Sub - Heading (on light)
(£12,444.42)
Assets Type Spec:
Liabilities
Authen@ca@on
20px
Body (on light) Liabili@es 15px 20px
Loans
(£10,500.00) 20px
Manage Security Ques@ons
Type Spec:
10px 5px 20px
Sub - Heading (on light)
35px Password Policy Maintenance
Information Panel
Retail / Corporate
128px
128px
22px Type spec: Page title
Opacity: 70%
30px 30px
22px
Type spec: Body
30px
4 columns
Style Guide | May 2019Placeholder Cards / Widgets
Tags
4px 4px
Sweep Sweep
font-size: 10px
font-face: Tags
Style Guide | May 2019Landing Pages (Retail & Corporate)
6
Welcome, John Doe
Last login 9th Apr 04:23PM
10px
Manage Account
Selected Account
Type Spec: Page Title
10pxxxxxxxxxxxxx0206
Type of Cheque Book
Catalogue 1
20px 4 columns
Number of Cheque Books20px
Number of Leaves per Book 8 columns Cheque Book First Delivery
10
Will be attempted within 5 working days at your
Delivery Location communication address updated in our records.
Branch Near me My Address
There will be two cheque books of 10 leaves each
Location 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 30px
15px
Back to Dashboard
10px
10px
Copyright ©2016 Oracle and/or its affliates. All rights reserved
Landing Pages (Administrator)
3 columns
9 columns
Style Guide | May 2019Transaction Pages
6
Welcome, John Doe
Last login 9th Apr 04:23PM
10px
Manage Account
Selected Account
Type Spec: Page Title
10px xxxxxxxxxxxx0206
Type of Cheque Book
Catalogue 1
20px 4 columns
Number of Cheque Books
20px
Number of Leaves per Book
10
8 columns Cheque Book First Delivery
Will be attempted within 5 working days at your
Delivery Location communication address updated in our records.
Branch Near me My Address
There will be two cheque books of 10 leaves each
Location which will be issued free of charge every quarter.
After that, there is a charge of Rs. 20.00 plus
Submit Cancel 30px 15.00% Service Tax per cheque book.
15px
Back to Dashboard
10px
10px
Copyright ©2016 Oracle and/or its affliates. All rights reserved
Modal Window
6
Welcome, John Doe
Last login 9th Apr 04:23PM
Dashboard > Repeat Transfers fill: #5F2D61 100%
Repeat Transfers
10pxView Repeat Transfer 5px
Repeat Transfer List
Repeat Transfer - Internal
10px
Search
5px Execu]on Details
Search by Nickname
Type Sec: Page
Transfer To Title Start Date
Ryan xxxxxxx0021 05 Jan 2017
Transfer to Transfer From Transfer Type Next Payments Amount
Transfer From End Date
Vivek Internal Internal_SI Every 6 months
xxxxxxx0021 16th May 2017 $22 05 Jan 2018
Vivek Internal Internal_SI Every
Next 6 months
Payment 16th May 2017 $22 Frequency
Vivek Internal Internal_SI 10px13 Apr 2017
Every 6 months 16th May 2017 $22
Monthly
Amount
Vivek Internal Internal_SI Every 6 months
100.00 16th May 2017 $22
Purpose
Credit Card Payment
Reference
Towards rent
Payments History
Page 1 of 7 items | View 10
10px
records This sec]on will be
Stop Cancel s]cky and will not
10px move while scrolling
Back to Dashboard
Copyright ©2016 Oracle and/or its affliates. All rights reserved
fill: #000000 100%
opacity: 70%
Style Guide | May 2019Accordions
Manage whom
Payees Billers
Payees List
Search Sort
Enter Payee name Alphabetically
Allwyn Dsouza
Christina Anderson
10px
10px
Joseph Johnson Want to make a payment
to someone new?
Lynda Pollock
Add New Payee
Rosa John
Rosa John Loan RTGS
Recent transfers
Rosa John Party RTGS
Recent transfers
Add New Account | Add New DD
Page 1 of 7 items | View 10 records
Review Component
Type Spec: Body on Light
fill: #9f6b3f fill: #fdf4e3
border: 7px
Confirmation Component
Type Spec: Body on Light
fill: #2e7d32 fill: #e7f6e8
border: 7px
(In - Form) Confirmation Component
Type Spec: Body on Light
icon- confirm
Style Guide | May 2019Review Page
6
Welcome, John Doe
Last login 9th Apr 04:23PM
Add Account
You initiated a request to add a new bank account. Please review details before you confirm!
Payee Name
Chris Martin
Account Type
Domestic
Account Number
1234567
Account Name
Chris
Pay Via
NEFT
IFSC Code
NWBKGB99
Nickname
Chri
Confirm Cancel Back
Back to Manage Account
Copyright ©2016 Oracle and/or its affliates. All rights reserved
Confirmation Page
6
Welcome, John Doe
Last login 9th Apr 04:23PM
Add Account
Reference Number
00002931235
What would you like to do next?
Go to Go to
Payments Page Dashboard
Copyright ©2016 Oracle and/or its affliates. All rights reserved
Style Guide | May 2019Mobile Screens Style Guide | May 2019
Mobile Cards
10px
10px 10px
20px
Style Guide | May 2019Mobile Inside Page
Font Style: Material Heading
15px Type Spec:
Sub heading (on light)
Type Spec:
Body (on light)
20px
fill: #000000 fill: #00838F
opacity: 20% shadow: outer
* x, y - 0px, 2px
* blur - 7px
56px
Type Spec: Info Heading
20px 56px
20px
20px
15px
Type Spec: Sub - heading
Type Spec: Body on light
Style Guide | May 2019Mobile Overlay
Type Spec: Body on light
10px 10px
Deposit Cheque
15px
15px
View Statement
Request Cheque Book
Block card
Cheque Status Enquiry
Debit Card
Style Guide | May 2019Apple Watch
Designed for 42mm screen. Specifications provided for both 38mm and 42mm.
Wearables Style Guide | May 2019Color Palette
Background
#FFFFFF #5AC8FA #2094FA #000000
Text & Links
#00F5EA #2094FA
Wearables Style Guide | May 2019Typography
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.
San Francisco (SF) Specimens
San Francisco (SF) Light
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*
San Francisco (SF) Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&* 5
San Francisco (SF) Medium
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*
San Francisco (SF) Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*
Wearables Style Guide | May 2019Dynamic Type Size Table
Font weight, size, and leading values for dynamic text sizes at all size settings. Font values
in points (@2x resolution).
Small Large
Default 38 mm Default 42 mm
Balance Balance
SB17pt, 17.5L SB18pt, 17.5L
Light Light
#00F5EA #00F5EA
Headline Headline
SB15pt, 17.5L SB16pt, 18.5L
Semi Bold Semi Bold
#FFFFFF #FFFFFF
Body Body
R15pt, 17.5L R16pt, 18.5L
Regular Regular
#FFFFFF #FFFFFF
Caption 1 Caption 1
R14pt, 16.5L R15pt, 17.5L
Regular Regular
#FFFFFF #FFFFFF
Caption 2 Caption 2
R13pt, 15.5L R14pt, 16.5L
Regular Regular
#FFFFFF #FFFFFF
Caption 3 Caption 3
R10pt, 14.5L R11pt, 15.5L
Regular Regular
#FFFFFF #FFFFFF
Footnote Footnote
R10pt, 14.5L R11pt, 15.5L
Regular Regular
#9BA0AA #9BA0AA
Links Links
R15pt, 17.5L R16pt, 18.5L
Regular Regular
#2094FA #2094FA
Wearable Style Guide | May 201910:09 Accounts 10#09
hristopher Christopher
Login Type Specs: Body
xxxxxxxxxxxx1234
Saving A/C | Islamic Saving A/C | Islamic
Snapshot $8,00,0000
Type Specs: Links
Recent Transactions
Locate Us 22nd May 2017 Type Specs: Footnote
Supermarket purchase for $2500
grocery and home products Type Specs: Caption 2
Type Specs: Caption 2
28th May 2017
Petrol Pump $500
10#09
font-face: Caption 1
Available Balance
type spec: Balance $10,50,000
20px
16px Type Specs: Caption 2
fill: #2094FA Christopher Type Specs: Caption 3
radius: 20pt
xxxxxxxxxxxx1234
Saving A/C | IslamicType Specs: Footnote
$8,00,0000
color: #00F5EA
font-size: 28pt
16px
16px 10px 16px
Chris Wilson fill: #5AC8FA 15%
xxxxxxxxxxxx1234 radius: 6.5pt
Wearables Style Guide | May 2019Android Wear
Designed for 42mm screen. Specifications provided for both 38mm and 42mm.
Wearable Style Guide | May 2019Typography
Roboto Condensed is the primary font used in Android Wear.
Roboto Condensed Specimens
Roboto Condensed Light
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*
Roboto Condensed Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*5
Roboto Condensed Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*
Wearable Style Guide | May 2019Dynamic Type Size Table
Font weight, size, and leading values for dynamic text sizes at all size settings.
Balance
22pt, 17.5L
Light
#00F5EA
Headline
20pt, 18.5L
Semi Bold
#FFFFFF
Body
R16pt, 19.2L
Regular
#FFFFFF
Caption 1
18pt, 17.5L
Regular
#FFFFFF
Caption 2
16pt, 16.5L
Regular
#FFFFFF
Caption 3
12pt, 15.5L
Regular
#FFFFFF
Footnote
12pt, 15.5L
Regular
#9BA0AA
Links
R16pt, 18.5L
Regular
#2094FA
Wearable Style Guide | May 201910
Login
Snapshot
Locate Us
10#09
Available Balance
$10,50,000
hristopher Christopher
xxxxxxxxxxxx1234
Saving A/C | Islamic Saving A/C | Islamic
$8,00,0000
Chris Wilson Chris Wilson
xxxxxxxxxxxx1234
Wearables Style Guide | May 2019Thank You Wearables Style Guide | May 2019
You can also read
