Skip to the guide
DPOS
AR Download assets

A clear identity for every experience.

A living reference that turns the approved mark into one precise language for interfaces, data, invoices, print and communication.

Explore the system
IBM Plex Sans Arabicأ ب ت ث ج ح خ د ذ ر ز0123456789
ManropeAa Bb Cc Dd Ee Ff0123456789
Official primary #125076 8 px spacing system AA minimum contrast Arabic RTL · English LTR
01

Foundations

The decisions that keep every screen, document and message recognisably DPOS.

Clarity

Make the next action and its consequence unmistakable.

Trust

Use precise states, readable totals and calm feedback.

Continuity

One visual grammar from interface to invoice.

Efficiency

Reduce decoration; preserve useful density.

Clear business operation, from point of sale to decision.
03

Color system

The logo teal is the brand anchor. Neutrals carry information; semantic colors carry meaning only.

Success#168A4A

Reserve for real status and feedback.

Warning#D97706

Reserve for real status and feedback.

Error / destructive#D64545

Reserve for real status and feedback.

Information#087EA4

Reserve for real status and feedback.

Contrast checker

Body text must reach 4.5:1; large text and non-text UI must reach 3:1.

DPOS Clear and readable
04

Typography

A bilingual system that keeps Arabic natural and operational numbers stable.

Arabic interface & content

IBM Plex Sans Arabic

أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ

0123456789 · د.إ 12,450.00

Latin interface & numerals

Manrope

Aa Bb Cc Dd Ee Ff Gg

0123456789 · AED 12,450.00

Display

عنوان بارز

48 / 56700
H1

عنوان الصفحة

40 / 48700
H2

عنوان القسم

30 / 40700
H3

عنوان فرعي

22 / 30600
Body

نص أساسي واضح للقراءة المستمرة.

16 / 27400
Small

توضيح وبيانات مساندة

14 / 22400
Caption

تسمية قصيرة

12 / 18500
Amounts

AED 12,450.00

Keep currency and value isolated LTR.
Dates

25 Aug 2026 · 2026/08/25

Use one format per context.
Identifiers

INV-2026-00124

Never mirror codes or serials.
05

Layout, geometry & icons

A predictable geometry for dense operational interfaces and calm communication.

8 px spacing

481216243240486480

Radius

0px4px8px12px16px24px

Elevation

0123
123456789101112
12-column desktop grid

24 px gutters · 24 px page inset · maximum content width 1440 px.

Icon language

Rounded caps and corners, 2 px stroke at 24 px, no decorative containers unless interactive.

User Search Settings Bell Calendar Invoice Table Download
06

Components & states

Reusable interface families with complete interaction, validation, loading and permission states.

Component laboratoryInspect density and surface behaviour.
6.1

Buttons

Minimum height 44 px · 16 px horizontal inset · one primary action per region.

VariantDefaultHoverPressedFocusLoadingDisabled
Primary
Secondary
Quiet
Destructive
Icon only
6.2

Fields & validation

A label is always visible. Error text explains the repair, not only the failure.

6.3

Selection & navigation

Selected state is communicated by shape, label and color — never color alone.

6.4

Status & feedback

Status is explicit, persistent when consequential, and paired with a useful next action.

PaidPendingProcessingOverdueDraftRefunded
Linear progress64%
123
6.5

Layers & transient UI

Menus, tooltips, drawers and dialogs preserve context and keyboard control.

Helpful context, never essential hidden content.
Confirm deletion

This action cannot be undone. Delete invoice INV-00124?

Reusable package

Six governed families cover actions, forms, feedback, data, shell and overlays across web, Flutter, email and print.

Seventeen manager-approved interface references · no runtime dependency.
Download component CSS Download component manifest
07

Data & operations

Tables are the primary operational surface: readable, sortable, keyboard-safe and responsive.

2 selected
Invoice number ↓CustomerDateStatusTotalPaidBalanceActions
INV-2026-00124Emerald Market25/08/2026Paid12,450.00 AED12,450.00 AED0.00 AED
INV-2026-00123Gulf Technology24/08/2026Partial8,750.00 AED5,000.00 AED3,750.00 AED
INV-2026-00122North Trading23/08/2026Overdue15,300.00 AED0.00 AED15,300.00 AED
INV-2026-00121Rashed Group22/08/2026Draft5,250.00 AED0.00 AED5,250.00 AED
INV-2026-00120Union Factory21/08/2026Refunded9,800.00 AED9,800.00 AED0.00 AED
INV-2026-00119Rayan Services20/08/2026Paid3,200.00 AED3,200.00 AED0.00 AED
1–6 of 248 invoices
≥ 1280 pxDesktop

