Border
Consistent border radius and stroke width values used throughout the design system. These values ensure visual hierarchy and cohesion across all UI elements.
Radius
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)
Sizes
None
0px
SM
10px
MD
40px
LG
60px
Full
999px
Usage Guidelines
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.
Stroke
Border stroke width values for consistent visual hierarchy. Values are in pixels.
Location: Site Config → Theme → Border → Stroke (theme.border.stroke)
Sizes
SM
1px
MD
2px
LG
4px
As Dividers / Lines
Small (1px)
Medium (2px)
Large (4px)
Usage Guidelines
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.
