Colors

Brand color palette. Each scale runs 100 (darkest) → 10 (lightest). Use semantic tokens (--primary, --accent) in components, not raw primitives.

Primary — Ocean --primary: #001F5F
100
#001F5F
90
#103788
80
#2955B1
70
#4C7AD9
60
#77A3FF
50
#8FB4FF
40
#A8C4FF
30
#C0D5FF
20
#D9E5FF
10
#F1F6FF
Accent — Kashier Teal --accent: #00BCB4
100
#006A66
90
#00938D
Base
#00BCB4
70
#15E5DC
60
#2FFFF6
50
#54FFF7
40
#7AFFF9
30
#9FFFFB
20
#C5FFFC
10
#EAFFFE
Secondary — Peachy --secondary: #FF9D6C
100
#502712
90
#6D371C
80
#8A4928
70
#A85C36
60
#C57046
50
#E28658
Base
#FF9D6C
30
#FFBA98
20
#FFD8C4
10
#FFF5F0
Error — Watermelon --destructive: #A50017
100
#61000D
90
#830012
Base
#A50017
70
#C70C25
60
#E91C38
50
#FF2E4B
40
#FF5D73
30
#FF8C9C
20
#FFBBC4
10
#FFEAED
Warning — Mango --warning: #FBAF1F
100
#513500
90
#734B00
80
#956200
70
#B77801
60
#D9930E
Base
#FBAF1F
40
#FFC352
30
#FFD484
20
#FFE6B6
10
#FFF7E8
Success — Lemon --success: #4AAB4E
100
#1A541D
90
#28712B
80
#388E3B
Base
#4AAB4E
60
#5EC863
50
#75E57A
40
#8CFF91
30
#AEFFB2
20
#D1FFD3
10
#F3FFF4
Neutrals — Cadet --foreground: #202020
Black
#202020
Base
#556767
01
#637373
02
#697979
03
#6F7E7E
04
#839090
05
#919C9C
06
#B3BBBB
07
#D5D9D9
08
#E6E8E8
09
#F5F6F6
White
#FFFFFF

Typography — English

Display & headings use Outfit. Body, xSmall, xxSmall use Noto Sans. Line-height is 1.2 for all, except Lead/Regular (1.0).

Lead / Bold
Outfit 700 · 76px · lh 1.2
 Kashier
Lead / Regular
Outfit 400 · 76px · lh 1.0
 Kashier
Heading 1 / Bold
Outfit 700 · 61px · lh 1.2
 Payment Platform
Heading 1 / Regular
Outfit 400 · 61px · lh 1.0
 Payment Platform
Heading 2 / Bold
Outfit 700 · 49px · lh 1.2
 Secure Transactions
Heading 2 / Regular
Outfit 400 · 49px · lh 1.2
 Secure Transactions
Heading 3 / Bold
Outfit 700 · 39px · lh 1.2
 Dashboard Overview
Heading 3 / Regular
Outfit 400 · 39px · lh 1.2
 Dashboard Overview
Heading 4 / Bold
Outfit 700 · 31px · lh 1.2
 Recent Transactions
Heading 4 / Regular
Outfit 400 · 31px · lh 1.2
 Recent Transactions
Heading 5 / Bold
Outfit 700 · 25px · lh 1.2
 Payment Method
Heading 5 / Regular
Outfit 400 · 25px · lh 1.2
 Payment Method
Heading 6 / Bold
Outfit 700 · 20px · lh 1.2
 Card Details
Base / Bold
Noto Sans 700 · 16px · lh 1.2
 The merchant's payment is processed securely.
Base / SemiBold
Noto Sans 600 · 16px · lh 1.2
 The merchant's payment is processed securely.
Base / Regular
Noto Sans 400 · 16px · lh 1.2
 The merchant's payment is processed securely.
xSmall / Bold
Noto Sans 700 · 14px · lh 1.2
 Transaction reference number
xSmall / SemiBold
Noto Sans 600 · 14px · lh 1.2
 Transaction reference number
xSmall / Regular
Noto Sans 400 · 14px · lh 1.2
 Transaction reference number
xxSmall / Bold
Noto Sans 700 · 12px · lh 1.2
 Status · Caption · Label text
xxSmall / SemiBold
Noto Sans 600 · 12px · lh 1.2
 Status · Caption · Label text
xxSmall / Regular
Noto Sans 400 · 12px · lh 1.2
 Status · Caption · Label text

