From de6c08b813198a4fb28d0da41e00b0ef49c6a0e2 Mon Sep 17 00:00:00 2001 From: tkoleary Date: Tue, 1 Dec 2020 17:15:43 -0600 Subject: [PATCH 01/11] Updates to the colors story --- packages/core/stories/styles/index.scss | 4 + .../stories/tokens/colors/ColorDisplay.js | 2 +- .../stories/tokens/colors/Colors.stories.mdx | 84 +++++++------------ .../stories/tokens/colors/_color-display.scss | 2 +- .../core/stories/tokens/colors/colors.json | 55 +++--------- 5 files changed, 46 insertions(+), 101 deletions(-) diff --git a/packages/core/stories/styles/index.scss b/packages/core/stories/styles/index.scss index 90e360fa07..439ad769de 100644 --- a/packages/core/stories/styles/index.scss +++ b/packages/core/stories/styles/index.scss @@ -49,6 +49,10 @@ } } +small { + font-size: .9rem; +} + .sb-block.borderless { margin: 3rem 0 !important; padding: 0 !important; diff --git a/packages/core/stories/tokens/colors/ColorDisplay.js b/packages/core/stories/tokens/colors/ColorDisplay.js index 3bcae2e5e3..91ddea9fb3 100644 --- a/packages/core/stories/tokens/colors/ColorDisplay.js +++ b/packages/core/stories/tokens/colors/ColorDisplay.js @@ -8,7 +8,7 @@ const ColorSwatch = ({ name, value, variable, width='200px', height='4rem', copi return(
{ name &&
{name}
} -
+
{hexValue} {copiable && } diff --git a/packages/core/stories/tokens/colors/Colors.stories.mdx b/packages/core/stories/tokens/colors/Colors.stories.mdx index 1328bb2676..ad74f7fe79 100644 --- a/packages/core/stories/tokens/colors/Colors.stories.mdx +++ b/packages/core/stories/tokens/colors/Colors.stories.mdx @@ -1,20 +1,18 @@ import { Meta } from '@storybook/addon-docs/blocks'; import generateTitle from '../../util/generateTitle'; import { ColorSwatch, GradientSpectrum } from './ColorDisplay'; -import { themeColors, grayScaleColors, utilityColors, primaryColors, primaryAltColors, highLightColors } from './colors.json'; +import { themeColors, grayScaleColors, utilityColors, hierarchicalColors} from './colors.json'; -# Colors -Color is a key component of a brand. A well defined suite of colors can effeciently convey the brand and empower visual consistency. Apply colors systemematically across can help users set expections of the meaning and hierarchies of the perceived information. +# Color + +We use color to establish brand consistency across all Massachusetts digital experiences, but also to convey semantic meaning—for example in warnings and alerts—as well as to differentiate categories of information. ## Brand Colors -Mayflower brand colors are carefully selected to meet the brand pillars and adhere to specific accessibility standards. -We encourage that all Commonwealth agencies use the same -suite of colors in order to cement a cohesive image of the Commonwealth -brand on all public-facing assets and documents. -Organizations that have their own visual identity are invited to extend this color palette with additional colors that reflect their unique brand in conjunction with the shared Commonwealth identity. + +The Mayflower brand colors were selected to meet our brand and accessibility standards. All Commonwealth agencies should use these colors—along with other brand imagery—to signal to users that they are seeing official Commonwealth content. Organizations with their own visual identities may extend this color palette with their unique brand colors, but we encourage you to make an effort to harmonize your color palette with Mayflower as much as possible.
    { @@ -22,50 +20,37 @@ Organizations that have their own visual identity are invited to extend this col }
-## Theme Colors -Theme colors are putting brand colors and their variants into use, and assigning them roles and contextual meaning. Think of theme colors as slots for color tokens to systematize color usage. - -### Primary Colors +## Semantic Colors -**Primary Color** is the default and most often used color on a page and throughout the site. Accompanying -shades and tints can be used to create depth. +These colors add specific meanings bassed on UI conventions*. Red connotes "stop", "warning", or "danger"; green connotes "go", or "success". For accessibility avoid using color alone to convey meaning, semantic colors should augment text and images. -**Examples:** Headings, titles, icons, graphics, calls to action, buttons, -and backgrounds. +Some brand colors like `$c-duckling-ellow` and `$c-berkshires-green` are doing double duty as Semantic colors while others like `$c-bay-blue` and `$c-independence-cranberry` are not. We wanted to keep our palett compact, but be careful not to use `$c-bay-blue` as a focus color or `$c-independence-cranberry` as a warning color.
    { - primaryColors.map((color, i) =>
    • ) + utilityColors.map((color, i) =>
    • ) }
-**Primary Alt Color** is an alternative primary color. -It is used to balance the theme and create more variety to the color usage on a page and throughout the site. -Examples: Headings, titles, icons, graphics, calls to action, -buttons, and backgrounds. - -
    - { - primaryAltColors.map((color, i) =>
    • ) - } -
+

+ + *Under some circumstances internationalized information may need to deviate from the standard if the meanings of colors differ. + +

-### highLight Colors -The purpose of the highlight colors are to to draw attention to key sections or -information that usually is time sensitive. +### Color hierarchy -**Examples:** Updates, time changes, alerts. +`$c-bay-blue` is the **Primary Color** is the default color for links and primary action buttons. Accompanying shades and tints can be used to create depth. It's also used in headings, titles, icons, graphics, and calls to action. `$c-berkshires-green` is the **Alternate Primary Color**, it usually does the same job as the primary color, but when the surrounding context is different, for example in a call-to-action block. `$c-duckling-ellow` is the **Highlight Color** and it's used for time sensitive information like updates and alerts.
    { - highLightColors.map((color, i) =>
    • ) + hierarchicalColors.map((color, i) =>
    • ) }
-### Gray Scale Colors -A set of neutral color used to complement and balance primary and secondary colors. It is the base color for all text on both print and digital materials for Mass.gov. +### Gray Scale -**Examples:** Body text, icons, and backgrounds. +A range of neutral grays for text and backgrounds.
    { @@ -73,26 +58,15 @@ A set of neutral color used to complement and balance primary and secondary colo }
-### Utility Colors -Colors that are to convey a specific meaning or serve a particular purpose. +## Tints and shades -
    - { - utilityColors.map((color, i) =>
    • ) - } -
- -## Color Gradients +These are generated as an extension of the Mayflower color palette for places where added color differentiation is needed, for example in charts. They use the functions `tint`, which adds white, and `shade` which adds black, at 10% intervals. If a new color is added to the color system, the tints and shades are generated following the same method. -Gradients are programmatically generated as an extension of the Mayflower color palette in order to meet the needs of data visualization. +### Tints -The "Light" and "Dark" spectrums are programmatically generated using functions `tint` and `shade` and a 10% percentage intervals for evenness and consistency. If a new color is added to the color system, the gradients can be generated following the same method. +A `tint` takes a `$color` and mixes it with white. A 0% `tint` is the original `$color` and 100% is white. -### Light Gradients - -`tint` takes in a `$color` and mixes it with color white. It also takes in a percentage to define the percentage of `$color` in the mix. -- 0% is the original `$color` and 100% is the color white. -- Light Gradient Variants include 10%-90% with a 10% interval. +The range of tints shown are 10% to 90%. { @@ -110,13 +84,11 @@ The "Light" and "Dark" spectrums are programmatically generated using functions } +### Shades +A `shade` takes a `$color` and mixes it with black. A 0% `shade` is the original `$color` and 100% is black. -### Dark Gradients - -`shade` takes in a `$color` and mixes it with color black. It also takes in a percentage to define the percentage of `$color` in the mix. -- 0% is the original `$color` and 100% is the color black. -- Dark Gradient Variants include 10%-50% with a 10% interval. +Since shades above 50% are hard to distinguish and less useful, the range of shades are 10% to 50%. { diff --git a/packages/core/stories/tokens/colors/_color-display.scss b/packages/core/stories/tokens/colors/_color-display.scss index a7b631c13a..825937f444 100644 --- a/packages/core/stories/tokens/colors/_color-display.scss +++ b/packages/core/stories/tokens/colors/_color-display.scss @@ -20,7 +20,7 @@ min-width: 7rem; h6 { - font-size: $fonts-small; + font-size: 1rem; } } diff --git a/packages/core/stories/tokens/colors/colors.json b/packages/core/stories/tokens/colors/colors.json index 4a192fdf70..b8b3f8b1cf 100644 --- a/packages/core/stories/tokens/colors/colors.json +++ b/packages/core/stories/tokens/colors/colors.json @@ -27,7 +27,7 @@ { "variable": "$c-independence-cranberry", "token": "$c-independence-cranberry", - "name": "Independent Cranberry", + "name": "Independence Cranberry", "value": "#680A1D" } ], @@ -64,11 +64,6 @@ "name": "Error Red", "value": "#CD0D0D" }, - { - "variable": "$c-focus", - "name": "Focus Hightlight", - "value": "#3e94cf" - }, { "variable": "$c-warning", "name": "Warning Yellow", @@ -78,54 +73,28 @@ "variable": "$c-success", "name": "Success Green", "value": "#388557" + }, + { + "variable": "$c-focus", + "name": "Focus Hightlight", + "value": "#3e94cf" } ], - "primaryColors": [ + "hierarchicalColors": [ { "variable": "$c-primary", - "name": "Bay Blue", + "name": "Bay Blue: Primary", "value": "#14558f" }, - { - "variable": "$c-primary-lighter", - "name": "50% Bay Blue", - "value": "#8aaac7" - }, - { - "variable": "$c-primary-lightest", - "name": "10% Bay Blue", - "value": "#e7eef4" - }], - "primaryAltColors": [ { "variable": "$c-primary-alt", - "name": "Berkshires Green", + "name": "Berkshires Green: Alternate", "value": "#388557" }, - { - "variable": "$c-primary-alt-lighter", - "name": "50% Berkshires Green", - "value": "#97c2a9" - }, - { - "variable": "$c-primary-alt-lightest", - "name": "10% Berkshires Green", - "value": "#EBF3EE" - }], - "highLightColors": [ { "variable": "$c-highlight", - "name": "Duckling Yellow", + "name": "Duckling Yellow: Highlight", "value": "#f6c51b" - }, - { - "variable": "$c-highlight-lighter", - "name": "50% Duckling Yellow", - "value": "#fbe28d" - }, - { - "variable": "$c-highlight-lightest", - "name": "10% Duckling Yellow", - "value": "#fef9e8" - }] + } + ] } From cfcbc7ae3c49022d5ef34726aa7c62f52b94337d Mon Sep 17 00:00:00 2001 From: tkoleary Date: Wed, 2 Dec 2020 15:05:19 -0600 Subject: [PATCH 02/11] Updates to logo page content and layout --- packages/core/stories/styles/index.scss | 1 - .../stories/tokens/colors/ColorDisplay.js | 2 +- .../core/stories/tokens/logo/Logo.stories.js | 1 + .../core/stories/tokens/logo/Logo.stories.mdx | 111 ++++++++---------- .../stories/tokens/logo/_logo-display.scss | 8 ++ 5 files changed, 57 insertions(+), 66 deletions(-) create mode 100644 packages/core/stories/tokens/logo/_logo-display.scss diff --git a/packages/core/stories/styles/index.scss b/packages/core/stories/styles/index.scss index 439ad769de..2b38009017 100644 --- a/packages/core/stories/styles/index.scss +++ b/packages/core/stories/styles/index.scss @@ -68,7 +68,6 @@ small { & > * { margin-bottom: 2rem; } - } // Match row height diff --git a/packages/core/stories/tokens/colors/ColorDisplay.js b/packages/core/stories/tokens/colors/ColorDisplay.js index 91ddea9fb3..70410f0fc4 100644 --- a/packages/core/stories/tokens/colors/ColorDisplay.js +++ b/packages/core/stories/tokens/colors/ColorDisplay.js @@ -8,7 +8,7 @@ const ColorSwatch = ({ name, value, variable, width='200px', height='4rem', copi return(
{ name &&
{name}
} -
+
{hexValue} {copiable && } diff --git a/packages/core/stories/tokens/logo/Logo.stories.js b/packages/core/stories/tokens/logo/Logo.stories.js index 957ff57b47..55249d5008 100644 --- a/packages/core/stories/tokens/logo/Logo.stories.js +++ b/packages/core/stories/tokens/logo/Logo.stories.js @@ -7,6 +7,7 @@ import logoColor from '@massds/mayflower-assets/static/images/logo/stateseal-col import logoBlack from '@massds/mayflower-assets/static/images/logo/stateseal-black.png'; import logoWhite from '@massds/mayflower-assets/static/images/logo/stateseal-white.png'; import generateTitle from '../../util/generateTitle'; +import './_logo-display.scss'; const { STORYBOOK_CDN_PATH } = process.env; diff --git a/packages/core/stories/tokens/logo/Logo.stories.mdx b/packages/core/stories/tokens/logo/Logo.stories.mdx index d16000b0ba..7e0ada6292 100644 --- a/packages/core/stories/tokens/logo/Logo.stories.mdx +++ b/packages/core/stories/tokens/logo/Logo.stories.mdx @@ -14,14 +14,14 @@ const { STORYBOOK_CDN_PATH } = process.env; }} /> -# The Great Stateseal +# The Great Seal -The Great Seal of Massachusetts is in the custody of the [Office of the Secretary of the Commonwealth](http://www.sec.state.ma.us), who is the authority on how and when to use it. These draft guidelines are subject to their review and approval and will be updated as needed. +The Great Seal of Massachusetts is in the custody of the [Office of the Secretary of the Commonwealth](http://www.sec.state.ma.us), who is the authority on how and when to use it. These guidelines are subject to their review and approval and will be updated as needed. According the [public records on the Massachusetts state seal](https://www.sec.state.ma.us/pre/presea/sealhis.htm): >The great seal of the Commonwealth shall be circular in form, and shall bear upon its face a representation of the arms of the Commonwealth, with an inscription round about such representation, consisting of the words "Sigillum Reipublicae Massachusettensis"; @@ -31,115 +31,98 @@ According the [public records on the Massachusetts state seal](https://www.sec.s ## Restrictions -The Great Seal should ***only*** be used for official communications and publications to convey the Commonwealth’s identity and authority across different state departments. -It should ***not*** be used for personal or private materials outside of the jurisdiction of your office, department, or agency, including in contractor, vendor, or third-party communications. By law, it ***cannot*** be used for advertising or commercial purposes. Contact the Public Records Division at [617-727-2832](tel:6177272832) with any questions regarding appropriate uses. - -The Great Seal should ***never*** be defaced, altered, skewed, or modified in any way. Please download the approved seal images below or request them directly from from Office of the Secretary of the Commonwealth. +The Great Seal should ***only*** be used for official communications to signify that the communication is from an official department of the Commonwealth. It should ***not*** be used for personal or private materials outside of the jurisdiction of your office, department, or agency, including in contractor, vendor, or third-party communications. By law, it ***cannot*** be used for advertising or commercial purposes. Contact the Public Records Division at [617-727-2832](tel:6177272832) with any questions regarding appropriate uses. +The Great Seal should ***never*** be defaced, altered, skewed, or modified in any way. Please download the approved seal images below or request them directly from from Office of the Secretary of the Commonwealth.
## Variations -The official colors of the Great Seal are blue and gold with a white inner background. However, the seal is also approved to be used in the following colors: gray, black and white. - - -### Three-color reproduction - -This is the primary color use of the Great Seal. Specific parts of the Great Seal are in gold, over a blue shield encapsulated in a blue circular rim, all resting on a white inner-background. -
+

Full color

-**Usage:** It can be used with all backgrounds. - -
- } usage="secondary" size="small" capitalizedhref={`${STORYBOOK_CDN_PATH}/static/images/logo/stateseal-color.svg`} download /> - } usage="secondary" size="small" capitalized href={`${STORYBOOK_CDN_PATH}/static/images/logo/stateseal-color.png`} download /> -
+This is the primary color use of the Great Seal. Specific parts of the Great Seal are in gold, over a blue shield encapsulated in a blue circular rim, all resting on a white inner-background. The full-color seal can be used on all backgrounds. + } usage="secondary" size="small" capitalizedhref={`${STORYBOOK_CDN_PATH}/static/images/logo/stateseal-color.svg`} download /> + } usage="secondary" size="small" capitalized href={`${STORYBOOK_CDN_PATH}/static/images/logo/stateseal-color.png`} download /> -### Single-color reproduction - -Additionally, the Great Seal may also be presented in a single-color of black, white, and gray. These monochromatic options are transparent in backgrounds, and should be placed on appropriate background colors to ensure sufficient constrast for clear visibility. - +### Single-color variations -#### Gray - - - -**Usage:** It should only be used on light backgrounds with enough contrast. Mayflower Header and Footer are using the gray seal with a very light gray (plat) background. +Mochromatic variations of the Great Seal are black, white, and gray. These files have transparent backgrounds, and may be used in areas where a background color will 'show through' the icon, provided there is sufficiant contrast.
- } usage="secondary" size="small" capitalizedhref={`${STORYBOOK_CDN_PATH}/static/images/logo/stateseal.svg`} download /> - } usage="secondary" size="small" capitalized href={`${STORYBOOK_CDN_PATH}/static/images/logo/stateseal.png`} download /> + Black +
- - - - - - -#### Black - - - -**Usage:** It should only be used on light backgrounds with enough contrast. - -
- } usage="secondary" size="small" capitalizedhref={`${STORYBOOK_CDN_PATH}/static/images/logo/stateseal-black.svg`} download /> - } usage="secondary" size="small" capitalized href={`${STORYBOOK_CDN_PATH}/static/images/logo/stateseal-black.png`} download /> -
+The black variation hould only be used on a background that is a tint of 30% or greater. + } usage="secondary" size="small" capitalizedhref={`${STORYBOOK_CDN_PATH}/static/images/logo/stateseal-black.svg`} download /> + } usage="secondary" size="small" capitalized href={`${STORYBOOK_CDN_PATH}/static/images/logo/stateseal-black.png`} download /> - -#### White - - - -**Usage:** It should only be used on dark backgrounds with enough contrast. -
- } usage="secondary" size="small" capitalized href={`${STORYBOOK_CDN_PATH}/static/images/logo/stateseal-white.svg`} download /> - } usage="secondary" size="small" capitalized href={`${STORYBOOK_CDN_PATH}/static/images/logo/stateseal-white.png`} download /> + White +
+The white variation of the Great Seeal should be used on a background that is a solid named color, a shade of any color, or a tint of 30% or less. + + } usage="secondary" size="small" capitalized href={`${STORYBOOK_CDN_PATH}/static/images/logo/stateseal-white.svg`} download /> + } usage="secondary" size="small" capitalized href={`${STORYBOOK_CDN_PATH}/static/images/logo/stateseal-white.png`} download /> +
+ Gray + +
+The gray variation of the Great Seeal should be used only on a background that is a tint of 70% or greater of any named color. + + + + + } usage="secondary" size="small" capitalizedhref={`${STORYBOOK_CDN_PATH}/static/images/logo/stateseal.svg`} download /> + } usage="secondary" size="small" capitalized href={`${STORYBOOK_CDN_PATH}/static/images/logo/stateseal.png`} download /> + + +
## Accessibility & Best Practices ### Sizing -When reproducing the state seal, it must remain proportionate and legible relative to its size. It should never be so small that it is no longer distinguishable, as it will no longer serve its main purpose of identifying official communications from the Commonwealth. -| Medium | Recommended Size | -|---|---| -|**Print** | 1 in x 1 in | -|**Digital** | 45px x 45px | +The state seal must remain proportionate (equal in width and height) and legible relative to its size. It should also not be very large since it's use is as an identifier and not a hero image. -Exception to the rule: The Great Seal may appear smaller than 45px when a software application or website requires an icon of a specific size, such as a website “favicon.” +| Medium | Recommended Size | Minimum size | Maximum size | +|---|---|---|---| +| **Print (in)** | 0.5 x 0.5 | 1 x 1 | 2 x 2 | +| **Digital (px)** | 32 x 32 | 45 x 45 | 200 x 200 | +

