Sistema ng biswal na identidad ng DPOS

01

Mga pundasyon

Ang mga desisyon na nagpapanatili sa bawat screen, dokumento at mensahe na kinikilalang DPOS.

Kalinawan

Gawing hindi mapag-aalinlanganan ang susunod na aksyon at ang kahihinatnan nito.

Magtiwala

Gumamit ng mga tumpak na estado, nababasang kabuuan at mahinahong feedback.

Pagpapatuloy

Isang visual na grammar mula sa interface hanggang sa invoice.

Kahusayan

Bawasan ang dekorasyon; panatilihin ang kapaki-pakinabang na density.

Malinaw na operasyon ng negosyo, mula sa punto ng pagbebenta hanggang sa pagpapasya.

02

Sistema ng logo

Gamitin ang aprubadong pinagmumulan ng likhang sining nang eksakto tulad ng ibinigay. Huwag kailanman muling likhain ang pangalan sa tabi nito.

Pangunahing lockup01

Pangunahing icon02

Isang kulay na tinta03

Baliktad na puti04

Icon ng app05

Favicon scale06

48

32

24

16

x

Maaliwalas na espasyo

Panatilihin ang isang icon-aperture unit sa bawat gilid.

140 px / 25 mm

Minimum na sukat

Gamitin ang icon na mag-isa sa ibaba ng pinakamababang laki ng full-lockup.

Pag-align

I-align sa isang tunay na gilid ng grid, hindi sa visual center ng isang random na lalagyan.

CROSS-PLATFORM CONTRACT

Ang logo ay nakapaloob, nakasentro at hindi kailanman na-crop.

12.5% SAFE AREA

Tama: naglalaman

Mali: cover crops artwork

Icon ng Android adaptive

Icon ng iOS app

Splash screen

Header ng application

Resibo

Sosyal na avatar

.dpos-safe-logo > img {
  position: absolute; inset: 12.5%;
  width: 75%; height: 75%;
  object-fit: contain;
  object-position: center;
}

Gawin

Gumamit ng mga opisyal na asset ng SVG.
Panatilihin ang mga sukat at malinaw na espasyo.
Ilagay sa tahimik, mataas na contrast na ibabaw.

huwag

Huwag muling kulayan, iunat, i-crop o paikutin.
Huwag magdagdag ng anino, outline o glow.
Huwag ulitin ang DPOS bilang sintetikong teksto.

Opisyal na likhang siningNaayos, nasuri at handa sa produksyon.

Wordmark SVG Icon na SVG

03

Sistema ng kulay

Ang logo teal ay ang brand anchor. Ang mga neutral ay nagdadala ng impormasyon; Ang mga semantic na kulay ay may kahulugan lamang.

Tagumpay#168A4A

Magreserba para sa totoong katayuan at feedback.

Babala#D97706

Magreserba para sa totoong katayuan at feedback.

Error / mapanira#D64545

Magreserba para sa totoong katayuan at feedback.

Impormasyon#087EA4

Magreserba para sa totoong katayuan at feedback.

PINAMAMAHALAAN NA KOMERSIAL ACCENT

Nakukuha lamang ng Orange ang atensyon kapag mahalaga ang isang komersyal na desisyon.

Ang Teal ay nananatiling pangunahing pagpapatakbo. Ang conversion na orange ay nakalaan para sa pagsubok, pagbili, pag-upgrade, subscription at mga pagkilos na demo.

5.18:1Puting text · WCAG AA#C2410C

Pangunahing pagpapatakbo

I-save, gumawa, kumpirmahin, mag-navigate at kumpletuhin ang pang-araw-araw na gawain.

Komersyal na conversion

Gamitin nang isang beses sa isang decision zone para sa pinakamalinaw na pagkilos ng kita.

Gamitin para sa

Bumili ngayon, mag-upgrade ng plano o mag-subscribe.
Magsimula ng pagsubok o mag-book ng demo ng produkto.
Hindi hihigit sa isang orange na aksyon sa bawat zone ng desisyon.

Huwag kailanman gamitin para sa

