Resumen
Inicio
Primeros pasos
Un recorrido rápido por lo que hay detrás del panel.
63%
Ocupación promedio (en vivo)
3.2 min
Tiempo de reserva
12
Instructores certificados
Próxima clase
Reformer · 07:00 con Bruno Ledesma
4 cupos
Clases de hoy
Reformer
Bruno Ledesma · Todos los niveles
4 de 10 cupos libres
Movilidad
Nadia Ríos · Todos los niveles
6 de 8 cupos libres
HIIT
CompletoCamila Suárez · Avanzado
0 de 6 cupos libres
Fuerza funcional
Bruno Ledesma · Intermedio
2 de 8 cupos libres
Documentación interna
Sistema de diseño
Equipo de producto de Cimbra · Última revisión 18 abr (v2.0)
Referencia obligatoria antes de construir o modificar un componente del panel - cualquier superficie nueva se valida contra estas reglas antes de salir a producción.
Superficie #ECEFF3
Fondo principal, base neumórfica
Grafito #1C222B
Texto, contraste
Coral #FF6B4A
Único acento, estados activos
Niebla #8890A0
Texto secundario, íconos inactivos
Bricolage Grotesque
Cuatro clases, un solo lugar.
Hanken Grotesk
12 instructores certificados.
Reglas
- Toda superficie elevada usa el mismo par de sombras (clara arriba-izquierda, oscura abajo-derecha) - nunca una sombra genérica de un solo lado.
- Los estados activos se hunden (sombra invertida) en vez de cambiar de color - el color queda reservado para el acento coral.
- Radio de borde constante de 24px en tarjetas grandes, 14px en controles - nunca esquinas rectas ni completamente circulares.
- Responsive: 4 columnas en desktop pasan a 2 en tablet y 1 en mobile - nunca se aplana la elevación para "ahorrar espacio", solo se reordena la densidad.
Componentes
Tarjeta elevada
23 usosSombra dual (clara/oscura), radio de 24px, sin borde visible.
Botón primario
11 usosRelleno coral, se hunde (sombra inset) al presionar.
Tab
8 usosCambia de panel al hacer click o tap; con flechas si se navega por teclado, sin animación - los atajos de teclado no deberían esperar a una transición.
Control segmentado
6 usosPill con estado activo hundido, usado para elegir plan, nivel u horario.
Selector de plan (demo en vivo)
El mismo control segmentado del resto del sistema, aplicado a un caso real.
Plan 8 clases
Una clase por semana, vigencia de 45 días.
$ 5.900
Historial
Changelog
- v1.012 marResearch
Relevamiento
Mapear qué necesita ver una persona antes de reservar: horario, cupo, instructor, nivel.
SBSB
- v1.119 marDiseño
Wireframe de grilla
Probar la densidad de información en escala de grises antes de sumar elevación o color.
NRNR
- v1.22 abrSistema
Sistema neumórfico
Definir el par de sombras, el radio y el acento como reglas fijas, no como estilo por componente.
NRNR
- v2.018 abrBuildActual
Construcción
Implementación real en Next.js, con el mismo estándar de performance y accesibilidad que el resto del portfolio.
CSCS
Nota fijada del equipo
Reservar una clase no debería sentirse como llenar un formulario.
SBSB · 10 mar
El punto de partida ficticio: un estudio de movimiento con una agenda real (reformer, fuerza, movilidad) mostrado en una landing plana de texto y fotos, sin ninguna sensación de "estado en vivo" - cupos, horarios, progreso.
El desafío de diseño real: tomar prestada la densidad organizada de un dashboard de producto (Stripe, Notion, Arc) para un sitio de cara al público, sin que se sienta frío ni corporativo - la calidez tenía que venir de la forma, no de fotos de stock.
Tableros, no folletos.
NRNR · 19 mar
Se relevaron paneles de producto (Stripe Dashboard, Notion, Arc) y apps de estudios boutique - el hallazgo común: la sensación de "control" viene de ver todo el estado relevante junto, sin scroll innecesario. Se descartó el lenguaje de landing de wellness genérica (fotos de yoga en la playa, paletas pastel sin estructura) por no comunicar organización real.
- — La elevación neumórfica lee "superficie física" mejor que cualquier borde o línea divisoria.
- — Un estado "presionado" en botones y tabs comunica interactividad sin necesitar color adicional.
- — La densidad de información se percibe como orden, no como saturación, cuando cada tarjeta resuelve una sola pregunta.
Reservar se siente como abrir un panel de control.
CSCS · 18 abr
El resultado es un sitio que muestra su propio estado - cupos, horarios, plan activo - en vez de pedir que el visitante lo adivine o lo busque. La calidez no viene de fotos genéricas, viene de superficies que responden al tacto.
Hablar con el equipo
¿Querés algo así para tu negocio?