Saltar al contenido

Fundamentos

Elevación, iconos y movimiento

Profundidad funcional y transiciones consistentes.

Prueba sin guardar cambios

Cargando ejemplo…

Jerarquía de superficies

El workspace contiene superficies raised para contenido e inset para controles. Floating se reserva para contenido superpuesto. Usa CrmRaisedSurface y CrmInsetSurface para conservar esa jerarquía.

Iconografía

Usa react-icons/pi y conserva la escala de la primitiva. Los enlaces de acción terminan con PiArrowSquareOutBold. Un botón de solo icono necesita nombre accesible. Las marcas de módulo reutilizan ModulePill del paquete core.

Movimiento

Las transiciones comunican selección, apertura o carga. Reutiliza el movimiento de las primitivas; respeta prefers-reduced-motion. Las guías comparten guided-attention.module.css, que conserva un halo estático cuando se reduce el movimiento.

Evitar

No copies box-shadow ni añadas una nueva receta de elevación por módulo. Una sombra floating en cada tarjeta elimina la jerarquía. No uses animación continua como decoración.

Código fuente

  • apps/platform/src/modules/crm/components/inset-surface.tsx
  • apps/platform/src/shared/styles/guided-attention.module.css