Mga babala, mapanirang aksyon o mga error sa pagpapatunay.
I-save, gumawa at nakagawiang mga pagkilos sa pag-navigate.
Maramihang nakikipagkumpitensya na mga pindutan sa isang viewport.

Contrast checker

Dapat umabot sa 4.5:1 ang body text; dapat umabot sa 3:1 ang malaking text at non-text na UI.

Foreground Background

DPOS Malinaw at nababasa

04

Typography

Ang bawat napiling wika ay ipinapakita sa aprubadong default na font nito habang nananatiling stable ang mga operational number.

Piniling wika · inaprubahang default

Manrope

Aa Bb Cc Dd Ee Ff Gg Ng

Nagsisimula ang matalinong operasyon sa isang malinaw na pasya.

0123456789 · AED 12,450.00

LIVE TYPE PLAYGROUND

Subukan ang eksaktong mga salita bago ang pag-apruba

Ang preview ay sumusunod sa napiling wika, direksyon at naaprubahang default na font.

Halimbawang teksto Sukat 38px

MANROPE · FIL

Nagsisimula ang matalinong operasyon sa isang malinaw na pasya.

Mga timbang: 400 body · 500 controls · 600 heading · 700 display

Display

عنوان بارز

48 / 56700

H1

عنوان الصفحة

40 / 48700

H2

عنوان القسم

30 / 40700

H3

عنوان فرعي

22 / 30600

Body

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

16 / 27400

Small

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

14 / 22400

Caption

تسمية قصيرة

12 / 18500

Mga halaga

AED 12,450.00

Panatilihing nakahiwalay ang currency at value na LTR.

Mga petsa

25 Aug 2026 · 2026/08/25

Gumamit ng isang format sa bawat konteksto.

Mga identifier

INV-2026-00124

Huwag kailanman magsalamin ng mga code o serial.

05

Layout at geometry

Isang predictable na geometry para sa mga siksik na interface ng pagpapatakbo at mahinahong komunikasyon.

8 px na espasyo

481216243240486480

Radius

0px4px8px12px16px24px

Elevation

0123

123456789101112

12-column desktop grid

24 px gutters · 24 px page inset · maximum na lapad ng content na 1440 px.

06

Open-source na aklatan ng icon

Nagbibigay ang Lucide ng pare-pareho, malawak at naaalog na sistema para sa commerce, imbentaryo, pananalapi at mga daloy ng trabaho sa platform.

LIBRARYLucideISC Open Source · 1,791 icons

DEFAULT24 px · 2 pxPabilog na takip at pagsali

TOUCH TARGET44 × 44 pxMaaaring manatiling 20–24 px ang glyph

Buksan ang dokumentasyon ng Lucide ↗

Estado

DefaultMag-hoverAktiboHindi pinaganaNakakasira

Gawin

Ipares ang hindi pamilyar na mga icon sa text.
Panatilihin ang isang kahulugan sa bawat icon.
Gumamit lamang ng kulay upang palakasin ang estado.

huwag

Huwag paghaluin ang mga pamilya ng icon.
Huwag iunat o punan ang mga icon ng outline.
Huwag i-mirror ang mga icon na may kahulugang independiyenteng direksyon.

07

Mga bahagi at estado

Maaaring magamit muli ang mga pamilya ng interface na may kumpletong pakikipag-ugnayan, pagpapatunay, pag-load at mga estado ng pahintulot.

6.1

Mga Pindutan

Minimum na taas 44 px · 16 px horizontal inset · isang pangunahing aksyon sa bawat rehiyon.

VariantDefaultMag-hoverPinindotFocusNaglo-loadHindi pinagana

Pangunahin

Pangalawa

Tahimik

Nakakasira

Icon lang

6.2

Mga patlang at pagpapatunay

Ang isang label ay palaging nakikita. Ipinapaliwanag ng teksto ng error ang pag-aayos, hindi lamang ang pagkabigo.

Default Napuno Focus TagumpayAvailable BabalaGumamit ng hindi bababa sa 12 character. ErrorMaglagay ng value na mas malaki sa zero. Basahin lamang Hindi pinagana

Pumili PeraAED Petsa Textarea

