Saltar a la guía
DPOS
Español
Descargar recursos
REVISIÓN DE IDENTIDAD · RONDA 02

Una decisión completa, un elemento a la vez.

Marque cada área después de revisar sus ejemplos. Sus elecciones y notas permanecen en este dispositivo hasta que las exporte o las borre.

0 / 10No iniciado
0%
DECISIÓN ACTUALEn revisión

Una identidad clara para cada experiencia.

Una referencia viva que convierte la marca aprobada en un lenguaje preciso para interfaces, datos, facturas, impresión y comunicación.

Explorar el sistema
Manrope · idioma seleccionadoÁ É Í Ñ Ó Ú Ü ¿ ¡Las operaciones inteligentes comienzan con una decisión clara.
Primaria oficial #125076 Sistema de espaciado de 8 px Contraste mínimo AA Dirección y tipografía con reconocimiento local
01

Fundamentos

Las decisiones que mantienen cada pantalla, documento y mensaje reconocible como DPOS.

claridad

Haga que la siguiente acción y sus consecuencias sean inconfundibles.

confianza

Utilice estados precisos, totales legibles y comentarios tranquilos.

continuidad

Una gramática visual desde la interfaz hasta la factura.

Eficiencia

Reducir la decoración; preservar la densidad útil.

Operación clara del negocio, desde el punto de venta hasta la decisión.
03

Sistema de color

El logo verde azulado es el ancla de la marca. Los neutrales transportan información; Los colores semánticos sólo tienen significado.

Éxito#168A4A

Reserve para conocer el estado real y los comentarios.

Advertencia#D97706

Reserve para conocer el estado real y los comentarios.

Error / destructivo#D64545

Reserve para conocer el estado real y los comentarios.

Información#087EA4

Reserve para conocer el estado real y los comentarios.

ACENTO COMERCIAL REGULADO

Orange llama la atención sólo cuando una decisión comercial importa.

Teal sigue siendo el principal operativo. La conversión naranja está reservada para acciones de prueba, compra, actualización, suscripción y demostración.

5.18:1Texto blanco · WCAG AA#C2410C

Primaria operativa

Guarde, cree, confirme, navegue y complete el trabajo diario.

Conversión comercial

Úselo una vez en una zona de decisión para obtener la acción de ingresos más clara.

Usar para

  • Compre ahora, actualice un plan o suscríbase.
  • Inicie una prueba o reserve una demostración del producto.
  • Como máximo una acción naranja en cada zona de decisión.

Nunca lo use para

  • Advertencias, acciones destructivas o errores de validación.
  • Guardar, crear y acciones de navegación rutinarias.
  • Múltiples botones competitivos en una ventana gráfica.

corrector de contraste

El texto del cuerpo debe alcanzar 4,5:1; La interfaz de usuario con texto grande y sin texto debe alcanzar una proporción de 3:1.

DPOS Claro y legible
04

tipografía

Cada idioma seleccionado se muestra en su fuente predeterminada aprobada mientras los números operativos permanecen estables.

Idioma seleccionado · predeterminado aprobado

Manrope

Á É Í Ñ Ó Ú Ü ¿ ¡

Las operaciones inteligentes comienzan con una decisión clara.

0123456789 · AED 12,450.00

ZONA DE JUEGOS TIPO VIVO

Pruebe las palabras exactas antes de la aprobación.

La vista previa sigue el idioma seleccionado, la dirección y la fuente predeterminada aprobada.

MANROPE · ES

Las operaciones inteligentes comienzan con una decisión clara.

Pesos: 400 cuerpo · 500 controles · 600 títulos · 700 display
Display

عنوان بارز

48 / 56700
H1

عنوان الصفحة

40 / 48700
H2

عنوان القسم

30 / 40700
H3

عنوان فرعي

22 / 30600
Body

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

16 / 27400
Small

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

14 / 22400
Caption

تسمية قصيرة

12 / 18500
Cantidades

AED 12,450.00

Mantenga la moneda y el valor LTR aislados.
Fechas

25 Aug 2026 · 2026/08/25

Utilice un formato por contexto.
Identificadores

INV-2026-00124

Nunca refleje códigos o números de serie.
05

Diseño y geometría

Una geometría predecible para interfaces operativas densas y una comunicación tranquila.

espaciado de 8 píxeles

481216243240486480

Radio

0px4px8px12px16px24px

Elevación

0123
123456789101112
Cuadrícula de escritorio de 12 columnas

