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. Reserva PiArrowSquareOutBold para el final de enlaces o text buttons que abren otra pestaña y no tienen icono a la izquierda; nunca lo añadas a controles con apariencia de botón o descargas. Un botón de solo icono necesita nombre accesible. Las marcas de módulo reutilizan ModulePill del paquete core.
Para presentar únicamente el icono de marca, renderModuleIconArtwork de
module-pill-artwork expone el mismo vector que utiliza ModulePill, en una
cuadrícula de 32 × 24. Evita sustituirlo por iconos genéricos de embudos, personas
o gráficos. El website lo reutiliza en los títulos y las ilustraciones del menú.
<svg viewBox="0 0 32 24" aria-hidden="true"
dangerouslySetInnerHTML={{ __html: renderModuleIconArtwork("CRM") }} />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.