6.3

Pagpili at pag-navigate

Ang napiling estado ay ipinapaalam sa pamamagitan ng hugis, label at kulay — hindi kailanman kulay lamang.

Napiling opsyon Walang check na opsyon Naka-disable na opsyon

Unang pagpipilian Pangalawang pagpipilian

6.4

Katayuan at feedback

Ang katayuan ay tahasan, nagpapatuloy kapag kinahinatnan, at ipinares sa isang kapaki-pakinabang na susunod na pagkilos.

BinayaranNakabinbinPinoprosesoOverdue naDraftNa-refund

Linear na pag-unlad64%

123

6.5

Mga layer at lumilipas na UI

Ang mga menu, tooltip, drawer at dialog ay nagpapanatili ng konteksto at kontrol sa keyboard.

Kumpirmahin ang pagtanggal

Ang pagkilos na ito ay hindi maaaring i-undo. Tanggalin ang invoice INV-00124?

Reusable na pakete

Sinasaklaw ng anim na pinamamahalaang pamilya ang mga aksyon, form, feedback, data, shell at mga overlay sa web, Flutter, email at print.

Labing pitong mga sanggunian sa interface na inaprubahan ng manager · walang dependency sa runtime.

I-download ang bahagi ng CSS I-download ang component manifest

08

Data at pagpapatakbo

Ang mga talahanayan ay ang pangunahing operational surface: nababasa, nabubukod, ligtas sa keyboard at tumutugon.

Numero ng invoice ↓	Customer	Petsa	Katayuan	Kabuuan	Binayaran	Balanse
INV-2026-00124	Emerald Market	25/08/2026	Binayaran	12,450.00 AED	12,450.00 AED	0.00 AED
INV-2026-00123	Teknolohiya ng Gulpo	24/08/2026	Bahagyang	8,750.00 AED	5,000.00 AED	3,750.00 AED
INV-2026-00122	North Trading	23/08/2026	Overdue na	15,300.00 AED	0.00 AED	15,300.00 AED
INV-2026-00121	Rashed Group	22/08/2026	Draft	5,250.00 AED	0.00 AED	5,250.00 AED
INV-2026-00120	Pabrika ng Unyon	21/08/2026	Na-refund	9,800.00 AED	9,800.00 AED	0.00 AED
INV-2026-00119	Mga Serbisyong Rayan	20/08/2026	Binayaran	3,200.00 AED	3,200.00 AED	0.00 AED

≥ 1280 pxDesktop

Buong talahanayan, mga tool at maramihang pagkilos.

768–1279 pxTableta

Mga hanay ng priyoridad; mga detalye on demand.

< 768 pxMobile structured row

INV-2026-00124Binayaran

Customer: Emerald Market
Kabuuan: 12,450.00 AED

Mga hilera ng key-value, hindi kailanman isang unstructured card.

Walang laman

Wala pang mga invoice.

Walang resulta

Walang tugma para sa kasalukuyang mga filter.

Naglo-load

Panatilihin ang table geometry.

Error

Hindi ma-load ang data.

Tinanggihan ang pahintulot

Hindi matingnan ng iyong tungkulin ang data na ito.

Offline / lipas na

Ipinapakita ang huling ligtas na snapshot.

netong kita

AED 284,650

↑ +12.4%vs nakaraang panahon

Nasa target

Mga order

1,248

↑ +8.1%vs nakaraang panahon

96% natupad

Karaniwang basket

AED 228.08

↓ -1.6%vs nakaraang panahon

AED 240 na target

Gross margin

38.6%

↑ +2.3%porsyentong puntos

Sa itaas ng target

Executive insight

Ang kita ay 8.7% sa itaas ng plano, na pinangungunahan ng paglaki ng point-of-sale sa peak ng gabi.

Pinakamahusay na panahon: Huwebes, 6–9 PM
Pagkakataon: Karaniwang basket
Aksyon: Suriin ang mga bundle

TREND + COMPARISON

Pagganap ng kita

Kasalukuyang panahonNakaraang panahonTarget

300K225K150K75K0

Linggo 1Linggo 2Linggo 3Linggo 4Linggo 5