+ + *The Great Seal may only be used at less than the minimum size for a website favicon. + +

-### Spacing -The Great Seal should always have plenty of clear and empty space around it in order to distinguish it from the other design elements, including other graphics,and text. +### Clear space -The Great Seal should never collide or intersect with other objects. The minimum white space that should be reserved around the Great Seal is equal to 25% of the seal’s width , or roughly about the size of the shield’s width within the Seal. +The Great Seal should never collide or intersect with other images graphics or text. The minimum space around it should be 25% of it's width, or roughly the width of the shield in the center of the seal. diff --git a/packages/core/stories/tokens/logo/_logo-display.scss b/packages/core/stories/tokens/logo/_logo-display.scss new file mode 100644 index 0000000000..582b7a5b0f --- /dev/null +++ b/packages/core/stories/tokens/logo/_logo-display.scss @@ -0,0 +1,8 @@ +@use "00-base/configure" as *; +@use "sass:color" as *; +// import color variables +// import bourbon library "tint" and "shade" functions + +.sg-swatch { + border: 1px solid #EEEEEE; +} From 52176860c3845c753d04b470786b9a058a2d64d6 Mon Sep 17 00:00:00 2001 From: tkoleary Date: Mon, 7 Dec 2020 10:55:04 -0600 Subject: [PATCH 03/11] Updates to pr per Minghua -reverted hierarchical to primary, alt, highlight sections -moved down semantic colors to below theme colors -fixed typo 'palette' --- .../stories/tokens/colors/Colors.stories.mdx | 58 ++++++++++----- .../core/stories/tokens/colors/colors.json | 74 +++++++++++++------ 2 files changed, 89 insertions(+), 43 deletions(-) diff --git a/packages/core/stories/tokens/colors/Colors.stories.mdx b/packages/core/stories/tokens/colors/Colors.stories.mdx index ad74f7fe79..36ecd7ed60 100644 --- a/packages/core/stories/tokens/colors/Colors.stories.mdx +++ b/packages/core/stories/tokens/colors/Colors.stories.mdx @@ -1,7 +1,7 @@ import { Meta } from '@storybook/addon-docs/blocks'; import generateTitle from '../../util/generateTitle'; import { ColorSwatch, GradientSpectrum } from './ColorDisplay'; -import { themeColors, grayScaleColors, utilityColors, hierarchicalColors} from './colors.json'; +import { themeColors, grayScaleColors, utilityColors, primaryColors, primaryAltColors, highLightColors} from './colors.json'; @@ -10,7 +10,7 @@ import { themeColors, grayScaleColors, utilityColors, hierarchicalColors} from ' We use color to establish brand consistency across all Massachusetts digital experiences, but also to convey semantic meaning—for example in warnings and alerts—as well as to differentiate categories of information. -## Brand Colors +## Theme Colors The Mayflower brand colors were selected to meet our brand and accessibility standards. All Commonwealth agencies should use these colors—along with other brand imagery—to signal to users that they are seeing official Commonwealth content. Organizations with their own visual identities may extend this color palette with their unique brand colors, but we encourage you to make an effort to harmonize your color palette with Mayflower as much as possible. @@ -20,31 +20,35 @@ The Mayflower brand colors were selected to meet our brand and accessibility sta } -## Semantic Colors +### Color hierarchy -These colors add specific meanings bassed on UI conventions*. Red connotes "stop", "warning", or "danger"; green connotes "go", or "success". For accessibility avoid using color alone to convey meaning, semantic colors should augment text and images. +`$c-bay-blue` is the **Primary Color** is the default color for links and primary action buttons. Accompanying shades and tints can be used to create depth. It's also used in headings, titles, icons, graphics, and calls to action. `$c-berkshires-green` is the **Alternate Primary Color**, it usually does the same job as the primary color, but when the surrounding context is different, for example in a call-to-action block. `$c-duckling-ellow` is the **Highlight Color** and it's used for time sensitive information like updates and alerts. + +### Primary Colors -Some brand colors like `$c-duckling-ellow` and `$c-berkshires-green` are doing double duty as Semantic colors while others like `$c-bay-blue` and `$c-independence-cranberry` are not. We wanted to keep our palett compact, but be careful not to use `$c-bay-blue` as a focus color or `$c-independence-cranberry` as a warning color. +**Primary Color** is the default and most often used color on a page and throughout the site. Accompanying shades and tints can be used to create depth. **Examples:** Headings, titles, icons, graphics, calls to action, buttons, +and backgrounds.
    { - utilityColors.map((color, i) =>
    • ) + primaryColors.map((color, i) =>
    • ) }
