BRANDKIT · SISTEMA VISUAL 2026.09

Una marca humana. Un sistema compartido.

Personas, producto y una identidad reconocible. Esta es la guía para diseñar las próximas páginas de Napsix con el mismo criterio que Home y XIA Agents.

Equipo colaborando en una oficina con XIA
Napsix

COLOR CON UN PROPÓSITO

La única paleta del sitio.

Usá estos tokens para todas las páginas nuevas. Los logos conservan sus archivos originales; sus tintas no son una segunda paleta de interfaz.

Papel

#FAF9F6

Fondos amplios y lectura.

Carbón

#242A27

Títulos y acciones secundarias.

Verde

#385541

Énfasis, foco y comparativos.

Lima de interfaz

hsl(72 90% 53%)

Token --accent del sitio. Texto oscuro en acciones principales.

Texto secundario

#5D665F

Descripciones sobre fondos claros.

Borde

#DEDFD7

Separación suave entre contenidos.

TIPOGRAFÍA

Carácter en los títulos. Claridad en el contenido.

JetBrains Mono · 600 / 700

Tu equipo y XIA, trabajando juntos.

Títulos, navegación, etiquetas y CTAs. Pesos 600–700; espaciado ajustado solo en títulos grandes.

Inter · 400 / 600

Una conversación clara transforma un pedido en el próximo paso de tu equipo.

Textos, descripciones y comparativos. Pesos 400–600; cuerpo de 16–20 px y altura de línea de 1,6.

COMPONENTES EN VIVO

La misma interacción, en cada página.

Probá el foco de teclado y el hover. El CTA lima es la acción principal; la píldora oscura acompaña. Las tarjetas llevan a destinos concretos.

Designer

DesignerBrief de campaña
01

Marca seleccionada

02

Lanzamiento de temporada

03

Referencia visual

Ejemplo ilustrativo. No genera ni publica contenido desde esta página.

Matov1.0

Mato v1.0

Conseguime los precios de la competencia y armá la planilla del equipo.

  • Buscar precios
  • Leer las fichas
  • Escribir en Sheets

Recorrido ilustrativo con datos de ejemplo; no es una ejecución real.

Espacios de trabajo

Recorrido ilustrativo con datos de ejemplo. Las acciones requieren configuración y permisos.

Rooms

NapsixB2BRooms
Equipo / Lanzamiento
Lucía · Equipo comercial

XIA, resumí los acuerdos de esta reunión.

Ejemplo · para revisar

Recorrido ilustrativo con datos de ejemplo. Las acciones requieren configuración y permisos.

Projects

NapsixB2BProjects
Proyecto / Lanzamiento
Pendiente
Preparar propuesta

Lucía · Responsable

En curso
Terminado

Preparar la propuesta para el lanzamiento.

Ejemplo · para revisar

Recorrido ilustrativo con datos de ejemplo. Las acciones requieren configuración y permisos.

Inbox

NapsixB2BInbox
Inbox / Atención
María · ClienteRecibido
Hola, ¿podemos coordinar una reunión para revisar la propuesta?
Ejemplo · para revisar

Recorrido ilustrativo con datos de ejemplo. Las acciones requieren configuración y permisos.

CRM

NapsixB2BCRM
Pipeline / Equipo comercial
Contacto
Proyecto Norte

Lucía · Comercial

Propuesta
Seguimiento

Reunir las necesidades del cliente.

Ejemplo · para revisar

Recorrido ilustrativo con datos de ejemplo. Las acciones requieren configuración y permisos.

Marketing y automatización

Recorrido ilustrativo con datos de ejemplo. Las acciones requieren configuración y permisos.

Ads

NapsixB2BAds
Ads / Lanzamiento de temporada
XIA · XIA, prepará una promoción para este lanzamiento.
Publicación elegida
Meta Ads
Colección de temporada

Visitas al sitio

Pendiente · sin gasto
Ejemplo ilustrativo · para revisar

Recorrido ilustrativo con datos de ejemplo. Las acciones requieren configuración y permisos.

Campaigns

