Skip to the guide
DPOS
English
Download assets
IDENTITY REVIEW · ROUND 02

A complete decision, one item at a time.

Mark each area after reviewing its examples. Your choices and notes stay on this device until you export or clear them.

0 / 10Not started
0%
CURRENT DECISIONUnder review

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
Manrope · selected languageAa Bb Cc Dd Ee Ff GgSmart operations start with one clear decision.
Official primary #125076 8 px spacing system AA minimum contrast Locale-aware direction and typography
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.

GOVERNED COMMERCIAL ACCENT

Orange earns attention only when a commercial decision matters.

Teal remains the operational primary. Conversion orange is reserved for trial, purchase, upgrade, subscription and demo actions.

5.18:1White text · WCAG AA#C2410C

Operational primary

Save, create, confirm, navigate and complete everyday work.

Commercial conversion

Use once in a decision zone for the clearest revenue action.

Use for

  • Buy now, upgrade a plan or subscribe.
  • Start a trial or book a product demo.
  • At most one orange action in each decision zone.

Never use for

  • Warnings, destructive actions or validation errors.
  • Save, create and routine navigation actions.
  • Multiple competing buttons in one viewport.

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

Each selected language is shown in its approved default font while operational numbers remain stable.

Selected language · approved default

Manrope

Aa Bb Cc Dd Ee Ff Gg

Smart operations start with one clear decision.

0123456789 · AED 12,450.00

LIVE TYPE PLAYGROUND

Test the exact words before approval

The preview follows the selected language, direction and approved default font.

MANROPE · EN

Smart operations start with one clear decision.

Weights: 400 body · 500 controls · 600 headings · 700 display
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

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.

06

Open-source icon library

Lucide provides a consistent, broad and tree-shakeable system for commerce, inventory, finance and platform workflows.

LIBRARYLucideISC Open Source · 1,791 icons
DEFAULT24 px · 2 pxRound caps and joins
TOUCH TARGET44 × 44 pxThe glyph may remain 20–24 px
Open Lucide documentation ↗

States

DefaultHoverActiveDisabledDestructive

Do

  • Pair unfamiliar icons with text.
  • Keep one meaning per icon.
  • Use color only to reinforce state.

Don't

  • Do not mix icon families.
  • Do not stretch or fill outline icons.
  • Do not mirror icons that carry direction-independent meaning.
07

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
08

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.

PROFESSIONAL ANALYTICS COMPONENTS

Data visualisation system

Reusable charts with context, comparison, accessible labels, tooltips and clear decisions—not decoration.

Live dataLast updated 2 minutes agoAll branches
Period
Net revenue
AED 284,650
↑ +12.4%vs previous period
On target
Orders
1,248
↑ +8.1%vs previous period
96% fulfilled
Average basket
AED 228.08
↓ -1.6%vs previous period
AED 240 target
Gross margin
38.6%
↑ +2.3%percentage points
Above target
Executive insight

Revenue is 8.7% above plan, led by point-of-sale growth during the evening peak.

Best period
Thu, 6–9 PM
Opportunity
Average basket
Action
Review bundles
TREND + COMPARISON

Revenue performance

Current periodPrevious periodTarget
Peak AED 286KChange +12.4%Forecast AED 301K
COMPOSITION

Revenue by channel

AED 284KTotal
  • Point of sale48%
  • Online store27%
  • Invoices17%
  • Other8%
RANKING

Top product categories

Revenue / target
Electronics92K
Food81K
Home68K
Fashion54K
TIME PATTERN

Sales intensity

Low → high
08:0012:0016:0020:00
STATUS MIX

Order fulfilment

Completed72%
  • Completed 72%
  • Processing 19%
  • Delayed 9%
HOURLY DEMAND

Sales through the day

Peak 7 PM
PAYMENT MIX

Payment methods

Success rate 98.4%
Cards54%
Cash28%
Digital wallets13%
Buy now, pay later5%
LOCATION PERFORMANCE

Branch comparison

Sorted by revenue
BranchRevenueOrdersConversionTrend
Dubai MallAED 82.4K36442.8%+14.2%
Abu Dhabi CentralAED 71.8K31839.6%+9.7%
Sharjah CityAED 58.6K27937.1%+5.4%
Online storeAED 49.2K28731.9%-1.2%
09

