Forma i elevació
Les cantonades s'arrodoneixen segons una escala coherent, les ombres són discretes i s'adapten al tema, i la major part de la separació es fa amb una sola línia fina en comptes d'una ombra.
Radi de cantonada
El radi creix amb la mida de la superfície: el més petit en un xip de codi en línia, el més gran en un full inferior. Són valors literals recurrents als estils dels components, no pas tokens, així que aquí es documenten a mà i es contrasten amb el full d'estils.
| Radi | On |
|---|---|
| 5px | Xips de codi en línia |
| 6px | Botó de copiar codi, xips de criteris WCAG |
| 7px | Xips d'etiqueta de blog (.post-tag) |
| 8px | Botons, distintius (.badge) |
| 9px | Miniatures de posts del feed (llista mòbil) |
| 10px | Blocs de codi, cites en bloc |
| 12px | Targetes, publicacions del feed |
| 14px | Superfícies compactes, targetes de taula a mida |
| 16px | Targeta de publicació principal, targeta de rol per a mòbil |
| 20px | Fulls inferiors (cantonades superiors) |
| pill | CTA de portada, píndoles d'idioma, dock |
El xip d'etiqueta i el distintiu queden separats per un píxel, a 7 i 8 píxels. És una petita incoherència que val la pena mantenir a propòsit o bé eliminar; de moment, la documentació informa dels dos tal com són.
Ombres
Les ombres són suaus i baixes. La regla distintiva és que el mode fosc no enfosqueix: una ombra negra sobre una pàgina fosca no es percep, així que els tokens foscos porten, en canvi, una ombra clara i tènue. Cada token de sota es mostra sobre un escenari clar i un de fosc.
-
--device-shadowClar Fosc L'ombra del marc del telèfon. -
--shadowClar Fosc Elevació de targeta antiga, encara a les targetes i les publicacions del feed. -
--shadow-hoverClar Fosc Elevació antiga en passar-hi per sobre. -
--shadow-cardClar Fosc Elevació de targeta en repòs. -
--shadow-liftClar Fosc Superfícies elevades i estats de passar-hi per sobre. -
--shadow-dockClar Fosc El dock de pestanyes flotant. -
--sheet-shadowClar Fosc Fulls inferiors (ombra projectada cap amunt).
Vores
El separador per defecte és una línia fina d'un píxel del color de la vora, no una ombra. Les targetes, les taules, els fulls i les bandes s'emmarquen tots així. Les ombres es reserven per a coses que floten de debò per sobre de la pàgina, com el dock o un full obert.