Manual de marca
y sistema de diseño

Legalty acompaña a personas y empresas en decisiones, documentos y próximos pasos. El sistema reúne identidad de marca y patrones de trabajo sin imponer la composición de una landing a la aplicación.

Decisiones aprobadas

• Dirección A, con CTA oscuros en claro y claros en oscuro.
• Índigo como único acento: foco, selección secundaria, progreso y serie principal.
• Georgia editorial y Inter para cuerpo, UI y cifras. Espaciado normal en UI.
• Botones pill con texto e iconos dentro de la zona recta; campos 14 px y paneles 20 px.
• Claro y oscuro con equivalencia funcional. Densidad independiente del tema.
• Logotipo principal, L exacta como isotipo y favicon, Vínculo como recurso gráfico complementario.

Criterio de diseño

La próxima acción debe ser evidente; una acción primaria por región de decisión. Mostrar estados reales, lenguaje concreto y recuperación ante errores. Un dato sin unidad, período o procedencia no basta para decidir.

La diferenciación viene de procesos, asesoría humana, fotografía propia y contenido específico de Legalty. Harvey y Legora son referencias de sobriedad; la oferta de servicios puede estar más cerca de Doola. Ninguna referencia autoriza copiar identidad, promesas o composición completa.

Evitar degradados violetas, emblemas legales genéricos, efectos decorativos detrás de datos y filas de tarjetas idénticas sin jerarquía. El recurso gráfico propuesto se revisa en Marca; no sustituye al logotipo.

Marca y producto

Marketing explica y genera confianza. La app ayuda a priorizar y trabajar. Transaccional permite completar una solicitud o pago, incluso sin login. El contexto se elige por intención, no por autenticación. Ver Modos.

La accesibilidad es un objetivo verificable, no una certificación implícita del kit. Ver UX y accesibilidad.

Tres funciones distintas

La tinta y el papel sostienen la identidad. El índigo orienta. Los semánticos explican estados. No intercambiar esas funciones.

Acciones

Usar --lg-action-bg, --lg-action-text y --lg-action-hover. --lg-invert-* conserva la misma función para selección principal y compatibilidad. El token histórico accent-solid sigue siendo índigo; desde v6 no debe alimentar botones primarios. El adaptador HeroUI asigna su --accent a la acción neutra y --focus al índigo por separado.

Una acción secundaria usa borde o superficie suave. No darle el mismo peso que a la principal. Las acciones destructivas usan danger-solid y danger-contrast en su confirmación final; no usar el pastel de error como relleno sólido.

Semánticos

No todo importe negativo es un error ni toda variación positiva un éxito. Una factura pendiente puede ser información; una vencida, advertencia. Los colores siempre se acompañan de título, etiqueta o icono. Ver Notificaciones y Finanzas.

Enlaces, selección y gráficos

Navegación y selección principal permanecen neutras. Los enlaces dentro de texto llevan subrayado visible; los enlaces independientes pueden usar chevrón. El foco usa índigo en todos los temas. Una sola serie destacada en índigo, series de referencia neutras con etiquetas y trazos distinguibles.

Violeta e iris quedan en el archivo de exploración, no en la paleta vigente ni como variantes entre proyectos. En marketing el índigo puede ocupar un motivo o bloque editorial; el CTA continúa neutro. En app evitar grandes lavados de color.

Dos voces, con roles estables

El logotipo se conserva como SVG de trazos. No se recompone con Georgia, Inter ni Poppins. Poppins sale de la tipografía de interfaz; Spline Sans Mono es opcional y se limita a código y referencias técnicas.

Espaciado que deja leer

Georgia: tracking −0.015 em únicamente en títulos grandes; 0 en títulos pequeños. Inter: tracking 0 en UI, botones y datos. No condensar para hacer caber una etiqueta. Reorganizar el layout y conservar los extremos libres del pill.

typeScale contiene la escala editorial; productTypeScale la operativa. El emisor entrega --lg-type-h1-size, --lg-type-h1-line, peso, tracking y familia por modo. No basta con cambiar la familia de una escala fluida de marketing.

Fuentes y archivos

Georgia usa la instalación de la plataforma con fallback Times New Roman. Para piezas finales, comprobar la fuente instalada y su licencia de uso; no redistribuir archivos de Georgia. La guía aloja Inter localmente. Los SVG de plantillas contienen texto editable y requieren verificar fuentes antes de exportar. No convertir una captura del dashboard en la fuente de un arte.

El cuerpo largo se limita a 70ch. El tema oscuro mantiene la misma jerarquía y admite algo más de interlínea editorial cuando el fondo lo requiera. Mono no sustituye a cifras tabulares de Inter.

Radios por rol

Anatomía del pill

Texto e iconos empiezan en la parte recta. Cada extremo semicircular reserva media altura, más 2 px de aire. Altura 44 px, padding lateral 24 px; variante grande 52 px, padding 28 px. Fórmula: calc(altura / 2 + 2px).

La densidad compacta reduce espaciado de filas, no el target ni el margen geométrico del pill. Un botón solo de icono es circular, al menos 44 × 44 px, con centrado óptico y nombre accesible. Botones con etiquetas largas pasan a otra fila; no reducir padding ni comprimir letras.

Espaciado y densidad

Marketing: separación de secciones 64 px, padding de panel 28 px. App: 32 y 20 px. Transaccional: 40 y 24 px. Compacto en app: 24 y 16 px. Son puntos de partida del contrato, no autorización para rellenar todos los bloques con el mismo padding.

La página deja respirar; la tabla puede ser densa. Los límites de filas son rectos y discretos; el radio pertenece al contenedor, no a cada fila.

Elevación y movimiento

La jerarquía viene de superficie, borde y espacio. Reservar sombras mayores para overlays. Transiciones de 150–250 ms, sin mover layout ni coreografiar la carga del dashboard. Respetar reducción de movimiento.

Los ejemplos de esta guía usan HeroUI v3. El contrato se puede adaptar a NextUI v2, HTML nativo u otro kit: conducta, roles y accesibilidad deben coincidir. No obliga a migrar el kit de las aplicaciones.

Botones