NapsixB2BCampaigns
Campaigns / Novedades del equipo
XIA · XIA, preparemos las novedades para nuestros suscriptores.
Audiencia seleccionada
Suscriptores activos
Ana · suscripta
Luis · suscripto
Marta · baja excluida
Ejemplo ilustrativo · para revisar

Recorrido ilustrativo con datos de ejemplo. Las acciones requieren configuración y permisos.

Automations

NapsixB2BAutomations
Automations / Seguimiento comercial
XIA · Cuando llegue un contacto, organicemos su seguimiento.
Evento de entrada

Nuevo contacto

Automations / Seguimiento comercial
Ejemplo ilustrativo · para revisar

Recorrido ilustrativo con datos de ejemplo. Las acciones requieren configuración y permisos.

Correo, archivos y fuentes

Recorrido ilustrativo con datos de ejemplo. Las acciones requieren configuración y permisos.

Mail

NapsixB2BMail
Correo / Equipo comercial
Recibido
Propuesta de servicio
ana@example.comequipo@example.com

¿Podés confirmar el alcance de la propuesta?

Ejemplo ilustrativo · para revisar

Recorrido ilustrativo con datos de ejemplo. Las acciones requieren configuración y permisos.

Almacenamiento

NapsixB2BAlmacenamiento
Archivos / Proyecto Norte
Archivos del proyecto
Manual del proyecto.pdf

PDF · Equipo

Encontrá el manual del proyecto.

Ejemplo ilustrativo · para revisar

Recorrido ilustrativo con datos de ejemplo. Las acciones requieren configuración y permisos.

Crawl

NapsixB2BCrawl
Investigación / Fuentes web
Búsqueda
Logística sostenible
Informe de distribución

example.com/informe.pdf

Ejemplo ilustrativo · para revisar

Recorrido ilustrativo con datos de ejemplo. Las acciones requieren configuración y permisos.

Resultados de trabajo

Recorrido ilustrativo con datos de ejemplo. Las acciones requieren configuración y permisos.

Docs

NapsixB2BDocs
Propuesta / Equipo comercial
XIA · Prepará una propuesta de acompañamiento.
Borrador

Propuesta de trabajo

Objetivo: organizar la atención y el seguimiento.

Datos de ejemplo · para revisar

Recorrido ilustrativo con datos de ejemplo. Las acciones requieren configuración y permisos.

Sheets

NapsixB2BSheets
Planilla / Operaciones
XIA · Organizá las cantidades por línea.
Datos de entrada
LíneaCantidadResultado
A120—
B80—
C60—
Datos de ejemplo · para revisar

Recorrido ilustrativo con datos de ejemplo. Las acciones requieren configuración y permisos.

Dashboards

NapsixB2BDashboards
Tablero / Dirección
XIA · Mostrá la evolución de los últimos tres períodos.
Definir la vista
—
Período 1
—
Período 2
—
Período 3
Datos de ejemplo · para revisar

Recorrido ilustrativo con datos de ejemplo. Las acciones requieren configuración y permisos.

Forms

NapsixB2BForms
Formulario / Atención
XIA · Creá un formulario con nombre y correo.
Estructura
Nombre
—
Correo
—
Datos de ejemplo · para revisar

Recorrido ilustrativo con datos de ejemplo. Las acciones requieren configuración y permisos.

Plataforma y planes

XIA para trabajar con personas y agentes. AI Gateway para integrar modelos desde tu aplicación. Compará ambos productos y elegí el plan que corresponde.

Compará los límites del Gateway
Qué incluyeGateway FreeGateway StarterGateway ProGateway Enterprise
Tokens por mes100.00010.000.000100.000.000Sin límite
API keys525Sin límiteSin límite
Personas1525Sin límite
BYOK · tus propias clavesNoSíSíSí

Límites mensuales donde se indica. Las funciones y condiciones dependen del plan elegido; los modelos disponibles se consultan en el catálogo.

Biblioteca de componentes

Una pieza para cada necesidad.

Ejemplos del código compartido, reglas de uso y pendientes de construcción. Las muestras explican el diseño; no son promesas comerciales.

Comparar sin perder contexto

CompareTable muestra criterios y alternativas. Usá texto que explique la diferencia y destacá una sola columna. En móvil, la tabla general conserva las columnas con desplazamiento horizontal; la comparación de Home tiene una adaptación específica para dos alternativas.

