Espaciado y radios

El espaciado avanza en pasos de 4 px y agrupa lo que está relacionado. Los radios van de esquinas suaves a píldoras completas.

Toyota Yaris · JTRX-12

Mantención 10.000 km

Miércoles 21 de octubre, 10:30
Av. Providencia 1234

Escala

Todo el espaciado sale de la escala de Tailwind, en pasos de 4 px. Usa estos valores para padding, gap y márgenes.

14 px
28 px
312 px
416 px
520 px
624 px
832 px
1040 px
1248 px
1664 px

Ritmo

El espacio agrupa: más cerca significa más relacionado. Sube de rango a medida que la relación entre elementos se debilita.

Mantención
8 px
1 a 3 · Dentro de un componenteEntre ícono y texto, o entre líneas de un mismo bloque.
Cambio de aceite
Filtro de aire
4 a 6 · Entre elementosEntre filas, campos de formulario y cards hermanas.
8 a 16 · Entre seccionesSepara bloques con temas distintos dentro de una página.

Radios

Las formas son suaves y generosas. Las acciones van en píldora y las superficies con esquinas amplias.

rounded-md · 6 pxBadges y etiquetas pequeñas.
rounded-lg · 8 pxÍconos contenidos y tooltips.
rounded-xl · 12 pxMenús, opciones y elementos de lista.
rounded-2xl · 16 pxCards e inputs. El radio por defecto.
rounded-3xl · 24 pxSheets y contenedores grandes.
rounded-full · completoBotones, chips y avatares.

Uso

Revisión técnica
Sí
Radios concéntricos: el interior es más chico que el exterior.
Revisión técnica
No
El mismo radio dentro y fuera deja esquinas desparejas.

Mantención 10.000 km

$89.990

Sí
Padding parejo en los cuatro lados de una card.

Mantención 10.000 km

$89.990

No
Padding distinto por lado. La card se ve descuadrada.

Código

<div className='flex flex-col gap-4 rounded-2xl p-6'>
  <div className='flex items-center gap-2'>...</div>
</div>

<section className='flex flex-col gap-12'>...</section>