A calm ledger look: warm paper neutrals, ink text, hairline rules and one deep-teal accent. Money is always tabular, codes are always mono, and every document can show the ledger lines it posted. Arabic right-to-left is the default; English mirrors it through logical properties (padding-inline, inset-inline-start), so no screen is drawn twice.
{{ pr.icon }}
{{ pr.t }}
{{ pr.d }}
1 · Colour tokens
{{ th.label }}
{{ tk.name }}{{ tk.role }}{{ tk.hex }}
Status colours never carry meaning alone: every chip and alert pairs the colour with an icon and words. Body text on --bg and --surface meets 4.5:1 in both themes. Receipts and Z reports stay on --paper in dark mode because they preview what prints.
2 · Type · IBM Plex Sans Arabic + IBM Plex Mono
{{ ty.name }}
{{ ty.spec }}
{{ ty.ar }}
{{ ty.en }}
Western digits everywhere, with font-feature-settings: 'tnum' on the root so columns of money line up. Arabic never goes below 13 px; till text starts at 16 px. Invoice numbers, account codes and XBRL elements are mono and wrapped in dir="ltr" so they don't flip inside Arabic sentences.
3 · Spacing, radius, touch
Spacing (4-pt)
{{ sp.n }}{{ sp.use }}
Radius
{{ r.n }}{{ r.use }}
Touch targets
{{ tc.n }}{{ tc.use }}
4 · Components
Buttons
اكتب رقم الموافقة المكوّن من 6 أرقام
Primary · Secondary · Ghost · Danger · Demo helper (dashed, prototype only). A disabled button always has its reason directly under it. The Pay button is 60 px tall, full width, and nothing floats over it.
Always 3 decimals and grouped thousands. Number first, currency after, smaller and in --ink-3; the same order reads right in both directions. Statements use parentheses for costs; in-app differences use a true minus (−).
Status chips
{{ c.icon }}{{ c.ar }}
Posted · Preview · Day open · Left open · Closed · Needs approval · Overdue · Filed · Proposed element · Read-only.
Alerts
verified_userفي الصالونات يُقبل النقد حتى 10.000 د.ك فقط. ادفعها بكي نت أو بالبطاقة أو بالتقسيم.
wifi_offانقطع الاتصال · السلة محفوظة. الدفع متوقف حتى يعود الاتصال.
cancelحسابان برصيد غير مربوطين. لا يمكن التصدير قبل ربطهما.
lockأُقفل اليوم الساعة 10:48 م.
Compliance (neutral, never red) · Connection lost (amber banner under the top bar, keeps work) · Blocking (red, always with the fix) · Success.
Pay sheet
المبلغ المطلوب
16.000د.ك
{{ m.icon }}{{ m.label }}
infoالنقد غير متاح فوق 10.000 د.ك في الصالونات التقسيم يسمح بجزء نقدي حتى الحد.
تأكيد الدفع
Bottom sheet on phone, centred dialog on tablet and desktop. Cash locked with the reason and a one-tap KNET switch when the cash cap applies. Card and KNET take the approval code typed from the shop's own terminal.
Ledger-entries panel
account_balance
قيود اليومية
JE-2026-018443
مُرحّل
الحسابمديندائن
بيع بكي نت
{{ ln.code }}{{ ln.name }}
{{ ln.dr }}{{ ln.cr }}
المجموع16.00016.000
On every document (invoice, credit note, deposit, closing entry). Lines are grouped by business event in plain words, never internal rule codes. Credits are indented; totals carry the accountant's double rule.
Approval card
sell
خصم 20%منذ دقيقتين
صالون السالمية للرجال · طلب نورة
خصم 20% على سلة بقيمة 16.000 د.ك. السبب: عميل دائم.
رفضموافقة
Who asked, where, why, the amount and what will post if approved. Reject asks for a reason chip, which goes into the log.
Empty, loading, no permission
shopping_basketالسلة فارغةاختر خدمة أو امسح الباركود.
{{ skeleton }}
lockخارج صلاحياتكاطلب الصلاحية من المالك
Every empty state says what will appear and offers the next action. Loading uses skeletons shaped like the screen. No-permission explains which role is missing and sends a request to the owner's inbox.