Typography — Arabic (RTL)

Display & headings use Cairo. Body, xSmall, xxSmall use Noto Naskh Arabic. xSmall = 13px (not 14px). xxSmall = 10px (not 12px).

Lead / Bold
Cairo 700 · 76px · lh 1.2
 كاشير للمدفوعات
Lead / Regular
Cairo 400 · 76px · lh 1.0
 كاشير للمدفوعات
Heading 1 / Bold
Cairo 700 · 61px · lh 1.2
 منصة المدفوعات الرقمية
Heading 2 / Bold
Cairo 700 · 49px · lh 1.2
 المعاملات الآمنة
Heading 3 / Bold
Cairo 700 · 39px · lh 1.2
 لوحة التحكم
Heading 4 / Bold
Cairo 700 · 31px · lh 1.2
 المعاملات الأخيرة
Heading 5 / Bold
Cairo 700 · 25px · lh 1.2
 طريقة الدفع
Heading 6 / Bold
Cairo 700 · 20px · lh 1.2
 تفاصيل البطاقة
Base / Bold
Noto Naskh Arabic 700 · 16px
 تتم معالجة مدفوعات التاجر بشكل آمن.
Base / SemiBold
Noto Naskh Arabic 600 · 16px
 تتم معالجة مدفوعات التاجر بشكل آمن.
Base / Regular
Noto Naskh Arabic 400 · 16px
 تتم معالجة مدفوعات التاجر بشكل آمن.
xSmall / Bold
Noto Naskh Arabic 700 · 13px
 رقم مرجع المعاملة
xSmall / Regular
Noto Naskh Arabic 400 · 13px
 رقم مرجع المعاملة
xxSmall / Bold
Noto Naskh Arabic 700 · 10px
 الحالة · التسمية التوضيحية
xxSmall / Regular
Noto Naskh Arabic 400 · 10px
 الحالة · التسمية التوضيحية

Spacing & Border Radius

Base unit is 4px. Border radius is 4px globally (from Figma).

Spacing Scale
--space-1 · 4px
--space-2 · 8px
--space-3 · 12px
--space-4 · 16px
--space-5 · 20px
--space-6 · 24px
--space-8 · 32px
--space-10 · 40px
--space-12 · 48px
--space-16 · 64px
Border Radius
--radius-sm
2px
--radius-md
4px ← default
--radius-lg
8px
--radius-full
9999px

Shadows

Figma defines Level 1 as a drop shadow. Extended to sm / md / lg for component use.

Aa
shadow-sm
0 1px 2px rgba(0,0,0,0.05)
Aa
shadow-md (Figma Level 1)
0 0 5px rgba(0,0,0,0.25)
Aa
shadow-lg
0 4px 16px rgba(0,0,0,0.12)

Buttons

Font: Noto Sans 600 · 14px. Radius: 4px. Icons from Heroicons (inline SVG, 18px).

Variants
Sizes
With Heroicons (SVG inline)
States

Form Controls

Height: 40px for inputs. Radius: 4px. Border: 1.5px. Focus ring: 3px primary/12% alpha.

Enter the name as it appears on the card.
Please enter a valid 16-digit card number.
Read-only — contact support to change.
Email notifications
SMS alerts for transactions
Weekly summary report
Disabled option
Credit / Debit Card
Bank Transfer
Digital Wallet
Enable 2-factor authentication
Auto-capture payments
Test mode

Badges

Noto Sans 700 · 11px · all-caps · pill shape. Used for status, labels, and counts.

Status Badges
Primary Accent Success Warning Error Neutral Secondary
Transaction Status Examples
Paid Pending Failed Refunded Processing

Alerts

Full border · radius 5px · icon 24px Heroicons outline · font Noto Sans 14px (Arabic: Noto Naskh Arabic).
Tokens: bg = shade-09 · border = shade-07 · text = shade-01/base. Props: type × withTitle × rtl.