Canales de 24 px · Inserto de página de 24 px · Ancho máximo del contenido 1440 px.

06

Biblioteca de iconos de código abierto

Lucide proporciona un sistema consistente, amplio y versátil para flujos de trabajo de comercio, inventario, finanzas y plataformas.

BIBLIOTECALucideISC Open Source · 1,791 icons
PREDETERMINADO24 px · 2 pxTapas redondas y uniones.
TOCAR EL OBJETIVO44 × 44 pxEl glifo puede permanecer entre 20 y 24 px.
Abra la documentación de Lucide ↗

Estados

PredeterminadoflotarActivoDiscapacitadodestructivo

hacer

  • Empareje íconos desconocidos con texto.
  • Mantenga un significado por ícono.
  • Utilice el color sólo para reforzar el estado.

no lo hagas

  • No mezcle familias de iconos.
  • No estire ni rellene los iconos de contorno.
  • No refleje íconos que tengan un significado independiente de la dirección.
07

Componentes y estados

Familias de interfaces reutilizables con estados completos de interacción, validación, carga y permisos.

laboratorio de componentesInspeccionar la densidad y el comportamiento de la superficie.
6.1

Botones

Altura mínima 44 px · 16 px de recuadro horizontal · una acción principal por región.

VariantePredeterminadoflotarpresionadoEnfoqueCargandoDiscapacitado
Primaria
Secundaria
Tranquilo
destructivo
Solo icono
6.2

Campos y validación

Una etiqueta siempre está visible. El texto de error explica la reparación, no sólo la falla.

6.3

Selección y navegación

El estado seleccionado se comunica mediante la forma, la etiqueta y el color, nunca solo el color.

6.4

Estado y comentarios

El estado es explícito, persistente cuando tiene consecuencias y va acompañado de una siguiente acción útil.

PagadoPendienteProcesamientoVencidoBorradorReembolsado
Progreso lineal64%
123
6.5

Capas y UI transitoria

Los menús, información sobre herramientas, cajones y cuadros de diálogo conservan el contexto y el control del teclado.

Contexto útil, nunca contenido oculto esencial.
Confirmar eliminación

Esta acción no se puede deshacer. ¿Eliminar factura INV-00124?

Paquete reutilizable

Seis familias gobernadas cubren acciones, formularios, comentarios, datos, shell y superposiciones en la web, Flutter, correo electrónico e impresión.

Diecisiete referencias de interfaz aprobadas por el administrador · sin dependencia del tiempo de ejecución.
Descargar componente CSS Descargar manifiesto de componente
08

Datos y operaciones

Las tablas son la principal superficie operativa: legibles, ordenables, seguras para el teclado y receptivas.

2 seleccionados
Número de factura ↓ClienteFechaEstadototalesPagadoSaldoAcciones
INV-2026-00124Mercado Esmeralda25/08/2026Pagado12,450.00 AED12,450.00 AED0.00 AED
INV-2026-00123Tecnología del Golfo24/08/2026Parcial8,750.00 AED5,000.00 AED3,750.00 AED
INV-2026-00122Comercio del Norte23/08/2026Vencido15,300.00 AED0.00 AED15,300.00 AED
INV-2026-00121grupo sarpullido22/08/2026Borrador5,250.00 AED0.00 AED5,250.00 AED
INV-2026-00120Fábrica de la Unión21/08/2026Reembolsado9,800.00 AED9,800.00 AED0.00 AED
INV-2026-00119Servicios Rayan20/08/2026Pagado3,200.00 AED3,200.00 AED0.00 AED
1–6 de 248 facturas
≥ 1280 pxEscritorio

Tabla completa, herramientas y acciones masivas.

768–1279 pxtableta

Columnas de prioridad; Detalles bajo demanda.

< 768 pxFila estructurada móvil
INV-2026-00124Pagado
Cliente
Mercado Esmeralda
totales
12,450.00 AED

Filas de valores-clave, nunca una tarjeta no estructurada.

vacio

Aún no hay facturas.

Sin resultados

No hay coincidencias para los filtros actuales.

Cargando

Preservar la geometría de la mesa.

error

No se pudieron cargar los datos.

Permiso denegado

Su rol no puede ver estos datos.

Sin conexión/obsoleto

Mostrando la última instantánea segura.

COMPONENTES DE ANÁLISIS PROFESIONAL

Sistema de visualización de datos.

