Radii & Borders
Border radii and border widths for consistent component styling.
Border Radii
Proportional to font size for scale-aware components.
--g-radius-0 Extra small--g-radius-1 Small--g-radius-2 Medium--g-radius-3 Large--g-radius-4 Extra large--g-radius-window Window/modalAsymmetric Corners (Buttons)
Distinctive corner pattern for buttons and CTAs.
Asymmetric Button
--button-radius-top-left: 4px --button-radius-top-right: 0px --button-radius-bottom-left: 0px --button-radius-bottom-right: 4pxBorder Widths
--g-border-width-thin ~1px (proportional)--g-border-width-base ~2px (proportional)--g-border-width-thick ~3px (proportional)