diff --git a/docs/assets/color/color-a11y-color-contrast-body-code-text.svg b/docs/assets/color/color-a11y-color-contrast-body-code-text.svg new file mode 100644 index 0000000000..ff834024e5 --- /dev/null +++ b/docs/assets/color/color-a11y-color-contrast-body-code-text.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/docs/assets/color/color-a11y-color-contrast-layering.svg b/docs/assets/color/color-a11y-color-contrast-layering.svg new file mode 100644 index 0000000000..9d4b202cbb --- /dev/null +++ b/docs/assets/color/color-a11y-color-contrast-layering.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/assets/color/color-a11y-color-contrast-links.svg b/docs/assets/color/color-a11y-color-contrast-links.svg new file mode 100644 index 0000000000..acade2e75d --- /dev/null +++ b/docs/assets/color/color-a11y-color-contrast-links.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/docs/assets/color/color-a11y-contrast-body-code-text.png b/docs/assets/color/color-a11y-contrast-body-code-text.png deleted file mode 100644 index d5b644ea77..0000000000 Binary files a/docs/assets/color/color-a11y-contrast-body-code-text.png and /dev/null differ diff --git a/docs/assets/color/color-a11y-contrast-layering.png b/docs/assets/color/color-a11y-contrast-layering.png deleted file mode 100644 index 4cd5d27a28..0000000000 Binary files a/docs/assets/color/color-a11y-contrast-layering.png and /dev/null differ diff --git a/docs/assets/color/color-a11y-contrast-links.png b/docs/assets/color/color-a11y-contrast-links.png deleted file mode 100644 index bbe72e6d36..0000000000 Binary files a/docs/assets/color/color-a11y-contrast-links.png and /dev/null differ diff --git a/docs/assets/color/color-a11y-red-text-on-bgs.svg b/docs/assets/color/color-a11y-red-text-on-bgs.svg new file mode 100644 index 0000000000..85ac135645 --- /dev/null +++ b/docs/assets/color/color-a11y-red-text-on-bgs.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/assets/color/color-a11y-using-color-alone.png b/docs/assets/color/color-a11y-using-color-alone.png deleted file mode 100644 index 5e01502240..0000000000 Binary files a/docs/assets/color/color-a11y-using-color-alone.png and /dev/null differ diff --git a/docs/assets/color/color-a11y-using-color-alone.svg b/docs/assets/color/color-a11y-using-color-alone.svg new file mode 100644 index 0000000000..48d2db82e8 --- /dev/null +++ b/docs/assets/color/color-a11y-using-color-alone.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/assets/color/color-communication.svg b/docs/assets/color/color-communication.svg new file mode 100644 index 0000000000..3edea50837 --- /dev/null +++ b/docs/assets/color/color-communication.svg @@ -0,0 +1,134 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/assets/color/color-semantic-tokens.svg b/docs/assets/color/color-semantic-tokens.svg new file mode 100644 index 0000000000..bcfc1821bc --- /dev/null +++ b/docs/assets/color/color-semantic-tokens.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/assets/color/color-usage-backgrounds-canvas.svg b/docs/assets/color/color-usage-backgrounds-canvas.svg new file mode 100644 index 0000000000..0c72af154f --- /dev/null +++ b/docs/assets/color/color-usage-backgrounds-canvas.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/assets/color/color-usage-basic-text.svg b/docs/assets/color/color-usage-basic-text.svg new file mode 100644 index 0000000000..287f0ed02f --- /dev/null +++ b/docs/assets/color/color-usage-basic-text.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/assets/color/color-usage-best-practice-2-do.svg b/docs/assets/color/color-usage-best-practice-2-do.svg new file mode 100644 index 0000000000..68e6fa6a23 --- /dev/null +++ b/docs/assets/color/color-usage-best-practice-2-do.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/docs/assets/color/color-usage-best-practice-2-dont.svg b/docs/assets/color/color-usage-best-practice-2-dont.svg new file mode 100644 index 0000000000..87cc407b8b --- /dev/null +++ b/docs/assets/color/color-usage-best-practice-2-dont.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/docs/assets/color/color-usage-best-practices-1-do.svg b/docs/assets/color/color-usage-best-practices-1-do.svg new file mode 100644 index 0000000000..9f524702ea --- /dev/null +++ b/docs/assets/color/color-usage-best-practices-1-do.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/assets/color/color-usage-best-practices-1-dont.svg b/docs/assets/color/color-usage-best-practices-1-dont.svg new file mode 100644 index 0000000000..d59fc0200c --- /dev/null +++ b/docs/assets/color/color-usage-best-practices-1-dont.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/assets/color/color-usage-brand-red.svg b/docs/assets/color/color-usage-brand-red.svg new file mode 100644 index 0000000000..2ccfff2f21 --- /dev/null +++ b/docs/assets/color/color-usage-brand-red.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/assets/color/color-usage-icons.svg b/docs/assets/color/color-usage-icons.svg new file mode 100644 index 0000000000..5a12c0c13c --- /dev/null +++ b/docs/assets/color/color-usage-icons.svg @@ -0,0 +1,328 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/assets/color/color-usage-interactivity.svg b/docs/assets/color/color-usage-interactivity.svg new file mode 100644 index 0000000000..309251191f --- /dev/null +++ b/docs/assets/color/color-usage-interactivity.svg @@ -0,0 +1,166 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/assets/color/color-usage-layering-theme-dark.svg b/docs/assets/color/color-usage-layering-theme-dark.svg new file mode 100644 index 0000000000..3bd5d4e357 --- /dev/null +++ b/docs/assets/color/color-usage-layering-theme-dark.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/docs/assets/color/color-usage-layering-theme-light.svg b/docs/assets/color/color-usage-layering-theme-light.svg new file mode 100644 index 0000000000..edd26d4983 --- /dev/null +++ b/docs/assets/color/color-usage-layering-theme-light.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/docs/assets/color/color-usage-red-orange.svg b/docs/assets/color/color-usage-red-orange.svg new file mode 100644 index 0000000000..37c9403040 --- /dev/null +++ b/docs/assets/color/color-usage-red-orange.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/assets/color/color-usage-status.svg b/docs/assets/color/color-usage-status.svg new file mode 100644 index 0000000000..1eca5caaf6 --- /dev/null +++ b/docs/assets/color/color-usage-status.svg @@ -0,0 +1,162 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/assets/color/color-usage-surface.svg b/docs/assets/color/color-usage-surface.svg new file mode 100644 index 0000000000..5ee7d0f21b --- /dev/null +++ b/docs/assets/color/color-usage-surface.svg @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/assets/color/contrast-layering.png b/docs/assets/color/contrast-layering.png deleted file mode 100644 index 47fd131c13..0000000000 Binary files a/docs/assets/color/contrast-layering.png and /dev/null differ diff --git a/docs/assets/color/using-color-alone.png b/docs/assets/color/using-color-alone.png deleted file mode 100644 index 84ce1d60e3..0000000000 Binary files a/docs/assets/color/using-color-alone.png and /dev/null differ diff --git a/docs/foundations/color/accessibility.md b/docs/foundations/color/accessibility.md index beacfcb4e0..a26aed629e 100644 --- a/docs/foundations/color/accessibility.md +++ b/docs/foundations/color/accessibility.md @@ -21,23 +21,29 @@ subnav: ## Approach -At our core, we believe in creating interactions and experiences that are -inclusive. This means ensuring that all Red Hat digital properties are -accessible to everyone. +At our core, we believe in creating interactions and experiences that are inclusive. This means ensuring that all Red Hat digital properties are accessible to everyone. ## Using color alone When considering methods of communication or feedback, do not use color or location alone. Ensure there is text, an icon, an underline, or other visual -cue to communicate meaning. Consider how these elements look to a -color blind user. +cue to communicate meaning. + +Consider how these elements look to a color blind user:
- Dialog with a gray leave button, a form field with a gray bottom border, and progress steps in gray without labels + + Dialog with a gray leave button, a form field with a gray bottom border, and progress steps in gray without labels +
A simulation of what a color blind user might see when only color is used to communicate meaning.
@@ -53,51 +59,39 @@ code text (non-bold text of **at least 24px** and bold text of **at least 19px**) must have a contrast ratio of 3:1. - Two examples of dark text on light backgrounds and two examples of light text on dark backgrounds. + Two examples of dark text on light backgrounds and two examples of light text on dark backgrounds ### Red text on backgrounds -Our primary brand color is known as Red Hat red (`#E00`). It has many -applications, but on the web, it does not pass color contrast against all -background colors, especially text at small sizes. - -If red text cannot be used, use dark gray or black text against lighter -backgrounds, or light gray or white text against darker backgrounds. If you have -questions about using other red colors, contact the [Brand team][brandteam]. +Red is our primary brand color. It has many applications, but on the web, it does not pass color contrast against all background colors, especially text at small sizes. - -

