Back to top Close
Consistent border radius and stroke width values used throughout the design system. These values ensure visual hierarchy and cohesion across all UI elements.
Border radius values for different use cases. Use 999px for circles/pills and 0px for sharp corners.
Location: Site Config → Theme → Border → Radius (theme.border.radius)
None
0px
SM
10px
MD
40px
LG
60px
Full
999px
Small (10px)
Subtle rounding for form fields, small cards, badges, and secondary UI elements.
Medium (40px)
Standard rounding for buttons, cards, modals, and primary interactive elements. This is the default.
Large (60px)
Dramatic rounding for hero sections, large feature cards, and prominent UI elements.
Border stroke width values for consistent visual hierarchy. Values are in pixels.
Location: Site Config → Theme → Border → Stroke (theme.border.stroke)
SM
1px
MD
2px
LG
4px
Small (1px)
Medium (2px)
Large (4px)
Small (1px)
Subtle borders for form fields, dividers, accordion borders, table cells, and secondary UI elements.
Medium (2px)
Standard borders for buttons, tabs, focus states, file inputs, avatar outlines, and primary interactive elements.
Large (4px)
Accent borders for notice highlights (left border), content tool wrappers, and emphasis elements.