Volver

Sistema de diseño

Inter en toda la app, botones full rounded con iconos negros en bold, y todo pensado para dedos: ninguna superficie táctil baja de 44 px y la acción principal del POS mide 88 px.

Escala neutral

El número indica claridad, no oscuridad: neutral-000 es negro puro y neutral-1000 blanco puro. Es el inverso a la convención de Tailwind, así que el tema borra la escala neutral de Tailwind para que no convivan dos grises con el mismo nombre.

neutral-000#000000
neutral-100#1f1f1f
neutral-200#333333
neutral-300#707070
neutral-400#888888
neutral-500#999999
neutral-600#bbbbbb
neutral-700#cccccc
neutral-800#e5e5e5
neutral-900#f7f6f5
neutral-1000#ffffff

Azul, crítico y éxito

El azul es el único color de marca: marca el estado activo y lo que está en curso. No hay ámbar en la paleta, así que 'sin conexión' no usa advertencia: el POS sigue vendiendo, va en neutral oscuro.

blue-400#4a95ff
blue-500#006aff
transparentrgba(0, 0, 0, 0)
critical#cc0023
success#00b23b

Tokens semánticos

La interfaz usa estos roles, no la escala cruda. Cambiar un rol (por ejemplo que los botones pasen de neutral-800 a neutral-900) es cambiar una línea del tema y no tocar ningún componente.

surface#ffffff
surfaceSunken#f7f6f5
button#e5e5e5
buttonSoft#f0f0f0
buttonHover#cccccc
buttonActive#bbbbbb
ink#000000
inkStrong#1f1f1f
inkMuted#707070
inkSubtle#888888
border#e5e5e5
borderStrong#cccccc
overlayrgba(0, 0, 0, 0.6)
accent#006aff
accentText#0052c7
danger#cc0023
success#00b23b

Tipografía

Inter, autoalojada con next/font: no se pide a Google en tiempo de ejecución. Los precios usan numerales tabulares para que no bailen al cambiar de dígito.

Combo familiar · Milanesa napolitanatext-pos-display · 2rem
Combo familiar · Milanesa napolitanatext-pos-xl · 1.5rem
Combo familiar · Milanesa napolitanatext-pos-lg · 1.25rem
Combo familiar · Milanesa napolitanatext-pos-base · 1.0625rem
Combo familiar · Milanesa napolitanatext-pos-sm · 0.9375rem
$ 18.500,00numerales tabulares (pos-figures)

Forma y tamaño

Los botones son full rounded. Los tiles de producto y las tarjetas conservan radio propio: no son botones, son superficies.

Radios

button6px
pillpill
tile6px
card6px
sheet6px

Alturas táctiles

sm
44 px
mínimo aceptable
md
56 px
botón estándar
mega
82 px

Botones

Gris por defecto, negro para la acción principal. Los iconos van a 18-26 px y siempre en bold.

Variantes

Tamaños

Sólo icono

Ancho completo (acción de cobro)

Selectores

Regla del sistema: el fondo NO cambia al seleccionar, sigue siendo gris. Lo que cambia es el borde, que se vuelve azul. Así el cajero reconoce la categoría activa de un vistazo, sin tener que leerla.

El estado activo combina tres señales independientes del color de fondo: borde azul de 2 px,aria-pressedy el mismo tamaño de control. Ninguna depende del relleno.

Iconos

Set curado de Reicon en regular. Crece sólo agregando entradas a POS_ICONS.

cobrar
agregar
imprimir
guardar
local
alerta
arriba
abajo
email
mas

Tiles de producto

Superficies con radio propio, no pill. El área entera es clickeable: el nombre va centrado a la izquierda y la cuadrada suma abajo el contador de variantes. El precio vive en el pedido y en el selector.

Cantidad

Sumar tres unidades son tres toques. Nunca se abre un teclado para eso.

2

Estados del POS

Cuatro familias y un significado por familia: neutral es informativo, azul es en curso, verde salió bien y rojo hay que resolverlo.

En líneaSin conexiónSincronizado 11:39 p. m.7 sin subirSincronizando 7Agente sin vincularCaja cerrada

Componentes de terceros

Instalados por shadcn desde los registries @uiarc y @amicro. Son los únicos de su tipo en la app: no hay alternativas genéricas. No se reescriben — se pintan con el puente de tokens (packages/ui/src/shadcn.css), que apunta sus variables CSS a la paleta de WebPOS. Si algo no encaja, se cambia el token, no el componente.

Loader

