Repository: NYPL/nypl-design-system
Pull request #1760: DSD-2011: primitive and highlighter colors
Author: login: bigfishdesign13
Labels: name: Ship it
description: Pull requests that have been reviewed and approved.
Created: 2025-03-10T20:15:30Z | Merged: 2025-03-18T18:11:47Z

Fixes JIRA ticket [DSD-2011](https://newyorkpubliclibrary.atlassian.net/browse/DSD-2011)

## This PR does the following:

- Adds the `primitives` color object.
- Adds the `highlighter` colors to the `colors` theme object.

## How has this been tested?

<!-- Please describe in detail how you tested your changes. -->

- local Storybook

## Accessibility concerns or updates

<!-- Describe any accessibility concerns or updates that were made that should be known. -->

- n/a

### Accessibility Checklist

- [x] Checked Storybook's "Accessibility" tab for color contrast and other issues.
- [ ] The feature works with keyboard inputs including tabbing back and forward and pressing space, enter, arrow, and esc keys.
- [ ] For hidden text or when `aria-live` is used, a screenreader was used to verify the text is read.
- [ ] For features that involve UI updates and focusing on DOM `ref`s, focus management was reviewed.
- [ ] The feature works when the page is zoomed in to 200% and 400%.

## Open Questions

<!-- Any questions you want to ask the reviewer? -->

-

### Checklist:

<!-- Go over all the following points, and put an `x` in all the boxes that apply. -->
<!-- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->

- [ ] I have updated the Storybook documentation and changelog accordingly.
- [ ] I have added relevant accessibility documentation for this pull request.
- [ ] All new and existing tests passed.

### Front End Review:

<!-- This step is done AFTER creating a PR. -->
<!-- Vercel creates a static Storybook preview URL once the PR is created. -->
<!-- That preview URL is added by Vercel as a comment. -->

- [ ] Review the Vercel preview deployment once it is ready.


[DSD-2011]: https://newyorkpubliclibrary.atlassian.net/browse/DSD-2011?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ


Diff:
diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
index c1d8a9f297..df0d2fa5da 100644
--- a/.storybook/preview-body.html
+++ b/.storybook/preview-body.html
@@ -91,41 +91,38 @@
     border: 1px solid var(--nypl-colors-ui-gray-medium);
   }
 
