Foundations

Shape

Square corners on the web, capsules for pills and avatars, and the native radius scale.

Web: square by default

The web is square: cards, fields, buttons, menus and dialogs have no radius. Capsules stay round for status pills, badges, avatars and the live dot. Square corners are the web signature; native apps follow the platform.

Card, field, buttonStatus pill

Native radius scale

The native scale mirrors Material 3 so Android maps one to one.

  • none · 0
  • xs · 4
  • sm · 8
  • md · 12
  • lg · 16
  • xl · 20
  • 2xl · 28
  • 3xl · 32
  • 4xl · 48
  • full · full