.
border-cloud-grey
Use as a strong border color
--cloud-grey
.
border-mercury-grey
Use as default border color
--mercury-grey
.
border-fog-grey
Use as a subtle border color
--fog-grey
1. Use sparingly
Overusing borders can create visual clutter and detract from the content. Use them sparingly to group related elements, define clear hierarchy, and guide users' attention. ¹
2. Thinkness
Thick borders can overwhelm the interface. Subtle lines provide definition without being overbearing. ²
3. Purposeful placement
Every border should have a clear purpose. Don't add them simply for decoration.
4. Border radius
Rounded corners can soften the look of borders and add a touch of personality. Experiment with different levels of curvature to find the right balance for your design. ³
Additional Reading
How to Declutter your Design https://medium.com/wdstack/how-to-declutter-your-design-88cbd9e45015#:~:text=At%20first%2C%20it%20seems%20that,add%20to%20the%20visual%20clutter%E2%80%A6
UI Design in Practice Series: Containers, Boxes and Borders https://designerup.co/blog/ui-design-tips-boxes-and-borders/
All you need to know about UI design Shapes and Objects https://hype4.academy/articles/design/all-you-need-to-know-about-ui-design-shapes-and-objects