# Minimalismo

Também chamado de: web design minimalista, menos é mais, UI limpa, design de espaço em branco  
Era: atemporal; ondas na web em 2008 (Apple), 2013 (flat), 2019 (Linear/Notion), em curso  
Página: https://designforai.dev/pt/style/minimalism

## Traços

- pouquíssimos elementos; cada um tem uma função
- uma família tipográfica, dois tamanhos, dois pesos, uma cor de acento
- o espaço em branco carrega a hierarquia; sem caixas, sem divisores a menos que essenciais
- quase sempre preto sobre branco ou quase branco, filetes finos
- raio pequeno e preciso (4-8px) ou nenhum; sombras quase invisíveis
- imagens são escassas e grandes quando aparecem
- movimento sutil: opacidade e translate de 4px, 150-250ms

Paleta: #ffffff página, #111111 texto, #6b7280 secundário, #e5e7eb filete, #2563eb acento único

Tipografia: Geist, Helvetica Neue ou system-ui; títulos 600 a 32-56px com -0.02em, corpo 400 a 16-17px, line-height 1.6; no máximo 4 tamanhos no site inteiro

## Faça

- apague qualquer coisa que não mude o que o usuário faz em seguida
- alinhe a uma grade de 8px e a uma largura de leitura de 640-720px
- deixe o tamanho do tipo e o espaçamento fazerem a hierarquia em vez de cor e caixas

## Evite

- não adicione ícones ao lado de cada título
- não use cards nem bordas para agrupar; use espaço
- não use mais de uma cor de acento nem gradiente

Conhecido por: Apple.com, Notion, Linear (modo claro), Muji

## Semente CSS

```css
:root{--bg:#ffffff; --fg:#111111; --muted:#6b7280; --accent:#2563eb; --line:#e5e7eb; --radius:6px; --shadow:none; --font:'Geist',system-ui,sans-serif}
```

## Prompt

Construa o site em minimalismo estrito. Fundo #ffffff, texto #111111, secundário #6b7280, filete #e5e7eb, um acento #2563eb usado só em links e no botão primário. Fonte Geist: exatamente quatro tamanhos - 48px 600 (h1, -0.02em), 24px 600 (h2), 16px 400 (corpo, line-height 1.6), 13px 400 (meta). Coluna de conteúdo 680px, padding da página 24px, seções separadas por 96px de espaço e nada mais (sem filetes, sem fundos). Sem cards, sem ícones, sem sombras, sem gradientes. Botões: 40px de altura, raio 6px, #111111 sólido com texto branco; botões secundários são links de texto simples. Imagens, quando usadas, ocupam a largura total da coluna com raio 8px e sem borda. A nav é o logo à esquerda e três links de texto à direita. Movimento: 150ms de opacidade no hover; nada anima no scroll.