Gráficos reutilizables con contexto, comparación, etiquetas accesibles, información sobre herramientas y decisiones claras, sin decoración.

datos en vivoÚltima actualización hace 2 minutosTodas las sucursales
Periodo
Ingresos netos
AED 284,650
↑ +12.4%vs periodo anterior
En el objetivo
Órdenes
1,248
↑ +8.1%vs periodo anterior
96% cumplido
Canasta promedio
AED 228.08
↓ -1.6%vs periodo anterior
Objetivo de 240 AED
Margen bruto
38.6%
↑ +2.3%puntos porcentuales
Por encima del objetivo
Visión ejecutiva

Los ingresos están un 8,7 % por encima de lo previsto, impulsados por el crecimiento de los puntos de venta durante el pico de la noche.

Mejor periodo
Jueves, 6 a 9 p.m.
Oportunidad
Canasta promedio
acción
Revisar paquetes
TENDENCIA + COMPARACIÓN

Rendimiento de ingresos

Periodo actualPeriodo anteriorObjetivo
pico AED 286KCambiar +12.4%Pronóstico AED 301K
COMPOSICIÓN

Ingresos por canal

AED 284Ktotales
  • Punto de venta48%
  • tienda en línea27%
  • Facturas17%
  • Otro8%
CLASIFICACIÓN

Principales categorías de productos

Ingresos / objetivo
Electrónica92K
comida81K
Inicio68K
Moda54K
PATRÓN DE TIEMPO

Intensidad de ventas

Bajo → alto
08:0012:0016:0020:00
MEZCLA DE ESTADOS

Cumplimiento del pedido

Completado72%
  • Completado 72%
  • Procesamiento 19%
  • retrasado 9%
DEMANDA HORARIA

Ventas durante el día

Pico 7 p.m.
MEZCLA DE PAGOS

Métodos de pago

Tasa de éxito 98,4%
Tarjetas54%
efectivo28%
Carteras digitales13%
Compra ahora, paga después5%
UBICACIÓN RENDIMIENTO

Comparación de sucursales

Ordenado por ingresos
SucursalIngresosÓrdenesConversiónTendencia
Centro comercial DubáiAED 82.4K36442.8%+14.2%
Centro de Abu DabiAED 71.8K31839.6%+9.7%
Ciudad de SharjahAED 58.6K27937.1%+5.4%
tienda en líneaAED 49.2K28731.9%-1.2%
09

Identidad de monedas

Los códigos ISO 4217 son datos canónicos; Los símbolos aprobados son la presentación. Cada valor financiero permanece direccionalmente aislado.

Símbolo oficial del dírham de los EAU
SÍMBOLO OFICIAL DEL DIRHAM DE LOS EAU

El nuevo símbolo es la marca de visualización predeterminada para el DEA.

Utilice la obra de arte oficial sin volver a dibujarla. Almacene e intercambie el valor con AED y código numérico ISO 784.

AED7842 unidades menores
Fuente oficial CBUAE ↗
SÍMBOLO OFICIAL DEL RIYAL SAUDÍLa marca aprobada de 2025 reemplaza la abreviatura heredada en la visualización.

Mantener SAR y código numérico 682 en datos, exportaciones y contextos ambiguos.

Pautas de uso de SAMA ↗
MonedaISO 4217numéricoSímbolo aprobadoUnidades menoresEjemplo de visualizaciónEjemplo de contabilidad
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 monedas admitidas

1

ISO 4217

Persistir códigos alfabéticos y numéricos; Nunca persista un glifo visual como identidad.

2

Aislamiento de dirección

Envuelva los importes en bdi o en un LTR explícito ejecutado dentro del contenido RTL.

3

Símbolos ambiguos

Utilice ISO junto a $, ¥ y kr siempre que el contexto pueda contener varias monedas.

10

Identidad en aplicaciones reales

El mismo logotipo, jerarquía y estados deben parecer nativos en la web, el móvil, el escritorio y la impresión.

WEB · DESKTOPEspacio de trabajo de plataforma

Buenos días Ahmed

Ventas netas24,860.75 AEDÓrdenes148Tiendas activas12

Marca denominativa completa en el caparazón permanente; icono compacto solo cuando la navegación colapsa.

FLUTTER · MOBILEPunto de venta móvil
Nueva venta•••
Buscar productos…
☕cafe45.00🥤vaso72.50👜Bolsa6.00＋Más

Encabezado con primer icono, objetivos de 44 px y una acción principal inconfundible.

