Modos y contextos

Elegir por intención

Capa	Superficies	Tipografía y ritmo	Acento
Marca	Identidad, campañas, materiales	Logotipo como SVG y reglas editoriales	Índigo, sin sustituir semánticos
Marketing	Landing, servicios, artículos	Georgia en idea editorial, Inter en explicación; aire y escala fluida	Hitos y detalles editoriales
App	Dashboard interno y portal	Inter, escala fija en rem, navegación y datos	Foco, selección secundaria, progreso, serie elegida
Transaccional	Solicitud, pago, firma, carga	Inter, ancho de tarea hasta 640 px, pasos y recuperación	Foco y etapa actual

Un onboarding público es transaccional si el usuario ya está completando una tarea. Una bienvenida puede tener un pequeño bloque editorial, sin imponer su serif a los campos.

Activación

<html data-mode="marketing" data-theme="light">
<html data-mode="app" data-theme="dark">
<html data-mode="transactional" data-theme="light">

También se permite un subárbol. Evitar anidar modos salvo una frontera deliberada. Ambos temas tienen la misma conducta y contenido. Claro para trabajo diurno con documentos; oscuro para luz reducida o preferencia. No forzar oscuro por estética.

Prueba el mismo sistema en ambos temasClaroOscuro

Marketing

Tu próximo comienzo.

Una empresa propia, con el respaldo para dar el primer paso.

Explorar servicios

Georgia editorial · explicación · descubrimiento

App

Mis servicios

Consulta el próximo paso de cada trámite.

Empresa de ejemplo

Constitución de empresa

En preparaciónVer ejemplo de app

Inter · datos · navegación · grupos de 16 px

Transaccional

Tu empresa

Un objetivo por paso. Tus respuestas se conservan.

Nombre de ejemploContinuar

Inter · tarea · foco único · grupos de 20 px

Lo compartido

Logotipo, semánticos, botones neutros pill, campo 14 px, panel 20 px, foco índigo y targets 44 px. La L oficial identifica espacios compactos y favicon en todos los modos. Vínculo complementa marketing y aperturas de marca; no se coloca detrás de tablas, importes ni formularios.

Superficies para trabajar

Marketing conserva la paleta base. App y transaccional comparten productColor: lienzo, superficie de apoyo y superficie elevada distinguibles, con textos secundarios comprobados sobre todas ellas. Navbar y sidebar usan sidebar-bg: más claro que el lienzo en claro, más oscuro en oscuro. El contenido se eleva sobre la navegación y el lienzo separa los paneles de lectura. En claro se usan blancos y grises neutros; en oscuro, grises carbón. elevated da un fondo estable a paneles, modales y menús. Reservar el índigo para foco o selección secundaria, sin teñir filas completas.

elevated-hover corresponde a filas y paneles navegables. control-bg, control-hover, control-pressed y control-text forman un par estable para acciones secundarias. action-bg, action-hover, action-pressed y action-text gobiernan la acción primaria. El hover cambia la superficie, nunca atenúa la pieza completa. Los estados deshabilitados conservan un texto legible y no reciben hover.

Matriz de tokens vigente

Los valores siguientes salen del contrato, no de una segunda paleta copiada en esta página. Un producto usa los mismos nombres de rol; el modo decide los valores.

Qué cambia y qué se conserva

En marketing, el fondo puede acompañar una composición editorial y las entradas pertenecen a bloques de contenido. En app, bg separa las áreas de trabajo, surface agrupa apoyo y elevated sostiene tablas, menús y modales. Las tablas usan cabecera surface, filas elevated, hover elevated-hover, divisores border y texto text o text-2. La selección principal usa sidebar-active-bg/text; una pestaña activa conserva ese par al pasar el puntero.

En transaccional se conserva esa paleta operativa, pero se reduce el ancho de captura y se amplía el espacio entre preguntas. field-bg, field-text, field-placeholder y field-border son los roles del campo; no se reutiliza el fondo de un botón para un input. El borde de campo usa border-strong, con contraste funcional, y el foco reemplaza el borde con un único contorno.

Un menú de perfil o workspace mantiene el tamaño, opacidad y posición de su disparador. Abrirlo no bloquea el scroll del documento. En NextUI v2: disableAnimation, triggerScaleOnOpen=false y shouldBlockScroll=false para estos menús de utilidad. El cajón móvil y el modal sí gestionan su fondo y su foco. No aplicar la animación editorial de 850 ms a controles, tablas, pasos ni textos internos.

Un contador dentro de una selección tiene fondo y texto propios. En el paso seleccionado usa invert-bg/text; en los demás, semántico con etiqueta si hay pendientes. Nunca bajar la opacidad del grupo para indicar estado.

Ritmo de lectura

En app: 32 px entre secciones, 16 px entre grupos relacionados, 8 px entre título y explicación o entre párrafos de una misma idea. El padding de panel es 20 px, el de un bloque compacto 16 px. Usar los roles de densidad existentes, no acumular márgenes del hijo y gaps del padre. Cuerpo a 14 px/1.6, ayuda a 12–14 px/1.5, encabezados con su interlineado de productTypeScale. En formularios la separación de tarea es 40 px y el padding 24 px.

Dentro de un paso, separar número, etiqueta y contador con 12 px. El número y el contador no se encogen. En móvil, el paso activo muestra su nombre completo y los demás conservan sus números; la fila se desplaza horizontalmente. En opciones de formulario: 12 px entre indicador y texto, 4 px entre título y ayuda, padding 12 px vertical y 16 px horizontal. El texto de un control pill empieza en su zona recta, a 24 px del extremo.

Densidad

data-density="compact" reduce espacio de filas y grupos manteniendo target y geometría pill. No convierte la app en cuadrados ni reduce texto imprescindible. Compacto no es el defecto del portal ni de un pago.

Adaptadores

HeroUI v3: variables en runtime y CSS de geometría. NextUI v2: resolver tema de app en build y mapear botones a action. HTML: tokens más components opcional. Correo y artes no heredan CSS web: exportar variantes con contraste comprobado y formato adecuado. Ver Adopción.

Declarar modo en la raíz de cada producto. Para una frontera deliberada, declarar data-mode en el subárbol; si además se fija un tema local de demostración, poner data-theme en ese mismo elemento. Los alias se resuelven de nuevo en cada frontera para no heredar un color editorial ya calculado. Los portales deben heredar el mismo modo: usar un contenedor de portal dentro de la frontera o declarar el modo operativo en la raíz de la app.