Warning

- Black is usually a brand-only color, but it can be used very sparingly for backgrounds only if gray-95 cannot be used. - +If red text cannot be used, use dark gray or black text against lighter backgrounds, or light gray or white text against darker backgrounds. If you have questions about using our other red colors, contact the Brand team. - Several examples of red text over light and dark themed backgrounds showing some that pass and some that fail. There is also an example of dark gray text and black text against a light background as well as an example of light gray text and white text on a dark background. + Several examples of red text over light and dark themed backgrounds showing some that pass and some that fail. There is also an example of dark gray text and black text against a light background as well as an example of light gray text and white text on a dark background. -#### WCAG requirements +#### Red text WCAG requirements -WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text -and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for -graphics and UI components like form input borders. Use the table below to -confirm you are using color contrast correctly before using red text. +WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and UI elements like form input borders. Use the table below to confirm you are using color contrast correctly before using red text. The font sizes that are considered normal and large are as follows: -- normal: non-bold text under 18pt/24px and bold text under 14pt/19px -- large: non-bold text of at least 18pt/24px and bold text of at least 14pt/19px +- **Normal** - non-bold text under 18pt/24px and bold text under 14pt/19px +- **Large** - non-bold text of at least 18pt/24px and bold text of at least 14pt/19px {% macro p(content='WCAG AA: Pass') %}{{ content }}{% endmacro %} {% macro f(content='WCAG AA: Fail') %}{{ content }}{% endmacro %} -| Background color | Contrast ratio | Normal text | Large text | Objects and UI components | +| Background color | Contrast ratio | Normal text | Large text | Objects and UI elements | | --------------------- | -------------- | ----------- | ---------- | ------------------------- | -| `white` (`#fff`) | {{ p(4.53) }} | {{ p() }} | {{ p() }} | {{ p() }} | -| `gray-10` (`#f2f2f2`) | {{ f(4.04) }} | {{ f() }} | {{ p() }} | {{ p() }} | -| `gray-20` (`#e0e0e0`) | {{ f(4.04) }} | {{ f() }} | {{ p() }} | {{ p() }} | +| `white` (`#fff`) | {{ p(4.35) }} | {{ p() }} | {{ p() }} | {{ p() }} | +| `gray-10` (`#f2f2f2`) | {{ p(4.04) }} | {{ f() }} | {{ p() }} | {{ p() }} | +| `gray-20` (`#e0e0e0`) | {{ f(3.43) }} | {{ f() }} | {{ p() }} | {{ p() }} | | `gray-70` (`#383838`) | {{ f(2.58) }} | {{ f() }} | {{ f() }} | {{ f() }} | | `gray-80` (`#292929`) | {{ f(3.21) }} | {{ f() }} | {{ p() }} | {{ p() }} | | `gray-90` (`#1f1f1f`) | {{ f(3.63) }} | {{ f() }} | {{ p() }} | {{ p() }} | @@ -110,18 +104,17 @@ The font sizes that are considered normal and large are as follows: To differentiate text links from their surrounding text without relying on color contrast, links in all states must be underlined. Links isolated within visually -distinct sections (e.g., navigation menus) or with additional visual cues (e.g., -CTA arrows) are exempt from this requirement, though you may still add +distinct sections (like navigation menus) or links with additional visual cues (like call to action arrows) are **exempt from this requirement**, although you can still add underlines at your discretion. - - Contrast ratio of a blue link next to black text and an example of a link's darker blue, underlined hover state + + Contrast ratio of a blue link in a paragraph with black text -### Graphical objects and UI components +### Graphical objects and UI elements -Graphical objects and UI components like charts and infographics should have a +Graphical objects and UI elements like charts and infographics should have a contrast ratio of at least 3:1. If color is the only way to distinguish between inline controls and surrounding text, the contrast ratio between the control and text must be at least 3:1. @@ -131,20 +124,13 @@ text must be at least 3:1. ### Layering -You can layer colors on light or dark backgrounds. However, layering colors near -or on top of other colors will cause vibration. For more information about -layering colors, follow [WCAG 2.1 AA][wcag21aa] requirements. +You can layer colors on light or dark backgrounds. However, layering colors on top of other colors will cause vibration. For more information about layering colors, follow [WCAG 2.1 AA][wcag21aa] requirements. - - Red CTA against a white background, blue button against a light gray background, and a light red-orange button against a black background + + Red call to action on a white background, blue button on a light gray background, and a light red-orange button on a black background -## Tools - -The [Colour Contrast Analyzer][colourcontrastanalyzer] by TPGi can help you -identify colors and gauge their contrast from one another. -