-

- - *Under some circumstances internationalized information may need to deviate from the standard if the meanings of colors differ. - -

+**Primary Alt Color** is an alternative primary color. It is used to balance the theme and create more variety to the color usage on a page and throughout the site. Examples: Headings, titles, icons, graphics, calls to action, buttons, and backgrounds. -### Color hierarchy +
    + { + primaryAltColors.map((color, i) =>
    • ) + } +
-`$c-bay-blue` is the **Primary Color** is the default color for links and primary action buttons. Accompanying shades and tints can be used to create depth. It's also used in headings, titles, icons, graphics, and calls to action. `$c-berkshires-green` is the **Alternate Primary Color**, it usually does the same job as the primary color, but when the surrounding context is different, for example in a call-to-action block. `$c-duckling-ellow` is the **Highlight Color** and it's used for time sensitive information like updates and alerts. +### Highlight Colors +The purpose of the highlight colors are to to draw attention to key sections or information that usually is time sensitive. **Examples:** Updates, time changes, alerts.
    { - hierarchicalColors.map((color, i) =>
    • ) + highLightColors.map((color, i) =>
    • ) }
@@ -58,15 +62,31 @@ A range of neutral grays for text and backgrounds. } +## Semantic Colors + +These colors add specific meanings bassed on UI conventions*. Red connotes "stop", "warning", or "danger"; green connotes "go", or "success". For accessibility avoid using color alone to convey meaning, semantic colors should augment text and images. + +Some brand colors like `$c-duckling-ellow` and `$c-berkshires-green` are doing double duty as Semantic colors while others like `$c-bay-blue` and `$c-independence-cranberry` are not. We wanted to keep our palette compact, but be careful not to use `$c-bay-blue` as a focus color or `$c-independence-cranberry` as a warning color. + +
    + { + utilityColors.map((color, i) =>
    • ) + } +