Currency identity

ISO 4217 codes are canonical data; approved symbols are presentation. Every financial value remains directionally isolated.

Official UAE Dirham symbol
OFFICIAL UAE DIRHAM SYMBOL

The new symbol is the default display mark for AED.

Use the official artwork without redrawing it. Store and exchange the value with AED and ISO numeric code 784.

AED7842 minor units
CBUAE official source ↗
OFFICIAL SAUDI RIYAL SYMBOLThe approved 2025 mark replaces the legacy abbreviation in visual display.

Keep SAR and numeric code 682 in data, exports and ambiguous contexts.

SAMA usage guidelines ↗
CurrencyISO 4217NumericApproved symbolMinor unitsDisplay exampleAccounting example
United Arab Emirates Dirhammiddle-east AED784 AED 2 1,234.56 AED 1,234.56
Saudi Riyalmiddle-east SAR682 2 1,234.56 SAR 1,234.56
Qatari Riyalmiddle-east QAR634 ر.ق 2 ر.ق1,234.56 QAR 1,234.56
Kuwaiti Dinarmiddle-east KWD414 د.ك 3 د.ك1,234.560 KWD 1,234.560
Bahraini Dinarmiddle-east BHD048 د.ب 3 د.ب1,234.560 BHD 1,234.560
Omani Rialmiddle-east OMR512 ر.ع 3 ر.ع1,234.560 OMR 1,234.560
Jordanian Dinarmiddle-east JOD400 د.أ 3 د.أ1,234.560 JOD 1,234.560
Egyptian Poundmiddle-east EGP818 ج.م 2 ج.م1,234.56 EGP 1,234.56
United States Dollarglobal USD840 $ 2 $1,234.56 USD 1,234.56
Euroglobal EUR978 € 2 €1,234.56 EUR 1,234.56
Pound Sterlingglobal GBP826 £ 2 £1,234.56 GBP 1,234.56
Swiss Francglobal CHF756 CHF 2 CHF1,234.56 CHF 1,234.56
Canadian Dollarglobal CAD124 CA$ 2 CA$1,234.56 CAD 1,234.56
Australian Dollarglobal AUD036 A$ 2 A$1,234.56 AUD 1,234.56
Indian Rupeeasia INR356 ₹ 2 ₹1,234.56 INR 1,234.56
Pakistani Rupeeasia PKR586 ₨ 2 ₨1,234.56 PKR 1,234.56
Chinese Yuanasia CNY156 ¥ 2 ¥1,234.56 CNY 1,234.56
Japanese Yenasia JPY392 ¥ 0 ¥1,235 JPY 1,235
Philippine Pesoasia PHP608 ₱ 2 ₱1,234.56 PHP 1,234.56
New Zealand Dollarglobal NZD554 NZ$ 2 NZ$1,234.56 NZD 1,234.56
Singapore Dollarasia SGD702 S$ 2 S$1,234.56 SGD 1,234.56
Hong Kong Dollarasia HKD344 HK$ 2 HK$1,234.56 HKD 1,234.56
South Korean Wonasia KRW410 ₩ 0 ₩1,235 KRW 1,235
Turkish Liramiddle-east TRY949 ₺ 2 ₺1,234.56 TRY 1,234.56
South African Randglobal ZAR710 R 2 R1,234.56 ZAR 1,234.56
Brazilian Realglobal BRL986 R$ 2 R$1,234.56 BRL 1,234.56
Mexican Pesoglobal MXN484 MX$ 2 MX$1,234.56 MXN 1,234.56
Swedish Kronaglobal SEK752 kr 2 kr1,234.56 SEK 1,234.56
Norwegian Kroneglobal NOK578 kr 2 kr1,234.56 NOK 1,234.56
Danish Kroneglobal DKK208 kr 2 kr1,234.56 DKK 1,234.56
Polish Zlotyglobal PLN985 zł 2 zł1,234.56 PLN 1,234.56
Thai Bahtasia THB764 ฿ 2 ฿1,234.56 THB 1,234.56
Indonesian Rupiahasia IDR360 Rp 2 Rp1,234.56 IDR 1,234.56
Malaysian Ringgitasia MYR458 RM 2 RM1,234.56 MYR 1,234.56

