The component and foundation library behind NOVA · a bilingual digital bank for the Gulf. Restrained surfaces, decisive typography, and financial data you can read at a glance.
8px grid
44px targets
radius 20–24
AR / EN
WCAG AA
01
Color
Deep emerald carries the interface; bright green is reserved for action.
Canvas deep
#031A14
Screen gradient
#0C6A49 → #031A14
Accent
#00D67F
Glass surface
#FFFFFF 9% / 16%
Ink on dark
#A7CDBB
Card
#FFFFFF
Surface
#F1EFE9
Ink
#15171A
Ink muted
#666C73
Emerald deep
#067A50
Positive
#2E7D5B
Warning
#B5841E
Error
#A8473E
Divider
#E6E2DA
02
Type & measure
Inter for Latin, IBM Plex Sans Arabic for Arabic. Numerals always tabular.
Scale · English
INTER
SAR 48,920
Balance 40 / 600
Spending insights
Title 24 / 600
Your groceries are down 12% this month.
Body 16 / 500
Available to spend
Label 11 / 600
Scale · Arabic
IBM PLEX SANS ARABIC
48,920 ر.س
38 / 600
تحليل المصروفات
23 / 600
انخفضت مصروفات البقالة بنسبة ١٢٪ هذا الشهر.
16 / 500
الرصيد المتاح للإنفاق
12 / 600
Spacing · 8px grid
8 · inline gap
16 · card padding
24 · screen gutter
40 · section break
64 · hero rhythm
Radius
12
16
20
24
pill
Elevation
flat
raised
overlay
Icons · 1.6px stroke, round caps
03
Controls & input
Every interactive element clears a 44px target.
Primary button
BTN/PRIMARY
defaultpresseddisabled
Secondary & icon button
BTN/SECONDARY
Search field
FIELD/SEARCH
Search transactions
Tamimi|
×
rest · focus
AI input field
FIELD/ASK-NOVA
How much did I spend on dining last month?
Split a bill
Cancel a subscription
Ask NOVA · filled with suggestions
Category chip
CHIP/CATEGORY
All
Groceries
Dining
Transport
Utilities
تحويلات
Bottom navigation
NAV/BOTTOM
04
Money surfaces
Balances, movement, and intelligence.
Balance card
CARD/BALANCE
Total balance
48,920.40SAR
•••••• SAR
Current account
•• 4417
Savings
12,400.00
Total balance
48,920.40SAR
•••••• SAR
Current account
•• 4417
Savings
12,400.00
Tap the eye to toggle privacy mode
Transaction row
ROW/TRANSACTION
TM
Tamimi Markets
Groceries · Today, 18:42
−284.50
SAR
Salary · Alinma Holding
Income · 1 Sep
+21,000.00
SAR
STC
STC Fiber
Pending · 13 Sep
−399.00
SAR
ج
مكتبة جرير
تسوق · ١١ سبتمبر
−612.00
ر.س
Insight card
CARD/INSIGHT
September spending
7,412.60
12%
Apr
May
Jun
Jul
Aug
Sep
Groceries
2,180.00
Dining
1,640.50
Transport
1,055.00
Transfer summary
CARD/TRANSFER
You are sending
3,500.00 SAR
To
Layla Al-Harbi
IBAN
SA44 •••• 8102
From
Current •• 4417
Arrives
Instantly · SARIE
Fee
No fee
05
Intelligence, trust & feedback
Where NOVA speaks, and where it reassures.
AI response card
CARD/AI-RESPONSE
NOVA
You spent 1,640.50 SAR on dining in August · 22% more than July. Three restaurant charges were over 300 SAR.
Najd Village
412.00
Maraya Café
338.50
Lusin
305.00
Security status
CARD/SECURITY
Account protected
Face ID, device binding and SAMA-compliant monitoring are active.
1 action needed
Confirm your new iPhone in Riyadh · added 2 hours ago.
Biometric confirmation
SHEET/BIOMETRIC
Confirm 3,500.00 SAR
Authenticate with Face ID to send to Layla Al-Harbi.
Toast notification
TOAST
3,500.00 SAR sent to Layla
View
Transfer declined · daily limit reached
Raise
!
فاتورة الكهرباء تُستحق بعد ٣ أيام
دفع
06
Screens in composition
The same parts, assembled.
9:41
Good evening
Faisal
Total balance
48,920.40SAR
Send
Request
Ask NOVA about your money
Recent activity
All
TM
Tamimi Markets
Groceries · 18:42
−284.50
CR
Careem
Transport · 17:05
−38.00
Salary
Income · 1 Sep
+21,000.00
Home
Insights
Ask
Cards
You
01 · HOME
9:41
Ask NOVA
How much did I spend on dining last month?
NOVA
You spent 1,640.50 SAR on dining in August · 22% more than July.
May
Jun
Jul
Aug
Najd Village
412.00
Maraya Café
338.50
Lusin
305.00
Compare to Riyadh average
Biggest charge
Ask a follow-up
02 · ASK NOVA
9:41
مراجعة التحويل
المبلغ المرسل
3,500.00 ر.س
إلى
ليلى الحربي
الآيبان
SA44 •••• 8102
من
الحساب الجاري •• 4417
الوصول
فوري · سريع
الرسوم
بدون رسوم
مستفيد موثّق
تم التحويل إلى هذا الحساب ٤ مرات سابقاً
03 · TRANSFER REVIEW · AR
07
Bilingual rules
Arabic is a first-class layout, not a translation layer.
Mirror the layout
Set dir="rtl" at the screen root; icons, chevrons and progress fills flip with it.
Keep numerals LTR
Amounts, IBANs and card digits stay left-to-right and tabular, with ر.س trailing.
Loosen the leading
Arabic body runs at 1.6–1.7 line height and one step smaller in display sizes.