# 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. ## 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`. ## 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.