Photograph of a hand holding an iPhone 15 Pro in a walnut and brass office, the corporate banking home screen on the display: the balance of the main operating account and the bottom navigation, every pixel the real product.

One bank, every screen.

The retail app, the retail web and a complete corporate platform for the desk and the pocket, designed and built by Brainy for Cairo Amman Bank.

02 · From retail to corporate

It started with the everyday customer.

In 2024 Brainy designed Cairo Amman Bank's consumer app and web. The bank came back for the corporate platform, and this time we built it too.

Retail web, the approved direction

The dark variant

03 · Designing for everyday clarity

A treasury desk should read like a bank statement.

Balances first, actions second, noise nowhere. The same hierarchy runs the dashboard on a laptop and the home screen on a phone, so a finance team never learns the product twice.

Photograph of a MacBook on a walnut desk beside a coffee cup, the corporate dashboard on its screen: account balance, cards, transactions and the pending approvals.

The mobile home screen at iPhone 15 Pro proportion, with the white symbol in the header, quick actions and the main operating account balance. — Home

The mobile Accounts screen at iPhone 15 Pro proportion, with total balance, active accounts, currencies and a filterable list of accounts. — Accounts

04 · The ecosystem

Twelve modules, one system, two apps.

Banking, payments and control: every module built once, on one set of components, and shipped to the desk and the pocket.

3products

12modules

160+screens

174components

One design system174 components, one theme file, both apps

Banking

DashboardBalances, approvals

AccountsOperating and sub

CardsLimits and controls

FacilitiesLoans and overdrafts

Trade FinanceCredit, guarantees

StatementsDownload and share

ToolsFX rates, calculators

Payments and Transfers

TransfersLocal, SWIFT, iBuraq

PayrollSingle and bulk

PaymentsBills and top-ups

Control

ApprovalsThree signatures

Users and RolesSignatories, limits

05 · A seamless mobile experience

The whole platform, in one hand.

An installable app with every module the desk has: transfers, payroll, cards, facilities and the approvals queue, signed in with a face and a six digit PIN.

Photograph of three iPhone 15 Pro phones standing on travertine, showing biometric sign-in, the home screen and the transfers screen of the corporate app.

The first onboarding screen of the mobile app at iPhone 15 Pro proportion, a lotus badge over the line Cairo Amman Bank, in your pocket. — Onboarding

The mobile biometric sign-in screen at iPhone 15 Pro proportion, offering Face ID or Touch ID with a fallback to PIN. — Biometric sign in

The mobile PIN entry screen at iPhone 15 Pro proportion, six empty digit boxes under the prompt Enter your PIN. — Six digit PIN

The mobile Payments screen at iPhone 15 Pro proportion, with quick actions for paying a bill, mobile top-up, adding a biller and history. — Payments

The mobile Pay a Bill flow at iPhone 15 Pro proportion, step one of three, selecting a registered biller from the list. — Pay a bill

The mobile Payroll and Salaries screen at iPhone 15 Pro proportion, with the total paid, pending batches, drafts and the next recurring run. — Payroll batches

The mobile Cards screen at iPhone 15 Pro proportion, a horizontal row of corporate cards with status filters above them. — Corporate cards

The mobile Facilities screen at iPhone 15 Pro proportion, with total limit, utilised, available and the next repayment date. — Facilities

06 · Empowering business clients

One payroll, three signatures.

A batch is created at the desk, lands on an approver's phone, and moves only when the third signature completes the ring. Maker, checker, authoriser: the product's own device, drawn live.

1 · Created at the desk2 · Pending on the phone3 · First signature4 · Second signature5 · Third signature6 · Approved

Photograph of a MacBook and an iPhone on a walnut desk, the payroll batches on the laptop and the pending approvals list on the phone: one payroll, the approvers on the phone.

A transfer approval on mobile at iPhone 15 Pro proportion, showing the amount, the signature ring, the description and the Approve and Reject buttons.

Approved

07 · The working day

One desk, the whole day.

Eight modules a treasury team touches between the first coffee and the last statement, in one window, built by Brainy in React and handed over running.

08:30Dashboard09:10Accounts10:00Transfers11:20Payments13:00Payroll14:30Facilities15:45Trade finance17:00Statements

The corporate banking dashboard on desktop, with the main operating account balance, quick actions, cards, recent transactions and a currency converter beside the module sidebar.

The Accounts module on desktop, listing every corporate account with its currency, balance and status in a filterable table.

