1
.
Background
Use .bg-color-default as the background color for most pages. White backgrounds help the page content stand out and provides a minimal aesthetic for the UI. ³
2
.
Backdrop
For card layouts, .bg-color-backdrop should be used to help the cards stand out and create a sense of separation between them without over powering the UI. ³
Do
Use .bg-color-backdrop with card-based layouts
Don't
Use custom background colors
3
.
Text Color
Use the text colors to establish content hierarchy.¹ Use lighter color text for less important information and darker color text for more important information.
Do
Use the text color classes to establish hierarchy
Don't
Use the same color for text across the hierarchy
4
.
Border Color
Dark borders can overwhelm the interface. Subtle lines provide definition without being overbearing. ²
Do
Use .border-color-default to help define content areas
Don't
Don't use custom border colors
Additional Reading
7 typography tips for interface design https://uxdesign.cc/7-typography-tips-for-interface-design-b7185e9397c4
UI Design in Practice Series: Containers, Boxes and Borders https://designerup.co/blog/ui-design-tips-boxes-and-borders/
Principles of color in UI Design https://uxplanet.org/principles-of-color-in-ui-design-43708d8512d8
Understanding Icons in UI Design https://uxcel.com/blog/understanding-the-icons-in-ui-design