Amicro Classic Spinner. Es el único indicador de carga de la app: el original traía bg-zinc-400, un color que no existe en la paleta cerrada, así que se reescribió con currentColor — el tono lo decide quien lo usa.

sm
md
lg
xl
El botón mantiene alto y ancho: nada salta.

Campos

Los campos de terceros heredan Inter, la altura táctil mínima de 44 px y los bordes de la paleta.

Como aparece en el ticket.
El CUIT no es válido.
Mínimo 8 caracteres.
Edición en línea
Activate to edit.Enter saves, Escape cancels.

Selección

Chips, tarjetas, casillas, interruptores y deslizador. El estado encendido usa el azul de marca.

Tipo de pedido
Una copia extra por comanda.
IVA (%)
Descuento (%)

Listas

Select y combobox. Se abren con el estilo de las tarjetas del sistema, no con el look por defecto.

Datos

Tarjetas, métricas, progreso y medidores. Los contadores animados de las métricas vienen incluidos.

Ventas de hoy+12%
184,500$

vs. ayer

Tickets-3%
47

vs. ayer

Ticket promedio+8%
3,925$

vs. ayer

Cierre de caja72%
Productos cargados62.0 productos free

138.0 productos of 200 productos used

1 principal · 2 guarniciones · 1 bebida

Contenido expandido de la tarjeta.
  • Comanda #1042 · Cocina · 20:14
  • Comanda #1043 · Cocina · 20:21
  • Ticket #1043 · Caja · 20:39

Navegación

Migas, paginación y menús desplegables.

Superposiciones

Diálogo, hoja inferior, aviso y notificación. Todos toman el fondo y los bordes del sistema.

Modo offline activo

Las ventas se guardan en este dispositivo y se suben solas al reconectar.

  • Ticket #1043$ 9.000,00
  • Ticket #1042$ 9.415,00
  • Ticket #1041$ 9.830,00
  • Ticket #1040$ 10.245,00
  • Ticket #1039$ 10.660,00
  • Ticket #1038$ 11.075,00
  • Ticket #1037$ 11.490,00
  • Ticket #1036$ 11.905,00
  • Ticket #1035$ 12.320,00
  • Ticket #1034$ 12.735,00
  • Ticket #1033$ 13.150,00
  • Ticket #1032$ 13.565,00

Pestañas y acordeón

Para separar contenido sin sacar al cajero de la pantalla.

Ventas del turno: 47 tickets · $ 184.500,00.

Cada elección obligatoria es un paso. El POS avanza solo al completarlo y el botón de agregar dice qué falta.

Cuenta y filas deslizables

El menú de usuario agrupa estado, preferencias y cierre de sesión. Las filas deslizables son para acciones destructivas en listas.

Los botones del menú usan el estilo de la casa
  • Ticket #1043 · Mesa 4$ 20.000,00
  • Elección y contexto

    Grupo de radios para elecciones excluyentes y menú contextual para acciones sobre un elemento de una lista.

    Turno
    Menú contextual

    Fechas y color

    Para reportes: rango de fechas del cierre y color de un tile de producto.

    Día del corte de caja.
    El color elegido:#006aff

    Archivos y firma

    Foto de un producto, y firma en el cierre de caja o la entrega de un pedido.

    Save as

    Press Control or Command Z to undo, add Shift to redo, and Delete to clear.

    Tabla y filtros de gestión

    Es la tabla del admin: ordena por columna, selecciona filas y filtra con chips. Reemplaza cualquier lista armada a mano.

    Estación · cocina
    Productos de la carta
    Empanada de carneEmpanadas$ 2.100,00316
    Pizza muzzarellaPizzas$ 9.800,00142
    Combo familiarCombos$ 18.500,0087
    Cerveza artesanal IPABebidas$ 5.200,0064
    Flan caseroPostres$ 3.100,0041

    Código de verificación

    Seis casillas para el código que llega por correo. Es el mismo patrón que usa el onboarding para verificar la cuenta.

    Código de verificación
    0 de 6

    Ingreso y registro

    El mismo bloque sirve para iniciar sesión y para crear la cuenta (cambia el modo). Arriba de esto va el alta de la organización y después el onboarding. Es un bloque: entra como una pieza entera, no se arma por partes.

    login-centeredbloque completo · código de prueba 482913
    Arc

    No account?

    Sign in to Arc

    Use the passkey saved on this device. No password needed.

    or

    Superposiciones restantes

    Popover para un detalle sin salir de la pantalla.