Full table, tools and bulk actions.

768–1279 pxTablet

Priority columns; details on demand.

< 768 pxMobile structured row
INV-2026-00124Paid
Customer
Emerald Market
Total
12,450.00 AED

Key-value rows, never an unstructured card.

Empty

No invoices yet.

No results

No match for the current filters.

Loading

Preserve table geometry.

Error

Data could not be loaded.

Permission denied

Your role cannot view this data.

Offline / stale

Showing the last safe snapshot.

Data visualisation

Use labels, axes and patterns so meaning never depends on hue alone.

628445725891
CurrentPrevious
100%
  • Category A 40%
  • Category B 35%
  • Category C 25%
08

Documents & invoices

A unified document language for tax invoices, receipts, quotations, credit notes and operational print.

15 mmSafe margin12Document columns40 pxApprox. table row4.5:1Print contrastLTRAmounts & IDs
DPOS

Tax invoice

TAX INVOICE
SellerDigital Innovation Technology

Riyadh, Saudi Arabia
TRN 310987654300003
accounts@ditcpos.com

CustomerEmerald Market LLC

Dubai, United Arab Emirates
TRN 100234567800003
purchasing@emerald.example

Invoice number
INV-2026-00124
Issue date
25/08/2026
Due date
08/09/2026
Currency
AED
#DescriptionQtyUnit priceVATTotal
1Point of sale subscription18,000.00400.008,400.00
2Inventory onboarding service13,500.00175.003,675.00
3Thermal receipt configuration1500.0025.00525.00
Notes & terms

Payment is due within 14 days. Quote the invoice number with your transfer.

QR
Subtotal
12,000.00 AED
VAT 5%
600.00 AED
Discount
150.00 AED
Total
12,450.00 AED
Paid
12,450.00 AED
Balance
0.00 AED
Thank you for your business.ditcpos.com · accounts@ditcpos.com
Quotation
Credit note
Purchase order
Delivery note
Product label
Letterhead
Business card
09

Communication

Transactional email, notifications and brand voice follow the same hierarchy and semantic discipline.

Clear

“Enter an amount greater than zero.”

Not: “Invalid input.”

Calm

“We could not save this yet. Your entries are still here.”

Explain impact before blame.

Actionable

“Reconnect, then try again.”

Always provide a useful next step.
10

Accessibility, RTL & motion

Inclusive behaviour is part of the identity contract, not a final visual check.

Contrast

AA for body text; 3:1 for large text, icons and controls.

Focus

A visible 2 px ring with 2 px offset on every interactive control.

Touch target

44 × 44 px minimum even when the visible icon is smaller.

Keyboard

Logical order, no traps, Escape closes transient layers.

RTL & LTR

Mirror layout, not identifiers, currencies, charts or media controls.

Motion

180–240 ms for feedback and zero essential information in animation.

RTL
Invoice details
Invoice number
INV-00124
Total
AED 12,450.00
LTR
Invoice details
Invoice number
INV-00124
Total
AED 12,450.00
Micro feedback
120–180 ms
Standard transition
180–240 ms
Large layer
240–320 ms
Easing
cubic-bezier(.2,.75,.25,1)
11

Assets, tokens & governance

One distribution point for reviewed assets, implementation tokens and release checks.

SVG

Official logos

Full lockup and icon from the approved vector source.

CSS

Design tokens

Colors, type, spacing, geometry, elevation, motion and focus.

JSON

Token manifest

Machine-readable contract for web, Flutter, email and print.

UI

Component package

Reusable actions, fields, status, data, shell and overlay families.

Digital

  • sRGB
  • SVG / WebP / PNG
  • Logo minimum 140 px
  • Transparent background when required

Print

  • CMYK / PDF/X-4
  • Logo minimum 25 mm
  • 3 mm bleed where applicable
  • Embed or outline licensed fonts

Documents

  • A4 / 80 mm
  • 15 mm safe margin
  • Black-safe totals and QR
  • Never rasterise small text
1Source

Use approved artwork and tokens.

2Build

Compose from reusable families.

3Review

Check content, contrast, RTL and states.

4Release

Record the decision and version.

BEFORE PUBLISHING

Brand preflight

A release is not on-brand until every applicable check passes.

  • Official logo and #125076 primary
  • Complete default, focus, error, loading and disabled states
  • Tables, totals and identifiers remain readable
  • Arabic RTL and English LTR verified
  • AA contrast, 44 px targets and reduced motion
  • A4, receipt, email and responsive output checked