Getting started
Banking Experience System (BES)
A domain-specific design system for banking and fintech in the UAE — foundations, tokens, components, patterns and cross-cutting architectures that encode financial behavior: money display, transaction states, disclosure, consent, fraud response, and bilingual Arabic/English RTL/LTR design.
Live example
Pending
Completed
Checking status
−AED 1,250.50
This documentation is live. Most pages open with a working example built from the coded library — the same markup you can copy. Full interactive sets: component gallery · remittance journey.
Code
<div class="demo-stack">
<div class="demo-row">
<button class="bes-btn bes-btn--primary">Send <bdi class="bes-amount">AED 5,000.00</bdi></button>
<span class="bes-badge bes-badge--pending">Pending</span>
<span class="bes-badge bes-badge--success">Completed</span>
<span class="bes-badge bes-badge--info">Checking status</span>
<bdi class="bes-amount bes-amount--md">−AED 1,250.50</bdi>
</div>
<div class="bes-alert bes-alert--info" role="status">
<div><b>This documentation is live.</b> Most pages open with a working example built from the coded library — the same markup you can copy. Full interactive sets: <a href="../components/index.html">component gallery</a> · <a href="../journey-remittance.html">remittance journey</a>.</div>
</div>
</div>Version 2.0.0-draft · August 2026 · Phase 02–03 deliverable (architecture + full component system)
Strategy phase: see ../01-system-strategy/
Structure
Foundations
| Doc | Contents |
|---|---|
| 01 Color | Primitive palette, semantic tokens, financial colors, dark scheme, contrast contract |
| 02 Typography | Latin+Arabic stacks, scale, Arabic metrics, financial amount styles, bidi text |
| 03 Spacing & Layout | Spacing scale, density modes, grid, breakpoints, elevation, shape, z-index |
| 04 Iconography | Construction, financial glyph vocabulary, RTL mirroring policy |
| 05 Motion | Durations, easings, semantic motion patterns, reduced-motion rules |
Architecture
| Doc | Contents |
|---|---|
| 06 Token Architecture | Five tiers, naming grammar, six token dimensions, theming contract, delivery |
| 07 Financial Semantics | Money display system, FX rules, balance model, transaction state machine, risk/verification/consent vocabularies |
Core components (~60)
| Doc | Components |
|---|---|
| 08 Actions | Button, Icon Button, Link, Menu, Button Group |
| 09 Inputs & Forms | Text/Currency/Search inputs, Select, Combobox, Date pickers, Checkbox, Radio, Switch, PIN, Code Entry, Upload, form primitives + form doctrine |
| 10 Navigation | App Bar, Bottom Nav, Side Nav, Tabs, Segmented Control, Breadcrumb, Pagination, Stepper, Language Switcher, Session Bar |
| 11 Containers | Card, List, Table, Accordion, Modal, Drawer, Bottom Sheet, Popover, Tooltip, Divider |
| 12 Feedback | Alert, Banner, Toast, Status Badge, Progress, Skeleton, Spinner, Empty/Loading/Error states + the disruption model |
Financial components (~50)
| Doc | Family |
|---|---|
| 13 Money | Amount, Amount Pair, Masked Balance, FX Rate, Rate Lock, Fee Line/Breakdown, Total Row, Delta, Limit Indicator |
| 14 Accounts | Account Card/Selector, Balance Display/Set, Details, IBAN Display, Status, Product Header, Spaces |
| 15 Transactions | Item, List, Table, Detail, Status, Timeline, Receipt, Search/Filters, Statements |
| 16 Payments & Transfers | Payee, Beneficiary Manager, Payee Verification, Payment Summary, Method Selector, Transfer Review, Auth Prompt, Processing, Results, Scheduled, Request-to-Pay, QR, Split, Bills |
| 17 Cards | Card Art, Overview, Controls, Freeze, Limits, PIN, Details Reveal, Replacement, Disputes, Carousel |
| 18 Lending & Financing | Key Facts Summary, APR & Profit Rate displays, Structure Explainer, Calculator, Eligibility, Application, Offer, Schedule, Early Settlement, Overdue |
| 19 Investments | Portfolio, Holdings, Allocation, Performance, Risk Indicator, Product Card, Order Ticket, Deposits, Disclosures |
| 20 Identity & Security | National identity sign-in/handoff, Signing Ceremony, Document Capture, Liveness, Verified Fields, Auth Prompt set, Devices, Session Pause, Security Events, Warning Tiers |
| 21 Consent & Privacy | Consent Request/Dashboard/Cards, TPP Identity, Revocation, Connected Institutions, Payment Initiation Consent, Privacy Center, Marketing Preferences |
Patterns (~55)
| Doc | Patterns |
|---|---|
| 22 Asking Users For… | P-01…P-14: amounts, payees (domestic/international), documents, addresses, card details, consent, credentials |
| 23 Review & Confirmation | P-20…P-33: check answers, payment confirmation, payee verification, step-up auth, signing, cooling-off, fee explanation, Islamic products, approval workflow (maker–checker) |
| 24 Status & Disclosure | P-40…P-52: transaction status, tracking, balances, rates, documents, holds, insights, budgets, degraded data |
| 25 Fraud, Errors & Recovery | P-60…P-75: suspicious activity, scam intervention, account takeover response, complaints & ombudsman escalation, session expiry, offline, restrictions, bereavement, account closure |
Cross-cutting systems
| Doc | Contents |
|---|---|
| 26 Data Visualization | 15 chart components, selection rules, categorical palette, accessibility, RTL behavior |
| 27 Content, Notifications & Errors | Voice, bilingual glossary, message frameworks, error taxonomy, notification categories & urgency |
| 28 Accessibility Architecture | WCAG 2.2 AA enforcement mechanisms, keyboard/reader/zoom rules, accessible auth, PDF a11y, testing matrix |
| 29 Localization & RTL | Direction architecture, numerals/dates/calendars, bidi rules, per-area direction table, extension path |
| 30 Multi-brand & Theming | Core/brand split, theme anatomy, guard rails, brand scenarios, governance, quality bar |
The system's non-negotiables
- Money is never a plain string — the Amount component and financial type styles everywhere.
- Fees appear before review — transparency is structural, not editorial.
- UNKNOWN is a designed state — no false failures, ever; money-state is always stated.
- Color never carries meaning alone — sign + icon + label always.
- Arabic is designed, not translated — direction is a token dimension; every component documents RTL.
- Safety is one tap; risk requires proof — freeze/revoke instant; loosening needs step-up.
- Consent is purpose-bound, time-bound, revocable in ≤2 taps.
- Disclosure structure is brand-invariant — themes skin it; nothing hides or reorders it.
- Accessibility is a build gate — contrast in tokens, checklists per platform including PDF.
- Every error answers four questions — what, why, what happened to the money, what next.
Realistic data convention
All examples use realistic UAE scenarios (AED amounts, IBAN format AE.., Arabic/English pairs) and never represent actual customer data.
Next phases
Phase 04: flagship journey blueprints (dashboard, transfer, remittance, cards, financing, consent, fraud response, SME approval) assembled from these patterns. Phase 05: full documentation site + design library builds + coded token package.