KOMPOSISYON

Kita ayon sa channel

AED 284KKabuuan

Point of sale48%
Online na tindahan27%
Mga invoice17%
Iba pa8%

RANKING

Mga nangungunang kategorya ng produkto

Kita / target

Electronics92K

Pagkain81K

Bahay68K

Fashion54K

PATTERN NG PANAHON

Tindi ng benta

Mababa → mataas

08:0012:0016:0020:00

STATUS MIX

Pagtupad ng order

Nakumpleto72%

Nakumpleto 72%
Pinoproseso 19%
Naantala 9%

ORAS-ORAS NA DEMAND

Benta sa buong araw

Tuktok 7 PM

249

3210

4711

5812

451

692

844

1007

769

5111

BAYAD MIX

Mga paraan ng pagbabayad

Rate ng tagumpay 98.4%

Mga kard54%

Cash28%

Mga digital na wallet13%

Bumili ngayon, magbayad mamaya5%

PAGGANAP NG LOKASYON

Paghahambing ng sangay

Pinagbukud-bukod ayon sa kita

Sangay	Kita	Mga order	Pagbabalik-loob	Uso
Dubai Mall	AED 82.4K	364	42.8%	+14.2%
Abu Dhabi Central	AED 71.8K	318	39.6%	+9.7%
Lungsod ng Sharjah	AED 58.6K	279	37.1%	+5.4%
Online na tindahan	AED 49.2K	287	31.9%	-1.2%

09

Pagkakakilanlan ng currency

Ang mga ISO 4217 code ay canonical data; Ang mga inaprubahang simbolo ay presentasyon. Ang bawat halaga ng pananalapi ay nananatiling nakahiwalay sa direksyon.

OPISYAL NA SIMBOL NG UAE DIRHAM

Ang bagong simbolo ay ang default na marka ng pagpapakita para sa AED.

Gamitin ang opisyal na likhang sining nang hindi ito muling iginuhit. Iimbak at palitan ang halaga gamit ang AED at ISO numeric code 784.

AED7842 menor de edad na yunit

Opisyal na source ng CBUAE ↗

OPISYAL NA SAUDI RIYAL SYMBOLPinapalitan ng inaprubahang 2025 mark ang legacy na pagdadaglat sa visual na display.

Panatilihin ang SAR at numeric code 682 sa data, pag-export at hindi malinaw na konteksto.

Mga alituntunin sa paggamit ng SAMA ↗