Comparar sin perder contexto
CriterioComposición aisladaSistema compartido
BotonesUna receta por páginaCtaLink y CtaAnchor
TablasCeldas y colores propiosCompareTable o DataTable
MovimientoEfectos independientesReveal y controles de pausa
<CompareTable caption={t("title")} rowHeader={t("tableLabels.criterion")}
  columns={columns} rows={rows} />
Tabla de especificaciones
ElementoReferenciaUso
Reveal80 msCadencia entre elementos; prop index.
Área táctil44 pxMínimo para acciones principales.
Tarjetas de destino2 → 1Dos columnas en escritorio, una en móvil.

Preservá encabezados y contexto. El contenedor recibe foco para desplazarse con teclado. No ocultes columnas esenciales en móvil.

<DataTable caption={t("title")} columns={columns}
  rows={[{ id: "stable-id", cells: [label, value, description] }]} />

La receta de una página de producto

Coder aplica el hero configurable, la demostración por pasos y los estados explícitos de comparación. Ejemplos ilustrativos; la configuración de planes es la fuente comercial.

01 · El pedido

Primero, un objetivo claro.

Tu pedido

XIA, creá una web para nuestro estudio. Servicios, equipo y formulario de contacto.

XIA Coder

Voy a organizar una primera versión con tu marca y estas secciones.

Tu empresa
Estudio de arquitectura
El contenido
Servicios · Proyectos · Contacto
El estilo
Cálido, editorial y natural

Demostración ilustrativa. No publica un sitio ni representa una sesión real.

IncluidoNo incluidoRequiere configuración
XIA Coder

Soluciones: contexto visual y tres escalas

SolutionHero usa una imagen de fondo con una capa de contraste. La demo distingue consulta, preparación y revisión humana. Insurance es la referencia para nuevas páginas de industria.

NAPSIX PARA SEGUROS · COMPAÑÍAS, BROKERS Y PRODUCTORES

Una operación conectada.
Tu compañía.

XIA conecta conversaciones, documentos y próximos pasos para que toda la cadena del seguro trabaje con contexto. Desde un productor hasta los equipos de una compañía y su red comercial.

Consulta · Renovación
CLIENTA · EJEMPLO

Mi póliza vence este mes. ¿Podemos revisar la renovación? Adjunto la documentación.

Documentación de renovación.pdf

Adjunto aportado por la clienta

Ejemplo ilustrativo con datos ficticios. Requiere fuentes conectadas y permisos. No cotiza, emite ni aprueba coberturas o siniestros.

Conexiones: animación explicativa y catálogo

AppConnectionScene muestra entradas y resultados ilustrativos con pausa y selección manual. IntegrationCatalog usa búsqueda, filtros y fichas desplegables; no inicia OAuth ni promete conexiones activas.

DE UNA APP AL TRABAJO COMPARTIDO
Gmail

Un correo trae un pedido del cliente.

NapsixXIA
XIA + Rooms

XIA prepara el contexto para compartir con el equipo.

Secuencia ilustrativa. No representa una cuenta conectada ni una ejecución en vivo.

Mostrando 6 de 6 integraciones

Atlassian (Jira + Confluence)Productividad

Issues, sprints, páginas y comentarios en Jira y Confluence.

Herramientas · MCP

Después de crear tu espacio, revisá la disponibilidad y los permisos de esta conexión. Esta ficha no conecta tu cuenta.

Empezar con NapsixVer documentación
CloudflareDesarrollo

Administrá DNS, Workers, Pages, R2, KV y el resto de tu infraestructura edge de Cloudflare.

Conexión de cuenta · OAuthHerramientas · MCP

Después de crear tu espacio, revisá la disponibilidad y los permisos de esta conexión. Esta ficha no conecta tu cuenta.

Empezar con NapsixVer documentación
FacebookRedes sociales

Gestioná tu página, respondé mensajes y automatizá publicaciones.

Conexión de cuenta · OAuth

Después de crear tu espacio, revisá la disponibilidad y los permisos de esta conexión. Esta ficha no conecta tu cuenta.

