Forma y elevación
Las esquinas se redondean con una escala coherente, las sombras son discretas y sensibles al tema, y casi toda la separación se hace con una sola línea fina en vez de con una sombra.
Radio de esquina
El radio crece con el tamaño de la superficie: el más pequeño en un chip de código en línea, el más grande en un panel inferior. Son valores literales que se repiten en los estilos de los componentes en vez de tokens, así que aquí se documentan a mano y se cotejan con la hoja de estilos.
| Radio | Dónde |
|---|---|
| 5px | Chips de código en línea |
| 6px | Botón de copiar código, chips de criterios WCAG |
| 7px | Chips de etiqueta del blog (.post-tag) |
| 8px | Botones, insignias (.badge) |
| 9px | Miniaturas de posts del feed (lista móvil) |
| 10px | Bloques de código, citas |
| 12px | Tarjetas, posts del feed |
| 14px | Superficies compactas, tarjetas de tabla a medida |
| 16px | Tarjeta de post destacado, tarjeta de rol en móvil |
| 20px | Paneles inferiores (esquinas superiores) |
| pill | CTA principales, píldoras de idioma, dock |
El chip de etiqueta y la insignia están a un píxel de distancia, a 7 y 8 píxeles. Es una pequeña inconsistencia que conviene mantener a propósito o cerrar; por ahora la documentación refleja ambos tal como se publican.
Sombras
Las sombras son suaves y tenues. La regla distintiva es que el modo oscuro no oscurece: una sombra negra sobre una página oscura no se ve, así que los tokens oscuros llevan en su lugar una sombra clara y sutil. Cada token de abajo se muestra en un escenario claro y en uno oscuro.
-
--device-shadowClaro Oscuro La sombra proyectada del marco del teléfono. -
--shadowClaro Oscuro Elevación de tarjeta heredada, todavía en tarjetas y posts del feed. -
--shadow-hoverClaro Oscuro Elevación heredada al pasar el cursor. -
--shadow-cardClaro Oscuro Elevación de tarjeta en reposo. -
--shadow-liftClaro Oscuro Superficies elevadas y estados al pasar el cursor. -
--shadow-dockClaro Oscuro El dock flotante de pestañas. -
--sheet-shadowClaro Oscuro Paneles inferiores (sombra proyectada hacia arriba).
Bordes
El separador por defecto es una línea fina de un píxel en el color de borde, no una sombra. Las tarjetas, las tablas, los paneles y las bandas se enmarcan así. Las sombras se reservan para lo que de verdad flota sobre la página, como el dock o un panel abierto.