34 supported currencies

1

ISO 4217

Persist alpha and numeric codes; never persist a visual glyph as identity.

2

Direction isolation

Wrap amounts in bdi or an explicit LTR run inside RTL content.

3

Ambiguous symbols

Use ISO beside $, ¥ and kr whenever context can contain multiple currencies.

10

Identity in real applications

The same logo, hierarchy and states must feel native on web, mobile, desktop and print.

WEB · DESKTOPPlatform workspace

Good morning, Ahmed

Net sales24,860.75 AEDOrders148Active stores12

Full wordmark in the permanent shell; compact icon only when the navigation collapses.

FLUTTER · MOBILEMobile point of sale
New sale•••
Search products…
☕Coffee45.00🥤Tumbler72.50👜Bag6.00＋More

Icon-first header, 44 px targets and one unmistakable primary action.

PRINT · 80 MMThermal receipt
Emerald Market
Coffee beans ×2
90.00
Travel tumbler
72.50
Reusable bag
6.00
Total176.93 AEDQR

High-contrast mark, black-safe totals and no color-dependent meaning.

APP ICONLauncher & favicon
10241804832

Use the icon alone, optically centred with a quiet safe zone on every platform.

Cross-platform contract Same primary colorSame type rolesSame semantic statesNative navigation patterns
11

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
12

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.
13

Accessibility & RTL

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
14

Motion laboratory

Small, purposeful interactions inspired by Lottie timing principles—implemented accessibly and ready for dotLottie assets where illustration is justified.

Playback
Automatically pauses outside the viewport
OPEN-SOURCE RUNTIMEMotion 13.1.1 · MIT

Production-ready Web Animations with reduced-motion and viewport safeguards.

Motion documentation ↗
1

Sale completed

Duration
120–180 ms
Easing
ease-out
Repeat
Once
2

Payment processing

Duration
600–900 ms
Easing
linear
Repeat
While active
3

Inventory sync

Duration
240–320 ms
Easing
ease-in-out
Repeat
Once
4

Receipt printing

Duration
180–240 ms
Easing
ease-out
Repeat
Once
5

Barcode scan

Duration
180 ms
Easing
linear
Repeat
Once
6

Helpful empty state

Duration
600 ms
Easing
ease-in-out
Repeat
Once
7

Notification arrival

Duration
240 ms
Easing
ease-out
Repeat
Once
8

Section transition

Duration
240–320 ms
Easing
ease-in-out
Repeat
Once
9

Added to cart

Duration
220–300 ms
Easing
spring
Repeat
Once
10

Refund confirmed

Duration
260–360 ms
Easing
ease-out
Repeat
Once
11

Approval granted

Duration
180–240 ms
Easing
ease-out
Repeat
Once
12

Action rejected

Duration
180–240 ms
Easing
ease-out
Repeat
Once
13

File upload

Duration
500–800 ms
Easing
ease-in-out
Repeat
While active
14

Report download

Duration
300–440 ms
Easing
ease-out
Repeat
Once
15

Connection restored

Duration
300–500 ms
Easing
ease-out
Repeat
Once
16

Offline warning

Duration
240–320 ms
Easing
ease-in-out
Repeat
Once
17

Drawer opening

Duration
240–320 ms
Easing
ease-out
Repeat
Once
18

Toast message

Duration
200–260 ms
Easing
ease-out
Repeat
Once
19

Modal entrance

Duration
220–300 ms
Easing
ease-out
Repeat
Once
20

Skeleton loading

Duration
900–1200 ms
Easing
linear
Repeat
While active
21

Counter update

Duration
180–240 ms
Easing
ease-out
Repeat
Once
22

Chart reveal

Duration
420–600 ms
Easing
ease-out
Repeat
Once
23

Row reordered

Duration
220–300 ms
Easing
spring
Repeat
Once
24

Focused action

Duration
160–220 ms
Easing
ease-out
Repeat
Once

Meaning before delight

Motion confirms state, orientation or progress. It never delays the task.

prefers-reduced-motion

Reduced-motion users receive the final state immediately, with no lost information.

Runtime rule

Pause looping motion off-screen and when the page is hidden.

15

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