Border widths
Our border widths are mainly categorized by Element type and Size.
Given the nature of Figma variables, we cannot offer pre-made border styles, our borders are composed by our Border colors and widths detailed below.
Border Width / container / edges
border_width
The recommended border width for the edges of containers, like cards or menus or popovers.
Border Width / container / divider
border_width
The recommended border width for the dividers within containers, like cards or menus or popovers.
Border Width / focus_outline / sm
border_width
The recommended width of the focus outline fo small-sized components, like the stars on a rating component.
Border Width / focus_outline / md
border_width
The recommended width of the focus outline fo medium-sized components, like the stars on a checkbox
border_width
The recommended border width for the edges of text-based inputs, like textfields or text areas.
border_width
The recommended border width for the dividers within text-based inputs, like the textfields or textareas.
border_width
The recommended border width for handles on click inputs, like the habdle of a toggle.
Border Width / interactive / divider / lg
border_width
The default border width for the dividers within interactive components, like the ones on an action button.
Border Width / interactive / divider / sm
border_width
The default border width for the dividers within interactive components, like the ones on an action button.
Border Width / interactive / edges
border_width
The default border width for the edges of interactive components, like the ones on a tertiary(or outlined) button.