Fundamentos
Espaciado y layout
Rejilla de 4 px. El aire separa; las líneas solo cuando hace falta. Escritorio generoso, móvil compacto.
Escala de espaciado#
Usa las utilidades de Tailwind (
p-4 = 16 px, gap-6 = 24 px). En nativo, spacing[4].14px
28px
312px
416px
520px
624px
728px
832px
1040px
1248px
1456px
1664px
2080px
2496px
32128px
px1px
0.52px
1.56px
2.510px
Puntos de ruptura#
Mobile-first. La vista app (pestañas inferiores) se usa por debajo de md; la vista escritorio desde md.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| sm | 640px | sm: | Móvil grande · 2 columnas de tarjetas |
| md | 768px | md: | Tablet · cabecera de escritorio, sin barra inferior |
| lg | 1024px | lg: | Portátil · 3 columnas, mapa lateral en Explorar |
| xl | 1280px | xl: | Escritorio · 4 columnas |
| 2xl | 1440px | 2xl: | Escritorio grande · 5 columnas |
| 3xl | 1760px | 3xl: | Pantallas anchas · 6 columnas |
Rejilla de tarjetas#
El número de columnas crece con el ancho, el margen lateral también (24 / 40 / 80 px).
< 640
≥ 640
≥ 1024
≥ 1280
≥ 1440
≥ 1760
Constantes de layout#
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| headerHeight | 80px | --header-height | Cabecera de escritorio |
| headerHeightCompact | 64px | --header-height-compact | Cabecera compacta / ficha en móvil |
| tabBarHeight | 64px | --tabbar-height | Barra de pestañas (vista app) |
| maxContent | 1760px | --max-content | Ancho máximo del contenido |
| touchTarget | 44px | — | Objetivo táctil mínimo |
| gutter | 24 / 40 / 80px | px-6 md:px-10 xl:px-20 | Margen lateral (Container) |