Empezar con Napsix
FirecrawlDesarrollo

Scrapeá webs, crawleá sitios enteros, extraé datos estructurados y buscá en internet con IA.

Conexión de cuenta · OAuth

Después de crear tu espacio, revisá la disponibilidad y los permisos de esta conexión. Esta ficha no conecta tu cuenta.

Empezar con Napsix
GitHubDesarrollo

Issues, PRs, releases y operaciones en repos.

Conexión de cuenta · OAuthHerramientas · MCP

Después de crear tu espacio, revisá la disponibilidad y los permisos de esta conexión. Esta ficha no conecta tu cuenta.

Empezar con NapsixVer documentación
GmailEmail

Leé y enviá emails, buscá contactos y gestioná tu bandeja.

Conexión de cuenta · OAuth

Después de crear tu espacio, revisá la disponibilidad y los permisos de esta conexión. Esta ficha no conecta tu cuenta.

Empezar con Napsix

Agentes: elegir un trabajo para delegar

Usá AgentsReference y PublicAgentCard para el catálogo público. La escena ilustra resultados; no representa ejecuciones ni conexiones reales.

Un trabajo, un resultado
Gmail

Llegó una consulta comercial. Prepará los próximos pasos.

NapsixXIA
XIA + Rooms

Seguimiento preparado para revisar con el equipo.

Ejemplos ilustrativos. Las acciones dependen de las apps conectadas y los permisos del agente.

Apps, origen y orden

Filtrar por apps que utiliza

1 resultados entre 1 agentes cargados

Datos

Reporte Recurrente

Ejemplo editorial: un informe semanal con datos actualizados, para revisar con el equipo.

Trabaja con

Google SheetsGoogle SheetsGmailGmailSlackSlack
Napsix
Ver cómo trabaja

Key Partners: una integración con recorrido propio

KeyPartnerReference comparte estructura, pero cada partner conserva su alcance, sus ejemplos y su vía de conexión. No atribuir certificaciones ni beneficios comerciales sin evidencia.

Equipo coordinando pedidos y paquetes en una oficina de comercio.
Mercado LibreMercado LibreMercado PagoMercado Pago

De la consulta al próximo paso

Mercado LibreMercado LibreMercado PagoMercado Pago
Vista ilustrativa

Mercado Libre · resumen

Una lectura rápida de la operación

Ventas a revisar
12
Preguntas pendientes
3
Envíos pendientes
2
Resumen preparado

Demo con datos de ejemplo.

Dos colegas revisando una tienda online en una oficina.
TiendanubeTiendanube

Tu tienda y tu equipo, conectados

TiendanubeTiendanube
Vista ilustrativa

Tiendanube · informe

Una lectura para decidir el próximo paso

Pedidos de ejemplo
18
Productos destacados
3
Productos a revisar
4
Informe preparado

Demo con datos de ejemplo.

Del pedido a un resultado que podés revisar.

Un ejemplo de cómo XIA organiza el contexto y prepara el siguiente paso.

XIARooms · Contexto

Minería

XIA, Prepará el relevo con este parte de turno.

Parte de turno · Frente Norte

Demo con datos de ejemplo.

XIARooms · Contexto

Agencias

XIA, Convertí este brief en un plan para el equipo.

Brief de campaña · Marca de ejemplo

Demo con datos de ejemplo.

Tarjetas y respuestas, sin variantes por página

FeatureGrid presenta beneficios; los destinos usan HumanProductLinks. FAQ funciona con teclado y sin JavaScript. Las tarjetas informativas no deben aparentar botones.

Primera etapa60%

Ejemplo visual: porcentaje ilustrativo, no una métrica del negocio.

Siguiente etapa40%

Ejemplo visual: porcentaje ilustrativo, no una métrica del negocio.

  • Una idea

    Título breve, beneficio concreto y detalle legible.

  • Jerarquía clara

    El lima marca acciones. El contenido conserva un fondo tranquilo.

  • Movimiento útil

    Entrada breve con Reveal; el texto siempre permanece accesible.