PRINT · 80 MMRecibo térmico
Mercado Esmeralda
Granos de café ×2
90.00
Vaso de viaje
72.50
Bolsa reutilizable
6.00
totales176.93 AEDQR

Marca de alto contraste, totales seguros para negros y sin significado dependiente del color.

APP ICONLanzador y favicon
10241804832

Utilice el ícono solo, centrado ópticamente con una zona tranquila y segura en cada plataforma.

Contrato multiplataforma Mismo color primarioRoles del mismo tipoMismos estados semánticosPatrones de navegación nativos
11

Documentos y facturas

Un lenguaje de documentos unificado para facturas de impuestos, recibos, cotizaciones, notas de crédito e impresión operativa.

15 mmMargen seguro12Columnas de documento40 pxAprox. fila de la tabla4.5:1Contraste de impresiónLTRMontos e identificaciones
DPOS

factura de impuestos

TAX INVOICE
VendedorTecnología de innovación digital

Riad, Arabia Saudita
TRN 310987654300003
accounts@ditcpos.com

ClienteMercado Esmeralda LLC

Dubái, Emiratos Árabes Unidos
TRN 100234567800003
purchasing@emerald.example

Número de factura
INV-2026-00124
Fecha de emisión
25/08/2026
fecha de vencimiento
08/09/2026
Moneda
AED
#DescripciónCantidadPrecio unitarioIVAtotales
1Suscripción punto de venta18,000.00400.008,400.00
2Servicio de incorporación de inventario13,500.00175.003,675.00
3Configuración del recibo térmico1500.0025.00525.00
Notas y términos

El pago vence dentro de los 14 días. Indique el número de factura con su transferencia.

QR
Subtotal
12,000.00 AED
IVA 5%
600.00 AED
Descuento
150.00 AED
totales
12,450.00 AED
Pagado
12,450.00 AED
Saldo
0.00 AED
Gracias por su negocio.ditcpos.com · accounts@ditcpos.com
Cotización
nota de crédito
orden de compra
Albarán de entrega
Etiqueta del producto
membrete
tarjeta de visita
12

Comunicación

El correo electrónico transaccional, las notificaciones y la voz de la marca siguen la misma jerarquía y disciplina semántica.

Borrar

"Ingrese una cantidad mayor que cero".

No: "Entrada no válida".

calma

"No hemos podido guardar esto todavía. Tus entradas todavía están aquí".

Explique el impacto antes que la culpa.

procesable

"Vuelve a conectarte y vuelve a intentarlo".

Proporcione siempre un siguiente paso útil.
13

Accesibilidad y RTL

El comportamiento inclusivo es parte del contrato de identidad, no un control visual final.

Contraste

AA para el cuerpo del texto; 3:1 para texto, iconos y controles grandes.

Enfoque

Un anillo visible de 2 px con un desplazamiento de 2 px en cada control interactivo.

Tocar objetivo

44 × 44 px mínimo incluso cuando el icono visible sea más pequeño.

Teclado

Orden lógico, sin trampas, Escape cierra capas transitorias.

RTL y LTR

Diseño espejo, no identificadores, monedas, gráficos o controles de medios.

Movimiento

180–240 ms para retroalimentación y cero información esencial en la animación.

RTL
Detalles de la factura
Número de factura
INV-00124
totales
AED 12,450.00
LTR
Invoice details
Invoice number
INV-00124
Total
AED 12,450.00
14

Laboratorio de movimiento

Interacciones pequeñas y decididas inspiradas en los principios de sincronización de Lottie, implementadas de manera accesible y listas para los activos de dotLottie donde la ilustración está justificada.

Reproducción
Se detiene automáticamente fuera de la ventana gráfica
TIEMPO DE EJECUCIÓN DE CÓDIGO ABIERTOMotion 13.1.1 · MIT

Animaciones web listas para producción con protección de movimiento reducido y ventana gráfica.

Documentación de moción ↗
1

Venta completada

Duración
120–180 ms
Facilitando
ease-out
repetir
una vez
2

Procesamiento de pagos

Duración
600–900 ms
Facilitando
linear
repetir
Mientras está activo
3

Sincronización de inventario

Duración
240–320 ms
Facilitando
ease-in-out
repetir
una vez
4

Impresión de recibos

Duración
180–240 ms
Facilitando
ease-out
repetir
una vez
5

Escaneo de código de barras

Duración
180 ms
Facilitando
linear
repetir
una vez
6

