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

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

Círculos, quadrados, riscas e grelhas são as ferramentas mais antigas do design gráfico e continuam a ser as mais fiáveis. Um guia prático de grelhas, formas e ideias de padrões, com código para copiares.

## The short version

- O design geométrico constrói imagens e composições a partir de formas regulares, como círculos, quadrados, triângulos e linhas retas, normalmente organizadas numa grelha.
- Uma grelha com margens, colunas e espaços entre colunas consistentes é o que faz uma composição geométrica parecer ordenada e não apenas angulosa.
- Os círculos tendem a parecer simpáticos e completos, os quadrados estáveis, e os triângulos direcionais e enérgicos.
- Riscas, xadrezes, pontos, raios e anéis podem ser desenhados com gradientes CSS, sem ficheiros de imagem.
- Os padrões geométricos funcionam melhor com duas ou três cores e uma escala clara, para apoiarem o conteúdo em vez de competirem com ele.

O **design geométrico** cria visuais a partir de formas regulares (círculos, quadrados, triângulos e linhas retas) colocadas numa grelha. É a linguagem da Bauhaus, dos cartazes suíços, do Art Déco e da maioria dos logótipos modernos. Parece ordenado, seguro e intemporal porque as regras estão à vista: as coisas alinham, repetem-se e relacionam-se. Aqui ficas a saber como montar a grelha, escolher formas de propósito e criar padrões geométricos, incluindo vários que podes desenhar só com CSS.

## Começa por uma grelha de layout

As formas sozinhas não tornam um design geométrico; o alinhamento é que o faz. Uma grelha dá lugar a cada elemento: margens à volta, colunas ao longo do formato e espaços entre elas. Depois de existir, cada círculo, bloco e linha de texto encaixa nela, e o design inteiro começa a parecer construído.

| Formato | Tamanho | Margem | Grelha |
| --- | --- | --- | --- |
| Publicação no Instagram | 1080×1350 | 72 px | 6 colunas, espaços de 24 px |
| Publicação quadrada | 1080×1080 | 72 px | 6 colunas, espaços de 24 px |
| Story | 1080×1920 | 72 px nos lados, 250 px em cima e em baixo | 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 website | 1920×1080 | 120 px | 12 colunas, espaços de 32 px |

Grelhas de partida para formatos comuns. Não são regras de nenhuma plataforma, apenas valores sensatos: ajusta-os e depois mantém-nos ao longo de uma série.