+ +

+ + *Under some circumstances internationalized information may need to deviate from the standard if the meanings of colors differ. + +

+ ## Tints and shades These are generated as an extension of the Mayflower color palette for places where added color differentiation is needed, for example in charts. They use the functions `tint`, which adds white, and `shade` which adds black, at 10% intervals. If a new color is added to the color system, the tints and shades are generated following the same method. ### Tints -A `tint` takes a `$color` and mixes it with white. A 0% `tint` is the original `$color` and 100% is white. - -The range of tints shown are 10% to 90%. +A `tint` takes a `$color` and mixes it with white. A 0% `tint` is the original `$color` and 100% is white. The range of tints shown are 10% to 90%. { @@ -86,9 +106,7 @@ The range of tints shown are 10% to 90%. ### Shades -A `shade` takes a `$color` and mixes it with black. A 0% `shade` is the original `$color` and 100% is black. - -Since shades above 50% are hard to distinguish and less useful, the range of shades are 10% to 50%. +A `shade` takes a `$color` and mixes it with black. A 0% `shade` is the original `$color` and 100% is black. Since shades above 50% are hard to distinguish and less useful, the range of shades are 10% to 50%. { diff --git a/packages/core/stories/tokens/colors/colors.json b/packages/core/stories/tokens/colors/colors.json index b8b3f8b1cf..541489ae7a 100644 --- a/packages/core/stories/tokens/colors/colors.json +++ b/packages/core/stories/tokens/colors/colors.json @@ -29,8 +29,7 @@ "token": "$c-independence-cranberry", "name": "Independence Cranberry", "value": "#680A1D" - } - ], + }], "grayScaleColors":[ { "variable": "$c-black", @@ -56,8 +55,7 @@ "variable": "$c-gray-lightest", "name": "Platinum Gray", "value": "#f2f2f2" - } - ], + }], "utilityColors": [ { "variable": "$c-error-red", @@ -78,23 +76,53 @@ "variable": "$c-focus", "name": "Focus Hightlight", "value": "#3e94cf" - } - ], - "hierarchicalColors": [ - { - "variable": "$c-primary", - "name": "Bay Blue: Primary", - "value": "#14558f" - }, - { - "variable": "$c-primary-alt", - "name": "Berkshires Green: Alternate", - "value": "#388557" - }, - { - "variable": "$c-highlight", - "name": "Duckling Yellow: Highlight", - "value": "#f6c51b" - } - ] + }], + "primaryColors": [ + { + "variable": "$c-primary", + "name": "Bay Blue", + "value": "#14558f" + }, + { + "variable": "$c-primary-lighter", + "name": "50% Bay Blue", + "value": "#8aaac7" + }, + { + "variable": "$c-primary-lightest", + "name": "10% Bay Blue", + "value": "#e7eef4" + }], + "primaryAltColors": [ + { + "variable": "$c-primary-alt", + "name": "Berkshires Green", + "value": "#388557" + }, + { + "variable": "$c-primary-alt-lighter", + "name": "50% Berkshires Green", + "value": "#97c2a9" + }, + { + "variable": "$c-primary-alt-lightest", + "name": "10% Berkshires Green", + "value": "#EBF3EE" + }], + "highLightColors": [ + { + "variable": "$c-highlight", + "name": "Duckling Yellow", + "value": "#f6c51b" + }, + { + "variable": "$c-highlight-lighter", + "name": "50% Duckling Yellow", + "value": "#fbe28d" + }, + { + "variable": "$c-highlight-lightest", + "name": "10% Duckling Yellow", + "value": "#fef9e8" + }] } From 4c6762fd9ace86b7598080f36aa53f419b203a06 Mon Sep 17 00:00:00 2001 From: tkoleary Date: Mon, 7 Dec 2020 10:56:51 -0600 Subject: [PATCH 04/11] Removed logo display file --- packages/core/stories/tokens/logo/Logo.stories.js | 1 - packages/core/stories/tokens/logo/_logo-display.scss | 8 -------- 2 files changed, 9 deletions(-) delete mode 100644 packages/core/stories/tokens/logo/_logo-display.scss diff --git a/packages/core/stories/tokens/logo/Logo.stories.js b/packages/core/stories/tokens/logo/Logo.stories.js index 55249d5008..957ff57b47 100644 --- a/packages/core/stories/tokens/logo/Logo.stories.js +++ b/packages/core/stories/tokens/logo/Logo.stories.js @@ -7,7 +7,6 @@ import logoColor from '@massds/mayflower-assets/static/images/logo/stateseal-col import logoBlack from '@massds/mayflower-assets/static/images/logo/stateseal-black.png'; import logoWhite from '@massds/mayflower-assets/static/images/logo/stateseal-white.png'; import generateTitle from '../../util/generateTitle'; -import './_logo-display.scss'; const { STORYBOOK_CDN_PATH } = process.env; diff --git a/packages/core/stories/tokens/logo/_logo-display.scss b/packages/core/stories/tokens/logo/_logo-display.scss deleted file mode 100644 index 582b7a5b0f..0000000000 --- a/packages/core/stories/tokens/logo/_logo-display.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use "00-base/configure" as *; -@use "sass:color" as *; -// import color variables -// import bourbon library "tint" and "shade" functions - -.sg-swatch { - border: 1px solid #EEEEEE; -} From 9e32cf9df53db107917754b9c6cde2690e009ca8 Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Tue, 8 Dec 2020 10:57:01 -0500 Subject: [PATCH 05/11] tweaks and fixes --- .../core/stories/tokens/colors/Colors.stories.mdx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/core/stories/tokens/colors/Colors.stories.mdx b/packages/core/stories/tokens/colors/Colors.stories.mdx index 36ecd7ed60..e8cf87a9ff 100644 --- a/packages/core/stories/tokens/colors/Colors.stories.mdx +++ b/packages/core/stories/tokens/colors/Colors.stories.mdx @@ -6,12 +6,10 @@ import { themeColors, grayScaleColors, utilityColors, primaryColors, primaryAltC # Color - We use color to establish brand consistency across all Massachusetts digital experiences, but also to convey semantic meaning—for example in warnings and alerts—as well as to differentiate categories of information. -## Theme Colors - +## Brand Colors The Mayflower brand colors were selected to meet our brand and accessibility standards. All Commonwealth agencies should use these colors—along with other brand imagery—to signal to users that they are seeing official Commonwealth content. Organizations with their own visual identities may extend this color palette with their unique brand colors, but we encourage you to make an effort to harmonize your color palette with Mayflower as much as possible.
    @@ -20,9 +18,9 @@ The Mayflower brand colors were selected to meet our brand and accessibility sta }
