.
Use as primary text color on dark surfaces
--pure-white
.
Use as secondary text color on dark surfaces
--cloud-grey
.
Use as tertiary text color on dark surfaces.
--concrete-grey
.
Use as tertiary text color
--smoke-grey
.
Use as secondary text color
--slate-grey
.
Use as primary text color
--charcoal-grey
.
Use as a strong border color
--cloud-grey
.
Use as default border color
--mercury-grey
.
Use as a subtle border color
--fog-grey
.
Use a the default page background
--pure-white
.
Use as a backdrop behind card containers or as a clickable hover state
--alabaster-grey
.
Use to indicate that an iteractive element is disabled.
--pearl-grey
.
Use as the default icon color on dark surfaces
--pure-white
.
Use as disbled icon color
--silver-grey
.
Use as the default icon color
--graphite-grey
1. Background Color
Use pure-white as the background color for most pages. White backgrounds help the page content stand out and provides a minimal aesthetic for the UI. ³
2. Card Layout Background Color
For card layouts, alabaster-grey should be used to help the cards stand out and create a sense of separation between them without over powering the UI. ³
3. Icon Color
Avoid using non-neutral icon colors as they can distract users from the page content or confuse the meaning of the UI. Our default icon color is graphite-grey. ⁴
4. 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.
4. Border Color
Dark borders can overwhelm the interface. Subtle lines provide definition without being overbearing. ² Our default border color is mercury-grey and should be used for most borders.
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