Pera	ISO 4217	Numeric	Naaprubahang simbolo	Mga maliliit na yunit	Ipakita ang halimbawa	Halimbawa ng accounting
United Arab Emirates Dirhammiddle-east	AED	784		2	1,234.56	AED 1,234.56
Saudi Riyalmiddle-east	SAR	682		2	1,234.56	SAR 1,234.56
Qatari Riyalmiddle-east	QAR	634	ر.ق	2	ر.ق1,234.56	QAR 1,234.56
Kuwaiti Dinarmiddle-east	KWD	414	د.ك	3	د.ك1,234.560	KWD 1,234.560
Bahraini Dinarmiddle-east	BHD	048	د.ب	3	د.ب1,234.560	BHD 1,234.560
Omani Rialmiddle-east	OMR	512	ر.ع	3	ر.ع1,234.560	OMR 1,234.560
Jordanian Dinarmiddle-east	JOD	400	د.أ	3	د.أ1,234.560	JOD 1,234.560
Egyptian Poundmiddle-east	EGP	818	ج.م	2	ج.م1,234.56	EGP 1,234.56
United States Dollarglobal	USD	840	$	2	$1,234.56	USD 1,234.56
Euroglobal	EUR	978	€	2	€1,234.56	EUR 1,234.56
Pound Sterlingglobal	GBP	826	£	2	£1,234.56	GBP 1,234.56
Swiss Francglobal	CHF	756	CHF	2	CHF1,234.56	CHF 1,234.56
Canadian Dollarglobal	CAD	124	CA$	2	CA$1,234.56	CAD 1,234.56
Australian Dollarglobal	AUD	036	A$	2	A$1,234.56	AUD 1,234.56
Indian Rupeeasia	INR	356	₹	2	₹1,234.56	INR 1,234.56
Pakistani Rupeeasia	PKR	586	₨	2	₨1,234.56	PKR 1,234.56
Chinese Yuanasia	CNY	156	¥	2	¥1,234.56	CNY 1,234.56
Japanese Yenasia	JPY	392	¥	0	¥1,235	JPY 1,235
Philippine Pesoasia	PHP	608	₱	2	₱1,234.56	PHP 1,234.56
New Zealand Dollarglobal	NZD	554	NZ$	2	NZ$1,234.56	NZD 1,234.56
Singapore Dollarasia	SGD	702	S$	2	S$1,234.56	SGD 1,234.56
Hong Kong Dollarasia	HKD	344	HK$	2	HK$1,234.56	HKD 1,234.56
South Korean Wonasia	KRW	410	₩	0	₩1,235	KRW 1,235
Turkish Liramiddle-east	TRY	949	₺	2	₺1,234.56	TRY 1,234.56
South African Randglobal	ZAR	710	R	2	R1,234.56	ZAR 1,234.56
Brazilian Realglobal	BRL	986	R$	2	R$1,234.56	BRL 1,234.56
Mexican Pesoglobal	MXN	484	MX$	2	MX$1,234.56	MXN 1,234.56
Swedish Kronaglobal	SEK	752	kr	2	kr1,234.56	SEK 1,234.56
Norwegian Kroneglobal	NOK	578	kr	2	kr1,234.56	NOK 1,234.56
Danish Kroneglobal	DKK	208	kr	2	kr1,234.56	DKK 1,234.56
Polish Zlotyglobal	PLN	985	zł	2	zł1,234.56	PLN 1,234.56
Thai Bahtasia	THB	764	฿	2	฿1,234.56	THB 1,234.56
Indonesian Rupiahasia	IDR	360	Rp	2	Rp1,234.56	IDR 1,234.56
Malaysian Ringgitasia	MYR	458	RM	2	RM1,234.56	MYR 1,234.56

34 mga suportadong pera

1

ISO 4217

Ipagpatuloy ang mga alpha at numeric code; hindi kailanman ipagpatuloy ang isang visual na glyph bilang pagkakakilanlan.

2

Paghihiwalay ng direksyon

I-wrap ang mga halaga sa bdi o isang tahasang LTR run sa loob ng RTL content.

3

Mga hindi maliwanag na simbolo

Gumamit ng ISO sa tabi ng $, ¥ at kr sa tuwing ang konteksto ay maaaring maglaman ng maraming pera.

4

Mga mapagkukunan ng awtoridad

ISO 4217 / SIX ↗
SAMA / SAR ↗
Unicode currency symbols ↗

10

Pagkakakilanlan sa mga tunay na aplikasyon

Ang parehong logo, hierarchy, at mga estado ay dapat na parang native sa web, mobile, desktop at print.

WEB · DESKTOPPlatform na workspace

Magandang umaga, Ahmed

Mga netong benta24,860.75 AEDMga order148Mga aktibong tindahan12

Buong wordmark sa permanenteng shell; compact na icon lamang kapag nag-collapse ang navigation.

FLUTTER · MOBILEMobile point of sale

Bagong benta•••

Maghanap ng mga produkto…

☕kape45.00🥤Tumbler72.50👜Bag6.00＋Higit pa

Icon-first header, 44 px na mga target at isang hindi mapag-aalinlanganang pangunahing aksyon.

PRINT · 80 MMThermal na resibo

Emerald Market

Mga butil ng kape ×2: 90.00
Tumbler sa paglalakbay: 72.50
Reusable na bag: 6.00

Kabuuan176.93 AEDQR

High-contrast mark, black-safe na mga kabuuan at walang color-dependent na kahulugan.

APP ICONLauncher at favicon

1024

180

48

32

Gamitin ang icon na mag-isa, optically centered na may tahimik na safe zone sa bawat platform.

Kontrata sa cross-platform Parehong pangunahing kulayParehong uri ng mga tungkulinParehong semantic statesMga pattern ng katutubong nabigasyon