Compact — no title (LTR)
Compact error message!
Compact success message!
Compact warning message!
Compact info message!
With title (LTR)
Alert Title
Compact error message!
Alert Title
Compact success message!
Alert Title
Compact warning message!
Alert Title
Compact info message!
Compact — no title (RTL / Arabic)
رسالة خطأ مختصرة!
رسالة نجاح مختصرة!
رسالة تحذير مختصرة!
رسالة معلومات مختصرة!
With title (RTL / Arabic)
عنوان التنبيه
رسالة خطأ مختصرة!
عنوان التنبيه
رسالة نجاح مختصرة!
عنوان التنبيه
رسالة تحذير مختصرة!
عنوان التنبيه
رسالة معلومات مختصرة!
Error
bg #FFEAED (09)
border #FFBBC4 (08)
text #A50017 (base)
Success
bg #F3FFF4 (09)
border #AEFFB2 (07)
text #1A541D (01)
Warning
bg #FFF7E8 (09)
border #FFD484 (07)
text #513500 (01)
Info
bg #F1F6FF (09)
border #C0D5FF (07)
text #001F5F (primary)

Cards

Border: 1px solid #F5F6F6 (Neutral 09 — subtle, not #E6E8E8) · Radius: 4px · Padding: 16px · Section gap: 24px.
Header title: Outfit Bold 25px in #556767 (Neutral Base). Labels: #556767. Values: #202020 SemiBold 16px.

--border-subtle
#F5F6F6 Neutral 09 — cards, dividers, header sep
--border
#E6E8E8 Neutral 08 — inputs, table rows, strong sep
Data / Summary Card — from Figma (Balances file)

Summary

Activity
Gross amount 10,243.59 EGP
Fees 100.59 EGP
Net amount 10,143.59 EGP
Balance
Total balance before 10,243.59 EGP
Total balance after 0.00 EGP
Raised Card variant — border + shadow-md · title: Noto Sans Bold 16px
Total Revenue
148,320.00 EGP
+12.4% vs last month
KYC Status

Upload your business registration and national ID to complete verification.

Pending Review
Transactions
Successful 4,821
Failed 38
Refunded 12
Card with footer actions
Settlement Request

Your available balance of 12,500.00 EGP is ready for settlement to your registered bank account.

Data / Summary card title
Summary
Outfit Bold 25px · #556767
Widget / Raised card title
Total Revenue
Noto Sans Bold 16px · #556767

Avatars

Circular. Sizes: xs 24px · sm 32px · md 40px · lg 56px · xl 72px. Use initials or image.

Sizes
KS
KS
KS
KS
KS
Colors
PR
AC
SC
NT
SU
WA

Tabs

Bottom-border indicator. Active: primary color + 2px border. Font: Noto Sans 600 14px.

Overview
Transactions
Settlements
Reports
Settings
Tab panel content appears here.

Pagination

36px height buttons. Active: primary fill. Border: neutral-08. Radius: 4px.

Showing 1–20 of 480 transactions

Account Selector

Horizontal card row for switching between accounts. Selected card uses primary border #001F5F; unselected uses #E6E8E8.

Selected border — #001F5F 1px Unselected border — #E6E8E8 1px Account name — Noto Sans SemiBold 14px #556767 Sub label — Regular 12px #839090 Balance default — Bold 16px #556767 Balance selected — Bold 16px #202020

KPI Widgets

Full-width stat bar. Label uppercase Noto Sans Regular 14px · Value Outfit Bold 31px · Description Noto Sans Regular 12px #B3BBBB. Border #F5F6F6 (border-subtle).

Available Balance 1M EGP Describe later
Soon to be Settled 1.02M EGP In-transit payout
Total Balance 2.02M EGP Total account balance
Ongoing Transfers 56.4K EGP In-transit transfers
Label — Noto Sans Regular 14px · #556767 · uppercase Value — Outfit Bold 31px · #202020 Description — Noto Sans Regular 12px · #B3BBBB Border — 1px #F5F6F6 (border-subtle) Padding — 16px

Data Table

Multi-shadow elevation table. Header frosted-glass bg with Inter SemiBold 11px uppercase. Alternating row tint. Currency cell: amount + code pair.

Settlement Forecast

Date To Be Received
Today 1,000,000.00EGP
Tomorrow 520,000.00EGP
February 22 500,477.72EGP

Recent Transfers

Date Amount
Yesterday 10,000.00EGP
February 18 30,000.00EGP
Shadow — 3-layer: ring 0px + 1px depth + 2px soft glow Header bg — rgba(245,246,246,0.75) · border-bottom #E9EDF5 Header text — Inter SemiBold 11px · #464F60 · uppercase · tracking 0.44px Row height — 49px · even rows tinted rgba(248,249,249,0.75) Cell text — Noto Sans Regular 14px · #202020 Currency code — 12px · #687182