Ticksy es el software de TPV para hosteleria y delivery de Maguro Software. Un unico sistema cubre tres superficies: el punto de venta, la web y marketing, y los documentos y presentaciones. Lo que cambia entre ellas no son los tokens sino el modo: aplica `tpv-dark` al punto de venta, `light` a popups y backoffice, y `brand` a web, marketing, documentos y slides. Disena siempre con tokens semanticos; los primitivos (`color-navy-*`, `color-cyan-*`, `color-gray-*`) solo existen para definirlos. ## Voz y contenido Escribe en espanol de Espana, tuteando, en frases cortas y sin jerga tecnica. Nombra las cosas como las llama el local: mesa, comanda, cierre de caja, comensales, cobrar, enviar a cocina. Las etiquetas de interfaz y los estados van en mayusculas y sin punto final: "COBRAR", "ENVIAR", "COBRADO", "PENDIENTE", "CANCELADO", "23 DEVOLUCIONES". Los titulos de pantalla tambien: "ABRIR CAJA", "TPV SALON COMEDOR", "MESA 12 - 4 COMENSALES". Los textos de apoyo van en minuscula y frase completa: "Total sin IVA 252,07 EUR", "Utiliza el asistente para configurar el TPV en menos de 3 minutos". Los importes llevan coma decimal y el simbolo del euro detras, separado por un espacio fino. Los titulos de slide son de una o dos palabras con punto final ("Tecnologia."). Nada de emoji en la interfaz ni en los documentos. El claim de marca es "Work made easy" y solo aparece dentro del logo completo. ## Color Tres modos, un mismo diseno: `tpv-dark` (punto de venta), `light` (popups y backoffice) y `brand` (web, marketing, documentos). Los hex vienen del TDS anterior y no se retocan. Los fondos se apilan en tres capas: `bg-canvas` para la pantalla, `bg-surface` para paneles y tarjetas, `bg-surface-raised` para popups o panel sobre panel, y `bg-surface-highlight` para lo seleccionado. Sobre cualquiera de ellos, el texto principal va en `text-primary`. `text-secondary` y `text-muted` son el mismo gris (`color-gray-400`) en los tres modos: sobre los fondos claros se quedan por debajo de 4.5:1, asi que resérvalos para texto de 24 px o mayor y para informacion que no haga falta leer. Si el texto importa, `text-primary`. `text-accent` es el acento de lectura (cian en oscuro, `color-cyan-700` en claro). La accion principal es `action-primary` con el texto encima en `text-on-accent`, nunca en blanco; el hover es `action-primary-hover`. La accion secundaria es `action-secondary` con texto en `text-primary`. Los estados nunca viajan solos en el color: acompanan siempre la palabra o el icono ("COBRADO" sobre `status-success`, "CANCELADO" sobre `status-danger`). Sobre relleno de color, el texto va en `text-on-accent`; cuando el estado es texto sobre fondo claro, usa la variante `-strong` (`status-success-strong`, `status-warning-strong`, `status-danger-strong`). `status-attention` es solo relleno o marca, nunca color de texto. En presentaciones y documentos manda otra capa: `text-heading` para los titulos, `text-subtle` para subtitulos y cuerpo de slide (contraste bajo a proposito, solo a 36 px o mas) y `text-brand-accent` para cifras, eyebrow y contacto sobre fondo oscuro. Los fondos de marca son degradados, no tokens de color, y estan en `bundle.css`: `.tds-bg-brand-dark-radial` (portadas y cierres), `.tds-bg-brand-dark-linear` (contenido oscuro), `.tds-bg-brand-cyan` (slide Statement), `.tds-bg-brand-light` (contenido claro) y `.tds-bg-paper` / `.tds-bg-paper-warm` (documentos A4). ## Tipografia Rubik para todo, y solo en Light (300) y Regular (400). No existe Medium ni Bold en este sistema: donde una referencia antigua use Medium, va Regular. Aplica siempre un estilo, nunca valores sueltos. Los tamanos del TPV (16, 22, 28, 33, 44, 66, 77, 99, 121) vienen del TDS porque estan ajustados a las pantallas reales; las alturas de linea se han normalizado a multiplos de 4. En el TPV: `heading-h1` para el titulo de pantalla, `heading-h2` para secciones y popups, `heading-h3` para zonas, `heading-h4` para cabeceras de tarjeta y botones grandes; `body-default` para parrafos y `body-regular` para el enfasis (nombre de producto, importe en linea); `label-default` para etiquetas en mayusculas y `label-light` para totales secundarios. Los importes grandes usan la familia `display-*`: `display-number-l` para la parte entera y `display-number-m` para los decimales. En presentaciones: `slide-title` y `slide-subtitle` en la cabecera, `slide-body` en el cuerpo y las vinetas, `slide-eyebrow` en la portada, `slide-label` en las tarjetas, `slide-kpi` con `slide-kpi-unit` en las cifras, `slide-display` en la slide de frase. Rubik se carga desde Google Fonts; el sistema no lleva todavia los ficheros .woff2. ## Espacio, radios y tamano tactil Todo es multiplo de 4 y el modulo base es 8. Las miniunidades del TDS (1 miniud = 2,75 px) ya no se usan. `space-4` para ajustes finos, `space-8` entre elementos relacionados, `space-12` y `space-16` de padding interno de controles, `space-24` y `space-32` de padding de panel, `space-40` y `space-48` entre bloques, `space-64` y `space-96` de margen de pantalla. El radio crece con el elemento (r = 4 + 4 x lado/64): `radius-sm` para un boton de 64, `radius-md` para una tarjeta de 128, `radius-lg` para un panel de 192, `radius-xl` de 256 en adelante y para las tarjetas de slide. Ningun control pulsable baja de `size-touch-min` (64x64). Reserva `size-touch-reserve` (96x96) para cobrar, enviar a cocina y todo lo que se usa con prisa. `shadow-card` es la unica sombra del sistema: tarjetas blancas sobre fondos de presentacion y documento. En el TPV se separa con fondo y borde, no con sombra. ## Logo Un unico componente Logo con tres variantes: Wordmark + Tagline (web, marketing, arranque del TPV, documentos; minimo 200 px de ancho), Wordmark (cabeceras de app, tickets, favicons grandes; minimo 120 px) y Symbol (iconos de app, avatares, favicon, marcas de agua; minimo 24 px de alto). Los rellenos los decide el modo del contenedor a traves de `brand-logo-wordmark`, `brand-logo-accent` y `brand-logo-tagline`: blanco sobre TPV Dark, `color-navy-800` sobre Light y Brand. No se recolorea a mano, no se deforma y se escala siempre proporcional. Espacio de respeto minimo alrededor: la altura del punto de la i. En el grupo de assets Logos estan los seis ficheros: los tres logos en tinta clara y los tres `-on-dark` para fondos oscuros. Un SVG servido con `` no hereda el color, asi que se elige el fichero segun el fondo. ## Componentes de la app El TPV es una pantalla de 1920x1080 en modo `tpv-dark`. Arriba la App Bar cian de 104 px con menu, empleado, hora y local, y las pestanas de modulo a la derecha: la activa se funde con el canvas usando `bg-app-bar-tab`. Abajo la Bottom Bar de 96 px con las acciones de contexto. Los popups (Modal) son siempre claros y se marcan ellos mismos en modo `light`, con cabecera cian y `shadow-modal`; el boton de cerrar va fuera, arriba a la derecha de la pantalla. El Panel es la columna con cabecera de color para comandas y listas. Botones: cinco estilos y dos alturas. `primary` es una sola accion principal por pantalla (OK, ENVIAR, ASIGNAR), `secondary` las de apoyo, `danger` lo destructivo, `warning` lo que pide atencion y `ghost` la opcion no seleccionada dentro de un grupo. La etiqueta va siempre en mayusculas: `button-small` en el de 64 px, `label-button` en el grande. Ningun control pulsable baja de `size-touch-min`. Indicadores: Badge y StatusDot llevan el color del estado o del canal, y nunca lo llevan solos: siempre con la palabra o el icono al lado. Amount es la forma canonica de escribir dinero (entero grande, decimales un paso mas pequenos, sin simbolo de euro salvo en marketing); KPI es Amount mas un rotulo en `label-caps`, y KeyValue la fila de dato de las tarjetas de repartidor. Listas y opciones: el teclado numerico es la pieza mas repetida del TPV, con teclas de 112x104 en `bg-key` y la cifra en `display-calculator` sobre `text-key`. TicketLine y KdsLine comparten anatomia: cantidad en acento, nombre en mayusculas, modificador debajo en gris e importe a la derecha. Las tiles de modificador pasan a `action-selected` con el texto en `text-on-selected` al seleccionarse. Tarjetas: cada modulo tiene la suya y todas usan `radius-md` y se apilan con `space-32`. En la comanda de cocina la cabecera lleva el color del canal (`channel-uber-eats`, `channel-just-eat`, `channel-table`, `channel-web`) y el cuerpo va en claro para leerse desde lejos. Los tokens de la capa de app (`bg-app-bar`, `bg-key`, `action-ghost`, `text-on-status`, los `channel-*`...) se han leido en modo TPV Dark, que es donde el archivo los usa; su valor en Light y Brand esta por confirmar. ## Presentaciones Frame 1920x1080, margenes de 160 y por tanto 1600 de contenido. Titulo en (160, 160). La columna de texto mide 600 px; en los layouts de imagen mas texto la columna empieza en x=1160, o en x=160 con la imagen a la derecha. Gutter entre tarjetas `space-24`. Los fondos claros van en modo `brand` y los oscuros en `tpv-dark`, que es lo que pone el logo en blanco. Dos pares de color vienen asi del original y no se han retocado: el blanco sobre `Background/Brand Cyan` de la slide Statement y el `color-cyan-700` sobre el degradado oscuro de SlideFeatureDark. Ninguno llega al 3:1, asi que valen para una frase de marca pero no para informacion que haya que leer con atencion. ## Documentos Hoja A4 de 595 x 842 (1 pt = 1 px) con margenes de 56 en los cuatro lados, o sea 483 px de contenido, siempre en modo `brand`. La cabecera lleva `doc-title` en `text-heading`, la etiqueta de seccion a la derecha en `doc-section-tag` sobre `text-accent` y el subtitulo en `doc-subtitle` sobre `text-subtle`. El cuerpo va en `doc-body` sobre `text-body`, con los parrafos separados `space-12` y los bloques `space-24`. Los encabezados de bloque van en `doc-heading` sobre `text-accent`, las notas al pie en `doc-footnote` y el numero de pagina abajo a la derecha en `doc-page-number` sobre `text-muted`, a 56 del borde. Los fondos: `.tds-bg-paper` para el papel de carta, `.tds-bg-paper-warm` para las portadas y `bg-canvas` para las paginas interiores. El logo va a 120 px en la esquina (56, 56). ## Iconografia El set son 192 iconos de linea que vienen de la pagina Icons General V2 del documento de Sketch del TDS, que es el set vigente del TPV. No viajan como ficheros sueltos: estan dentro del bundle, y se usan con el componente `Icon` por su nombre de slice — `Icon name="nav_close"`, `Icon name="menu_bar_printer"`, `Icon name="cards_bike"`. `window.TicksyDS.iconNames` devuelve la lista entera. Los nombres dicen donde vive cada uno: `nav_*` navegacion, `menu_*` y `menu_bar_*` menus, `menu_top_*` barra superior, `order_*` comanda, `cards_*` tarjetas de pedido, `payment_*` formas de cobro, `delivery_*` canales, `status_*` estado del sistema, `hardware_*` dispositivos, `big_icon_*` iconos grandes de pantalla completa, `popup_*` y `square-*` estados de pedido. Las formas de interfaz del archivo (esquinas, progreso, indicadores de pagina) no se han traido: no son iconos, se dibujan con CSS donde hagan falta. El trazo se tine con `currentColor`: el icono hereda el color del texto de su contenedor, asi que el mismo icono vale en los tres modos y nunca se le fija un color. Las dos excepciones vienen del original y se respetan: los `big_icon_*` son circulos cian con el dibujo en blanco, pensados para fondo oscuro, y los logos de canal (`delivery_uber`, `delivery_justeat`, `payment_glovo`) llevan su color de marca. `delivery_glovo` ademas trae un mapa de bits incrustado y conviene rehacerlo en vector. Los componentes ya tiran del set: IconButton, SearchBar, las pestanas y el avatar de la App Bar, y los datos de las tarjetas de mesa, reserva, comanda y pedido. La unica excepcion es la hamburguesa del menu, que el set no trae y se dibuja en el componente. Un icono que carga informacion nunca va solo: lleva su etiqueta al lado o el prop `label` para lectores de pantalla. Y si es pulsable, va dentro de `IconButton` o de `Button`, que son los que garantizan la zona tactil de `size-touch-min`. ## Sin sincronizar - **Los ficheros de Rubik.** Figma no guarda binarios de fuente; sueltalos aqui si quieres que el sistema no dependa de Google Fonts. - **Los iconos de redes sociales** de la slide de cierre: van como huecos de 40 px en `action-primary`; no estan en el set del TPV. - **Los pictogramas de categoria de producto** (`D01`, `F01`, `B01`...) y los iconos de administracion del documento de Sketch: quedan fuera de esta importacion, que solo trae Icons General V2. - **Los valores de los tokens en los modos que el archivo no pinta**: `text-heading` en TPV Dark y Light, `text-subtle` en Light, `text-body` fuera de Brand y toda la capa de app fuera de TPV Dark. Se leen uno a uno del nodo donde estan usados, asi que solo consta el modo en el que estan dibujados. El valor de `border-strong` en TPV Dark se ha leido de la muestra de Figma, que esta pintada con `action/primary`. - **Decidido al revisar con diseno**: el boton L mide 96 px (`size-touch-reserve`) y no lleva opacidad; el titulo del Modal va en `heading-h3`; y el blanco sobre el cian de la App Bar es intencionado, con su token propio `text-on-app-bar`. - **Pares de contraste heredados del archivo**, sin retocar: blanco sobre el cian de la App Bar (decision de marca), blanco sobre `action-secondary` en el badge de servicio, blanco sobre `Background/Brand Cyan` en la slide Statement, `color-cyan-700` sobre el degradado oscuro en SlideFeatureDark y `text-subtle` sobre papel en los subtitulos de documento. Valen para rotulos grandes de marca, no para informacion que haya que leer. - Los modos de las variables se leen uno a uno, asi que las notas de uso y las guias de componente parafrasean en mis palabras las descripciones que hay escritas en Figma.