11

Mga dokumento at invoice

Isang pinag-isang wika ng dokumento para sa mga invoice ng buwis, mga resibo, mga panipi, mga tala ng kredito at pag-print ng pagpapatakbo.

15 mmLigtas na margin12Mga column ng dokumento40 pxTinatayang hilera ng mesa4.5:1Mag-print ng contrastLTRMga halaga at ID

Invoice ng buwis

TAX INVOICE

NagtitindaDigital Innovation Technology

Riyadh, Saudi Arabia
TRN 310987654300003
accounts@ditcpos.com

CustomerEmerald Market LLC

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

Numero ng invoice: INV-2026-00124
Petsa ng isyu: 25/08/2026
takdang petsa: 08/09/2026
Pera: AED

#	Paglalarawan	Qty	Presyo ng unit	VAT	Kabuuan
1	Point of sale na subscription	1	8,000.00	400.00	8,400.00
2	Serbisyo sa onboarding ng imbentaryo	1	3,500.00	175.00	3,675.00
3	Configuration ng thermal receipt	1	500.00	25.00	525.00

Mga tala at tuntunin

Ang pagbabayad ay dapat bayaran sa loob ng 14 na araw. Sipiin ang numero ng invoice kasama ng iyong paglilipat.

QR

Subtotal: 12,000.00 AED
VAT 5%: 600.00 AED
diskwento: 150.00 AED
Kabuuan: 12,450.00 AED
Binayaran: 12,450.00 AED
Balanse: 0.00 AED

Sipi

Credit note

Purchase order

Tala sa paghahatid

Label ng produkto

letterhead

Business card

12

Komunikasyon

Ang transaksyong email, mga notification at boses ng brand ay sumusunod sa parehong hierarchy at semantic na disiplina.

Matagumpay na naibigay ang iyong invoice

Kumusta, handa na ang iyong invoice sa buwis. Suriin ang mga detalye at i-download ang naaprubahang kopya gamit ang button sa ibaba.

Tingnan ang invoice

Ang pagbabayad ay dapat bayaran sa Setyembre 8, 2026.

Invoice: INV-2026-00124
Kabuuan: 12,450.00 AED
Katayuan: Binayaran

Tagumpay

Natanggap ang bayad

Tingnan ang mga detalye

Paalala

Malapit na ang due date

Tingnan ang mga detalye

Overdue na

Overdue na ang pagbabayad ng invoice

Tingnan ang mga detalye

Maaliwalas

"Maglagay ng halagang mas malaki sa zero."

Hindi: "Di-wastong input."

Kalmado

"Hindi pa namin ito mai-save. Nandito pa rin ang mga entry mo."

Ipaliwanag ang epekto bago sisihin.

Naaaksyunan

“Muling kumonekta, pagkatapos ay subukang muli.”

Palaging magbigay ng kapaki-pakinabang na susunod na hakbang.

13

Accessibility at RTL

Ang inclusive na pag-uugali ay bahagi ng kontrata ng pagkakakilanlan, hindi isang pangwakas na pagsusuri sa paningin.

Contrast

AA para sa body text; 3:1 para sa malalaking teksto, mga icon at mga kontrol.

Focus

Isang nakikitang 2 px na singsing na may 2 px na offset sa bawat interactive na kontrol.

Pindutin ang target

44 × 44 px na minimum kahit na mas maliit ang nakikitang icon.

Keyboard

Lohikal na pagkakasunud-sunod, walang mga bitag, Isinasara ng Escape ang mga lumilipas na layer.

RTL at LTR

Layout ng salamin, hindi mga identifier, currency, chart o kontrol ng media.

Galaw

180–240 ms para sa feedback at zero mahahalagang impormasyon sa animation.

RTL

Mga detalye ng invoice

Numero ng invoice: INV-00124
Kabuuan: AED 12,450.00

LTR

Invoice details

Invoice number: INV-00124
Total: AED 12,450.00

14

Motion laboratory

