# Design geométrico: grades, formas e ideias de padrões

[Canonical HTML page](https://gradiently.design/pt-br/guide/geometric-design)

Círculos, quadrados, listras e grades são as ferramentas mais antigas do design gráfico, e ainda as mais confiáveis. Um guia prático de grades, escolha de formas e ideias de padrões, com código para colar.

## The short version

- O design geométrico constrói imagens e layouts com formas regulares, como círculos, quadrados, triângulos e linhas retas, geralmente organizadas numa grade.
- Uma grade com margens, colunas e espaçamentos consistentes é o que faz layouts geométricos parecerem ordenados, e não apenas angulosos.
- Círculos tendem a parecer simpáticos e completos, quadrados estáveis e triângulos direcionais e cheios de energia.
- Listras, xadrez, bolinhas, raios e anéis podem ser desenhados com degradês CSS, sem nenhum arquivo de imagem.
- Padrões geométricos funcionam melhor com duas ou três cores e uma escala clara, para apoiar o conteúdo em vez de competir com ele.

O **design geométrico** constrói visuais com formas regulares (círculos, quadrados, triângulos e linhas retas) colocadas numa grade. É a linguagem da Bauhaus, dos cartazes suíços, do Art Déco e da maioria dos logos modernos. Ele parece ordenado, confiante e atemporal porque as regras são visíveis: as coisas se alinham, se repetem e se relacionam. Abaixo está como montar a grade, escolher formas com intenção e criar padrões geométricos, incluindo vários que você pode desenhar só com CSS.

## Comece com um layout em grade

As formas sozinhas não tornam um design geométrico; o alinhamento sim. Uma grade dá a cada elemento um lugar: margens em volta da borda, colunas atravessando o quadro e espaços entre elas. Quando ela existe, cada círculo, bloco e linha de texto se encaixa nela, e o design inteiro passa a parecer construído.

| Formato | Tamanho | Margem | Grade |
| --- | --- | --- | --- |
| Post do Instagram | 1080×1350 | 72 px | 6 colunas, espaços de 24 px |
| Post quadrado | 1080×1080 | 72 px | 6 colunas, espaços de 24 px |
| Story | 1080×1920 | 72 px nas laterais, 250 px em cima e embaixo | 4 colunas, espaços de 24 px |
| Cartaz A4 a 300 dpi | 2480×3508 | 177 px (15 mm) | 12 colunas, espaços de 59 px |
| Hero de site | 1920×1080 | 120 px | 12 colunas, espaços de 32 px |

Grades iniciais para formatos comuns. Não são regras de nenhuma plataforma, só padrões sensatos: ajuste e depois mantenha ao longo de uma série.

Os mestres dessa abordagem foram os designers suíços dos anos 1950 e 1960, cujos cartazes ainda parecem atuais. [Design suíço](https://gradiently.design/pt-br/guide/swiss-design) cobre os métodos deles, e [design Bauhaus](https://gradiently.design/pt-br/guide/bauhaus-design) mostra onde começou o amor por círculo, quadrado e triângulo.

## Escolher formas com intenção

Cada forma básica carrega associações muito usadas no ensino de design, embora nenhuma seja absoluta. Use como tendências e deixe a cor e o contexto fazerem o resto.

- **Círculo:** completo, simpático, focado. Bom para destacar uma coisa, como uma data ou um rosto.
- **Quadrado e retângulo:** estável, honesto, estrutural. O recipiente natural para texto e imagens.
- **Triângulo:** direcional e cheio de energia. Guia o olhar, sugere movimento ou tensão.
- **Linha e listra:** ritmo e velocidade. Na horizontal parece calmo, na diagonal parece dinâmico.
- **Semicírculo e quarto de círculo:** suavizam um layout rígido sem deixar de ser geométricos, um favorito dos cartazes modernos.

Um cartaz retrato dividido verticalmente em dois blocos, com o título de uma palestra alinhado de um lado

Um layout dividido: uma divisão vertical forte, com o texto preso à grade de um lado.

Um post retrato com um número grande dizendo 12 colunas e uma linha pequena de detalhe alinhada

Um número grande colocado na grade. O contraste de escala entre o número e o detalhe é um movimento geométrico clássico.

## Ideias de padrões geométricos

Os padrões são o design geométrico na sua forma mais visível. Os clássicos são listras, xadrez, bolinhas, raios, anéis, chevrons e grades de linhas. Fique em duas ou três cores, escolha uma escala e decida se o padrão é o protagonista (um cartaz, um papel de presente) ou um fundo discreto, caso em que você deve baixar bastante o contraste.

- Listras diagonais: `repeating-linear-gradient(45deg, #1e3a8a 0 24px, #f5efe3 24px 48px)`
- Listras de toldo: `repeating-linear-gradient(90deg, #c2410c 0 40px, #fed7aa 40px 80px)`
- Anéis de alvo: `repeating-radial-gradient(circle at 50% 50%, #0f172a 0 18px, #fbbf24 18px 36px)`
- Raios de sol: `repeating-conic-gradient(from 0deg at 50% 100%, #b91c1c 0deg 7.5deg, #fef3c7 7.5deg 15deg)`
- Quadrado em quartos: `conic-gradient(from 90deg at 50% 50%, #111827 0deg 90deg, #e5e7eb 90deg 180deg, #111827 180deg 270deg, #e5e7eb 270deg 360deg)`
- Pautado: `repeating-linear-gradient(0deg, #f8fafc 0 31px, #94a3b8 31px 32px)`

Seis padrões geométricos desenhados só com degradês CSS. Paradas de cor duras (a mesma posição duas vezes) dão bordas nítidas em vez de misturas.

O Art Déco usou raios, leques e formas escalonadas em dourado e preto; o Memphis quebrou a grade com rabiscos e confetes. [Design Art Déco](https://gradiently.design/pt-br/guide/art-deco-design) e [design Memphis](https://gradiently.design/pt-br/guide/memphis-design) são fontes ricas se você quer um padrão com sabor de época.

## Xadrez, bolinhas e grades em CSS

Alguns padrões precisam do tamanho do bloco definido à parte com `background-size`, para que se repitam por todo o elemento. Estes três são os mais pedidos. O artigo de [padrões CSS](https://gradiently.design/pt-br/guide/css-patterns) tem muitos outros, e [repeating linear gradient](https://gradiently.design/pt-br/guide/css-repeating-gradient) explica as paradas duras em detalhe.

```css
/* Checkerboard: one conic gradient, tiled */
.checks {
  background: repeating-conic-gradient(#111827 0 25%, #f3f4f6 0 50%) 0 0 / 48px 48px;
}

/* Polka dots */
.dots {
  background-color: #fef3c7;
  background-image: radial-gradient(circle, #b45309 6px, transparent 7px);
  background-size: 32px 32px;
}

/* Graph paper grid */
.grid {
  background-color: #f8fafc;
  background-image:
    linear-gradient(#cbd5e1 1px, transparent 1px),
    linear-gradient(90deg, #cbd5e1 1px, transparent 1px);
  background-size: 24px 24px;
}
```

Xadrez, bolinhas e papel quadriculado. Mude as cores e o tamanho do bloco; deixe a estrutura como está. A diferença de 1px nas bolinhas suaviza a borda.

## Ideias de design geométrico para testar esta semana

- **Um círculo grande:** um único círculo ocupando metade de um cartaz, com a data do evento dentro dele.
- **Borda listrada:** uma faixa de listras de toldo no topo de um cardápio ou tabela de preços, e mais nada com padrão.
- **Cantos em quarto de círculo:** um quarto de círculo em cada canto de um post quadrado, em duas cores alternadas.
- **Número na grade:** um número enorme (um ano, um preço, uma contagem de dias) alinhado à coluna da esquerda, com texto pequeno ao lado.
- **Raios atrás do produto:** raios de baixo contraste saindo de trás de uma garrafa ou caixa num banner de loja.
- **Notas em papel quadriculado:** um carrossel de dicas sobre uma grade suave, cada slide com uma regra escrita.

Cada ideia usa um recurso geométrico e deixa o resto simples. Isso costuma bastar para dar a um post um ponto de vista claro, e é fácil de repetir numa série inteira.

## Como manter designs geométricos legíveis

### Evite

- Padrão de alto contraste bem atrás do texto
- Cinco cores num padrão
- Formas que quase se alinham, mas escapam da grade
- Listras finas que tremem na tela
- Misturar três escalas de padrão sem relação

### Faça

- Um bloco sólido ou calmo onde ficam as palavras
- Duas ou três cores, uma dominante
- Tudo encaixado na mesma grade
- Listras com pelo menos 8 px no tamanho do post
- Uma escala de padrão, repetida com confiança

Listras finas de alto contraste podem tremer na tela e virar moiré quando um app redimensiona a imagem, então teste no tamanho em que as pessoas vão realmente ver. A ordem geométrica também combina bem com um elemento suave: uma única [forma orgânica](https://gradiently.design/pt-br/guide/organic-shapes-design) numa grade rígida acrescenta calor sem quebrar o sistema. No Gradiently, o Designer pode diagramar um post numa grade limpa no Mark da sua marca e gerar todos os outros tamanhos a partir dele, então o alinhamento sobrevive a cada formato.

## FAQ

### O que é design geométrico?

Um estilo de design gráfico construído com formas regulares como círculos, quadrados, triângulos e linhas, geralmente alinhadas a uma grade.

### Como faço um padrão geométrico em CSS?

Use degradês repetidos com paradas de cor duras, como `repeating-linear-gradient(45deg, #1e3a8a 0 24px, #f5efe3 24px 48px)` para listras. Para xadrez e bolinhas, acrescente `background-size` para definir o bloco.

### Qual grade devo usar num post do Instagram?

Um post de 1080×1350 funciona bem com margens de 72 pixels e seis colunas com espaços de 24 pixels. Use a mesma grade em todos os posts de uma série.

### Quais movimentos de design usam formas geométricas?

A Bauhaus, o Estilo Tipográfico Internacional (ou suíço), o Art Déco e o Memphis se apoiaram muito em formas geométricas, cada um com um espírito bem diferente.