# Napsix — Hoja de estilo

2026.09 · Home / XIA Agents

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.

## COLOR CON UN PROPÓSITO

- 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%)` — Acciones principales, con texto oscuro.
- Texto secundario: `#5D665F` — Descripciones sobre fondos claros.
- Borde: `#DEDFD7` — Separación suave entre contenidos.

## TIPOGRAFÍA

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

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

## 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.

## Movimiento

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

## Escenas humanas

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

## 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.

## Marca y comunicación

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

## Accesibilidad

Foco visible, texto oscuro sobre lima y enlaces con propósito. Las tablas generales mantienen columnas con scroll accesible; solo el comparativo de Home apila dos alternativas. Nunca depender solo del movimiento para entender.

## CSS / React

`components/site/site-theme.css` + `human-landing.css`

`CtaLink motion="expand"` / `motion="pill"`; `site-cta-compact`

`HumanProductLinks`, `HumanHero`, `HumanDemo`, `CompareTable`, `Reveal`

Cargá JetBrains Mono e Inter antes de usar el CSS. El export es una referencia de estilos, no una aplicación: las demos, el video y Reveal necesitan los componentes React del kit. Los SVG incluidos son masters oficiales; el resto de PNG y portadas sigue disponible en /brandkit.

Los logos maestros conservan su lima #CAF31D. La interfaz usa el token --accent existente; no recolorear los SVG con los tonos de superficie.

## Sistema final de navegación y movimiento

Una sola paleta: la moderna de esta guía. Usar LogoWall variant="marquee" con chips de logo + nombre y pausa. PageProgressNav orienta en páginas largas de escritorio; el móvil conserva el scroll natural. ProgressMeter anima porcentajes reales con fuente o ejemplos etiquetados. Reveal secuencia capas con index (80 ms) y es visible sin JavaScript. CTAs de producto: “Explorar {nombre}”, con CtaLink motion="expand". Smooth scrolling nativo, sin secuestrar la rueda, desactivado con reduced-motion.

Contrato completo y APIs: site-style-system.md dentro del ZIP.