Estado vacío útil

Duración
600 ms
Facilitando
ease-in-out
repetir
una vez
7

Llegada de notificación

Duración
240 ms
Facilitando
ease-out
repetir
una vez
8

Transición de sección

Duración
240–320 ms
Facilitando
ease-in-out
repetir
una vez
9

Agregado al carrito

Duración
220–300 ms
Facilitando
spring
repetir
una vez
10

Reembolso confirmado

Duración
260–360 ms
Facilitando
ease-out
repetir
una vez
11

Aprobación concedida

Duración
180–240 ms
Facilitando
ease-out
repetir
una vez
12

Acción rechazada

Duración
180–240 ms
Facilitando
ease-out
repetir
una vez
13

Carga de archivos

Duración
500–800 ms
Facilitando
ease-in-out
repetir
Mientras está activo
14

Descarga de informes

Duración
300–440 ms
Facilitando
ease-out
repetir
una vez
15

Conexión restaurada

Duración
300–500 ms
Facilitando
ease-out
repetir
una vez
16

Advertencia sin conexión

Duración
240–320 ms
Facilitando
ease-in-out
repetir
una vez
17

Apertura del cajón

Duración
240–320 ms
Facilitando
ease-out
repetir
una vez
18

mensaje brindis

Duración
200–260 ms
Facilitando
ease-out
repetir
una vez
19

Entrada modal

Duración
220–300 ms
Facilitando
ease-out
repetir
una vez
20

Carga de esqueleto

Duración
900–1200 ms
Facilitando
linear
repetir
Mientras está activo
21

Actualización del contador

Duración
180–240 ms
Facilitando
ease-out
repetir
una vez
22

Revelación del gráfico

Duración
420–600 ms
Facilitando
ease-out
repetir
una vez
23

Fila reordenada

Duración
220–300 ms
Facilitando
spring
repetir
una vez
24

Acción enfocada

Duración
160–220 ms
Facilitando
ease-out
repetir
una vez

Significado antes del deleite

El movimiento confirma el estado, la orientación o el progreso. Nunca retrasa la tarea.

Motion + dotLottie

Utilice Motion para obtener comentarios sobre la interfaz y abra recursos .lottie para ilustraciones complejas; mantener el estado crítico en HTML accesible.

Motion / MIT ↗
dotLottie Web / MIT ↗

prefers-reduced-motion

Los usuarios de movimiento reducido reciben el estado final inmediatamente, sin pérdida de información.

regla de tiempo de ejecución

Pausa el movimiento en bucle fuera de la pantalla y cuando la página está oculta.

15

Activos, tokens y gobernanza

Un punto de distribución para activos revisados, tokens de implementación y comprobaciones de liberación.

SVG

Logotipos oficiales

Bloqueo completo e ícono de la fuente vectorial aprobada.

CSS

Fichas de diseño

Colores, tipo, espaciado, geometría, elevación, movimiento y enfoque.

JSON

Manifiesto de token

Contrato legible por máquina para web, Flutter, correo electrónico e impresión.

UI

Paquete de componentes

Acciones, campos, estados, datos, shell y familias de superposiciones reutilizables.

digitales

  • sRGB
  • SVG / WebP / PNG
  • Logotipo mínimo 140 px
  • Fondo transparente cuando sea necesario

Imprimir

  • CMYK / PDF/X-4
  • Logotipo mínimo 25 mm.
  • Sangrado de 3 mm cuando corresponda
  • Incrustar o delinear fuentes con licencia

Documentos

  • A4 / 80 mm
  • Margen seguro de 15 mm
  • Totales y QR de seguridad negra
  • Nunca rasterice texto pequeño
1Fuente

Utilice ilustraciones y fichas aprobadas.

2construir

Componga a partir de familias reutilizables.

3Revisión

Consulta contenido, contraste, RTL y estados.

4Lanzamiento

Registre la decisión y la versión.

ANTES DE PUBLICAR

verificación previa de marca

Una autorización no es de marca hasta que se aprueben todas las comprobaciones aplicables.

  • Logotipo oficial y primaria #125076
  • Estados completos predeterminados, de enfoque, de error, de carga y deshabilitados
  • Las tablas, totales e identificadores siguen siendo legibles
  • RTL árabe y LTR inglés verificados
  • Contraste AA, objetivos de 44 px y movimiento reducido
  • A4, recibo, correo electrónico y salida responsiva verificados