Paleta de Colores
Colores primarios, accent, semánticos y neutrales para ambos temas.
Superficies
Accent
Semanticos
Tipografia
Escala tipografica con heading font y body font segun el tema activo.
H2 / 48pxCatalogo de Refacciones
H4 / 30pxInventario General
H5 / 24pxClientes Registrados
H6 / 20pxDetalle de Factura
Body / 16pxBusca entre mas de 1.4 millones de partes OEM y 300K aftermarket con compatibilidad verificada para cada vehiculo.
Small / 14pxCompatible con: Toyota Corolla 2018-2023, Honda Civic 2020-2024
Caption / 12pxUltima actualizacion: hace 2 horas | SKU: NX-BRK-4521
Mono / Price$1,245.00 MXN
Botones
Primary, secondary, danger, ghost e icon buttons en 3 tamanos.
Inputs y Formularios
Text, search, select, checkbox, radio, toggle.
Cards
Producto, cliente y resumen (dashboard).
Tarjeta de Producto
⚙
Balata Delantera Ceramica
SKU: NX-BRK-4521
$845.00
Toyota Corolla 2018-2023
⚙
Filtro de Aceite Premium
SKU: NX-FLT-8832
$189.00
Honda Civic 2020-2024
⚙
Amortiguador Trasero
SKU: NX-SUS-2211
$1,650.00
Nissan Sentra 2019-2023
Tarjeta de Cliente
JR
Juan Rodriguez
Taller Mecanico Rodriguez
ML
Maria Lopez
Refaccionaria La Central
CP
Carlos Perez
AutoServicio Express
Tarjeta Resumen (Dashboard)
Ventas Hoy
$24,580
+12.5% vs ayer
Productos Vendidos
47
+8 unidades
Clientes Nuevos
5
+2 esta semana
Stock Bajo
12
Requiere atencion
Tabla con Paginacion
Tabla de datos con sorting y paginacion para inventario, ventas, etc.
| SKU ▲ |
Producto ▼ |
Categoria |
Stock |
Precio |
Estado |
| NX-BRK-4521 |
Balata Delantera Ceramica |
Frenos |
124 |
$845.00 |
En stock |
| NX-FLT-8832 |
Filtro de Aceite Premium |
Motor |
58 |
$189.00 |
En stock |
| NX-SUS-2211 |
Amortiguador Trasero |
Suspension |
3 |
$1,650.00 |
Stock bajo |
| NX-ELC-1105 |
Alternador Remanufacturado |
Electrico |
0 |
$3,200.00 |
Agotado |
| NX-MTR-7744 |
Junta de Cabeza |
Motor |
22 |
$520.00 |
En stock |
Modal / Dialog
Ventana modal para confirmaciones, formularios y alertas.
Estas a punto de procesar una venta por $3,284.00 MXN para el cliente Juan Rodriguez.
Tabs / Navegacion
Tabs para secciones como Inventario (7 tabs) y Contabilidad.
Contenido de la tab "General" se muestra aqui. Cada tab carga su contenido correspondiente.
Badges y Tags
Indicadores de estado, categorias y etiquetas removibles.
Badges
Nuevo
En stock
Stock bajo
Agotado
Pedido
Inactivo
Tags
Frenos ×
Toyota ×
2020-2024 ×
OEM ×
Ceramica ×
Toasts / Notificaciones
Mensajes de feedback para acciones del usuario.
✔
Venta completada
Folio #NX-2024-0847 generado exitosamente
❌
Error al procesar
No se pudo conectar con el servidor de facturacion
⚠
Stock insuficiente
Solo quedan 3 unidades de NX-SUS-2211
ℹ
Actualizacion disponible
Hay 247 nuevas partes en el catalogo
Sidebar y Header
Navegacion principal de la aplicacion POS.
PIN Pad
Acceso rapido por PIN numerico para login.
Numpad
Teclado numerico para cantidades y precios en POS.
$1,245.00
Listas (Carrito / Inventario)
Items de lista con cantidad, precio y acciones.
⚙
Balata Delantera Ceramica
NX-BRK-4521 | Toyota Corolla
2
$1,690.00
⚙
Filtro de Aceite Premium
NX-FLT-8832 | Honda Civic
1
$189.00
⚙
Amortiguador Trasero
NX-SUS-2211 | Nissan Sentra
1
$1,650.00
Avatares
Iniciales de usuario en diferentes tamanos.
I
IA
IA
IA
XS (24) / SM (32) / MD (40) / LG (56)
Breadcrumbs
Navegacion jerárquica para secciones profundas.
Dropdown
Menu contextual para acciones secundarias.
Tooltips
Informacion contextual al hover.
Barras de Progreso
Indicadores de progreso para stock, metas y procesos.
Empty States
Estados vacios cuando no hay datos que mostrar.
🔍
No se encontraron resultados
No hay productos que coincidan con tu busqueda. Intenta con otro termino o revisa los filtros aplicados.
Loading States / Skeleton
Placeholders de carga mientras se obtienen datos.
Iconografia POS
Set de iconos consistente para el sistema POS.
Nota: En produccion, reemplazar emojis por un set SVG consistente (Lucide Icons, Phosphor, o iconos custom). Los emojis son solo placeholder.
Referencia de Espaciado
Grid base de 4px para mantener consistencia visual.