Forma y profundidad
Papel cortado a mano: esquinas ligeramente irregulares, una fina línea de tinta y, por lo que flota, la dura sombra del papel pegado encima.
En esta página
Esquinas irregulares
Cada esquina tiene su propio radio (6, 10, 6 y 8 px), el mismo en bloques y controles. Ni perfecto ni cuadrado.
border-radius: var(--feitio-radius); /* 6px 10px 6px 8px */La línea de tinta
Es de 1px, en el color del texto. Una línea de pluma, no un marco.
La barra de desplazamiento también es tinta
Delgada, en tinta suave, sobre una pista clara, en cada caja con desplazamiento. Viene lista en el CSS base.
La línea punteada
La línea punteada indica lo que no es contenido fijo: el borde de un área de ejemplo, un lugar para soltar algo arrastrado, un límite que la página muestra para explicar. Dice "esto es un espacio", no "esto es una cosa". Mismo grosor que la línea de tinta (1px), pero en tinta suave.
Do
Un área de solapamiento: la línea punteada indica que algo encaja allí.
Don’t
Un aviso con un marco punteado: parece temporal o roto.
- Cuándo: el área de solapamiento de una subida o un arrastre; el borde de una demostración; un límite dibujado para explicar (como el borde que la rejilla cruza en Espacio).
- Cuándo no: como marco para contenido, para separar secciones (eso es espacio) o para resaltar algo (eso es papel levantado).
Papel levantado
Solo para lo que flota: un menú, una ventana, un aviso llegando. Un contorno de tinta, la superficie más ligera y una sombra dura, desplazada hacia abajo y a la derecha, nunca desenfocada. Al ser fuerte, se reserva para lo que realmente está encima.
Abra el menú: papel elevado, que llega como si estuviera colocado.
Do
Una notación que llega arriba: papel elevado, sombra dura.
Don’t
Sombra desenfocada y esquinas perfectamente redondeadas: cualquier tarjeta de la aplicación.
Do
Lo que está en la página no flota: superficie elevada, nada más.
Don’t
Borde grueso y esquina cuadrada: pesado, y se opone a la línea del lápiz.