Object styles in product
Object styles provide structure and communicate shared behavior between elements.
Border width is used to define structure and separation. View all border tokens.
Subtle - 0.5px
The subtle border width is reserved for navigation elements like the tab menu on compact screens.
Default - 1px
The default border width is used to illustrate the boundary of components and divide content.
Strong - 2px
Strong borders are used to emphasize elements that primarily use borders for their structure, like tabs. Focus outlines also use the strong border width.
Radius is used widely throughout our system. Each radius size is intentionally applied to select elements. View all radius tokens.
Default - 8px
The default radius is the most common radius size. It’s applied to input fields and most component containers. It’s also applied to images with short edges smaller than 80px.
Large - 16px
The large radius applies to popovers, modal containers, and images with short edges 80px and larger.
Extra large - 24px
The extra large radius applies to more expressive components like banner dialogs.
Full - 50%
Full rounding is reserved for buttons, notification badges, and priority signals. This shape is meant to draw attention.
Circle
Circles are reserved for avatars and icon buttons.
Drop shadow is used for transient and fixed elements. View all shadow tokens.
Subtle
The subtle shadow is only used in persistent navigation elements. This provides separation without being distracting.
Strong
The strong shadow is reserved for transient elements, like popovers, snackbars, and tooltips. It remains the same for all components and screen sizes.
