Introducción
Ejemplos de pantallas reales construidas con Lustro para un estudio de entrenamiento. Cada rol (Users, Coaches y Admin) tiene su propio recorrido, con menús que se expanden y datos ficticios. La estructura sigue el apartado de ejemplos de PulseFit Design System, con el lenguaje visual oscuro de Lustro.
Users4 grupos
Socios del estudio: reservar clases, ver reservas, membresía y pagos.Coaches4 grupos
Agenda del día, asistencia, notas de sesión y mensajes con socios.Admin4 grupos
Operación del estudio: ocupación, ingresos, socios y configuración.Cómo leer los ejemplos
- Menú expandible: a la izquierda de cada página, cada grupo se abre y se cierra con Enter o Espacio. Los enlaces saltan a la sección.
- Grupos de ejemplos: cada bloque es un
<details>nativo. Funciona con teclado y lector de pantalla sin JavaScript. - Datos ficticios: nombres, montos y horarios son inventados. Ninguno corresponde a una persona real.
Patrones que se repiten
| Patrón | Dónde aparece | Regla |
|---|---|---|
| Tarjeta de vidrio | Todos los roles | Borde rgba(148,140,255,.16), esquinas de 14px, un solo gradiente por vista |
| Lista con avatar | Reservas, asistentes, socios | Avatar con iniciales, línea secundaria en gris y estado a la derecha |
| Barra de progreso | Cupos, metas, ocupación | Gradiente índigo a rosa, siempre con el número al lado |
| Etiqueta de estado | Reservas, pagos, clases | Texto más color: nunca solo color |
| Tabla con scroll | Admin | Scroll horizontal en móvil, encabezado fijo en gris suave |
Para los componentes sueltos usa el catálogo completo. Para pantallas de otros dominios revisa Messaging, Calendar, Projects y Finance.