Maliit, may layunin na mga pakikipag-ugnayan na hango sa mga prinsipyo ng timing ng Lottie—na ipinapatupad nang madaling ma-access at handa para sa mga asset ng dotLottie kung saan ang paglalarawan ay makatwiran.

OPEN-SOURCE RUNTIMEMotion 13.1.1 · MIT

Mga Web Animation na handa sa produksyon na may mga reduced-motion at viewport safeguards.

Dokumentasyon ng paggalaw ↗

1

Nakumpleto ang pagbebenta

Tagal: 120–180 ms
Pagpapagaan: ease-out
Ulitin: minsan

2

Pagproseso ng pagbabayad

Tagal: 600–900 ms
Pagpapagaan: linear
Ulitin: Habang aktibo

3

Pag-sync ng imbentaryo

Tagal: 240–320 ms
Pagpapagaan: ease-in-out
Ulitin: minsan

4

Pag-imprenta ng resibo

Tagal: 180–240 ms
Pagpapagaan: ease-out
Ulitin: minsan

5

Pag-scan ng barcode

Tagal: 180 ms
Pagpapagaan: linear
Ulitin: minsan

6

Nakatutulong na walang laman na estado

Tagal: 600 ms
Pagpapagaan: ease-in-out
Ulitin: minsan

7

Pagdating ng abiso

Tagal: 240 ms
Pagpapagaan: ease-out
Ulitin: minsan

8

Paglipat ng seksyon

Tagal: 240–320 ms
Pagpapagaan: ease-in-out
Ulitin: minsan

9

Idinagdag sa cart

Tagal: 220–300 ms
Pagpapagaan: spring
Ulitin: minsan

10

Nakumpirma ang refund

Tagal: 260–360 ms
Pagpapagaan: ease-out
Ulitin: minsan

11

Ipinagkaloob ang pag-apruba

Tagal: 180–240 ms
Pagpapagaan: ease-out
Ulitin: minsan

12

Tinanggihan ang pagkilos

Tagal: 180–240 ms
Pagpapagaan: ease-out
Ulitin: minsan

13

Pag-upload ng file

Tagal: 500–800 ms
Pagpapagaan: ease-in-out
Ulitin: Habang aktibo

14

Iulat ang pag-download

Tagal: 300–440 ms
Pagpapagaan: ease-out
Ulitin: minsan

15

Naibalik ang koneksyon

Tagal: 300–500 ms
Pagpapagaan: ease-out
Ulitin: minsan

16

Offline na babala

Tagal: 240–320 ms
Pagpapagaan: ease-in-out
Ulitin: minsan

17

Pagbukas ng drawer

Tagal: 240–320 ms
Pagpapagaan: ease-out
Ulitin: minsan

18

Mensahe ng toast

Tagal: 200–260 ms
Pagpapagaan: ease-out
Ulitin: minsan

20

Naglo-load ang balangkas

Tagal: 900–1200 ms
Pagpapagaan: linear
Ulitin: Habang aktibo

21

Counter update

Tagal: 180–240 ms
Pagpapagaan: ease-out
Ulitin: minsan

22

Pagbubunyag ng tsart

Tagal: 420–600 ms
Pagpapagaan: ease-out
Ulitin: minsan

23

Muling inayos ang row

Tagal: 220–300 ms
Pagpapagaan: spring
Ulitin: minsan

24

Nakatuon na aksyon

Tagal: 160–220 ms
Pagpapagaan: ease-out
Ulitin: minsan

Ibig sabihin bago ang tuwa

Kinukumpirma ng paggalaw ang estado, oryentasyon o progreso. Hindi nito inaantala ang gawain.

Motion + dotLottie

Gamitin ang Motion para sa feedback sa interface at bukas na .lottie asset para sa kumplikadong paglalarawan; panatilihin ang kritikal na estado sa naa-access na HTML.

Motion / MIT ↗
dotLottie Web / MIT ↗

prefers-reduced-motion

Agad na natatanggap ng mga gumagamit ng pinababang galaw ang huling estado, nang walang nawawalang impormasyon.

Panuntunan ng runtime

I-pause ang pag-loop na paggalaw sa labas ng screen at kapag nakatago ang page.

15

