Grid, radius, shadows e breakpoints

O sistema espacial organiza layouts densos sem ruído visual: espaçamentos previsíveis, cantos suaves e profundidade controlada por sombra semântica.

radius 0.5rem

Escala Tailwind

De 4px até 384px para composição consistente.

14px

28px

312px

416px

520px

624px

832px

1040px

1248px

1664px

2080px

2496px

32128px

40160px

48192px

56224px

64256px

72288px

80320px

96384px

Radius

Base --radius: 0.5rem com derivações.

--radius-smcalc(var(--radius) - 4px)4px

--radius-mdvar(--radius)8px

--radius-lgcalc(var(--radius) + 4px)12px

--radius-xlcalc(var(--radius) + 8px)16px

--radius-2xlcalc(var(--radius) + 16px)24px

Sombras

Tailwind padrão + extensões proprietárias.

shadow-sm

.shadow-primary

.shadow-primary-lg

Breakpoints nomeados

Use tablet: / laptop: / desktop: em vez de sm/md/lg.

tablet:

640px

Mobile landscape / small tablets

laptop:

1024px

Laptops e desktops compactos

desktop:

1368px

Monitores desktop padrão