El sistema de diseño de Legalty

Lenguaje visual, tokens y componentes reales con los que se construye cada producto y pieza de marca de Legalty. Índigo como acento, acciones neutras. Estilo dirección A, tipografía Georgia e Inter, y componentes HeroUI interactivos. Guía interna y fuente única de verdad, legible por humanos y por LLMs.

Principios de diseño

Dirección A: rigor, calma y humanidad para servicios legales y gestión de empresas.

Color

Índigo como acento, CTA neutros y colores semánticos con significado estable.

Tipografía

Georgia para titulares editoriales; Inter para explicar, operar y mostrar números.

Medida y ritmo

Base de 4 px, radios por rol y una geometría pill que reserva los extremos curvos.

Componentes

HeroUI en la guía y contratos independientes del kit para todos los proyectos.

Dashboard y navegación

Operaciones internas primero; portal cliente con menor densidad y seguimiento claro.

Diseño responsivo

Adaptar la estructura sin comprimir tipografía, datos ni extremos del pill.

Formularios

Solicitudes, pagos y carga de documentos necesitan calma, claridad y recuperación.

UX y accesibilidad

Objetivo WCAG 2.2 AA con verificación de contraste, teclado, foco y estados.

Tokens y distribución

Contrato v6, artefactos generados y adopción revisable en cada proyecto.

Guía para LLMs y agentes

Reglas normativas y contexto de adopción sin volver a inferir la marca.

Modos y contextos

Una marca compartida con tres registros definidos por intención, no por login.

Manual de marca y artes

Identidad activa, dirección de arte, tono y reglas para marketing, redes y documentos.

Finanzas y números

Importes legibles, unidades explícitas y significado que no depende del color.

Estados y notificaciones

Toast, avisos, errores de campo y recuperación con semánticos estables.

Estadísticas y gráficos

Una señal con unidad, período, comparación y datos equivalentes.

Adopción y migración v6

Contrato común con adaptadores y verificación por proyecto, sin actualizaciones remotas silenciosas.

Web y patrones de marketing

Secciones editoriales, cards de contraste, fotografía corporativa y simulaciones de producto.