Mga asset, token, at pamamahala

Isang lugar ng pamamahagi para sa mga nasuri na asset, mga token ng pagpapatupad at mga pagsusuri sa release.

SVG

Mga opisyal na logo

Buong lockup at icon mula sa aprubadong pinagmulan ng vector.

Wordmark Icon

CSS

Mga token ng disenyo

Mga kulay, uri, spacing, geometry, elevation, motion at focus.

JSON

Token manifest

Nababasa ng makina na kontrata para sa web, Flutter, email at print.

UI

Component package

Mga magagamit muli na pagkilos, field, status, data, shell at overlay na pamilya.

CSS Manifest

Digital

sRGB
SVG / WebP / PNG
Logo na minimum na 140 px
Transparent na background kapag kinakailangan

Print

CMYK / PDF/X-4
Logo na hindi bababa sa 25 mm
3 mm bleed kung saan naaangkop
I-embed o outline ang mga lisensyadong font

Mga dokumento

A4 / 80 mm
15 mm na ligtas na margin
Black-safe na mga kabuuan at QR
Huwag kailanman mag-rasterise ng maliit na text

1Pinagmulan

Gumamit ng aprubadong likhang sining at mga token.

2Bumuo

Gumawa mula sa mga pamilyang magagamit muli.

3Balik-aral

Suriin ang nilalaman, kaibahan, RTL at mga estado.

4Palayain

Itala ang desisyon at bersyon.

BAGO I-PUBLISH

Brand preflight

Ang isang release ay hindi on-brand hanggang sa pumasa ang bawat naaangkop na tseke.

Opisyal na logo at #125076 pangunahin
Kumpletuhin ang default, focus, error, loading at disabled na estado
Ang mga talahanayan, kabuuan at pagkakakilanlan ay nananatiling nababasa
Na-verify ang Arabic RTL at English LTR
AA contrast, 44 px na mga target at pinaliit na paggalaw
Nasuri ang A4, resibo, email at tumutugon na output

Isang kumpletong desisyon, isang item sa isang pagkakataon.

Isang malinaw na pagkakakilanlan para sa bawat karanasan.

Maaliwalas na espasyo

Minimum na sukat

Pag-align

Gawin

huwag

Nakukuha lamang ng Orange ang atensyon kapag mahalaga ang isang komersyal na desisyon.

Pangunahing pagpapatakbo

Komersyal na conversion

Gamitin para sa

Huwag kailanman gamitin para sa

Contrast checker

Manrope

Subukan ang eksaktong mga salita bago ang pag-apruba

8 px na espasyo

Radius

Elevation

Estado

Gawin

huwag

Reusable na pakete

Ang bagong simbolo ay ang default na marka ng pagpapakita para sa AED.

ISO 4217

Paghihiwalay ng direksyon

Mga hindi maliwanag na simbolo

Mga mapagkukunan ng awtoridad

Magandang umaga, Ahmed

Matagumpay na naibigay ang iyong invoice

Maaliwalas

Kalmado

Naaaksyunan

Contrast

Focus

Pindutin ang target

Keyboard

RTL at LTR

Galaw

Nakumpleto ang pagbebenta

Pagproseso ng pagbabayad

Pag-sync ng imbentaryo

Pag-imprenta ng resibo

Pag-scan ng barcode

Nakatutulong na walang laman na estado

Pagdating ng abiso

Paglipat ng seksyon

Idinagdag sa cart

Nakumpirma ang refund

Ipinagkaloob ang pag-apruba

Tinanggihan ang pagkilos

Pag-upload ng file

Iulat ang pag-download

Naibalik ang koneksyon

Offline na babala

Pagbukas ng drawer

Mensahe ng toast

Modal na pasukan

Naglo-load ang balangkas

Counter update

Pagbubunyag ng tsart

Muling inayos ang row

Nakatuon na aksyon

Ibig sabihin bago ang tuwa

Motion + dotLottie

prefers-reduced-motion

Panuntunan ng runtime

Mga opisyal na logo

Mga token ng disenyo

Token manifest

Component package

Digital

Print

Mga dokumento

Brand preflight