¿Cuándo uso una tabla?
Para comparar atributos o consultar datos estructurados. Usá tarjetas para destinos y beneficios independientes.
¿Puedo crear otro estilo de botón?
Primero extendé CtaLink o CtaAnchor dentro del kit. Documentá la variante aquí y verificá foco, móvil y reduced motion.
¿Esta biblioteca ya cubre todos los casos?
Los ejemplos están implementados. El backlog distingue piezas existentes que requieren adaptación de piezas todavía pendientes.

Qué reutilizar y qué construir

Este es el orden de trabajo para completar el sitio. Los nombres propuestos aún no son APIs disponibles.

Qué reutilizar y qué construir
ComponenteEstadoSiguiente paso
HumanHero / HumanFilmAdaptar · P0Separar contenido y medios de story=home|agents para nuevos productos.
CompareTable / DataTableDisponibleReutilizar; validar tablas largas y condiciones comerciales.
CatalogToolbarCrear · P0Búsqueda, filtros, recuento, reset y estado sin resultados para Plataforma, Agentes e Integraciones.
CatalogCard / DetailHeaderExtraer · P0Unificar agent-card, integración y FeaturesIndex; mantener badges y destinos reales.
PricingCard / PlanComparisonExtraer · P0Reutilizar datos de pricing; estados de plan, período y condiciones sin cifras inventadas.
FormField / FormFeedbackExtraer · P1Label, ayuda, select, validación, envío, éxito y error desde formularios existentes.
WorkflowSteps / DemoFrameExtraer · P1Generalizar HumanDemo y flujos; pausa, poster, fallback y transcripción.
EditorialLayout / ResourceCardCrear · P2Artículos, legales y novedades: índice, fecha, autor, enlaces y ancho de lectura.
StatusNotice / EmptyStateExtraer · P2Info, pendiente, error y recuperación; no comunicar estados solo con color.
ProofCard / Quote / TrustGridCrear · P2Casos, testimonios y seguridad con evidencia y permisos de uso de logos.

Cobertura del sitio

La migración, página por página.

Inventario de 63 plantillas del código: marketing, Agentes y partners públicos. Las rutas dinámicas no se expanden. La clasificación indica adaptación visual pendiente, no errores HTTP. Cada migración requiere revisión visual posterior.

