Sistema visual

Manual operativo BSTR

Las reglas para que diseño y desarrollo extiendan este dashboard sin romper su esencia.

Docs vivas

Docs

Presets de tema

Enterprise sober, dark y bold premium son presets de tokens sobre una misma estructura de componentes.

Abrir referencia

Docs

Contrato responsive

Las reglas definen cómo se adapta cada patrón antes de escribir código.

Abrir referencia

Docs

Lenguaje Authz

Los estados de permiso quedan visibles, explican causa y ofrecen recuperación.

Abrir referencia

Principios de diseño

Reglas operativas de BSTR. Las nuevas páginas deben cumplirlas antes de sumar componentes.

Datos primero, decoración después

Los efectos visuales deben aclarar jerarquía o estado. Si un efecto no facilita entender el flujo, se elimina.

El feedback es lenguaje de producto

Toda acción resuelve en toast, diálogo, banner o estado inline. El usuario nunca debe dudar si el sistema registró la acción.

Responsive por composición

Los layouts mobile reorganizan información en lugar de ocultar flujos centrales. Las tablas necesitan fallback en cards o scroll controlado.

Los estados de permiso quedan visibles

No ocultes módulos importantes en silencio. Explicá el rol requerido, por qué el acceso está bloqueado y cómo pedir acceso.

Los presets comparten estructura

Enterprise sober y bold premium son presets de tokens sobre los mismos componentes, no sistemas visuales separados.

Contrato de tokens

Usá tokens semánticos en lugar de valores crudos para mantener posibles los presets de tema.

Token	Uso
--background	Lienzo de página y fondo de app.
--surface	Cards, controles y paneles por defecto.
--surface-elevated	Drawers, cards anidadas y paneles enfatizados.
--surface-muted	Estados seleccionados, headers de tabla y controles inactivos.
--primary	Acciones primarias, navegación activa y series clave de gráficos.
--accent	Series secundarias y destacados especiales.
--success / --warning / --danger / --info	Solo estados de sistema; nunca decorativo.
--border / --border-strong	Separación, contornos y estructura de tablas.

Contrato responsive

Los componentes de dashboard deben declarar cómo se comportan en mobile y desktop.

Área	Mobile	Desktop
Navegación	Drawer abierto desde la barra superior.	Sidebar persistente.
Tablas	Fallback en cards/lista o scroll controlado.	Tabla completa con acciones visibles.
Filtros	Chips en varias líneas o drawer.	Barra inline con vistas guardadas.
Gráficos	Un gráfico principal arriba del fold.	Multi-panel con contexto de tabla.
Diálogos	Ancho completo o bottom sheet.	Modal centrado o drawer derecho.

Contrato de interacción

Cada affordance visible debe llevar a un estado UI concreto y alcanzable por teclado.

Patrón	Regla
Paleta de comandos	Navegación y descubrimiento global. Abre desde búsqueda, ícono de comando o Cmd/Ctrl+K; cierra con Escape o scrim.
Sheet de notificaciones	Actividad efímera del sistema. Abre desde la campana y conserva el contexto detrás de un scrim fuerte.
Sheet de filtros	Refinamiento de consulta. Los chips resumen estado; el sheet controla edición, aplicar y resetear.
Drawer de detalle	Inspecciona un registro sin perder el contexto de lista. Usalo para resúmenes y acciones rápidas.
Menú de fila	Overflow abre un menú con ver, editar y acciones secundarias. Las destructivas se separan visualmente.
Crear/editar CRUD	Usá un botón primario Agregar y un form en sheet/diálogo con labels visibles, ayuda y cancelar/guardar.
Eliminar CRUD	Eliminar nunca se ejecuta directo desde el menú. Abre una confirmación que indica consecuencia y alcance.
Acciones masivas	La selección muestra una toolbar contextual con conteo, limpiar, exportar/archivar y acciones destructivas confirmadas.
Forms con cambios	Cerrar un form modificado requiere confirmación de descarte para no perder datos en silencio.
Estados de tabla	Carga, vacío, sin resultados y errores recuperables necesitan copy claro y acciones de recuperación.
Feedback de acción	Crear, actualizar, eliminar y acciones masivas resuelven en toast o estado inline con deshacer si aplica.
Vistas guardadas	Agrupan filtros, orden, densidad y columnas visibles en modos operativos con nombre.
Columnas ordenables	Los headers muestran dirección visualmente y con aria-sort para tecnología asistiva.
Visibilidad de columnas	Reduce densidad sin ocultar acciones de fila ni todas las columnas de datos.

Guía de decisión de feedback

Elegí el patrón más chico que dé suficiente contexto y recuperación.

Situación	Patrón
Resultado breve	Toast
Acción destructiva	Diálogo de confirmación
Aviso global	Banner
Sección bloqueada local	Estado de permiso inline
Proceso largo	Toast de carga más progreso inline
Acción destructiva reversible	Toast con deshacer

Vocabulario de estados

Las palabras consistentes reducen carga cognitiva en todo el producto.

Estado	Significado
Activo	Usable y saludable.
Pendiente	Esperando acción del usuario o sistema.
Suspendido	Bloqueado intencionalmente. Explicar recuperación.
Fallido	Completado sin éxito. Ofrecer reintento.
Sincronizado	Fresco y actualizado.
Degradado	Disponible con menor confiabilidad o demora.
Solo lectura	Visible pero no editable por rol, estado o política.
Denegado	El usuario no puede ejecutar la acción. Explicar permiso requerido.