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

Composição de widgets

Em coleções de cartões, use 8 px entre detalhes próximos, 16 px entre controles, 24 px dentro de grupos e 32 px entre assuntos. Divisórias separam contextos; espaço em branco conecta elementos do mesmo grupo.

8 px16 px24 px32 px

Dimensões dos botões

Altura, espaçamento interno e distância entre ícone e texto seguem a escala de cada tamanho.

TamanhoAlturaPadding H/VFonte / linhaÍcone / gapRaio / bordaUso
Extra pequeno28 px10 / 5 px12 / 16 px14 / 6 px6 / 1 pxTabelas
Pequeno32 px12 / 7 px12 / 16 px14 / 6 px7 / 1 pxFiltros
Médio40 px14 / 10 px13 / 18 px16 / 8 px8 / 1 pxPadrão geral
Grande48 px20 / 14 px14 / 20 px18 / 8 px10 / 1 pxAções principais
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.