Overview
Using color in design refers to the intentional selection and application of hues, shades, and tones to evoke specific emotions, convey meaning, and enhance visual communication. It involves understanding color theory, psychology, and cultural associations to create impactful and visually appealing designs that resonate with the intended audience.
Backgrounds
We have three colors available to use for backgrounds. The default background is background--primary (white). background--secondary can be used as a background, but should be used sparingly. A secondary background provides a strong division between sections and content.
Avoid the use of color backgrounds when spacing can easily create a separation of content. Using a color background runs the risk of creating awkward shapes and forms which can distract and take away focus. Use minimally and be aware of the impact that it may cause.
Dividers and borders
The color of a divider is dependent on the usage and its relationship to other elements within your design.
Text
The text variables provide a palette to stylize written content like sentences, paragraphs, or captions. The palette supports a hierarchy of content from most important to least important.
Link
The link variable provides a palette to stylize typography to indicate it is a link. The palette supports the use of the color for states.
Surface colors
The chrome colors provides a palette that is intended to stylize the product’s containers or chrome elements. These colors are used to define the background and the dividers that make up the product container.
Chrome colors
The chrome colors provides a palette that is intended to stylize the product’s containers or chrome elements. These colors are used to define the background and the dividers that make up the product container.
