Principios
Lexy diseña para dos audiencias dentro de un mismo flujo: el abogado que opera el caso y el cliente que necesita entenderlo. Estos principios son los criterios que guían cada decisión visual del sistema, y la lente con la que revisamos cada componente.
Fundamento
Claridad antes que expresión
El diseño en Lexy existe para transformar información legal compleja en experiencias claras, accionables y confiables. La jerarquía se resuelve primero con tipografía, color y espacio. Las herramientas más expresivas — sombras, movimiento, color de marca — entran solo cuando aportan significado funcional.
La interfaz comunica primero.
La estética acompaña, ordena y refuerza — nunca compite. Si algo se ve bien pero no se entiende, se diseñó al revés.
Principios centrales
Ocho criterios que guían decisiones visuales en producto, interfaces, documentación y comunicación de marca. Aplican tanto a vistas densas del estudio como a superficies para clientes.
Claridad funcional
Cada decisión visual debe facilitar comprensión, lectura o acción. Si un estilo no acelera el flujo, no pertenece a la pantalla.
Sistema sobre gusto
Trabajamos con tokens, escalas y patrones repetibles. Las decisiones se sostienen porque pueden replicarse, no porque le gusten a alguien.
Sobriedad contemporánea
Lexy se ve moderna, confiable y contenida. Una interfaz seria comunica seriedad antes de que el contenido tenga que demostrarla.
Doble audiencia
El abogado opera con densidad alta; el cliente entra sin contexto. Cada superficie elige su lado — nunca diseñamos para las dos al mismo tiempo.
Jerarquía antes que efecto
Tamaño, peso, contraste y espacio hacen el trabajo pesado. Sombras, color de marca y movimiento son refuerzos: aparecen cuando ya no alcanza con lo estructural.
Marca como acento
Indigo Lexy (#4648d4) guía la atención hacia acciones primarias, estados activos y momentos clave. Si la marca está en todas partes, deja de orientar.
Consistencia como confianza
En contextos legales la repetición es seguridad: el mismo patrón en cada caso, el mismo estado en cada expediente. Lo predecible es lo que el usuario puede auditar.
Densidad bajo control
Las vistas con muchos datos no se resuelven con menos información, sino con mejor jerarquía tipográfica, espaciado intencional y agrupación clara.
Stack
Geist + Fluent + Lexy
Lexy no inventa componentes desde cero: combina dos sistemas maduros — Geist UI de Vercel para el feel editorial y Fluent v9 de Microsoft para los componentes estructurales — y los retematiza al lenguaje Lexy. Los acentos (foco, selección, estado activo) son siempre indigo Lexy #4648d4.
Aporta el feel editorial: botones, inputs, snippets, tooltips. Su minimalismo es la base estética del sistema.
Tabs, menús, tree, toolbar, modal, accordion. Donde necesitamos comportamiento accesible probado, Fluent gana.
Toasts con stacking visual al estilo Vercel. Re-tematizados a la línea Lexy: blanco, radio 14, sombra navy.
Spacing, grid y tipografía vienen de Tailwind con un conjunto cerrado de tokens. Nunca colores arbitrarios.
Geist Sans para todo el producto. Geist Mono para snippets, identificadores y datos tabulares (RUT, rol judicial).
Outlined, weight 500 por defecto. Acompañan etiquetas; el icon-only se reserva para acciones universales.
Comportamiento visual
Tipografía organiza, no decora
Geist Sans resuelve casi toda la jerarquía. Cambios de tamaño, peso o color responden a una función — display, título, cuerpo, label — no a un gusto. Geist Mono entra solo para snippets y datos identificadores: RUT, rol judicial (C-2984-2025), folios.
El color de marca llama, no rellena
Indigo Lexy aparece en acciones primarias, foco de inputs, selección de checkbox/radio/switch, slider activo y badges de estado. El neutro lleva el grueso del producto para que la marca conserve su capacidad de orientar.
La elevación entra cuando algo se despega del fondo
Trabajamos casi siempre en valores bajos. Antes de elevar, conviene revisar si un borde fino o un cambio de superficie ya resuelve la separación. Los toasts y modales usan sombras Lexy navy de doble capa.
Radios y bordes son tokens, no decisiones de pantalla
Radio 8 para controles compactos (botones, inputs, tags), 10–12 para tabs y badges, 14 para cards y toasts, 24 para modales y superficies grandes. Bordes a 1px en hairline neutro o #4648d4 en estados activos.
Los iconos refuerzan, casi nunca reemplazan
Material Symbols Outlined a wght 500. Tamaño por defecto 18–20 px, acompañados de etiqueta. El icon-only se reserva para acciones universales o para vistas donde el contexto del abogado lo permite (toolbar, tablist).
La densidad se controla con espacio
Vistas como expediente, plazos o documentos pueden ser densas si el espaciado y la agrupación tipográfica las sostienen. La densidad no es problema; la mezcla tipográfica desordenada sí.
Criterios de aplicación
Antes de aceptar una pantalla, un componente o un layout, verifica que cumpla con estos cuatro criterios.
Comprensión
La pantalla se escanea en segundos. Quien la abre debe entender qué está viendo, qué es importante y cuál es la siguiente acción posible.
Confianza
En lo legal, la claridad visual también es seguridad. Una interfaz cuidada transmite que detrás hay un equipo que cuida igual el caso.
Escalabilidad
Un patrón debe sostenerse en una vista y también en cien. Si una solución solo funciona aislada, todavía no es parte del sistema.
Empatía con el lector
La densidad correcta en el producto interno puede ser ruido en el portal del cliente. Cada superficie se calibra contra quién la lee, no contra una métrica de pantalla.
Reglas duras
Reglas que protegen la consistencia del sistema. Romperlas suele costar más que sostenerlas.
Lo que no hacemos
- No agregar estilos visuales que no cumplan una función clara de comprensión, jerarquía o acción.
- No usar indigo Lexy como fondo dominante o decoración. La marca existe para guiar, no para ambientar.
- No mezclar familias tipográficas, escalas o estados visuales dentro de una misma vista.
- No tratar producto interno y portal del cliente como la misma superficie: cambian densidad, tamaño tipográfico y soporte textual de los iconos.
- No diseñar componentes aislados que no puedan repetirse o escalar dentro del sistema.
- No sacrificar legibilidad por impacto visual. Una interfaz hermosa primero tiene que ser entendible.
- No reemplazar tokens por valores arbitrarios — ni colores hex sueltos, ni radios inventados, ni shadows ad-hoc.