Una acción principal por región de decisión. Primario neutro, secundario con borde o superficie, terciario/ghost para menor prioridad. El índigo nunca rellena el CTA primario.

Todos cubren default, hover, pressed, foco, disabled y loading. Disabled usa roles propios; loading mantiene ancho, anuncia el estado y evita envíos duplicados. Una acción fallida conserva contexto y ofrece recuperación.

.boton-primario {
  background: var(--lg-action-bg);
  color: var(--lg-action-text);
  min-height: var(--lg-button-height);
  border-radius: var(--lg-radius-control);
  padding-inline: var(--lg-button-padding-x);
  font-family: var(--lg-font-sans);
}

El archivo opcional /components.css ofrece .lg-button, .lg-field, .lg-number, .lg-status y .lg-notice. Para HeroUI, el layout aplica el mismo emisor con selectores del kit. NextUI v2 requiere adaptar la geometría y mapear primary a action, no a accent.

Campos y selección

Etiqueta asociada, ayuda y error cercano. Checkbox, radio y switch conservan su affordance estándar; su estado puede usar índigo. Targets 44 px aunque el indicador visual sea menor.

Estados, avisos y paneles

No usar un badge para información que es prosa. Un panel agrupa un propósito; evitar paneles dentro de paneles. Toast, banner y campo inválido tienen comportamientos distintos: Notificaciones.

Navegación y ayuda

Tabs con etiquetas completas y selección legible. Tooltip complementa, nunca oculta información esencial. Menús conservan teclado y nombre accesible. No poner botones independientes dentro de otro botón o enlace.

Diálogos, tablas y carga

Resolver primero en contexto; el diálogo se reserva a decisiones que requieren aislamiento. Gestionar foco inicial y de retorno, Escape y descripción. Cargas de datos usan skeleton o indicador con estado anunciado. No mostrar un cero mientras falta un dato.

Cards de navegación y portada

La portada de la guía usa .lg-card dentro de modo app: radio de panel 20 px, padding del contexto, título Inter de 20 px/1.4 y texto Inter de 14 px/1.6. Superficies elevadas neutras, borde discreto, hover con borde fuerte y foco índigo. Número de capítulo, título, explicación y apertura tienen roles distintos.

Una card navegable es un único enlace con nombre tomado del título. No contiene botones o enlaces anidados. La descripción conserva contraste y el texto no se condensa. El grid se apila antes de reducir el ancho útil por debajo de 280 px. La frase «Abrir capítulo» con flecha refuerza la interacción y no simula otro control.

Equipo interno

Cabecera con título funcional en Inter, acción principal neutra y período cuando hay cifras. Navegación estable: resumen, expedientes, tareas, clientes y finanzas. Selección principal neutra, foco índigo. El chrome sigue el tema; data-sidebar="brand" es opt-in, no el defecto.

Priorizar la bandeja por vencimiento, bloqueo y próxima acción. Explicar qué requiere una decisión hoy; cuando no hay trabajo urgente, mostrar una línea de resumen en lugar de múltiples tarjetas con ceros.

Agrupar cifras que contestan la misma pregunta. Total por cobrar y antigüedad pertenecen al mismo bloque. Evitar seis KPIs iguales sin jerarquía.

Portal cliente

Empresa o trámite, próximo paso, responsable, documentos y conversación. Menos herramientas visibles; lenguaje comprensible sin conocimiento de los estados internos. No convertirlo en una landing dentro del login. Inter en toda la tarea y radios compartidos.

Tablas

Cabecera con filtros y resultados, columnas con nombres explícitos, acciones por fila identificables. Orden y filtro son visibles y reversibles. Selección múltiple revela una barra contextual. Datos densos mantienen números alineados y filas sin radios individuales.

Desktop: sidebar cercana a 240 px. Móvil: menú con apertura accesible, o 3–5 destinos si la frecuencia justifica navegación inferior; no imponer ambas simultáneamente. Conservar título, estado activo y regreso. Tabs permiten scroll propio.

Estados operativos

Carga: skeleton con estructura estable. Vacío inicial: explicar qué aparecerá y ofrecer la próxima acción. Vacío filtrado: mostrar filtro y cómo limpiarlo. Error parcial: conservar secciones disponibles y reintentar la afectada. Sin permiso: explicar limitación sin insinuar que no hay datos. No usar éxito para ocultar incertidumbre.

Ejemplo interno · Portal · Finanzas.

Navegación seleccionada

Los enlaces del menú usan .lg-nav-link y aria-current="page". Selección con fondo neutro inverso y texto contrastado; hover discreto, foco índigo. El número y el título heredan el mismo contraste. La guía aplica este mismo componente en sidebar y drawer.

Para los títulos de hasta dos líneas del índice: altura 64 px, línea de 20 px, padding horizontal 34 px y radio pill. El texto comienza después de la curva. No truncar nombres de capítulos. En rutas estáticas .html y rutas limpias, normalizar la ruta antes de comparar para conservar la selección después de recargar.

Diseñar desde el contenido y comprobar al menos 320 px, 390 px, tablet y desktop, con zoom 200 %. No usar overflow oculto para encubrir acciones inaccesibles.

Las variables de breakpoint documentan valores; custom properties no funcionan como condiciones de media queries. Usar sus valores desde el build o un adaptador.

Texto: 65–75ch. Inputs: 16 px. Targets: 44 × 44 px. Botones con etiquetas completas y padding geométrico intacto; permitir wrap del grupo. Las tablas y gráficos densos pueden desplazarse dentro de una región accesible con nombre, nunca desbordar la página.

Marketing usa escala fluida; app y transaccional mantienen rem. Una hero pierde columnas antes de reducir el titular hasta parecer una etiqueta. Los detalles y CTA de artes sociales se evalúan al tamaño real de publicación, no solo en el lienzo de edición.

Los overlays deben conservar contenido visible, cierre, teclado y foco. Una hoja móvil es una opción según tarea, no una conversión obligatoria de cada modal.

Una solicitud pública o un checkout pertenece a data-mode="transactional", aunque no haya login. El encabezado promocional puede usar marketing fuera del área de tarea; el formulario no hereda la hero.

Captura y validación