The Transfers module on desktop, with internal, local, SWIFT and iBuraq transfer types and a list of recent transfers.

The Payments module on desktop, with quick actions for bills and top-ups, pending payments and frequent billers.

The Payroll and Salaries module on desktop, listing payroll batches with their period, employee count, total and status.

The Facilities module on desktop, listing active loans, credit lines and overdrafts with limits, utilisation and next repayment.

The Trade Finance manager on desktop, with letters of credit and guarantees, their status and recent requests.

The Statements module on desktop, with report types and a table of generated account statements and transaction reports.

01The day opens on the dashboard: balances, cards, pending approvals, FX.

02Every account, sub account and balance in one ledger.

03Transfers: internal, local, SWIFT, iBuraq single and bulk.

04Bills, top-ups and invoices, paid from the same desk.

05Payroll as a batch: upload, review, submit for signatures.

06Facilities: loans, overdrafts and their repayment schedules.

07Trade finance: letters of credit and guarantees, tracked.

08Statements and FX tools close the day.

08 · The landing page and the kit

A product needs a front door and a paper trail.

The landing page that sells the corporate platform, three transactional emails, the letterhead, the memo and the statement: everything a client touches outside the app, designed to the same tokens.

The full redesigned cab.jo landing page from top to footer, with products, how it works, the iris-scan ATM story, cards, the mobile app, testimonials, stories, branches and the open-an-account call to action.

The redesigned cab.jo landing page at phone width, first of three stacked segments: the header, the headline Banking, reimagined for Jordan, the open-an-account call to action and the products.

The redesigned cab.jo landing page at phone width, second of three stacked segments: how it works, the iris-scan ATM story and the cards.

The redesigned cab.jo landing page at phone width, third of three stacked segments: the mobile app, testimonials, stories, branches and the footer.

The welcome email body on its own, a white sheet with the green accent strip, the greeting Welcome aboard, Layla and the verification steps.

The transaction receipt email body on its own, a white sheet confirming JOD 285.00 to Carrefour Abdoun with the account and reference.

The March update marketing email body on its own, a white sheet headed The Elite tier is here with a customer story and an Apply for Elite button.

The internal memo on its own, a white sheet with a deep green header block reading Memo and the To, From, Date and Reference fields.

The monthly account statement on its own, a wide white sheet with the account holder, balances and a table of March transactions ending in the closing balance.

Photograph of the Cairo Amman Bank letterhead on a dark linen desk mat with a fountain pen and a blank business card, the letter itself the real document.

09 · Design system that scales

One theme file, two apps, 174 components.

A slate ladder for surfaces, borders and type, four semantic colours that mean the same thing on every screen, and one lockup with its clearance, so a new module is a day of assembly, not a month of design.

Surface ladder

--background#F6F7F9slate-1, the page

--card#FFFFFFwhite, the card body

--surface-inset#F6F7F9slate-1, a zone inside a card

--surface-section#E8EBF0slate-4, a table head

--surface-overlayrgba(15,17,23,.55)the modal scrim

Border ladder

--border-subtle#E0E4EAslate-6, hairlines

--border#CED4DCslate-7, interactive

--border-strong#AEB5C0slate-8, hover and focus

--border-selected#B4DBA1green tint, the chosen option

Foreground ladder

--foreground#141620slate-12, 14:1 on the page

--muted-foreground#5B606Dslate-11, AA at 5.8:1

--foreground-tertiary#8B919Cslate-10, AA large

--foreground-disabled#BFC3CCdisabled text

Brand semantics

--primary#028A51CAB green, also --success and --ring

--info#5081CACAB blue, also --accent

--warning#FFAC0Camber, pending

--destructive#DC2626red-600, softer than pure

--chart-5#B4DBA1mint, the fifth series

Type · Poppins

Display · 56/60Payroll

Headline · 32/38Approved, 3 of 3

Title · 20/28Main Operating Account

Body · 16/24Monthly supplier payment to Atlas Trading Co.

Caption · 12/1621 Sep, 15:27

Primary lockup · clearance

x = one mark-width, on every side

10 · Crafting a visual language

Six cards, one lotus.

The corporate family carries the mark as a line drawing from the green debit card to World: six tiers, one grid, one hand of cards.

The prepaid card, white with a large sunflower photograph.

The Cairo Amman Bank green debit card, with the lotus line drawing over a green ground and the Mastercard mark.

The silver credit card, a brushed grey ground with the lotus outline.

The World credit card, charcoal black with the lotus outline.

The Titanium credit card, deep teal with the lotus outline.