Draft — not yet human-verified. Every gate passing here is automated. No screen-reader, Arabic native-speaker or usability testing has been carried out yet, and all Arabic UI copy is machine-drafted. What has and hasn't been verified

Financial experiences, engineered as a system

A domain-specific design system for banking and fintech in the UAE. Trust by design, clarity by default — money display, transaction states, fee disclosure, consent, fraud response and bilingual Arabic/English RTL design, specified as reusable foundations, components and patterns.

Read the documentation Use the components See it rendered

110+components 55patterns 2languages · RTL + LTR AAWCAG 2.2 target 40specifications 5automated audits passing 0human test protocols run

Build with it

Remittance journey — live proofThe complete AED→INR flow working end-to-end: amount, payee verification, rate lock, authentication, every result state, receipt. English and Arabic. Component library (HTML/CSS/JS)Live, dependency-free coded components with copy-paste markup, light/dark, RTL and density controls. Money & accounts, codedAmount styles, fee breakdowns, limit indicators, account cards with masking. Composed patterns, codedTransfer review, payee verification and consent — assembled and interactive. Token packagetokens.json source of truth → generated CSS custom properties (tokens.css).

Foundations

ColorFunctional palette, semantic tokens, fixed financial colors, dark scheme, contrast contract. TypographyCertified Latin + Arabic pair, Arabic metrics, money type styles, bidirectional text. Spacing & layout4px scale, density modes, grids, breakpoints, elevation and shape. IconographyConstruction grid, financial glyph vocabulary, RTL mirroring policy. MotionDurations, easings, semantic patterns, reduced-motion alternatives.

Architecture

Token architectureFive tiers, naming grammar, six dimensions, the theming contract. Financial semanticsMoney display rules, FX honesty, balance model, the transaction state machine. Multi-brand & themingOne behavioral core, many brand expressions — with guard rails. AccessibilityWCAG 2.2 AA as the design target: tokens, checklists, testing matrix. Contrast and structure are gated automatically; the screen-reader protocol is written but not yet run. Localization & RTLArabic as architecture: direction, numerals, calendars, bidi rules.

Components

ActionsButtons that name their consequence, icon buttons, links, menus. Inputs & formsThe form doctrine, currency input, IBAN entry, PIN, uploads. NavigationApp bars, bottom nav, tabs, steppers, language switcher, session bar. ContainersCards, lists, tables, modals, drawers, sheets — and when not to use them. Feedback & statusThe disruption model: alerts, banners, toasts, badges, empty states. MoneyAmount, FX rate, fee breakdown, rate lock, limits — the core primitives. AccountsAccount cards, balance sets, IBAN display, spaces and goals. TransactionsItems, detail, timeline, receipts — every state designed, including unknown. Payments & transfersPayee verification, transfer review, results, requests, QR, bills. CardsCard art, controls, freeze, limits, PIN, disputes, replacement. Lending & financingKey facts, APR and profit-rate displays, schedules, overdue handling. InvestmentsPortfolios, holdings, risk indicators, order tickets, disclosures. Identity & securityNational identity sign-in, document capture, auth prompts, fraud tiers. Consent & privacyConsent requests and dashboards, revocation, privacy center.

Patterns & systems

Asking users for…Amounts, payees, documents, addresses, consent — collection done right. Review & confirmationCheck answers, payment review, signing, approvals, cooling-off. Status & disclosureTruthful balances, rates, tracking, holds, insights and budgets. Fraud, errors & recoverySuspicious activity, scam intervention, takeover response, closure. Data visualizationFifteen chart components with honesty and accessibility rules. Content & errorsVoice, bilingual glossary, error taxonomy, notification categories.

Strategy (Phase 01)

Phase 01 overviewHow the system strategy was researched and structured. Design principlesTen principles, each with a decision test and an enforcement mechanism. UAE contextRails, remittance, language, Islamic finance — what makes this market specific. Regulatory considerationsRegulation translated into UX mandates — not legal advice.