Ver todas las rutas y sus componentes
La migración, página por página.
RutaEstadoComponenteSiguiente paso
/brandkitReferencia · —CompareTable, FAQ, FeatureGrid, HumanAppsCarousel, HumanBrandGuide, HumanFilm, HumanFilmPlayer, HumanProductLinks, Reveal, StatBand—
/brandkit.comRedirección · —Composición propia—
/comunidadesReferencia · —CTABand, FAQ, FeatureGrid, HeroUtility, Reveal—
/contactoReferencia · —FeatureGrid, HeroUtility, Reveal—
/developersReferencia · —Reveal—
/empresa/[slug]Referencia · —HeroUtility, Reveal—
/plataformaReferencia · —HumanAppsCarousel, Reveal—
/developers/gatewayReferencia · —CompareTable, FeatureGrid, Reveal—
/integraciones/mercadoReferencia · —CompareTable, FAQ, FeatureGrid, HumanAppsCarousel, Reveal—
/integracionesReferencia · —CompareTable, FAQ, FeatureGrid, Reveal—
/integraciones/partners/aplicarReferencia · —CompareTable, FAQ, FeatureGrid, Reveal—
/integraciones/partners/terminosReferencia · —HeroUtility, Reveal—
/integraciones/tiendanubeReferencia · —CompareTable, FAQ, FeatureGrid, HumanAppsCarousel, Reveal—
/investorsReferencia · —CTABand, CompareTable, FeatureGrid, HumanAppsCarousel, HumanFilm, HumanFilmPlayer, Reveal, StatBand—
/legal/slaReferencia · —HeroUtility, Reveal—
/marca/[slug]Referencia · —FeatureGrid, HeroUtility, Reveal—
/matoReferencia · —CompareTable, FAQ, FeatureGrid, HumanAppsCarousel, HumanFilm, HumanFilmPlayer, Reveal, StatBand—
/developers/modelosReferencia · —Reveal—
/novedades/[slug]Referencia · —HeroUtility, Reveal—
/novedadesReferencia · —CTABand, HeroUtility—
/Referencia · —CompareTable, FAQ, HumanAppsCarousel, HumanDemo, HumanFilm, HumanFilmPlayer, HumanHero, HumanLanding, HumanProductLinks, HumanValueSections, Reveal—
/partners/track/[id]Referencia · —HeroUtility, Reveal—
/partnership/[partner]Referencia · —CTABand, CompareTable, FeatureGrid, HeroUtility, Reveal—
/plataforma/adsReferencia · —AppsGrid, AppsGridSection, AppsGridTileView, CTABand, CompareTable, FAQ, FeatureGrid, HeroIcon, HeroProduct, HumanAppsCarousel, HumanFilm, HumanFilmPlayer, Reveal—
/plataforma/automationsReferencia · —AppsGrid, AppsGridSection, AppsGridTileView, CTABand, CompareTable, FAQ, FeatureGrid, HeroIcon, HeroProduct, HumanAppsCarousel, HumanFilm, HumanFilmPlayer, Reveal—
/plataforma/campaignsReferencia · —AppsGrid, AppsGridSection, AppsGridTileView, CTABand, CompareTable, FAQ, FeatureGrid, HeroIcon, HeroProduct, HumanAppsCarousel, HumanFilm, HumanFilmPlayer, Reveal—
/plataforma/crmReferencia · —AppsGrid, AppsGridSection, AppsGridTileView, CTABand, CompareTable, FAQ, FeatureGrid, HeroIcon, HeroProduct, HumanAppsCarousel, HumanFilm, HumanFilmPlayer, Reveal—
/plataforma/inboxReferencia · —AppsGrid, AppsGridSection, AppsGridTileView, CTABand, CompareTable, FAQ, FeatureGrid, HeroIcon, HeroProduct, HumanAppsCarousel, HumanFilm, HumanFilmPlayer, Reveal—
/plataforma/knowledgeRedirección · —Composición propia—
/plataforma/projectsReferencia · —AppsGrid, AppsGridSection, AppsGridTileView, CTABand, CompareTable, FAQ, FeatureGrid, HeroIcon, HeroProduct, HumanAppsCarousel, HumanFilm, HumanFilmPlayer, Reveal—
/plataforma/roomsReferencia · —CompareTable, FAQ, FeatureGrid, HumanAppsCarousel, HumanFilm, HumanFilmPlayer, Reveal—
/pricingReferencia · —CompareTable, FAQ, Reveal—
/privacidadReferencia · —HeroUtility, Reveal—
/productos/almacenamientoReferencia · —CompareTable, FAQ, FeatureGrid, HumanAppsCarousel, HumanFilm, HumanFilmPlayer, Reveal—
/productos/calendarReferencia · —CompareTable, FAQ, FeatureGrid, HumanAppsCarousel, HumanFilm, HumanFilmPlayer, Reveal—
/productos/conciergeReferencia · —CompareTable, FAQ, FeatureGrid, HumanAppsCarousel, HumanFilm, HumanFilmPlayer, Reveal—
/productos/designerReferencia · —CompareTable, FAQ, FeatureGrid, HumanAppsCarousel, HumanFilm, HumanFilmPlayer, Reveal—
/productos/documentosReferencia · —CompareTable, FAQ, FeatureGrid, HumanAppsCarousel, HumanFilm, HumanFilmPlayer, Reveal—
/productos/formsReferencia · —CompareTable, FAQ, FeatureGrid, HumanAppsCarousel, HumanFilm, HumanFilmPlayer, Reveal—
/productos/mailReferencia · —CompareTable, FAQ, FeatureGrid, HumanAppsCarousel, HumanFilm, HumanFilmPlayer, Reveal—
/productos/outboundReferencia · —CompareTable, FAQ, FeatureGrid, HumanAppsCarousel, HumanFilm, HumanFilmPlayer, Reveal—
/productos/planillasReferencia · —CompareTable, FAQ, FeatureGrid, HumanAppsCarousel, HumanFilm, HumanFilmPlayer, Reveal—
/productos/tablerosReferencia · —CompareTable, FAQ, FeatureGrid, HumanAppsCarousel, HumanFilm, HumanFilmPlayer, Reveal—
/productos/tasksReferencia · —CompareTable, FAQ, FeatureGrid, HumanAppsCarousel, HumanFilm, HumanFilmPlayer, Reveal—
/productos/xia-agentsReferencia · —CompareTable, FAQ, HumanAppsCarousel, HumanDemo, HumanFilm, HumanFilmPlayer, HumanHero, HumanLanding, HumanProductLinks, HumanValueSections, Reveal—
/productos/xia-coderReferencia · —CompareTable, FAQ, FeatureGrid, HumanAppsCarousel, HumanFilm, HumanFilmPlayer, Reveal—
/productos/xia-crawlReferencia · —CompareTable, FAQ, FeatureGrid, HumanAppsCarousel, HumanFilm, HumanFilmPlayer, Reveal—
/promo/[code]Referencia · —HeroUtility, Reveal—
/promo/terminosReferencia · —HeroUtility, Reveal—
/revendedoresReferencia · —CTABand, FAQ, FeatureGrid, HeroUtility, Reveal—
/roadmapReferencia · —CTABand, FeatureGrid, HeroUtility, Reveal—
/industrias/[slug]Referencia · —CompareTable, FAQ, FeatureGrid, HumanAppsCarousel, HumanFilm, HumanFilmPlayer, Reveal—
/industriasReferencia · —HumanAppsCarousel, Reveal—
/seguridadReferencia · —CTABand, FeatureGrid, HeroUtility, Reveal—
/soluciones/[role]Referencia · —CompareTable, FAQ, FeatureGrid, HumanAppsCarousel, HumanFilm, HumanFilmPlayer, Reveal—
/solucionesReferencia · —HumanAppsCarousel, Reveal—
/statusReferencia · —FAQ, HeroUtility, Reveal—
/terminosReferencia · —HeroUtility, Reveal—
/agentes/[slug]Referencia · —StatBand—
/agentesReferencia · —CompareTable, FAQ, FeatureGrid, HumanAppsCarousel, Reveal—
/creador/[handle]Referencia · —CTABand, HeroUtility, Reveal, StatBand—
/partners/[slug]/upgradeReferencia · —HeroUtility, Reveal—
/partners/aplicarReferencia · —HeroUtility, Reveal—

