DESIGN SYSTEM · v1.0 · Compiled from Figma onboarding export
Zeki Digital Bank
A single reference for how Zeki looks, writes, and behaves across mobile — extracted and systemized from the 26-screen onboarding & core-banking Figma flow (splash, KYC onboarding, OTP, CNIC capture, liveness check, dashboard, activity, cards, and profile).
26Source screens audited
390×844Base frame (iPhone 14/15)
Cal Sans / Jakarta / PoppinsType trio
Pill + 20–24px radiusShape language
Brand Foundations
Zeki presents three interchangeable lockups across splash states. Keep the hexagon mark constant; only the wordmark treatment changes by context.
ZekiBank.
Primary lockup
Navy "Zeki" + italic green "Bank" + full stop. Used on light backgrounds — headers, profile, cards.
Used once, at the trust-building splash — spells out the regulated entity name in full.
Tagline"Manage your money smartly." — always sentence case, never a full headline; appears as a subtitle beneath every lockup.
Color
Colors were sampled directly from the source frames (splash gradient, buttons, dashboard header, status dots). Hex values below are measured, not guessed.
Contrast ruleBody text on Background/Surface must resolve to at least 4.5:1. Ink Navy 900 and Brand Navy 800 both pass on white and on Green 100; white text passes on Teal 900, Ink Navy 900, and Zeki Green 600 down to the midpoint of the brand gradient only — never place white text on the lightest 20% of the gradient.
Color usage map
Exactly what each color is applied to, so the palette stays consistent as new screens are built.
Brand
Zeki Green (Primary)
#0E9F6E
Primary buttons, active links, focus states, progress bar fill, tab/nav active, brand icon chips
Emerald (Accent)
#12B77E
Gradient endpoint, illustration highlights, success accents, active pagination dots
Three families, each with one clear job. Plus Jakarta Sans is reserved exclusively for the onboarding carousel headlines (the big value-prop statements before login). Cal Sans carries every other heading in the product. Poppins is the workhorse for all body copy, labels, buttons, and numerals.
Role
Font family
Weight
Size
Line height
Onboarding headline
Plus Jakarta Sans
800 (ExtraBold)
28px
34px
Screen / step heading (H1)
Cal Sans
700 (Bold — Cal Sans' native weight)
26px
32px
Section heading (H2)
Cal Sans
600
22px
28px
Card / list heading (H3)
Cal Sans
600
18px
24px
Balance / display figure
Cal Sans
700
28px
34px
Body large
Poppins
500 (Medium)
16px
24px
Body
Poppins
400 (Regular)
14px
22px
Label / input caption
Poppins
600 (SemiBold)
12.5px
16px
Button label
Poppins
600 (SemiBold)
15px
20px
Caption / meta (timestamps, tags)
Poppins
500 (Medium)
11.5px
14px
Onboarding Headline Plus Jakarta Sans 800 · 28/34
Banking made simple
Reserved only for the 3-slide value-prop carousel before login
Screen Heading (H1) Cal Sans 700 · 26/32
Verify your identity
Every KYC step title, empty-state title, success-screen title
Section Heading (H2) Cal Sans 600 · 22/28
Personal Information
In-page section dividers, card group titles
Balance / Display Cal Sans 700 · 28/34
Rs 12,732.51
Tabular figures for money — always Cal Sans Bold, never body font
Body Large Poppins 500 · 16/24
We've extracted this information from your CNIC.
Step descriptions, list titles
Body Poppins 400 · 14/22
Please ensure everything is accurate before continuing.
NumeralsUse tabular (lining) figures throughout — balances, CNIC numbers, OTP digits, and dates must never use proportional numerals, or columns of digits will visibly jitter.
Sourcing Cal SansCal Sans isn't distributed on Google Fonts — pull it from Fontshare (api.fontshare.com/v2/css?f[]=cal-sans@400,500,600,700) or self-host the woff2 files; Plus Jakarta Sans and Poppins are both available directly via Google Fonts.
Spacing & Grid
An 8pt base unit drives every measurement. Screen edge margins are a constant 24px; this is the single most repeated number in the file.
Base scale
4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64
Frame & margins
Base frame 390×844pt. Screen gutter 24px both sides. Card internal padding 20–24px. Vertical rhythm between form fields is a strict 20px.
Radius & Elevation
Radius communicates hierarchy in Zeki: the roundest shapes are the most tappable.
Pill — 999px
All buttons, filter chips, dot pagination, status badges
Card — 20–24px
Cards, sheets, illustration frames, checklists
Input — 12–14px
Text fields, OTP boxes, capture frame corners
ElevationZeki is flat and border-led, not shadow-led. Cards are separated with a 1px hairline border on white surfaces rather than heavy drop shadow; reserve shadow-card (0 4px 20px rgba(10,14,26,.06)) only for floating elements over imagery (balance card on the gradient header, primary CTA).
Iconography
Outline style, 1.5–2px stroke, 20–24px bounding box, rounded joins. Icons sit inside soft tinted circular chips whenever paired with text (transaction list, checklists, settings rows).
↔
+
▤
⚙
🛡
🔔
Functional icons (back chevron, calendar, camera, checkmark) stay monochrome navy or green — never multicolor — reinforcing that color is reserved for status and brand moments.
Components
The full component inventory extracted from the 26 screens, grouped by function. Each links down to its full spec, states, and usage rules.
Dashed rectangle guide (document scan), dashed circle guide (selfie/liveness)
Info Banners
Bordered tint box with icon + bold title + description — used for encryption/security reassurance
Illustrations & Empty States
Flat 2-tone character illustrations paired with a circular gradient blob background
Avatar & Verified Badge
Circular profile photo with a small green checkmark badge overlapping the bottom-right edge
Buttons
Measured from the 26 mobile screens (390pt frame). Every bottom CTA is a full pill. Green is the single forward action; ink navy is used for carousel entry and for capture confirm/retake. Icon buttons are circular. “Try another method” and “Contact Support” are text links, not buttons.
Frame390 × 844 pt
CTA width340 px
Side inset25 px
Primary height48 px
Dark CTA — onboarding carousel
Ink Navy 340 × 48. The only action on splash slides 4–6. 14px semi-bold, trailing chevron. Fill #111827.
Variant
Dark CTA
Size
340 × 48 px · pill
Use
Carousel slides 1–2. Advance to the next value-prop.
Variant
Dark CTA
Size
340 × 48 px · pill
Use
Carousel slide 3. Enter the account-opening flow.
Primary CTA — KYC & success
Zeki Green 340 × 48 (#0E8F74). 14px semi-bold, white, trailing chevron. Pinned to the bottom edge. OTP empty state is the same variant at 350 × 48 (20px inset).
Variant
Primary
Size
340 × 48 px · pill
Use
Steps 1–5, 8, 10, 13–14. The single forward action on form and preview screens.
Variant
Primary
Size
340 × 48 px · pill
Use
Step 6 CNIC instruction. Opens the live camera.
Variant
Primary
Size
340 × 48 px · pill
Use
Steps 7 and 9 live camera. Fires the shutter for CNIC front/back.
Variant
Primary
Size
340 × 48 px · pill
Use
Step 12. Accept extracted CNIC details.
Variant
Primary
Size
340 × 48 px · pill
Use
Step 15 final review. Sends the KYC packet.
Variant
Primary
Size
340 × 48 px · pill
Use
Success screen. Leaves onboarding for the home dashboard.
Variant
Primary
Size
340 × 48 px · pill
Use
Profile. Sign out. No trailing chevron.
Dark stacked — capture preview
Ink Navy 340 × 56. 16px semi-bold. Used as a pair on CNIC front/back preview: accept, then recapture. Retake carries a leading camera icon.
Variant
Dark stacked
Size
340 × 56 px · pill
Use
Steps 8 and 10. Keep the captured CNIC photo.
Variant
Dark stacked
Size
340 × 56 px · pill
Use
Steps 8 and 10. Discard the photo and reopen the camera.
Not buttons“Try another method” (Step 14) and “Contact Support” (success) are teal text links, not pills. No disabled CTA appears in the 26 screens — Continue stays green even when a field is in error.
Type on buttonsPrimary / Dark CTA labels are Poppins 14 SemiBold. Dark stacked Retake / Use Photo are Poppins 16 SemiBold. Inverse “View Details” is 12px bold. Trailing chevron is 16 × 16, 8px from the label.
Form Inputs
Measured from every form on the 26 screens. Labels sit above the field (never floating). Fields live inside a 345px white card on the 390pt canvas. Editable empties are white; pre-filled values use a grey fill; extracted/verified values stay white with a green check.
Card345 px · 24 r
Field313 × 52 px
Half field148.5 × 51 px
OTP box45 × 50 px
Card inset16 px
Label → field10 px
Field → next label27 px
Half gutter16 px
Field fill — default
#FFFFFF
Field fill — pre-filled
#F5F5F5
Field border
#ECECEC · 1px
Label
#636A67 · 12px 600
Value
#141414 · 14px 500
Placeholder / helper
#9CA3AF · 12–14px
Error
#BA1A1A · 12px
Calendar / verified
#0E8F74
Rules
Labels are always visible above the control — 12px SemiBold #636A67, 10px above the field. Required fields append a space and asterisk (Full Name *, Date of Birth *). Email Address has no asterisk.
Default / empty / read-only review fields: white fill #FFFFFF, 1px #ECECEC border, 16px corner radius, 313 × 52. Value inset 16px from the field’s left edge.
Pre-filled on entry screens (Step 4 Full Name, Step 5 CNIC Number): same size and border, fill #F5F5F5.
Placeholder copy (name@example.com, dd/mm/yyyy) is 14px #9CA3AF and never replaces the label.
Error is a 13 × 13 red disc + 12px #BA1A1A message 14px under the field. The field itself does not turn red — Step 4 Date of Birth keeps the grey border while the age message shows beneath.
Date fields (DOB, CNIC issue, CNIC expiry) append an 18 × 20 calendar icon in #0E8F74, 18px from the right edge. Not navy.
Verified extracted fields (Step 12 CNIC Number, Full Name) keep a white fill and add a 16 × 16 green check on the right.
Two-up rows (DOB | Gender, Issue | Expiry) are 148.5 × 51 with a 16px gutter. Same label and value type as full-width fields.
Helper text sits 19px under the field, 12px muted (Pakistani mobile number only). Resend code is 12px #0E8F74 on the same baseline as “Didn’t receive the code yet?”
OTP is six 45 × 50 boxes, 8px apart, 12px radius, 18px centered digits — empty and filled share the same chrome.
Phone — Step 1
Compound 313 × 52 field: flag + “92+” + 1px divider + national number. Helper under the field.
Your Mobile Number
92+300 1234567
Pakistani mobile number only
Variant
Phone
Size
313 × 52 px · 16 r · 1px #ECECEC
Use
Step 1. Pakistani MSISDN only. Country code is not editable.
OTP — Steps 2–3
Six discrete boxes, not one field. Gap 8px. Digits 18px. Filled state adds the numeral only.
6-Digit Code
Didn't receive the code yet?Resend code in 0:45
Variant
OTP empty
Size
45 × 50 px each · gap 8 · row 310 px
Use
Step 2. Waiting for the SMS code.
6-Digit Code
2
1
4
8
5
2
Variant
OTP filled
Size
45 × 50 px · 18px digits
Use
Step 3. Code entered; keypad still visible below Continue.
Text, date & error — Step 4
Pre-filled grey, date with green calendar, error as icon + copy under a still-grey field, placeholder email.
Full Name *
Fatima Zahra Khan
Date of Birth *
12/05/1990
!You must be at least 18 years old to open an account.
Email Address
name@example.com
Variant
Text filled · Date · Error · Placeholder
Size
313 × 52 each · 27 px between groups
Use
Step 4 Tell us about yourself. Error does not recolor the border.
CNIC entry — Step 5
Number pre-filled grey. Dates empty with dd/mm/yyyy + calendar. Same 313 × 52, ~104 px field-to-field.
CNIC Number
35201-1234567-1
CNIC Issue Date
dd/mm/yyyy
CNIC Expiry Date
dd/mm/yyyy
Variant
Pre-filled number · Date empty
Size
313 × 52 · start-to-start 104 / 112 px
Use
Step 5 Verify your identity. Calendar always green.
Extracted & review — Steps 12 & 15
White fields. Step 12 adds a 16 × 16 green check on CNIC Number and Full Name, then two-up halves. Step 15 is full-width read-only plus a 22 × 22 navy checkbox.
CNIC Number
35201-1234567-1
Full Name
Fatima Zahra Khan
Date of Birth
12/05/1990
Gender
Female
Issue Date
10/01/2020
Expiry Date
01/01/2030
Variant
Verified + half-width
Size
313 × 52 · 148.5 × 51 · gutter 16
Use
Step 12 Confirm your details. Extracted from the CNIC scan.
Full Name
Fatima Zahra Khan
Mobile Number
+92 300 1234567
I confirm that the information provided is accurate and belongs to me.
Variant
Read-only review + checkbox
Size
Field 313 × 52 · checkbox 22 × 22
Use
Step 15 Review your details. White fill, no check badge. Confirm before submit.
Screen
Field
Variant
W × H
Fill / notes
Step 1
Your Mobile Number
Phone
313 × 52
White · flag + 92+ · helper 19px below
Step 2
6-Digit Code
OTP empty
45 × 50 × 6
Gap 8 · white · resend #0E8F74
Step 3
6-Digit Code
OTP filled
45 × 50 × 6
18px digits 214852
Step 4
Full Name *
Pre-filled
313 × 52
#F5F5F5
Step 4
Date of Birth *
Date + error
313 × 52
White · calendar 18×20 · error #BA1A1A, no red border
Step 4
Email Address
Placeholder
313 × 52
White · name@example.com
Step 5
CNIC Number
Pre-filled
313 × 52
#F5F5F5 · 35201-1234567-1
Step 5
CNIC Issue Date
Date empty
313 × 52
dd/mm/yyyy · calendar #0E8F74
Step 5
CNIC Expiry Date
Date empty
313 × 52
dd/mm/yyyy · calendar #0E8F74
Step 12
CNIC Number
Verified
313 × 52
White · 16×16 green check
Step 12
Full Name
Verified
313 × 52
White · 16×16 green check
Step 12
Date of Birth / Gender
Half
148.5 × 51
Gutter 16
Step 12
Issue Date / Expiry Date
Half
148.5 × 51
Gutter 16
Step 15
Full Name, DOB, Email, Mobile
Read-only
313 × 52
White · Personal Information card
Step 15
CNIC Number, Issue, Expiry
Read-only
313 × 52
White · Identity Information card
Step 15
I confirm…
Checkbox
22 × 22
#00327D · 20px inner
Spacing rhythmCard 345px wide, 16px inner padding (field x = 40 on a 390pt frame). Label 12 / 10px / field 52 / 27px to the next label. Value text starts 16px inside the field (x = 56). Half-row gutter 16px. OTP gap 8px.
Not on these screensNo floating labels, no red field border, no navy suffix icons. Focus glow is not drawn in the 26 PDFs — do not invent a green ring unless a later spec adds it.
OTP & Keypad
6 discrete boxes rather than a single field — increases legibility and supports auto-advance on paste/autofill.
2
1
4
8
5
·
Didn't receive the code? Resend code in 0:45 — link is muted/disabled until the countdown reaches zero, then turns solid green and tappable.
Numeric keypadA custom in-app 3×4 keypad (not the OS keyboard) is used for OTP and PIN entry, with light grey square keys, 1px hairline dividers, and a delete key using a left-arrow-cross glyph bottom right. This keeps the sensitive-entry experience branded and consistent across iOS/Android.
Progress & Steps
Every onboarding/KYC screen follows the same header pattern: circular back button, top-right "Step N" label in brand green, thin progress bar beneath.
←
Step 4
Step count is always visible and denominated (Step 4 of ~15 in the full KYC journey) so the fraction of the track filled communicates real remaining effort — never a fake/optimistic progress bar.
Checklist card
✓
Position your face inside the frame
✓
Look directly at the camera
○
Make sure your face is clearly visible
Chips & Status Badges
✓ All↓ Incoming↑ Outgoing
CompletedPendingFailed
Token
Background
Text/Dot
Meaning
status.success
#E6F7EF
#0E9F6E
Completed transaction, verified document
status.warning
#FEF3E2
#F59E0B
Pending transfer, awaiting review
status.error
#FDECEC
#DC2626
Failed payment, rejected document
Cards
Physical/virtual card visual
● ZEKIBANK PLATINUM● Active
•••• 4892
CARDHOLDER: FATIMA ZAHRAEXP: 01/30
Transaction row
🛍
Daraz PK Online Shopping
Today, 02:45 PM · Completed
− Rs 4,500.00
👤
Ahmed Ali
Yesterday, 02:45 PM · Pending
+ Rs 16.00
Toggles & List Rows
Settings toggle row
Online Transactions
Enable e-commerce purchases
International Usage
Transactions outside home country
Navigation list row
🛡
Security
Password, 2FA, active sessions
›
Navigation
4-tab bottom navigation persists across the core app (post-onboarding): Home, Activity, Cards, Profile. Active tab is solid Zeki Green; inactive tabs are muted grey — no background pill on the active state, color does all the work.
Home
Activity
Cards
Profile
Exact bar from Home / Activity / Cards / Profile: 390 × 115 px white, 2px #E2E7EB top hairline. Active #0E8F74, inactive #838C96. Labels 14px. Icons 16×18 / 18×18 / 20×16 / 20×20. Home indicator 134 × 5.
Home
Activity
Cards
Profile
Home
Activity
Cards
Profile
Home
Activity
Cards
Profile
Patterns
The onboarding/KYC journey is the backbone of the product's first impression. It follows a strict single-focus, single-CTA-per-screen pattern across 15 steps:
01–03
Splash & brand intro (3 rotating lockups)
→
04–06
Value carousel (3 slides, dot pagination)
→
Step 1–3
Phone number + OTP verification
→
Step 4
Personal details (name, DOB, email)
→
Step 5
CNIC number + issue/expiry entry
→
Step 6–10
Capture & preview CNIC front + back
→
Step 11
Automated document + liveness analysis
→
Step 12
Confirm extracted data
→
Step 13–14
Selfie / face liveness capture
→
Step 15
Final review + consent checkbox
→
Success screen → Dashboard
Capture pattern
Every capture step (CNIC front, back, selfie) repeats the same 3-beat sequence: 1) instruction screen with a do/don't checklist, 2) live camera view with a dashed guide frame (rectangle for cards, circle for faces), 3) still preview with "Use Photo" / "Retake" as equal-weight dark pill buttons.
Trust reinforcement
A short encryption/security microcopy line appears at every step that collects sensitive data (CNIC, selfie, review) — either as a bordered info banner or a small centered caption. This repetition is deliberate and should not be trimmed for space.
Content & Voice
Headlines
Short, benefit-led, sentence case with occasional bold accent (e.g. "Banking made simple," "Your security, our priority"). Two lines maximum.
Body / helper text
Instructional and plain: "We will send a 6-digit verification code to this number." States the mechanism, not marketing language.
Buttons
Verb + object, always with a forward arrow on primary actions: "Continue →", "Submit for Verification →", "Go to Dashboard →". Never "Submit" alone.
Errors
States the rule directly: "You must be at least 18 years old to open an account." No apology, no blame — just the constraint and (implicitly) how to fix it.
Accessibility
Requirement
Rule
Tap targets
Minimum 44×44pt — all pill buttons, icon buttons, and OTP boxes meet this already; keep it as a floor for new components
Color independence
Status is never color-only: success/pending/failed always pair a dot + text label; errors always pair an icon + message
Contrast
Body text ≥4.5:1, large/bold headline text ≥3:1. Text Muted (#9CA3AF) is for non-essential metadata only, never body copy
Motion
Progress bars and the verification "analyzing" animation must respect reduced-motion — fall back to a static percentage label
Form labels
Persistent visible labels only — no placeholder-as-label, which fails for low-vision and voice-control users