01 Fundamentos · 08

Composición

Profundidad sin drama. Las superficies escalan en tono, los bordes se quedan finos y cada contenedor hace eco del icono.

Elevación sin sombras

Las sombras proyectadas están prohibidas. La profundidad se expresa con pasos de tono de superficie más bordes finos de 1px. Los overlays pueden usar un velo funcional al 45–60% — la única “sombra” permitida.

Geometría

• Contenedores: radio de 20px — el radio de esquina interior de la marca.
• Controles: un radio para todo botón — 8px, todos los tamaños. La píldora se reserva solo para el campo de búsqueda.
• El notch es universal: cada contenedor cuadra exactamente una esquina — la superior derecha — contra su radio, haciendo eco del isotipo. Tarjetas, alertas, modales, ventanas de chat, tiles de stats, tooltips. Los controles mantienen 8px uniforme: el notch marca contenedores, no controles.
• Un cuadrado de acento puede asentarse en la esquina del notch, codificando el módulo del tile. Un dashboard se lee como un campo de isotipos.

La escalera, aplicada

1. Fondo — la hoja más profunda, detrás de todo.
2. Tile — el contenido flota sobre el fondo en contenedores con muesca, un paso de tono arriba. Ese paso es la elevación.
3. Pozo — las áreas interactivas o agrupadas se hunden un paso dentro de un tile: campos de texto, lienzos de chat, pistas de controles segmentados.

Un pozo nunca se asienta directo sobre el fondo. Dos niveles adyacentes nunca comparten tono.

Detalles de firma

• Los avatares siguen la anatomía del tile: cuadrado redondeado con la esquina superior derecha recta; el indicador de estado es un cuadrado — el punto — asentado en esa esquina, nunca un punto circular.
• El switch es el punto deslizándose: un pulgar cuadrado sobre una pista de 8px. Apagado descansa sobre un pozo; encendido se desliza a la derecha hacia un campo Bugambilia. Nunca una pista de píldora, nunca una perilla circular, nunca verde.
• El progreso es Rosa: una barra, un relleno Rosa sobre una pista de pozo. La barra nunca cambia de color — una tarea que falla lo dice en texto, nunca recoloreando la barra.

Densidad y aire

El espacio en blanco generoso es un rasgo de marca — la calma de Barragán. Los tiles respiran con 20–24px de padding; las retículas usan brechas de 16px. Entre bloques: 24px entre variantes del mismo patrón, 48px entre patrones distintos. El texto de lectura se queda en una columna angosta. Las secciones respiran — no comprimas para que quepa.