Sistema de diseño
El sistema de diseño de Frihet es la capa visual y de interacción común a la aplicación web, el sitio de marketing y la documentación. Se construye sobre shadcn/ui con Tailwind como motor de utilidades y un conjunto de tokens compartidos para tipografía, color, espaciado, sombras y animaciones.
Cómo funciona
El sistema parte de tokens de diseño que definen el lenguaje visual de forma centralizada. Los colores siguen una paleta monocroma con #18181b como tinta principal en modo claro y #fafafa en modo oscuro — sin gradientes ni acentos decorativos que distraigan del contenido. La tipografía es Inter con tracking ajustado en titulares (-0.03em en h1, -0.02em en h2) para conseguir densidad sin perder legibilidad.
Los componentes base son los primitivos de shadcn/ui extendidos para los flujos de Frihet: Button, Card, Sheet, Dialog, Sidebar, formularios con validación, tablas con ordenación y filtros. Cada primitivo vive en el paquete UI compartido — si trabajas sobre el ERP, importa siempre desde @frihet/ui o components/ui/ en lugar de reescribir un wrapper nuevo.
La interacción cumple un mínimo de accesibilidad concreto: todos los controles tienen un objetivo táctil mínimo de 44 px para mantener usabilidad en móvil, los foco-visible están siempre marcados, los aria-* se aplican donde corresponde, y los contrastes están verificados sobre la paleta monocroma. Los tests axe-core se ejecutan en CI sobre las páginas críticas.
El modo oscuro está disponible junto al modo claro y al modo sistema. La preferencia se persiste en el dispositivo y se respeta automáticamente cuando entras desde otro navegador conectado a la misma cuenta. Las animaciones se reducen automáticamente si el sistema operativo declara prefers-reduced-motion.
Los iconos están consolidados en una única familia (lucide-react) para mantener coherencia visual y reducir tamaño de bundle. Si te falta un icono, prefiere componer con los existentes antes que añadir una librería nueva.
Configuración
Si construyes una integración o un dashboard externo y quieres alinear el look-and-feel con Frihet, puedes consumir los tokens de color y tipografía desde el sitio de documentación o desde el paquete UI cuando esté publicado. Para contribuciones al sistema, abre una petición en el board de feedback describiendo el caso de uso.