Vida Rica · guía de diseño
Nada es cuadrado. Ni tarjetas, ni campos, ni botones, ni fotos de perfil. Si una caja tiene borde o fondo propio, lleva radio.
Las dos excepciones: los fondos a sangre —el lienzo de una sección a ancho completo— y las líneas divisorias. No son cajas.
Sube con el tamaño de la caja. Una etiqueta pequeña con el radio de una tarjeta parece un error; una tarjeta con el de la etiqueta parece que se ha quedado sin redondear.
Mira el padding de la caja.
| Padding | Radio | Ejemplo |
|---|---|---|
hasta p-3 | rounded-md | fila de menú, botón |
p-4 a p-8 | rounded-lg | tarjeta de socia, bloque con borde |
p-9 en adelante | rounded-xl | panel del perfil, sección destacada |
✗ Como estaba
✓ Ahora
Siempre círculo, nunca cuadrado ni con esquina suave. En el
código lo garantiza LeonaAvatar, que ya lleva la forma en su
clase base: solo hay que darle tamaño.
El color entero y el mosaico del manual se mantienen. Lo que cambia es la esquina: los módulos ya no son rectos.
Redondeo completo, no el de la tarjeta que las contiene.
Los tokens viven en el bloque @theme de app/globals.css.
La versión escrita de esta guía está en docs/DESIGN_SYSTEM.md,
sección «Esquinas».