Web y patrones de marketing

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.

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

Patrón	Cuándo usarlo	Regla
Editorial + fotografía	Presentar una oferta o criterio	Una idea, explicación breve y CTA; imagen en área propia
Card de servicio	Destacar una oferta autónoma	Título, alcance y acción; sin convertir cada párrafo en card
Card con fotografía	Equipo, entorno o recurso	Imagen arriba, texto en superficie sólida y atribución si corresponde
Contraste claro / oscuro	Cambiar el ritmo entre bloques	Declarar tema en el bloque; invertir texto y CTA con tokens
Historia + artefacto de app	Explicar cómo se usa el producto	Editorial fuera, UI operativa dentro; datos ficticios y una tarea
Lista editorial	Comparar pasos o servicios relacionados	Separadores, jerarquía y espacio antes de recurrir a otro grid

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.