Foundations

To learn how to use our other foundations in your designs, visit the foundations section.

diff --git a/docs/foundations/color/index.md b/docs/foundations/color/index.md index 519eacd519..47f57f3bfc 100644 --- a/docs/foundations/color/index.md +++ b/docs/foundations/color/index.md @@ -29,7 +29,8 @@ crayons: @container (min-width: 576px) and (max-width: 746px) { grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); } - gap: var(--rh-space-2xl); + column-gap: var(--rh-space-2xl); + row-gap: var(--rh-space-4xl); & .crayons-list { margin: 0; padding: 0; @@ -50,226 +51,52 @@ crayons: ## Introduction -Color is integral to expressing the Red Hat brand successfully across digital -experiences. We use color in our elements, patterns, websites, app UI, and more. +Color is integral to expressing the Red Hat brand successfully across digital experiences. We use color in our elements, patterns, websites, app UI, and more. ## Using color ### Color palette -Since all projects use color in some way, our color palette was designed with -brand, usability, and accessibility as foundations. +Since all projects use color in some way, our color palette was designed with brand, usability, and accessibility as foundations. ### Communication -When colors are used together, they communicate brand, hierarchy, state, and -more. +When colors are used together, they communicate brand, hierarchy, state, and more. - - - Variants of severalt elements - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + Variants of several elements -### Design tokens +## Design tokens -Design tokens are how we communicate and translate our design decisions to code. -Changes can be made at scale, so any elements or patterns using our tokens will -always be current. +Design tokens are how we communicate and translate our design decisions to code. Changes can be made at scale, so any elements or patterns using our tokens will always be current. -To learn more, go to the [Tokens](/tokens) section. +To learn more, go to the [Tokens][tokens] section. -### Crayon and Semantic colors +### Crayon and semantic tokens Our design system includes two sets of tokens: - **Crayon tokens** - reference hard-coded values and offer no information about usage -- **Semantic tokens** - reference Crayon colors and define how a color should be used +- **Semantic tokens** - reference crayon colors and define how a color should be used - +

Helpful tip

-

Semantic naming is essential not only just for color, but for all - foundational styles.

+

Semantic naming is essential not only just for color, but for all foundational styles.

 - - - Example of how crayon color tokens are aliased to semantic tokens, which are used to style a button - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + Diagram showing how crayon color tokens are aliased to semantic tokens, which are used to style a button -## Color palette tokens +### Color palette tokens
{%- for crayon in crayons -%} @@ -293,3 +120,5 @@ Our design system includes two sets of tokens:

Foundations

To learn how to use our other foundations in your designs, visit the foundations section.

+ +[tokens]: /tokens \ No newline at end of file diff --git a/docs/foundations/color/usage.md b/docs/foundations/color/usage.md index 3bbf7545c9..83e129ca72 100644 --- a/docs/foundations/color/usage.md +++ b/docs/foundations/color/usage.md @@ -12,9 +12,8 @@ subnav: --- @@ -22,218 +21,170 @@ subnav: href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css" data-helmet> + + ## Our color palette Our color palette was built to be extensive and flexible. Applying color thoughtfully and consistently helps us deliver accessible, cohesive, and recognizable experiences for our users. -[Contact us][contactus] if you have design system questions or [visit the brand -standards page][brandstandards] if you have brand questions. +[Contact us][contactus] if you have design system questions or visit the [Brand +standards website][brandstandards] if you have brand questions. -### Brand red +## Brand red -Red is our primary brand color. Red is also a strong color, so **use it as an -accent**, not to fill large areas. +Red is our primary brand color. Red is also a strong color, so **use it as an accent**, not to fill large areas. - spectrum of brand red shades with examples of brand red being used + Examples of brand red being used in logos, illustrations, and text ### Red orange For danger or error states, use `red orange`. + + Examples of red orange used in alert, buttons, tag, and site status + + ## Backgrounds ### Canvas -Canvas is the bottom-most infinite container that holds all containers, -elements, etc. The default canvas colors for light and dark themes are `white` -and `black` respectively, but some gray colors can also be used. +Canvas is the bottom-most infinite container that holds all containers, elements, etc. The default canvas colors for light and dark themes are white and black respectively, but some gray colors can also be used. -For more bespoke websites or interfaces, other colors may be used as long as -color contrast and other accessibility requirements are maintained. +For more bespoke websites or interfaces, other colors may be used as long as color contrast and other accessibility requirements are maintained. - +

Helpful tip

-

Elements like Card and other containers include more colors and can be - placed on top of a canvas.

+

Elements like Card and other containers include more colors and can be placed on top of a canvas.

 - - swatches of the default canvas colors for dark and light theme and examples of custom canvas colors + + swatches of the default canvas colors for dark and light theme and examples of custom canvas colors -### Surface Beta +### Surface -Surface is a container background that applies a theme to any child elements. If -you need more control over the default theme in specific areas, go to the -[Surface](/elements/surface/) element page to learn more. +Surface is a container background that applies a theme to any child elements. If you need more control over the default theme in specific areas, go to the [Surface](/elements/surface/) element page to learn more. - +

Helpful tip

-

To learn more about theming, go to the Theming - section.

+

To learn more about theming, go to the Theming section.

 +
+ + Examples of cards using each surface color + +
Examples of how Surface is theming child elements within a Card
+
-
- - examples of tile elements which apply a surface - -
Examples of how Surface is theming child elements within a Card - element
-
- - -### Layering Beta +### Layering -Layering is stacking colors to establish hierarchy and separate content. Colors -like white and black can stack if there is a gray border visible. Surface or -container colors can stack if there is a layer of white or black in between. +Layering is stacking colors to establish hierarchy and separate content. Colors like white and black can stack if there is a gray border visible. Surface or container colors can stack if there is a layer of white or black in between.
- Light background with alternating stacking contexts + - - - Dark background with alternating stacking contexts + +
-### Basic text +## Basic text -Color is applied to basic text depending on content, hierarchy, theme, and more. -These are general guidelines, not all use cases are represented. +Color is applied to basic text depending on content, hierarchy, theme, and more. These are general guidelines, not all use cases are represented. 1. **Brand** - use sparingly to add a brand accent to text -1. **Primary** - use for headings and body text in most layouts and components -1. **Secondary** - use for small text like captions -1. **Custom** - use a variety of colors to advertise a campaign or bespoke experience - -
- - - - - - -
+2. **Primary** - use for headings and body text in most layouts, elements, and patterns +3. **Secondary** - use for small text like captions +4. **Custom** - use a variety of colors to advertise a campaign or bespoke experience -### Icons + + Dark and light theme examples of the four types of semantic colors used by text + -Color is applied to icons depending on category, status, theme, etc. Some icon -colors will not change when switching themes. These are general guidelines, not -all use cases are represented. +## Icons -1. **Standard** - monochromatic and usually red, black, or white -1. **Technology** - always black, gray, red, and white -1. **UI** - can be a variety of colors depending on where they are used +Color is applied to icons depending on category, status, theme, etc. Some icon colors will not change when switching themes. These are general guidelines, not all use cases are represented. -
- - - +1. **Standard** - monochromatic and usually red, black, or white +2. **Technology** - always black, gray, red, and white +3. **UI and microns** - may be different colors depending on how they are used within an element or pattern - - - -
+ + Examples of the icon categories + -### Interactivity +## Interactivity -Color can be used to indicate that something is interactive or selectable. All -text links require an underline except in certain rare edge cases. +Color can be used to indicate that something is interactive or selectable. All text links require an underline except in certain rare edge cases. 1. **Blue** - a common color used for inline links, buttons, and more -1. **Purple** - a common color used for the visited state or linked text in certain components -1. **Red** - use sparingly for primary calls to action or linked text in certain components -1. **Gray** - use for secondary text, the disabled state, or linked text in certain components -1. **Black and white** - use for linked text in navigation components or linked header text in navigation menus -1. **Other colors** - use for linked text in components with a more broad color palette like Tag +2. **Purple** - a common color used for the visited state or linked text in certain elements +3. **Red** - use sparingly for primary calls to action or linked text in certain elements +4. **Gray** - use for secondary text, the disabled state, or linked text in certain elements +5. **Black and white** - use for linked text in navigation elements or linked header text in navigation menus +6. **Other colors** - use for linked text in elements with a more broad color palette like Tag - +

Helpful tip

-

Most links have underlines for accessibility reasons, but some do not. To - learn more about when to add underlines to links, contact - the design system team.

+

Most links have underlines for accessibility reasons, but some do not. To learn more about when to add underlines to links, contact the design system team.

 -
- - - - - - -
+ + Examples of elements using the colors and styles that denote interactivity + -### Status +## Status Status has its own severity levels, color palettes, and meanings assigned to each. - - +

Helpful tip

-

In general, when communicating status, red and red orange are considered - danger or error state colors. It is not recommended to use those colors - anywhere else.

+

In general, when communicating status, red and red orange are considered danger or error state colors. It is not recommended to use those colors anywhere else.

 | Status name | Severity level | Status | Use case | | ----------- | :------------: | ----------------------------------------------- | ----------------------------------------------------------------------------------------------- | -| Info | 0 | Purple |
  • Helpful information before an action
  • Positive
| -| Success | 0 | Green |
  • Success state or an action was successful
  • Positive or healthy
| -| Neutral | 0 | Gray |
  • An action is not available or will have no impact
  • Disabled or neutral
| -| Warning | 1 | Yellow |
  • How to avoid a destructive action or error
  • Negative
| -| Caution | 2 | Orange |
  • Non-destructive action or fixable error
  • Negative
| -| Danger | 3 | Red orange |
  • Destructive action or critical errorr
  • Negative
| +| Info | 0 | Purple |
  • Helpful information before an action
  • Positive
| +| Success | 0 | Green |
  • Success state or an action was successful
  • Positive or healthy
| +| Neutral | 0 | Gray |
  • An action is not available or will have no impact
  • Disabled or neutral
| +| Warning | 1 | Yellow |
  • How to avoid a destructive action or error
  • Negative
| +| Caution | 2 | Orange |
  • Non-destructive action or fixable error
  • Negative
| +| Danger | 3 | Red orange |
  • Destructive action or critical errorr
  • Negative
| - + Alerts, buttons, health index, site status, and tags that use status colors ## Resources @@ -249,108 +200,46 @@ Status has its own severity levels, color palettes, and meanings assigned to eac Follow these guidelines and best practices as best you can. -### Custom themes +### Custom theming If you need support for a custom theme including custom design tokens, [contact us][contactus].
- - - Blue submit button, blue default call to action, black tooltip, and blue switch - - - - - - - + + Blue button, blue default call to action, gray badge, black tooltip, blue switch, and blue back to top -

Place foreground elements on background colors with enough contrast.

+

Use light or dark theme elements as best you can.

 - - - Magenta button, brand red default call to action, green tooltip, and dark orange switch - - - - - - - + + Purple button, teal default call to action, brand red badge, blue tooltip, orange switch, and green back to top -

Do not place foreground elements on background colors with insufficient contrast.

+

Do not create your own theme or change the colors of elements.
-### Sufficient contrast +### Maintaining contrast -Using colors with the same hue, saturation, and lightness is acceptable, -but do not put them near or on top of each other as doing so will cause -vibration resulting in a poor user experience. If you have a large -section of color or an image background with low contrast, consider -using elements and patterns from the desaturated theme instead. +Ensure backgrounds have adequate contrast when other elements are placed on top.
- - - Examples of a blue button against a light gray background and a red CTA against a black background - - - - - - - + + Examples of a blue button against a light gray background and a red CTA against a black background

Place foreground elements on background colors with enough contrast.

 - - - Examples of a blue button against a red background and a red CTA against a blue background - - - - - - - + + Examples of a blue button against a red background and a red CTA against a blue background

Do not place foreground elements on background colors with insufficient contrast.