Una etiqueta persistente por campo. Agrupar por significado. Pedir solo datos necesarios y explicar uso si no es evidente. Marcar opcionales. Validar al enviar o al salir cuando ayuda; no castigar cada tecla.

Error con aria-invalid, texto asociado mediante aria-describedby, resumen cuando hay varios errores y foco en el primer campo inválido tras enviar. Conservar valores y permitir corregir. El toast no sustituye al error del campo.

Pasos y progreso

Informar etapa actual, total y próxima acción. Atrás conserva datos. Mostrar guardado o recuperación solo cuando existe de verdad. No confundir porcentaje decorativo con progreso persistido.

Usar lg-step, lg-step-marker y lg-step-count de components.css: tres piezas separadas por 12 px, marcador de 24 px y contador con par de contraste propio. aria-current="step" comunica la selección, además del color. El nombre puede ocupar varias líneas en escritorio. No concatenar número, nombre y pendientes como un único texto sin separación.

<button class="lg-step" aria-current="step" type="button">
  <span class="lg-step-marker" aria-hidden="true">1</span>
  <span>La sociedad</span>
  <span class="lg-step-count" aria-label="2 datos pendientes">2</span>
</button>

lg-choice ofrece estados de opciones mediante aria-checked o aria-pressed. El estado seleccionado conserva texto legible al pasar el puntero. Los controles deshabilitados usan disabled-bg/text, sin atenuar todo el contenido. data-variant="segment" aplica selección neutra y geometría pill a opciones cortas. El consumidor debe conservar la conducta de teclado de su radio, checkbox o grupo.

lg-task-header/footer, lg-task-title/copy y lg-form-panel dan estructura al flujo. El panel contiene el formulario, no cada campo por separado. Etiquetas y ayudas usan 14 px; el texto de entrada mantiene 16 px en móvil para evitar zoom de Safari. Los grupos se separan 20–24 px y las tareas 40 px; etiqueta, ayuda y campo mantienen 8 px. No duplicar el margen exterior en cada párrafo.

Pagos

Moneda, concepto, impuestos/comisiones cuando apliquen y total antes de confirmar. CTA neutro con verbo preciso. Durante envío, evitar duplicación y anunciar procesamiento. Timeout o respuesta incierta: verificar el estado antes de invitar a pagar otra vez. Un pago pendiente no se declara fallido ni completado sin evidencia.

Documentos

Formatos y límite de tamaño antes de seleccionar. Progreso de carga, posibilidad de cancelar, archivo listo/error y reintento por archivo. No afirmar que un documento fue revisado al terminar de subirlo. Datos personales sensibles no se usan en capturas o piezas de marketing.

Paneles 20 px, campos 14 px, botones 44/24 o 52/28. Inter en título, cuerpo, instrucciones e importes. Ejemplo aplicado.

Un solo contorno de foco

En campos, el foco reemplaza visualmente el borde: borde transparente, box-shadow: none, outline: 2px solid var(--lg-focus) y outline-offset: 0. Evitar acumular el borde coloreado, ring de HeroUI y un outline externo. El tamaño del campo no cambia. Los botones y enlaces mantienen su foco de 2 px con offset de 3 px. Los errores conservan texto asociado e indicador semántico, incluso durante el foco.

El adaptador HeroUI aplica esta receta a inputs, textarea y triggers de select. Los selects usan align-items: center e interlínea 1.5 para centrar verticalmente valor e indicador, conservando alineación horizontal izquierda para facilitar lectura.

HTML nativo usa lg-field; los controles compuestos usan lg-field-shell en el contorno único. Sus colores provienen de field-bg/text/placeholder/border. En NextUI v2, poner el shell en inputWrapper o trigger, eliminar el shadow/ring del kit y conservar las asociaciones de etiqueta, ayuda y error. Los errores se indican con aria-invalid o data-invalid y texto persistente.

Preparación asistida por IA

Mostrar una actividad indeterminada vinculada a la tarea: una ficha de documento con la L oficial y acento índigo. Personalizarla con la estructura elegida y la actividad declarada; conservar el nombre propuesto en el panel. Un barrido discreto puede recorrer la ficha completa durante la solicitud, sin animar ni apagar cada texto. Mantener la misma ficha al pasar de reposo a preparación. No usar un contador, porcentaje o checklist completado por temporizador si el servidor no confirma ese avance. La animación solo se activa durante la solicitud y queda estática con movimiento reducido. Mantener nombre accesible, error persistente y opción de reintento.

El panel de propuesta refleja el nombre escrito de forma reactiva, incluido durante preparación, aclaraciones y resultados. Etiquetarlo como nombre propuesto; actualizarlo no confirma disponibilidad ni debe provocar otra llamada de IA. En móvil, conservarlo en el diálogo del asistente. Evitar anuncios de lector de pantalla por cada carácter y permitir nombres largos sin desbordamiento.

En escritorio, repartir entrada y propuesta en dos columnas legibles, sin un formulario angosto rodeado de vacío. En móvil el asistente abre un drawer accesible. Pedir la acción explícita de analizar, conservar Enter para saltos de línea y limitar las aclaraciones a las indispensables. Distinguir borrador de verificación legal y disponibilidad de nombres.

La conformidad debe comprobarse en cada consumidor. HeroUI y React Aria aportan comportamiento de base; overrides, composición y contenido pueden romperlo.

Requisitos

• Texto 4.5:1, texto grande 3:1 y componentes/foco 3:1 cuando corresponda.
• Teclado completo, orden lógico, foco visible y no oculto por cabeceras o toast.
• Targets del sistema de 44 × 44 px; esta regla supera algunos mínimos normativos.
• Nombres y etiquetas persistentes. Un icono aislado necesita nombre accesible.
• Estado mediante texto y/o icono, además del color. Gráficos con tabla equivalente.
• Reflow, zoom 200 % y ajuste de espaciado del texto sin pérdida de acciones.
• Reducción de movimiento. Sin animación necesaria para entender la información.
• Autenticación compatible con gestores y pegado; no bloquearlos por estética.

Mensajes y foco

Status para confirmaciones no urgentes; alert solo para interrupciones que requieren atención. No anunciar dos veces el mismo mensaje. Un toast no roba foco; cerrar devuelve foco a un disparador disponible. Dialog modal contiene foco y lo devuelve al contexto.

