Medida y ritmo
Base de 4 px, radios por rol y una geometría pill que reserva los extremos curvos.
Radios por rol
| Rol | Valor | Regla |
|---|---|---|
| Botón | 999 px | Pill en todos los modos |
| Campo | 14 px | No hereda el radio del botón |
| Panel | 20 px | Una agrupación clara; sin anidar tarjetas por defecto |
| Bloque editorial / overlay | 28 px | Marketing o contenedor grande |
| Chip | 10 px | Etiqueta, no botón principal |
Anatomía del pill
Texto e iconos empiezan en la parte recta. Cada extremo semicircular reserva media altura, más 2 px de aire. Altura 44 px, padding lateral 24 px; variante grande 52 px, padding 28 px. Fórmula: calc(altura / 2 + 2px).
La densidad compacta reduce espaciado de filas, no el target ni el margen geométrico del pill. Un botón solo de icono es circular, al menos 44 × 44 px, con centrado óptico y nombre accesible. Botones con etiquetas largas pasan a otra fila; no reducir padding ni comprimir letras.
Espaciado y densidad
Marketing: separación de secciones 64 px, padding de panel 28 px. App: 32 y 20 px. Transaccional: 40 y 24 px. Compacto en app: 24 y 16 px. Son puntos de partida del contrato, no autorización para rellenar todos los bloques con el mismo padding.
La página deja respirar; la tabla puede ser densa. Los límites de filas son rectos y discretos; el radio pertenece al contenedor, no a cada fila.
Elevación y movimiento
La jerarquía viene de superficie, borde y espacio. Reservar sombras mayores para overlays. Transiciones de 150–250 ms, sin mover layout ni coreografiar la carga del dashboard. Respetar reducción de movimiento.