Banco de pruebas del brand-kit: pill de identidad de módulo, controles, formularios, iconos y las cards con notch de módulos relacionados — todo con los componentes reales, en ambos temas. La primera sección ajusta la geometría del <ModulePill> en vivo; al final están Iconos y Cards.
La geometría del <ModulePill> quedó congelada en el brand-kit (PILL_GEOMETRY); ya no se ajusta en vivo. Quedan los controles que el kit sí expone: colapsado, activo (sólido) vs reposo (inverso), color del icono y modo secundario.
Sin icono. Expandido = numbers + ERP (sub); colapsado = solo "n". Nombre y borde con el mismo degradado de marca. El toggle anima el morph (pill ↔ círculo). Geometría = la de arriba (Geometría).
Interruptor on/off animado (knob desliza, track se llena con el accent). Control consistente para opciones booleanas (p. ej. "incluir archivados"). Reemplazará el checkbox.
Lupa colapsada → click → se expande a un campo de búsqueda (ancho animado). En el navbar real, al expandir se colapsan los items del nav y el resto de botones (menos tema). Color = módulo seleccionado (i).
Checkbox del kit (caja accent + tick) + multiselect glass con chips de color / avatares y un Check por opción. Para reemplazar los filtros del tablero. Color = módulo i.
Input texto (borde + ring accent al foco, icono opcional), Button (primary/secondary/ghost), Field (label + control + hint/error). Para reconstruir el diálogo de crear ticket. Módulo i.
Card de métrica para el panel administrativo. Tonos semánticos (good/warn/bad) y estado empty («Próximamente») para KPIs sin backend aún.
Strip de alerta con color semántico. Para alertas críticas sobre el contenido o un centro de alertas.
Wrapper SVG de qrcode.react. Colores por tokens de tema (override con fg/bg). Usado en recibos imprimibles.
Raíz configurable: pill (identidad módulo — usar cuando el logo no es visible), home (casita accent, compacta) o slash ("/" minimalista). Rutas largas colapsan el medio a «…» (menú glass). Glass opcional envuelve todo en un pill. Módulo: i.
hover = lift + halo · "Cerrar" = nombre se guarda en el icono · achatar el ancho dispara el marquee.
sm · md · lg con los valores actuales de SIZES — para comparar contra tu ajuste.
wordmark numbers ERP + identidad de módulo, en frente y como exponente. El estilo (variant/color/geometría) y si va desplegado o solo icono se controla en Geometría.
identidad del módulo (i) + items dentro del pill. Click = activo (pill sólido) · hover = tint. Colapsado oculta el nombre. Dos layouts a comparar.
Línea de contenido 1 — desplázate para ver cómo el header y el footer translúcidos dejan ver lo que pasa por debajo del cristal.
Línea de contenido 2 — desplázate para ver cómo el header y el footer translúcidos dejan ver lo que pasa por debajo del cristal.
Línea de contenido 3 — desplázate para ver cómo el header y el footer translúcidos dejan ver lo que pasa por debajo del cristal.
Línea de contenido 4 — desplázate para ver cómo el header y el footer translúcidos dejan ver lo que pasa por debajo del cristal.
Línea de contenido 5 — desplázate para ver cómo el header y el footer translúcidos dejan ver lo que pasa por debajo del cristal.
Línea de contenido 6 — desplázate para ver cómo el header y el footer translúcidos dejan ver lo que pasa por debajo del cristal.
Línea de contenido 7 — desplázate para ver cómo el header y el footer translúcidos dejan ver lo que pasa por debajo del cristal.
Línea de contenido 8 — desplázate para ver cómo el header y el footer translúcidos dejan ver lo que pasa por debajo del cristal.
Card translúcida 1. El fondo se difumina a través del cuerpo; el borde lleva el color del módulo.
Card translúcida 2. El fondo se difumina a través del cuerpo; el borde lleva el color del módulo.
Card translúcida 3. El fondo se difumina a través del cuerpo; el borde lleva el color del módulo.
Contenido de ejemplo. El sidebar colapsa a un riel de iconos y puede ir a la izquierda o a la derecha. Identidad del módulo arriba, items debajo.
Phosphor Icons duotone + module badges con paleta V2. Click en un icono copia su import.
Una card de tablero relacionada con TODOS los módulos. Una card por color primario para ver el stack desde cada módulo. Hover en un icono apilado revela su nombre; el borde de la card sigue al pill activo.
Hover any stacked icon to reveal its name; the card border follows it.
Hover any stacked icon to reveal its name; the card border follows it.
Hover any stacked icon to reveal its name; the card border follows it.
Hover any stacked icon to reveal its name; the card border follows it.
Hover any stacked icon to reveal its name; the card border follows it.
Hover any stacked icon to reveal its name; the card border follows it.
Hover any stacked icon to reveal its name; the card border follows it.
Hover any stacked icon to reveal its name; the card border follows it.
Hover any stacked icon to reveal its name; the card border follows it.
Hover any stacked icon to reveal its name; the card border follows it.
Hover any stacked icon to reveal its name; the card border follows it.
Hover any stacked icon to reveal its name; the card border follows it.
Hover any stacked icon to reveal its name; the card border follows it.
Hover any stacked icon to reveal its name; the card border follows it.
Hover any stacked icon to reveal its name; the card border follows it.
Hover any stacked icon to reveal its name; the card border follows it.
Hover any stacked icon to reveal its name; the card border follows it.
Hover any stacked icon to reveal its name; the card border follows it.
Hover any stacked icon to reveal its name; the card border follows it.
Hover any stacked icon to reveal its name; the card border follows it.
Hover any stacked icon to reveal its name; the card border follows it.
Hover any stacked icon to reveal its name; the card border follows it.
Placeholders que imitan la forma del contenido mientras carga (mejor que un spinner: menos salto de layout). Base <Skeleton /> + composiciones por tipo de página. Respetan tokens de tema y prefers-reduced-motion (apaga el shimmer). El slider ajusta densidad.