Contrato de implementación

El próximo agente empieza acá.

La guía descargable documenta fuentes, APIs existentes, recetas y criterios de aceptación. Es independiente del proveedor de IA.

  1. Leé AGENTS.md, REGLAS.md y site-style-system.md; revisá la fila de la ruta en la auditoría.
  2. Elegí una receta: producto, catálogo, confianza o editorial. Reutilizá los componentes existentes.
  3. Conservá los tokens, logos maestros y nombres oficiales. Todo texto visible y accesible debe existir en ES y EN.
  4. Si falta una pieza, creala en components/site y documentá su API, estados y ejemplo en /brandkit.
  5. Comprobá teclado, 390 px, escritorio, reduced motion, medios pausados y errores de carga.
  6. Ejecutá los checks, regenerá auditoría y ZIP, y registrá la evidencia. No marques una ruta como migrada solo por devolver HTTP 200.

HOJA DE ESTILO

Seis criterios para diseñar con coherencia.

01

Composición

Texto y CTAs a la izquierda; video 1:1 a la derecha. En móvil, una columna. Un máximo de dos chips en el hero.

02

Movimiento

Hover y foco: 300 ms. Reveal: 500 ms, con pasos de 80 ms. Videos y demos tienen pausa; movimiento reducido desactiva los loops.

03

Escenas humanas

Oficinas y equipos reales como dirección visual. XIA aparece en el trabajo. Interfaces recreadas se identifican como ilustrativas.

04

Jerarquía

Una acción principal por bloque. Radios de 14 px en CTAs, 22–28 px en tarjetas y medios. Aire antes que ornamentos.

05

Marca y comunicación

Logos oficiales, sin redibujar ni deformar. Nombres de producto canónicos. Explicar resultados y controles con ejemplos verificables.

06

Accesibilidad

