diff --git a/docs/BrandColors.mdx b/docs/BrandColors.mdx index 21f3ffe3..f924c021 100644 --- a/docs/BrandColors.mdx +++ b/docs/BrandColors.mdx @@ -5,9 +5,9 @@ import * as BrandColorStories from './BrandColors.stories'; # Brand Colors (First Tier) -The first tier of our design token abstraction consists of brand-specific colors. These colors uses literal color names (like red, green, etc.) and a numeric scale (where 000 is light and 900 is dark) by default.They form the foundation of our design system and are essential to maintaining visual consistency across our products. +The first tier of our design token abstraction consists of brand-specific colors. These colors uses literal color names (like red, green, etc.) and a numeric scale (where 000 is light and 900 is dark) by default. They form the foundation of our design system and are essential to maintaining visual consistency across our products. -While these colors are fundamental to our design system, they **should not** be used directly in most cases. The exception is when a color needs to remain the same regardless of the theme (light or dark mode). Instead, these brand colors should be referenced via [**theme colors**](/docs/colors-themecolors--light-theme-colors), which form the second tier of our design tokens. +While these colors are fundamental to our design system, they **should not** be used directly in most cases. The exception is when a color needs to remain the same regardless of the theme (light or dark mode). Instead, these brand colors should be referenced via [**theme colors**](/docs/colors-themecolors--docs), which form the second tier of our design tokens. The majority of our brand color progressions were generated using the [0to255](https://0to255.com/037dd6) tool, which helps ensure smooth and consistent color transitions. diff --git a/docs/IntroductionColor.stories.mdx b/docs/IntroductionColor.stories.mdx index cfe77836..3d3e8d1d 100644 --- a/docs/IntroductionColor.stories.mdx +++ b/docs/IntroductionColor.stories.mdx @@ -26,11 +26,11 @@ Color is a powerful tool in design. It can express style, convey meaning, and es ### **Brand colors (first tier)** -Brand colors form the foundation of our color system. However, in most cases they **SHOULD NOT** be used directly in component styles. Instead, they serve as a reference for the [Theme Colors](/docs/colors-themecolors--light-theme-colors). You can view our brand colors in the [Brand Colors](/docs/colors-brandcolors--default-story) section. +Brand colors form the foundation of our color system. However, in most cases they **should not** be used directly in component styles. Instead, they serve as a reference for the [theme colors](/docs/colors-themecolors--light-theme-colors). You can view our brand colors in the [brand colors](/docs/colors-brandcolors--default-story) section. ### **Theme colors (second tier)** -Theme colors are semantically neutral, theme-compatible design tokens that you can use directly in your code and styles. Each token has a specific purpose, which is described in its documentation. You can view our theme colors in the [Theme Colors](/docs/colors-themecolors--light-theme-colors) section. +Theme colors are semantically neutral, theme-compatible design tokens that you can use directly in your code and styles. Each token has been tested for accessibility contrast and has a specific purpose, which is described in its documentation. You can view our theme colors in the [theme colors](/docs/colors-themecolors--light-theme-colors) section. ### **Component colors (third tier)** @@ -88,7 +88,7 @@ background-color: var(--color-background-default); #### ❌ **DON'T**: Use static color values in your components -```jsx +``` background-color: #ffffff; // Static color value ``` @@ -116,7 +116,7 @@ background-color: var(--custom-colors-my-custom-color); #### ❌ **DON'T**: Use non-token colors directly in your components -```jsx +``` background-color: #abc123; // Custom color not in design tokens or global file ```