Mizan design system
The UI kit behind the Mizan: Plus Jakarta Sans, navy and teal actions, a gradient balance card, transaction rows, forms and quick actions in light and dark.
- Role
- UX/UI designer
- Year
- 2025
Overview
The Mizan's system aims for calm and trust: deep navy and teal, soft rounded cards and a friendly geometric typeface that keeps amounts easy to read. A single orange accent is kept for the scan button.
Everything on this page is rebuilt in code from the original Mizan screens: the colours and font sizes were taken from the exported Figma files.
Colour
Brand
Deep navy
#003B5C
Primary button and headings in light
Teal
#00A896
Primary button in dark, positive amounts
Deep teal
#007F74
Card gradient, links in light
Aqua
#30D5BB
Highlights on dark
Mint
#E7F7F4
Notices and icon wells in light
Scan orange
#FF6B35
QR scan button, exchange icon, top spend
Lira gold
#FACC15
LBP balance on the card
Surfaces and text
Night
#0F1419
Background in dark
Panel
#1A2332
Cards in dark
Slate
#334155
Lines in dark
Cloud
#F5F7FA
Background in light
White
#FFFFFF
Cards in light
Mist
#AAB8CA
Secondary text in dark
Steel
#64748B
Secondary text in light
Typography
Typeface
Plus Jakarta Sans
- Balance
32px · Bold$ 4,250.00
- Amount
30px · Bold8,950,000
- Name
24px · BoldKevin
- Page title
22px · BoldTransfer
- Section
18px · BoldRecent Activity
- Card title
16px · SemiBoldFinancial Pulse
- Body
14px · MediumSend money, stay connected.
- Caption
12px · RegularToday, 10:23 AM
- Tab label
10px · SemiBoldHome Cards Analytics
Buttons
Light theme
Primary, secondary and text
States
Accent and icon buttons
Dark theme
Primary, secondary and text
States
Accent and icon buttons
Inputs and controls
Light theme
Search
Text field
Recipient name
Focused
Select
From account
Segmented control
Chips, toggle and selection
Dark theme
Search
Text field
Recipient name
Focused
Select
From account
Segmented control
Chips, toggle and selection
Cards
Light theme
$ 4,250.00
• LBP 380,375,000
**** **** **** 4289 VALID 12/26
Beirut City Center
Today, 10:23 AM
Incoming Transfer
Oct 24, 09:00 AM
$1,240.00 of $2,500.00
$1,260.00 remaining this month
Dark theme
$ 4,250.00
• LBP 380,375,000
**** **** **** 4289 VALID 12/26
Beirut City Center
Today, 10:23 AM
Incoming Transfer
Oct 24, 09:00 AM
$1,240.00 of $2,500.00
$1,260.00 remaining this month
Icons
Light theme
- Transfer
- Exchange
- Bills
- Top-up
- Home
- Cards
- Analytics
- Profile
- Scan
- Shopping
- Alerts
- Telecom
Outline icons, 1.5–2px stroke on a 24px grid, set in a soft tinted well when they label a row or action.
Dark theme
- Transfer
- Exchange
- Bills
- Top-up
- Home
- Cards
- Analytics
- Profile
- Scan
- Shopping
- Alerts
- Telecom
Outline icons, 1.5–2px stroke on a 24px grid, set in a soft tinted well when they label a row or action.
Radius, spacing and badges
Corner radius
- Field 12px
- Button 14px
- Card 16px
- Balance card 24px
Spacing scale
- 4px
- 8px
- 12px
- 16px
- 20px
- 24px
- 32px
Badges and status