# Forma e profundidade

Papel cortado à mão: cantos levemente irregulares, um traço fino de tinta e, para o que flutua, uma sombra dura de papel colado por cima.

## Cantos irregulares

Cada canto tem o seu raio (6, 10, 6 e 8 px), o mesmo em blocos e controles. Nem perfeito, nem reto.

```css
border-radius: var(--feitio-radius);  /* 6px 10px 6px 8px */
```

## O traço de tinta

Tem 1px, na cor do texto. É uma linha de caneta, não uma moldura.

### A barra de rolagem também é de tinta

Fina, na tinta suave, sobre um trilho transparente, em toda caixa que rola. Vem pronta no CSS base.

### O traço tracejado

O tracejado marca o que não é conteúdo fixo: a borda de uma área de exemplo, um lugar para soltar algo que se arrasta, um limite que a página mostra para explicar. Ele diz "isto é um espaço", não "isto é uma coisa". Mesma espessura do traço de tinta (1px), na tinta suave.

Faça assim

Solte o arquivo aqui

Uma área para soltar: o tracejado diz que ali cabe algo.

Não faça

Lembrete salvo às 14h32.

Um aviso com moldura tracejada: parece provisório, ou quebrado.

-   **Quando:** a área de soltar de um upload ou de um arrastar; a borda de uma demonstração; um limite desenhado para explicar (como a borda que o grid ultrapassa em [Espaço](/pt/design/espaco/#grid)).
-   **Quando não:** como moldura de conteúdo, para separar seções (isso é o espaço) ou para destacar algo (isso é o papel sobreposto).

## Papel sobreposto

Só para o que flutua: menu, janela, um aviso que chega. Contorno de tinta, a superfície mais clara e uma sombra dura, deslocada para baixo e para a direita, nunca borrada. Por ser forte, fica reservado ao que de fato está por cima.

-   Mais antigos primeiro
-   Responsável
-   Situação

Abra o menu: papel sobreposto, chegando como papel colocado.

Faça assim

Mudança aprovada.

Um aviso que chega por cima: papel sobreposto, sombra dura.

Não faça

Mudança aprovada.

Sombra borrada e canto redondo perfeito: o cartão de qualquer aplicativo.

Faça assim

Um bloco na página: sem sombra.

O que está na página não flutua: superfície alta e só.

Não faça

Borda grossa em tudo.

Borda grossa e canto reto: pesado, e briga com o traço de caneta.