Hugis at elevation

Ang mga sulok ay bumibilog sa isang consistent na scale, ang mga shadow ay tahimik at theme-aware, at ang karamihan ng paghihiwalay ay ginagawa gamit ang isang hairline sa halip na isang shadow.

Corner radius

Ang radius ay umaakyat kasabay ng laki ng surface: ang pinakamaliit sa isang inline code chip, ang pinakamalaki sa isang bottom sheet. Ang mga ito ay paulit-ulit na literal na value sa mga component style sa halip na mga token, kaya nakadokumento ang mga ito rito nang manu-mano at sinusuri laban sa stylesheet.

5px
8px
12px
16px
20px
Radius Saan
5px Mga inline code chip
6px Copy button ng code, WCAG criterion chips
7px Mga blog tag chip (.post-tag)
8px Mga button, badge (.badge)
9px Thumbnails ng feed posts (mobile list)
10px Mga code block, blockquote
12px Mga card, feed post
14px Mga compact na surface, bespoke na table card
16px Lead post card, mobile role card
20px Mga bottom sheet (itaas na sulok)
pill Mga hero CTA, language pill, dock

Ang tag chip at ang badge ay may isang pixel na pagitan, sa 7 at 8 pixel. Ito ay isang maliit na hindi pagkakatugma na sulit na panatilihin nang sinasadya o isara; sa ngayon, iniuulat ng mga dokumento ang dalawa ayon sa kung paano sila naka-ship.

Mga shadow

Ang mga shadow ay malambot at mababa. Ang natatanging rule ay hindi nagdidilim ang dark mode: ang isang itim na shadow sa isang madilim na pahina ay mababasa bilang wala, kaya ang mga dark token ay may dalang mahinang light na shadow sa halip. Ang bawat token sa ibaba ay ipinapakita sa isang light at isang dark na stage.

  • --device-shadow Light Dark Ang drop shadow ng phone frame.
  • --shadow Light Dark Legacy na card lift, nasa mga card at feed post pa rin.
  • --shadow-hover Light Dark Legacy na hover lift.
  • --shadow-card Light Dark Resting na card elevation.
  • --shadow-lift Light Dark Mga nakataas na surface at hover state.
  • --shadow-dock Light Dark Ang lumulutang na tab dock.
  • --sheet-shadow Light Dark Mga bottom sheet (shadow na paitaas).

Mga border

Ang default na separator ay isang one-pixel na hairline sa border color, hindi isang shadow. Ang mga card, table, sheet at band ay lahat naka-frame nang ganito. Ang mga shadow ay nakalaan para sa mga bagay na talagang lumulutang sa itaas ng pahina, tulad ng dock o isang bukas na sheet.