No mostrar contenido sensible en notificaciones del sistema o capturas compartidas. Mostrar una referencia abreviada cuando el detalle no sea necesario.

Validación

Comprobar ambos temas, los tres modos, densidad compacta y estados default/hover/pressed/focus/disabled/loading/error. Revisar lector de pantalla con una tarea real y contenido de producción. La guía registra checks técnicos; no declara certificación global de accesibilidad.

Los colores semánticos de v6 calculados contra sus fondos suaves tienen contraste de texto superior a 4.5:1; eso no valida cada combinación posible de un consumidor.

Referencia normativa: W3C, guía rápida WCAG 2.2. Validar criterios aplicables a cada tarea; el target de 44 px es una regla del sistema.

Fuente de verdad: theme/tokens.ts. Runtime y distribución comparten theme/css.ts. Componentes opcionales y el adaptador de la guía comparten theme/components.ts.

<link rel="stylesheet" href="/tokens.css" />
<link rel="stylesheet" href="/components.css" />
<html data-mode="app" data-theme="light">
<button class="lg-button" data-variant="primary">Guardar cambios</button>

El modo se elige por tarea. Theme claro/oscuro y density compact son independientes. Sin modo explícito se hereda marketing por compatibilidad; todo consumidor nuevo debe declararlo.

.boton-primario {
  background: var(--lg-action-bg);
  color: var(--lg-action-text);
  border-radius: var(--lg-radius-control);
  min-height: var(--lg-button-height);
  padding-inline: var(--lg-button-padding-x);
}

Contrato de familias

Inter puede cargarse con next/font en --font-sans. Mono opcional en --font-mono. Georgia se resuelve por plataforma; --font-display de v5 deja de controlar el titular editorial. Nunca reconstruir el logotipo con una fuente.

Regeneración

pnpm gen emite CSS, JSON y llms. No editar derivados. pnpm build genera out/ estático. Ver Adopción para cambios incompatibles y checks de cada proyecto.

El dashboard conserva sincronización explícita mediante tokens:sync y tokens:check. Antes de sincronizar v6 hay que adaptar primary a action, el radio field y la escala de app; descargar el CSS por sí solo no completa la migración. No introducir una dependencia remota mutable en runtime sin versionarla.

Los agentes deben leer esta guía y AGENTS.md, identificar contexto y usar tokens. No inventar paletas por pantalla ni repetir propuestas archivadas como decisiones vigentes.

Instrucción reutilizable

Usa Legalty DS v6. Índigo solo como acento; CTA neutro. Declara marketing, app o transactional según la tarea. Georgia editorial; Inter en UI y dinero. Botones pill con extremos libres: 44/24 o 52/28. L exacta del logotipo como isotipo y favicon. Vínculo complementario aprobado para artes; fuera de datos, formularios y toast. Isotipo antiguo archivado. Respeta semánticos, teclado y foco.

Cada consumidor mantiene un DESIGN.md con versión adoptada, contexto, kit/adaptador, extensiones locales y resultados de verificación. No copiar valores crudos que ya tienen rol.

Fuentes y límites

