Oracle Banking Digital Experience User Interface Reference Style Guide Release 20.1.0.0.0
Part No. F30659-01 | May 2020 User Interface Reference Style Guide May 2020
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 © 2006, 2020, 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 • Mobile Overlay
• Grid • Apple Wearable Color Palette
• 12 Column Grid • Apple Wearable Typography
• Retail Grid Example • Apple Wearable Dynamic Type Size Table
• Corporate Grid Example • Apple Wearable Screens
• Color Palette • Android Wearable Typography
• Typography • Android Wearable Dynamic Type Size Table • Type Color
• Typography Styles
• Button Style
• Button Icons
• Font Icons
• Colored Icons
• Colored Icons for Information Panel
• 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 Style Guide | May 2020 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 2020 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. Style Guide | May 2020 Grids Details
13.5px 13.5px
56px 27px 56px
80px
1253px
1366px
Style Guide | May 2020 Grids Example (Retail)
Style Guide | May 2020 Grids Example (Corporate)
Style Guide | May 2020 Color Palette
Background
#F9F9F9 #FFFFFF #FAFAFA
Text & Links
#171C28 #444954 #0070BF #CBCCCD #FFFFFF (#171c28 80%)
Icons Buttons
#171C28 #0070BF #2F3E86 #444954 (#171c28 80%)
Borders & Outlines
#E7E8E9 #FFFFFF #CBCCCD #0070BF #B86200 #C74634 #008A25 (#171c28 10%)
Graph Colors
#ffffff #ffffff #ffffff #171c28 #ffffff #ffffff #ffffff #ffffff #ffffff
#0A6C99 #B71C1C #008A25 #FFE45C #C35409 #171c28 #2C446E #0070BF #90722C
Tag Colors
#ffffff #ffffff #ffffff #171c28 #ffffff #ffffff #ffffff #ffffff #ffffff
#0A6C99 #B71C1C #008A25 #FFE45C #5C6068 #171c28 #2C446E #0070BF #90722C (#171c28 10%)
#ffffff #171c28
#C35409 #D8993C
Style Guide | May 2020 Typography
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 1234567890!@#$%^&*5
Roboto Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*
Roboto Italic Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*
Style Guide | May 2020 Color Palette - Font Colors (generic)
Primary Color Sample Text #171C28
Secondary Color Sample Text #B86200 (#171C28 | opacity: 80%)
Disabled Color Sample Text #CBCCCD
Links Sample Text #0070BF
Color Palette - Font Colors (secondary)
Success Color Sample Text #008A25
Error Color Sample Text #B71C1C
Warning Sample Text #C35409
Style Guide | May 2020 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.
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 | #171c28 Desktop Roboto L | 13px | #171c28 80% Mobile Roboto Light | 16px | #171c28 Mobile Roboto L | 13px | #171c28 80%
Information Text Body (on dark)
Balance Principal Liquidation
Desktop Roboto Light | 12px | #171c28 80% Desktop Roboto Light | 15px | #171c28 Mobile Roboto Light | 12px | #171c28 80% Mobile Roboto Light | 15px | #171c28
Information Heading Sub - Heading (on dark)
Account Information Holding Pattern
Desktop Roboto Regular | 16px | #171c28 Desktop Roboto L | 13px | #171c28 Mobile Roboto Regular | 16px | #171c28 Mobile Roboto L | 13px | #171c28
Text Links
Back to Dashboard
Desktop Roboto R | 14px | #0070B5 Mobile Roboto R | 14px | #0070B5
Label
Amount Name / Number
Desktop Roboto R | 13px | #171c28 80% Mobile Roboto R | 13px | #171c28 80%
Body (on light) Principal Liquidation
Desktop Roboto Light | 15px | #171c28 Mobile Roboto Light | 15px | #171c28 Style Guide | May 2020 Button Style / Links
64px minimum width
20px 36px Submit Cancel 48px Submit Cancel touch target 16px 16px Touchable target height 5px rounded corners Primary Button
Default State Hover State Disabled State
color: #FFFFFF Submit font-size: 14px Submit Submit font-face: Roboto BG Color: #2F3E86 #172566 Disabled text: #000000 38% Disabled button: #cbcccd
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: #000000 38% over the color Disabled button: #cbcccd
Tertiary Button
Default State Hover State Disabled State color: #FFFFFF Back font-size: 14px Back Back font-face: Roboto Light
Font Color: #0070bf Font Color: #2f3e86 Disabled text: #000000 38%
In- Form / Ghost Button
Default State Hover State color: #02629f Create font-size: 14px Create font-face: Roboto
Boder Color:#2F3E86 #4D91BB over the color
Style Guide | December 2019 Tags
3px Initiated Note: 3px 4px 4px The images have been enlarged for better readability
Type Color: refer tag Initiated Font: Information Text / 11.2px or .7rem
Claimed
Modified Initiated Reversed Lodged
Raised Financed Unpaid Future Dated Submitted Split Bill
Accepted Paid Active Success New Offer Realised Completed
Partially-Accepted Partially-Financed Partially-Paid Paused Hold
Rejected Disputed Overdue Failed Returned Pending-Modification
Cancelled Unclaimed Closed Other
In- Progress
Draft
Tag Colors
#ffffff #ffffff #ffffff #171c28 #ffffff #ffffff #ffffff #ffffff #ffffff
#0A6C99 #B71C1C #008A25 #FFE45C #5C6068 #171c28 #2C446E #0070BF #90722C (#171c28 10%)
#ffffff #171c28
#C35409 #D8993C
Style Guide | May 2020 Specific Elements Font Icons Icons
Submit, Ok, Continue, Initiate, Verify, Asterisk Accept, Yes Cancel, No, Reject Female
Save Male
Create, Add Other
Proceed, Next Mobile
Back Account Holder, Interest Certificate
Save as Template, Account Summary, File Text Accounts
Save as Draft, Change, Issue, Subscription Occupation, Employment
Reset, Refresh, Clear Reset, Refresh, Clear
Review, Requirements, Registration Alert, Warning
Pay, Account Funding, Application Fees, Anti Money Laundering Income, Request Money, Redeem, Payments, Funds, Redeem Edit
Search Application Loan Statement, Claim Money, View Statement Make Copy & Save, Copy Status History, Pre Processed
Download Arrow Down, Sort-desc
Upload Arrow Up, Sort-asc, Sort
Login Arrow Left
Delete Arrow Right
Upload Attachment
Cashflow, Assets, Term Deposits Bank Details
Style Guide | May 2020 Icons (contd.)
Primary Info DTH
Block Debit Card, Cancel Card Electricity
Branch Details Exchange
Calendar Execute, Play, Resume
Card Addon Expand
Transfer Expense, Spends
Card Delivery Eye-Slash
CC Mastercard Eye
CC Visa Facebook
Chat Fees Charges
Check File Pdf
Close File Upload
Enquiry, Received Filter
Collateral Foreign Exchange
Comments Gas
Compress Gift
Contact Info Goals
Dashboard, PFM Heart Fill
Debit Card, Limits Heart
Detail View Help
Style Guide | May 2020 Icons (contd.)
High Priority Minus Circle
Home Minus
Host Module
Information More Vertical
Insurance More, Move
Internet Multi Select, Specifications, Summary View
Keyboard Music
Linkedin New Account
Liquidity Management Offers
Settings Alerts
Location Arrow Password
Login Pause
Logout Phone
Mail Box Plus
Mailbox View Print
Mailbox Push Notifications
Maintenance QR Code
Medical Quick Access
Medium Priority Re Centre, Reset Fit
Menu Bar Re-initiate
Style Guide | May 2020 Icons (Contd.)
Remarks, Verify Text
Repay, Repayment Thumbs Up
Reply Tree
Request Chequebook Trends
Request Parameters Twitter
Request Pin, Request Undo
Save Update
Schedule Unfavourite
Security Question UPI
Sent Mail User Experience
Share User Profile, User
Sms Pause
Split Collateral, Vehicle Info
Star Virtual Account
Start Transfer Water
Stop Transfer Zoom In
Stop Unblock Cheque Zoom Out
Tabular View
TDS, View CASA
Telecom
Style Guide | May 2020 Colored 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, cheque-status
? security, change-password, authentication redeem
Style Guide | May 2020 Colored Icons
risk-profiling wallet-money
status working-capital
view-cancel collateral-evaluation
manage-pattern configuration
reset-wearable registered-devices
soft-token entitlement, seniority-details, claim- money-widget touchID equipment-finance, facility
visible-pattern foreign-exchange
wearables inquire-collateral, real-estate
service-request liquidity-management
create-invoice, service-request-def mobile-app
add-virtual-account, create-virtual-entity relationship-mapping
create-virtual-account, summary, view-finances relationship-matrix
list-structure, reports sms-banking
pdf-download theme-configuration
work-flow user-helpdesk
post-shipment user-limits
file-upload-identifier vam
pre-shipment atm-maintenance
term-loan audit
access-point-group, access-points
Style Guide | May 2020 Colored Icons for Information Panel
add-payee notification
benefits service-requests
budget, approval, loan-application, transaction upcoming-payment
create-goal, goals, rewards
create
credit-card, new-debit
delivery
generate-pin, password
loans, bill-payments, maturing-finance, credit-line, speed
note, standing-instructions, reports
prepaid-recharge
saving, spends, account-balance, wallets, payments
term-deposit
tips
tips
balance-trends, recent-activity, sweep-log
cross-currency-sweeps, currency-sweeps, infra
demand-deposits
Style Guide | May 2020 Header & Footer
Header and Sub Header (Desktop- Pre Login)1440px font-family: Roboto-Regular; font-size: 11px; color: #FFFFFF 90%;
40px ATM/Branch Arabic India BG color: #171c28 20px 20px 20px
66px SubmitLogin 35px 20px 20px BG color: #C74634 30px font-size: 14px font color: #ffffff
110px
Header and Sub Header (Desktop- Post Login)1440px font-family: Roboto-Regular; font-size: 11px; color: #FFFFFF 90%;
40px My Dashboard ATM/Branch Arabic India BG color: #171c28 20px 20px 20px Specs: Body (on light) Welcome John Doe, 66px Last login 1935px Nov 11:57AMLogin 20px 20px Specs: Information Text 30px
110px
Header (Mobile) 48px
10px 10px 48px
Touchable target area
Footer
10px Copyright ©2006, 2020, Oracle and/or its affliates. All rights reserved. Type Spec: Body on light Bg Color: #fafafa
Style Guide | May 2020 Common 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 Start Date Class: Label Class: Input Field 26 Jul 2018 border: 1px #CBCCCD 10px End Date 26 Oct 2018
15pxInterest Method Interest Method15px Status Priority 99 15px
10px RelianceResiance Group Group UK UK Class: Font Class Large Resiance Group UK 15px Color: #ffffff RelianceResiance Birmingham Birmingham Resiance Birmingham Class: Font Class Default Class: Font Class Large ACGBPU10009011xxxxxxxx10009011 Internal xxxxxxxx10009011 Internal Color: #ffffff Color: #ffffff $ 10000.00 $ 10000.00 15px 15px
10px 10px Resiance Group UK Class: Font Class Large Resiance Group UK 15px Reliance Birmingham Resiance Birmingham xxxxxxxxxx9011 InternalClass: 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 2020 Cards (contd.)
10px 10px Counter Party Name Class: Card- title Counter Party Name 15px 15px CP Id Class: Label 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 2020 Tree Structure
Resiance Group UK
Resiance Birmingham xxxxxxxx10009011 Internal $ 10000.00
Pool Pool
Resiance Group UK Resiance Group UK
Resiance Birmingham Resiance 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 2020 Train (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
Portfolio Summary
Class: Font Class Large
Class: Tags on dark
Class: Text Links
Class: Font Class Body
Style Guide | May 2020 Form 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 #171c28 50%
border: 1px center border: 1px center fill: #C74634 border: 1px center #171c28 50% #02629F #2C3251 20%
Toggle Button Toggle Button -
font size: 14px Disabled Number Range color: #C74634 Number border: 1px #cbcccd radius: 1px Disabled text: #B7B7B7 Disabled button: #F7F7F7
Style Guide | May 2020 Cards / Widgets Type Spec: 10px Body (on light) Pending for Action Type Spec: Card Title 10pxNon-Financial 10px Security Type Spec: Reduce security threats by maintaining 2 Assets Sub - Heading (on light) Current & Savings Factor Authentication and by defining complex (£112,444.42) password policy. Type Spec: Term Deposits Sub - Heading (on light) (£12,444.42) Authentication Assets LiabilitiesType Spec: 20px Body (on light) Liabilities 15px 20px Loans (£10,500.00) 20px ? Manage Security Questions Type Spec: 10px 5px 20px Sub - Heading (on light)
35px Password Policy Maintenance
Information Panel
Retail / Corporate / Admin
128px
128px
20px Type spec: Page title 20px 30px 30px
Type spec: Body
30px
4 columns
Style Guide | May 2020 Placeholder Cards / Widgets
Style Guide | May 2020 Landing Pages (Retail)
10px Type Spec: Page Title 10px
20px
8 columns 4 columns
15px 10px
20px
30px
Style Guide | May 2020 Landing Pages (Corporate)
Style Guide | May 2020 Modal Window
Font size: 16px Color: #C74634 20px 20px 20px 20px
Box Shadow: 20px 0.1rem 0.1rem 0.6rem 0 Color: #000000 45%
fill: #000000 opacity: 30%
Font size: 20px Overlay Window Font Weight: Bold Color: #171c28 20px 20px
10px 10px
20px
Box Shadow: 0.1rem 0.1rem 0.6rem 0 Color: #000000 45%
fill: #000000 opacity: 30%
Style Guide | May 2020 Accordions
Manage whom Payees Billers
Payees List Search Sort Enter Payee name Alphabetically
Allwyn Dsouza 10px 10pxChristina Anderson
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
REVIEW Type Color: #C35409 You initiated a request for Cheque Book. Please review details before you confirm! Type Spec: Body on Light fill: #C35409 fill: #ffffff border: 7px
Confirmation Component
CONFIRMATION Type Color: #008A25 Your request has been accepted. Reference Number is AT3MSOG190812PNZ. fill: #008A25 fill: #ffffff border: 7px
Error Component
ERROR Type Color: #B71C1C
Your request has been rejected. Reference Number is AT3MSOG190812PNZ. Type Spec: Body on Light fill: #B71C1C fill: #ffffff border: 7px
(In - Form) Confirmation Component Type Spec: Body on Light icon- confirm
Style Guide | May 2020 Review Page
Confirmation Page
Style Guide | May 2020 Mobile Screens
Style Guide | May 2020 Mobile Cards
10px
10px 10px
20px
Style Guide | May 2020 Mobile Inside Page
Font Style: Material Heading
15px Type Spec: Sub heading (on light)
Type Spec: Body (on light)
20px
fill: #000000 opacity: 20%
Type Spec: Info Heading 20px
20px 20px
15px
Type Spec: Sub - heading
Type Spec: Body on light
Style Guide | May 2020 Mobile Overlay
10px
10px 15px
Style Guide | May 2020 Apple Watch Designed for 42mm screen. Specifications provided for both 38mm and 42mm.
Wearables Style Guide | May 2020 Color Palette
Background
#FFFFFF #5AC8FA #2094FA #000000
Text & Links
#00F5EA #2094FA
Wearables Style Guide | May 2020 Typography 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 2020 Dynamic 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 | December 2019 10:09 Accounts 10#09
Christopher Christopher Login Type Specs: Body xxxxxxxxxxxx1234 Saving A/C | Islamic Saving A/C | Islamic Snapshot $8,00,0000 Type Specs: Links Recent Transactions
22nd May 2017 Type Specs: Footnote Locate Us 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 Christopher fill: #2094FA Christopher radius: 20pt xxxxxxxxxxxx1234Type Specs: Caption 3 Saving A/C | IslamicType Specs: Footnote
color: #00F5EA $8,00,0000font-size: 28pt 16px 16px 10px 16px
Chris Wilson Chris Wilson fill: #5AC8FA 15% xxxxxxxxxxxx1234 xxxxxxxxxxxx1234 radius: 6.5pt
Wearables Style Guide | May 2020 Android Wear Designed for 42mm screen. Specifications provided for both 38mm and 42mm.
Wearable Style Guide | December 2019 Typography 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 2020 Dynamic 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 2020 10
Login
Snapshot
Locate Us
10#09
Available Balance $10,50,000 Christopher Christopher xxxxxxxxxxxx1234 Saving A/C | Islamic Saving A/C | Islamic $8,00,0000
Chris Wilson Chris Wilson xxxxxxxxxxxx1234
Wearables Style Guide | May 2020 Thank You
Wearables Style Guide | May 2020