Border Radius
Our border radius system creates smooth, consistent rounding for UI elements. It ensures visual harmony across components and helps establish a cohesive design language throughout the interface.
Border Radius System
Our border radius system provides three scalable sizes for all components: small, medium, and large. This ensures consistency between buttons, inputs, cards, modals, and other UI elements.
Small (8px)
Small Radius
For inputs, tags, chips
Medium (16px)
Medium Radius
For buttons, cards, alerts
Large (24px)
Large Radius
For large cards, sections
Purpose
- Create visual harmony across all UI elements
- Establish a consistent design language
- Improve usability by softening edges
- Create visual hierarchy through different radius sizes
- Enhance the modern, friendly feel of the interface
Features
- Three scalable sizes for all components
- Consistent application across the design system
- Responsive adaptation for different screen sizes
- Harmonious pairing with elevation system
- Utility classes for easy implementation