.
type-color-pure-white
Use as primary text color on dark surfaces
--pure-white
.
type-color-cloud-grey
Use as secondary text color on dark surfaces
--cloud-grey
.
type-color-concrete-grey
Use as tertiary text color on dark surfaces.
--concrete-grey
.
type-color-smoke-grey
Use as tertiary text color
--smoke-grey
.
type-color-slate-grey
Use as secondary text color
--slate-grey
.
type-color-charcoal-grey
Use as primary text color
--charcoal-grey
.
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
.
bg-pure-white
Use a the default page background
--pure-white
.
bg-alabaster-grey
Use as a backdrop behind card containers or as a clickable hover state
--alabaster-grey
.
bg-peal-grey
Use to indicate that an iteractive element is disabled.
--pearl-grey
.
icon-pure-white
Use as the default icon color on dark surfaces
--pure-white
.
icon-silver-grey
Use as disbled icon color
--silver-grey
.
icon-graphite-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