Ready
Colors
Our color palette has been thoughtfully selected for usability, accessibility, and the ability to be optimized across different components.
Styles
.bg-color-default
--neutral-0
.bg-color-backdrop
--neutral-50
.bg-color-hover
--neutral-100
.bg-color-disabled
--neutral-200
.bg-color-overlay
.icon-color-default
--neutral-600
.icon-color-subtle
--neutral-400
.icon-color-disabled
--neutral-200
.icon-color-default-inverse
--neutral-0
.icon-color-default-inverse-subtle
--neutral-600
.icon-color-default-inverse-disabled
--neutral-700
.border-color-default
--neutral-300
.border-color-disabled
--neutral-400
.border-color-default-inverse
--neutral-900
.type-color-heading
--neutral-1200
.type-color-default
--neutral-900
.type-color-subtle
--neutral-700
.type-color-disabled
--neutral-500
.type-color-heading-inverse
--neutral-0
.type-color-default-inverse
--neutral-400
.type-color-subtle-inverse
--neutral-600
.type-color-disabled-inverse
--neutral-700
Best Practices
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. ³
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
Don't
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
Don't
Border Color
Dark borders can overwhelm the interface. Subtle lines provide definition without being overbearing. ²
Do
Don't
Tokens
More
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