BESBanking Experience System
Docs Components Journey Showcase
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

Component library

Live, coded BES components — dependency-free HTML/CSS/JS consuming the token package. Every demo renders in light/dark, three densities, and mirrors to RTL. Expand "Code" under any demo to copy the markup.

Install

Three files, no build step, no dependencies. Tokens are the contract — components consume only --bes-* custom properties, so theming means swapping token values.

<link rel="stylesheet" href="assets/tokens.css?v=2.0.0-draft">  <!-- generated from tokens/tokens.json -->
<link rel="stylesheet" href="assets/bes.css?v=2.0.0-draft">     <!-- components -->
<script src="assets/bes.js?v=2.0.0-draft"></script>             <!-- behaviors (progressive enhancement) -->

<!-- wrap your UI -->
<div class="bes"> … </div>

<!-- dimensions -->
<html data-theme="dark">          <!-- omit = follow OS -->
<html data-density="compact">     <!-- comfortable | (default) | compact -->
<html dir="rtl" lang="ar">        <!-- full mirror + Arabic type metrics -->
JS API
BES.setTheme('dark'|'light'|'system')
BES.setDensity('comfortable'|'standard'|'compact')
BES.setDirection('rtl','ar')
BES.formatAmount(-1250.5, {currency:'AED'})   // "−AED 1,250.50"
BES.parseAmount('AED 1,250.50')               // 1250.5 (Arabic digits accepted)
BES.toast('IBAN copied')
BES.openModal(id) / BES.closeModal(id)

Sections

Actions & feedbackButtons, icon buttons, status badges, alerts, banners, toasts, modal. Forms & inputsFields, IBAN input, currency input with live validation, selection controls, tabs, stepper. Money & accountsAmount styles, fee breakdown, rate lock, limit indicator, account card with masking. TransactionsTransaction items in every state, timeline, data table, skeleton, empty state. Composed patternsTransfer review, payee verification states, consent request — assembled from the parts. Advanced & chartsCombobox, date picker, sortable table, drawer, PIN entry, rate-lock countdown, card art, accessible SVG charts, session-pause interruption. Remittance journey →Everything working together: the complete AED→INR flow, English and Arabic.