Borders y Containers
Borders y Containers
5 reglasBorder radius concentrico
Cuando un container redondeado tiene un hijo redondeado adentro: inner-radius = outer-radius - padding. Si el container tiene radius 20px y padding 8px, el hijo lleva 12px. Nunca anidar el mismo radius.
.card-inner { border-radius: 12px; /* 20 - 8 */ }
Container borders contrastan con ambas superficies
Un borde debe ser más claro (o más oscuro) que AMBAS superficies que separa. Nunca elegir un valor de borde entre las dos superficies. Dark: border más claro que card y que fondo. Light: border más oscuro que ambos.
hobdayNo dos hard divides adyacentes
Cambios de fondo, bordes de container y líneas divisoras son "hard divides". No deben estar adyacentes. Si un card tiene borde Y está sobre un cambio de fondo, quitar uno. Un divide limpio es intencional; dos apilados se ven accidentales.
hobdayOutline sutil en imagenes
Las imagenes con bordes claros en fondos claros "flotan" sin definición. Un outline de 1px semitransparente da framing visual consistente sin importar el contenido de la imagen.
outline: 1px solid rgba(0,0,0,.1);
outline-offset: -1px;
}
Botones: padding horizontal = 2x vertical
El rectangulo horizontal es la forma universal de "botón". Desviarse de esta proporción (botones cuadrados o altos) hace que los elementos sean más difíciles de reconocer como interactivos.