{
  "name": "Ticksy Design System",
  "version": 2,
  "meta": {
    "source": "figma",
    "file": "https://www.figma.com/design/7TYJU9LZzllGNs6oSRr8MK/Ticksy-Design-System",
    "frames": [
      "https://www.figma.com/design/7TYJU9LZzllGNs6oSRr8MK/Ticksy-Design-System?node-id=1-2",
      "https://www.figma.com/design/7TYJU9LZzllGNs6oSRr8MK/Ticksy-Design-System?node-id=1-3",
      "https://www.figma.com/design/7TYJU9LZzllGNs6oSRr8MK/Ticksy-Design-System?node-id=1-4",
      "https://www.figma.com/design/7TYJU9LZzllGNs6oSRr8MK/Ticksy-Design-System?node-id=1-5",
      "https://www.figma.com/design/7TYJU9LZzllGNs6oSRr8MK/Ticksy-Design-System?node-id=1-6",
      "https://www.figma.com/design/7TYJU9LZzllGNs6oSRr8MK/Ticksy-Design-System?node-id=152-7",
      "https://www.figma.com/design/7TYJU9LZzllGNs6oSRr8MK/Ticksy-Design-System?node-id=24-8",
      "https://www.figma.com/design/7TYJU9LZzllGNs6oSRr8MK/Ticksy-Design-System?node-id=147-8"
    ],
    "components": {
      "SlideCover": "152:8",
      "SlideStatement": "152:15",
      "SlideClosing": "152:17",
      "SlideTitleBullets": "154:13",
      "SlideBullet": "153:26",
      "SlideLabelCard": "153:30",
      "SlideKpiCard": "153:32",
      "SlideFeatureImageLeft": "153:13",
      "SlideFeatureImageRight": "153:19",
      "SlideKpiCards": "154:35",
      "SlideFeatureDark": "155:36",
      "Logo": "9:16",
      "Button": "24:43",
      "IconButton": "24:56",
      "TileButton": "24:69",
      "Toggle": "24:76",
      "Badge": "26:29",
      "StatusDot": "26:48",
      "Amount": "26:97",
      "Kpi": "26:110",
      "KeyValue": "26:114",
      "SectionHeader": "26:117",
      "Pagination": "26:122",
      "PinIndicator": "26:153",
      "OrderStep": "26:162",
      "Key": "27:22",
      "Keypad": "27:52",
      "TicketLine": "27:67",
      "KdsLine": "27:89",
      "OptionTile": "27:104",
      "OptionGroupHeader": "27:121",
      "SearchBar": "27:126",
      "AppBar": "29:59",
      "BottomBar": "29:70",
      "Modal": "29:92",
      "Panel": "29:107",
      "Popover": "29:113",
      "KdsOrderCard": "30:171",
      "DeliveryOrderCard": "30:210",
      "TableCard": "30:245",
      "CourierCard": "30:298",
      "ReservationCard": "30:331",
      "DocCover": "147:9",
      "DocSectionDivider": "147:18",
      "DocPage": "147:676",
      "DocLetterhead": "147:682",
      "DocListItem": "148:16",
      "DocBullet": "148:19",
      "DocKeyValue": "148:22",
      "DocDeviceList": "151:16",
      "DocKeyValueGrid": "151:37",
      "DocFootnote": "151:58",
      "DocFigure": "151:61",
      "Icon": "sketch:TDS/Icons General V2"
    },
    "synced": "2026-09-17",
    "sources": [
      {
        "app": "sketch",
        "file": "TDS.sketchcloud",
        "page": "Icons General V2",
        "what": "192 iconos de linea (sin las formas de interfaz)",
        "synced": "2026-09-17"
      }
    ]
  },
  "color": {
    "themes": [
      {
        "id": "tpv-dark",
        "name": "TPV Dark"
      },
      {
        "id": "light",
        "name": "Light"
      },
      {
        "id": "brand",
        "name": "Brand"
      }
    ],
    "tokens": [
      {
        "name": "color-navy-700",
        "value": "#094163",
        "usage": "Primitive. Navy medio: bg/surface-highlight y border/default en TPV Dark, arranque de los degradados oscuros, text/heading en documentos y slides."
      },
      {
        "name": "color-navy-800",
        "value": "#073551",
        "usage": "Primitive. Navy oscuro: bg/surface-raised y border/subtle en TPV Dark, relleno del wordmark sobre fondos claros."
      },
      {
        "name": "color-navy-900",
        "value": "#062a40",
        "usage": "Primitive. Navy profundo: bg/surface y text/primary en modos claros, final del degradado Brand Dark Linear."
      },
      {
        "name": "color-navy-950",
        "value": "#041e2e",
        "usage": "Primitive. Navy casi negro: bg/canvas del TPV, bg/inverse en claro, text/on-accent."
      },
      {
        "name": "color-cyan-100",
        "value": "#a0f2ff",
        "usage": "Primitive. Cian claro: bg/surface-highlight en Light y Brand, halo del fondo Paper."
      },
      {
        "name": "color-cyan-200",
        "value": "#70dff9",
        "usage": "Primitive. Cian suave: hover de la accion principal en TPV Dark."
      },
      {
        "name": "color-cyan-400",
        "value": "#1ed8f6",
        "usage": "Primitive. Cian de marca: action/primary, puntos del logo, acentos de slide."
      },
      {
        "name": "color-cyan-700",
        "value": "#107595",
        "usage": "Primitive. Cian oscuro: text/accent sobre fondos claros, tagline del logo en TPV Dark."
      },
      {
        "name": "color-gray-50",
        "value": "#f6fafa",
        "usage": "Primitive. Gris casi blanco: bg/canvas en Light y bg/surface en Brand."
      },
      {
        "name": "color-gray-100",
        "value": "#f2f7f8",
        "usage": "Primitive. Gris muy claro: bg/surface-raised y border/subtle en modos claros, final del degradado Brand Light."
      },
      {
        "name": "color-gray-200",
        "value": "#dde6e9",
        "usage": "Primitive. Gris claro: border/default y action/secondary en modos claros."
      },
      {
        "name": "color-gray-300",
        "value": "#b0c2c8",
        "usage": "Primitive. Gris medio claro: border/strong en claro y text/subtle de marketing."
      },
      {
        "name": "color-gray-400",
        "value": "#829ea6",
        "usage": "Primitive. Gris medio: text/secondary y text/muted en los tres modos, tagline del logo sobre fondos claros."
      },
      {
        "name": "color-gray-500",
        "value": "#658189",
        "usage": "Primitive. Gris apagado: textos de apoyo sobre fondos claros."
      },
      {
        "name": "color-gray-600",
        "value": "#526d75",
        "usage": "Primitive. Gris oscuro: cuerpo de texto de documentos largos sobre papel."
      },
      {
        "name": "color-green-500",
        "value": "#2db682",
        "usage": "Primitive. Verde: status/success."
      },
      {
        "name": "color-green-700",
        "value": "#147f57",
        "usage": "Primitive. Verde oscuro: status/success-strong."
      },
      {
        "name": "color-yellow-500",
        "value": "#f3c51a",
        "usage": "Primitive. Amarillo: status/attention."
      },
      {
        "name": "color-orange-500",
        "value": "#fa9e00",
        "usage": "Primitive. Naranja: status/warning, halo del fondo Paper Warm."
      },
      {
        "name": "color-orange-700",
        "value": "#ad720c",
        "usage": "Primitive. Naranja oscuro: status/warning-strong."
      },
      {
        "name": "color-red-500",
        "value": "#cd4040",
        "usage": "Primitive. Rojo: status/danger."
      },
      {
        "name": "color-red-700",
        "value": "#9e2020",
        "usage": "Primitive. Rojo oscuro: status/danger-strong."
      },
      {
        "name": "color-white",
        "value": "#ffffff",
        "usage": "Primitive. Blanco: bg/surface en Light, bg/canvas en Brand, wordmark sobre TPV Dark."
      },
      {
        "name": "bg-canvas",
        "value": {
          "tpv-dark": "#041e2e",
          "light": "#f6fafa",
          "brand": "#ffffff"
        },
        "usage": "Fondo general de pantalla. Grounds de text/primary, text/secondary y text/accent."
      },
      {
        "name": "bg-surface",
        "value": {
          "tpv-dark": "#062a40",
          "light": "#ffffff",
          "brand": "#f6fafa"
        },
        "usage": "Paneles y tarjetas sobre bg/canvas. Grounds de text/primary y text/secondary."
      },
      {
        "name": "bg-surface-raised",
        "value": {
          "tpv-dark": "#073551",
          "light": "#f2f7f8",
          "brand": "#f2f7f8"
        },
        "usage": "Paneles sobre paneles y popups. Ground de text/primary."
      },
      {
        "name": "bg-surface-highlight",
        "value": {
          "tpv-dark": "#094163",
          "light": "#a0f2ff",
          "brand": "#a0f2ff"
        },
        "usage": "Panel destacado o seleccionado (linea del ticket activa, total). Ground de text/primary."
      },
      {
        "name": "bg-inverse",
        "value": {
          "tpv-dark": "#ffffff",
          "light": "#041e2e",
          "brand": "#041e2e"
        },
        "usage": "Fondo invertido de tooltips y badges. Ground de text/inverse."
      },
      {
        "name": "text-primary",
        "value": {
          "tpv-dark": "#ffffff",
          "light": "#062a40",
          "brand": "#062a40"
        },
        "usage": "Texto principal sobre bg/canvas, bg/surface, bg/surface-raised y bg/surface-highlight."
      },
      {
        "name": "text-secondary",
        "value": {
          "tpv-dark": "#829ea6",
          "light": "#829ea6",
          "brand": "#829ea6"
        },
        "usage": "Texto secundario sobre bg/canvas y bg/surface. Valor heredado del TDS: en Light y Brand queda por debajo de 4.5:1, resérvalo para texto de 24 px o mayor y usa text/primary en textos pequenos."
      },
      {
        "name": "text-muted",
        "value": {
          "tpv-dark": "#829ea6",
          "light": "#829ea6",
          "brand": "#829ea6"
        },
        "usage": "Texto atenuado o deshabilitado sobre bg/surface. No lo uses para informacion que haga falta leer."
      },
      {
        "name": "text-accent",
        "value": {
          "tpv-dark": "#1ed8f6",
          "light": "#107595",
          "brand": "#107595"
        },
        "usage": "Texto de acento y etiquetas de tarjeta sobre bg/canvas y bg/surface; en modos claros usa cyan/700 por contraste."
      },
      {
        "name": "text-on-accent",
        "value": {
          "tpv-dark": "#041e2e",
          "light": "#041e2e",
          "brand": "#041e2e"
        },
        "usage": "Texto e iconos sobre action/primary y sobre status/* de relleno cian."
      },
      {
        "name": "text-inverse",
        "value": {
          "tpv-dark": "#041e2e",
          "light": "#ffffff",
          "brand": "#ffffff"
        },
        "usage": "Texto sobre bg/inverse."
      },
      {
        "name": "text-heading",
        "value": {
          "tpv-dark": "#094163",
          "light": "#094163",
          "brand": "#094163"
        },
        "usage": "Titulos de slides y documentos sobre los fondos Brand Light, Paper y bg/canvas claro. Leido en modo Brand; en slides oscuros el titulo va en text/primary."
      },
      {
        "name": "text-subtle",
        "value": {
          "tpv-dark": "#829ea6",
          "light": "#b0c2c8",
          "brand": "#b0c2c8"
        },
        "usage": "Subtitulos y cuerpo de slide sobre Brand Light y Brand Dark. Contraste bajo a proposito (estilo marketing): solo a 36 px o mas, nunca en texto pequeno ni en documentos."
      },
      {
        "name": "text-brand-accent",
        "value": {
          "tpv-dark": "#1ed8f6",
          "light": "#1ed8f6",
          "brand": "#1ed8f6"
        },
        "usage": "Cifras, eyebrow y datos de contacto sobre los fondos oscuros de presentacion (Brand Dark Radial y Linear) y sobre tarjeta blanca a 80 px o mas."
      },
      {
        "name": "border-default",
        "value": {
          "tpv-dark": "#094163",
          "light": "#dde6e9",
          "brand": "#dde6e9"
        },
        "usage": "Bordes y separadores de paneles sobre bg/canvas y bg/surface."
      },
      {
        "name": "border-subtle",
        "value": {
          "tpv-dark": "#073551",
          "light": "#f2f7f8",
          "brand": "#f2f7f8"
        },
        "usage": "Separadores suaves dentro de un panel; decorativos, no llevan informacion."
      },
      {
        "name": "border-strong",
        "value": {
          "tpv-dark": "#1ed8f6",
          "light": "#b0c2c8",
          "brand": "#b0c2c8"
        },
        "usage": "Bordes marcados e inputs activos sobre bg/surface. El valor de TPV Dark se ha leido de la muestra de Figma, que esta pintada con action/primary."
      },
      {
        "name": "action-primary",
        "value": {
          "tpv-dark": "#1ed8f6",
          "light": "#1ed8f6",
          "brand": "#1ed8f6"
        },
        "usage": "Relleno del boton y la accion principal; el texto encima va en text/on-accent."
      },
      {
        "name": "action-primary-hover",
        "value": {
          "tpv-dark": "#70dff9",
          "light": "#107595",
          "brand": "#107595"
        },
        "usage": "Hover y pressed de la accion principal."
      },
      {
        "name": "action-secondary",
        "value": {
          "tpv-dark": "#094163",
          "light": "#dde6e9",
          "brand": "#dde6e9"
        },
        "usage": "Relleno del boton secundario; el texto encima va en text/primary."
      },
      {
        "name": "status-success",
        "value": {
          "tpv-dark": "#2db682",
          "light": "#2db682",
          "brand": "#2db682"
        },
        "usage": "Exito, cobrado, disponible. Como relleno de pastilla con text/on-accent; acompana siempre la palabra o el icono, nunca el color solo."
      },
      {
        "name": "status-success-strong",
        "value": {
          "tpv-dark": "#147f57",
          "light": "#147f57",
          "brand": "#147f57"
        },
        "usage": "Variante intensa de exito: texto e iconos de exito sobre bg/surface claro."
      },
      {
        "name": "status-warning",
        "value": {
          "tpv-dark": "#fa9e00",
          "light": "#fa9e00",
          "brand": "#fa9e00"
        },
        "usage": "Aviso o pendiente. Como relleno de pastilla con text/on-accent."
      },
      {
        "name": "status-warning-strong",
        "value": {
          "tpv-dark": "#ad720c",
          "light": "#ad720c",
          "brand": "#ad720c"
        },
        "usage": "Variante intensa de aviso: texto e iconos de aviso sobre bg/surface claro."
      },
      {
        "name": "status-attention",
        "value": {
          "tpv-dark": "#f3c51a",
          "light": "#f3c51a",
          "brand": "#f3c51a"
        },
        "usage": "Llamada de atencion y resaltados. Solo como relleno o marca, nunca como color de texto."
      },
      {
        "name": "status-danger",
        "value": {
          "tpv-dark": "#cd4040",
          "light": "#cd4040",
          "brand": "#cd4040"
        },
        "usage": "Error, cancelacion, devolucion. Como relleno de pastilla con text/on-accent."
      },
      {
        "name": "status-danger-strong",
        "value": {
          "tpv-dark": "#9e2020",
          "light": "#9e2020",
          "brand": "#9e2020"
        },
        "usage": "Variante intensa de error: texto e iconos de error sobre bg/surface claro."
      },
      {
        "name": "status-info",
        "value": {
          "tpv-dark": "#1ed8f6",
          "light": "#107595",
          "brand": "#107595"
        },
        "usage": "Informacion neutra; en modos claros baja a cyan/700 para poder usarse como texto."
      },
      {
        "name": "brand-logo-wordmark",
        "value": {
          "tpv-dark": "#ffffff",
          "light": "#073551",
          "brand": "#073551"
        },
        "usage": "Relleno del wordmark ticksy. Lo decide el modo del contenedor: nunca se recolorea a mano."
      },
      {
        "name": "brand-logo-accent",
        "value": {
          "tpv-dark": "#1ed8f6",
          "light": "#1ed8f6",
          "brand": "#1ed8f6"
        },
        "usage": "Puntos de la i y de la y del logo."
      },
      {
        "name": "brand-logo-tagline",
        "value": {
          "tpv-dark": "#107595",
          "light": "#829ea6",
          "brand": "#829ea6"
        },
        "usage": "Tagline WORK MADE EASY del logo completo; decorativo, no es texto de lectura."
      },
      {
        "name": "action-danger",
        "value": {
          "tpv-dark": "#cd4040",
          "light": "#cd4040",
          "brand": "#cd4040"
        },
        "usage": "Relleno del boton destructivo (CANCELAR, ELIMINAR); el texto encima va en text/on-status."
      },
      {
        "name": "action-warning",
        "value": {
          "tpv-dark": "#fa9e00",
          "light": "#fa9e00",
          "brand": "#fa9e00"
        },
        "usage": "Relleno del boton que pide atencion (NO SHOWS, COBRAR) y de la tarjeta de paso activo; el texto encima va en text/on-accent."
      },
      {
        "name": "action-ghost",
        "value": {
          "tpv-dark": "#073551",
          "light": "#f6fafa",
          "brand": "#f6fafa"
        },
        "usage": "Fondo de la opcion no seleccionada dentro de un grupo (boton ghost, badge neutral); el texto encima va en text/secondary."
      },
      {
        "name": "action-selected",
        "value": {
          "tpv-dark": "#b0c2c8",
          "light": "#b0c2c8",
          "brand": "#b0c2c8"
        },
        "usage": "Fondo de la opcion seleccionada (tile de modificador); el texto encima va en text/on-selected. Leido en modo TPV Dark."
      },
      {
        "name": "text-on-secondary",
        "value": {
          "tpv-dark": "#1ed8f6",
          "light": "#073551",
          "brand": "#073551"
        },
        "usage": "Texto e iconos sobre action/secondary: el boton secundario y el pomo del toggle apagado."
      },
      {
        "name": "text-on-selected",
        "value": {
          "tpv-dark": "#ffffff",
          "light": "#ffffff",
          "brand": "#ffffff"
        },
        "usage": "Texto sobre action/selected."
      },
      {
        "name": "text-on-status",
        "value": {
          "tpv-dark": "#ffffff",
          "light": "#ffffff",
          "brand": "#ffffff"
        },
        "usage": "Texto sobre un relleno de estado o de canal (badge, cabecera de comanda). Leido en modo TPV Dark; sobre status/attention y sobre action/secondary en modo claro no llega a 4.5:1, usa text/on-accent ahi."
      },
      {
        "name": "text-on-app-bar",
        "value": {
          "tpv-dark": "#ffffff",
          "light": "#ffffff",
          "brand": "#ffffff"
        },
        "usage": "Texto e iconos de la App Bar. Sobre bg/app-bar se queda en 1.9:1: viene asi del archivo y solo vale para rotulos grandes; lo legible va en text/on-accent."
      },
      {
        "name": "text-key",
        "value": {
          "tpv-dark": "#b0c2c8",
          "light": "#b0c2c8",
          "brand": "#b0c2c8"
        },
        "usage": "Cifra y glifos de las teclas del teclado numerico sobre bg/key. Leido en modo TPV Dark."
      },
      {
        "name": "bg-app-bar",
        "value": {
          "tpv-dark": "#1ed8f6",
          "light": "#1ed8f6",
          "brand": "#1ed8f6"
        },
        "usage": "Fondo cian de la App Bar de 104 px. Leido en modo TPV Dark."
      },
      {
        "name": "bg-app-bar-tab",
        "value": {
          "tpv-dark": "#062a40",
          "light": "#062a40",
          "brand": "#062a40"
        },
        "usage": "Fondo de la pestana activa de la App Bar, que se funde con el canvas. Leido en modo TPV Dark."
      },
      {
        "name": "bg-bottom-bar",
        "value": {
          "tpv-dark": "#062a40",
          "light": "#062a40",
          "brand": "#062a40"
        },
        "usage": "Fondo de la Bottom Bar de 96 px. Leido en modo TPV Dark."
      },
      {
        "name": "bg-panel-header",
        "value": {
          "tpv-dark": "#107595",
          "light": "#107595",
          "brand": "#107595"
        },
        "usage": "Cabecera de color del Panel de comandas y listas. Leido en modo TPV Dark."
      },
      {
        "name": "bg-key",
        "value": {
          "tpv-dark": "#073551",
          "light": "#073551",
          "brand": "#073551"
        },
        "usage": "Fondo de cada tecla del teclado numerico, sobre el contenedor en bg/surface. Leido en modo TPV Dark."
      },
      {
        "name": "channel-uber-eats",
        "value": "#a64ab8",
        "usage": "Canal Uber Eats: cabecera de la comanda y punto de estado urgente. Acompana siempre al nombre del canal, nunca va solo."
      },
      {
        "name": "channel-just-eat",
        "value": "#cd4040",
        "usage": "Canal Just Eat: cabecera de la comanda. Mismo hex que color/red-500."
      },
      {
        "name": "channel-table",
        "value": "#fa9e00",
        "usage": "Canal mesa o barra: cabecera de la comanda. Mismo hex que color/orange-500."
      },
      {
        "name": "channel-web",
        "value": "#2db682",
        "usage": "Canal web o webapp: cabecera de la comanda. Mismo hex que color/green-500."
      },
      {
        "name": "group-purple",
        "value": "#c98cc9",
        "usage": "Cabecera morada de grupo de modificadores. Unico morado claro del sistema."
      },
      {
        "name": "text-body",
        "value": {
          "tpv-dark": "#526d75",
          "light": "#526d75",
          "brand": "#526d75"
        },
        "usage": "Cuerpo de texto de los documentos A4 sobre Background/Paper y bg/canvas claro. Leido en modo Brand, que es el de los documentos."
      }
    ]
  },
  "type": {
    "fonts": [],
    "families": {
      "sans": "Rubik, system-ui, -apple-system, Segoe UI, sans-serif"
    },
    "groups": [
      {
        "name": "Display TPV",
        "family": "sans",
        "styles": [
          {
            "name": "display-mega-xl",
            "fontSize": "121px",
            "lineHeight": "121px",
            "fontWeight": 300,
            "sample": "305.00",
            "usage": "Importe principal a pantalla completa (autocobro / pantalla de cliente)."
          },
          {
            "name": "display-mega-l",
            "fontSize": "99px",
            "lineHeight": "99px",
            "fontWeight": 300,
            "sample": "305.00",
            "usage": "Importe principal en la calculadora grande."
          },
          {
            "name": "display-calculator",
            "fontSize": "77px",
            "lineHeight": "84px",
            "fontWeight": 300,
            "sample": "1 2 3",
            "usage": "Cifras de la calculadora de cobro."
          },
          {
            "name": "display-number-l",
            "fontSize": "66px",
            "lineHeight": "72px",
            "fontWeight": 300,
            "sample": "305",
            "usage": "Totales destacados: parte entera."
          },
          {
            "name": "display-number-m",
            "fontSize": "44px",
            "lineHeight": "52px",
            "fontWeight": 300,
            "sample": ".00 EUR",
            "usage": "Decimales del total y cifras grandes de tarjeta."
          }
        ]
      },
      {
        "name": "Headings",
        "family": "sans",
        "styles": [
          {
            "name": "heading-h1",
            "fontSize": "44px",
            "lineHeight": "52px",
            "fontWeight": 300,
            "sample": "ABRIR CAJA",
            "usage": "Titulo de pantalla del TPV."
          },
          {
            "name": "heading-h2",
            "fontSize": "33px",
            "lineHeight": "40px",
            "fontWeight": 300,
            "sample": "ASISTENTE",
            "usage": "Titulo de seccion o de popup."
          },
          {
            "name": "heading-h3",
            "fontSize": "28px",
            "lineHeight": "36px",
            "fontWeight": 400,
            "sample": "TPV SALON COMEDOR",
            "usage": "Subtitulo y nombre de zona."
          },
          {
            "name": "heading-h4",
            "fontSize": "22px",
            "lineHeight": "28px",
            "fontWeight": 400,
            "sample": "MESA 12",
            "usage": "Cabecera de tarjeta y texto de boton grande."
          }
        ]
      },
      {
        "name": "Text",
        "family": "sans",
        "styles": [
          {
            "name": "body-default",
            "fontSize": "22px",
            "lineHeight": "32px",
            "fontWeight": 300,
            "sample": "Parrafos y descripciones del TPV.",
            "usage": "Cuerpo por defecto del TPV."
          },
          {
            "name": "body-regular",
            "fontSize": "22px",
            "lineHeight": "32px",
            "fontWeight": 400,
            "sample": "Cafe con leche - 1,60 EUR",
            "usage": "Enfasis dentro del cuerpo: nombres de producto e importes en linea."
          },
          {
            "name": "label-default",
            "fontSize": "16px",
            "lineHeight": "20px",
            "fontWeight": 400,
            "letterSpacing": "0.4px",
            "sample": "23 DEVOLUCIONES",
            "usage": "Etiquetas y contadores en mayusculas."
          },
          {
            "name": "label-light",
            "fontSize": "16px",
            "lineHeight": "20px",
            "fontWeight": 300,
            "sample": "Total sin IVA 252,07 EUR",
            "usage": "Totales secundarios y texto de apoyo."
          },
          {
            "name": "label-button",
            "fontSize": "24px",
            "lineHeight": "28px",
            "fontWeight": 400,
            "sample": "ACEPTAR",
            "usage": "Etiqueta del boton grande (L) y de la Bottom Bar, en mayusculas."
          },
          {
            "name": "button-small",
            "fontSize": "20px",
            "lineHeight": "24px",
            "fontWeight": 400,
            "sample": "ACEPTAR",
            "usage": "Etiqueta del boton de 64 px (M), en mayusculas."
          },
          {
            "name": "label-caps",
            "fontSize": "14px",
            "lineHeight": "16px",
            "fontWeight": 400,
            "letterSpacing": "1.4px",
            "sample": "TOTAL EFECTIVO",
            "usage": "Rotulo pequeno en mayusculas muy espaciadas: cabecera de seccion, rotulo de KPI, total de la tarjeta de repartidor."
          }
        ]
      },
      {
        "name": "Presentations",
        "family": "sans",
        "styles": [
          {
            "name": "slide-display",
            "fontSize": "150px",
            "lineHeight": "128px",
            "fontWeight": 400,
            "sample": "Work made easy",
            "usage": "Frase a pantalla completa de la slide Statement."
          },
          {
            "name": "slide-title",
            "fontSize": "120px",
            "lineHeight": "100px",
            "fontWeight": 400,
            "sample": "Tecnologia.",
            "usage": "Titulo de slide en (160, 160)."
          },
          {
            "name": "slide-subtitle",
            "fontSize": "48px",
            "lineHeight": "56px",
            "fontWeight": 300,
            "sample": "Detras de lo que se ve.",
            "usage": "Subtitulo bajo el titulo de slide."
          },
          {
            "name": "slide-body",
            "fontSize": "36px",
            "lineHeight": "48px",
            "fontWeight": 300,
            "sample": "Columna de texto de 600 px.",
            "usage": "Cuerpo de slide y texto de las vinetas."
          },
          {
            "name": "slide-small",
            "fontSize": "24px",
            "lineHeight": "32px",
            "fontWeight": 300,
            "sample": "Pie de slide",
            "usage": "Texto pequeno de apoyo en slide."
          },
          {
            "name": "slide-eyebrow",
            "fontSize": "36px",
            "lineHeight": "44px",
            "fontWeight": 300,
            "letterSpacing": "7px",
            "sample": "FEBRERO 2026",
            "usage": "Fecha o cliente bajo el logo de la portada, en mayusculas."
          },
          {
            "name": "slide-label",
            "fontSize": "24px",
            "lineHeight": "28px",
            "fontWeight": 400,
            "letterSpacing": "2px",
            "sample": "CIERRES DE CAJA",
            "usage": "Etiqueta de tarjeta KPI y de tarjeta-etiqueta, en mayusculas."
          },
          {
            "name": "slide-kpi",
            "fontSize": "140px",
            "lineHeight": "140px",
            "fontWeight": 400,
            "sample": "25",
            "usage": "Cifra de la tarjeta KPI."
          },
          {
            "name": "slide-kpi-unit",
            "fontSize": "80px",
            "lineHeight": "80px",
            "fontWeight": 400,
            "sample": "%",
            "usage": "Signo y unidad que acompanan a la cifra KPI."
          },
          {
            "name": "slide-contact-title",
            "fontSize": "28px",
            "lineHeight": "36px",
            "fontWeight": 400,
            "sample": "Contacto",
            "usage": "Titulo del bloque de contacto en la slide de cierre."
          },
          {
            "name": "slide-contact",
            "fontSize": "24px",
            "lineHeight": "32px",
            "fontWeight": 300,
            "sample": "hola@ticksy.app",
            "usage": "Datos de contacto de la slide de cierre."
          },
          {
            "name": "slide-url",
            "fontSize": "24px",
            "lineHeight": "32px",
            "fontWeight": 300,
            "letterSpacing": "5px",
            "sample": "TICKSY.APP",
            "usage": "URL de cierre, en mayusculas y muy espaciada."
          }
        ]
      },
      {
        "name": "Documents",
        "family": "sans",
        "styles": [
          {
            "name": "doc-cover-title",
            "fontSize": "72px",
            "lineHeight": "65px",
            "fontWeight": 400,
            "sample": "Guia Tecnica",
            "usage": "Titulo de portada de documento, sobre text/heading."
          },
          {
            "name": "doc-cover-accent",
            "fontSize": "72px",
            "lineHeight": "72px",
            "fontWeight": 300,
            "sample": "2023",
            "usage": "Segunda linea de la portada (ano o version), sobre text/brand-accent."
          },
          {
            "name": "doc-meta",
            "fontSize": "10px",
            "lineHeight": "14px",
            "fontWeight": 400,
            "sample": "REV. OCTUBRE",
            "usage": "Dato de portada y de separador en mayusculas: revision, fecha, ambito.",
            "letterSpacing": "1px"
          },
          {
            "name": "doc-title",
            "fontSize": "40px",
            "lineHeight": "38px",
            "fontWeight": 400,
            "sample": "Hardware",
            "usage": "Titulo de pagina interior y de separador de seccion, sobre text/heading."
          },
          {
            "name": "doc-lead",
            "fontSize": "20px",
            "lineHeight": "28px",
            "fontWeight": 300,
            "sample": "segun tipo de local",
            "usage": "Entradilla del separador de seccion, sobre text/subtle."
          },
          {
            "name": "doc-section-tag",
            "fontSize": "12px",
            "lineHeight": "16px",
            "fontWeight": 400,
            "sample": "GUIA TECNICA",
            "usage": "Etiqueta de seccion arriba a la derecha de la pagina, sobre text/accent.",
            "letterSpacing": "1px"
          },
          {
            "name": "doc-subtitle",
            "fontSize": "12px",
            "lineHeight": "16px",
            "fontWeight": 300,
            "sample": "Equipos recomendados",
            "usage": "Subtitulo bajo el titulo de pagina, sobre text/subtle."
          },
          {
            "name": "doc-heading",
            "fontSize": "12px",
            "lineHeight": "16px",
            "fontWeight": 400,
            "sample": "TPV",
            "usage": "Encabezado de bloque dentro del cuerpo, en mayusculas sobre text/accent.",
            "letterSpacing": "1px"
          },
          {
            "name": "doc-body",
            "fontSize": "12px",
            "lineHeight": "18px",
            "fontWeight": 300,
            "sample": "Parrafo de documento.",
            "usage": "Cuerpo del documento sobre text/body; parrafos separados 12 y bloques 24."
          },
          {
            "name": "doc-label",
            "fontSize": "12px",
            "lineHeight": "16px",
            "fontWeight": 300,
            "sample": "Cliente",
            "usage": "Clave de una fila dato-valor y encabezado de lista de equipos, sobre text/accent."
          },
          {
            "name": "doc-list-item",
            "fontSize": "12px",
            "lineHeight": "16px",
            "fontWeight": 400,
            "sample": "SUNMI T2S Lite",
            "usage": "Linea de lista de equipos y valor de una fila dato-valor, sobre text/body."
          },
          {
            "name": "doc-footnote",
            "fontSize": "10px",
            "lineHeight": "14px",
            "fontWeight": 300,
            "sample": "* Precios sin IVA.",
            "usage": "Nota al pie del documento, sobre text/accent."
          },
          {
            "name": "doc-caption",
            "fontSize": "9px",
            "lineHeight": "12px",
            "fontWeight": 300,
            "sample": "Fig. 1",
            "usage": "Pie de figura, sobre text/muted."
          },
          {
            "name": "doc-page-number",
            "fontSize": "10px",
            "lineHeight": "14px",
            "fontWeight": 400,
            "sample": "12",
            "usage": "Numero de pagina, a 56 del borde y sobre text/muted."
          }
        ]
      }
    ]
  },
  "spacing": {
    "note": "Escala limpia en pixeles: todo multiplo de 4, modulo base 8. Sustituye a las miniunidades del TDS (1 miniud = 2,75 px).",
    "tokens": [
      {
        "name": "space-4",
        "value": "4px",
        "usage": "Ajustes finos entre elementos que casi se tocan."
      },
      {
        "name": "space-8",
        "value": "8px",
        "usage": "Gap entre elementos relacionados."
      },
      {
        "name": "space-12",
        "value": "12px",
        "usage": "Padding interno de controles pequenos."
      },
      {
        "name": "space-16",
        "value": "16px",
        "usage": "Padding interno de controles."
      },
      {
        "name": "space-24",
        "value": "24px",
        "usage": "Padding de paneles y gutter entre tarjetas."
      },
      {
        "name": "space-32",
        "value": "32px",
        "usage": "Padding de paneles amplios."
      },
      {
        "name": "space-40",
        "value": "40px",
        "usage": "Separacion entre bloques."
      },
      {
        "name": "space-48",
        "value": "48px",
        "usage": "Separacion entre bloques grandes."
      },
      {
        "name": "space-64",
        "value": "64px",
        "usage": "Margen de pantalla y zonas tactiles."
      },
      {
        "name": "space-96",
        "value": "96px",
        "usage": "Margen de pantalla generoso y separacion en portada."
      }
    ]
  },
  "radius": {
    "note": "El radio crece con el tamano del elemento: r = 4 + 4 x (lado / 64).",
    "tokens": [
      {
        "name": "radius-sm",
        "value": "8px",
        "usage": "Elementos de unos 64 px: botones, pastillas de estado."
      },
      {
        "name": "radius-md",
        "value": "12px",
        "usage": "Elementos de unos 128 px: tarjetas de producto."
      },
      {
        "name": "radius-lg",
        "value": "16px",
        "usage": "Elementos de unos 192 px: paneles."
      },
      {
        "name": "radius-xl",
        "value": "20px",
        "usage": "Elementos de 256 px o mas: paneles grandes y tarjetas de slide."
      }
    ]
  },
  "size": {
    "note": "Tamanos tactiles heredados del TDS.",
    "tokens": [
      {
        "name": "size-touch-min",
        "value": "64px",
        "usage": "Lado minimo de cualquier control pulsable del TPV."
      },
      {
        "name": "size-touch-reserve",
        "value": "96px",
        "usage": "Lado reservado a las acciones principales y a lo que se usa con prisa (cobrar, enviar a cocina)."
      }
    ]
  },
  "shadow": {
    "tokens": [
      {
        "name": "shadow-card",
        "value": "0 8px 24px rgba(4, 30, 46, 0.08)",
        "usage": "Unica sombra del sistema: tarjetas blancas sobre fondos de presentacion y documento."
      },
      {
        "name": "shadow-modal",
        "value": "0 12px 32px rgba(4, 30, 46, 0.32)",
        "usage": "Sombra de los popups: Modal y Popover. Mas profunda que shadow/card."
      }
    ]
  }
}