theme/tokens.ts y content/*.mdx son orígenes. CSS, JSON y llms son generados. docs/vnext conserva el proceso histórico; la documentación activa es content. El laboratorio usa datos ficticios y permite revisar ejemplos, no ejecuta operaciones de las aplicaciones.

Ante contradicción, prevalecen las decisiones explícitas del usuario y el contrato v6. No convertir una figura pendiente en un nuevo logotipo por iniciativa del agente. No publicar cambios en consumidores sin verificar su adaptación.

Elegir por intención

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.

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.

Identidad vigente

Legalty expresa rigor, calma y humanidad. La marca acompaña decisiones de negocio con servicios y asesoría profesional. Evitar promesas absolutas como «sin riesgo», «aprobación garantizada» o plazos no comprobados. Cada pieza debe distinguir información general de orientación concreta para un caso.

La dirección A y el índigo están aprobados. Desde el 1 de octubre de 2026, la L exacta del logotipo es el isotipo principal y favicon oficial. Vínculo es el símbolo complementario y recurso gráfico de la marca, aprobado para artes, marketing y redes. El logotipo escrito sigue siendo la firma principal. El isotipo antiguo permanece deprecado y archivado. No redibujar el logotipo ni reconstruirlo con una fuente.

Logotipo tinta SVG · Logotipo claro SVG · Manifiesto de activos · Colección oficial SVG.

L oficial

inklightindigoindigo-lightblackwhite

Vínculo complementario

inklightindigoindigo-lightblackwhite

Favicon: siempre la L, sin fondo o con círculo.

Descargar colección oficial SVGManifiesto de variantes

Logotipo

Usar tinta sobre claro y versión clara sobre oscuro. Mantener proporción y orientación. Zona de protección mínima: media altura visible del logotipo por cada lado. Como punto de partida, altura visible mínima de 18 px en digital y 6 mm en impresión; comprobar reproducción real, no solo dimensión del archivo. En piezas grandes dejar más aire.

No deformar, inclinar, contornear, añadir sombra ni degradado. No colorear letras por separado. No ponerlo sobre una fotografía de contraste irregular: usar una zona tranquila o una superficie de apoyo. La L puede identificar espacios compactos. Vínculo acompaña la composición con su propio espacio; no se pega al wordmark como un nuevo lockup.

Isotipo L y favicon

La L conserva exactamente el contorno del logotipo, con escala uniforme y centrado óptico por su peso visual. Identifica la app, avatares de marca, iconos de producto y favicon. No redondear la L ni sustituirla por una letra de otra fuente. La L expresa la estructura de la marca y mantiene una relación directa con su nombre.

SVG de lienzo 64 × 64; área libre exterior mínima de 8 unidades. Isotipo en UI desde 24 px; favicon transparente desde 16 px. Fondo circular preferentemente desde 32 px para dar aire interior. En impresión, empezar en 6 mm de altura visible y comprobar la reproducción. Nunca comprimir o estirar.

Usar tinta sobre claro y claro sobre oscuro. Índigo e índigo claro son variantes de acento. Negro y blanco se reservan para reproducción monocromática. Los archivos circle-ink/circle-indigo son fondo tinta/índigo con L clara; circle-light/circle-indigo-light son fondo claro/índigo claro con L tinta. Las variantes adaptables cambian con el tema del navegador. El favicon siempre usa la L.

Isotipo L tinta · Favicon transparente adaptable · Favicon circular adaptable · Favicon circular índigo.

Color y tipografía

Índigo #4D4BE8 sobre claro y #B3ABFF sobre oscuro. Tinta #242229, papel #FDFCFE y lienzo #F4F3F6. En artes oscuros: lienzo #141318 y texto #F0EDF5. Son valores RGB/sRGB; no tratarlos como una especificación CMYK universal. Para impresión preparar conversión con el perfil del proveedor y revisar una prueba.

Georgia lleva una idea editorial. Inter explica, etiqueta, firma y muestra cifras. No añadir una tercera familia de campaña por defecto. Tracking Georgia −0.015 em en titulares grandes, Inter normal. El logotipo no cambia por esta combinación.

En piezas sociales: título con interlínea aproximada 1.15, cuerpo 1.5–1.65. Revisar texto al tamaño final de visualización. Título, explicación y próxima acción tienen jerarquías distintas. No simular botones clicables en una pieza que no admite interacción.

Vínculo: símbolo complementario aprobado

Dos formas abiertas dejan un espacio común. Representan empresa y equipo legal en relación: acompañamiento durante la constitución, la protección y la gestión del negocio. Las curvas dialogan con e, g y a del logotipo; los remates planos con L, l y t. El significado es la intención de marca y se construye con el uso consistente junto al nombre.

Vínculo funciona como alternativa gráfica para portadas, redes, presentaciones, separadores y aperturas animadas. La L mantiene la identificación principal y el favicon. Conservar ambas piezas y su separación; no deformar, girar o invertir el dibujo. Lienzo 64 × 64, peso 7, radios exterior 16 e interior 9. Área libre exterior mínima de 8 unidades. Tamaño mínimo recomendado: 32 px en digital o 10 mm en impresión; revisar al tamaño final.

Usar un motivo por composición. Puede ampliarse o recortarse en una portada, dejando el logotipo como firma legible. Mantener texto, personas y datos fuera de su figura. Usar un solo color: tinta/claro o índigo del tema; sin degradados ni sombras. No repetirlo en todas las cards ni convertirlo en patrón detrás de la información.

En app y transaccional, reservarlo para una apertura de marca o portada informativa. Tablas, importes, formularios, toast y estados de error mantienen sus patrones operativos y símbolos semánticos. Vínculo no comunica éxito, seguridad, aprobación ni progreso.

Movimiento: entrada única de 780 ms, 640 ms por pieza y 140 ms de desfase, con desaceleración suave. Ambas piezas terminan en su posición original, sin rebote ni deformación. Respetar movimiento reducido con versión estática. Evitar bucles en navegación y tareas.

Vínculo tinta · Vínculo índigo · Entrada animada clara · Entrada animada oscura.

La colección vigente contiene solo L y Vínculo: 14 variantes SVG de L (seis transparentes, seis con fondo circular y dos adaptables) y ocho de Vínculo (seis estáticas y dos animadas). Las exploraciones anteriores se archivan fuera de la distribución pública.

Sistema de composición para redes

Las siguientes dimensiones son lienzos de trabajo del kit, no una garantía de las especificaciones vigentes de cada plataforma. Comprobar encuadre y overlays del canal al publicar.

Las plantillas SVG descargables son editables y usan Vínculo como recurso gráfico aprobado. Revisar contenido, fuente, contraste y exportación antes de publicar. Exportar raster con dimensiones finales para redes; conservar SVG como origen. PNG para texto y gráficos; JPEG de calidad para fotografía; SVG/PDF cuando el canal lo admita y la salida haya sido comprobada.

Familias de contenido

Servicio: problema concreto, resultado esperado, alcance, próximos pasos y condiciones. Evitar una promesa sin contexto.

Educación: pregunta real, explicación breve, ejemplo y cuándo consultar al equipo. La última lámina no repite toda la primera.

Proceso: pasos verificables, qué necesita el cliente y qué hace Legalty. No mostrar un trámite terminado si la ilustración solo representa una etapa.

Equipo y criterio: personas reales, rol y contexto de su trabajo. Fotografías autorizadas, luz natural, ambientes de trabajo y documentos ficticios o anonimizados. Evitar imágenes genéricas de apretones de manos, justicia monumental o personas generadas presentadas como equipo real.

Datos: fuente, período, unidad y alcance de comparación. Seguir Finanzas y Estadísticas. Los semánticos describen estados, no adornan una portada.

Web de marketing

Ver Web y patrones de marketing para ejemplos aplicados de cards claras/oscuras, edificios, interiores corporativos y artefactos de app. La identidad permanece común; la composición cambia según canal y tarea.

Tono verbal

Claro, directo y humano. Verbo concreto y siguiente paso: «Revisa los documentos», «Conoce el proceso», «Consulta al equipo». Evitar jerga sin explicar y tratar de «tú» de forma consistente en marketing; en documentos seguir la plantilla profesional.

No confundir «enviado», «recibido», «revisado», «aprobado» y «completado». Son eventos distintos. Los tiempos, precios y beneficios deben corresponder a la oferta actual. Una historia corta no justifica omitir condiciones materiales.

Correo, documentos y producción

Correo: logotipo raster cuando el cliente no soporte SVG, texto vivo, enlaces claros y fallback de fuente. PDF y documentos legales: portada sobria, wordmark legible y plantilla interna aprobada; no imponer Georgia si el documento exige otra estructura. UI del editor sigue en Inter.

Checklist de entrega: contenido aprobado, permiso de fotografía, datos ficticios/anonimizados, márgenes y encuadre, contraste, legibilidad móvil, fuente disponible, exportación revisada y archivo editable guardado. Nombrar archivos por canal, campaña, fecha y versión. No distribuir fuentes comerciales junto con plantillas.

Presentar dinero

Inter con font-variant-numeric: tabular-nums lining-nums, tracking 0. Importes a la derecha en tablas, textos a la izquierda. Moneda explícita en cabecera y al cambiar de moneda: BOB o USD. En la interfaz local se puede mostrar «Bs 2.500,00», con BOB indicado en el contexto. No mezclar monedas en un total sin conversión, fecha y criterio visibles.

Usar el formato del locale del producto; v6 muestra es-BO. Dos decimales cuando corresponde al dato financiero. Porcentajes con precisión adecuada y consistente; distinguir puntos porcentuales de cambio relativo.

Datos y estados

Cero es un importe válido. Ausencia se representa con «Sin dato» o raya acompañada de explicación; carga usa skeleton, nunca un cero temporal. Importes negativos llevan signo; los egresos no se vuelven rojos automáticamente. Pendiente, vencido y pagado llevan etiqueta y fecha.

Un total resumido puede abreviarse si conserva unidad y precisión útil; al inspeccionarlo, mostrar importe completo. Grandes diferencias de tamaño no deben ocultar moneda o período. Evitar números recortados, celdas partidas y mono como requisito para alinear dinero.

Conducta financiera

No hacer cálculos monetarios definitivos con números binarios del frontend. Usar el contrato financiero del backend y unidades/decimales definidos; la UI formatea el resultado. No inferir estado de pago por el cierre del diálogo ni por un timeout. Verificar respuesta y recuperación.

Un aumento de deuda puede ser una variación positiva matemáticamente y desfavorable operacionalmente. La comparación describe el dato; el color solo evalúa cuando hay un criterio de negocio explícito y rotulado.

Verificación

Comparar datos con el origen, revisar signos y separación decimal, moneda, período, filtros, redondeo y subtotal/total. Probar cantidades grandes, cero, negativos, ausencia, carga y error parcial. Los ejemplos de la guía son ficticios y no ejecutan operaciones.

Elegir el contenedor por función

Muestras de los cuatro estados

El fondo permanece neutro. Solo la señal de estado recibe el semántico: icono, título explicativo y contenido suficiente para decidir. Cambia el tema del DS para revisar claro y oscuro.

Probar aparición y cierre

Semánticos

Éxito verde para una operación verificada; advertencia ámbar para atención; error rojo para fallo; información azul para cambio informativo. Índigo no significa error, aprobación ni seguridad. Icono y título permiten entender el estado sin distinguir colores.

Toast

Título breve, explicación cuando hace falta y acción opcional. Región role="status" para éxito e información; role="alert" para errores que interrumpen una acción. No anunciar dos veces al apilar toast y banner con el mismo texto. Los avisos estáticos de la documentación no deben anunciarse al cargar.

Máximo dos simultáneos en la muestra aplicada; consolidar duplicados y priorizar el error persistente. En producto, duración configurable para mensajes breves, con pausa por hover/foco cuando corresponda. Error con recuperación o acción importante permanece disponible; no depender de una cuenta regresiva.

Cerrar es una acción de 44 px con nombre accesible. No desplazar el foco al toast al abrirlo. Después de cerrarlo, volver a un disparador todavía existente o al contexto lógico. En móvil, no tapar el CTA del formulario ni el foco. Notificaciones sin datos sensibles innecesarios.

Retícula y simetría

Toast con radio de panel 20 px, padding 16 px y gap 12 px. Retícula: señal 44 px, contenido flexible, cierre 44 px. Icono y cierre se alinean arriba con idéntica reserva espacial; los pictogramas usan trazo de 1.8 y caja de 20 px. No añadir franjas de color laterales. El cierre circular no usa el padding de un pill con texto.

En móvil, icono y cierre conservan las esquinas y el mensaje ocupa una segunda fila completa. Así no se comprime entre dos controles. Cierre con nombre accesible, hover y foco índigo, y retorno al disparador. El contenido no se corta ni desaparece al envolver líneas. .lg-toast y sus partes se incluyen en components.css para que la app pueda reproducir esta misma geometría.

Ubicación en producto: escritorio hacia el extremo inferior con 24 px de separación y ancho inicial de 420 px; móvil con 16 px laterales y por encima de barras fijas y safe-area-inset-bottom. Reservar espacio si puede cubrir controles o mensajes. La demostración del DS permanece dentro del contenido para permitir inspección sin tapar acciones.

Recuperación

Explicar qué ocurrió y qué puede hacer el usuario. «Intenta otra vez» solo si repetir es seguro. Para pago incierto: verificar estado antes de enviar de nuevo. Un fallo de una sección no vacía todo el dashboard. Registrar detalle técnico fuera del texto visible al usuario.

Estados del componente

Además de éxito/advertencia/error/info, cubrir carga, vacío, deshabilitado, permiso insuficiente y pérdida de conexión. Evitar «algo salió mal» sin contexto. Los ejemplos no guardan ni exportan información real.

Jerarquía de información

Una cifra responde a una pregunta. Etiqueta, unidad, período y comparación deben estar cerca. Agrupar datos relacionados; elegir una serie relevante en lugar de colorear todas. La tendencia necesita contexto de negocio, no una flecha verde automática.

Color y escala

Índigo para serie o período elegido; tinta y neutros para referencia. Semánticos solo cuando representan estados reales. Mantener mapping entre vistas y leyenda. Para múltiples series, etiquetas directas, trazos o tramas; no usar seis variantes de índigo como única distinción.

Barras parten de cero para comparar longitudes. Escala común para magnitudes comparables. Si un gráfico exige otra escala, indicarla y justificarla. No usar 3D, perspectiva ni áreas decorativas que distorsionen cantidades. Un eje de tiempo conserva orden y separación coherentes.

Interacción y equivalencia

Tooltip accesible por foco y puntero; sin información imprescindible exclusiva del hover. Selección con estado anunciado, etiqueta completa y foco estable. Ofrecer datos en tabla o texto equivalente. Leyendas no dependen solo del color. La muestra mensual mantiene el DOM de las barras al seleccionar para conservar foco y scroll.

Casos límite

Carga conserva estructura; sin dato difiere de cero; error parcial no inventa valores; filtros cambian el período anunciado; datos obsoletos muestran fecha de actualización. No comparar períodos con distinto alcance sin avisarlo. Tablas exportadas conservan moneda, período y precisión.

Cambios que hay que revisar

v6 conserva nombres existentes cuando permiten transición, pero cambia comportamiento. No es una actualización puramente cosmética: acento índigo, primario neutro, tres modos, Georgia editorial, Inter tabular, radio field separado, panel 20 px, geometría pill y retiro del isotipo antiguo, con L oficial y Vínculo complementario.

accent-solid sigue siendo acento. Un consumidor v5 que lo use como primary debe migrar a action. mark se conserva como alias de texto deprecado; no autoriza volver a renderizar el isotipo antiguo. La L se obtiene del SVG oficial, no del token de color. --font-display de Poppins deja de controlar display. La densidad compacta ya no reduce target ni radios por inercia.

Matriz de proyectos

La matriz guía la adopción; esta actualización modifica el repositorio del DS, no declara migrados los consumidores.

Secuencia por consumidor

1. Fijar versión 6.0.0 y registrar kit, modo, tema y extensiones en DESIGN.md.
2. Obtener CSS/JSON versionados; revisar diff. Adaptar primary/action y field/control antes de sincronizar en producción.
3. Migrar shell, botones, campos y tipografía. Sustituir el isotipo antiguo por wordmark o L oficial según el espacio. Adoptar el favicon L desde public/brand/official/letter.
4. Migrar formularios, dinero, toast y gráficos. Mantener etiquetas y recuperación.
5. Verificar claro/oscuro, móvil, teclado, densidad, estados y tareas prioritarias internas. Guardar evidencia.
6. Pilotear una sección, revisar con usuarios y ampliar. Mantener rollback a la versión anterior.

En NextUI v2 mapear primary al rol action y focus al índigo. Un tema compilado requiere regeneración; importar tokens.css no cambia clases compiladas antiguas. HeroUI v3 sigue variables en runtime; no importar el bridge del kit en otros proyectos.

Receta común de producto

La revisión operativa del 15/10/2026 mantiene v6 y añade roles field-* y patrones de pasos/opciones. Registrar también meta.revision del JSON consumido. Dashboard y portal declaran data-mode="app"; expediente, onboarding, pagos y solicitudes usan transactional. Marketing conserva su propia raíz. App y transaccional consumen modes.app.color / modes.transactional.color sobre la base, nunca solo color.light/dark.

<html data-mode="transactional" data-theme="light">
  <link rel="stylesheet" href="/design-system/tokens.css" />
  <link rel="stylesheet" href="/design-system/components.css" />
  <label for="nombre">Nombre de la empresa</label>
  <input id="nombre" class="lg-field" aria-describedby="ayuda" />
  <p id="ayuda">Como aparecerá en tus documentos.</p>
  <button class="lg-button" data-variant="primary">Continuar</button>
</html>

Versionar ambos CSS junto al JSON. No copiar colores a Tailwind ni importar una URL mutable en runtime. Conservar la geometría pill y los estados de selección/foco al adaptar el kit. Los portales de menús y modales deben usar el modo de su producto. Un onboarding dentro de una landing necesita esa frontera explícita también para sus overlays.

Validar con contenido largo, lista de empresas con scroll, cifra pendiente en un paso activo, hover de pestaña activa, botones deshabilitados, input enfocado e inválido, modal abierto y viewport de 320 px. El texto normal debe alcanzar 4,5:1, el borde funcional y foco 3:1; el check de contrato prueba los pares en ambos temas y los tres modos. La matriz de Modos muestra los valores calculados y permite probar los registros sin cambiar la preferencia global.

Criterio de cierre

No quedan usos activos del isotipo antiguo, botones primarios de acento ni titulares de marketing en tareas. Targets y padding pill medidos, fuentes cargadas, estados accesibles, importes equivalentes al origen, controles sin recorte. Build y checks del consumidor completados. La validación del DS no sustituye la de cada app.

La documentación histórica de alternativas vive en docs/vnext y capturas. La colección vigente contiene L oficial y Vínculo complementario. Verificar sus roles antes de migrar consumidores; las demás exploraciones permanecen fuera de la distribución pública.

Una misma marca, distintos ritmos

La documentación del DS usa los mismos tokens, fuentes, controles y geometría que distribuye. No tiene una paleta o un estilo de componentes aparte. Su navegación, campos, tablas, muestras y notificaciones siguen el contrato operativo; sus títulos editoriales usan marketing. Cada ejemplo declara su contexto con data-mode y hereda los colores de su tema.

Marketing abre espacio para explicar una idea. Titulares Georgia, explicación Inter, CTA neutro y acento índigo puntual. La app reduce escala, usa Inter y mantiene el color para selección y estados. Un hero editorial no se reutiliza como cabecera de cada pantalla operativa.

EMPRESAS / ACOMPAÑAMIENTO

Un nuevo capítulo
para tu empresa.

Conoce los pasos, prepara los documentos y avanza con un equipo que entiende tu negocio.

Conocer el proceso

01 / SERVICIO

Empieza con
buen criterio.

Una conversación para entender qué necesita tu empresa y cómo podemos acompañarte.

Ver cómo trabajamos

02 / EQUIPO Y CONTEXTO

Espacio para decidir.

Interiores reales, luz natural y materiales sobrios. El texto se apoya en una superficie sólida.

Fotografía: LYCS Architecture / Unsplash

PRODUCTO / DEMOSTRACIÓN

El siguiente paso,
a la vista.

La web explica el beneficio. La app conserva tipografía Inter, controles neutros y estados operativos.

Portal · Datos ficticios

Nativa Studio

Constitución de empresa · Ejemplo

DocumentosRevisiónEntrega

Documentos

Completa la información y reúne los archivos necesarios.

Etapa ilustrativa

SIMULACIÓN · NO REPRESENTA UN TRÁMITE REAL

Las acciones de esta muestra enlazan a capítulos reales del DS. Las etapas del portal permiten recorrer una simulación con datos ficticios; no representan una funcionalidad ni un servicio ya entregado.

Patrones de composición

Las cards usan radio de panel de 20 px y bordes neutros. Un bloque oscuro puede convivir con otro claro sin crear una segunda paleta. El tema local aplica a texto, botones, foco, iconos y semánticos, no solo al fondo. Separación habitual de 24 px; padding de 24–32 px en marketing, 16–24 px en producto. No anidar cards decorativas dentro de cards: agrupar la información interior con espacio y separadores.

El color índigo puede señalar una categoría o un detalle editorial. Evitar rellenar todos los servicios de índigo. El CTA conserva tinta sobre claro y superficie clara sobre oscuro. Mantener 44/24 o 52/28 para altura/padding de botón, incluidos CTA con icono.

Fotografía: edificios y áreas corporativas

Edificios: perspectivas humanas, fachadas y plazas con materialidad clara. La arquitectura aporta contexto empresarial; no prueba que Legalty sea propietaria u ocupe ese edificio. La foto heredada de la demo es una referencia visual. Su procedencia/licencia no está documentada en el proyecto y debe sustituirse o verificarse antes de una campaña productiva.

Áreas corporativas: salas, atrios, mesas y espacios de trabajo con luz natural. Preferir fotografías propias para mostrar el equipo o la sede. La imagen de interior del ejemplo corresponde al Shanghai Baoye Center, por LYCS Architecture en Unsplash, bajo licencia Unsplash. Es referencia ambiental, no sede de Legalty. Se sirve desde el CDN externo; mantener crédito y una alternativa editorial si no carga.

No usar apretones de manos, mazos, balanzas ni oficinas ficticias como prueba de confianza. Evitar marcas ajenas, pantallas con datos de clientes o caras sin autorización. Mantener luz y color naturales; no aplicar un filtro violeta sistemático.

Recortes: 16:9 o 3:2 para recurso, vertical para historia y ancho para hero. Conservar el sujeto en móvil con object-position; definir dimensiones para evitar saltos de layout. Si hay texto sobre foto, crear una superficie sólida o medir el contraste sobre todo el recorte final. El ejemplo usa texto fuera de la foto para garantizar legibilidad estable. Descripción alternativa para imagen informativa; alt="" cuando sea puramente decorativa.

Artefactos de simulación de app

Recrear componentes HTML del DS permite conservar legibilidad, temas y accesibilidad. Usar Inter, controles neutros, estados semánticos, números tabulares y la misma geometría del producto. El marco del artefacto representa una vista de app, sin inventar chrome de navegador ni perspectiva 3D innecesaria.

Una sola tarea visible: documentos, revisión o entrega. Ocultar datos reales; rotular la simulación y distinguir etapa ilustrativa de operación confirmada. No poner un botón sin acción en una web navegable. En imagen social estática, evitar affordances de interacción engañosas. Capturas reales también son válidas con permisos y datos anonimizados.

Responsivo y entrega

En escritorio, alternar editorial y visual sin repetir filas de cards idénticas. En móvil, texto antes de imagen, cards en columna, CTA legible y sin recortar los extremos pill. Mantener el artefacto legible; no reducir un dashboard entero hasta que sus cifras sean ilegibles.

La arquitectura del DS distribuye color y componentes desde las mismas fuentes que utiliza la guía. Para adoptar los patrones de layout, usar las composiciones de este capítulo con tokens versionados, no copiar estilos desde un screenshot. Ver Adopción y Manual de marca.

Ritmo, contraste y conversión

Un bloque de criterio profesional puede declarar class="dark" data-theme="dark" para conservar una superficie oscura en ambos temas. Aplicar --lg-surface, --lg-text, --lg-text-2 y --lg-accent-ink locales a todo el bloque; no heredar texto del tema exterior. El símbolo Vínculo usa su versión para fondo oscuro. Comprobar 4.5:1 en cuerpo y 3:1 en texto grande, también en números y enlaces.

El cierre comercial no necesita otro banner redondeado. Una composición abierta con titular, Vínculo, CTA y próximos pasos concretos permite terminar la historia. Evitar repetir el hero o usar cursivas de color como única diferenciación. El plan recomendado usa una etiqueta explícita, borde índigo y superficie elevada, manteniendo el CTA neutro. La recomendación viene del catálogo; no inventar popularidad, descuentos ni urgencia.

Entradas: duration-enter (850 ms), distance-enter (24 px), ease-reveal, una vez por pieza completa que alcanza una zona de lectura visible. El contenido es visible en el HTML inicial y mantiene su opacidad: nunca apagar texto que el usuario ya ve. Los desplegables entran y salen con opacidad y desplazamiento de 4–8 px, 250–350 ms; mantener foco y teclado. No animar cifras ni esconder información durante la carga. No hacer scroll hijacking. Con prefers-reduced-motion: reduce, mostrar directamente el estado final sin desplazamiento ni scroll suave.

Ritmo de lectura y exploración

Usar ease-reveal para entradas editoriales de 850 ms y hasta 24 px; mantener los controles transaccionales ágiles. Un proceso puede acompañar el scroll con una pieza sticky y contenido que cambia por etapa. No capturar ni bloquear la rueda, el gesto táctil o las teclas de desplazamiento. Dar controles explícitos equivalentes; en tablet, móvil y movimiento reducido, usar una lista normal con explorador manual.

Observar artifacts, diagramas, tarjetas y grupos editoriales completos, sin separar títulos, párrafos ni filas internas. Preparar el desplazamiento solo en piezas que siguen fuera de pantalla; lo visible al cargar o restaurar scroll permanece estático. Como referencia, iniciar cuando el borde superior llega aproximadamente al 62% de la altura del viewport, incluso en piezas altas. Mantener opacidad constante y ejecutar una sola entrada, sin reiniciarla al volver a la sección. Evitar animar a la vez padre e hijos.

Los demos automáticos solo cuentan su intervalo mientras al menos la mitad del artifact está visible; detenerlos al salir de vista, al ocultarse la pestaña y con movimiento reducido. Conservar el marco del artifact y sus controles durante los cambios de etapa: actualizar contenido sin volver a ejecutar una entrada en sus textos. La selección puede cambiar suavemente de color en 350 ms.

La etiqueta de recomendación usa superficie elevada, texto índigo y borde de acento. No hereda el relleno neutro de los CTA. El logotipo enlazado tiene área mínima de 44 px, cursor pointer y estados hover, pressed y focus.