-  .sb-show-main
-    :where(table.storybook-colors-example:not(.sb-anchor, .sb-unstyled, .sb-unstyled
-        table.storybook-colors-example)) {
-    border: none;
-  }
-  /* .sb-show-main
-    :where(table.storybook-colors-example:not(.sb-anchor, .sb-unstyled, .sb-unstyled
-        table.storybook-colors-example))
-    tr
-    td,
-  .sb-show-main table.storybook-colors-example td > span:first-of-type {
-    color: unset;
-  } */
-  .sb-show-main
-    :where(table.storybook-colors-example:not(.sb-anchor, .sb-unstyled, .sb-unstyled
-        table.storybook-colors-example))
-    tr
-    span {
-    font-size: 12px;
-  }
-  .sb-show-main
-    :where(table.storybook-colors-example:not(.sb-anchor, .sb-unstyled, .sb-unstyled
-        table.storybook-colors-example))
-    tr:nth-of-type(2n) {
-    background-color: unset;
-  }
-  .sb-show-main table.storybook-colors-example thead tr,
-  .sb-show-main table.storybook-colors-example thead th,
-  .sb-show-main table.storybook-colors-example thead th:last-of-type,
-  .sb-show-main table.storybook-colors-example thead td:last-of-type,
-  .sb-show-main table.storybook-colors-example tbody tr,
-  .sb-show-main table.storybook-colors-example tbody th,
-  .sb-show-main table.storybook-colors-example tbody td,
-  .sb-show-main table.storybook-colors-example tbody th:last-of-type,
-  .sb-show-main table.storybook-colors-example tbody td:last-of-type {
+  /* Styles for the contrast data table within the ColorCard component. */
+  .chakra-table__container:has(table.storybook-colors-example) {
+    background-color: transparent;
+    overflow: visible;
+  }
+  table.storybook-colors-example th:first-of-type,
+  table.storybook-colors-example tr:nth-of-type(2n) {
+    background-color: transparent;
+  }
+  table.storybook-colors-example thead th {
+    font-size: 10px;
+    font-weight: bold;
+  }
+  table.storybook-colors-example thead th,
+  table.storybook-colors-example tbody th,
+  table.storybook-colors-example td {
+    min-width: 100px;
+    white-space: nowrap;
+  }
+  table.storybook-colors-example thead tr,
+  table.storybook-colors-example thead th,
+  table.storybook-colors-example thead th:first-of-type,
+  table.storybook-colors-example thead th:last-of-type,
+  table.storybook-colors-example thead td:first-of-type,
+  table.storybook-colors-example thead td:last-of-type,
+  table.storybook-colors-example tbody tr,
+  table.storybook-colors-example tbody th,
+  table.storybook-colors-example tbody td,
+  table.storybook-colors-example tbody th:first-of-type,
+  table.storybook-colors-example tbody th:last-of-type,
+  table.storybook-colors-example tbody td:first-of-type,
+  table.storybook-colors-example tbody td:last-of-type {
     border: unset;
   }
 </style>
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 528cbd37f1..3dd4ef75de 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,8 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 ### Adds
 
 - Adds the `Container Query Guide` page to the `Development Guide` section of Storybook.
+- Adds the `primitives` color object.
+- Adds the `highlighter` colors to the `colors` theme object.
 
 ### Updates
 
diff --git a/src/components/AccessibilityGuide/HighlightingText.mdx b/src/components/AccessibilityGuide/HighlightingText.mdx
new file mode 100644
index 0000000000..a8d6873996
--- /dev/null
+++ b/src/components/AccessibilityGuide/HighlightingText.mdx
@@ -0,0 +1,125 @@
+import { Meta, Source } from "@storybook/blocks";
+import { Box } from "@chakra-ui/react";
+import Link from "../Link/Link";
+
+<Meta title="Accessibility Guide/Highlighting Text" />
+
+# Highlighting Text
+
+## Table of Contents
+
+- {<Link href="#general-information" target="_self">General Information</Link>}
+- {<Link href="#nypl-recommendations" target="_self">NYPL Recommendations</Link>}
+- {<Link href="#resources" target="_self">Resources</Link>}
+
+## General Information
+
+The `<mark>` HTML element is intended to represent text which is marked or
+highlighted for reference or notation purposes. The element can be used to
+implement highlighted text for semantic coding purposes.
+
+From a visual perspective, highlighting text in the UI requires more than a just
+a color indicator, as color should not be used as the only visual means of
+distinguishing a visual element.
+
+By combining the semantic meaning of the `<mark>` element and layering on an
+additional visual indicator beside color, the highlight will fulfill the
+requirements of both the relevant WCAG 2.1 AA success criteria.
+
+## NYPL Recommendations
+
+The NYPL Reservoir Design System (DS) provides semantic design tokens for a
+range of colors that can be used for highlighting text. It is recommended to
+use `yellow` to highlight text, but other colors may be used based on the use
+case.
+
+To meet WCAG 2.1 AA requirements, the full implementation of the `highlight`
+requires the addition of at least one of the following styles.
+
+### Heavier Font Weight
+
+Set the font weight to `medium` (500).
+
+#### Examples
+
+{
+
+<p>
+  This{" "}
+  <Box
+    as="mark"
+    __css={{
+      bgColor: "ui.highlighter.yellow",
+      fontWeight: "medium",
+      px: "xxxs",
+    }}
+  >
+    word
+  </Box>{" "}
+  is highlighted with yellow.
+</p>
+}
+{
+
+<p>
+  This{" "}
+  <Box
+    as="mark"
+    __css={{
+      bgColor: "ui.highlighter.blue",
+      fontWeight: "medium",
+      px: "xxxs",
+    }}
+  >
+    word
+  </Box>{" "}
+  is highlighted with blue.
+</p>
+}
+
+### Border
+
+Add a 1px border using a contrast compliant color.
+
+#### Examples
+
+{
+
+<p>
+  This <Box
+    as="mark"
+    __css={{
+      bgColor: "ui.highlighter.yellow",
+      border: "1px solid",
+      borderColor: "ui.gray.semi-dark",
+      px: "xxxs",
+    }}
+  >
+    word
+  </Box> is highlighted with yellow.
+</p>
+}
+{
+
+<p>
+  This{" "}
+  <Box
+    as="mark"
+    __css={{
+      bgColor: "ui.highlighter.blue",
+      border: "1px solid",
+      borderColor: "ui.gray.semi-dark",
+      px: "xxxs",
+    }}
+  >
+    word
+  </Box>{" "}
+  is highlighted with blue.
+</p>
+}
+
+## Resources
+
+- [WCAG Success Criterion 1.4.1 Use of Color](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html)
+- [NYPL Reservoir Design System Color Palette: Highlighter Colors](http://localhost:6006/?path=/docs/style-guide-colors--docs#highlighter-colors)
+- [The Mark Text element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark)
diff --git a/src/components/DevelopmentGuide/DesignTokens.mdx b/src/components/DevelopmentGuide/DesignTokens.mdx
index c8e914bd6c..fa22c5af8e 100644
--- a/src/components/DevelopmentGuide/DesignTokens.mdx
+++ b/src/components/DevelopmentGuide/DesignTokens.mdx
@@ -264,45 +264,48 @@ For more information about NYPL colors and to view the actual hue, see the
 
 ##### Light Mode
 
-|             | JS Token                            | CSS Token                                         | Value                   |
-| ----------- | :---------------------------------- | :------------------------------------------------ | :---------------------- |
-| **Action**  | ui.disabled.primary                 | --nypl-colors-ui-disabled-primary                 | ui.gray.light-cool      |
-|             | ui.disabled.secondary               | --nypl-colors-ui-disabled-secondary               | ui.gray.xx-light-cool   |
-|             | ui.error.primary                    | --nypl-colors-ui-error-primary                    | #97272C                 |
-|             | ui.error.secondary                  | --nypl-colors-ui-error-secondary                  | #6F0106                 |
-|             | ui.focus                            | --nypl-colors-ui-focus                            | #4181F1                 |
-|             | ui.link.primary                     | --nypl-colors-ui-link-primary                     | #0576D3                 |
-|             | ui.link.primary-05                  | --nypl-colors-ui-link-primary-05                  | rgba(5, 118, 211, 0.05) |
-|             | ui.link.secondary                   | --nypl-colors-ui-link-secondary                   | #004B98                 |
-|             | ui.status.primary                   | --nypl-colors-ui-status-primary                   | #F9E08E                 |
-|             | ui.status.secondary                 | --nypl-colors-ui-status-secondary                 | #FBE7E1                 |
-|             | ui.success.primary                  | --nypl-colors-ui-success-primary                  | #077719                 |
-|             | ui.success.secondary                | --nypl-colors-ui-success-secondary                | #095212                 |
-|             | ui.test                             | --nypl-colors-ui-test                             | #FF6347                 |
-|             | ui.warning.primary                  | --nypl-colors-ui-warning-primary                  | #F88820                 |
-|             | ui.warning.secondary                | --nypl-colors-ui-warning-secondary                | #E36D17                 |
-|             | ui.warning.tertiary                 | --nypl-colors-ui-warning-tertiary                 | #CD4D05                 |
-|             |                                     |                                                   |                         |
-| **Brand**   | brand.primary                       | --nypl-colors-brand-primary                       | #C60917                 |
-|             | brand.secondary                     | --nypl-colors-brand-secondary                     | #760000                 |
-|             |                                     |                                                   |                         |
-| **Section** | section.blogs.primary               | --nypl-colors-section-blogs-primary               | ui.gray.light-cool      |
-|             | section.blogs.secondary             | --nypl-colors-section-blogs-secondary             | ui.gray.medium          |
-|             | section.books-and-more.primary      | --nypl-colors-section-books-and-more-primary      | brand.primary           |
-|             | section.books-and-more.secondary    | --nypl-colors-section-books-and-more-secondary    | brand.secondary         |
-|             | section.books-and-more.secondary    | --nypl-colors-section-connect-primary             | #737373                 |
-|             | section.books-and-more.secondary    | --nypl-colors-section-connect-secondary           | #565656                 |
-|             | section.education.primary           | --nypl-colors-section-education-primary           | #1D62E6                 |
-|             | section.education.secondary         | --nypl-colors-section-education-secondary         | #2540A4                 |
-|             | section.locations.primary           | --nypl-colors-section-locations-primary           | brand.primary           |
-|             | section.locations.secondary         | --nypl-colors-section-locations-secondary         | brand.secondary         |
-|             | section.research.primary            | --nypl-colors-section-research-primary            | #00838A                 |
-|             | section.research.secondary          | --nypl-colors-section-research-secondary          | #006166                 |
-|             | section.research-library-lpa        | --nypl-colors-section-research-library-lpa        | #005D53                 |
-|             | section.research-library-schomburg  | --nypl-colors-section-research-library-schomburh  | #A03E31                 |
-|             | section.research-library-schwarzman | --nypl-colors-section-research-library-schwarzman | brand.secondary         |
-|             | section.whats-on.primary            | --nypl-colors-section-whats-on-primary            | #242424                 |
-|             | section.whats-on.secondary          | --nypl-colors-section-whats-on-secondary          | ui.black                |
+|             | JS Token                            | CSS Token                                         | Value                               |
+| ----------- | :---------------------------------- | :------------------------------------------------ | :---------------------------------- |
+| **Action**  | ui.disabled.primary                 | --nypl-colors-ui-disabled-primary                 | ui.gray.light-cool                  |
+|             | ui.disabled.secondary               | --nypl-colors-ui-disabled-secondary               | ui.gray.xx-light-cool               |
+|             | ui.error.primary                    | --nypl-colors-ui-error-primary                    | primitives.vividBurgundy.DEFAULT \* |
+|             | ui.error.secondary                  | --nypl-colors-ui-error-secondary                  | #6F0106                             |
+|             | ui.focus                            | --nypl-colors-ui-focus                            | primitives.blueberry.DEFAULT        |
+|             | ui.link.primary                     | --nypl-colors-ui-link-primary                     | primitives.scienceBlue.DEFAULT      |
+|             | ui.link.primary-05                  | --nypl-colors-ui-link-primary-05                  | rgba(5, 118, 211, 0.05)             |
+|             | ui.link.secondary                   | --nypl-colors-ui-link-secondary                   | #004B98                             |
+|             | ui.link.tertiary                    | --nypl-colors-ui-link-tertiary                    | primitives.irisPurple.DEFAULT       |
+|             | ui.status.primary                   | --nypl-colors-ui-status-primary                   | primitives.flavescent.DEFAULT       |
+|             | ui.status.secondary                 | --nypl-colors-ui-status-secondary                 | #FBE7E1                             |
+|             | ui.success.primary                  | --nypl-colors-ui-success-primary                  | primitives.treeGreen.DEFAULT        |
+|             | ui.success.secondary                | --nypl-colors-ui-success-secondary                | #095212                             |
+|             | ui.test                             | --nypl-colors-ui-test                             | #FF6347                             |
+|             | ui.warning.primary                  | --nypl-colors-ui-warning-primary                  | primitives.carrotOrange.DEFAULT     |
+|             | ui.warning.secondary                | --nypl-colors-ui-warning-secondary                | #E36D17                             |
+|             | ui.warning.tertiary                 | --nypl-colors-ui-warning-tertiary                 | #CD4D05                             |
+|             |                                     |                                                   |                                     |
+| **Brand**   | brand.primary                       | --nypl-colors-brand-primary                       | primitives.nyplRed.DEFAULT          |
+|             | brand.secondary                     | --nypl-colors-brand-secondary                     | #760000                             |
+|             |                                     |                                                   |                                     |
+| **Section** | section.blogs.primary               | --nypl-colors-section-blogs-primary               | ui.gray.light-cool                  |
+|             | section.blogs.secondary             | --nypl-colors-section-blogs-secondary             | ui.gray.medium                      |
+|             | section.books-and-more.primary      | --nypl-colors-section-books-and-more-primary      | brand.primary                       |
+|             | section.books-and-more.secondary    | --nypl-colors-section-books-and-more-secondary    | brand.secondary                     |
+|             | section.books-and-more.secondary    | --nypl-colors-section-connect-primary             | #737373                             |
+|             | section.books-and-more.secondary    | --nypl-colors-section-connect-secondary           | #565656                             |
+|             | section.education.primary           | --nypl-colors-section-education-primary           | #1D62E6                             |
+|             | section.education.secondary         | --nypl-colors-section-education-secondary         | #2540A4                             |
+|             | section.locations.primary           | --nypl-colors-section-locations-primary           | brand.primary                       |
+|             | section.locations.secondary         | --nypl-colors-section-locations-secondary         | brand.secondary                     |
+|             | section.research.primary            | --nypl-colors-section-research-primary            | #00838A                             |
+|             | section.research.secondary          | --nypl-colors-section-research-secondary          | #006166                             |
+|             | section.research-library-lpa        | --nypl-colors-section-research-library-lpa        | #005D53                             |
+|             | section.research-library-schomburg  | --nypl-colors-section-research-library-schomburh  | #A03E31                             |
+|             | section.research-library-schwarzman | --nypl-colors-section-research-library-schwarzman | brand.secondary                     |
+|             | section.whats-on.primary            | --nypl-colors-section-whats-on-primary            | #242424                             |
+|             | section.whats-on.secondary          | --nypl-colors-section-whats-on-secondary          | ui.black                            |
+
+\* Primitive values are not available as design tokens
 
 ##### Dark Mode
 
@@ -352,37 +355,59 @@ The semantic `color` tokens have both light and dark mode values.
 
 ##### Light Mode
 
-|                | JS Token                      | CSS Token                                   | Value                |
-| -------------- | :---------------------------- | :------------------------------------------ | :------------------- |
-| **Background** | ui.bg.page                    | --nypl-colors-ui-bg-page                    | ui.white             |
-|                | ui.bg.default                 | --nypl-colors-ui-bg-default                 | ui.gray.x-light-cool |
-|                | ui.bg.hover                   | --nypl-colors-ui-bg-hover                   | ui.gray.light-cool   |
-|                | ui.bg.active                  | --nypl-colors-ui-bg-active                  | ui.gray.medium       |
-|                |                               |                                             |                      |
-| **Border**     | ui.border.default             | --nypl-colors-ui-border-default             | ui.gray.medium       |
-|                | ui.border.hover               | --nypl-colors-ui-order-hover                | ui.gray.dark         |
-|                |                               |                                             |                      |
-| **Typography** | ui.typography.heading         | --nypl-colors-ui-typography-heading         | ui.black             |
-|                | ui.typography.body            | --nypl-colors-ui-typography-body            | ui.black             |
-|                | ui.inverse.typography.heading | --nypl-colors-ui-inverse-typography-heading | ui.white             |
-|                | ui.inverse.typography.body    | --nypl-colors-ui-inverse-typography-body    | ui.white             |
+|                 | JS Token                      | CSS Token                                   | Value                            |
+| --------------- | :---------------------------- | :------------------------------------------ | :------------------------------- |
+| **Background**  | ui.bg.page                    | --nypl-colors-ui-bg-page                    | ui.white                         |
+|                 | ui.bg.default                 | --nypl-colors-ui-bg-default                 | ui.gray.x-light-cool             |
+|                 | ui.bg.hover                   | --nypl-colors-ui-bg-hover                   | ui.gray.light-cool               |
+|                 | ui.bg.active                  | --nypl-colors-ui-bg-active                  | ui.gray.medium                   |
+|                 |                               |                                             |                                  |
+| **Border**      | ui.border.default             | --nypl-colors-ui-border-default             | ui.gray.medium                   |
+|                 | ui.border.hover               | --nypl-colors-ui-order-hover                | ui.gray.dark                     |
+|                 |                               |                                             |                                  |
+| **Typography**  | ui.typography.heading         | --nypl-colors-ui-typography-heading         | ui.black                         |
+|                 | ui.typography.body            | --nypl-colors-ui-typography-body            | ui.black                         |
+|                 | ui.inverse.typography.heading | --nypl-colors-ui-inverse-typography-heading | ui.white                         |
+|                 | ui.inverse.typography.body    | --nypl-colors-ui-inverse-typography-body    | ui.white                         |
+|                 |                               |                                             |                                  |
+| **Highlighter** | ui.highlighter.red            | --nypl-colors-ui-highlighter-red            | primatives.nyplBrand[100] \*     |
+|                 | ui.highlighter.pink           | --nypl-colors-ui-highlighter-pink           | primatives.fluorescenctPink[100] |
+|                 | ui.highlighter.burgundy       | --nypl-colors-ui-highlighter-burgundy       | primatives.vividBurgundy[100]    |
+|                 | ui.highlighter.orange         | --nypl-colors-ui-highlighter-orange         | primatives.carrotOrange[100]     |
+|                 | ui.highlighter.yellow         | --nypl-colors-ui-highlighter-yellow         | primatives.flavescent[100]       |
+|                 | ui.highlighter.green          | --nypl-colors-ui-highlighter-green          | primatives.treeGreen[100]        |
+|                 | ui.highlighter.blue           | --nypl-colors-ui-highlighter-blue           | primatives.scienceBlue[100]      |
+|                 | ui.highlighter.purple         | --nypl-colors-ui-highlighter-purple         | primatives.irisPurple[100]       |
+
+\* Primitive values are not available as design tokens
 
 ##### Dark Mode
 
-|                | JS Token                           | CSS Token                                        | Value               |
-| -------------- | :--------------------------------- | :----------------------------------------------- | :------------------ |
-| **Background** | dark.ui.bg.page                    | --nypl-colors-dark-ui-bg-page                    | ui.gray.xxxx-dark   |
-|                | dark.ui.bg.default                 | --nypl-colors-dark-ui-bg-default                 | ui.gray.xxx-dark    |
-|                | dark.ui.bg.hover                   | --nypl-colors-dark-ui-bg-hover                   | ui.gray.xx-dark     |
-|                | dark.ui.bg.active                  | --nypl-colors-dark-ui-bg-active                  | ui.gray.x-dark      |
-|                |                                    |                                                  |                     |
-| **Border**     | dark.ui.border.default             | --nypl-colors-dark-ui-border-default             | ui.gray.semi-dark   |
-|                | dark.ui.border.hover               | --nypl-colors-dark-ui-order-hover                | ui.gray.semi-medium |
-|                |                                    |                                                  |                     |
-| **Typography** | dark.ui.typography.heading         | --nypl-colors-dark-ui-typography-heading         | ui.gray.light-cool  |
-|                | dark.ui.typography.body            | --nypl-colors-dark-ui-typography-body            | ui.gray.medium      |
-|                | dark.ui.inverse.typography.heading | --nypl-colors-dark-ui-inverse-typography-heading | ui.gray.xxx-dark    |
-|                | dark.ui.inverse.typography.body    | --nypl-colors-dark-ui-inverse-typography-body    | ui.gray.xxx-dark    |
+|                 | JS Token                           | CSS Token                                        | Value                            |
+| --------------- | :--------------------------------- | :----------------------------------------------- | :------------------------------- |
+| **Background**  | dark.ui.bg.page                    | --nypl-colors-dark-ui-bg-page                    | ui.gray.xxxx-dark                |
+|                 | dark.ui.bg.default                 | --nypl-colors-dark-ui-bg-default                 | ui.gray.xxx-dark                 |
+|                 | dark.ui.bg.hover                   | --nypl-colors-dark-ui-bg-hover                   | ui.gray.xx-dark                  |
+|                 | dark.ui.bg.active                  | --nypl-colors-dark-ui-bg-active                  | ui.gray.x-dark                   |
+|                 |                                    |                                                  |                                  |
+| **Border**      | dark.ui.border.default             | --nypl-colors-dark-ui-border-default             | ui.gray.semi-dark                |
+|                 | dark.ui.border.hover               | --nypl-colors-dark-ui-order-hover                | ui.gray.semi-medium              |
+|                 |                                    |                                                  |                                  |
+| **Typography**  | dark.ui.typography.heading         | --nypl-colors-dark-ui-typography-heading         | ui.gray.light-cool               |
+|                 | dark.ui.typography.body            | --nypl-colors-dark-ui-typography-body            | ui.gray.medium                   |
+|                 | dark.ui.inverse.typography.heading | --nypl-colors-dark-ui-inverse-typography-heading | ui.gray.xxx-dark                 |
+|                 | dark.ui.inverse.typography.body    | --nypl-colors-dark-ui-inverse-typography-body    | ui.gray.xxx-dark                 |
+|                 |                                    |                                                  |                                  |
+| **Highlighter** | dark.ui.highlighter.red            | --nypl-colors-dark-ui-highlighter-red            | primatives.nyplBrand[800] \*     |
+|                 | dark.ui.highlighter.pink           | --nypl-colors-dark-ui-highlighter-pink           | primatives.fluorescenctPink[800] |
+|                 | dark.ui.highlighter.burgundy       | --nypl-colors-dark-ui-highlighter-burgundy       | primatives.vividBurgundy[800]    |
+|                 | dark.ui.highlighter.orange         | --nypl-colors-dark-ui-highlighter-orange         | primatives.carrotOrange[800]     |
+|                 | dark.ui.highlighter.yellow         | --nypl-colors-dark-ui-highlighter-yellow         | primatives.flavescent[800]       |
+|                 | dark.ui.highlighter.green          | --nypl-colors-dark-ui-highlighter-green          | primatives.treeGreen[800]        |
+|                 | dark.ui.highlighter.blue           | --nypl-colors-dark-ui-highlighter-blue           | primatives.scienceBlue[800]      |
+|                 | dark.ui.highlighter.purple         | --nypl-colors-dark-ui-highlighter-purple         | primatives.irisPurple[800]       |
+
+\* Primitive values are not available as design tokens
 
 ### Radii
 
diff --git a/src/components/StyleGuide/ColorCard.tsx b/src/components/StyleGuide/ColorCard.tsx
index 755943227a..20edad182e 100644
--- a/src/components/StyleGuide/ColorCard.tsx
+++ b/src/components/StyleGuide/ColorCard.tsx
@@ -6,51 +6,44 @@ import Icon, { IconColors } from "../Icons/Icon";
 import Table from "../Table/Table";
 import Text from "../Text/Text";
 import { checkContrast } from "../../utils/colorUtils";
+import { primitives } from "../../theme/foundations/colors";
 
 export const colorContrastData = {
   brand: {
     primary: {
       dataBlackColor: ["3.45", "Fail", "AA"],
       dataWhiteColor: ["6.08", "AA", "AAA"],
-      textColor: "ui.white",
     },
     secondary: {
       dataBlackColor: ["1.77", "Fail", "Fail"],
       dataWhiteColor: ["11.86", "AAA", "AAA"],
-      textColor: "ui.white",
     },
   },
   ui: {
     black: {
       dataBlackColor: ["1.00", "Fail", "Fail"],
       dataWhiteColor: ["21.00", "AAA", "AAA"],
-      textColor: "ui.white",
     },
     gray: {
       xxxxDark: {
         dataBlackColor: checkContrast("1.19"),
         dataWhiteColor: checkContrast("17.58"),
-        textColor: "ui.white",
       },
       xxxDark: {
         dataBlackColor: checkContrast("1.37"),
         dataWhiteColor: checkContrast("15.33"),
-        textColor: "ui.white",
       },
       xxDark: {
         dataBlackColor: checkContrast("1.55"),
         dataWhiteColor: checkContrast("13.58"),
-        textColor: "ui.white",
       },
       xDark: {
         dataBlackColor: checkContrast("2.09"),
         dataWhiteColor: checkContrast("10.05"),
-        textColor: "ui.white",
       },
       dark: {
         dataBlackColor: checkContrast("3.39"),
         dataWhiteColor: checkContrast("6.19"),
-        textColor: "ui.white",
       },
       semiDark: {
         dataBlackColor: checkContrast("6.33"),
@@ -114,19 +107,17 @@ export const colorContrastData = {
     },
   },
 };
-export const cssVars = {
+export const colorCardsData = {
   brand: [
     {
       name: "brand.primary",
       dataBlackColor: colorContrastData.brand.primary.dataBlackColor,
       dataWhiteColor: colorContrastData.brand.primary.dataWhiteColor,
-      textColor: colorContrastData.brand.primary.textColor,
     },
     {
       name: "brand.secondary",
       dataBlackColor: colorContrastData.brand.secondary.dataBlackColor,
       dataWhiteColor: colorContrastData.brand.secondary.dataWhiteColor,
-      textColor: colorContrastData.brand.secondary.textColor,
     },
   ],
   blogs: [
@@ -151,14 +142,12 @@ export const cssVars = {
       name: "section.books-and-more.primary",
       dataBlackColor: colorContrastData.brand.primary.dataBlackColor,
       dataWhiteColor: colorContrastData.brand.primary.dataWhiteColor,
-      textColor: colorContrastData.brand.primary.textColor,
     },
     {
       colorSource: "brand.secondary",
       name: "section.books-and-more.secondary",
       dataBlackColor: colorContrastData.brand.secondary.dataBlackColor,
       dataWhiteColor: colorContrastData.brand.secondary.dataWhiteColor,
-      textColor: colorContrastData.brand.secondary.textColor,
     },
   ],
   connect: [
@@ -166,13 +155,11 @@ export const cssVars = {
       name: "section.connect.primary",
       dataBlackColor: checkContrast(4.43),
       dataWhiteColor: checkContrast(4.74),
-      textColor: "ui.white",
     },
     {
       name: "section.connect.secondary",
       dataBlackColor: checkContrast(2.86),
       dataWhiteColor: checkContrast(7.34),
-      textColor: "ui.white",
     },
   ],
   education: [
@@ -180,13 +167,11 @@ export const cssVars = {
       name: "section.education.primary",
       dataBlackColor: ["3.94", "Fail", "AA"],
       dataWhiteColor: ["5.33", "AA", "AAA"],
-      textColor: "ui.white",
     },
     {
       name: "section.education.secondary",
       dataBlackColor: ["2.35", "Fail", "Fail"],
       dataWhiteColor: ["8.94", "AAA", "AAA"],
-      textColor: "ui.white",
     },
   ],
   locations: [
@@ -195,14 +180,12 @@ export const cssVars = {
       name: "section.locations.primary",
       dataBlackColor: colorContrastData.brand.primary.dataBlackColor,
       dataWhiteColor: colorContrastData.brand.primary.dataWhiteColor,
-      textColor: colorContrastData.brand.primary.textColor,
     },
     {
       colorSource: "brand.secondary",
       name: "section.locations.secondary",
       dataBlackColor: colorContrastData.brand.secondary.dataBlackColor,
       dataWhiteColor: colorContrastData.brand.secondary.dataWhiteColor,
-      textColor: colorContrastData.brand.secondary.textColor,
     },
   ],
   research: [
@@ -210,13 +193,11 @@ export const cssVars = {
       name: "section.research.primary",
       dataBlackColor: ["4.16", "AA", "AAA"],
       dataWhiteColor: ["4.44", "AA", "AAA"],
-      textColor: "ui.white",
     },
     {
       name: "section.research.secondary",
       dataBlackColor: ["2.90", "Fail", "Fail"],
       dataWhiteColor: ["7.24", "AAA", "AAA"],
-      textColor: "ui.white",
     },
   ],
   researchLibraries: [
@@ -224,20 +205,17 @@ export const cssVars = {
       name: "section.research-library.lpa",
       dataBlackColor: ["2.69", "Fail", "Fail"],
       dataWhiteColor: ["7.80", "AAA", "AAA"],
-      textColor: "ui.white",
     },
     {
       name: "section.research-library.schomburg",
       dataBlackColor: ["3.23", "Fail", "AA"],
       dataWhiteColor: ["6.51", "AA", "AAA"],
-      textColor: "ui.white",
     },
     {
       colorSource: "brand.secondary",
       name: "section.research-library.schwarzman",
       dataBlackColor: colorContrastData.brand.secondary.dataBlackColor,
       dataWhiteColor: colorContrastData.brand.secondary.dataWhiteColor,
-      textColor: colorContrastData.brand.secondary.textColor,
     },
   ],
   whatsOn: [
@@ -245,14 +223,12 @@ export const cssVars = {
       name: "section.whats-on.primary",
       dataBlackColor: ["1.35", "Fail", "Fail"],
       dataWhiteColor: ["15.52", "AAA", "AAA"],
-      textColor: "ui.white",
     },
     {
       colorSource: "ui.black",
       name: "section.whats-on.secondary",
       dataBlackColor: colorContrastData.ui.black.dataBlackColor,
       dataWhiteColor: colorContrastData.ui.black.dataWhiteColor,
-      textColor: colorContrastData.ui.black.textColor,
     },
   ],
   ui: [
@@ -293,7 +269,6 @@ export const cssVars = {
       dataWhiteColor: colorContrastData.ui.gray.dark.dataWhiteColor,
       dataBgPageColor: ["6.19", "AA", "AAA"],
       dataBgDefaultColor: ["5.68", "AA", "AAA"],
-      textColor: colorContrastData.ui.gray.dark.textColor,
     },
     {
       colorSource: "ui.gray.light-cool",
@@ -319,7 +294,6 @@ export const cssVars = {
       dataWhiteColor: checkContrast(7.95),
       dataBgPageColor: checkContrast(7.95),
       dataBgDefaultColor: checkContrast(7.29),
-      textColor: "ui.white",
     },
     {
       name: "ui.error.secondary",
@@ -327,7 +301,6 @@ export const cssVars = {
       dataWhiteColor: checkContrast(12.48),
       dataBgPageColor: checkContrast(12.48),
       dataBgDefaultColor: checkContrast(11.45),
-      textColor: "ui.white",
     },
     {
       name: "ui.focus",
@@ -343,7 +316,6 @@ export const cssVars = {
       dataWhiteColor: checkContrast(4.63),
       dataBgPageColor: checkContrast(4.63),
       dataBgDefaultColor: checkContrast(4.24),
-      textColor: "ui.white",
     },
     {
       name: "ui.link.secondary",
@@ -351,7 +323,6 @@ export const cssVars = {
       dataWhiteColor: checkContrast(8.54),
       dataBgPageColor: checkContrast(8.54),
       dataBgDefaultColor: checkContrast(7.83),
-      textColor: "ui.white",
     },
     {
       name: "ui.link.tertiary",
@@ -359,7 +330,6 @@ export const cssVars = {
       dataWhiteColor: checkContrast(11.01),
       dataBgPageColor: checkContrast(11.01),
       dataBgDefaultColor: checkContrast(10.1),
-      textColor: "ui.white",
     },
     // Colors that use transparency are tough to talk about when it comes to
     // color combinations and color contrast. For now, we will just use question
@@ -405,7 +375,6 @@ export const cssVars = {
       dataWhiteColor: checkContrast(5.73),
       dataBgPageColor: checkContrast(5.73),
       dataBgDefaultColor: checkContrast(5.26),
-      textColor: "ui.white",
     },
     {
       name: "ui.success.secondary",
@@ -413,7 +382,6 @@ export const cssVars = {
       dataWhiteColor: checkContrast(9.43),
       dataBgPageColor: checkContrast(9.43),
       dataBgDefaultColor: checkContrast(8.65),
-      textColor: "ui.white",
     },
     {
       name: "ui.test",
@@ -432,7 +400,6 @@ export const cssVars = {
       dataBrandSecondaryColor: checkContrast(1.77),
       dataBgPageColor: colorContrastData.ui.black.dataWhiteColor,
       dataBgDefaultColor: checkContrast(19.26),
-      textColor: colorContrastData.ui.black.textColor,
     },
     {
       colorSource: "ui.gray.xx-dark",
@@ -443,7 +410,6 @@ export const cssVars = {
       dataBrandSecondaryColor: checkContrast(1.77),
       dataBgPageColor: colorContrastData.ui.black.dataWhiteColor,
       dataBgDefaultColor: checkContrast(19.26),
-      textColor: colorContrastData.ui.black.textColor,
     },
     {
       colorSource: "ui.white",
@@ -499,7 +465,6 @@ export const cssVars = {
       name: "ui.black",
       dataBlackColor: colorContrastData.ui.black.dataBlackColor,
       dataWhiteColor: colorContrastData.ui.black.dataWhiteColor,
-      textColor: colorContrastData.ui.black.textColor,
     },
     {
       name: "ui.white",
@@ -513,31 +478,26 @@ export const cssVars = {
       name: "ui.gray.xxxx-dark",
       dataBlackColor: colorContrastData.ui.gray.xxxxDark.dataBlackColor,
       dataWhiteColor: colorContrastData.ui.gray.xxxxDark.dataWhiteColor,
-      textColor: colorContrastData.ui.gray.xxxxDark.textColor,
     },
     {
       name: "ui.gray.xxx-dark",
       dataBlackColor: colorContrastData.ui.gray.xxxDark.dataBlackColor,
       dataWhiteColor: colorContrastData.ui.gray.xxxDark.dataWhiteColor,
-      textColor: colorContrastData.ui.gray.xxxDark.textColor,
     },
     {
       name: "ui.gray.xx-dark",
       dataBlackColor: colorContrastData.ui.gray.xxDark.dataBlackColor,
       dataWhiteColor: colorContrastData.ui.gray.xxDark.dataWhiteColor,
-      textColor: colorContrastData.ui.gray.xxDark.textColor,
     },
     {
       name: "ui.gray.x-dark",
       dataBlackColor: colorContrastData.ui.gray.xDark.dataBlackColor,
       dataWhiteColor: colorContrastData.ui.gray.xDark.dataWhiteColor,
-      textColor: colorContrastData.ui.gray.xDark.textColor,
     },
     {
       name: "ui.gray.dark",
       dataBlackColor: colorContrastData.ui.gray.dark.dataBlackColor,
       dataWhiteColor: colorContrastData.ui.gray.dark.dataWhiteColor,
-      textColor: colorContrastData.ui.gray.dark.textColor,
     },
     {
       name: "ui.gray.semi-dark",
@@ -590,6 +550,55 @@ export const cssVars = {
       textColor: colorContrastData.ui.gray.xLightWarm.textColor,
     },
   ],
+  highlighter: [
+    {
+      name: "ui.highlighter.red",
+      showColorDataTable: false,
+      textColor: "ui.black",
+    },
+    {
+      name: "ui.highlighter.burgundy",
+      dataBlackColor: colorContrastData.ui.gray.xLightWarm.dataBlackColor,
+      dataWhiteColor: colorContrastData.ui.gray.xLightWarm.dataWhiteColor,
+      showColorDataTable: false,
+      textColor: "ui.black",
+    },
+    {
+      name: "ui.highlighter.orange",
+      dataBlackColor: colorContrastData.ui.gray.xLightWarm.dataBlackColor,
+      dataWhiteColor: colorContrastData.ui.gray.xLightWarm.dataWhiteColor,
+      showColorDataTable: false,
+      textColor: "ui.black",
+    },
+    {
+      name: "ui.highlighter.yellow",
+      dataBlackColor: colorContrastData.ui.gray.xLightWarm.dataBlackColor,
+      dataWhiteColor: colorContrastData.ui.gray.xLightWarm.dataWhiteColor,
+      showColorDataTable: false,
+      textColor: "ui.black",
+    },
+    {
+      name: "ui.highlighter.green",
+      dataBlackColor: colorContrastData.ui.gray.xLightWarm.dataBlackColor,
+      dataWhiteColor: colorContrastData.ui.gray.xLightWarm.dataWhiteColor,
+      showColorDataTable: false,
+      textColor: "ui.black",
+    },
+    {
+      name: "ui.highlighter.blue",
+      dataBlackColor: colorContrastData.ui.gray.xLightWarm.dataBlackColor,
+      dataWhiteColor: colorContrastData.ui.gray.xLightWarm.dataWhiteColor,
+      showColorDataTable: false,
+      textColor: "ui.black",
+    },
+    {
+      name: "ui.highlighter.purple",
+      dataBlackColor: colorContrastData.ui.gray.xLightWarm.dataBlackColor,
+      dataWhiteColor: colorContrastData.ui.gray.xLightWarm.dataWhiteColor,
+      showColorDataTable: false,
+      textColor: "ui.black",
+    },
+  ],
   dark: [
     {
       colorSource: "ui.gray.xxxx-dark",
@@ -598,7 +607,6 @@ export const cssVars = {
       dataWhiteColor: colorContrastData.ui.gray.xxxxDark.dataWhiteColor,
       dataHeadingColor: ["15.43", "AAA", "AAA"],
       dataBodyColor: ["9.97", "AAA", "AAA"],
-      textColor: colorContrastData.ui.gray.xxxxDark.textColor,
     },
     {
       colorSource: "ui.gray.xxx-dark",
@@ -607,7 +615,6 @@ export const cssVars = {
       dataWhiteColor: colorContrastData.ui.gray.xxxDark.dataWhiteColor,
       dataHeadingColor: ["14.48", "AAA", "AAA"],
       dataBodyColor: ["9.36", "AAA", "AAA"],
-      textColor: colorContrastData.ui.gray.xxxDark.textColor,
     },
     {
       colorSource: "ui.gray.xx-dark",
@@ -616,7 +623,6 @@ export const cssVars = {
       dataWhiteColor: colorContrastData.ui.gray.xxDark.dataWhiteColor,
       dataHeadingColor: colorContrastData.dark.ui.gray.xxDark.dataHeadingColor,
       dataBodyColor: colorContrastData.dark.ui.gray.xxDark.dataBodyColor,
-      textColor: colorContrastData.ui.gray.xxDark.textColor,
     },
     {
       colorSource: "ui.gray.x-dark",
@@ -625,7 +631,6 @@ export const cssVars = {
       dataWhiteColor: colorContrastData.ui.gray.xDark.dataWhiteColor,
       dataHeadingColor: colorContrastData.dark.ui.gray.xDark.dataHeadingColor,
       dataBodyColor: colorContrastData.dark.ui.gray.xDark.dataBodyColor,
-      textColor: colorContrastData.ui.gray.xDark.textColor,
     },
     {
       colorSource: "ui.gray.semi-dark",
@@ -652,7 +657,6 @@ export const cssVars = {
       dataWhiteColor: colorContrastData.ui.gray.dark.dataWhiteColor,
       dataDarkBgPageColor: checkContrast("1.86"),
       dataDarkBgDefaultColor: checkContrast("1.75"),
-      textColor: colorContrastData.ui.gray.dark.textColor,
     },
     {
       colorSource: "ui.gray.x-dark",
@@ -661,7 +665,6 @@ export const cssVars = {
       dataWhiteColor: colorContrastData.ui.gray.xDark.dataWhiteColor,
       dataDarkBgPageColor: checkContrast("1.16"),
       dataDarkBgDefaultColor: checkContrast("1.09"),
-      textColor: colorContrastData.ui.gray.xDark.textColor,
     },
     {
       name: "dark.ui.error.primary",
@@ -720,7 +723,6 @@ export const cssVars = {
       dataWhiteColor: ["?", "?", "?"],
       dataDarkBgPageColor: ["?", "?", "?"],
       dataDarkBgDefaultColor: ["?", "?", "?"],
-      textColor: "ui.white",
     },
     // Colors that use transparency are tough to talk about when it comes to
     // color combinations and color contrast. For now, we will just use question
@@ -731,7 +733,6 @@ export const cssVars = {
       dataWhiteColor: ["?", "?", "?"],
       dataDarkBgPageColor: ["?", "?", "?"],
       dataDarkBgDefaultColor: ["?", "?", "?"],
-      textColor: "ui.white",
     },
     {
       name: "dark.ui.status.primary",
@@ -773,7 +774,6 @@ export const cssVars = {
       dataWhiteColor: ["11.71", "AAA", "AAA"],
       dataHeadingColor: ["9.64", "AAA", "AAA"],
       dataBodyColor: ["6.23", "AA", "AAA"],
-      textColor: "ui.white",
     },
     {
       colorSource: "ui.gray.light-cool",
@@ -806,7 +806,6 @@ export const cssVars = {
       dataBrandSecondaryColor: checkContrast(1.36),
       dataDarkBgPageColor: checkContrast(1.16),
       dataDarkBgDefaultColor: checkContrast(1.09),
-      textColor: "ui.white",
     },
     {
       colorSource: "ui.gray.xxDark",
@@ -817,7 +816,6 @@ export const cssVars = {
       dataBrandSecondaryColor: checkContrast(1.36),
       dataDarkBgPageColor: checkContrast(1.16),
       dataDarkBgDefaultColor: checkContrast(1.09),
-      textColor: "ui.white",
     },
     {
       name: "dark.ui.warning.primary",
@@ -836,6 +834,36 @@ export const cssVars = {
       textColor: "ui.black",
     },
   ],
+  darkHighlighter: [
+    {
+      name: "dark.ui.highlighter.red",
+      showColorDataTable: false,
+    },
+    {
+      name: "dark.ui.highlighter.burgundy",
+      showColorDataTable: false,
+    },
+    {
+      name: "dark.ui.highlighter.orange",
+      showColorDataTable: false,
+    },
+    {
+      name: "dark.ui.highlighter.yellow",
+      showColorDataTable: false,
+    },
+    {
+      name: "dark.ui.highlighter.green",
+      showColorDataTable: false,
+    },
+    {
+      name: "dark.ui.highlighter.blue",
+      showColorDataTable: false,
+    },
+    {
+      name: "dark.ui.highlighter.purple",
+      showColorDataTable: false,
+    },
+  ],
 };
 
 export const makeColorCard = function (data) {
@@ -853,6 +881,7 @@ export const makeColorCard = function (data) {
     dataBodyColor,
     name,
     notes,
+    showColorDataTable,
     textColor,
   } = data;
   const card = (
@@ -871,23 +900,17 @@ export const makeColorCard = function (data) {
       dataBrandPrimaryColor={dataBrandPrimaryColor}
       dataBrandSecondaryColor={dataBrandSecondaryColor}
       notes={notes}
+      showColorDataTable={showColorDataTable}
       textColor={textColor}
       key={name}
     />
   );
   return card;
 };
-export const getColorCards = (category) => {
-  const cards = [];
-  const catArr = cssVars[category];
-  if (category === "researchLibraries") {
-    console.log(catArr);
-  }
-  for (let i = 0; i < catArr.length; i++) {
-    const colorData = catArr[i];
-    const card = makeColorCard(colorData);
-    cards.push(card);
-  }
+export const getColorCards = (category: string) => {
+  const catArr = colorCardsData[category];
+  const cards =
+    catArr?.length < 0 ? [] : catArr.map((color: any) => makeColorCard(color));
   return cards;
 };
 
@@ -965,10 +988,41 @@ export interface ColorCardProps extends DataTableProps {
   colorName: string;
   /** The name of the color that the current color is based on. */
   colorSource: string;
+  /** Show or hide the data table */
+  showColorDataTable: boolean;
   /** Details on how a color should be used. */
   notes?: string;
 }
 
+export const colorNamesArray = [
+  "nyplRed",
+  "fluorescentPink",
+  "vividBurgundy",
+  "carrotOrange",
+  "flavescent",
+  "treeGreen",
+  "scienceBlue",
+  "blueberry",
+  "irisPurple",
+] as const;
+export type ColorNames = typeof colorNamesArray[number];
+
+export interface ColorBoxProps {
+  /** The backgroundColor of the color card. */
+  backgroundColor: string;
+  /** The name of a color's javascript theme object. */
+  colorName: ColorNames;
+  /** The name of a color's javascript theme object. */
+  colorOption: string;
+  /** The color to use for text in the color card. */
+  textColor?: IconColors;
+}
+
+export interface ColorScaleProps {
+  /** The name of a color's javascript theme object. */
+  colorName: ColorNames;
+}
+
 export const DataTable = (props: PropsWithChildren<DataTableProps>) => {
   const {
     dataBgPageColor,
@@ -1271,6 +1325,78 @@ export const DataTable = (props: PropsWithChildren<DataTableProps>) => {
   );
 };
 
+export const ColorBox = (props: ColorBoxProps) => {
+  const { backgroundColor, colorOption, textColor = "ui.black" } = props;
+  return (
+    <Box
+      alignItems="top"
+      bg={backgroundColor}
+      color={textColor}
+      display="flex"
+      flexDirection="column"
+      fontSize="10px !important"
+      fontWeight="bold"
+      h="100px"
+      justifyContent="space-between"
+    >
+      <Box
+        bg="dark.ui.bg.default"
+        borderBottom="1px solid white"
+        display="flex"
+        h="fit-content"
+        justifyContent="center"
+        px="xxs"
+        width="100%"
+      >
+        {colorOption}
+      </Box>
+      <Box
+        bg="dark.ui.bg.default"
+        borderTop="1px solid white"
+        display="flex"
+        h="fit-content"
+        justifyContent="center"
+        px="xxs"
+        width="100%"
+      >
+        {backgroundColor}
+      </Box>
+    </Box>
+  );
+};
+export const ColorScale = (props: ColorScaleProps) => {
+  const { colorName } = props;
+  const colorOptionsArray = [
+    "DEFAULT",
+    "25",
+    "50",
+    "100",
+    "200",
+    "300",
+    "400",
+    "500",
+    "600",
+    "700",
+    "800",
+    "900",
+    "950",
+  ];
+  const boxes = colorOptionsArray.map((colorOption) => (
+    <ColorBox
+      backgroundColor={primitives[colorName][colorOption]}
+      colorName={colorName}
+      colorOption={colorOption}
+      key={`${colorName}-${colorOption}`}
+      textColor="ui.white"
+    />
+  ));
+  return (
+    <Box display="grid" gap="1px" gridTemplateColumns="repeat(13, 1fr)">
+      {boxes}
+    </Box>
+  );
+};
+
 export const ColorCard = (props: PropsWithChildren<ColorCardProps>) => {
   const {
     backgroundColor,
@@ -1287,6 +1413,7 @@ export const ColorCard = (props: PropsWithChildren<ColorCardProps>) => {
     dataBrandPrimaryColor,
     dataBrandSecondaryColor,
     notes,
+    showColorDataTable = true,
     textColor = "ui.white",
   } = props;
   const cssVarName = `--nypl-colors-${colorName.replace(/\./g, "-")}`;
@@ -1351,19 +1478,21 @@ export const ColorCard = (props: PropsWithChildren<ColorCardProps>) => {
             </Text>
           )}
         </Box>
-        <DataTable
-          dataBgPageColor={dataBgPageColor}
-          dataBgDefaultColor={dataBgDefaultColor}
-          dataDarkBgPageColor={dataDarkBgPageColor}
-          dataDarkBgDefaultColor={dataDarkBgDefaultColor}
-          dataBlackColor={dataBlackColor}
-          dataDarkHeadingColor={dataDarkHeadingColor}
-          dataDarkBodyColor={dataDarkBodyColor}
-          dataWhiteColor={dataWhiteColor}
-          dataBrandPrimaryColor={dataBrandPrimaryColor}
-          dataBrandSecondaryColor={dataBrandSecondaryColor}
-          textColor={textColor}
-        />
+        {showColorDataTable && (
+          <DataTable
+            dataBgPageColor={dataBgPageColor}
+            dataBgDefaultColor={dataBgDefaultColor}
+            dataDarkBgPageColor={dataDarkBgPageColor}
+            dataDarkBgDefaultColor={dataDarkBgDefaultColor}
+            dataBlackColor={dataBlackColor}
+            dataDarkHeadingColor={dataDarkHeadingColor}
+            dataDarkBodyColor={dataDarkBodyColor}
+            dataWhiteColor={dataWhiteColor}
+            dataBrandPrimaryColor={dataBrandPrimaryColor}
+            dataBrandSecondaryColor={dataBrandSecondaryColor}
+            textColor={textColor}
+          />
+        )}
       </HStack>
     </Box>
   );
diff --git a/src/components/StyleGuide/Colors.mdx b/src/components/StyleGuide/Colors.mdx
index 64041c7959..08189e34b9 100644
--- a/src/components/StyleGuide/Colors.mdx
+++ b/src/components/StyleGuide/Colors.mdx
@@ -1,11 +1,13 @@
 import { Box } from "@chakra-ui/react";
 import { Meta } from "@storybook/blocks";
 
+import Banner from "../Banner/Banner";
 import Heading from "../Heading/Heading";
 import Link from "../Link/Link";
 import SimpleGrid from "../Grid/SimpleGrid";
 import Text from "../Text/Text";
-import { getColorCards } from "./ColorCard";
+import { getColorCards, ColorBox, ColorScale } from "./ColorCard";
+import { primitives } from "../../theme/foundations/colors";
 
 <Meta title="Style Guide/Colors" />
 
@@ -14,13 +16,17 @@ import { getColorCards } from "./ColorCard";
 ## Table of Contents
 
 - {<Link href="#overview" target="_self">Overview</Link>}
+- {<Link href="#primitives" target="_self">Primitives</Link>}
 - {<Link href="#brand-colors" target="_self">Brand Colors</Link>}
   - {<Link href="#nypl-brand-colors" target="_self">NYPL Brand Colors</Link>}
   - {<Link href="#nypl-section-colors" target="_self">NYPL Section Colors</Link>}
 - {<Link href="#ui-colors" target="_self">UI Colors</Link>}
   - {<Link href="#semantic-colors" target="_self">Semantic Colors</Link>}
   - {<Link href="#grayscale-colors" target="_self">Grayscale Colors</Link>}
-- {<Link href="#dark-mode-ui-colors" target="_self">Dark Mode UI Colors</Link>}
+  - {<Link href="#highlighter-colors" target="_self">Highlighter Colors</Link>}
+- {<Link href="#dark-mode" target="_self">Dark Mode</Link>}
+  - {<Link href="#dark-mode-ui-colors" target="_self">UI Colors</Link>}
+  - {<Link href="#dark-mode-highlighter-colors" target="_self">Highlighter Colors</Link>}
 - {<Link href="#figma-reference" target="_self">Figma Reference</Link>}
 
 ## Overview
@@ -46,6 +52,59 @@ transparency are tough to talk about when it comes to color combinations and
 color contrast. That being the case, we have used question marks for the
 contrast values and WCAG status.
 
+## Primitives
+
+The primitive colors and the related color scales were reverse engineered using
+the legacy semantic color palette. Because of that, the primitive colors are not
+used extensively throughout the semantic color values.
+
+<Banner
+  content={
+    <>
+      <strong>IMPORTANT:</strong> Primitive color values are not available to
+      consuming apps.
+    </>
+  }
+  mb="s"
+  type="warning"
+/>
+
+### NYPL red
+
+{<ColorScale colorName="nyplRed" />}
+
+### Fluorescent pink
+
+{<ColorScale colorName="fluorescentPink" />}
+
+### Vivid burgundy (error)
+
+{<ColorScale colorName="vividBurgundy" />}
+
+### Carrot orange (warning)
+
+{<ColorScale colorName="carrotOrange" />}
+
+### Flavescent (status)
+
+{<ColorScale colorName="flavescent" />}
+
+### Tree green (success)
+
+{<ColorScale colorName="treeGreen" />}
+
+### Science blue (link)
+
+{<ColorScale colorName="scienceBlue" />}
+
+### Blueberry (focus)
+
+{<ColorScale colorName="blueberry" />}
+
+### Iris purple (link tertiary)
+
+{<ColorScale colorName="irisPurple" />}
+
 ## Brand Colors
 
 These colors are connected to the NYPL brand and are not intended to be generic.
@@ -248,7 +307,26 @@ and coding.
   </SimpleGrid>
 </Box>
 
-## Dark Mode UI Colors
+### Highlighter Colors
+
+The `highlighter` colors should be used to highlight text which is of special
+interest, comparable to using a highlighter pen.
+
+<Box
+  border="1px"
+  borderColor="ui.border.default"
+  borderRadius="5px"
+  mb="m"
+  p="s"
+>
+  <SimpleGrid columns={1} gap="s">
+    {getColorCards("highlighter")}
+  </SimpleGrid>
+</Box>
+
+## Dark Mode
+
+### Dark Mode UI Colors
 
 The following "dark mode" color fills are used for body copy and to communicate
 component and/or application state in dark mode.
@@ -267,6 +345,24 @@ These colors are not connected to the NYPL brand, but are intended to be generic
   </SimpleGrid>
 </Box>
 
+### Dark Mode Highlighter Colors
+
+The dark mode `highlighter` colors should be used in a dark mode situation to
+highlight text which is of special interest, comparable to using a highlighter
+pen.
+
+<Box
+  border="1px"
+  borderColor="ui.border.default"
+  borderRadius="5px"
+  mb="m"
+  p="s"
+>
+  <SimpleGrid columns={1} gap="s" bg="dark.ui.bg.page" p="m">
+    {getColorCards("darkHighlighter")}
+  </SimpleGrid>
+</Box>
+
 ## Figma Reference
 
 For additional information, please refer to the Figma Main file.
diff --git a/src/theme/foundations/colors.ts b/src/theme/foundations/colors.ts
index eef378b024..828de414ef 100644
--- a/src/theme/foundations/colors.ts
+++ b/src/theme/foundations/colors.ts
@@ -21,6 +21,145 @@ import { hexToRGB } from "../../utils/utils";
  */
 
 /** Reusable variables: */
+// Primitives
+export const primitives = {
+  nyplRed: {
+    DEFAULT: "#C60917",
+    "25": "#FCF3F3",
+    "50": "#F9E6E8",
+    "100": "#F4CED1",
+    "200": "#E89DA2",
+    "300": "#DD6B74",
+    "400": "#D13A45",
+    "500": "#C60917",
+    "600": "#A20410",
+    "700": "#7C000A",
+    "800": "#540005",
+    "900": "#2B0002",
+    "950": "#160001",
+  },
+  fluorescentPink: {
+    DEFAULT: "#FF389C",
+    "25": "#FFF5FA",
+    "50": "#FFE8F4",
+    "100": "#FFCFE7",
+    "200": "#FF9DCE",
+    "300": "#FF6AB5",
+    "400": "#FF389C",
+    "500": "#D52C83",
+    "600": "#AC2169",
+    "700": "#82174F",
+    "800": "#580E36",
+    "900": "#2E071C",
+    "950": "#1A0410",
+  },
+  vividBurgundy: {
+    DEFAULT: "#97272C",
+    "25": "#FAF4F4",
+    "50": "#F6EBEC",
+    "100": "#EDD9DA",
+    "200": "#DCB6B7",
+    "300": "#CB9295",
+    "400": "#B96E72",
+    "500": "#A84B4F",
+    "600": "#97272C",
+    "700": "#731B1F",
+    "800": "#4D1013",
+    "900": "#250708",
+    "950": "#100303",
+  },
+  carrotOrange: {
+    DEFAULT: "#F88820",
+    "25": "#FFF9F4",
+    "50": "#FEF2E6",
+    "100": "#FDE2CA",
+    "200": "#FCC491",
+    "300": "#FAA659",
+    "400": "#F88820",
+    "500": "#D37218",
+    "600": "#AC5B10",
+    "700": "#82450A",
+    "800": "#582F06",
+    "900": "#2E1902",
+    "950": "#1A0E01",
+  },
+  flavescent: {
+    DEFAULT: "#F9E08E",
+    "25": "#FFFEF9",
+    "50": "#FEF9EA",
+    "100": "#FCF1CB",
+    "200": "#F9E08E",
+    "300": "#DCC67C",
+    "400": "#BFAB6A",
+    "500": "#A29158",
+    "600": "#847647",
+    "700": "#665B36",
+    "800": "#474025",
+    "900": "#292515",
+    "950": "#1A170D",
+  },
+  treeGreen: {
+    DEFAULT: "#077719",
+    "25": "#F3F8F4",
+    "50": "#E6F1E8",
+    "100": "#CDE4D1",
+    "200": "#9CC9A3",
+    "300": "#6AAD75",
+    "400": "#399247",
+    "500": "#077719",
+    "600": "#046113",
+    "700": "#014A0D",
+    "800": "#003308",
+    "900": "#001A04",
+    "950": "#000D02",
+  },
+  scienceBlue: {
+    DEFAULT: "#0069BF",
+    "25": "#F2F8FC",
+    "50": "#E6F0F9",
+    "100": "#CCE1F2",
+    "200": "#99C3E5",
+    "300": "#66A5D9",
+    "400": "#3387CC",
+    "500": "#0069BF",
+    "600": "#00549C",
+    "700": "#004078",
+    "800": "#002B52",
+    "900": "#00152A",
+    "950": "#000B15",
+  },
+  blueberry: {
+    DEFAULT: "#4181F1",
+    "25": "#F6F9FE",
+    "50": "#ECF2FE",
+    "100": "#D9E6FC",
+    "200": "#B3CDF9",
+    "300": "#8DB3F7",
+    "400": "#679AF4",
+    "500": "#4181F1",
+    "600": "#3166C4",
+    "700": "#224C95",
+    "800": "#153265",
+    "900": "#0A1933",
+    "950": "#050C1A",
+  },
+  irisPurple: {
+    DEFAULT: "#551A8B",
+    "25": "#F7F4F9",
+    "50": "#F0EAF4",
+    "100": "#E1D7EB",
+    "200": "#C5B1D8",
+    "300": "#A98CC5",
+    "400": "#8D66B1",
+    "500": "#71409E",
+    "600": "#551A8B",
+    "700": "#3F116A",
+    "800": "#290A47",
+    "900": "#140422",
+    "950": "#09020F",
+  },
+};
+
 // grayscale
 const black = "#000";
 const white = "#fff";
@@ -36,16 +175,16 @@ const grayLightCool = "#E9E9E9";
 const grayxLightCool = "#F5F5F5";
 const grayxxLightCool = "#FAFAFA";
 // semantic
-const errorPrimary = "#97272C";
+const errorPrimary = primitives.nyplRed.DEFAULT;
 const errorSecondary = "#6F0106";
-const linkPrimary = "#0069BF";
+const linkPrimary = primitives.scienceBlue.DEFAULT;
 const linkSecondary = "#004B98";
-const linkTertiary = "#551A8B";
-const statusPrimary = "#F9E08E";
+const linkTertiary = primitives.irisPurple.DEFAULT;
+const statusPrimary = primitives.flavescent.DEFAULT;
 const statusSecondary = "#FBE7E1";
-const successPrimary = "#077719";
+const successPrimary = primitives.treeGreen.DEFAULT;
 const successSecondary = "#095212";
-const warningPrimary = "#F88820";
+const warningPrimary = primitives.carrotOrange.DEFAULT;
 const warningSecondary = "#E36D17";
 const warningTertiary = "#CD4D05";
 const errorPrimaryDark = "#E1767B";
@@ -60,7 +199,7 @@ const successSecondaryDark = "#81C88A";
 const warningPrimaryDark = "#DC8034";
 const warningSecondaryDark = "#EC7B1F";
 // brand
-const brandPrimary = "#C60917";
+const brandPrimary = primitives.nyplRed.DEFAULT;
 const brandSecondary = "#760000";
 const blogsPrimary = grayLightCool;
 const blogsSecondary = grayMedium;
@@ -223,7 +362,17 @@ const colors: Colors = {
       "primary-10": hexToRGB(errorPrimary, 0.1),
       secondary: errorSecondary,
     },
-    focus: "#4181F1",
+    focus: primitives.blueberry.DEFAULT,
+    highlighter: {
+      red: primitives.nyplRed[100],
+      pink: primitives.fluorescentPink[100],
+      burgundy: primitives.vividBurgundy[100],
+      orange: primitives.carrotOrange[100],
+      yellow: primitives.flavescent[100],
+      green: primitives.treeGreen[100],
+      blue: primitives.scienceBlue[100],
+      purple: primitives.irisPurple[100],
+    },
     link: {
       primary: linkPrimary,
       "primary-05": hexToRGB(linkPrimary, 0.05),
@@ -316,6 +465,16 @@ const colors: Colors = {
         secondary: errorSecondaryDark,
       },
       focus: "#6090E3",
+      highlighter: {
+        red: primitives.nyplRed[800],
+        pink: primitives.fluorescentPink[800],
+        burgundy: primitives.vividBurgundy[800],
+        orange: primitives.carrotOrange[800],
+        yellow: primitives.flavescent[800],
+        green: primitives.treeGreen[800],
+        blue: primitives.scienceBlue[800],
+        purple: primitives.irisPurple[800],
+      },
       link: {
         primary: linkPrimaryDark,
         "primary-05": hexToRGB(linkPrimaryDark, 0.05),


Reviews:
user: login: EdwinGuzman
body: Some minor updates
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-11T16:23:20Z
user: login: bigfishdesign13
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-13T19:41:31Z
user: login: bigfishdesign13
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-13T20:04:07Z
user: login: bigfishdesign13
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-13T20:08:00Z
user: login: bigfishdesign13
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-13T20:30:10Z
user: login: EdwinGuzman
body: Thanks for the updates!
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-14T21:26:29Z
user: login: bigfishdesign13
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-17T16:44:28Z

Review comments:
diff_hunk: @@ -0,0 +1,116 @@
+import { Meta, Source } from "@storybook/blocks";
+import { Box } from "@chakra-ui/react";
+import Link from "../Link/Link";
+
+<Meta title="Accessibility Guide/Highlighting Text" />
+
+# Highlighting Text
+
+## Table of Contents
+
+- {<Link href="#general-information" target="_self">General Information</Link>}
+- {<Link href="#nypl-recommendations" target="_self">NYPL Recommendations</Link>}
+- {<Link href="#resources" target="_self">Resources</Link>}
+
+## General Information
+
+Highlighting text in the UI requires more than a color indicator, as WCAG 2.1 AA
+standards stipulate that color should not be used as the only visual means of
+distinguishing a visual element.
+
+## NYPL Recommendations
+
+The NYPL Reservoir Design System (DS) provides semantic design tokens for a
+range of colors that can be used for highlighting text. It is recommended to
+use `yellow` to highlight text, but other colors may be used based on the use
+case.
+
+To meet WCAG 2.1 AA requirements, the full implementation of the `highlight`
+requires the addition of at least one of the following styles.
+
+### Heavier Font Weight
+
+Set the font weight to `medium` (500).
+
+#### Examples
+
+{
+
+<p>
+  This{" "}
+  <Box
+    as="mark"
+    __css={{
+      bgColor: "ui.highlighter.yellow",
+      fontWeight: "medium",
+      px: "xxxs",
+    }}
+  >
+    word
+  </Box>{" "}
+  is highlighted with yellow.
+</p>
+}
+{
+
+<p>
+  This{" "}
+  <Box
+    as="mark"
+    __css={{
+      bgColor: "ui.highlighter.blue",
+      fontWeight: "medium",
+      px: "xxxs",
+    }}
+  >
+    word
+  </Box>{" "}
+  is highlighted with blue.
+</p>
+}
+
+### Border
+
+Add a 1px border using a contrast compliant color.
+
+#### Examples
+
+{
+
+<p>
+  This <Box
+    as="mark"
+    __css={{
+      bgColor: "ui.highlighter.yellow",
+      border: "1px solid",
+      borderColor: "ui.gray.semi-dark",
+      px: "xxxs",
+    }}
+  >
+    word
+  </Box> is highlighted with yellow.
+</p>
+}
+{
+
+<p>
+  This{" "}
+  <Box
+    as="mark"
path: src/components/AccessibilityGuide/HighlightingText.mdx
user: login: EdwinGuzman
body: Can you include info and a link (such as https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark) for the `mark` element? I haven't used this before and it's interesting for this purpose!
created_at: 2025-03-11T01:21:36Z
author_association: MEMBER
diff_hunk: @@ -590,6 +591,55 @@ export const cssVars = {
       textColor: colorContrastData.ui.gray.xLightWarm.textColor,
     },
   ],
+  highlighter: [
+    {
+      name: "ui.highlighter.red",
+      showColorDataTable: false,
+      textColor: "ui.black",
path: src/components/StyleGuide/ColorCard.tsx
user: login: EdwinGuzman
body: Can this value be the default so it doesn't have to be added for every object?
created_at: 2025-03-11T16:11:53Z
author_association: MEMBER
diff_hunk: @@ -871,23 +959,21 @@ export const makeColorCard = function (data) {
       dataBrandPrimaryColor={dataBrandPrimaryColor}
       dataBrandSecondaryColor={dataBrandSecondaryColor}
       notes={notes}
+      showColorDataTable={showColorDataTable}
       textColor={textColor}
       key={name}
     />
   );
   return card;
 };
-export const getColorCards = (category) => {
+export const getColorCards = (category: string) => {
   const cards = [];
-  const catArr = cssVars[category];
-  if (category === "researchLibraries") {
-    console.log(catArr);
-  }
-  for (let i = 0; i < catArr.length; i++) {
-    const colorData = catArr[i];
+  const catArr = colorCardsData[category];
+  catArr.map((color: any) => {
path: src/components/StyleGuide/ColorCard.tsx
user: login: EdwinGuzman
body: `.map` returns an array so a better option is `catArr.forEach`.

But, because it returns an array, you can set `cards` to the returned value

```
const cards = catAr?.length < 0 ? [] : catArr.map((color: any) => makeColorCard(color));
```

instead of pushing the value `makeColorCard(colorData)` onto a new variable that is used in the `cards` array, you can return it directly.
created_at: 2025-03-11T16:19:42Z
author_association: MEMBER
diff_hunk: @@ -46,6 +52,59 @@ transparency are tough to talk about when it comes to color combinations and
 color contrast. That being the case, we have used question marks for the
 contrast values and WCAG status.
 
+## Primitives
+
+The primitive colors and the related colors scales were reverse engineered using
+the legacy semantic color palette. Because of that, the primitive colors are not
+used extensively throughout the semantic color assignments.
path: src/components/StyleGuide/Colors.mdx
user: login: EdwinGuzman
body: This answers my question about why they're not "root colors" or used in the base semantic tokens.
created_at: 2025-03-11T16:21:32Z
author_association: MEMBER
diff_hunk: @@ -21,6 +21,145 @@ import { hexToRGB } from "../../utils/utils";
  */
 
 /** Reusable variables: */
+// Primitives
+export const primitives = {
path: src/theme/foundations/colors.ts
user: login: EdwinGuzman
body: I really like the names of the primitives, like `scienceBlue`. Too bad we won't use them elsewhere. 
created_at: 2025-03-11T16:23:07Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,116 @@
+import { Meta, Source } from "@storybook/blocks";
+import { Box } from "@chakra-ui/react";
+import Link from "../Link/Link";
+
+<Meta title="Accessibility Guide/Highlighting Text" />
+
+# Highlighting Text
+
+## Table of Contents
+
+- {<Link href="#general-information" target="_self">General Information</Link>}
+- {<Link href="#nypl-recommendations" target="_self">NYPL Recommendations</Link>}
+- {<Link href="#resources" target="_self">Resources</Link>}
+
+## General Information
+
+Highlighting text in the UI requires more than a color indicator, as WCAG 2.1 AA
+standards stipulate that color should not be used as the only visual means of
+distinguishing a visual element.
+
+## NYPL Recommendations
+
+The NYPL Reservoir Design System (DS) provides semantic design tokens for a
+range of colors that can be used for highlighting text. It is recommended to
+use `yellow` to highlight text, but other colors may be used based on the use
+case.
+
+To meet WCAG 2.1 AA requirements, the full implementation of the `highlight`
+requires the addition of at least one of the following styles.
+
+### Heavier Font Weight
+
+Set the font weight to `medium` (500).
+
+#### Examples
+
+{
+
+<p>
+  This{" "}
+  <Box
+    as="mark"
+    __css={{
+      bgColor: "ui.highlighter.yellow",
+      fontWeight: "medium",
+      px: "xxxs",
+    }}
+  >
+    word
+  </Box>{" "}
+  is highlighted with yellow.
+</p>
+}
+{
+
+<p>
+  This{" "}
+  <Box
+    as="mark"
+    __css={{
+      bgColor: "ui.highlighter.blue",
+      fontWeight: "medium",
+      px: "xxxs",
+    }}
+  >
+    word
+  </Box>{" "}
+  is highlighted with blue.
+</p>
+}
+
+### Border
+
+Add a 1px border using a contrast compliant color.
+
+#### Examples
+
+{
+
+<p>
+  This <Box
+    as="mark"
+    __css={{
+      bgColor: "ui.highlighter.yellow",
+      border: "1px solid",
+      borderColor: "ui.gray.semi-dark",
+      px: "xxxs",
+    }}
+  >
+    word
+  </Box> is highlighted with yellow.
+</p>
+}
+{
+
+<p>
+  This{" "}
+  <Box
+    as="mark"
path: src/components/AccessibilityGuide/HighlightingText.mdx
user: login: bigfishdesign13
body: Yes I will include a link. However, I did speak with Clare about the `<mark>` element and she said it is not supported very well, as noted [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark#accessibility).
created_at: 2025-03-13T19:41:31Z
author_association: COLLABORATOR
diff_hunk: @@ -590,6 +591,55 @@ export const cssVars = {
       textColor: colorContrastData.ui.gray.xLightWarm.textColor,
     },
   ],
+  highlighter: [
+    {
+      name: "ui.highlighter.red",
+      showColorDataTable: false,
+      textColor: "ui.black",
path: src/components/StyleGuide/ColorCard.tsx
user: login: bigfishdesign13
body: The text color assignment needs to be set based on the background color for the card, so there is no single color value that work for all instances of the `ColorCard`. What I can do is set a default color value and then only add a value when the default needs to be overridden.
created_at: 2025-03-13T20:04:07Z
author_association: COLLABORATOR
diff_hunk: @@ -590,6 +591,55 @@ export const cssVars = {
       textColor: colorContrastData.ui.gray.xLightWarm.textColor,
     },
   ],
+  highlighter: [
+    {
+      name: "ui.highlighter.red",
+      showColorDataTable: false,
+      textColor: "ui.black",
path: src/components/StyleGuide/ColorCard.tsx
user: login: bigfishdesign13
body: Ha! I already have the text defaulting to `ui.white`, so I will remove all of the value in all the instance where I am setting the text to white.
created_at: 2025-03-13T20:08:00Z
author_association: COLLABORATOR
diff_hunk: @@ -21,6 +21,145 @@ import { hexToRGB } from "../../utils/utils";
  */
 
 /** Reusable variables: */
+// Primitives
+export const primitives = {
path: src/theme/foundations/colors.ts
user: login: bigfishdesign13
body: Yes, I did have some fun finding appropriate names for the primitives. But alas, the colors used in designs should be the semantic colors.
created_at: 2025-03-13T20:30:10Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,116 @@
+import { Meta, Source } from "@storybook/blocks";
+import { Box } from "@chakra-ui/react";
+import Link from "../Link/Link";
+
+<Meta title="Accessibility Guide/Highlighting Text" />
+
+# Highlighting Text
+
+## Table of Contents
+
+- {<Link href="#general-information" target="_self">General Information</Link>}
+- {<Link href="#nypl-recommendations" target="_self">NYPL Recommendations</Link>}
+- {<Link href="#resources" target="_self">Resources</Link>}
+
+## General Information
+
+Highlighting text in the UI requires more than a color indicator, as WCAG 2.1 AA
+standards stipulate that color should not be used as the only visual means of
+distinguishing a visual element.
+
+## NYPL Recommendations
+
+The NYPL Reservoir Design System (DS) provides semantic design tokens for a
+range of colors that can be used for highlighting text. It is recommended to
+use `yellow` to highlight text, but other colors may be used based on the use
+case.
+
+To meet WCAG 2.1 AA requirements, the full implementation of the `highlight`
+requires the addition of at least one of the following styles.
+
+### Heavier Font Weight
+
+Set the font weight to `medium` (500).
+
+#### Examples
+
+{
+
+<p>
+  This{" "}
+  <Box
+    as="mark"
+    __css={{
+      bgColor: "ui.highlighter.yellow",
+      fontWeight: "medium",
+      px: "xxxs",
+    }}
+  >
+    word
+  </Box>{" "}
+  is highlighted with yellow.
+</p>
+}
+{
+
+<p>
+  This{" "}
+  <Box
+    as="mark"
+    __css={{
+      bgColor: "ui.highlighter.blue",
+      fontWeight: "medium",
+      px: "xxxs",
+    }}
+  >
+    word
+  </Box>{" "}
+  is highlighted with blue.
+</p>
+}
+
+### Border
+
+Add a 1px border using a contrast compliant color.
+
+#### Examples
+
+{
+
+<p>
+  This <Box
+    as="mark"
+    __css={{
+      bgColor: "ui.highlighter.yellow",
+      border: "1px solid",
+      borderColor: "ui.gray.semi-dark",
+      px: "xxxs",
+    }}
+  >
+    word
+  </Box> is highlighted with yellow.
+</p>
+}
+{
+
+<p>
+  This{" "}
+  <Box
+    as="mark"
path: src/components/AccessibilityGuide/HighlightingText.mdx
user: login: bigfishdesign13
body: UPDATE: I spoke to Clare again about the `<mark>` element prior to my final updates. She had done some research and found that support for the element has improved in recent years, so we updated our docs to reflect that and ultimately recommend that we do use it.
created_at: 2025-03-17T16:44:28Z
author_association: COLLABORATOR

PR comments:
user: login: vercel[bot]
created_at: 2025-03-10T20:15:34Z
body: [vc]: #SLiYmUKbsARxyQOHutcme9fmwOWer0bJRTmcuxyerRw=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJueXBsLWRlc2lnbi1zeXN0ZW0iLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoibnlwbC1kZXNpZ24tc3lzdGVtLWdpdC1kc2QtMjAxMS1yY2wtaGlnaGxpZ2h0ZXItY29sb3JzLW55cGwudmVyY2VsLmFwcCJ9LCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vbnlwbC9ueXBsLWRlc2lnbi1zeXN0ZW0vR1Q1QlRIVzdDTmdwRnZMOEFBYzNqVTlTckpMYSIsInByZXZpZXdVcmwiOiJueXBsLWRlc2lnbi1zeXN0ZW0tZ2l0LWRzZC0yMDExLXJjbC1oaWdobGlnaHRlci1jb2xvcnMtbnlwbC52ZXJjZWwuYXBwIiwibmV4dENvbW1pdFN0YXR1cyI6IkRFUExPWUVEIiwicm9vdERpcmVjdG9yeSI6bnVsbH1dfQ==
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **nypl-design-system** | ✅ Ready ([Inspect](https://vercel.com/nypl/nypl-design-system/GT5BTHW7CNgpFvL8AAc3jU9SrJLa)) | [Visit Preview](https://nypl-design-system-git-dsd-2011-rcl-highlighter-colors-nypl.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/nypl-design-system-git-dsd-2011-rcl-highlighter-colors-nypl.vercel.app?via=pr-comment-feedback-link) | Mar 18, 2025 6:09pm |


author_association: NONE
user: login: bigfishdesign13
created_at: 2025-03-17T16:52:04Z
body: I asked the Design Team to review these updates and I will merge this PR once they have had a chance to review and comment.
author_association: COLLABORATOR