-### Color hierarchy - -`$c-bay-blue` is the **Primary Color** is the default color for links and primary action buttons. Accompanying shades and tints can be used to create depth. It's also used in headings, titles, icons, graphics, and calls to action. `$c-berkshires-green` is the **Alternate Primary Color**, it usually does the same job as the primary color, but when the surrounding context is different, for example in a call-to-action block. `$c-duckling-ellow` is the **Highlight Color** and it's used for time sensitive information like updates and alerts. +## Theme Colors +Theme colors are brand colors and their variants mapped to a color hierarchy, to define their specific roles and usage in the system. +For examples, `$c-bay-blue`, as the **Primary Color**, is the default color for links and primary action buttons. Accompanying shades and tints can be used to create depth. It's also used in headings, titles, icons, graphics, and calls to action. `$c-berkshires-green`, as the **Alternate Primary Color**, usually does the same job as the primary color, but when the surrounding context is different, for example in a call-to-action block. `$c-duckling-ellow`, as the **Highlight Color**, is used for time sensitive information like updates and alerts. ### Primary Colors @@ -35,7 +33,7 @@ and backgrounds. } -**Primary Alt Color** is an alternative primary color. It is used to balance the theme and create more variety to the color usage on a page and throughout the site. Examples: Headings, titles, icons, graphics, calls to action, buttons, and backgrounds. +**Primary Alt Color** is an alternative primary color. It is used to balance the theme and create more variety to the color usage on a page and throughout the site. **Examples:** Headings, titles, icons, graphics, calls to action, buttons, and backgrounds.
    { From 4f84abee0e4102c87d070e8e66d2deae80d2f43a Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Tue, 8 Dec 2020 11:03:18 -0500 Subject: [PATCH 06/11] tweaks and fixes --- packages/core/stories/tokens/colors/Colors.stories.mdx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/core/stories/tokens/colors/Colors.stories.mdx b/packages/core/stories/tokens/colors/Colors.stories.mdx index e8cf87a9ff..03b7eebfc1 100644 --- a/packages/core/stories/tokens/colors/Colors.stories.mdx +++ b/packages/core/stories/tokens/colors/Colors.stories.mdx @@ -22,9 +22,11 @@ The Mayflower brand colors were selected to meet our brand and accessibility sta Theme colors are brand colors and their variants mapped to a color hierarchy, to define their specific roles and usage in the system. For examples, `$c-bay-blue`, as the **Primary Color**, is the default color for links and primary action buttons. Accompanying shades and tints can be used to create depth. It's also used in headings, titles, icons, graphics, and calls to action. `$c-berkshires-green`, as the **Alternate Primary Color**, usually does the same job as the primary color, but when the surrounding context is different, for example in a call-to-action block. `$c-duckling-ellow`, as the **Highlight Color**, is used for time sensitive information like updates and alerts. +Accompanying shades and tints can be used to create depth. In general, the lighter variants are used for outline, and the lightest variants are used as background colors. Avoid using them as text colors. + ### Primary Colors -**Primary Color** is the default and most often used color on a page and throughout the site. Accompanying shades and tints can be used to create depth. **Examples:** Headings, titles, icons, graphics, calls to action, buttons, +**Primary Color** is the default and most often used color on a page and throughout the site. **Examples:** Headings, titles, icons, graphics, calls to action, buttons, and backgrounds.
      @@ -64,7 +66,7 @@ A range of neutral grays for text and backgrounds. These colors add specific meanings bassed on UI conventions*. Red connotes "stop", "warning", or "danger"; green connotes "go", or "success". For accessibility avoid using color alone to convey meaning, semantic colors should augment text and images. -Some brand colors like `$c-duckling-ellow` and `$c-berkshires-green` are doing double duty as Semantic colors while others like `$c-bay-blue` and `$c-independence-cranberry` are not. We wanted to keep our palette compact, but be careful not to use `$c-bay-blue` as a focus color or `$c-independence-cranberry` as a warning color. +Some brand colors like `$c-duckling-ellow` and `$c-berkshires-green` are doing double duty as semantic colors while others like `$c-bay-blue` and `$c-independence-cranberry` are not. We wanted to keep our palette compact, but be careful not to use `$c-bay-blue` as a focus color or `$c-independence-cranberry` as a warning color.
        { From a5ca18049d73b671ed3820d7541cbef509b00b95 Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Tue, 8 Dec 2020 11:07:16 -0500 Subject: [PATCH 07/11] capitalization --- packages/core/stories/tokens/colors/Colors.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/stories/tokens/colors/Colors.stories.mdx b/packages/core/stories/tokens/colors/Colors.stories.mdx index 03b7eebfc1..dfb4ceec30 100644 --- a/packages/core/stories/tokens/colors/Colors.stories.mdx +++ b/packages/core/stories/tokens/colors/Colors.stories.mdx @@ -80,7 +80,7 @@ Some brand colors like `$c-duckling-ellow` and `$c-berkshires-green` are doing d

        -## Tints and shades +## Tints and Shades These are generated as an extension of the Mayflower color palette for places where added color differentiation is needed, for example in charts. They use the functions `tint`, which adds white, and `shade` which adds black, at 10% intervals. If a new color is added to the color system, the tints and shades are generated following the same method. From b8ac0318014addce3fae0f53af54dbbe39e0e8cd Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Tue, 8 Dec 2020 11:16:56 -0500 Subject: [PATCH 08/11] match variable names --- .../stories/tokens/colors/Colors.stories.mdx | 8 ++-- .../core/stories/tokens/colors/colors.json | 46 +++++++++---------- 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/packages/core/stories/tokens/colors/Colors.stories.mdx b/packages/core/stories/tokens/colors/Colors.stories.mdx index dfb4ceec30..6e7bb1b655 100644 --- a/packages/core/stories/tokens/colors/Colors.stories.mdx +++ b/packages/core/stories/tokens/colors/Colors.stories.mdx @@ -1,7 +1,7 @@ import { Meta } from '@storybook/addon-docs/blocks'; import generateTitle from '../../util/generateTitle'; import { ColorSwatch, GradientSpectrum } from './ColorDisplay'; -import { themeColors, grayScaleColors, utilityColors, primaryColors, primaryAltColors, highLightColors} from './colors.json'; +import { brandColors, grayScaleColors, utilityColors, primaryColors, primaryAltColors, highLightColors} from './colors.json'; @@ -14,7 +14,7 @@ The Mayflower brand colors were selected to meet our brand and accessibility sta
          { - themeColors.map((color, i) =>
          • ) + brandColors.map((color, i) =>
          • ) }
        @@ -90,7 +90,7 @@ A `tint` takes a `$color` and mixes it with white. A 0% `tint` is the original ` { - themeColors.map(({ token, name }, i) => { + brandColors.map(({ token, name }, i) => { const props = { token: token.match(/\$(.*)/)[1], name, @@ -110,7 +110,7 @@ A `shade` takes a `$color` and mixes it with black. A 0% `shade` is the original { - themeColors.map(({ token, name }, i) => { + brandColors.map(({ token, name }, i) => { const props = { token: token.match(/\$(.*)/)[1], name, diff --git a/packages/core/stories/tokens/colors/colors.json b/packages/core/stories/tokens/colors/colors.json index 541489ae7a..a7e204d2b8 100644 --- a/packages/core/stories/tokens/colors/colors.json +++ b/packages/core/stories/tokens/colors/colors.json @@ -1,5 +1,5 @@ { - "themeColors": [ + "brandColors": [ { "variable": "$c-primary", "token": "$c-bay-blue", @@ -55,27 +55,6 @@ "variable": "$c-gray-lightest", "name": "Platinum Gray", "value": "#f2f2f2" - }], - "utilityColors": [ - { - "variable": "$c-error-red", - "name": "Error Red", - "value": "#CD0D0D" - }, - { - "variable": "$c-warning", - "name": "Warning Yellow", - "value": "#f6c51b" - }, - { - "variable": "$c-success", - "name": "Success Green", - "value": "#388557" - }, - { - "variable": "$c-focus", - "name": "Focus Hightlight", - "value": "#3e94cf" }], "primaryColors": [ { @@ -124,5 +103,26 @@ "variable": "$c-highlight-lightest", "name": "10% Duckling Yellow", "value": "#fef9e8" - }] + }], + "utilityColors": [ + { + "variable": "$c-error-red", + "name": "Error Red", + "value": "#CD0D0D" + }, + { + "variable": "$c-warning", + "name": "Warning Yellow", + "value": "#f6c51b" + }, + { + "variable": "$c-success", + "name": "Success Green", + "value": "#388557" + }, + { + "variable": "$c-focus", + "name": "Focus Hightlight", + "value": "#3e94cf" + }] } From 490e6bdcc921923b06788ea54b5ae46f03067047 Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Tue, 8 Dec 2020 11:45:16 -0500 Subject: [PATCH 09/11] tweaks and fixes for logo docs --- packages/core/stories/tokens/logo/Logo.stories.js | 4 +++- .../core/stories/tokens/logo/Logo.stories.mdx | 15 ++++++++------- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/core/stories/tokens/logo/Logo.stories.js b/packages/core/stories/tokens/logo/Logo.stories.js index 957ff57b47..7f441cfb80 100644 --- a/packages/core/stories/tokens/logo/Logo.stories.js +++ b/packages/core/stories/tokens/logo/Logo.stories.js @@ -23,8 +23,9 @@ const stateSeal = ({ src, dimension, background }) => ( const bgLight = { background: '#F2F2F2' }; const bgLight1 = { background: '#E7EEF4' }; -const bgDark = { background: '#000' }; +const bgDark = { background: '#141414' }; const bgDark1 = { background: '#14558F' }; +const bgDark2 = { background: '#388557' }; // exported story names must be unique @@ -45,3 +46,4 @@ export const sealBlackBGLight1 = () => stateSeal({ src: logoBlack, dimension: '1 export const sealWhiteBGDark = () => stateSeal({ src: logoWhite, dimension: '100px', ...bgDark }); export const sealWhiteBGDark1 = () => stateSeal({ src: logoWhite, dimension: '100px', ...bgDark1 }); +export const sealWhiteBGDark2 = () => stateSeal({ src: logoWhite, dimension: '100px', ...bgDark2 }); \ No newline at end of file diff --git a/packages/core/stories/tokens/logo/Logo.stories.mdx b/packages/core/stories/tokens/logo/Logo.stories.mdx index 7e0ada6292..1d19cd38e1 100644 --- a/packages/core/stories/tokens/logo/Logo.stories.mdx +++ b/packages/core/stories/tokens/logo/Logo.stories.mdx @@ -65,7 +65,7 @@ Mochromatic variations of the Great Seal are black, white, and gray. These files
-The black variation hould only be used on a background that is a tint of 30% or greater. +The black variation should be used on a background that is solid white, or a tint of 90% (the lightest variant) of any brand color. @@ -80,11 +80,12 @@ The black variation hould only be used on a background that is a tint of 30% or
-The white variation of the Great Seeal should be used on a background that is a solid named color, a shade of any color, or a tint of 30% or less. +The white variation should be used on a background that is a solid brand color, or a shade of any brand color (with the exception of Ducking Yellow). + } usage="secondary" size="small" capitalized href={`${STORYBOOK_CDN_PATH}/static/images/logo/stateseal-white.svg`} download /> } usage="secondary" size="small" capitalized href={`${STORYBOOK_CDN_PATH}/static/images/logo/stateseal-white.png`} download /> @@ -94,7 +95,7 @@ The white variation of the Great Seeal should be used on a background that is a
-The gray variation of the Great Seeal should be used only on a background that is a tint of 70% or greater of any named color. +The gray variation should be used only on a background that is solid white, or a tint of 90% (the lightest variant) of any brand color. @@ -110,12 +111,12 @@ The gray variation of the Great Seeal should be used only on a background that i ### Sizing -The state seal must remain proportionate (equal in width and height) and legible relative to its size. It should also not be very large since it's use is as an identifier and not a hero image. +The state seal must remain proportionate (equal in width and height) and legible relative to its size. It should also not be very large since its use is as an identifier and not a hero image. | Medium | Recommended Size | Minimum size | Maximum size | |---|---|---|---| -| **Print (in)** | 0.5 x 0.5 | 1 x 1 | 2 x 2 | -| **Digital (px)** | 32 x 32 | 45 x 45 | 200 x 200 | +| **Print (in)** | 1 x 1 | 1 x 1 | 2 x 2 | +| **Digital (px)** | 45 x 45 | 45 x 45 | 200 x 200 |

@@ -125,4 +126,4 @@ The state seal must remain proportionate (equal in width and height) and legible ### Clear space -The Great Seal should never collide or intersect with other images graphics or text. The minimum space around it should be 25% of it's width, or roughly the width of the shield in the center of the seal. +The Great Seal should never collide or intersect with other images graphics or text. The minimum space around a standalone seal should be 25% of its width, or roughly the width of the shield in the center of the seal. From b5c0caa46972e2c1d67be86df9fa8ce9a02e42f4 Mon Sep 17 00:00:00 2001 From: tkoleary Date: Tue, 8 Dec 2020 10:51:42 -0600 Subject: [PATCH 10/11] swapped incorrectly oredered size labels --- packages/core/stories/tokens/logo/Logo.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/stories/tokens/logo/Logo.stories.mdx b/packages/core/stories/tokens/logo/Logo.stories.mdx index 7e0ada6292..4291216524 100644 --- a/packages/core/stories/tokens/logo/Logo.stories.mdx +++ b/packages/core/stories/tokens/logo/Logo.stories.mdx @@ -112,7 +112,7 @@ The gray variation of the Great Seeal should be used only on a background that i The state seal must remain proportionate (equal in width and height) and legible relative to its size. It should also not be very large since it's use is as an identifier and not a hero image. -| Medium | Recommended Size | Minimum size | Maximum size | +| Medium | Minimum size | Recommended Size | Maximum size | |---|---|---|---| | **Print (in)** | 0.5 x 0.5 | 1 x 1 | 2 x 2 | | **Digital (px)** | 32 x 32 | 45 x 45 | 200 x 200 | From 783de667c2592073eb8ad03dc56f6237c59a4eb9 Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Tue, 8 Dec 2020 11:57:02 -0500 Subject: [PATCH 11/11] add additional background color usage info --- packages/core/stories/tokens/colors/Colors.stories.mdx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/core/stories/tokens/colors/Colors.stories.mdx b/packages/core/stories/tokens/colors/Colors.stories.mdx index 6e7bb1b655..f7c2d1ceab 100644 --- a/packages/core/stories/tokens/colors/Colors.stories.mdx +++ b/packages/core/stories/tokens/colors/Colors.stories.mdx @@ -20,14 +20,13 @@ The Mayflower brand colors were selected to meet our brand and accessibility sta ## Theme Colors Theme colors are brand colors and their variants mapped to a color hierarchy, to define their specific roles and usage in the system. -For examples, `$c-bay-blue`, as the **Primary Color**, is the default color for links and primary action buttons. Accompanying shades and tints can be used to create depth. It's also used in headings, titles, icons, graphics, and calls to action. `$c-berkshires-green`, as the **Alternate Primary Color**, usually does the same job as the primary color, but when the surrounding context is different, for example in a call-to-action block. `$c-duckling-ellow`, as the **Highlight Color**, is used for time sensitive information like updates and alerts. +For examples, `$c-bay-blue`, as the **Primary Color**, is the default color for links and primary action buttons. Accompanying shades and tints can be used to create depth. It's also used in headings, titles, icons, graphics, and calls to action. `$c-berkshires-green`, as the **Alternate Primary Color**, usually does the same job as the primary color, but when the surrounding context is different, for example in a call-to-action block. `$c-duckling-ellow`, as the **Highlight Color**, is used for time sensitive information like updates and alerts. "Revolution Gray" or `$c-black`, the darkest gray on the gray scale, is primarily used as base text color. -Accompanying shades and tints can be used to create depth. In general, the lighter variants are used for outline, and the lightest variants are used as background colors. Avoid using them as text colors. +Accompanying shades and tints can be used to create depth. In general, the lighter variants are used for outline, and the lightest variants are used as background colors. The light variants should never be used as text colors. ### Primary Colors -**Primary Color** is the default and most often used color on a page and throughout the site. **Examples:** Headings, titles, icons, graphics, calls to action, buttons, -and backgrounds. +**Primary Color** is the default and most often used color on a page and throughout the site. **Examples:** Headings, titles, icons, graphics, calls to action, buttons, and backgrounds.

    { @@ -44,7 +43,7 @@ and backgrounds.
### Highlight Colors -The purpose of the highlight colors are to to draw attention to key sections or information that usually is time sensitive. **Examples:** Updates, time changes, alerts. +The purpose of the highlight colors are to to draw attention to key sections or information that usually is time sensitive. **Examples:** Updates, time changes, alerts. When being used as background colors, always pair with the dark text color `$c-black`.
    {