Fundamentos
Espaciado.
Spec cerradaSolar usa la escala de Tailwind, en múltiplos de 4px. Usa estos pasos para cualquier padding, margin o gap: elige el más cercano al espacio que necesitas.
| Paso | px | Para qué |
|---|---|---|
| 1 | 4px | gap-1: elementos muy pegados. |
| 1.5 | 6px | Entre el ícono y el texto de badges y chips; entre un título y su subtítulo. |
| 2 | 8px | Entre el ícono y el texto de botones y listas; entre ítems de una lista. |
| 3 | 12px | Padding de botones y campos; separación entre filas y entre partes de una alerta. |
| 4 | 16px | Padding de alertas y notas; padding horizontal de botones; separación entre columnas. |
| 5 | 20px | Padding de paneles medianos, como el marco de la Vista previa. |
| 6 | 24px | Padding de cards; separación entre columnas de un formulario. |
| 8 | 32px | Padding de paneles grandes; separación entre un subtítulo y lo que viene antes. |
| 14 y 16 | 56 y 64px | Separación entre bloques de contenido y entre secciones de una página. |
Los pasos 0.5, 2.5 y 3.5 existen en la escala, pero solo se usan en ajustes finos dentro de un componente (por ejemplo, el padding de un badge). El espacio entre párrafos y listas está en Textos y tipografías.