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.

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.

• 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).
• 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.

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