Os mestres desta abordagem foram os designers suíços das décadas de 1950 e 1960, cujos cartazes ainda parecem atuais. [Design suíço](https://gradiently.design/pt-pt/guide/swiss-design) explica os seus métodos, e [design Bauhaus](https://gradiently.design/pt-pt/guide/bauhaus-design) mostra onde começou o gosto pelo círculo, o quadrado e o triângulo.

## Escolher formas de propósito

Cada forma básica traz associações muito usadas no ensino do design, embora nenhuma seja absoluta. Usa-as como tendências e deixa a cor e o contexto fazer o resto.

- **Círculo:** completo, simpático, focado. Bom para destacar uma só coisa, como uma data ou um rosto.
- **Quadrado e retângulo:** estáveis, honestos, estruturais. O contentor natural para texto e imagens.
- **Triângulo:** direcional e enérgico. Guia o olhar e sugere movimento ou tensão.
- **Linha e risca:** ritmo e velocidade. A horizontal transmite calma, a diagonal transmite dinamismo.
- **Semicírculo e quarto de círculo:** suavizam uma composição rígida sem deixar de ser geométricos, um favorito dos cartazes modernos.

Um cartaz vertical dividido em dois blocos, com o título de uma palestra alinhado de um dos lados

Uma composição dividida: uma divisão vertical forte, com o texto preso à grelha de um dos lados.

Uma publicação vertical com um número grande a dizer 12 colunas e uma linha de detalhe pequena e alinhada

Um número grande assente na grelha. O contraste de escala entre o número e o detalhe é um clássico do geométrico.

## Ideias de padrões geométricos

Os padrões são o design geométrico no seu momento mais visível. Os clássicos são riscas, xadrezes, pontos, raios, anéis, chevrons e grelhas de linhas. Fica por duas ou três cores, escolhe uma escala e decide se o padrão é o protagonista (um cartaz, um papel de embrulho) ou um fundo discreto, caso em que deves baixar bastante o contraste.

- Riscas diagonais: `repeating-linear-gradient(45deg, #1e3a8a 0 24px, #f5efe3 24px 48px)`
- Riscas 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 quatro: `conic-gradient(from 90deg at 50% 50%, #111827 0deg 90deg, #e5e7eb 90deg 180deg, #111827 180deg 270deg, #e5e7eb 270deg 360deg)`
- Linhas de caderno: `repeating-linear-gradient(0deg, #f8fafc 0 31px, #94a3b8 31px 32px)`

Seis padrões geométricos desenhados só com gradientes CSS. Paragens de cor rígidas (a mesma posição duas vezes) dão arestas nítidas em vez de misturas.

O Art Déco adotou raios, leques e formas em degraus a dourado e preto; o Memphis quebrou a grelha com rabiscos e confetis. [Design Art Déco](https://gradiently.design/pt-pt/guide/art-deco-design) e [design Memphis](https://gradiently.design/pt-pt/guide/memphis-design) são boas fontes se quiseres um padrão com sabor de época.

## Xadrezes, pontos e grelhas em CSS

Alguns padrões precisam que o tamanho do mosaico seja definido à parte com `background-size`, para se repetirem por todo o elemento. Estes três são os mais pedidos. O artigo [padrões css](https://gradiently.design/pt-pt/guide/css-patterns) tem muitos mais, e [gradiente linear repetido](https://gradiently.design/pt-pt/guide/css-repeating-gradient) explica as paragens rígidas ao pormenor.

```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;
}
```

Tabuleiro de xadrez, pontos e papel quadriculado. Muda as cores e o tamanho do mosaico; deixa a estrutura em paz. A diferença de 1px nos pontos suaviza-lhes a aresta.

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

- **Um círculo grande:** um único círculo a ocupar metade de um cartaz, com a data do evento lá dentro.
- **Margem de riscas:** uma faixa de riscas de toldo no topo de uma ementa ou lista de preços, sem mais nenhum padrão.
- **Cantos em quarto de círculo:** um quarto de círculo em cada canto de uma publicação quadrada, em duas cores alternadas.
- **Número na grelha:** um algarismo enorme (um ano, um preço, uma contagem de dias) alinhado à coluna da esquerda, com texto pequeno ao lado.
- **Raios atrás de um produto:** raios de baixo contraste a irradiar de trás de uma garrafa ou caixa num banner de loja.
- **Notas em papel quadriculado:** um carrossel de dicas sobre um fundo de grelha discreta, com uma regra escrita em cada slide.

Cada ideia usa um só recurso geométrico e deixa o resto simples. Costuma bastar para dar a uma publicação um ponto de vista claro, e é fácil de repetir ao longo de uma série inteira.

## Manter os designs geométricos legíveis

### Evita

- Padrão de alto contraste mesmo atrás do texto
- Cinco cores no mesmo padrão
- Formas que quase alinham mas falham a grelha
- Riscas finas que cintilam nos ecrãs
- Misturar três escalas de padrão sem relação

### Faz

- Um bloco liso ou calmo onde há palavras
- Duas ou três cores, uma dominante
- Tudo encaixado na mesma grelha
- Riscas com pelo menos 8 px de largura ao tamanho da publicação
- Uma só escala de padrão, repetida com confiança

Riscas finas e de alto contraste podem cintilar nos ecrãs e virar moiré quando uma app redimensiona a imagem, por isso testa ao tamanho em que as pessoas a vão ver. A ordem geométrica também combina bem com um elemento suave: uma única [forma orgânica](https://gradiently.design/pt-pt/guide/organic-shapes-design) numa grelha rígida traz calor sem quebrar o sistema. No Gradiently, o Designer consegue compor uma publicação numa grelha limpa com o Mark da tua marca e criar a partir dela todos os outros tamanhos, para que o alinhamento sobreviva a cada formato.

## FAQ

### O que é o design geométrico?

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

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

Usa gradientes repetidos com paragens de cor rígidas, como `repeating-linear-gradient(45deg, #1e3a8a 0 24px, #f5efe3 24px 48px)` para riscas. Para xadrezes e pontos, acrescenta `background-size` para definir o mosaico.

### Que grelha devo usar numa publicação do Instagram?

Uma publicação de 1080×1350 funciona bem com margens de 72 pixéis e seis colunas com espaços de 24 pixéis. Usa a mesma grelha em todas as publicações de uma série.

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

A Bauhaus, o Estilo Tipográfico Suíço ou Internacional, o Art Déco e o Memphis recorreram muito a formas geométricas, cada um com um espírito bem diferente.