Foco visible, texto oscuro sobre lima y enlaces con propósito. Comparativos apilados en móvil. Nunca depender solo del movimiento para entender.

Sistema de logos

Tres firmas, una misma marca.

NapsixB2B sigue siendo la marca principal. Napsix y NapsixAI son firmas complementarias construidas con la misma geometría y los mismos colores.

NapsixB2B

Marca principal

Firma institucional y comercial. Es el logo predeterminado para el producto, el sitio y las comunicaciones corporativas.

Plataforma principal
Logo NapsixB2B negro y lime para fondos claros
Para fondos claros
Logo NapsixB2B blanco y lime para fondos oscuros
Para fondos oscuros

Napsix

Firma corta sin el sufijo B2B. Conserva exactamente la tipografía y el isotipo de la marca principal.

Firma corta
Logo Napsix negro y lime para fondos claros
Para fondos claros
Logo Napsix blanco y lime para fondos oscuros
Para fondos oscuros

NapsixAI

Actualización de la firma NapsixAI con la referencia cromática de napsix.com: negro o blanco pleno y lime canónico.

Firma de IA
Logo NapsixAI negro y lime para fondos claros
Para fondos claros
Logo NapsixAI blanco y lime para fondos oscuros
Para fondos oscuros
Redes sociales

Perfiles, portadas y video.

Archivos ya dimensionados para que el logo no quede cortado, borroso ni ilegible en los recortes de cada plataforma.

Opciones de avatar

Todos los masters son cuadrados y dejan margen para el recorte circular.

Portadas oficiales

La composición mantiene el logo dentro de la zona segura de cada red.

Uso correcto

Simple de aplicar. Difícil de romper.

Unas pocas reglas mantienen la marca nítida y consistente en cualquier tamaño.

Hacé esto

  • Usá la versión clara u oscura según el contraste del fondo.
  • Mantené un espacio libre mínimo igual al 25% de la altura del logo.
  • Usá el SVG cuando sea posible y el PNG grande para plataformas sociales.
  • Usá el isotipo o un avatar cuadrado en recortes circulares pequeños.

No hagas esto

  • No reemplaces el lime #CAF31D por un verde parecido.
  • No estires, comprimas, gires ni redibujes el logo.
  • No agregues sombras, contornos, degradados ni efectos.
  • No uses los colores legacy #B6ED64, #00FF00 o #430C66.
EL SISTEMA DE ÍCONOS

Los íconos de las apps y de las actions.

Set propio en duotone (tinta + lima): 26 apps nativas y 24 commands del chat, listos para producto y marca.

APPS NATIVAS

Las apps de Napsix, con íconos propios.

26 apps que Mato opera de fábrica: sin configuración y sin claves.

  • XIA Agents
  • Inbox
  • Mail
  • Calendar
  • Tasks
  • Projects
  • Rooms
  • CRM
  • Outbound
  • Docs
  • Sheets
  • Dashboards
  • Forms
  • Storage
  • Crawl
  • Coder
  • Designer
  • Campaigns
  • Automations
  • Integraciones
  • AI Gateway
  • Agentes
  • Agendas
  • Contactos
  • Marcas
  • Publicador

COMMANDS DEL CHAT

Lo que le pedís ya está adentro.

24 commands que corren en el chat, en los agentes y por API.

  • /image
  • /edit
  • /video
  • /reel
  • /doc
  • /sheet
  • /tablero
  • /sitio
  • /form
  • /extract
  • /transcribe
  • /web
  • /summarize
  • /translate
  • /chart
  • /contact
  • /task
  • /calendar
  • /deal
  • /kb
  • /agent
  • /model
  • /help
  • /memory-recall
  • PlataformaNapsixB2B

    El OS agéntico multi-tenant: XIA, los agentes y las apps de Napsix.

  • AgenteXIA

    Con quien hablás: opera tus apps nativas, tus integraciones y las actions.

  • ModeloMato

    El modelo propietario que corre a XIA: tool-calling nativo y $0 por token.

Los assets oficiales, en una descarga.

Incluye 16 masters SVG, PNG transparentes, perfiles, portadas, marca de agua, tokens de color, manifiesto y checksums.

Descargar ZIP completo
XIA
público