# Desenhado à mão / sketch

Também chamado de: UI esboçada, design doodle, site desenhado à mão, UI trêmula, estilo Excalidraw  
Era: 2010 (wireframes do Balsamiq), 2020 em diante (Excalidraw, tldraw, doodles do Notion)  
Página: https://designforai.dev/pt/style/hand-drawn-sketch

## Traços

- linhas que tremem: paths SVG com leve rugosidade, bordas com traço duplo
- fontes manuscritas para títulos e labels; uma sans limpa para texto longo
- texturas de marcador ou lápis, preenchimentos hachurados em vez de cor sólida
- setas, círculos, sublinhados e asteriscos desenhados à mão ao redor do conteúdo
- fundo branco papel ou cinza claro, linhas em preto tinta ou azul escuro
- algumas cores de marcador: vermelho, azul, marca-texto amarelo
- movimento: as linhas se desenham sozinhas (stroke-dashoffset), os elementos balançam levemente no hover

Paleta: #fffdf7 papel, #1e1e1e tinta, #1971c2 azul marcador, #e03131 vermelho marcador, #ffec99 marca-texto, #868e96 cinza lápis

Tipografia: Virgil (fonte do Excalidraw, gratuita), Caveat, Patrick Hand, Architects Daughter ou Gochi Hand para títulos e labels a 24-48px; Nunito ou Karla a 16-17px para o corpo

## Faça

- desenhe as bordas como rects SVG inline com um filtro rugoso (feTurbulence + feDisplacementMap, scale 2-3) ou use paths no estilo rough.js
- use hachura (repeating-linear-gradient diagonal a 45deg, linhas de 2px) como preenchimento das áreas destacadas
- anime stroke-dashoffset para as linhas principais se desenharem em 600-900ms

## Evite

- não componha parágrafos numa fonte manuscrita
- não use bordas CSS perfeitamente retas ao lado de elementos esboçados; quebra a ilusão
- não adicione sombras projetadas; use um segundo traço deslocado no lugar

Conhecido por: Excalidraw, tldraw, Balsamiq, doodles de marketing do Notion, XKCD

## Semente CSS

```css
:root{--bg:#fffdf7; --fg:#1e1e1e; --accent:#1971c2; --accent2:#e03131; --highlight:#ffec99; --radius:8px; --stroke:2px; --font:'Nunito',sans-serif; --font-hand:'Caveat',cursive}
```

## Prompt

Construa o site em estilo sketch desenhado à mão. Fundo #fffdf7, tinta #1e1e1e, azul marcador #1971c2, vermelho marcador #e03131, marca-texto #ffec99, cinza lápis #868e96. Fontes: Caveat 700 para títulos a 48/34/24px e para todos os labels e botões, Nunito 400 a 17px line-height 1.6 para o corpo. As bordas de cards e botões são retângulos SVG inline com traço de tinta de 2px, levemente arredondados (rx 8), passados por um filtro SVG (feTurbulence baseFrequency 0.02 mais feDisplacementMap scale 3) para as arestas tremerem; desenhe um segundo traço deslocado 2px a 50% de opacidade para a linha dupla de lápis. Destaque frases-chave com um sublinhado #ffec99 desenhado à mão (path SVG, 8px de espessura, levemente irregular). Adicione setas desenhadas à mão e anotações circuladas em #e03131 apontando para a chamada para ação. Os preenchimentos usam hachura a 45deg (repeating-linear-gradient, linhas de 2px #1e1e1e a 20% de opacidade). Sem box-shadow, sem gradientes. Movimento: as linhas se desenham via stroke-dashoffset ao longo de 800ms no scroll; os botões balançam 1deg no hover.