JobForgedJobForgedManual da marcaDesign System
Ir para o conteúdo
10 - Espaçamento

Espaço também comunica hierarquia.

A interface deve respirar. Margens, gutters e intervalos consistentes separam contextos, reduzem a sensação de sufoco e ajudam cada informação a ocupar o espaço certo.

Princípio prioritário

Organizar sem comprimir.

Proximidade indica relação; distância indica mudança de assunto. Nunca compense excesso de conteúdo diminuindo indiscriminadamente os espaços. Reorganize, agrupe e priorize.

→
4 pxMicro--jf-ui-space-1
8 pxÍcone e texto--jf-ui-space-2
12 pxControles próximos--jf-ui-space-3
16 pxGutter móvel--jf-ui-space-4
24 pxGrupos--jf-ui-space-6
32 pxCards--jf-ui-space-7
48 pxBlocos--jf-ui-space-8
64 pxSeções--jf-ui-space-9
Envelope principalDesktop como referência
Conteúdo até 1180 pxÁrea útil ampla, centralizada e protegida por gutters.Em monitores maiores, o espaço externo cresce igualmente dos dois lados.
Viewportgutterconteúdo
Limites por contextoLargura não é densidade
Página pública / Landing1180 pxConteúdo comercial e institucional
Autenticação e adesão1180 pxFormulário + contexto lado a lado
Documentos legais1180 pxEnvelope amplo; leitura interna até 900 px
Aplicação administrativaFluidoLimitado conforme densidade do módulo
ResponsividadeO conteúdo se adapta; o gutter nunca desaparece.
Desktop≥ 1180 pxConteúdo máximo de 1180 pxGutter mínimo de 24 pxSeções: 64–112 px
Tablet681–1179 pxEnvelope fluidoGutter de 24 pxGrids reorganizados
Mobile330–680 pxEnvelope fluidoGutter mínimo de 16 pxCards com 16–24 px internos
Faça
  • Separe seções antes de adicionar bordas.
  • Use 24–32 px dentro de containers principais.
  • Mantenha alinhamento vertical entre blocos relacionados.
  • Reduza colunas antes de reduzir o espaço interno.
Evite
  • Conteúdo encostado na borda do viewport.
  • Cards dentro de cards sem necessidade.
  • Intervalos diferentes para relações equivalentes.
  • Comprimir formulários para ocupar menos altura.