From 37a1bd8acd54bb3714f9cdeabe1c2f0945c762e9 Mon Sep 17 00:00:00 2001
From: Andrew Holloway <booc0mtaco@users.noreply.github.com>
Date: Wed, 3 Jan 2024 12:57:58 -0600
Subject: [PATCH] refactor(tokens): adjust tokens to be import/export
 compatible (#1819)

- update token file usages in storybook
- add in missing tokens attributes to close needed gaps on import
- updates to usages NOT resulting in visual changes
- add "group" values to exportable tokens to mark types
- standardize deprecation comments
- remove usages of tokens matching the named value
---
 .../components/DesignTokens/Tier1/Colors.tsx  |   3 -
 .../components/DesignTokens/Tier1/Sizes.jsx   |   2 +-
 .../Tier3/TypographyComponents.stories.tsx    |  13 +-
 .../Docs/Guidelines/Typography.stories.mdx    |  13 +-
 .storybook/data/tokens.json                   | 144 ++--
 README.md                                     |   2 +-
 docs/CONTRIBUTING.md                          |   8 +-
 src/components/Avatar/Avatar.module.css       |   2 +-
 src/components/Badge/Badge.module.css         |   2 +-
 src/components/DragDrop/DragDrop.module.css   |   6 +-
 src/components/Drawer/Drawer.module.css       |   2 +-
 src/components/Layout/Layout.module.css       |   4 +-
 .../LayoutContainer.module.css                |   2 +-
 .../LayoutLinelengthContainer.module.css      |   2 +-
 src/components/Modal/Modal.module.css         |   2 +-
 .../NumberIcon/NumberIcon.module.css          |   2 +-
 .../PopoverContainer.module.css               |   2 +-
 .../PopoverListItem.module.css                |   2 +-
 src/components/Select/Select.module.css       |   2 +-
 src/components/Skeleton/Skeleton.module.css   |   2 +-
 .../TimelineNav/TimelineNav.module.css        |   8 +-
 src/components/Toggle/Toggle.module.css       |   2 +-
 .../tier-1-definitions/animation.json         |   3 +-
 .../tier-1-definitions/borders.json           |   6 +-
 .../tier-1-definitions/colors.json            | 108 +--
 .../tier-1-definitions/layout.json            |   6 +-
 .../tier-1-definitions/size.json              |  55 +-
 .../tier-1-definitions/typography.json        | 179 ++---
 .../tier-1-definitions/z-index.json           |  18 +-
 .../tier-2-usage/colors-background.json       |  66 +-
 .../tier-2-usage/colors-border.json           |  78 +-
 .../tier-2-usage/colors-icon.json             |  78 +-
 .../tier-2-usage/colors-text.json             |  54 +-
 .../tier-2-usage/colors-transparent.json      |  12 +-
 .../tier-2-usage/typography.json              |  17 +-
 .../{body.json => body-colors.json}           |   6 +-
 ...dcrumb.json => breadcrumb-typography.json} |   0
 .../tier-3-component/buttons-box.json         |  15 +
 .../tier-3-component/buttons-colors.json      | 674 ++++++++++++++++++
 .../tier-3-component/buttons-typography.json  |  26 +
 .../tier-3-component/buttons.json             | 565 ---------------
 .../{checkbox.json => checkbox-colors.json}   |   3 +-
 .../tier-3-component/data-bar.json            |  16 -
 .../tier-3-component/dataBar-colors.json      |  20 +
 .../{focus-ring.json => focusRing-box.json}   |  10 -
 .../tier-3-component/focusRing-colors.json    |  18 +
 .../tier-3-component/forms-colors.json        |  34 +
 .../tier-3-component/forms-form.json          |  16 +
 .../tier-3-component/forms-typography.json    |  16 +
 src/design-tokens/tier-3-component/forms.json |  49 --
 .../{link.json => link-colors.json}           |  58 +-
 .../tier-3-component/link-typography.json     |  22 +
 .../{modals.json => modals-colors.json}       |   3 +-
 ...gress-bar.json => progressBar-colors.json} |   0
 .../{radio.json => radio-colors.json}         |   3 +-
 .../{slider.json => slider-size.json}         |   0
 .../{tab.json => tab-typography.json}         |   0
 .../{tag.json => tag-typography.json}         |   0
 ...ghlight.json => textHighlight-colors.json} |   6 +-
 .../{toggle.json => toggle-colors.json}       |  18 +-
 src/tokens-dist/css/variables.css             | 238 ++++---
 src/tokens-dist/json/variables-nested.json    | 144 ++--
 src/tokens-dist/ts/colors.ts                  |  58 +-
 63 files changed, 1653 insertions(+), 1272 deletions(-)
 rename src/design-tokens/tier-3-component/{body.json => body-colors.json} (55%)
 rename src/design-tokens/tier-3-component/{breadcrumb.json => breadcrumb-typography.json} (100%)
 create mode 100644 src/design-tokens/tier-3-component/buttons-box.json
 create mode 100644 src/design-tokens/tier-3-component/buttons-colors.json
 create mode 100644 src/design-tokens/tier-3-component/buttons-typography.json
 delete mode 100644 src/design-tokens/tier-3-component/buttons.json
 rename src/design-tokens/tier-3-component/{checkbox.json => checkbox-colors.json} (69%)
 delete mode 100644 src/design-tokens/tier-3-component/data-bar.json
 create mode 100644 src/design-tokens/tier-3-component/dataBar-colors.json
 rename src/design-tokens/tier-3-component/{focus-ring.json => focusRing-box.json} (57%)
 create mode 100644 src/design-tokens/tier-3-component/focusRing-colors.json
 create mode 100644 src/design-tokens/tier-3-component/forms-colors.json
 create mode 100644 src/design-tokens/tier-3-component/forms-form.json
 create mode 100644 src/design-tokens/tier-3-component/forms-typography.json
 delete mode 100644 src/design-tokens/tier-3-component/forms.json
 rename src/design-tokens/tier-3-component/{link.json => link-colors.json} (76%)
 create mode 100644 src/design-tokens/tier-3-component/link-typography.json
 rename src/design-tokens/tier-3-component/{modals.json => modals-colors.json} (73%)
 rename src/design-tokens/tier-3-component/{progress-bar.json => progressBar-colors.json} (100%)
 rename src/design-tokens/tier-3-component/{radio.json => radio-colors.json} (69%)
 rename src/design-tokens/tier-3-component/{slider.json => slider-size.json} (100%)
 rename src/design-tokens/tier-3-component/{tab.json => tab-typography.json} (100%)
 rename src/design-tokens/tier-3-component/{tag.json => tag-typography.json} (100%)
 rename src/design-tokens/tier-3-component/{text-highlight.json => textHighlight-colors.json} (53%)
 rename src/design-tokens/tier-3-component/{toggle.json => toggle-colors.json} (67%)

diff --git a/.storybook/components/DesignTokens/Tier1/Colors.tsx b/.storybook/components/DesignTokens/Tier1/Colors.tsx
index 82693bd01..3621486b0 100755
--- a/.storybook/components/DesignTokens/Tier1/Colors.tsx
+++ b/.storybook/components/DesignTokens/Tier1/Colors.tsx
@@ -29,9 +29,6 @@ export const Tier1Colors = () => {
           listItems={getListItems('eds-color-other-yellow', 'yellow')}
         />
         <ColorList listItems={getListItems('eds-color-other-ruby', 'ruby')} />
-        <ColorList
-          listItems={getListItems('eds-color-other-lemon', 'supporting')}
-        />
       </Section>
     </div>
   );
diff --git a/.storybook/components/DesignTokens/Tier1/Sizes.jsx b/.storybook/components/DesignTokens/Tier1/Sizes.jsx
index 1d0a85cfd..fffb98f2f 100755
--- a/.storybook/components/DesignTokens/Tier1/Sizes.jsx
+++ b/.storybook/components/DesignTokens/Tier1/Sizes.jsx
@@ -12,7 +12,7 @@ export class Tier1Sizes extends Component {
             {filterTokens('eds-size-base').map((listItem) => (
               <Grid.Item key={listItem.name}>
                 <TokenSpecimen
-                  comment="Calculated from a multiple of the base font size --eds-font-size-base"
+                  comment="Calculated from a multiple of the base font size"
                   inlineStyles={{
                     width: `var(${listItem.name})`,
                     height: `var(${listItem.name})`,
diff --git a/.storybook/components/DesignTokens/Tier3/TypographyComponents.stories.tsx b/.storybook/components/DesignTokens/Tier3/TypographyComponents.stories.tsx
index 629103999..fb7c55956 100755
--- a/.storybook/components/DesignTokens/Tier3/TypographyComponents.stories.tsx
+++ b/.storybook/components/DesignTokens/Tier3/TypographyComponents.stories.tsx
@@ -3,12 +3,13 @@ import { at, capitalize, forEach, merge } from 'lodash';
 
 import React from 'react';
 import { Grid, Section } from '../../../../src';
-import breadcrumb from '../../../../src/design-tokens/tier-3-component/breadcrumb.json';
-import button from '../../../../src/design-tokens/tier-3-component/buttons.json';
-import form from '../../../../src/design-tokens/tier-3-component/forms.json';
-import link from '../../../../src/design-tokens/tier-3-component/link.json';
-import tab from '../../../../src/design-tokens/tier-3-component/tab.json';
-import tag from '../../../../src/design-tokens/tier-3-component/tag.json';
+import breadcrumb from '../../../../src/design-tokens/tier-3-component/breadcrumb-typography.json';
+import button from '../../../../src/design-tokens/tier-3-component/buttons-typography.json';
+import form from '../../../../src/design-tokens/tier-3-component/forms-typography.json';
+import link from '../../../../src/design-tokens/tier-3-component/link-typography.json';
+import tab from '../../../../src/design-tokens/tier-3-component/tab-typography.json';
+import tag from '../../../../src/design-tokens/tier-3-component/tag-typography.json';
+
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore importing of a legacy utility file results in some 'any's, which is acceptable for this docs page
 import flatten from '../../../util/flattenToken';
diff --git a/.storybook/components/Docs/Guidelines/Typography.stories.mdx b/.storybook/components/Docs/Guidelines/Typography.stories.mdx
index 28075c0e4..6319d5fee 100644
--- a/.storybook/components/Docs/Guidelines/Typography.stories.mdx
+++ b/.storybook/components/Docs/Guidelines/Typography.stories.mdx
@@ -6,16 +6,15 @@ import { Canvas, Meta } from '@storybook/blocks';
 
 Typography in EDS follows [the same structure as design tokens](./?path=/story/documentation-guidelines-tokens--page), with the exception that typography operates as a _cluster_ of typography-specific style properties rather than a single style property.
 
-## Tier 1: Typography values
+## Basics: Typography values
 
 These token values are _never to be used_ directly by components; these token values are assembled into typography presets.
 
-Values include:
+Tokens include those prefixed by:
 
-- `eds-font-family`
-- `eds-font-size-XX`
-- `eds-font-weight-XX`
-- `eds-letter-spacing-XX`
+- `eds-font-family-*`
+- `eds-font-weight-*`
+- `eds-letter-spacing-*`
 
 ## Tier 1: Typography presets
 
@@ -52,7 +51,7 @@ When defining a new usage, you can refer to the variable by name
 
 Tier 2 typography values take the typography presets defined at the Tier 2 level and map them to a semantic usage value like so:
 
-Similar to the example above, you can use the token names in components and other code, or to define higher-tier tokens.
+Similar to the example above, you can use the token names in components and other code, make use of the presets using the `Heading` or `Text` components, or to define higher-tier tokens.
 
 These semantic values are then included in each component's style file:
 
diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json
index f14ff8f10..6dcbae780 100644
--- a/.storybook/data/tokens.json
+++ b/.storybook/data/tokens.json
@@ -9,6 +9,7 @@
   "eds-border-width-md": "2px",
   "eds-border-width-lg": "4px",
   "eds-border-width-xl": "8px",
+  "eds-border-radius-none": "0px",
   "eds-border-radius-md": "4px",
   "eds-border-radius-lg": "8px",
   "eds-border-radius-xl": "20px",
@@ -88,6 +89,7 @@
   "eds-size-10": "calc(var(--eds-size-base-unit) * 10)",
   "eds-size-11": "calc(var(--eds-size-base-unit) * 11)",
   "eds-size-12": "calc(var(--eds-size-base-unit) * 12)",
+  "eds-size-20": "calc(var(--eds-size-base-unit) * 20)",
   "eds-size-base-unit": "0.5rem",
   "eds-size-half": "calc(var(--eds-size-base-unit) / 2)",
   "eds-size-quarter": "calc(var(--eds-size-base-unit) / 4)",
@@ -111,76 +113,76 @@
   "eds-font-weight-medium": "500",
   "eds-font-weight-bold": "600",
   "eds-letter-spacing-sm": "0.5px",
-  "eds-typography-preset-001": "var(--eds-font-weight-medium) var(--eds-font-size-40)/1.2 var(--eds-font-family-primary)",
-  "eds-typography-preset-001-light": "var(--eds-font-weight-light) var(--eds-font-size-40)/1.2 var(--eds-font-family-primary)",
-  "eds-typography-preset-001-bold": "var(--eds-font-weight-bold) var(--eds-font-size-40)/1.2 var(--eds-font-family-primary)",
-  "eds-typography-preset-001-mobile": "var(--eds-font-weight-bold) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary)",
-  "eds-typography-preset-002": "var(--eds-font-weight-medium) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary)",
-  "eds-typography-preset-002-light": "var(--eds-font-weight-light) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary)",
-  "eds-typography-preset-002-bold": "var(--eds-font-weight-bold) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary)",
-  "eds-typography-preset-002-mobile": "var(--eds-font-weight-bold) var(--eds-font-size-28)/1.2857 var(--eds-font-family-primary)",
-  "eds-typography-preset-003": "var(--eds-font-weight-medium) var(--eds-font-size-22)/1.45454545 var(--eds-font-family-primary)",
-  "eds-typography-preset-003-light": "var(--eds-font-weight-light) var(--eds-font-size-22)/1.45454545 var(--eds-font-family-primary)",
-  "eds-typography-preset-003-bold": "var(--eds-font-weight-bold) var(--eds-font-size-22)/1.45454545 var(--eds-font-family-primary)",
-  "eds-typography-preset-003-mobile": "var(--eds-font-weight-bold) var(--eds-font-size-20)/1.4 var(--eds-font-family-primary)",
-  "eds-typography-preset-004": "var(--eds-font-weight-medium) var(--eds-font-size-18)/1.55555556 var(--eds-font-family-primary)",
-  "eds-typography-preset-004-light": "var(--eds-font-weight-light) var(--eds-font-size-18)/1.55555556 var(--eds-font-family-primary)",
-  "eds-typography-preset-004-bold": "var(--eds-font-weight-bold) var(--eds-font-size-18)/1.55555556 var(--eds-font-family-primary)",
-  "eds-typography-preset-005": "var(--eds-font-weight-medium) var(--eds-font-size-16)/1.5 var(--eds-font-family-primary)",
-  "eds-typography-preset-005-light": "var(--eds-font-weight-light) var(--eds-font-size-16)/1.5 var(--eds-font-family-primary)",
-  "eds-typography-preset-005-bold": "var(--eds-font-weight-bold) var(--eds-font-size-16)/1.5 var(--eds-font-family-primary)",
-  "eds-typography-preset-006": "var(--eds-font-weight-medium) var(--eds-font-size-14)/1.57142857 var(--eds-font-family-primary)",
-  "eds-typography-preset-006-light": "var(--eds-font-weight-light) var(--eds-font-size-14)/1.57142857 var(--eds-font-family-primary)",
-  "eds-typography-preset-006-bold": "var(--eds-font-weight-bold) var(--eds-font-size-14)/1.57142857 var(--eds-font-family-primary)",
-  "eds-typography-preset-007": "var(--eds-font-weight-medium) var(--eds-font-size-14)/1.28571429 var(--eds-font-family-primary)",
-  "eds-typography-preset-007-light": "var(--eds-font-weight-light) var(--eds-font-size-14)/1.28571429 var(--eds-font-family-primary)",
-  "eds-typography-preset-007-bold": "var(--eds-font-weight-bold) var(--eds-font-size-14)/1.28571429 var(--eds-font-family-primary)",
-  "eds-typography-preset-008": "var(--eds-font-weight-medium) var(--eds-font-size-12)/1.666666667 var(--eds-font-family-primary)",
-  "eds-typography-preset-008-light": "var(--eds-font-weight-light) var(--eds-font-size-12)/1.666666667 var(--eds-font-family-primary)",
-  "eds-typography-preset-008-bold": "var(--eds-font-weight-bold) var(--eds-font-size-12)/1.666666667 var(--eds-font-family-primary)",
-  "eds-typography-preset-009": "var(--eds-font-weight-medium) var(--eds-font-size-12)/1.333333333 var(--eds-font-family-primary)",
-  "eds-typography-preset-009-light": "var(--eds-font-weight-light) var(--eds-font-size-12)/1.333333333 var(--eds-font-family-primary)",
-  "eds-typography-preset-009-bold": "var(--eds-font-weight-bold) var(--eds-font-size-12)/1.333333333 var(--eds-font-family-primary)",
-  "eds-typography-preset-010": "var(--eds-font-weight-medium) var(--eds-font-size-11)/1.272727272 var(--eds-font-family-primary)",
-  "eds-typography-preset-010-light": "var(--eds-font-weight-light) var(--eds-font-size-11)/1.272727272 var(--eds-font-family-primary)",
-  "eds-typography-preset-010-bold": "var(--eds-font-weight-bold) var(--eds-font-size-11)/1.272727272 var(--eds-font-family-primary)",
-  "eds-typography-preset-011": "var(--eds-font-weight-medium) var(--eds-font-size-12)/1.333333333 var(--eds-font-family-primary)",
-  "eds-typography-preset-011-light": "var(--eds-font-weight-light) var(--eds-font-size-12)/1.333333333 var(--eds-font-family-primary)",
-  "eds-typography-preset-011-bold": "var(--eds-font-weight-bold) var(--eds-font-size-12)/1.333333333 var(--eds-font-family-primary)",
-  "eds-typography-preset-012": "var(--eds-font-weight-medium) var(--eds-font-size-11)/1.272727272 var(--eds-font-family-primary)",
-  "eds-typography-preset-012-light": "var(--eds-font-weight-light) var(--eds-font-size-11)/1.272727272 var(--eds-font-family-primary)",
-  "eds-typography-preset-012-bold": "var(--eds-font-weight-bold) var(--eds-font-size-11)/1.272727272 var(--eds-font-family-primary)",
-  "eds-typography-preset-secondary-001": "var(--eds-font-weight-medium) var(--eds-font-size-32)/1.25 var(--eds-font-family-secondary)",
-  "eds-typography-preset-secondary-001-light": "var(--eds-font-weight-light) var(--eds-font-size-32)/1.25 var(--eds-font-family-secondary)",
-  "eds-typography-preset-secondary-002": "var(--eds-font-weight-medium) var(--eds-font-size-28)/1.28571429 var(--eds-font-family-secondary)",
-  "eds-typography-preset-secondary-002-light": "var(--eds-font-weight-light) var(--eds-font-size-28)/1.28571429 var(--eds-font-family-secondary)",
-  "eds-typography-preset-secondary-003": "var(--eds-font-weight-medium) var(--eds-font-size-20)/1.4 var(--eds-font-family-secondary)",
-  "eds-typography-preset-secondary-003-light": "var(--eds-font-weight-light) var(--eds-font-size-20)/1.4 var(--eds-font-family-secondary)",
-  "eds-typography-preset-secondary-004": "var(--eds-font-weight-medium) var(--eds-font-size-16)/1.5 var(--eds-font-family-secondary)",
-  "eds-typography-preset-secondary-004-light": "var(--eds-font-weight-light) var(--eds-font-size-16)/1.5 var(--eds-font-family-secondary)",
-  "eds-typography-preset-secondary-005": "var(--eds-font-weight-medium) var(--eds-font-size-14)/1.57142857 var(--eds-font-family-secondary)",
-  "eds-typography-preset-secondary-005-light": "var(--eds-font-weight-light) var(--eds-font-size-14)/1.57142857 var(--eds-font-family-secondary)",
-  "eds-typography-preset-secondary-006": "var(--eds-font-weight-medium) var(--eds-font-size-14)/1.42857143 var(--eds-font-family-secondary)",
-  "eds-typography-preset-secondary-006-light": "var(--eds-font-weight-light) var(--eds-font-size-14)/1.42857143 var(--eds-font-family-secondary)",
-  "eds-typography-preset-secondary-007": "var(--eds-font-weight-medium) var(--eds-font-size-12)/1.66666667 var(--eds-font-family-secondary)",
-  "eds-typography-preset-secondary-007-light": "var(--eds-font-weight-light) var(--eds-font-size-12)/1.66666667 var(--eds-font-family-secondary)",
-  "eds-typography-preset-secondary-008": "var(--eds-font-weight-medium) var(--eds-font-size-12)/1.33333333 var(--eds-font-family-secondary)",
-  "eds-typography-preset-secondary-008-light": "var(--eds-font-weight-light) var(--eds-font-size-12)/1.33333333 var(--eds-font-family-secondary)",
-  "eds-typography-preset-secondary-mobile-001-light": "var(--eds-font-weight-light) var(--eds-font-size-32)/1.25 var(--eds-font-family-secondary)",
-  "eds-typography-preset-secondary-mobile-001": "var(--eds-font-weight-medium) var(--eds-font-size-32)/1.25 var(--eds-font-family-secondary)",
-  "eds-typography-preset-secondary-mobile-002-light": "var(--eds-font-weight-light) var(--eds-font-size-28)/1.28571429 var(--eds-font-family-secondary)",
-  "eds-typography-preset-secondary-mobile-002": "var(--eds-font-weight-medium) var(--eds-font-size-28)/1.28571429 var(--eds-font-family-secondary)",
-  "eds-typography-preset-secondary-mobile-003-light": "var(--eds-font-weight-light) var(--eds-font-size-20)/1.4 var(--eds-font-family-secondary)",
-  "eds-typography-preset-secondary-mobile-003": "var(--eds-font-weight-medium) var(--eds-font-size-20)/1.4 var(--eds-font-family-secondary)",
-  "eds-typography-preset-mobile-001-light": "var(--eds-font-weight-light) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary)",
-  "eds-typography-preset-mobile-001": "var(--eds-font-weight-medium) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary)",
-  "eds-typography-preset-mobile-001-bold": "var(--eds-font-weight-bold) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary)",
-  "eds-typography-preset-mobile-002-light": "var(--eds-font-weight-light) var(--eds-font-size-28)/1.28571429 var(--eds-font-family-primary)",
-  "eds-typography-preset-mobile-002": "var(--eds-font-weight-medium) var(--eds-font-size-28)/1.28571429 var(--eds-font-family-primary)",
-  "eds-typography-preset-mobile-002-bold": "var(--eds-font-weight-bold) var(--eds-font-size-28)/1.28571429 var(--eds-font-family-primary)",
-  "eds-typography-preset-mobile-003-light": "var(--eds-font-weight-light) var(--eds-font-size-20)/1.4 var(--eds-font-family-primary)",
-  "eds-typography-preset-mobile-003": "var(--eds-font-weight-medium) var(--eds-font-size-20)/1.4 var(--eds-font-family-primary)",
-  "eds-typography-preset-mobile-003-bold": "var(--eds-font-weight-bold) var(--eds-font-size-20)/1.4 var(--eds-font-family-primary)",
+  "eds-typography-preset-001": "var(--eds-font-weight-medium) 2.5rem/1.2 var(--eds-font-family-primary)",
+  "eds-typography-preset-001-light": "var(--eds-font-weight-light) 2.5rem/1.2 var(--eds-font-family-primary)",
+  "eds-typography-preset-001-bold": "var(--eds-font-weight-bold) 2.5rem/1.2 var(--eds-font-family-primary)",
+  "eds-typography-preset-001-mobile": "var(--eds-font-weight-bold) 2rem/1.25 var(--eds-font-family-primary)",
+  "eds-typography-preset-002": "var(--eds-font-weight-medium) 2rem/1.25 var(--eds-font-family-primary)",
+  "eds-typography-preset-002-light": "var(--eds-font-weight-light) 2rem/1.25 var(--eds-font-family-primary)",
+  "eds-typography-preset-002-bold": "var(--eds-font-weight-bold) 2rem/1.25 var(--eds-font-family-primary)",
+  "eds-typography-preset-002-mobile": "var(--eds-font-weight-bold) 1.75rem/1.2857 var(--eds-font-family-primary)",
+  "eds-typography-preset-003": "var(--eds-font-weight-medium) 1.375rem/1.45454545 var(--eds-font-family-primary)",
+  "eds-typography-preset-003-light": "var(--eds-font-weight-light) 1.375rem/1.45454545 var(--eds-font-family-primary)",
+  "eds-typography-preset-003-bold": "var(--eds-font-weight-bold) 1.375rem/1.45454545 var(--eds-font-family-primary)",
+  "eds-typography-preset-003-mobile": "var(--eds-font-weight-bold) 1.25rem/1.4 var(--eds-font-family-primary)",
+  "eds-typography-preset-004": "var(--eds-font-weight-medium) 1.125rem/1.55555556 var(--eds-font-family-primary)",
+  "eds-typography-preset-004-light": "var(--eds-font-weight-light) 1.125rem/1.55555556 var(--eds-font-family-primary)",
+  "eds-typography-preset-004-bold": "var(--eds-font-weight-bold) 1.125rem/1.55555556 var(--eds-font-family-primary)",
+  "eds-typography-preset-005": "var(--eds-font-weight-medium) 1rem/1.5 var(--eds-font-family-primary)",
+  "eds-typography-preset-005-light": "var(--eds-font-weight-light) 1rem/1.5 var(--eds-font-family-primary)",
+  "eds-typography-preset-005-bold": "var(--eds-font-weight-bold) 1rem/1.5 var(--eds-font-family-primary)",
+  "eds-typography-preset-006": "var(--eds-font-weight-medium) 0.875rem/1.57142857 var(--eds-font-family-primary)",
+  "eds-typography-preset-006-light": "var(--eds-font-weight-light) 0.875rem/1.57142857 var(--eds-font-family-primary)",
+  "eds-typography-preset-006-bold": "var(--eds-font-weight-bold) 0.875rem/1.57142857 var(--eds-font-family-primary)",
+  "eds-typography-preset-007": "var(--eds-font-weight-medium) 0.875rem/1.28571429 var(--eds-font-family-primary)",
+  "eds-typography-preset-007-light": "var(--eds-font-weight-light) 0.875rem/1.28571429 var(--eds-font-family-primary)",
+  "eds-typography-preset-007-bold": "var(--eds-font-weight-bold) 0.875rem/1.28571429 var(--eds-font-family-primary)",
+  "eds-typography-preset-008": "var(--eds-font-weight-medium) 0.75rem/1.666666667 var(--eds-font-family-primary)",
+  "eds-typography-preset-008-light": "var(--eds-font-weight-light) 0.75rem/1.666666667 var(--eds-font-family-primary)",
+  "eds-typography-preset-008-bold": "var(--eds-font-weight-bold) 0.75rem/1.666666667 var(--eds-font-family-primary)",
+  "eds-typography-preset-009": "var(--eds-font-weight-medium) 0.75rem/1.333333333 var(--eds-font-family-primary)",
+  "eds-typography-preset-009-light": "var(--eds-font-weight-light) 0.75rem/1.333333333 var(--eds-font-family-primary)",
+  "eds-typography-preset-009-bold": "var(--eds-font-weight-bold) 0.75rem/1.333333333 var(--eds-font-family-primary)",
+  "eds-typography-preset-010": "var(--eds-font-weight-medium) 0.6875rem/1.272727272 var(--eds-font-family-primary)",
+  "eds-typography-preset-010-light": "var(--eds-font-weight-light) 0.6875rem/1.272727272 var(--eds-font-family-primary)",
+  "eds-typography-preset-010-bold": "var(--eds-font-weight-bold) 0.6875rem/1.272727272 var(--eds-font-family-primary)",
+  "eds-typography-preset-011": "var(--eds-font-weight-medium) 0.75rem/1.333333333 var(--eds-font-family-primary)",
+  "eds-typography-preset-011-light": "var(--eds-font-weight-light) 0.75rem/1.333333333 var(--eds-font-family-primary)",
+  "eds-typography-preset-011-bold": "var(--eds-font-weight-bold) 0.75rem/1.333333333 var(--eds-font-family-primary)",
+  "eds-typography-preset-012": "var(--eds-font-weight-medium) 0.6875rem/1.272727272 var(--eds-font-family-primary)",
+  "eds-typography-preset-012-light": "var(--eds-font-weight-light) 0.6875rem/1.272727272 var(--eds-font-family-primary)",
+  "eds-typography-preset-012-bold": "var(--eds-font-weight-bold) 0.6875rem/1.272727272 var(--eds-font-family-primary)",
+  "eds-typography-preset-secondary-001": "var(--eds-font-weight-medium) 2rem/1.25 var(--eds-font-family-secondary)",
+  "eds-typography-preset-secondary-001-light": "var(--eds-font-weight-light) 2rem/1.25 var(--eds-font-family-secondary)",
+  "eds-typography-preset-secondary-002": "var(--eds-font-weight-medium) 1.75rem/1.28571429 var(--eds-font-family-secondary)",
+  "eds-typography-preset-secondary-002-light": "var(--eds-font-weight-light) 1.75rem/1.28571429 var(--eds-font-family-secondary)",
+  "eds-typography-preset-secondary-003": "var(--eds-font-weight-medium) 1.25rem/1.4 var(--eds-font-family-secondary)",
+  "eds-typography-preset-secondary-003-light": "var(--eds-font-weight-light) 1.25rem/1.4 var(--eds-font-family-secondary)",
+  "eds-typography-preset-secondary-004": "var(--eds-font-weight-medium) 1rem/1.5 var(--eds-font-family-secondary)",
+  "eds-typography-preset-secondary-004-light": "var(--eds-font-weight-light) 1rem/1.5 var(--eds-font-family-secondary)",
+  "eds-typography-preset-secondary-005": "var(--eds-font-weight-medium) 0.875rem/1.57142857 var(--eds-font-family-secondary)",
+  "eds-typography-preset-secondary-005-light": "var(--eds-font-weight-light) 0.875rem/1.57142857 var(--eds-font-family-secondary)",
+  "eds-typography-preset-secondary-006": "var(--eds-font-weight-medium) 0.875rem/1.42857143 var(--eds-font-family-secondary)",
+  "eds-typography-preset-secondary-006-light": "var(--eds-font-weight-light) 0.875rem/1.42857143 var(--eds-font-family-secondary)",
+  "eds-typography-preset-secondary-007": "var(--eds-font-weight-medium) 0.75rem/1.66666667 var(--eds-font-family-secondary)",
+  "eds-typography-preset-secondary-007-light": "var(--eds-font-weight-light) 0.75rem/1.66666667 var(--eds-font-family-secondary)",
+  "eds-typography-preset-secondary-008": "var(--eds-font-weight-medium) 0.75rem/1.33333333 var(--eds-font-family-secondary)",
+  "eds-typography-preset-secondary-008-light": "var(--eds-font-weight-light) 0.75rem/1.33333333 var(--eds-font-family-secondary)",
+  "eds-typography-preset-secondary-mobile-001-light": "var(--eds-font-weight-light) 2rem/1.25 var(--eds-font-family-secondary)",
+  "eds-typography-preset-secondary-mobile-001": "var(--eds-font-weight-medium) 2rem/1.25 var(--eds-font-family-secondary)",
+  "eds-typography-preset-secondary-mobile-002-light": "var(--eds-font-weight-light) 1.75rem/1.28571429 var(--eds-font-family-secondary)",
+  "eds-typography-preset-secondary-mobile-002": "var(--eds-font-weight-medium) 1.75rem/1.28571429 var(--eds-font-family-secondary)",
+  "eds-typography-preset-secondary-mobile-003-light": "var(--eds-font-weight-light) 1.25rem/1.4 var(--eds-font-family-secondary)",
+  "eds-typography-preset-secondary-mobile-003": "var(--eds-font-weight-medium) 1.25rem/1.4 var(--eds-font-family-secondary)",
+  "eds-typography-preset-mobile-001-light": "var(--eds-font-weight-light) 2rem/1.25 var(--eds-font-family-primary)",
+  "eds-typography-preset-mobile-001": "var(--eds-font-weight-medium) 2rem/1.25 var(--eds-font-family-primary)",
+  "eds-typography-preset-mobile-001-bold": "var(--eds-font-weight-bold) 2rem/1.25 var(--eds-font-family-primary)",
+  "eds-typography-preset-mobile-002-light": "var(--eds-font-weight-light) 1.75rem/1.28571429 var(--eds-font-family-primary)",
+  "eds-typography-preset-mobile-002": "var(--eds-font-weight-medium) 1.75rem/1.28571429 var(--eds-font-family-primary)",
+  "eds-typography-preset-mobile-002-bold": "var(--eds-font-weight-bold) 1.75rem/1.28571429 var(--eds-font-family-primary)",
+  "eds-typography-preset-mobile-003-light": "var(--eds-font-weight-light) 1.25rem/1.4 var(--eds-font-family-primary)",
+  "eds-typography-preset-mobile-003": "var(--eds-font-weight-medium) 1.25rem/1.4 var(--eds-font-family-primary)",
+  "eds-typography-preset-mobile-003-bold": "var(--eds-font-weight-bold) 1.25rem/1.4 var(--eds-font-family-primary)",
   "eds-z-index-0": "0",
   "eds-z-index-100": "100",
   "eds-z-index-200": "200",
@@ -444,7 +446,7 @@
   "eds-theme-color-progress-bar-border": "#E7E8EA",
   "eds-theme-color-radio-brand-background": "#8984E8",
   "eds-theme-color-text-highlight-foreground": "#21272D",
-  "eds-theme-color-text-highlight-background": "#F5FF8F",
+  "eds-theme-color-text-highlight-background": "#FDF1D0",
   "eds-theme-color-toggle-on-background": "var(--eds-theme-color-background-brand-primary-strong)",
   "eds-theme-color-toggle-off-background": "var(--eds-theme-color-icon-neutral-subtle)",
   "eds-theme-color-toggle-disabled-background": "var(--eds-theme-color-icon-disabled)",
diff --git a/README.md b/README.md
index 800ffa5cb..38841ea56 100644
--- a/README.md
+++ b/README.md
@@ -30,7 +30,7 @@ We also surface an `--eds-font-size-base` property to set your base `rem` font s
 
 ```css
 html {
-  font-size: var(--eds-font-size-base); /* Resets the default pixel-to-rem ratio */
+  font-size: var(--eds-font-size-base); /* Sets the default pixel-to-rem ratio */
 }
 ```
 
diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md
index 84c0ed67e..331ec4136 100644
--- a/docs/CONTRIBUTING.md
+++ b/docs/CONTRIBUTING.md
@@ -82,15 +82,19 @@ For example, tokens in figma have a name in the format 'Category/token-name', so
 When making changes to existing tokens, we want to be mindful not to cause regressions for consumers. We use the following process for updating existing tokens:
 
 1. Add in the new token to the corresponding JSON file in src/design-tokens
-2. For the new token value, use a `var()` reference, pointing to the old token name
+2. For the new token value, use a [style dictionary][sd] reference, pointing to the old token name (this will generate a css variable when processing CSS as a target).
 3. Also add a comment which notes the old token is deprecated, and which token is the replacement to use.
 
 For example, if we had a token `--eds-theme-color-background-old-name` which we want to change to `---eds-theme-color-background-new-name`, we would set the value of the new token to `var(--eds-theme-color-background-old-name)`. We can also add the following key to the JSON file.
 
+[sd]: https://amzn.github.io/style-dictionary/#/version_3?id=output-references
+
 ```json
-"comment": "@deprecated This token is deprecated. Please use eds-theme-color-new-name instead."
+"comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS. Please use eds-theme-color-new-name instead."
 ```
 
+If there is a plan to simply remove a token due to some refactoring, you can remove the suffix suggesting the token to remove at your discretion.
+
 This has the following benefits:
 
 - Users who have added a theme value to `--eds-theme-color-background-old-name` will not have their theme value break upon update.
diff --git a/src/components/Avatar/Avatar.module.css b/src/components/Avatar/Avatar.module.css
index d9c64bbf7..d9dbb8bdf 100644
--- a/src/components/Avatar/Avatar.module.css
+++ b/src/components/Avatar/Avatar.module.css
@@ -80,7 +80,7 @@
 }
 
 .avatar--circle {
-  border-radius: var(--eds-border-radius-round);
+  border-radius: var(--eds-border-radius-full);
 }
 
 .avatar__image {
diff --git a/src/components/Badge/Badge.module.css b/src/components/Badge/Badge.module.css
index ef818aa44..6a361fabf 100644
--- a/src/components/Badge/Badge.module.css
+++ b/src/components/Badge/Badge.module.css
@@ -22,7 +22,7 @@
    */
   --badge-height: calc(var(--eds-size-2-and-half) + 2 * var(--eds-border-width-sm));
 
-  z-index: var(--eds-z-index-100);
+  z-index: 100;
 
   display: flex;
   align-items: center;
diff --git a/src/components/DragDrop/DragDrop.module.css b/src/components/DragDrop/DragDrop.module.css
index 039a4c53c..8f61ab55a 100644
--- a/src/components/DragDrop/DragDrop.module.css
+++ b/src/components/DragDrop/DragDrop.module.css
@@ -27,7 +27,7 @@
       top: 0;
       left: 0;
       width: var(--eds-size-4);
-      z-index: var(--eds-z-index-100);
+      z-index: 100;
     }
   }
 
@@ -52,7 +52,7 @@
       top: 0;
       right: 0;
       width: var(--eds-size-4);
-      z-index: var(--eds-z-index-100);
+      z-index: 100;
     }
   }
 }
@@ -180,7 +180,7 @@
   align-items: center;
   height: calc(100% - 2px);
   padding: var(--eds-size-1);
-  z-index: var(--eds-z-index-400);
+  z-index: 400;
   border-radius: var(--eds-border-radius-lg);
   background: var(--eds-theme-color-background-neutral-default);
   transition: opacity var(--eds-anim-fade-quick) var(--eds-anim-ease);
diff --git a/src/components/Drawer/Drawer.module.css b/src/components/Drawer/Drawer.module.css
index 2f06ed2e2..6fa5c53b5 100644
--- a/src/components/Drawer/Drawer.module.css
+++ b/src/components/Drawer/Drawer.module.css
@@ -27,7 +27,7 @@
  */
 .drawer__container--is-active {
   visibility: visible;
-  z-index: var(--eds-z-index-400);
+  z-index: 400;
 }
 
 /**
diff --git a/src/components/Layout/Layout.module.css b/src/components/Layout/Layout.module.css
index 369a7391d..181beb93e 100644
--- a/src/components/Layout/Layout.module.css
+++ b/src/components/Layout/Layout.module.css
@@ -84,8 +84,8 @@
     top: 0;
     left: 0;
     height: 100vh;
-    width: var(--eds-l-sidebar-width);
-    z-index: var(--eds-z-index-500);
+    width: 13.5rem;
+    z-index: 500;
   }
 
   /**
diff --git a/src/components/LayoutContainer/LayoutContainer.module.css b/src/components/LayoutContainer/LayoutContainer.module.css
index 8fe48408a..675f74e85 100755
--- a/src/components/LayoutContainer/LayoutContainer.module.css
+++ b/src/components/LayoutContainer/LayoutContainer.module.css
@@ -12,7 +12,7 @@
   * Uses calc to account for the addition of padding around the layout container
   * to ensure content doesn't butt up against viewport edge.
   */
-  max-width: calc(var(--eds-l-max-width) + var(--eds-size-6));
+  max-width: calc(71.25rem + var(--eds-size-6));
   margin-left: auto;
   margin-right: auto;
   padding-left: var(--eds-size-2);
diff --git a/src/components/LayoutLinelengthContainer/LayoutLinelengthContainer.module.css b/src/components/LayoutLinelengthContainer/LayoutLinelengthContainer.module.css
index b2e446247..62e66ec66 100755
--- a/src/components/LayoutLinelengthContainer/LayoutLinelengthContainer.module.css
+++ b/src/components/LayoutLinelengthContainer/LayoutLinelengthContainer.module.css
@@ -7,5 +7,5 @@
  */
 .layout-linelength-container {
   /*  Caps the length of an excerpt of text to be easily readable. */
-  max-width: var(--eds-l-linelength-width); 
+  max-width: 36rem; 
 }
diff --git a/src/components/Modal/Modal.module.css b/src/components/Modal/Modal.module.css
index 321f55041..fd5cb4b72 100755
--- a/src/components/Modal/Modal.module.css
+++ b/src/components/Modal/Modal.module.css
@@ -204,7 +204,7 @@
   border-bottom-left-radius: var(--eds-border-radius-lg);
   border-bottom-right-radius: var(--eds-border-radius-lg);
 
-  z-index: var(--eds-z-index-100);
+  z-index: 100;
 }
 
 /**
diff --git a/src/components/NumberIcon/NumberIcon.module.css b/src/components/NumberIcon/NumberIcon.module.css
index e538d9680..eb0f2d1d0 100644
--- a/src/components/NumberIcon/NumberIcon.module.css
+++ b/src/components/NumberIcon/NumberIcon.module.css
@@ -18,7 +18,7 @@
   /* The circle part of the icon, made with borders. */
   border: var(--eds-border-width-sm) solid;
   border-color: inherit;
-  border-radius: var(--eds-border-radius-round);
+  border-radius: var(--eds-border-radius-full);
 }
 
 .number-icon--incomplete {
diff --git a/src/components/PopoverContainer/PopoverContainer.module.css b/src/components/PopoverContainer/PopoverContainer.module.css
index 02f5ff5f6..70e691485 100644
--- a/src/components/PopoverContainer/PopoverContainer.module.css
+++ b/src/components/PopoverContainer/PopoverContainer.module.css
@@ -12,7 +12,7 @@
   overflow: auto;
   box-shadow: var(--eds-box-shadow-md);
   background-color: var(--eds-theme-color-background-neutral-default);
-  z-index: var(--eds-z-index-100);
+  z-index: 100;
 
   &:focus-visible {
     @mixin focus;
diff --git a/src/components/PopoverListItem/PopoverListItem.module.css b/src/components/PopoverListItem/PopoverListItem.module.css
index e1d46afd3..c82a38059 100644
--- a/src/components/PopoverListItem/PopoverListItem.module.css
+++ b/src/components/PopoverListItem/PopoverListItem.module.css
@@ -7,7 +7,7 @@
  */
 .popover-list-item {
   display: flex;
-  font-size: var(--eds-font-size-14);
+  font-size: 0.875rem;
   padding: var(--eds-size-1) var(--eds-size-2);
   background-color: var(--eds-theme-color-form-background);
   cursor: pointer;
diff --git a/src/components/Select/Select.module.css b/src/components/Select/Select.module.css
index 661f1f4a0..4aace8b51 100644
--- a/src/components/Select/Select.module.css
+++ b/src/components/Select/Select.module.css
@@ -43,7 +43,7 @@
  * The container for the individual select options. 
  */
 .select__options {
-  z-index: var(--eds-z-index-100);
+  z-index: 100;
 }
 
 .select__option-text {
diff --git a/src/components/Skeleton/Skeleton.module.css b/src/components/Skeleton/Skeleton.module.css
index a9faddd16..7ccc4ae5f 100644
--- a/src/components/Skeleton/Skeleton.module.css
+++ b/src/components/Skeleton/Skeleton.module.css
@@ -30,7 +30,7 @@
 }
 
 .skeleton.skeleton-circle {
-  border-radius: var(--eds-border-radius-round);
+  border-radius: var(--eds-border-radius-full);
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
diff --git a/src/components/TimelineNav/TimelineNav.module.css b/src/components/TimelineNav/TimelineNav.module.css
index 526fd0caa..295060b96 100644
--- a/src/components/TimelineNav/TimelineNav.module.css
+++ b/src/components/TimelineNav/TimelineNav.module.css
@@ -79,7 +79,7 @@
   @media all and (min-width: $eds-bp-lg) {
     display: block;
     position: static;
-    z-index: var(--eds-z-index-0);
+    z-index: 0;
     flex: 1;
     width: 100%;
     height: auto;
@@ -93,7 +93,7 @@
 
 .timeline-nav__body.eds-is-active {
   position: static;
-  z-index: var(--eds-z-index-0);
+  z-index: 0;
   width: 100%;
   height: 100%;
   overflow: visible;
@@ -264,7 +264,7 @@
   /* Used on list items using number variant; provides a cosmetic cicular border */
   border: 1px solid var(--eds-theme-color-border-neutral-subtle);
   margin-right: 9px;
-  font-size: var(--eds-font-size-12);
+  font-size: 0.75rem;
   margin-left: -4px;
   background: var(--eds-theme-color-background-neutral-default);
   /* Make the border dark when li is active */
@@ -277,7 +277,7 @@
  */
 .timeline-nav__link-left {
   position: relative;
-  z-index: var(--eds-z-index-100);
+  z-index: 100;
 }
 
 /**
diff --git a/src/components/Toggle/Toggle.module.css b/src/components/Toggle/Toggle.module.css
index 67a327462..651d57737 100644
--- a/src/components/Toggle/Toggle.module.css
+++ b/src/components/Toggle/Toggle.module.css
@@ -95,7 +95,7 @@
 
   /* The transparent border is used to support Windows high contrast mode and reduce potential jiggling with adding / removing borders */
   border: var(--eds-theme-border-width) solid transparent;
-  border-radius: var(--eds-border-radius-round);
+  border-radius: var(--eds-border-radius-full);
 
   background-color: var(--eds-theme-color-toggle-thumb);
 
diff --git a/src/design-tokens/tier-1-definitions/animation.json b/src/design-tokens/tier-1-definitions/animation.json
index a64a3c35c..162e10c6a 100644
--- a/src/design-tokens/tier-1-definitions/animation.json
+++ b/src/design-tokens/tier-1-definitions/animation.json
@@ -21,7 +21,8 @@
         }
       },
       "ease": {
-        "value": "ease"
+        "value": "ease",
+        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       }
     }
   }
diff --git a/src/design-tokens/tier-1-definitions/borders.json b/src/design-tokens/tier-1-definitions/borders.json
index 95a1310ad..395e078e1 100644
--- a/src/design-tokens/tier-1-definitions/borders.json
+++ b/src/design-tokens/tier-1-definitions/borders.json
@@ -16,6 +16,9 @@
         }
       },
       "radius": {
+        "none": {
+          "value": "0px"
+        },
         "md": {
           "value": "4px"
         },
@@ -26,7 +29,8 @@
           "value": "20px"
         },
         "round": {
-          "value": "50%"
+          "value": "50%",
+          "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
         },
         "full": {
           "value": "9999px"
diff --git a/src/design-tokens/tier-1-definitions/colors.json b/src/design-tokens/tier-1-definitions/colors.json
index 1899fa143..f8ab254df 100644
--- a/src/design-tokens/tier-1-definitions/colors.json
+++ b/src/design-tokens/tier-1-definitions/colors.json
@@ -3,77 +3,81 @@
     "color": {
       "brand": {
         "grape": {
-          "100": { "value": "#F0F0FC" },
-          "200": { "value": "#E0E0F9" },
-          "300": { "value": "#C4C1F3" },
-          "400": { "value": "#A6A3EE" },
-          "500": { "value": "#8984E8" },
-          "600": { "value": "#6B65E2" },
-          "700": { "value": "#5751D2" },
-          "800": { "value": "#3E42B1" }
+          "100": { "value": "#F0F0FC", "group": "color" },
+          "200": { "value": "#E0E0F9", "group": "color" },
+          "300": { "value": "#C4C1F3", "group": "color" },
+          "400": { "value": "#A6A3EE", "group": "color" },
+          "500": { "value": "#8984E8", "group": "color" },
+          "600": { "value": "#6B65E2", "group": "color" },
+          "700": { "value": "#5751D2", "group": "color" },
+          "800": { "value": "#3E42B1", "group": "color" }
         }
       },
       "neutral": {
         "white": {
-          "value": "#FFFFFF"
+          "value": "#FFFFFF",
+          "group": "color"
         },
-        "100": { "value": "#F4F6F8" },
-        "200": { "value": "#E7E8EA" },
-        "300": { "value": "#C0C4C8" },
-        "400": { "value": "#999EA3" },
-        "500": { "value": "#878C90" },
-        "600": { "value": "#5D6369" },
-        "700": { "value": "#383C43" },
-        "800": { "value": "#21272D" },
-        "black": { "value": "#161B1F" }
+        "100": { "value": "#F4F6F8", "group": "color" },
+        "200": { "value": "#E7E8EA", "group": "color" },
+        "300": { "value": "#C0C4C8", "group": "color" },
+        "400": { "value": "#999EA3", "group": "color" },
+        "500": { "value": "#878C90", "group": "color" },
+        "600": { "value": "#5D6369", "group": "color" },
+        "700": { "value": "#383C43", "group": "color" },
+        "800": { "value": "#21272D", "group": "color" },
+        "black": { "value": "#161B1F", "group": "color" }
       },
       "other": {
         "mint": {
-          "100": { "value": "#ECFFF5" },
-          "200": { "value": "#B7E9CE" },
-          "300": { "value": "#8FDCB3" },
-          "400": { "value": "#59C88C" },
-          "500": { "value": "#00A56A" },
-          "600": { "value": "#008656" },
-          "700": { "value": "#007249" },
-          "800": { "value": "#005939" }
+          "100": { "value": "#ECFFF5", "group": "color" },
+          "200": { "value": "#B7E9CE", "group": "color" },
+          "300": { "value": "#8FDCB3", "group": "color" },
+          "400": { "value": "#59C88C", "group": "color" },
+          "500": { "value": "#00A56A", "group": "color" },
+          "600": { "value": "#008656", "group": "color" },
+          "700": { "value": "#007249", "group": "color" },
+          "800": { "value": "#005939", "group": "color" }
         },
         "yellow": {
-          "100": { "value": "#FDF1D0" },
-          "200": { "value": "#FFEBB3" },
-          "300": { "value": "#FFDD80" },
-          "400": { "value": "#F7BE2D" },
-          "500": { "value": "#D18400" },
-          "600": { "value": "#BF7300" },
-          "700": { "value": "#9E5B03" },
-          "800": { "value": "#854C03" }
+          "100": { "value": "#FDF1D0", "group": "color" },
+          "200": { "value": "#FFEBB3", "group": "color" },
+          "300": { "value": "#FFDD80", "group": "color" },
+          "400": { "value": "#F7BE2D", "group": "color" },
+          "500": { "value": "#D18400", "group": "color" },
+          "600": { "value": "#BF7300", "group": "color" },
+          "700": { "value": "#9E5B03", "group": "color" },
+          "800": { "value": "#854C03", "group": "color" }
         },
         "lemon": {
-          "value": "#F5FF8F"
+          "value": "#F5FF8F",
+          "group": "color",
+          "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
         },
         "eraser": {
           "value": "#F3DCE2",
-          "comment": "@deprecated This token has been deprecated and will be removed in a future EDS release."
+          "group": "color",
+          "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
         },
         "orange": {
-          "100": { "value": "#FFF1E9" },
-          "200": { "value": "#FFCBA5" },
-          "300": { "value": "#FFAF76" },
-          "400": { "value": "#F6924A" },
-          "500": { "value": "#E06B00" },
-          "600": { "value": "#C64600" },
-          "700": { "value": "#AC3400" },
-          "800": { "value": "#842800" }
+          "100": { "value": "#FFF1E9", "group": "color" },
+          "200": { "value": "#FFCBA5", "group": "color" },
+          "300": { "value": "#FFAF76", "group": "color" },
+          "400": { "value": "#F6924A", "group": "color" },
+          "500": { "value": "#E06B00", "group": "color" },
+          "600": { "value": "#C64600", "group": "color" },
+          "700": { "value": "#AC3400", "group": "color" },
+          "800": { "value": "#842800", "group": "color" }
         },
         "ruby": {
-          "100": { "value": "#FFF0F4" },
-          "200": { "value": "#FFCBD7" },
-          "300": { "value": "#FB90B0" },
-          "400": { "value": "#F76C96" },
-          "500": { "value": "#F1497B" },
-          "600": { "value": "#D41E52" },
-          "700": { "value": "#BD0044" },
-          "800": { "value": "#8F0134" }
+          "100": { "value": "#FFF0F4", "group": "color" },
+          "200": { "value": "#FFCBD7", "group": "color" },
+          "300": { "value": "#FB90B0", "group": "color" },
+          "400": { "value": "#F76C96", "group": "color" },
+          "500": { "value": "#F1497B", "group": "color" },
+          "600": { "value": "#D41E52", "group": "color" },
+          "700": { "value": "#BD0044", "group": "color" },
+          "800": { "value": "#8F0134", "group": "color" }
         }
       }
     }
diff --git a/src/design-tokens/tier-1-definitions/layout.json b/src/design-tokens/tier-1-definitions/layout.json
index 0db6873ca..a540d92ea 100644
--- a/src/design-tokens/tier-1-definitions/layout.json
+++ b/src/design-tokens/tier-1-definitions/layout.json
@@ -3,15 +3,15 @@
     "l": {
       "max-width": {
         "value": "71.25rem",
-        "comment": "@deprecated Layout tokens are deprecated and will be removed in a future release"
+        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "sidebar-width": {
         "value": "13.5rem",
-        "comment": "@deprecated Layout tokens are deprecated and will be removed in a future release"
+        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "linelength-width": {
         "value": "36rem",
-        "comment": "@deprecated Layout tokens are deprecated and will be removed in a future release"
+        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       }
     }
   }
diff --git a/src/design-tokens/tier-1-definitions/size.json b/src/design-tokens/tier-1-definitions/size.json
index 6a6b06f1d..5d3ff891a 100644
--- a/src/design-tokens/tier-1-definitions/size.json
+++ b/src/design-tokens/tier-1-definitions/size.json
@@ -2,55 +2,76 @@
   "eds": {
     "size": {
       "base-unit": {
-        "value": "0.5rem"
+        "value": "0.5rem",
+        "group": "size"
       },
       "half": {
-        "value": "calc(var(--eds-size-base-unit) / 2)"
+        "value": "calc(var(--eds-size-base-unit) / 2)",
+        "group": "size"
       },
       "quarter": {
-        "value": "calc(var(--eds-size-base-unit) / 4)"
+        "value": "calc(var(--eds-size-base-unit) / 4)",
+        "group": "size"
       },
       "1": {
-        "value": "var(--eds-size-base-unit)"
+        "value": "var(--eds-size-base-unit)",
+        "group": "size"
       },
       "1-and-half": {
-        "value": "calc(var(--eds-size-base-unit) * 1.5)"
+        "value": "calc(var(--eds-size-base-unit) * 1.5)",
+        "group": "size"
       },
       "2": {
-        "value": "calc(var(--eds-size-base-unit) * 2)"
+        "value": "calc(var(--eds-size-base-unit) * 2)",
+        "group": "size"
       },
       "2-and-half": {
-        "value": "calc(var(--eds-size-base-unit) * 2.5)"
+        "value": "calc(var(--eds-size-base-unit) * 2.5)",
+        "group": "size"
       },
       "3": {
-        "value": "calc(var(--eds-size-base-unit) * 3)"
+        "value": "calc(var(--eds-size-base-unit) * 3)",
+        "group": "size"
       },
       "4": {
-        "value": "calc(var(--eds-size-base-unit) * 4)"
+        "value": "calc(var(--eds-size-base-unit) * 4)",
+        "group": "size"
       },
       "5": {
-        "value": "calc(var(--eds-size-base-unit) * 5)"
+        "value": "calc(var(--eds-size-base-unit) * 5)",
+        "group": "size"
       },
       "6": {
-        "value": "calc(var(--eds-size-base-unit) * 6)"
+        "value": "calc(var(--eds-size-base-unit) * 6)",
+        "group": "size"
       },
       "7": {
-        "value": "calc(var(--eds-size-base-unit) * 7)"
+        "value": "calc(var(--eds-size-base-unit) * 7)",
+        "group": "size"
       },
       "8": {
-        "value": "calc(var(--eds-size-base-unit) * 8)"
+        "value": "calc(var(--eds-size-base-unit) * 8)",
+        "group": "size"
       },
       "9": {
-        "value": "calc(var(--eds-size-base-unit) * 9)"
+        "value": "calc(var(--eds-size-base-unit) * 9)",
+        "group": "size"
       },
       "10": {
-        "value": "calc(var(--eds-size-base-unit) * 10)"
+        "value": "calc(var(--eds-size-base-unit) * 10)",
+        "group": "size"
       },
       "11": {
-        "value": "calc(var(--eds-size-base-unit) * 11)"
+        "value": "calc(var(--eds-size-base-unit) * 11)",
+        "group": "size"
       },
       "12": {
-        "value": "calc(var(--eds-size-base-unit) * 12)"
+        "value": "calc(var(--eds-size-base-unit) * 12)",
+        "group": "size"
+      },
+      "20": {
+        "value": "calc(var(--eds-size-base-unit) * 20)",
+        "group": "size"
       }
     }
   }
diff --git a/src/design-tokens/tier-1-definitions/typography.json b/src/design-tokens/tier-1-definitions/typography.json
index 1cd6b34f6..9951364b1 100644
--- a/src/design-tokens/tier-1-definitions/typography.json
+++ b/src/design-tokens/tier-1-definitions/typography.json
@@ -14,37 +14,48 @@
         "comment": "Base font size for design system in px"
       },
       "40": {
-        "value": "2.5rem"
+        "value": "2.5rem",
+        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "32": {
-        "value": "2rem"
+        "value": "2rem",
+        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "28": {
-        "value": "1.75rem"
+        "value": "1.75rem",
+        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "24": {
-        "value": "1.5rem"
+        "value": "1.5rem",
+        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "22": {
-        "value": "1.375rem"
+        "value": "1.375rem",
+        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "20": {
-        "value": "1.25rem"
+        "value": "1.25rem",
+        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "18": {
-        "value": "1.125rem"
+        "value": "1.125rem",
+        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "16": {
-        "value": "1rem"
+        "value": "1rem",
+        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "14": {
-        "value": "0.875rem"
+        "value": "0.875rem",
+        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "12": {
-        "value": "0.75rem"
+        "value": "0.75rem",
+        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "11": {
-        "value": "0.6875rem"
+        "value": "0.6875rem",
+        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       }
     },
     "font-weight": {
@@ -67,242 +78,242 @@
       "preset": {
         "001": {
           "@": {
-            "value": "var(--eds-font-weight-medium) var(--eds-font-size-40)/1.2 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-medium) 2.5rem/1.2 var(--eds-font-family-primary)"
           },
           "light": {
-            "value": "var(--eds-font-weight-light) var(--eds-font-size-40)/1.2 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-light) 2.5rem/1.2 var(--eds-font-family-primary)"
           },
           "bold": {
-            "value": "var(--eds-font-weight-bold) var(--eds-font-size-40)/1.2 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-bold) 2.5rem/1.2 var(--eds-font-family-primary)"
           },
           "mobile": {
-            "value": "var(--eds-font-weight-bold) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary)",
-            "comment": "@deprecated This is deprecated and missing from figma"
+            "value": "var(--eds-font-weight-bold) 2rem/1.25 var(--eds-font-family-primary)",
+            "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
           }
         },
         "002": {
           "@": {
-            "value": "var(--eds-font-weight-medium) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-medium) 2rem/1.25 var(--eds-font-family-primary)"
           },
           "light": {
-            "value": "var(--eds-font-weight-light) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-light) 2rem/1.25 var(--eds-font-family-primary)"
           },
           "bold": {
-            "value": "var(--eds-font-weight-bold) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-bold) 2rem/1.25 var(--eds-font-family-primary)"
           },
           "mobile": {
-            "value": "var(--eds-font-weight-bold) var(--eds-font-size-28)/1.2857 var(--eds-font-family-primary)",
-            "comment": "@deprecated This is deprecated and missing from figma"
+            "value": "var(--eds-font-weight-bold) 1.75rem/1.2857 var(--eds-font-family-primary)",
+            "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
           }
         },
         "003": {
           "@": {
-            "value": "var(--eds-font-weight-medium) var(--eds-font-size-22)/1.45454545 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-medium) 1.375rem/1.45454545 var(--eds-font-family-primary)"
           },
           "light": {
-            "value": "var(--eds-font-weight-light) var(--eds-font-size-22)/1.45454545 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-light) 1.375rem/1.45454545 var(--eds-font-family-primary)"
           },
           "bold": {
-            "value": "var(--eds-font-weight-bold) var(--eds-font-size-22)/1.45454545 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-bold) 1.375rem/1.45454545 var(--eds-font-family-primary)"
           },
           "mobile": {
-            "value": "var(--eds-font-weight-bold) var(--eds-font-size-20)/1.4 var(--eds-font-family-primary)",
-            "comment": "@deprecated This is deprecated and missing from figma"
+            "value": "var(--eds-font-weight-bold) 1.25rem/1.4 var(--eds-font-family-primary)",
+            "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
           }
         },
         "004": {
           "@": {
-            "value": "var(--eds-font-weight-medium) var(--eds-font-size-18)/1.55555556 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-medium) 1.125rem/1.55555556 var(--eds-font-family-primary)"
           },
           "light": {
-            "value": "var(--eds-font-weight-light) var(--eds-font-size-18)/1.55555556 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-light) 1.125rem/1.55555556 var(--eds-font-family-primary)"
           },
           "bold": {
-            "value": "var(--eds-font-weight-bold) var(--eds-font-size-18)/1.55555556 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-bold) 1.125rem/1.55555556 var(--eds-font-family-primary)"
           }
         },
         "005": {
           "@": {
-            "value": "var(--eds-font-weight-medium) var(--eds-font-size-16)/1.5 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-medium) 1rem/1.5 var(--eds-font-family-primary)"
           },
           "light": {
-            "value": "var(--eds-font-weight-light) var(--eds-font-size-16)/1.5 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-light) 1rem/1.5 var(--eds-font-family-primary)"
           },
           "bold": {
-            "value": "var(--eds-font-weight-bold) var(--eds-font-size-16)/1.5 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-bold) 1rem/1.5 var(--eds-font-family-primary)"
           }
         },
         "006": {
           "@": {
-            "value": "var(--eds-font-weight-medium) var(--eds-font-size-14)/1.57142857 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-medium) 0.875rem/1.57142857 var(--eds-font-family-primary)"
           },
           "light": {
-            "value": "var(--eds-font-weight-light) var(--eds-font-size-14)/1.57142857 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-light) 0.875rem/1.57142857 var(--eds-font-family-primary)"
           },
           "bold": {
-            "value": "var(--eds-font-weight-bold) var(--eds-font-size-14)/1.57142857 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-bold) 0.875rem/1.57142857 var(--eds-font-family-primary)"
           }
         },
         "007": {
           "@": {
-            "value": "var(--eds-font-weight-medium) var(--eds-font-size-14)/1.28571429 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-medium) 0.875rem/1.28571429 var(--eds-font-family-primary)"
           },
           "light": {
-            "value": "var(--eds-font-weight-light) var(--eds-font-size-14)/1.28571429 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-light) 0.875rem/1.28571429 var(--eds-font-family-primary)"
           },
           "bold": {
-            "value": "var(--eds-font-weight-bold) var(--eds-font-size-14)/1.28571429 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-bold) 0.875rem/1.28571429 var(--eds-font-family-primary)"
           }
         },
         "008": {
           "@": {
-            "value": "var(--eds-font-weight-medium) var(--eds-font-size-12)/1.666666667 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-medium) 0.75rem/1.666666667 var(--eds-font-family-primary)"
           },
           "light": {
-            "value": "var(--eds-font-weight-light) var(--eds-font-size-12)/1.666666667 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-light) 0.75rem/1.666666667 var(--eds-font-family-primary)"
           },
           "bold": {
-            "value": "var(--eds-font-weight-bold) var(--eds-font-size-12)/1.666666667 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-bold) 0.75rem/1.666666667 var(--eds-font-family-primary)"
           }
         },
         "009": {
           "@": {
-            "value": "var(--eds-font-weight-medium) var(--eds-font-size-12)/1.333333333 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-medium) 0.75rem/1.333333333 var(--eds-font-family-primary)"
           },
           "light": {
-            "value": "var(--eds-font-weight-light) var(--eds-font-size-12)/1.333333333 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-light) 0.75rem/1.333333333 var(--eds-font-family-primary)"
           },
           "bold": {
-            "value": "var(--eds-font-weight-bold) var(--eds-font-size-12)/1.333333333 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-bold) 0.75rem/1.333333333 var(--eds-font-family-primary)"
           }
         },
         "010": {
           "@": {
-            "value": "var(--eds-font-weight-medium) var(--eds-font-size-11)/1.272727272 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-medium) 0.6875rem/1.272727272 var(--eds-font-family-primary)"
           },
           "light": {
-            "value": "var(--eds-font-weight-light) var(--eds-font-size-11)/1.272727272 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-light) 0.6875rem/1.272727272 var(--eds-font-family-primary)"
           },
           "bold": {
-            "value": "var(--eds-font-weight-bold) var(--eds-font-size-11)/1.272727272 var(--eds-font-family-primary)"
+            "value": "var(--eds-font-weight-bold) 0.6875rem/1.272727272 var(--eds-font-family-primary)"
           }
         },
         "011": {
           "@": {
-            "value": "var(--eds-font-weight-medium) var(--eds-font-size-12)/1.333333333 var(--eds-font-family-primary)",
+            "value": "var(--eds-font-weight-medium) 0.75rem/1.333333333 var(--eds-font-family-primary)",
             "comment": "For 011, add a text-transform treatment for uppercase (font-variant is limited to CSS 2.1 values)"
           },
           "light": {
-            "value": "var(--eds-font-weight-light) var(--eds-font-size-12)/1.333333333 var(--eds-font-family-primary)",
+            "value": "var(--eds-font-weight-light) 0.75rem/1.333333333 var(--eds-font-family-primary)",
             "comment": "For 011, add a text-transform treatment for uppercase (font-variant is limited to CSS 2.1 values)"
           },
           "bold": {
-            "value": "var(--eds-font-weight-bold) var(--eds-font-size-12)/1.333333333 var(--eds-font-family-primary)",
+            "value": "var(--eds-font-weight-bold) 0.75rem/1.333333333 var(--eds-font-family-primary)",
             "comment": "For 011, add a text-transform treatment for uppercase (font-variant is limited to CSS 2.1 values)"
           }
         },
         "012": {
           "@": {
-            "value": "var(--eds-font-weight-medium) var(--eds-font-size-11)/1.272727272 var(--eds-font-family-primary)",
+            "value": "var(--eds-font-weight-medium) 0.6875rem/1.272727272 var(--eds-font-family-primary)",
             "comment": "For 012, add a text-transform treatment for uppercase (font-variant is limited to CSS 2.1 values)"
           },
           "light": {
-            "value": "var(--eds-font-weight-light) var(--eds-font-size-11)/1.272727272 var(--eds-font-family-primary)",
+            "value": "var(--eds-font-weight-light) 0.6875rem/1.272727272 var(--eds-font-family-primary)",
             "comment": "For 012, add a text-transform treatment for uppercase (font-variant is limited to CSS 2.1 values)"
           },
           "bold": {
-            "value": "var(--eds-font-weight-bold) var(--eds-font-size-11)/1.272727272 var(--eds-font-family-primary)",
+            "value": "var(--eds-font-weight-bold) 0.6875rem/1.272727272 var(--eds-font-family-primary)",
             "comment": "For 012, add a text-transform treatment for uppercase (font-variant is limited to CSS 2.1 values)"
           }
         },
         "secondary": {
           "001": {
             "@": {
-              "value": "var(--eds-font-weight-medium) var(--eds-font-size-32)/1.25 var(--eds-font-family-secondary)"
+              "value": "var(--eds-font-weight-medium) 2rem/1.25 var(--eds-font-family-secondary)"
             },
             "light": {
-              "value": "var(--eds-font-weight-light) var(--eds-font-size-32)/1.25 var(--eds-font-family-secondary)"
+              "value": "var(--eds-font-weight-light) 2rem/1.25 var(--eds-font-family-secondary)"
             }
           },
           "002": {
             "@": {
-              "value": "var(--eds-font-weight-medium) var(--eds-font-size-28)/1.28571429 var(--eds-font-family-secondary)"
+              "value": "var(--eds-font-weight-medium) 1.75rem/1.28571429 var(--eds-font-family-secondary)"
             },
             "light": {
-              "value": "var(--eds-font-weight-light) var(--eds-font-size-28)/1.28571429 var(--eds-font-family-secondary)"
+              "value": "var(--eds-font-weight-light) 1.75rem/1.28571429 var(--eds-font-family-secondary)"
             }
           },
           "003": {
             "@": {
-              "value": "var(--eds-font-weight-medium) var(--eds-font-size-20)/1.4 var(--eds-font-family-secondary)"
+              "value": "var(--eds-font-weight-medium) 1.25rem/1.4 var(--eds-font-family-secondary)"
             },
             "light": {
-              "value": "var(--eds-font-weight-light) var(--eds-font-size-20)/1.4 var(--eds-font-family-secondary)"
+              "value": "var(--eds-font-weight-light) 1.25rem/1.4 var(--eds-font-family-secondary)"
             }
           },
           "004": {
             "@": {
-              "value": "var(--eds-font-weight-medium) var(--eds-font-size-16)/1.5 var(--eds-font-family-secondary)"
+              "value": "var(--eds-font-weight-medium) 1rem/1.5 var(--eds-font-family-secondary)"
             },
             "light": {
-              "value": "var(--eds-font-weight-light) var(--eds-font-size-16)/1.5 var(--eds-font-family-secondary)"
+              "value": "var(--eds-font-weight-light) 1rem/1.5 var(--eds-font-family-secondary)"
             }
           },
           "005": {
             "@": {
-              "value": "var(--eds-font-weight-medium) var(--eds-font-size-14)/1.57142857 var(--eds-font-family-secondary)"
+              "value": "var(--eds-font-weight-medium) 0.875rem/1.57142857 var(--eds-font-family-secondary)"
             },
             "light": {
-              "value": "var(--eds-font-weight-light) var(--eds-font-size-14)/1.57142857 var(--eds-font-family-secondary)"
+              "value": "var(--eds-font-weight-light) 0.875rem/1.57142857 var(--eds-font-family-secondary)"
             }
           },
           "006": {
             "@": {
-              "value": "var(--eds-font-weight-medium) var(--eds-font-size-14)/1.42857143 var(--eds-font-family-secondary)"
+              "value": "var(--eds-font-weight-medium) 0.875rem/1.42857143 var(--eds-font-family-secondary)"
             },
             "light": {
-              "value": "var(--eds-font-weight-light) var(--eds-font-size-14)/1.42857143 var(--eds-font-family-secondary)"
+              "value": "var(--eds-font-weight-light) 0.875rem/1.42857143 var(--eds-font-family-secondary)"
             }
           },
           "007": {
             "@": {
-              "value": "var(--eds-font-weight-medium) var(--eds-font-size-12)/1.66666667 var(--eds-font-family-secondary)"
+              "value": "var(--eds-font-weight-medium) 0.75rem/1.66666667 var(--eds-font-family-secondary)"
             },
             "light": {
-              "value": "var(--eds-font-weight-light) var(--eds-font-size-12)/1.66666667 var(--eds-font-family-secondary)"
+              "value": "var(--eds-font-weight-light) 0.75rem/1.66666667 var(--eds-font-family-secondary)"
             }
           },
           "008": {
             "@": {
-              "value": "var(--eds-font-weight-medium) var(--eds-font-size-12)/1.33333333 var(--eds-font-family-secondary)"
+              "value": "var(--eds-font-weight-medium) 0.75rem/1.33333333 var(--eds-font-family-secondary)"
             },
             "light": {
-              "value": "var(--eds-font-weight-light) var(--eds-font-size-12)/1.33333333 var(--eds-font-family-secondary)"
+              "value": "var(--eds-font-weight-light) 0.75rem/1.33333333 var(--eds-font-family-secondary)"
             }
           },
           "mobile": {
             "001": {
               "light": {
-                "value": "var(--eds-font-weight-light) var(--eds-font-size-32)/1.25 var(--eds-font-family-secondary)"
+                "value": "var(--eds-font-weight-light) 2rem/1.25 var(--eds-font-family-secondary)"
               },
               "@": {
-                "value": "var(--eds-font-weight-medium) var(--eds-font-size-32)/1.25 var(--eds-font-family-secondary)"
+                "value": "var(--eds-font-weight-medium) 2rem/1.25 var(--eds-font-family-secondary)"
               }
             },
             "002": {
               "light": {
-                "value": "var(--eds-font-weight-light) var(--eds-font-size-28)/1.28571429 var(--eds-font-family-secondary)"
+                "value": "var(--eds-font-weight-light) 1.75rem/1.28571429 var(--eds-font-family-secondary)"
               },
               "@": {
-                "value": "var(--eds-font-weight-medium) var(--eds-font-size-28)/1.28571429 var(--eds-font-family-secondary)"
+                "value": "var(--eds-font-weight-medium) 1.75rem/1.28571429 var(--eds-font-family-secondary)"
               }
             },
             "003": {
               "light": {
-                "value": "var(--eds-font-weight-light) var(--eds-font-size-20)/1.4 var(--eds-font-family-secondary)"
+                "value": "var(--eds-font-weight-light) 1.25rem/1.4 var(--eds-font-family-secondary)"
               },
               "@": {
-                "value": "var(--eds-font-weight-medium) var(--eds-font-size-20)/1.4 var(--eds-font-family-secondary)"
+                "value": "var(--eds-font-weight-medium) 1.25rem/1.4 var(--eds-font-family-secondary)"
               }
             }
           }
@@ -310,35 +321,35 @@
         "mobile": {
           "001": {
             "light": {
-              "value": "var(--eds-font-weight-light) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary)"
+              "value": "var(--eds-font-weight-light) 2rem/1.25 var(--eds-font-family-primary)"
             },
             "@": {
-              "value": "var(--eds-font-weight-medium) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary)"
+              "value": "var(--eds-font-weight-medium) 2rem/1.25 var(--eds-font-family-primary)"
             },
             "bold": {
-              "value": "var(--eds-font-weight-bold) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary)"
+              "value": "var(--eds-font-weight-bold) 2rem/1.25 var(--eds-font-family-primary)"
             }
           },
           "002": {
             "light": {
-              "value": "var(--eds-font-weight-light) var(--eds-font-size-28)/1.28571429 var(--eds-font-family-primary)"
+              "value": "var(--eds-font-weight-light) 1.75rem/1.28571429 var(--eds-font-family-primary)"
             },
             "@": {
-              "value": "var(--eds-font-weight-medium) var(--eds-font-size-28)/1.28571429 var(--eds-font-family-primary)"
+              "value": "var(--eds-font-weight-medium) 1.75rem/1.28571429 var(--eds-font-family-primary)"
             },
             "bold": {
-              "value": "var(--eds-font-weight-bold) var(--eds-font-size-28)/1.28571429 var(--eds-font-family-primary)"
+              "value": "var(--eds-font-weight-bold) 1.75rem/1.28571429 var(--eds-font-family-primary)"
             }
           },
           "003": {
             "light": {
-              "value": "var(--eds-font-weight-light) var(--eds-font-size-20)/1.4 var(--eds-font-family-primary)"
+              "value": "var(--eds-font-weight-light) 1.25rem/1.4 var(--eds-font-family-primary)"
             },
             "@": {
-              "value": "var(--eds-font-weight-medium) var(--eds-font-size-20)/1.4 var(--eds-font-family-primary)"
+              "value": "var(--eds-font-weight-medium) 1.25rem/1.4 var(--eds-font-family-primary)"
             },
             "bold": {
-              "value": "var(--eds-font-weight-bold) var(--eds-font-size-20)/1.4 var(--eds-font-family-primary)"
+              "value": "var(--eds-font-weight-bold) 1.25rem/1.4 var(--eds-font-family-primary)"
             }
           }
         }
diff --git a/src/design-tokens/tier-1-definitions/z-index.json b/src/design-tokens/tier-1-definitions/z-index.json
index c1506f1b3..eddb562f4 100644
--- a/src/design-tokens/tier-1-definitions/z-index.json
+++ b/src/design-tokens/tier-1-definitions/z-index.json
@@ -5,22 +5,28 @@
         "value": "99999"
       },
       "500": {
-        "value": "500"
+        "value": "500",
+        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "400": {
-        "value": "400"
+        "value": "400",
+        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "300": {
-        "value": "300"
+        "value": "300",
+        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "200": {
-        "value": "200"
+        "value": "200",
+        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "100": {
-        "value": "100"
+        "value": "100",
+        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "0": {
-        "value": "0"
+        "value": "0",
+        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "bottom": {
         "value": "-100"
diff --git a/src/design-tokens/tier-2-usage/colors-background.json b/src/design-tokens/tier-2-usage/colors-background.json
index d113f658f..ff43a8a19 100644
--- a/src/design-tokens/tier-2-usage/colors-background.json
+++ b/src/design-tokens/tier-2-usage/colors-background.json
@@ -6,86 +6,112 @@
           "neutral": {
             "default": {
               "@": {
-                "value": "{eds.color.neutral.white}"
+                "value": "{eds.color.neutral.white}",
+                "group": "color"
               },
               "hover": {
-                "value": "{eds.color.neutral.100}"
+                "value": "{eds.color.neutral.100}",
+                "group": "color"
               }
             },
             "subtle": {
               "@": {
-                "value": "{eds.color.neutral.100}"
+                "value": "{eds.color.neutral.100}",
+                "group": "color"
               },
               "hover": {
-                "value": "{eds.color.neutral.200}"
+                "value": "{eds.color.neutral.200}",
+                "group": "color"
               }
             },
             "medium": {
               "@": {
-                "value": "{eds.color.neutral.200}"
+                "value": "{eds.color.neutral.200}",
+                "group": "color"
               },
               "hover": {
-                "value": "{eds.color.neutral.300}"
+                "value": "{eds.color.neutral.300}",
+                "group": "color"
               }
             }
           },
           "brand": {
             "primary": {
               "default": {
-                "value": "{eds.color.brand.grape.100}"
+                "value": "{eds.color.brand.grape.100}",
+                "group": "color"
               },
               "subtle": {
-                "value": "{eds.color.brand.grape.100}"
+                "value": "{eds.color.brand.grape.100}",
+                "group": "color"
               },
               "strong": {
                 "@": {
-                  "value": "{eds.color.brand.grape.600}"
+                  "value": "{eds.color.brand.grape.600}",
+                  "group": "color"
                 },
                 "hover": {
-                  "value": "{eds.color.brand.grape.800}"
+                  "value": "{eds.color.brand.grape.800}",
+                  "group": "color"
                 }
               }
             }
           },
           "utility": {
             "success": {
-              "value": "{eds.color.other.mint.100}"
+              "value": "{eds.color.other.mint.100}",
+              "group": "color"
             },
             "warning": {
-              "value": "{eds.color.other.orange.100}"
+              "value": "{eds.color.other.orange.100}",
+              "group": "color"
             },
             "error": {
-              "value": "{eds.color.other.ruby.100}"
+              "value": "{eds.color.other.ruby.100}",
+              "group": "color"
             }
           },
           "grade": {
             "complete": {
               "default": {
-                "value": "{eds.color.other.mint.600}"
+                "value": "{eds.color.other.mint.600}",
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               },
               "subtle": {
-                "value": "{eds.color.other.mint.100}"
+                "value": "{eds.color.other.mint.100}",
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               }
             },
             "revise": {
               "default": {
-                "value": "{eds.color.other.yellow.400}"
+                "value": "{eds.color.other.yellow.400}",
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               },
               "subtle": {
-                "value": "{eds.color.other.yellow.100}"
+                "value": "{eds.color.other.yellow.100}",
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               }
             },
             "stop": {
               "default": {
-                "value": "{eds.color.other.ruby.600}"
+                "value": "{eds.color.other.ruby.600}",
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               },
               "subtle": {
-                "value": "{eds.color.other.ruby.100}"
+                "value": "{eds.color.other.ruby.100}",
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               }
             }
           },
           "disabled": {
-            "value": "{eds.color.neutral.300}"
+            "value": "{eds.color.neutral.300}",
+            "group": "color"
           }
         }
       }
diff --git a/src/design-tokens/tier-2-usage/colors-border.json b/src/design-tokens/tier-2-usage/colors-border.json
index 91f9d4244..d84091ecc 100644
--- a/src/design-tokens/tier-2-usage/colors-border.json
+++ b/src/design-tokens/tier-2-usage/colors-border.json
@@ -6,102 +6,132 @@
           "neutral": {
             "subtle": {
               "@": {
-                "value": "{eds.color.neutral.200}"
+                "value": "{eds.color.neutral.200}",
+                "group": "color"
               },
               "hover": {
-                "value": "{eds.color.neutral.300}"
+                "value": "{eds.color.neutral.300}",
+                "group": "color"
               }
             },
             "default": {
               "@": {
-                "value": "{eds.color.neutral.300}"
+                "value": "{eds.color.neutral.300}",
+                "group": "color"
               },
               "hover": {
-                "value": "{eds.color.neutral.400}"
+                "value": "{eds.color.neutral.400}",
+                "group": "color"
               }
             },
             "strong": {
               "@": {
-                "value": "{eds.color.neutral.400}"
+                "value": "{eds.color.neutral.400}",
+                "group": "color"
               },
               "hover": {
-                "value": "{eds.color.neutral.500}"
+                "value": "{eds.color.neutral.500}",
+                "group": "color"
               }
             }
           },
           "brand": {
             "primary": {
               "subtle": {
-                "value": "{eds.color.brand.grape.200}"
+                "value": "{eds.color.brand.grape.200}",
+                "group": "color"
               },
               "default": {
-                "value": "var(--eds-theme-color-border-brand-primary)"
+                "value": "var(--eds-theme-color-border-brand-primary)",
+                "group": "color"
               },
               "@": {
                 "value": "{eds.color.brand.grape.300}",
+                "group": "color",
                 "comment": "@deprecated This token is deprecated. Please use eds-theme-color-border-brand-primary-default instead"
               },
               "strong": {
-                "value": "{eds.color.brand.grape.400}"
+                "value": "{eds.color.brand.grape.400}",
+                "group": "color"
               }
             }
           },
           "utility": {
             "success": {
               "subtle": {
-                "value": "{eds.color.other.mint.200}"
+                "value": "{eds.color.other.mint.200}",
+                "group": "color"
               },
               "default": {
-                "value": "{eds.color.other.mint.300}"
+                "value": "{eds.color.other.mint.300}",
+                "group": "color"
               },
               "strong": {
-                "value": "{eds.color.other.mint.400}"
+                "value": "{eds.color.other.mint.400}",
+                "group": "color"
               }
             },
             "warning": {
               "subtle": {
-                "value": "{eds.color.other.orange.200}"
+                "value": "{eds.color.other.orange.200}",
+                "group": "color"
               },
               "default": {
-                "value": "{eds.color.other.orange.300}"
+                "value": "{eds.color.other.orange.300}",
+                "group": "color"
               },
               "strong": {
-                "value": "{eds.color.other.orange.400}"
+                "value": "{eds.color.other.orange.400}",
+                "group": "color"
               }
             },
             "error": {
               "subtle": {
-                "value": "{eds.color.other.ruby.200}"
+                "value": "{eds.color.other.ruby.200}",
+                "group": "color"
               },
               "default": {
-                "value": "{eds.color.other.ruby.300}"
+                "value": "{eds.color.other.ruby.300}",
+                "group": "color"
               },
               "strong": {
-                "value": "{eds.color.other.ruby.400}"
+                "value": "{eds.color.other.ruby.400}",
+                "group": "color"
               }
             }
           },
           "grade": {
             "complete": {
-              "value": "{eds.color.other.mint.300}"
+              "value": "{eds.color.other.mint.300}",
+              "group": "color",
+              "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
             },
             "revise": {
               "subtle": {
-                "value": "{eds.color.other.yellow.200}"
+                "value": "{eds.color.other.yellow.200}",
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               },
               "default": {
-                "value": "{eds.color.other.yellow.300}"
+                "value": "{eds.color.other.yellow.300}",
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               },
               "strong": {
-                "value": "{eds.color.other.yellow.400}"
+                "value": "{eds.color.other.yellow.400}",
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               }
             },
             "stop": {
-              "value": "{eds.color.other.ruby.300}"
+              "value": "{eds.color.other.ruby.300}",
+              "group": "color",
+              "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
             }
           },
           "disabled": {
-            "value": "{eds.color.neutral.300}"
+            "value": "{eds.color.neutral.300}",
+            "group": "color"
           }
         }
       }
diff --git a/src/design-tokens/tier-2-usage/colors-icon.json b/src/design-tokens/tier-2-usage/colors-icon.json
index 6a7459229..d65544669 100644
--- a/src/design-tokens/tier-2-usage/colors-icon.json
+++ b/src/design-tokens/tier-2-usage/colors-icon.json
@@ -6,106 +6,136 @@
           "neutral": {
             "default": {
               "@": {
-                "value": "{eds.color.neutral.600}"
+                "value": "{eds.color.neutral.600}",
+                "group": "color"
               },
               "inverse": {
-                "value": "{eds.color.neutral.white}"
+                "value": "{eds.color.neutral.white}",
+                "group": "color"
               },
               "hover": {
-                "value": "{eds.color.neutral.700}"
+                "value": "{eds.color.neutral.700}",
+                "group": "color"
               }
             },
             "strong": {
               "@": {
-                "value": "{eds.color.neutral.700}"
+                "value": "{eds.color.neutral.700}",
+                "group": "color"
               },
               "hover": {
-                "value": "{eds.color.neutral.800}"
+                "value": "{eds.color.neutral.800}",
+                "group": "color"
               }
             },
             "subtle": {
               "@": {
-                "value": "{eds.color.neutral.500}"
+                "value": "{eds.color.neutral.500}",
+                "group": "color"
               },
               "hover": {
-                "value": "{eds.color.neutral.600}"
+                "value": "{eds.color.neutral.600}",
+                "group": "color"
               }
             }
           },
           "link": {
             "default": {
               "@": {
-                "value": "{eds.color.brand.grape.600}"
+                "value": "{eds.color.brand.grape.600}",
+                "group": "color"
               },
               "hover": {
-                "value": "{eds.color.brand.grape.700}"
+                "value": "{eds.color.brand.grape.700}",
+                "group": "color"
               }
             }
           },
           "brand": {
             "primary": {
               "@": {
-                "value": "{eds.color.brand.grape.500}"
+                "value": "{eds.color.brand.grape.500}",
+                "group": "color"
               },
               "hover": {
-                "value": "{eds.color.brand.grape.600}"
+                "value": "{eds.color.brand.grape.600}",
+                "group": "color"
               }
             }
           },
           "utility": {
             "success": {
               "@": {
-                "value": "{eds.color.other.mint.500}"
+                "value": "{eds.color.other.mint.500}",
+                "group": "color"
               },
               "hover": {
-                "value": "{eds.color.other.mint.600}"
+                "value": "{eds.color.other.mint.600}",
+                "group": "color"
               }
             },
             "warning": {
               "@": {
-                "value": "{eds.color.other.orange.500}"
+                "value": "{eds.color.other.orange.500}",
+                "group": "color"
               },
               "hover": {
-                "value": "{eds.color.other.orange.600}"
+                "value": "{eds.color.other.orange.600}",
+                "group": "color"
               }
             },
             "error": {
               "@": {
-                "value": "{eds.color.other.ruby.500}"
+                "value": "{eds.color.other.ruby.500}",
+                "group": "color"
               },
               "hover": {
-                "value": "{eds.color.other.ruby.600}"
+                "value": "{eds.color.other.ruby.600}",
+                "group": "color"
               }
             }
           },
           "grade": {
             "complete": {
               "@": {
-                "value": "{eds.color.other.mint.500}"
+                "value": "{eds.color.other.mint.500}",
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               },
               "hover": {
-                "value": "{eds.color.other.mint.500}"
+                "value": "{eds.color.other.mint.500}",
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               }
             },
             "revise": {
               "@": {
-                "value": "{eds.color.neutral.800}"
+                "value": "{eds.color.neutral.800}",
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               },
               "hover": {
-                "value": "{eds.color.neutral.black}"
+                "value": "{eds.color.neutral.black}",
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               }
             },
             "stop": {
               "@": {
-                "value": "{eds.color.other.ruby.500}"
+                "value": "{eds.color.other.ruby.500}",
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               },
               "hover": {
-                "value": "{eds.color.other.ruby.600}"
+                "value": "{eds.color.other.ruby.600}",
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               }
             }
           },
           "disabled": {
-            "value": "{eds.color.neutral.300}"
+            "value": "{eds.color.neutral.300}",
+            "group": "color"
           }
         }
       }
diff --git a/src/design-tokens/tier-2-usage/colors-text.json b/src/design-tokens/tier-2-usage/colors-text.json
index 0b734aaa1..526d0a120 100644
--- a/src/design-tokens/tier-2-usage/colors-text.json
+++ b/src/design-tokens/tier-2-usage/colors-text.json
@@ -6,39 +6,67 @@
           "neutral": {
             "default": {
               "@": {
-                "value": "{eds.color.neutral.700}"
+                "value": "{eds.color.neutral.700}",
+                "group": "color"
               },
               "inverse": {
-                "value": "{eds.color.neutral.white}"
+                "value": "{eds.color.neutral.white}",
+                "group": "color"
               }
             },
             "strong": {
-              "value": "{eds.color.neutral.800}"
+              "value": "{eds.color.neutral.800}",
+              "group": "color"
             },
             "subtle": {
-              "value": "{eds.color.neutral.600}"
+              "value": "{eds.color.neutral.600}",
+              "group": "color"
             }
           },
           "utility": {
-            "success": { "value": "{eds.color.other.mint.700}" },
-            "warning": { "value": "{eds.color.other.orange.700}" },
-            "error": { "value": "{eds.color.other.ruby.700}" }
+            "success": {
+              "value": "{eds.color.other.mint.700}",
+              "group": "color"
+            },
+            "warning": {
+              "value": "{eds.color.other.orange.700}",
+              "group": "color"
+            },
+            "error": {
+              "value": "{eds.color.other.ruby.700}",
+              "group": "color"
+            }
           },
           "grade": {
-            "complete": { "value": "{eds.color.other.mint.700}" },
-            "revise": { "value": "{eds.color.neutral.800}" },
-            "stop": { "value": "{eds.color.other.ruby.700}" }
+            "complete": {
+              "value": "{eds.color.other.mint.700}",
+              "group": "color",
+              "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+            },
+            "revise": {
+              "value": "{eds.color.neutral.800}",
+              "group": "color",
+              "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+            },
+            "stop": {
+              "value": "{eds.color.other.ruby.700}",
+              "group": "color",
+              "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+            }
           },
           "disabled": {
-            "value": "{eds.color.neutral.300}"
+            "value": "{eds.color.neutral.300}",
+            "group": "color"
           },
           "brand": {
             "default": {
-              "value": "var(--eds-theme-color-text-brand-primary)"
+              "value": "var(--eds-theme-color-text-brand-primary)",
+              "group": "color"
             },
             "primary": {
               "value": "{eds.color.brand.grape.700}",
-              "comment": "@deprecated This token is deprecated. Please use eds-theme-color-text-brand-default instead."
+              "group": "color",
+              "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS. Please use eds-theme-color-text-brand-default instead."
             }
           }
         }
diff --git a/src/design-tokens/tier-2-usage/colors-transparent.json b/src/design-tokens/tier-2-usage/colors-transparent.json
index 3f2ce1eb5..c6fd98f60 100644
--- a/src/design-tokens/tier-2-usage/colors-transparent.json
+++ b/src/design-tokens/tier-2-usage/colors-transparent.json
@@ -5,15 +5,21 @@
         "transparent": {
           "black": {
             "0": {
-              "value": "rgba(0, 0, 0, 0)"
+              "value": "rgba(0, 0, 0, 0)",
+              "group": "color",
+              "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
             },
             "30": {
-              "value": "rgba(0, 0, 0, .3)"
+              "value": "rgba(0, 0, 0, .3)",
+              "group": "color",
+              "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
             }
           },
           "white": {
             "0": {
-              "value": "rgba(255, 255, 255, 0)"
+              "value": "rgba(255, 255, 255, 0)",
+              "group": "color",
+              "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
             }
           }
         }
diff --git a/src/design-tokens/tier-2-usage/typography.json b/src/design-tokens/tier-2-usage/typography.json
index 05205c3bd..ffec882c2 100644
--- a/src/design-tokens/tier-2-usage/typography.json
+++ b/src/design-tokens/tier-2-usage/typography.json
@@ -81,12 +81,10 @@
         "title": {
           "lg": {
             "@": {
-              "value": "var(--eds-typography-preset-004)",
-              "comment": "Currently undefined in figma"
+              "value": "var(--eds-typography-preset-004)"
             },
             "bold": {
-              "value": "var(--eds-typography-preset-004-bold)",
-              "comment": "Currently undefined in figma"
+              "value": "var(--eds-typography-preset-004-bold)"
             }
           },
           "md": {
@@ -155,8 +153,7 @@
               "value": "var(--eds-typography-preset-006-light)"
             },
             "bold": {
-              "value": "var(--eds-typography-preset-006)",
-              "comment": "Currently undefined in figma"
+              "value": "var(--eds-typography-preset-006)"
             }
           },
           "md": {
@@ -164,8 +161,7 @@
               "value": "var(--eds-typography-preset-008-light)"
             },
             "bold": {
-              "value": "var(--eds-typography-preset-008)",
-              "comment": "Currently undefined in figma"
+              "value": "var(--eds-typography-preset-008)"
             }
           },
           "sm": {
@@ -173,15 +169,14 @@
               "value": "var(--eds-typography-preset-010-light)"
             },
             "bold": {
-              "value": "var(--eds-typography-preset-010)",
-              "comment": "Currently undefined in figma"
+              "value": "var(--eds-typography-preset-010)"
             }
           }
         },
         "overline": {
           "@": {
             "value": "var(--eds-typography-preset-011)",
-            "comment": "@deprecated This is deprecated and missing from figma."
+            "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
           },
           "md": {
             "value": "var(--eds-typography-preset-011)"
diff --git a/src/design-tokens/tier-3-component/body.json b/src/design-tokens/tier-3-component/body-colors.json
similarity index 55%
rename from src/design-tokens/tier-3-component/body.json
rename to src/design-tokens/tier-3-component/body-colors.json
index 08ddfe63c..22af7d63e 100644
--- a/src/design-tokens/tier-3-component/body.json
+++ b/src/design-tokens/tier-3-component/body-colors.json
@@ -5,10 +5,12 @@
         "body": {
           "background": {
             "@": {
-              "value": "{eds.color.neutral.100}"
+              "value": "{eds.color.neutral.100}",
+              "group": "color"
             },
             "inverted": {
-              "value": "{eds.color.neutral.700}"
+              "value": "{eds.color.neutral.700}",
+              "group": "color"
             }
           }
         }
diff --git a/src/design-tokens/tier-3-component/breadcrumb.json b/src/design-tokens/tier-3-component/breadcrumb-typography.json
similarity index 100%
rename from src/design-tokens/tier-3-component/breadcrumb.json
rename to src/design-tokens/tier-3-component/breadcrumb-typography.json
diff --git a/src/design-tokens/tier-3-component/buttons-box.json b/src/design-tokens/tier-3-component/buttons-box.json
new file mode 100644
index 000000000..48f0e9171
--- /dev/null
+++ b/src/design-tokens/tier-3-component/buttons-box.json
@@ -0,0 +1,15 @@
+{
+  "eds": {
+    "theme": {
+      "box": {
+        "button": {
+          "border": {
+            "radius": {
+              "value": "{eds.border.radius.md}"
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/design-tokens/tier-3-component/buttons-colors.json b/src/design-tokens/tier-3-component/buttons-colors.json
new file mode 100644
index 000000000..38078049a
--- /dev/null
+++ b/src/design-tokens/tier-3-component/buttons-colors.json
@@ -0,0 +1,674 @@
+{
+  "eds": {
+    "theme": {
+      "color": {
+        "button": {
+          "primary": {
+            "brand": {
+              "background": {
+                "@": {
+                  "value": "{eds.color.brand.grape.600}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.brand.grape.700}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.brand.grape.800}",
+                  "group": "color"
+                }
+              },
+              "border": {
+                "@": {
+                  "value": "{eds.color.brand.grape.600}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.brand.grape.700}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.brand.grape.800}",
+                  "group": "color"
+                }
+              },
+              "text": {
+                "@": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                }
+              }
+            },
+            "error": {
+              "background": {
+                "@": {
+                  "value": "{eds.color.other.ruby.600}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.other.ruby.700}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.other.ruby.800}",
+                  "group": "color"
+                }
+              },
+              "border": {
+                "@": {
+                  "value": "{eds.color.other.ruby.600}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.other.ruby.700}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.other.ruby.800}",
+                  "group": "color"
+                }
+              },
+              "text": {
+                "@": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                }
+              }
+            }
+          },
+          "secondary": {
+            "brand": {
+              "background": {
+                "@": {
+                  "value": "{eds.theme.color.transparent.black.0}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.brand.grape.700}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.brand.grape.800}",
+                  "group": "color"
+                }
+              },
+              "border": {
+                "@": {
+                  "value": "{eds.color.brand.grape.600}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.brand.grape.700}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.brand.grape.800}",
+                  "group": "color"
+                }
+              },
+              "text": {
+                "@": {
+                  "value": "{eds.color.brand.grape.700}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                }
+              },
+              "icon": {
+                "@": {
+                  "value": "{eds.color.brand.grape.600}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                }
+              }
+            },
+            "neutral": {
+              "background": {
+                "@": {
+                  "value": "{eds.theme.color.transparent.black.0}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.neutral.200}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.neutral.700}",
+                  "group": "color"
+                }
+              },
+              "border": {
+                "@": {
+                  "value": "{eds.color.neutral.600}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.neutral.600}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.neutral.700}",
+                  "group": "color"
+                }
+              },
+              "text": {
+                "@": {
+                  "value": "{eds.color.neutral.600}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.neutral.600}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                }
+              },
+              "icon": {
+                "@": {
+                  "value": "{eds.color.neutral.400}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.neutral.400}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                }
+              }
+            },
+            "success": {
+              "background": {
+                "@": {
+                  "value": "{eds.theme.color.transparent.black.0}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.other.mint.700}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.other.mint.800}",
+                  "group": "color"
+                }
+              },
+              "border": {
+                "@": {
+                  "value": "{eds.color.other.mint.600}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.other.mint.700}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.other.mint.800}",
+                  "group": "color"
+                }
+              },
+              "text": {
+                "@": {
+                  "value": "{eds.color.other.mint.700}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                }
+              },
+              "icon": {
+                "@": {
+                  "value": "{eds.color.other.mint.600}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                }
+              }
+            },
+            "warning": {
+              "background": {
+                "@": {
+                  "value": "{eds.theme.color.transparent.black.0}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.other.orange.700}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.other.orange.800}",
+                  "group": "color"
+                }
+              },
+              "border": {
+                "@": {
+                  "value": "{eds.color.other.orange.600}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.other.orange.700}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.other.orange.800}",
+                  "group": "color"
+                }
+              },
+              "text": {
+                "@": {
+                  "value": "{eds.color.other.orange.700}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                }
+              },
+              "icon": {
+                "@": {
+                  "value": "{eds.color.other.orange.600}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                }
+              }
+            },
+            "error": {
+              "background": {
+                "@": {
+                  "value": "{eds.theme.color.transparent.black.0}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.other.ruby.700}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.other.ruby.800}",
+                  "group": "color"
+                }
+              },
+              "border": {
+                "@": {
+                  "value": "{eds.color.other.ruby.600}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.other.ruby.700}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.other.ruby.800}",
+                  "group": "color"
+                }
+              },
+              "text": {
+                "@": {
+                  "value": "{eds.color.other.ruby.700}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                }
+              },
+              "icon": {
+                "@": {
+                  "value": "{eds.color.other.ruby.600}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                }
+              }
+            }
+          },
+          "icon": {
+            "brand": {
+              "@": {
+                "value": "{eds.color.brand.grape.600}",
+                "group": "color"
+              },
+              "hover": {
+                "value": "{eds.color.brand.grape.600}",
+                "group": "color"
+              },
+              "active": {
+                "value": "{eds.color.neutral.white}",
+                "group": "color"
+              },
+              "background": {
+                "@": {
+                  "value": "{eds.theme.color.transparent.black.0}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.brand.grape.200}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.brand.grape.700}",
+                  "group": "color"
+                }
+              },
+              "border": {
+                "@": {
+                  "value": "{eds.theme.color.transparent.black.0}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.brand.grape.200}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.brand.grape.700}",
+                  "group": "color"
+                }
+              },
+              "text": {
+                "@": {
+                  "value": "{eds.color.brand.grape.700}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.brand.grape.700}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                }
+              }
+            },
+            "neutral": {
+              "@": {
+                "value": "{eds.color.neutral.600}",
+                "group": "color"
+              },
+              "hover": {
+                "value": "{eds.color.neutral.600}",
+                "group": "color"
+              },
+              "active": {
+                "value": "{eds.color.neutral.white}",
+                "group": "color"
+              },
+              "background": {
+                "@": {
+                  "value": "{eds.theme.color.transparent.black.0}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.neutral.200}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.neutral.600}",
+                  "group": "color"
+                }
+              },
+              "border": {
+                "@": {
+                  "value": "{eds.theme.color.transparent.black.0}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.neutral.200}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.neutral.600}",
+                  "group": "color"
+                }
+              },
+              "text": {
+                "@": {
+                  "value": "{eds.color.neutral.600}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.neutral.600}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                }
+              }
+            },
+            "success": {
+              "@": {
+                "value": "{eds.color.other.mint.600}",
+                "group": "color"
+              },
+              "hover": {
+                "value": "{eds.color.other.mint.600}",
+                "group": "color"
+              },
+              "active": {
+                "value": "{eds.color.neutral.white}",
+                "group": "color"
+              },
+              "background": {
+                "@": {
+                  "value": "{eds.theme.color.transparent.black.0}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.other.mint.200}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.other.mint.700}",
+                  "group": "color"
+                }
+              },
+              "border": {
+                "@": {
+                  "value": "{eds.theme.color.transparent.black.0}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.other.mint.200}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.other.mint.700}",
+                  "group": "color"
+                }
+              },
+              "text": {
+                "@": {
+                  "value": "{eds.color.other.mint.700}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.other.mint.700}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                }
+              }
+            },
+            "warning": {
+              "@": {
+                "value": "{eds.color.other.orange.600}",
+                "group": "color"
+              },
+              "hover": {
+                "value": "{eds.color.other.orange.600}",
+                "group": "color"
+              },
+              "active": {
+                "value": "{eds.color.neutral.white}",
+                "group": "color"
+              },
+              "background": {
+                "@": {
+                  "value": "{eds.theme.color.transparent.black.0}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.other.orange.100}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.other.orange.700}",
+                  "group": "color"
+                }
+              },
+              "border": {
+                "@": {
+                  "value": "{eds.theme.color.transparent.black.0}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.other.orange.100}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.other.orange.700}",
+                  "group": "color"
+                }
+              },
+              "text": {
+                "@": {
+                  "value": "{eds.color.other.orange.700}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.other.orange.700}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                }
+              }
+            },
+            "error": {
+              "@": {
+                "value": "{eds.color.other.ruby.600}",
+                "group": "color"
+              },
+              "hover": {
+                "value": "{eds.color.other.ruby.600}",
+                "group": "color"
+              },
+              "active": {
+                "value": "{eds.color.neutral.white}",
+                "group": "color"
+              },
+              "background": {
+                "@": {
+                  "value": "{eds.theme.color.transparent.black.0}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.other.ruby.200}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.other.ruby.700}",
+                  "group": "color"
+                }
+              },
+              "border": {
+                "@": {
+                  "value": "{eds.theme.color.transparent.black.0}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.other.ruby.200}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.other.ruby.700}",
+                  "group": "color"
+                }
+              },
+              "text": {
+                "@": {
+                  "value": "{eds.color.other.ruby.700}",
+                  "group": "color"
+                },
+                "hover": {
+                  "value": "{eds.color.other.ruby.700}",
+                  "group": "color"
+                },
+                "active": {
+                  "value": "{eds.color.neutral.white}",
+                  "group": "color"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/design-tokens/tier-3-component/buttons-typography.json b/src/design-tokens/tier-3-component/buttons-typography.json
new file mode 100644
index 000000000..dc20053f4
--- /dev/null
+++ b/src/design-tokens/tier-3-component/buttons-typography.json
@@ -0,0 +1,26 @@
+{
+  "eds": {
+    "theme": {
+      "typography": {
+        "button": {
+          "lg": {
+            "value": "var(--eds-typography-preset-006)"
+          },
+          "md": {
+            "value": "var(--eds-typography-preset-006)"
+          },
+          "label": {
+            "@": {
+              "value": "var(--eds-typography-preset-006)",
+              "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+            },
+            "sm": {
+              "value": "var(--eds-typography-preset-008-bold)",
+              "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/design-tokens/tier-3-component/buttons.json b/src/design-tokens/tier-3-component/buttons.json
deleted file mode 100644
index 71f9be2b0..000000000
--- a/src/design-tokens/tier-3-component/buttons.json
+++ /dev/null
@@ -1,565 +0,0 @@
-{
-  "eds": {
-    "theme": {
-      "typography": {
-        "button": {
-          "lg": {
-            "value": "var(--eds-typography-preset-006)"
-          },
-          "md": {
-            "value": "var(--eds-typography-preset-006)"
-          },
-          "label": {
-            "@": {
-              "value": "var(--eds-typography-preset-006)",
-              "comment": "@deprecated This is deprecated and missing from figma"
-            },
-            "sm": {
-              "value": "var(--eds-typography-preset-008-bold)",
-              "comment": "@deprecated This is deprecated and missing from figma"
-            }
-          }
-        }
-      },
-      "color": {
-        "button": {
-          "primary": {
-            "brand": {
-              "background": {
-                "@": {
-                  "value": "{eds.color.brand.grape.600}"
-                },
-                "hover": {
-                  "value": "{eds.color.brand.grape.700}"
-                },
-                "active": {
-                  "value": "{eds.color.brand.grape.800}"
-                }
-              },
-              "border": {
-                "@": {
-                  "value": "{eds.color.brand.grape.600}"
-                },
-                "hover": {
-                  "value": "{eds.color.brand.grape.700}"
-                },
-                "active": {
-                  "value": "{eds.color.brand.grape.800}"
-                }
-              },
-              "text": {
-                "@": {
-                  "value": "{eds.color.neutral.white}"
-                },
-                "hover": {
-                  "value": "{eds.color.neutral.white}"
-                },
-                "active": {
-                  "value": "{eds.color.neutral.white}"
-                }
-              }
-            },
-            "error": {
-              "background": {
-                "@": {
-                  "value": "{eds.color.other.ruby.600}"
-                },
-                "hover": {
-                  "value": "{eds.color.other.ruby.700}"
-                },
-                "active": {
-                  "value": "{eds.color.other.ruby.800}"
-                }
-              },
-              "border": {
-                "@": {
-                  "value": "{eds.color.other.ruby.600}"
-                },
-                "hover": {
-                  "value": "{eds.color.other.ruby.700}"
-                },
-                "active": {
-                  "value": "{eds.color.other.ruby.800}"
-                }
-              },
-              "text": {
-                "@": {
-                  "value": "{eds.color.neutral.white}"
-                },
-                "hover": {
-                  "value": "{eds.color.neutral.white}"
-                },
-                "active": {
-                  "value": "{eds.color.neutral.white}"
-                }
-              }
-            }
-          },
-          "secondary": {
-            "brand": {
-              "background": {
-                "@": {
-                  "value": "{eds.theme.color.transparent.black.0}"
-                },
-                "hover": {
-                  "value": "{eds.color.brand.grape.700}"
-                },
-                "active": {
-                  "value": "{eds.color.brand.grape.800}"
-                }
-              },
-              "border": {
-                "@": {
-                  "value": "{eds.color.brand.grape.600}"
-                },
-                "hover": {
-                  "value": "{eds.color.brand.grape.700}"
-                },
-                "active": {
-                  "value": "{eds.color.brand.grape.800}"
-                }
-              },
-              "text": {
-                "@": {
-                  "value": "{eds.color.brand.grape.700}"
-                },
-                "hover": {
-                  "value": "{eds.color.neutral.white}"
-                },
-                "active": {
-                  "value": "{eds.color.neutral.white}"
-                }
-              },
-              "icon": {
-                "@": {
-                  "value": "{eds.color.brand.grape.600}"
-                },
-                "hover": {
-                  "value": "{eds.color.neutral.white}"
-                },
-                "active": {
-                  "value": "{eds.color.neutral.white}"
-                }
-              }
-            },
-            "neutral": {
-              "background": {
-                "@": {
-                  "value": "{eds.theme.color.transparent.black.0}"
-                },
-                "hover": {
-                  "value": "{eds.color.neutral.200}"
-                },
-                "active": {
-                  "value": "{eds.color.neutral.700}"
-                }
-              },
-              "border": {
-                "@": {
-                  "value": "{eds.color.neutral.600}"
-                },
-                "hover": {
-                  "value": "{eds.color.neutral.600}"
-                },
-                "active": {
-                  "value": "{eds.color.neutral.700}"
-                }
-              },
-              "text": {
-                "@": {
-                  "value": "{eds.color.neutral.600}"
-                },
-                "hover": {
-                  "value": "{eds.color.neutral.600}"
-                },
-                "active": {
-                  "value": "{eds.color.neutral.white}"
-                }
-              },
-              "icon": {
-                "@": {
-                  "value": "{eds.color.neutral.400}"
-                },
-                "hover": {
-                  "value": "{eds.color.neutral.400}"
-                },
-                "active": {
-                  "value": "{eds.color.neutral.white}"
-                }
-              }
-            },
-            "success": {
-              "background": {
-                "@": {
-                  "value": "{eds.theme.color.transparent.black.0}"
-                },
-                "hover": {
-                  "value": "{eds.color.other.mint.700}"
-                },
-                "active": {
-                  "value": "{eds.color.other.mint.800}"
-                }
-              },
-              "border": {
-                "@": {
-                  "value": "{eds.color.other.mint.600}"
-                },
-                "hover": {
-                  "value": "{eds.color.other.mint.700}"
-                },
-                "active": {
-                  "value": "{eds.color.other.mint.800}"
-                }
-              },
-              "text": {
-                "@": {
-                  "value": "{eds.color.other.mint.700}"
-                },
-                "hover": {
-                  "value": "{eds.color.neutral.white}"
-                },
-                "active": {
-                  "value": "{eds.color.neutral.white}"
-                }
-              },
-              "icon": {
-                "@": {
-                  "value": "{eds.color.other.mint.600}"
-                },
-                "hover": {
-                  "value": "{eds.color.neutral.white}"
-                },
-                "active": {
-                  "value": "{eds.color.neutral.white}"
-                }
-              }
-            },
-            "warning": {
-              "background": {
-                "@": {
-                  "value": "{eds.theme.color.transparent.black.0}"
-                },
-                "hover": {
-                  "value": "{eds.color.other.orange.700}"
-                },
-                "active": {
-                  "value": "{eds.color.other.orange.800}"
-                }
-              },
-              "border": {
-                "@": {
-                  "value": "{eds.color.other.orange.600}"
-                },
-                "hover": {
-                  "value": "{eds.color.other.orange.700}"
-                },
-                "active": {
-                  "value": "{eds.color.other.orange.800}"
-                }
-              },
-              "text": {
-                "@": {
-                  "value": "{eds.color.other.orange.700}"
-                },
-                "hover": {
-                  "value": "{eds.color.neutral.white}"
-                },
-                "active": {
-                  "value": "{eds.color.neutral.white}"
-                }
-              },
-              "icon": {
-                "@": {
-                  "value": "{eds.color.other.orange.600}"
-                },
-                "hover": {
-                  "value": "{eds.color.neutral.white}"
-                },
-                "active": {
-                  "value": "{eds.color.neutral.white}"
-                }
-              }
-            },
-            "error": {
-              "background": {
-                "@": {
-                  "value": "{eds.theme.color.transparent.black.0}"
-                },
-                "hover": {
-                  "value": "{eds.color.other.ruby.700}"
-                },
-                "active": {
-                  "value": "{eds.color.other.ruby.800}"
-                }
-              },
-              "border": {
-                "@": {
-                  "value": "{eds.color.other.ruby.600}"
-                },
-                "hover": {
-                  "value": "{eds.color.other.ruby.700}"
-                },
-                "active": {
-                  "value": "{eds.color.other.ruby.800}"
-                }
-              },
-              "text": {
-                "@": {
-                  "value": "{eds.color.other.ruby.700}"
-                },
-                "hover": {
-                  "value": "{eds.color.neutral.white}"
-                },
-                "active": {
-                  "value": "{eds.color.neutral.white}"
-                }
-              },
-              "icon": {
-                "@": {
-                  "value": "{eds.color.other.ruby.600}"
-                },
-                "hover": {
-                  "value": "{eds.color.neutral.white}"
-                },
-                "active": {
-                  "value": "{eds.color.neutral.white}"
-                }
-              }
-            }
-          },
-          "icon": {
-            "brand": {
-              "@": {
-                "value": "{eds.color.brand.grape.600}"
-              },
-              "hover": {
-                "value": "{eds.color.brand.grape.600}"
-              },
-              "active": {
-                "value": "{eds.color.neutral.white}"
-              },
-              "background": {
-                "@": {
-                  "value": "{eds.theme.color.transparent.black.0}"
-                },
-                "hover": {
-                  "value": "{eds.color.brand.grape.200}"
-                },
-                "active": {
-                  "value": "{eds.color.brand.grape.700}"
-                }
-              },
-              "border": {
-                "@": {
-                  "value": "{eds.theme.color.transparent.black.0}"
-                },
-                "hover": {
-                  "value": "{eds.color.brand.grape.200}"
-                },
-                "active": {
-                  "value": "{eds.color.brand.grape.700}"
-                }
-              },
-              "text": {
-                "@": {
-                  "value": "{eds.color.brand.grape.700}"
-                },
-                "hover": {
-                  "value": "{eds.color.brand.grape.700}"
-                },
-                "active": {
-                  "value": "{eds.color.neutral.white}"
-                }
-              }
-            },
-            "neutral": {
-              "@": {
-                "value": "{eds.color.neutral.600}"
-              },
-              "hover": {
-                "value": "{eds.color.neutral.600}"
-              },
-              "active": {
-                "value": "{eds.color.neutral.white}"
-              },
-              "background": {
-                "@": {
-                  "value": "{eds.theme.color.transparent.black.0}"
-                },
-                "hover": {
-                  "value": "{eds.color.neutral.200}"
-                },
-                "active": {
-                  "value": "{eds.color.neutral.600}"
-                }
-              },
-              "border": {
-                "@": {
-                  "value": "{eds.theme.color.transparent.black.0}"
-                },
-                "hover": {
-                  "value": "{eds.color.neutral.200}"
-                },
-                "active": {
-                  "value": "{eds.color.neutral.600}"
-                }
-              },
-              "text": {
-                "@": {
-                  "value": "{eds.color.neutral.600}"
-                },
-                "hover": {
-                  "value": "{eds.color.neutral.600}"
-                },
-                "active": {
-                  "value": "{eds.color.neutral.white}"
-                }
-              }
-            },
-            "success": {
-              "@": {
-                "value": "{eds.color.other.mint.600}"
-              },
-              "hover": {
-                "value": "{eds.color.other.mint.600}"
-              },
-              "active": {
-                "value": "{eds.color.neutral.white}"
-              },
-              "background": {
-                "@": {
-                  "value": "{eds.theme.color.transparent.black.0}"
-                },
-                "hover": {
-                  "value": "{eds.color.other.mint.200}"
-                },
-                "active": {
-                  "value": "{eds.color.other.mint.700}"
-                }
-              },
-              "border": {
-                "@": {
-                  "value": "{eds.theme.color.transparent.black.0}"
-                },
-                "hover": {
-                  "value": "{eds.color.other.mint.200}"
-                },
-                "active": {
-                  "value": "{eds.color.other.mint.700}"
-                }
-              },
-              "text": {
-                "@": {
-                  "value": "{eds.color.other.mint.700}"
-                },
-                "hover": {
-                  "value": "{eds.color.other.mint.700}"
-                },
-                "active": {
-                  "value": "{eds.color.neutral.white}"
-                }
-              }
-            },
-            "warning": {
-              "@": {
-                "value": "{eds.color.other.orange.600}"
-              },
-              "hover": {
-                "value": "{eds.color.other.orange.600}"
-              },
-              "active": {
-                "value": "{eds.color.neutral.white}"
-              },
-              "background": {
-                "@": {
-                  "value": "{eds.theme.color.transparent.black.0}"
-                },
-                "hover": {
-                  "value": "{eds.color.other.orange.100}"
-                },
-                "active": {
-                  "value": "{eds.color.other.orange.700}"
-                }
-              },
-              "border": {
-                "@": {
-                  "value": "{eds.theme.color.transparent.black.0}"
-                },
-                "hover": {
-                  "value": "{eds.color.other.orange.100}"
-                },
-                "active": {
-                  "value": "{eds.color.other.orange.700}"
-                }
-              },
-              "text": {
-                "@": {
-                  "value": "{eds.color.other.orange.700}"
-                },
-                "hover": {
-                  "value": "{eds.color.other.orange.700}"
-                },
-                "active": {
-                  "value": "{eds.color.neutral.white}"
-                }
-              }
-            },
-            "error": {
-              "@": {
-                "value": "{eds.color.other.ruby.600}"
-              },
-              "hover": {
-                "value": "{eds.color.other.ruby.600}"
-              },
-              "active": {
-                "value": "{eds.color.neutral.white}"
-              },
-              "background": {
-                "@": {
-                  "value": "{eds.theme.color.transparent.black.0}"
-                },
-                "hover": {
-                  "value": "{eds.color.other.ruby.200}"
-                },
-                "active": {
-                  "value": "{eds.color.other.ruby.700}"
-                }
-              },
-              "border": {
-                "@": {
-                  "value": "{eds.theme.color.transparent.black.0}"
-                },
-                "hover": {
-                  "value": "{eds.color.other.ruby.200}"
-                },
-                "active": {
-                  "value": "{eds.color.other.ruby.700}"
-                }
-              },
-              "text": {
-                "@": {
-                  "value": "{eds.color.other.ruby.700}"
-                },
-                "hover": {
-                  "value": "{eds.color.other.ruby.700}"
-                },
-                "active": {
-                  "value": "{eds.color.neutral.white}"
-                }
-              }
-            }
-          }
-        }
-      },
-      "box": {
-        "button": {
-          "border": {
-            "radius": {
-              "value": "{eds.border.radius.md}"
-            }
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/src/design-tokens/tier-3-component/checkbox.json b/src/design-tokens/tier-3-component/checkbox-colors.json
similarity index 69%
rename from src/design-tokens/tier-3-component/checkbox.json
rename to src/design-tokens/tier-3-component/checkbox-colors.json
index 1da363be6..33dee4dda 100644
--- a/src/design-tokens/tier-3-component/checkbox.json
+++ b/src/design-tokens/tier-3-component/checkbox-colors.json
@@ -6,7 +6,8 @@
           "brand": {
             "background": {
               "@": {
-                "value": "{eds.color.brand.grape.500}"
+                "value": "{eds.color.brand.grape.500}",
+                "group": "colors"
               }
             }
           }
diff --git a/src/design-tokens/tier-3-component/data-bar.json b/src/design-tokens/tier-3-component/data-bar.json
deleted file mode 100644
index b021bac86..000000000
--- a/src/design-tokens/tier-3-component/data-bar.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "eds": {
-    "theme": {
-      "color": {
-        "data-bar": {
-          "background": {
-            "value": "{eds.color.neutral.100}"
-          },
-          "border": {
-            "value": "{eds.color.neutral.300}"
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/src/design-tokens/tier-3-component/dataBar-colors.json b/src/design-tokens/tier-3-component/dataBar-colors.json
new file mode 100644
index 000000000..955868fc1
--- /dev/null
+++ b/src/design-tokens/tier-3-component/dataBar-colors.json
@@ -0,0 +1,20 @@
+{
+  "eds": {
+    "theme": {
+      "color": {
+        "data-bar": {
+          "background": {
+            "value": "{eds.color.neutral.100}",
+            "group": "color",
+            "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+          },
+          "border": {
+            "value": "{eds.color.neutral.300}",
+            "group": "color",
+            "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/design-tokens/tier-3-component/focus-ring.json b/src/design-tokens/tier-3-component/focusRing-box.json
similarity index 57%
rename from src/design-tokens/tier-3-component/focus-ring.json
rename to src/design-tokens/tier-3-component/focusRing-box.json
index bc69dd2ea..db017656d 100644
--- a/src/design-tokens/tier-3-component/focus-ring.json
+++ b/src/design-tokens/tier-3-component/focusRing-box.json
@@ -1,16 +1,6 @@
 {
   "eds": {
     "theme": {
-      "color": {
-        "focus-ring": {
-          "@": {
-            "value": "{eds.color.brand.grape.600}"
-          },
-          "inverted": {
-            "value": "{eds.color.neutral.white}"
-          }
-        }
-      },
       "box": {
         "focus-ring": {
           "outline": {
diff --git a/src/design-tokens/tier-3-component/focusRing-colors.json b/src/design-tokens/tier-3-component/focusRing-colors.json
new file mode 100644
index 000000000..a9780275e
--- /dev/null
+++ b/src/design-tokens/tier-3-component/focusRing-colors.json
@@ -0,0 +1,18 @@
+{
+  "eds": {
+    "theme": {
+      "color": {
+        "focus-ring": {
+          "@": {
+            "value": "{eds.color.brand.grape.600}",
+            "group": "color"
+          },
+          "inverted": {
+            "value": "{eds.color.neutral.white}",
+            "group": "color"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/design-tokens/tier-3-component/forms-colors.json b/src/design-tokens/tier-3-component/forms-colors.json
new file mode 100644
index 000000000..4fe2bcb66
--- /dev/null
+++ b/src/design-tokens/tier-3-component/forms-colors.json
@@ -0,0 +1,34 @@
+{
+  "eds": {
+    "theme": {
+      "color": {
+        "form": {
+          "border": {
+            "@": {
+              "value": "{eds.color.neutral.500}",
+              "group": "color"
+            },
+            "hover": {
+              "value": "{eds.color.neutral.800}",
+              "group": "color"
+            }
+          },
+          "background": {
+            "@": {
+              "value": "{eds.color.neutral.white}",
+              "group": "color"
+            },
+            "hover": {
+              "value": "{eds.color.neutral.100}",
+              "group": "color"
+            }
+          },
+          "label": {
+            "value": "{eds.color.neutral.700}",
+            "group": "color"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/design-tokens/tier-3-component/forms-form.json b/src/design-tokens/tier-3-component/forms-form.json
new file mode 100644
index 000000000..d19faf88b
--- /dev/null
+++ b/src/design-tokens/tier-3-component/forms-form.json
@@ -0,0 +1,16 @@
+{
+  "eds": {
+    "theme": {
+      "form": {
+        "border": {
+          "width": {
+            "value": "{eds.border.width.sm}"
+          },
+          "radius": {
+            "value": "{eds.border.radius.md}"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/design-tokens/tier-3-component/forms-typography.json b/src/design-tokens/tier-3-component/forms-typography.json
new file mode 100644
index 000000000..3cbd72bf5
--- /dev/null
+++ b/src/design-tokens/tier-3-component/forms-typography.json
@@ -0,0 +1,16 @@
+{
+  "eds": {
+    "theme": {
+      "typography": {
+        "form": {
+          "label": {
+            "value": "var(--eds-typography-preset-006)"
+          },
+          "input": {
+            "value": "var(--eds-typography-preset-005-light)"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/design-tokens/tier-3-component/forms.json b/src/design-tokens/tier-3-component/forms.json
deleted file mode 100644
index b7c790aad..000000000
--- a/src/design-tokens/tier-3-component/forms.json
+++ /dev/null
@@ -1,49 +0,0 @@
-{
-  "eds": {
-    "theme": {
-      "typography": {
-        "form": {
-          "label": {
-            "value": "var(--eds-typography-preset-006)"
-          },
-          "input": {
-            "value": "var(--eds-typography-preset-005-light)"
-          }
-        }
-      },
-      "color": {
-        "form": {
-          "border": {
-            "@": {
-              "value": "{eds.color.neutral.500}"
-            },
-            "hover": {
-              "value": "{eds.color.neutral.800}"
-            }
-          },
-          "background": {
-            "@": {
-              "value": "{eds.color.neutral.white}"
-            },
-            "hover": {
-              "value": "{eds.color.neutral.100}"
-            }
-          },
-          "label": {
-            "value": "{eds.color.neutral.700}"
-          }
-        }
-      },
-      "form": {
-        "border": {
-          "width": {
-            "value": "{eds.border.width.sm}"
-          },
-          "radius": {
-            "value": "{eds.border.radius.md}"
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/src/design-tokens/tier-3-component/link.json b/src/design-tokens/tier-3-component/link-colors.json
similarity index 76%
rename from src/design-tokens/tier-3-component/link.json
rename to src/design-tokens/tier-3-component/link-colors.json
index 368cb2f5c..7d05bc14d 100644
--- a/src/design-tokens/tier-3-component/link.json
+++ b/src/design-tokens/tier-3-component/link-colors.json
@@ -6,78 +6,76 @@
           "brand": {
             "text": {
               "@": {
-                "value": "var(--eds-theme-color-text-neutral-strong)"
+                "value": "var(--eds-theme-color-text-neutral-strong)",
+                "group": "color"
               },
               "hover": {
-                "value": "var(--eds-theme-color-text-brand-default)"
+                "value": "var(--eds-theme-color-text-brand-default)",
+                "group": "color"
               },
               "focus": {
-                "value": "var(--eds-theme-color-text-neutral-default-inverse)"
+                "value": "var(--eds-theme-color-text-neutral-default-inverse)",
+                "group": "color"
               }
             },
             "text-decoration": {
               "@": {
-                "value": "var(--eds-theme-color-text-brand-default)"
+                "value": "var(--eds-theme-color-text-brand-default)",
+                "group": "color"
               },
               "hover": {
-                "value": "var(--eds-theme-color-text-brand-default)"
+                "value": "var(--eds-theme-color-text-brand-default)",
+                "group": "color"
               },
               "focus": {
-                "value": "var(--eds-theme-color-text-neutral-default-inverse)"
+                "value": "var(--eds-theme-color-text-neutral-default-inverse)",
+                "group": "color"
               }
             },
             "background": {
               "focus": {
-                "value": "var(--eds-theme-color-text-brand-default)"
+                "value": "var(--eds-theme-color-text-brand-default)",
+                "group": "color"
               }
             }
           },
           "neutral": {
             "text": {
               "@": {
-                "value": "var(--eds-theme-color-text-neutral-strong)"
+                "value": "var(--eds-theme-color-text-neutral-strong)",
+                "group": "color"
               },
               "hover": {
-                "value": "var(--eds-theme-color-text-brand-default)"
+                "value": "var(--eds-theme-color-text-brand-default)",
+                "group": "color"
               },
               "focus": {
-                "value": "var(--eds-theme-color-text-neutral-default-inverse)"
+                "value": "var(--eds-theme-color-text-neutral-default-inverse)",
+                "group": "color"
               }
             },
             "text-decoration": {
               "@": {
-                "value": "var(--eds-theme-color-text-neutral-default)"
+                "value": "var(--eds-theme-color-text-neutral-default)",
+                "group": "color"
               },
               "hover": {
-                "value": "var(--eds-theme-color-text-brand-default)"
+                "value": "var(--eds-theme-color-text-brand-default)",
+                "group": "color"
               },
               "focus": {
-                "value": "var(--eds-theme-color-text-neutral-default-inverse)"
+                "value": "var(--eds-theme-color-text-neutral-default-inverse)",
+                "group": "color"
               }
             },
             "background": {
               "focus": {
-                "value": "var(--eds-theme-color-text-neutral-default)"
+                "value": "var(--eds-theme-color-text-neutral-default)",
+                "group": "color"
               }
             }
           }
         }
-      },
-      "typography": {
-        "link": {
-          "lg": {
-            "value": "var(--eds-typography-preset-004)"
-          },
-          "md": {
-            "value": "var(--eds-typography-preset-005)"
-          },
-          "sm": {
-            "value": "var(--eds-typography-preset-007)"
-          },
-          "xs": {
-            "value": "var(--eds-typography-preset-009)"
-          }
-        }
       }
     }
   }
diff --git a/src/design-tokens/tier-3-component/link-typography.json b/src/design-tokens/tier-3-component/link-typography.json
new file mode 100644
index 000000000..7f8a56f48
--- /dev/null
+++ b/src/design-tokens/tier-3-component/link-typography.json
@@ -0,0 +1,22 @@
+{
+  "eds": {
+    "theme": {
+      "typography": {
+        "link": {
+          "lg": {
+            "value": "var(--eds-typography-preset-004)"
+          },
+          "md": {
+            "value": "var(--eds-typography-preset-005)"
+          },
+          "sm": {
+            "value": "var(--eds-typography-preset-007)"
+          },
+          "xs": {
+            "value": "var(--eds-typography-preset-009)"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/design-tokens/tier-3-component/modals.json b/src/design-tokens/tier-3-component/modals-colors.json
similarity index 73%
rename from src/design-tokens/tier-3-component/modals.json
rename to src/design-tokens/tier-3-component/modals-colors.json
index 33805c5d5..96bc242b1 100644
--- a/src/design-tokens/tier-3-component/modals.json
+++ b/src/design-tokens/tier-3-component/modals-colors.json
@@ -7,7 +7,8 @@
             "header": {
               "background": {
                 "@": {
-                  "value": "{eds.color.brand.grape.500}"
+                  "value": "{eds.color.brand.grape.500}",
+                  "group": "color"
                 }
               }
             }
diff --git a/src/design-tokens/tier-3-component/progress-bar.json b/src/design-tokens/tier-3-component/progressBar-colors.json
similarity index 100%
rename from src/design-tokens/tier-3-component/progress-bar.json
rename to src/design-tokens/tier-3-component/progressBar-colors.json
diff --git a/src/design-tokens/tier-3-component/radio.json b/src/design-tokens/tier-3-component/radio-colors.json
similarity index 69%
rename from src/design-tokens/tier-3-component/radio.json
rename to src/design-tokens/tier-3-component/radio-colors.json
index 5f908bedf..1bed943a9 100644
--- a/src/design-tokens/tier-3-component/radio.json
+++ b/src/design-tokens/tier-3-component/radio-colors.json
@@ -6,7 +6,8 @@
           "brand": {
             "background": {
               "@": {
-                "value": "{eds.color.brand.grape.500}"
+                "value": "{eds.color.brand.grape.500}",
+                "group": "color"
               }
             }
           }
diff --git a/src/design-tokens/tier-3-component/slider.json b/src/design-tokens/tier-3-component/slider-size.json
similarity index 100%
rename from src/design-tokens/tier-3-component/slider.json
rename to src/design-tokens/tier-3-component/slider-size.json
diff --git a/src/design-tokens/tier-3-component/tab.json b/src/design-tokens/tier-3-component/tab-typography.json
similarity index 100%
rename from src/design-tokens/tier-3-component/tab.json
rename to src/design-tokens/tier-3-component/tab-typography.json
diff --git a/src/design-tokens/tier-3-component/tag.json b/src/design-tokens/tier-3-component/tag-typography.json
similarity index 100%
rename from src/design-tokens/tier-3-component/tag.json
rename to src/design-tokens/tier-3-component/tag-typography.json
diff --git a/src/design-tokens/tier-3-component/text-highlight.json b/src/design-tokens/tier-3-component/textHighlight-colors.json
similarity index 53%
rename from src/design-tokens/tier-3-component/text-highlight.json
rename to src/design-tokens/tier-3-component/textHighlight-colors.json
index a8196c8c4..10d19471e 100644
--- a/src/design-tokens/tier-3-component/text-highlight.json
+++ b/src/design-tokens/tier-3-component/textHighlight-colors.json
@@ -4,10 +4,12 @@
       "color": {
         "text-highlight": {
           "foreground": {
-            "value": "{eds.color.neutral.800}"
+            "value": "{eds.color.neutral.800}",
+            "group": "color"
           },
           "background": {
-            "value": "{eds.color.other.lemon}"
+            "value": "{eds.color.other.yellow.100}",
+            "group": "color"
           }
         }
       }
diff --git a/src/design-tokens/tier-3-component/toggle.json b/src/design-tokens/tier-3-component/toggle-colors.json
similarity index 67%
rename from src/design-tokens/tier-3-component/toggle.json
rename to src/design-tokens/tier-3-component/toggle-colors.json
index 7d6bcbfcb..c421f4c4b 100644
--- a/src/design-tokens/tier-3-component/toggle.json
+++ b/src/design-tokens/tier-3-component/toggle-colors.json
@@ -5,29 +5,35 @@
         "toggle": {
           "on": {
             "background": {
-              "value": "var(--eds-theme-color-background-brand-primary-strong)"
+              "value": "var(--eds-theme-color-background-brand-primary-strong)",
+              "group": "color"
             }
           },
           "off": {
             "background": {
-              "value": "var(--eds-theme-color-icon-neutral-subtle)"
+              "value": "var(--eds-theme-color-icon-neutral-subtle)",
+              "group": "color"
             }
           },
           "disabled": {
             "background": {
-              "value": "var(--eds-theme-color-icon-disabled)"
+              "value": "var(--eds-theme-color-icon-disabled)",
+              "group": "color"
             },
             "text": {
-              "value": "var(--eds-theme-color-text-disabled)"
+              "value": "var(--eds-theme-color-text-disabled)",
+              "group": "color"
             }
           },
           "primary": {
             "text": {
-              "value": "var(--eds-theme-color-text-neutral-default)"
+              "value": "var(--eds-theme-color-text-neutral-default)",
+              "group": "color"
             }
           },
           "thumb": {
-            "value": "var(--eds-theme-color-text-neutral-default-inverse)"
+            "value": "var(--eds-theme-color-text-neutral-default-inverse)",
+            "group": "color"
           }
         }
       }
diff --git a/src/tokens-dist/css/variables.css b/src/tokens-dist/css/variables.css
index 0e76a0bbc..08d5875af 100644
--- a/src/tokens-dist/css/variables.css
+++ b/src/tokens-dist/css/variables.css
@@ -10,20 +10,20 @@
   --eds-theme-typography-link-lg: var(--eds-typography-preset-004);
   --eds-theme-typography-form-input: var(--eds-typography-preset-005-light);
   --eds-theme-typography-form-label: var(--eds-typography-preset-006);
-  --eds-theme-typography-button-label-sm: var(--eds-typography-preset-008-bold); /* @deprecated This is deprecated and missing from figma */
-  --eds-theme-typography-button-label: var(--eds-typography-preset-006); /* @deprecated This is deprecated and missing from figma */
+  --eds-theme-typography-button-label-sm: var(--eds-typography-preset-008-bold); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-typography-button-label: var(--eds-typography-preset-006); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-typography-button-md: var(--eds-typography-preset-006);
   --eds-theme-typography-button-lg: var(--eds-typography-preset-006);
   --eds-theme-typography-breadcrumb: var(--eds-typography-preset-009);
   --eds-theme-typography-callout: var(--eds-typography-preset-002-light);
   --eds-theme-typography-overline-sm: var(--eds-typography-preset-012);
   --eds-theme-typography-overline-md: var(--eds-typography-preset-011);
-  --eds-theme-typography-overline: var(--eds-typography-preset-011); /* @deprecated This is deprecated and missing from figma. */
-  --eds-theme-typography-caption-sm-bold: var(--eds-typography-preset-010); /* Currently undefined in figma */
+  --eds-theme-typography-overline: var(--eds-typography-preset-011); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-typography-caption-sm-bold: var(--eds-typography-preset-010);
   --eds-theme-typography-caption-sm: var(--eds-typography-preset-010-light);
-  --eds-theme-typography-caption-md-bold: var(--eds-typography-preset-008); /* Currently undefined in figma */
+  --eds-theme-typography-caption-md-bold: var(--eds-typography-preset-008);
   --eds-theme-typography-caption-md: var(--eds-typography-preset-008-light);
-  --eds-theme-typography-caption-lg-bold: var(--eds-typography-preset-006); /* Currently undefined in figma */
+  --eds-theme-typography-caption-lg-bold: var(--eds-typography-preset-006);
   --eds-theme-typography-caption-lg: var(--eds-typography-preset-006-light);
   --eds-theme-typography-body-xs: var(--eds-typography-preset-008-light);
   --eds-theme-typography-body-sm: var(--eds-typography-preset-006-light);
@@ -40,8 +40,8 @@
   --eds-theme-typography-title-sm: var(--eds-typography-preset-005);
   --eds-theme-typography-title-md-bold: var(--eds-typography-preset-004-bold);
   --eds-theme-typography-title-md: var(--eds-typography-preset-004);
-  --eds-theme-typography-title-lg-bold: var(--eds-typography-preset-004-bold); /* Currently undefined in figma */
-  --eds-theme-typography-title-lg: var(--eds-typography-preset-004); /* Currently undefined in figma */
+  --eds-theme-typography-title-lg-bold: var(--eds-typography-preset-004-bold);
+  --eds-theme-typography-title-lg: var(--eds-typography-preset-004);
   --eds-theme-typography-headline-secondary-sm-bold: var(--eds-typography-preset-secondary-003);
   --eds-theme-typography-headline-secondary-sm: var(--eds-typography-preset-secondary-003-light);
   --eds-theme-typography-headline-secondary-md-bold: var(--eds-typography-preset-secondary-002);
@@ -80,89 +80,89 @@
   --eds-theme-color-link-brand-text-focus: var(--eds-theme-color-text-neutral-default-inverse);
   --eds-theme-color-link-brand-text-hover: var(--eds-theme-color-text-brand-default);
   --eds-theme-color-link-brand-text: var(--eds-theme-color-text-neutral-strong);
-  --eds-theme-color-transparent-white-0: rgba(255, 255, 255, 0);
-  --eds-theme-color-transparent-black-30: rgba(0, 0, 0, .3);
-  --eds-theme-color-transparent-black-0: rgba(0, 0, 0, 0);
+  --eds-theme-color-transparent-white-0: rgba(255, 255, 255, 0); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-transparent-black-30: rgba(0, 0, 0, .3); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-transparent-black-0: rgba(0, 0, 0, 0); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-text-brand-default: var(--eds-theme-color-text-brand-primary);
   --eds-theme-color-border-brand-primary-default: var(--eds-theme-color-border-brand-primary);
   --eds-z-index-bottom: -100;
   --eds-z-index-top: 99999;
-  --eds-z-index-500: 500;
-  --eds-z-index-400: 400;
-  --eds-z-index-300: 300;
-  --eds-z-index-200: 200;
-  --eds-z-index-100: 100;
-  --eds-z-index-0: 0;
-  --eds-typography-preset-mobile-003-bold: var(--eds-font-weight-bold) var(--eds-font-size-20)/1.4 var(--eds-font-family-primary);
-  --eds-typography-preset-mobile-003: var(--eds-font-weight-medium) var(--eds-font-size-20)/1.4 var(--eds-font-family-primary);
-  --eds-typography-preset-mobile-003-light: var(--eds-font-weight-light) var(--eds-font-size-20)/1.4 var(--eds-font-family-primary);
-  --eds-typography-preset-mobile-002-bold: var(--eds-font-weight-bold) var(--eds-font-size-28)/1.28571429 var(--eds-font-family-primary);
-  --eds-typography-preset-mobile-002: var(--eds-font-weight-medium) var(--eds-font-size-28)/1.28571429 var(--eds-font-family-primary);
-  --eds-typography-preset-mobile-002-light: var(--eds-font-weight-light) var(--eds-font-size-28)/1.28571429 var(--eds-font-family-primary);
-  --eds-typography-preset-mobile-001-bold: var(--eds-font-weight-bold) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary);
-  --eds-typography-preset-mobile-001: var(--eds-font-weight-medium) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary);
-  --eds-typography-preset-mobile-001-light: var(--eds-font-weight-light) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary);
-  --eds-typography-preset-secondary-mobile-003: var(--eds-font-weight-medium) var(--eds-font-size-20)/1.4 var(--eds-font-family-secondary);
-  --eds-typography-preset-secondary-mobile-003-light: var(--eds-font-weight-light) var(--eds-font-size-20)/1.4 var(--eds-font-family-secondary);
-  --eds-typography-preset-secondary-mobile-002: var(--eds-font-weight-medium) var(--eds-font-size-28)/1.28571429 var(--eds-font-family-secondary);
-  --eds-typography-preset-secondary-mobile-002-light: var(--eds-font-weight-light) var(--eds-font-size-28)/1.28571429 var(--eds-font-family-secondary);
-  --eds-typography-preset-secondary-mobile-001: var(--eds-font-weight-medium) var(--eds-font-size-32)/1.25 var(--eds-font-family-secondary);
-  --eds-typography-preset-secondary-mobile-001-light: var(--eds-font-weight-light) var(--eds-font-size-32)/1.25 var(--eds-font-family-secondary);
-  --eds-typography-preset-secondary-008-light: var(--eds-font-weight-light) var(--eds-font-size-12)/1.33333333 var(--eds-font-family-secondary);
-  --eds-typography-preset-secondary-008: var(--eds-font-weight-medium) var(--eds-font-size-12)/1.33333333 var(--eds-font-family-secondary);
-  --eds-typography-preset-secondary-007-light: var(--eds-font-weight-light) var(--eds-font-size-12)/1.66666667 var(--eds-font-family-secondary);
-  --eds-typography-preset-secondary-007: var(--eds-font-weight-medium) var(--eds-font-size-12)/1.66666667 var(--eds-font-family-secondary);
-  --eds-typography-preset-secondary-006-light: var(--eds-font-weight-light) var(--eds-font-size-14)/1.42857143 var(--eds-font-family-secondary);
-  --eds-typography-preset-secondary-006: var(--eds-font-weight-medium) var(--eds-font-size-14)/1.42857143 var(--eds-font-family-secondary);
-  --eds-typography-preset-secondary-005-light: var(--eds-font-weight-light) var(--eds-font-size-14)/1.57142857 var(--eds-font-family-secondary);
-  --eds-typography-preset-secondary-005: var(--eds-font-weight-medium) var(--eds-font-size-14)/1.57142857 var(--eds-font-family-secondary);
-  --eds-typography-preset-secondary-004-light: var(--eds-font-weight-light) var(--eds-font-size-16)/1.5 var(--eds-font-family-secondary);
-  --eds-typography-preset-secondary-004: var(--eds-font-weight-medium) var(--eds-font-size-16)/1.5 var(--eds-font-family-secondary);
-  --eds-typography-preset-secondary-003-light: var(--eds-font-weight-light) var(--eds-font-size-20)/1.4 var(--eds-font-family-secondary);
-  --eds-typography-preset-secondary-003: var(--eds-font-weight-medium) var(--eds-font-size-20)/1.4 var(--eds-font-family-secondary);
-  --eds-typography-preset-secondary-002-light: var(--eds-font-weight-light) var(--eds-font-size-28)/1.28571429 var(--eds-font-family-secondary);
-  --eds-typography-preset-secondary-002: var(--eds-font-weight-medium) var(--eds-font-size-28)/1.28571429 var(--eds-font-family-secondary);
-  --eds-typography-preset-secondary-001-light: var(--eds-font-weight-light) var(--eds-font-size-32)/1.25 var(--eds-font-family-secondary);
-  --eds-typography-preset-secondary-001: var(--eds-font-weight-medium) var(--eds-font-size-32)/1.25 var(--eds-font-family-secondary);
-  --eds-typography-preset-012-bold: var(--eds-font-weight-bold) var(--eds-font-size-11)/1.272727272 var(--eds-font-family-primary); /* For 012, add a text-transform treatment for uppercase (font-variant is limited to CSS 2.1 values) */
-  --eds-typography-preset-012-light: var(--eds-font-weight-light) var(--eds-font-size-11)/1.272727272 var(--eds-font-family-primary); /* For 012, add a text-transform treatment for uppercase (font-variant is limited to CSS 2.1 values) */
-  --eds-typography-preset-012: var(--eds-font-weight-medium) var(--eds-font-size-11)/1.272727272 var(--eds-font-family-primary); /* For 012, add a text-transform treatment for uppercase (font-variant is limited to CSS 2.1 values) */
-  --eds-typography-preset-011-bold: var(--eds-font-weight-bold) var(--eds-font-size-12)/1.333333333 var(--eds-font-family-primary); /* For 011, add a text-transform treatment for uppercase (font-variant is limited to CSS 2.1 values) */
-  --eds-typography-preset-011-light: var(--eds-font-weight-light) var(--eds-font-size-12)/1.333333333 var(--eds-font-family-primary); /* For 011, add a text-transform treatment for uppercase (font-variant is limited to CSS 2.1 values) */
-  --eds-typography-preset-011: var(--eds-font-weight-medium) var(--eds-font-size-12)/1.333333333 var(--eds-font-family-primary); /* For 011, add a text-transform treatment for uppercase (font-variant is limited to CSS 2.1 values) */
-  --eds-typography-preset-010-bold: var(--eds-font-weight-bold) var(--eds-font-size-11)/1.272727272 var(--eds-font-family-primary);
-  --eds-typography-preset-010-light: var(--eds-font-weight-light) var(--eds-font-size-11)/1.272727272 var(--eds-font-family-primary);
-  --eds-typography-preset-010: var(--eds-font-weight-medium) var(--eds-font-size-11)/1.272727272 var(--eds-font-family-primary);
-  --eds-typography-preset-009-bold: var(--eds-font-weight-bold) var(--eds-font-size-12)/1.333333333 var(--eds-font-family-primary);
-  --eds-typography-preset-009-light: var(--eds-font-weight-light) var(--eds-font-size-12)/1.333333333 var(--eds-font-family-primary);
-  --eds-typography-preset-009: var(--eds-font-weight-medium) var(--eds-font-size-12)/1.333333333 var(--eds-font-family-primary);
-  --eds-typography-preset-008-bold: var(--eds-font-weight-bold) var(--eds-font-size-12)/1.666666667 var(--eds-font-family-primary);
-  --eds-typography-preset-008-light: var(--eds-font-weight-light) var(--eds-font-size-12)/1.666666667 var(--eds-font-family-primary);
-  --eds-typography-preset-008: var(--eds-font-weight-medium) var(--eds-font-size-12)/1.666666667 var(--eds-font-family-primary);
-  --eds-typography-preset-007-bold: var(--eds-font-weight-bold) var(--eds-font-size-14)/1.28571429 var(--eds-font-family-primary);
-  --eds-typography-preset-007-light: var(--eds-font-weight-light) var(--eds-font-size-14)/1.28571429 var(--eds-font-family-primary);
-  --eds-typography-preset-007: var(--eds-font-weight-medium) var(--eds-font-size-14)/1.28571429 var(--eds-font-family-primary);
-  --eds-typography-preset-006-bold: var(--eds-font-weight-bold) var(--eds-font-size-14)/1.57142857 var(--eds-font-family-primary);
-  --eds-typography-preset-006-light: var(--eds-font-weight-light) var(--eds-font-size-14)/1.57142857 var(--eds-font-family-primary);
-  --eds-typography-preset-006: var(--eds-font-weight-medium) var(--eds-font-size-14)/1.57142857 var(--eds-font-family-primary);
-  --eds-typography-preset-005-bold: var(--eds-font-weight-bold) var(--eds-font-size-16)/1.5 var(--eds-font-family-primary);
-  --eds-typography-preset-005-light: var(--eds-font-weight-light) var(--eds-font-size-16)/1.5 var(--eds-font-family-primary);
-  --eds-typography-preset-005: var(--eds-font-weight-medium) var(--eds-font-size-16)/1.5 var(--eds-font-family-primary);
-  --eds-typography-preset-004-bold: var(--eds-font-weight-bold) var(--eds-font-size-18)/1.55555556 var(--eds-font-family-primary);
-  --eds-typography-preset-004-light: var(--eds-font-weight-light) var(--eds-font-size-18)/1.55555556 var(--eds-font-family-primary);
-  --eds-typography-preset-004: var(--eds-font-weight-medium) var(--eds-font-size-18)/1.55555556 var(--eds-font-family-primary);
-  --eds-typography-preset-003-mobile: var(--eds-font-weight-bold) var(--eds-font-size-20)/1.4 var(--eds-font-family-primary); /* @deprecated This is deprecated and missing from figma */
-  --eds-typography-preset-003-bold: var(--eds-font-weight-bold) var(--eds-font-size-22)/1.45454545 var(--eds-font-family-primary);
-  --eds-typography-preset-003-light: var(--eds-font-weight-light) var(--eds-font-size-22)/1.45454545 var(--eds-font-family-primary);
-  --eds-typography-preset-003: var(--eds-font-weight-medium) var(--eds-font-size-22)/1.45454545 var(--eds-font-family-primary);
-  --eds-typography-preset-002-mobile: var(--eds-font-weight-bold) var(--eds-font-size-28)/1.2857 var(--eds-font-family-primary); /* @deprecated This is deprecated and missing from figma */
-  --eds-typography-preset-002-bold: var(--eds-font-weight-bold) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary);
-  --eds-typography-preset-002-light: var(--eds-font-weight-light) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary);
-  --eds-typography-preset-002: var(--eds-font-weight-medium) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary);
-  --eds-typography-preset-001-mobile: var(--eds-font-weight-bold) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary); /* @deprecated This is deprecated and missing from figma */
-  --eds-typography-preset-001-bold: var(--eds-font-weight-bold) var(--eds-font-size-40)/1.2 var(--eds-font-family-primary);
-  --eds-typography-preset-001-light: var(--eds-font-weight-light) var(--eds-font-size-40)/1.2 var(--eds-font-family-primary);
-  --eds-typography-preset-001: var(--eds-font-weight-medium) var(--eds-font-size-40)/1.2 var(--eds-font-family-primary);
+  --eds-z-index-500: 500; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-z-index-400: 400; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-z-index-300: 300; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-z-index-200: 200; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-z-index-100: 100; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-z-index-0: 0; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-typography-preset-mobile-003-bold: var(--eds-font-weight-bold) 1.25rem/1.4 var(--eds-font-family-primary);
+  --eds-typography-preset-mobile-003: var(--eds-font-weight-medium) 1.25rem/1.4 var(--eds-font-family-primary);
+  --eds-typography-preset-mobile-003-light: var(--eds-font-weight-light) 1.25rem/1.4 var(--eds-font-family-primary);
+  --eds-typography-preset-mobile-002-bold: var(--eds-font-weight-bold) 1.75rem/1.28571429 var(--eds-font-family-primary);
+  --eds-typography-preset-mobile-002: var(--eds-font-weight-medium) 1.75rem/1.28571429 var(--eds-font-family-primary);
+  --eds-typography-preset-mobile-002-light: var(--eds-font-weight-light) 1.75rem/1.28571429 var(--eds-font-family-primary);
+  --eds-typography-preset-mobile-001-bold: var(--eds-font-weight-bold) 2rem/1.25 var(--eds-font-family-primary);
+  --eds-typography-preset-mobile-001: var(--eds-font-weight-medium) 2rem/1.25 var(--eds-font-family-primary);
+  --eds-typography-preset-mobile-001-light: var(--eds-font-weight-light) 2rem/1.25 var(--eds-font-family-primary);
+  --eds-typography-preset-secondary-mobile-003: var(--eds-font-weight-medium) 1.25rem/1.4 var(--eds-font-family-secondary);
+  --eds-typography-preset-secondary-mobile-003-light: var(--eds-font-weight-light) 1.25rem/1.4 var(--eds-font-family-secondary);
+  --eds-typography-preset-secondary-mobile-002: var(--eds-font-weight-medium) 1.75rem/1.28571429 var(--eds-font-family-secondary);
+  --eds-typography-preset-secondary-mobile-002-light: var(--eds-font-weight-light) 1.75rem/1.28571429 var(--eds-font-family-secondary);
+  --eds-typography-preset-secondary-mobile-001: var(--eds-font-weight-medium) 2rem/1.25 var(--eds-font-family-secondary);
+  --eds-typography-preset-secondary-mobile-001-light: var(--eds-font-weight-light) 2rem/1.25 var(--eds-font-family-secondary);
+  --eds-typography-preset-secondary-008-light: var(--eds-font-weight-light) 0.75rem/1.33333333 var(--eds-font-family-secondary);
+  --eds-typography-preset-secondary-008: var(--eds-font-weight-medium) 0.75rem/1.33333333 var(--eds-font-family-secondary);
+  --eds-typography-preset-secondary-007-light: var(--eds-font-weight-light) 0.75rem/1.66666667 var(--eds-font-family-secondary);
+  --eds-typography-preset-secondary-007: var(--eds-font-weight-medium) 0.75rem/1.66666667 var(--eds-font-family-secondary);
+  --eds-typography-preset-secondary-006-light: var(--eds-font-weight-light) 0.875rem/1.42857143 var(--eds-font-family-secondary);
+  --eds-typography-preset-secondary-006: var(--eds-font-weight-medium) 0.875rem/1.42857143 var(--eds-font-family-secondary);
+  --eds-typography-preset-secondary-005-light: var(--eds-font-weight-light) 0.875rem/1.57142857 var(--eds-font-family-secondary);
+  --eds-typography-preset-secondary-005: var(--eds-font-weight-medium) 0.875rem/1.57142857 var(--eds-font-family-secondary);
+  --eds-typography-preset-secondary-004-light: var(--eds-font-weight-light) 1rem/1.5 var(--eds-font-family-secondary);
+  --eds-typography-preset-secondary-004: var(--eds-font-weight-medium) 1rem/1.5 var(--eds-font-family-secondary);
+  --eds-typography-preset-secondary-003-light: var(--eds-font-weight-light) 1.25rem/1.4 var(--eds-font-family-secondary);
+  --eds-typography-preset-secondary-003: var(--eds-font-weight-medium) 1.25rem/1.4 var(--eds-font-family-secondary);
+  --eds-typography-preset-secondary-002-light: var(--eds-font-weight-light) 1.75rem/1.28571429 var(--eds-font-family-secondary);
+  --eds-typography-preset-secondary-002: var(--eds-font-weight-medium) 1.75rem/1.28571429 var(--eds-font-family-secondary);
+  --eds-typography-preset-secondary-001-light: var(--eds-font-weight-light) 2rem/1.25 var(--eds-font-family-secondary);
+  --eds-typography-preset-secondary-001: var(--eds-font-weight-medium) 2rem/1.25 var(--eds-font-family-secondary);
+  --eds-typography-preset-012-bold: var(--eds-font-weight-bold) 0.6875rem/1.272727272 var(--eds-font-family-primary); /* For 012, add a text-transform treatment for uppercase (font-variant is limited to CSS 2.1 values) */
+  --eds-typography-preset-012-light: var(--eds-font-weight-light) 0.6875rem/1.272727272 var(--eds-font-family-primary); /* For 012, add a text-transform treatment for uppercase (font-variant is limited to CSS 2.1 values) */
+  --eds-typography-preset-012: var(--eds-font-weight-medium) 0.6875rem/1.272727272 var(--eds-font-family-primary); /* For 012, add a text-transform treatment for uppercase (font-variant is limited to CSS 2.1 values) */
+  --eds-typography-preset-011-bold: var(--eds-font-weight-bold) 0.75rem/1.333333333 var(--eds-font-family-primary); /* For 011, add a text-transform treatment for uppercase (font-variant is limited to CSS 2.1 values) */
+  --eds-typography-preset-011-light: var(--eds-font-weight-light) 0.75rem/1.333333333 var(--eds-font-family-primary); /* For 011, add a text-transform treatment for uppercase (font-variant is limited to CSS 2.1 values) */
+  --eds-typography-preset-011: var(--eds-font-weight-medium) 0.75rem/1.333333333 var(--eds-font-family-primary); /* For 011, add a text-transform treatment for uppercase (font-variant is limited to CSS 2.1 values) */
+  --eds-typography-preset-010-bold: var(--eds-font-weight-bold) 0.6875rem/1.272727272 var(--eds-font-family-primary);
+  --eds-typography-preset-010-light: var(--eds-font-weight-light) 0.6875rem/1.272727272 var(--eds-font-family-primary);
+  --eds-typography-preset-010: var(--eds-font-weight-medium) 0.6875rem/1.272727272 var(--eds-font-family-primary);
+  --eds-typography-preset-009-bold: var(--eds-font-weight-bold) 0.75rem/1.333333333 var(--eds-font-family-primary);
+  --eds-typography-preset-009-light: var(--eds-font-weight-light) 0.75rem/1.333333333 var(--eds-font-family-primary);
+  --eds-typography-preset-009: var(--eds-font-weight-medium) 0.75rem/1.333333333 var(--eds-font-family-primary);
+  --eds-typography-preset-008-bold: var(--eds-font-weight-bold) 0.75rem/1.666666667 var(--eds-font-family-primary);
+  --eds-typography-preset-008-light: var(--eds-font-weight-light) 0.75rem/1.666666667 var(--eds-font-family-primary);
+  --eds-typography-preset-008: var(--eds-font-weight-medium) 0.75rem/1.666666667 var(--eds-font-family-primary);
+  --eds-typography-preset-007-bold: var(--eds-font-weight-bold) 0.875rem/1.28571429 var(--eds-font-family-primary);
+  --eds-typography-preset-007-light: var(--eds-font-weight-light) 0.875rem/1.28571429 var(--eds-font-family-primary);
+  --eds-typography-preset-007: var(--eds-font-weight-medium) 0.875rem/1.28571429 var(--eds-font-family-primary);
+  --eds-typography-preset-006-bold: var(--eds-font-weight-bold) 0.875rem/1.57142857 var(--eds-font-family-primary);
+  --eds-typography-preset-006-light: var(--eds-font-weight-light) 0.875rem/1.57142857 var(--eds-font-family-primary);
+  --eds-typography-preset-006: var(--eds-font-weight-medium) 0.875rem/1.57142857 var(--eds-font-family-primary);
+  --eds-typography-preset-005-bold: var(--eds-font-weight-bold) 1rem/1.5 var(--eds-font-family-primary);
+  --eds-typography-preset-005-light: var(--eds-font-weight-light) 1rem/1.5 var(--eds-font-family-primary);
+  --eds-typography-preset-005: var(--eds-font-weight-medium) 1rem/1.5 var(--eds-font-family-primary);
+  --eds-typography-preset-004-bold: var(--eds-font-weight-bold) 1.125rem/1.55555556 var(--eds-font-family-primary);
+  --eds-typography-preset-004-light: var(--eds-font-weight-light) 1.125rem/1.55555556 var(--eds-font-family-primary);
+  --eds-typography-preset-004: var(--eds-font-weight-medium) 1.125rem/1.55555556 var(--eds-font-family-primary);
+  --eds-typography-preset-003-mobile: var(--eds-font-weight-bold) 1.25rem/1.4 var(--eds-font-family-primary); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-typography-preset-003-bold: var(--eds-font-weight-bold) 1.375rem/1.45454545 var(--eds-font-family-primary);
+  --eds-typography-preset-003-light: var(--eds-font-weight-light) 1.375rem/1.45454545 var(--eds-font-family-primary);
+  --eds-typography-preset-003: var(--eds-font-weight-medium) 1.375rem/1.45454545 var(--eds-font-family-primary);
+  --eds-typography-preset-002-mobile: var(--eds-font-weight-bold) 1.75rem/1.2857 var(--eds-font-family-primary); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-typography-preset-002-bold: var(--eds-font-weight-bold) 2rem/1.25 var(--eds-font-family-primary);
+  --eds-typography-preset-002-light: var(--eds-font-weight-light) 2rem/1.25 var(--eds-font-family-primary);
+  --eds-typography-preset-002: var(--eds-font-weight-medium) 2rem/1.25 var(--eds-font-family-primary);
+  --eds-typography-preset-001-mobile: var(--eds-font-weight-bold) 2rem/1.25 var(--eds-font-family-primary); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-typography-preset-001-bold: var(--eds-font-weight-bold) 2.5rem/1.2 var(--eds-font-family-primary);
+  --eds-typography-preset-001-light: var(--eds-font-weight-light) 2.5rem/1.2 var(--eds-font-family-primary);
+  --eds-typography-preset-001: var(--eds-font-weight-medium) 2.5rem/1.2 var(--eds-font-family-primary);
   --eds-letter-spacing-sm: 0.5px;
   --eds-font-weight-bold: 600;
   --eds-font-weight-medium: 500;
@@ -186,6 +186,7 @@
   --eds-size-quarter: calc(var(--eds-size-base-unit) / 4);
   --eds-size-half: calc(var(--eds-size-base-unit) / 2);
   --eds-size-base-unit: 0.5rem;
+  --eds-size-20: calc(var(--eds-size-base-unit) * 20);
   --eds-size-12: calc(var(--eds-size-base-unit) * 12);
   --eds-size-11: calc(var(--eds-size-base-unit) * 11);
   --eds-size-10: calc(var(--eds-size-base-unit) * 10);
@@ -205,9 +206,9 @@
   --eds-outline-width-lg: 4px;
   --eds-outline-width-md: 2px;
   --eds-outline-width-sm: 1px;
-  --eds-l-linelength-width: 36rem; /* @deprecated Layout tokens are deprecated and will be removed in a future release */
-  --eds-l-sidebar-width: 13.5rem; /* @deprecated Layout tokens are deprecated and will be removed in a future release */
-  --eds-l-max-width: 71.25rem; /* @deprecated Layout tokens are deprecated and will be removed in a future release */
+  --eds-l-linelength-width: 36rem; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-l-sidebar-width: 13.5rem; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-l-max-width: 71.25rem; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-color-other-ruby-800: #8F0134;
   --eds-color-other-ruby-700: #BD0044;
   --eds-color-other-ruby-600: #D41E52;
@@ -224,8 +225,8 @@
   --eds-color-other-orange-300: #FFAF76;
   --eds-color-other-orange-200: #FFCBA5;
   --eds-color-other-orange-100: #FFF1E9;
-  --eds-color-other-eraser: #F3DCE2; /* @deprecated This token has been deprecated and will be removed in a future EDS release. */
-  --eds-color-other-lemon: #F5FF8F;
+  --eds-color-other-eraser: #F3DCE2; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-color-other-lemon: #F5FF8F; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-color-other-yellow-800: #854C03;
   --eds-color-other-yellow-700: #9E5B03;
   --eds-color-other-yellow-600: #BF7300;
@@ -261,15 +262,16 @@
   --eds-color-brand-grape-200: #E0E0F9;
   --eds-color-brand-grape-100: #F0F0FC;
   --eds-border-radius-full: 9999px;
-  --eds-border-radius-round: 50%;
+  --eds-border-radius-round: 50%; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-border-radius-xl: 20px;
   --eds-border-radius-lg: 8px;
   --eds-border-radius-md: 4px;
+  --eds-border-radius-none: 0px;
   --eds-border-width-xl: 8px;
   --eds-border-width-lg: 4px;
   --eds-border-width-md: 2px;
   --eds-border-width-sm: 1px;
-  --eds-anim-ease: ease;
+  --eds-anim-ease: ease; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-anim-move-long: 0.4s;
   --eds-anim-move-medium: 0.3s;
   --eds-anim-move-quick: 0.15s;
@@ -282,7 +284,7 @@
   --eds-theme-box-focus-ring-outline-offset: var(--eds-outline-width-md);
   --eds-theme-box-focus-ring-outline-width: var(--eds-outline-width-sm);
   --eds-theme-box-button-border-radius: var(--eds-border-radius-md);
-  --eds-theme-color-text-highlight-background: var(--eds-color-other-lemon);
+  --eds-theme-color-text-highlight-background: var(--eds-color-other-yellow-100);
   --eds-theme-color-text-highlight-foreground: var(--eds-color-neutral-800);
   --eds-theme-color-radio-brand-background: var(--eds-color-brand-grape-500);
   --eds-theme-color-progress-bar-border: var(--eds-color-neutral-200);
@@ -295,8 +297,8 @@
   --eds-theme-color-form-border: var(--eds-color-neutral-500);
   --eds-theme-color-focus-ring-inverted: var(--eds-color-neutral-white);
   --eds-theme-color-focus-ring: var(--eds-color-brand-grape-600);
-  --eds-theme-color-data-bar-border: var(--eds-color-neutral-300);
-  --eds-theme-color-data-bar-background: var(--eds-color-neutral-100);
+  --eds-theme-color-data-bar-border: var(--eds-color-neutral-300); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-data-bar-background: var(--eds-color-neutral-100); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-checkbox-brand-background: var(--eds-color-brand-grape-500);
   --eds-theme-color-button-icon-error-text-active: var(--eds-color-neutral-white);
   --eds-theme-color-button-icon-error-text-hover: var(--eds-color-other-ruby-700);
@@ -438,11 +440,11 @@
   --eds-theme-color-button-primary-brand-background: var(--eds-color-brand-grape-600);
   --eds-theme-color-body-background-inverted: var(--eds-color-neutral-700);
   --eds-theme-color-body-background: var(--eds-color-neutral-100);
-  --eds-theme-color-text-brand-primary: var(--eds-color-brand-grape-700); /* @deprecated This token is deprecated. Please use eds-theme-color-text-brand-default instead. */
+  --eds-theme-color-text-brand-primary: var(--eds-color-brand-grape-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. Please use eds-theme-color-text-brand-default instead. */
   --eds-theme-color-text-disabled: var(--eds-color-neutral-300);
-  --eds-theme-color-text-grade-stop: var(--eds-color-other-ruby-700);
-  --eds-theme-color-text-grade-revise: var(--eds-color-neutral-800);
-  --eds-theme-color-text-grade-complete: var(--eds-color-other-mint-700);
+  --eds-theme-color-text-grade-stop: var(--eds-color-other-ruby-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-text-grade-revise: var(--eds-color-neutral-800); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-text-grade-complete: var(--eds-color-other-mint-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-text-utility-error: var(--eds-color-other-ruby-700);
   --eds-theme-color-text-utility-warning: var(--eds-color-other-orange-700);
   --eds-theme-color-text-utility-success: var(--eds-color-other-mint-700);
@@ -451,12 +453,12 @@
   --eds-theme-color-text-neutral-default-inverse: var(--eds-color-neutral-white);
   --eds-theme-color-text-neutral-default: var(--eds-color-neutral-700);
   --eds-theme-color-icon-disabled: var(--eds-color-neutral-300);
-  --eds-theme-color-icon-grade-stop-hover: var(--eds-color-other-ruby-600);
-  --eds-theme-color-icon-grade-stop: var(--eds-color-other-ruby-500);
-  --eds-theme-color-icon-grade-revise-hover: var(--eds-color-neutral-black);
-  --eds-theme-color-icon-grade-revise: var(--eds-color-neutral-800);
-  --eds-theme-color-icon-grade-complete-hover: var(--eds-color-other-mint-500);
-  --eds-theme-color-icon-grade-complete: var(--eds-color-other-mint-500);
+  --eds-theme-color-icon-grade-stop-hover: var(--eds-color-other-ruby-600); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-icon-grade-stop: var(--eds-color-other-ruby-500); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-icon-grade-revise-hover: var(--eds-color-neutral-black); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-icon-grade-revise: var(--eds-color-neutral-800); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-icon-grade-complete-hover: var(--eds-color-other-mint-500); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-icon-grade-complete: var(--eds-color-other-mint-500); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-icon-utility-error-hover: var(--eds-color-other-ruby-600);
   --eds-theme-color-icon-utility-error: var(--eds-color-other-ruby-500);
   --eds-theme-color-icon-utility-warning-hover: var(--eds-color-other-orange-600);
@@ -475,11 +477,11 @@
   --eds-theme-color-icon-neutral-default-inverse: var(--eds-color-neutral-white);
   --eds-theme-color-icon-neutral-default: var(--eds-color-neutral-600);
   --eds-theme-color-border-disabled: var(--eds-color-neutral-300);
-  --eds-theme-color-border-grade-stop: var(--eds-color-other-ruby-300);
-  --eds-theme-color-border-grade-revise-strong: var(--eds-color-other-yellow-400);
-  --eds-theme-color-border-grade-revise-default: var(--eds-color-other-yellow-300);
-  --eds-theme-color-border-grade-revise-subtle: var(--eds-color-other-yellow-200);
-  --eds-theme-color-border-grade-complete: var(--eds-color-other-mint-300);
+  --eds-theme-color-border-grade-stop: var(--eds-color-other-ruby-300); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-border-grade-revise-strong: var(--eds-color-other-yellow-400); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-border-grade-revise-default: var(--eds-color-other-yellow-300); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-border-grade-revise-subtle: var(--eds-color-other-yellow-200); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-border-grade-complete: var(--eds-color-other-mint-300); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-border-utility-error-strong: var(--eds-color-other-ruby-400);
   --eds-theme-color-border-utility-error-default: var(--eds-color-other-ruby-300);
   --eds-theme-color-border-utility-error-subtle: var(--eds-color-other-ruby-200);
@@ -499,12 +501,12 @@
   --eds-theme-color-border-neutral-subtle-hover: var(--eds-color-neutral-300);
   --eds-theme-color-border-neutral-subtle: var(--eds-color-neutral-200);
   --eds-theme-color-background-disabled: var(--eds-color-neutral-300);
-  --eds-theme-color-background-grade-stop-subtle: var(--eds-color-other-ruby-100);
-  --eds-theme-color-background-grade-stop-default: var(--eds-color-other-ruby-600);
-  --eds-theme-color-background-grade-revise-subtle: var(--eds-color-other-yellow-100);
-  --eds-theme-color-background-grade-revise-default: var(--eds-color-other-yellow-400);
-  --eds-theme-color-background-grade-complete-subtle: var(--eds-color-other-mint-100);
-  --eds-theme-color-background-grade-complete-default: var(--eds-color-other-mint-600);
+  --eds-theme-color-background-grade-stop-subtle: var(--eds-color-other-ruby-100); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-background-grade-stop-default: var(--eds-color-other-ruby-600); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-background-grade-revise-subtle: var(--eds-color-other-yellow-100); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-background-grade-revise-default: var(--eds-color-other-yellow-400); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-background-grade-complete-subtle: var(--eds-color-other-mint-100); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-background-grade-complete-default: var(--eds-color-other-mint-600); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-background-utility-error: var(--eds-color-other-ruby-100);
   --eds-theme-color-background-utility-warning: var(--eds-color-other-orange-100);
   --eds-theme-color-background-utility-success: var(--eds-color-other-mint-100);
diff --git a/src/tokens-dist/json/variables-nested.json b/src/tokens-dist/json/variables-nested.json
index 9d41253a4..f345a7f81 100644
--- a/src/tokens-dist/json/variables-nested.json
+++ b/src/tokens-dist/json/variables-nested.json
@@ -20,6 +20,7 @@
         "xl": "8px"
       },
       "radius": {
+        "none": "0px",
         "md": "4px",
         "lg": "8px",
         "xl": "20px",
@@ -128,6 +129,7 @@
       "10": "calc(var(--eds-size-base-unit) * 10)",
       "11": "calc(var(--eds-size-base-unit) * 11)",
       "12": "calc(var(--eds-size-base-unit) * 12)",
+      "20": "calc(var(--eds-size-base-unit) * 20)",
       "base-unit": "0.5rem",
       "half": "calc(var(--eds-size-base-unit) / 2)",
       "quarter": "calc(var(--eds-size-base-unit) / 4)",
@@ -163,131 +165,131 @@
     "typography": {
       "preset": {
         "001": {
-          "@": "var(--eds-font-weight-medium) var(--eds-font-size-40)/1.2 var(--eds-font-family-primary)",
-          "light": "var(--eds-font-weight-light) var(--eds-font-size-40)/1.2 var(--eds-font-family-primary)",
-          "bold": "var(--eds-font-weight-bold) var(--eds-font-size-40)/1.2 var(--eds-font-family-primary)",
-          "mobile": "var(--eds-font-weight-bold) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary)"
+          "@": "var(--eds-font-weight-medium) 2.5rem/1.2 var(--eds-font-family-primary)",
+          "light": "var(--eds-font-weight-light) 2.5rem/1.2 var(--eds-font-family-primary)",
+          "bold": "var(--eds-font-weight-bold) 2.5rem/1.2 var(--eds-font-family-primary)",
+          "mobile": "var(--eds-font-weight-bold) 2rem/1.25 var(--eds-font-family-primary)"
         },
         "002": {
-          "@": "var(--eds-font-weight-medium) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary)",
-          "light": "var(--eds-font-weight-light) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary)",
-          "bold": "var(--eds-font-weight-bold) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary)",
-          "mobile": "var(--eds-font-weight-bold) var(--eds-font-size-28)/1.2857 var(--eds-font-family-primary)"
+          "@": "var(--eds-font-weight-medium) 2rem/1.25 var(--eds-font-family-primary)",
+          "light": "var(--eds-font-weight-light) 2rem/1.25 var(--eds-font-family-primary)",
+          "bold": "var(--eds-font-weight-bold) 2rem/1.25 var(--eds-font-family-primary)",
+          "mobile": "var(--eds-font-weight-bold) 1.75rem/1.2857 var(--eds-font-family-primary)"
         },
         "003": {
-          "@": "var(--eds-font-weight-medium) var(--eds-font-size-22)/1.45454545 var(--eds-font-family-primary)",
-          "light": "var(--eds-font-weight-light) var(--eds-font-size-22)/1.45454545 var(--eds-font-family-primary)",
-          "bold": "var(--eds-font-weight-bold) var(--eds-font-size-22)/1.45454545 var(--eds-font-family-primary)",
-          "mobile": "var(--eds-font-weight-bold) var(--eds-font-size-20)/1.4 var(--eds-font-family-primary)"
+          "@": "var(--eds-font-weight-medium) 1.375rem/1.45454545 var(--eds-font-family-primary)",
+          "light": "var(--eds-font-weight-light) 1.375rem/1.45454545 var(--eds-font-family-primary)",
+          "bold": "var(--eds-font-weight-bold) 1.375rem/1.45454545 var(--eds-font-family-primary)",
+          "mobile": "var(--eds-font-weight-bold) 1.25rem/1.4 var(--eds-font-family-primary)"
         },
         "004": {
-          "@": "var(--eds-font-weight-medium) var(--eds-font-size-18)/1.55555556 var(--eds-font-family-primary)",
-          "light": "var(--eds-font-weight-light) var(--eds-font-size-18)/1.55555556 var(--eds-font-family-primary)",
-          "bold": "var(--eds-font-weight-bold) var(--eds-font-size-18)/1.55555556 var(--eds-font-family-primary)"
+          "@": "var(--eds-font-weight-medium) 1.125rem/1.55555556 var(--eds-font-family-primary)",
+          "light": "var(--eds-font-weight-light) 1.125rem/1.55555556 var(--eds-font-family-primary)",
+          "bold": "var(--eds-font-weight-bold) 1.125rem/1.55555556 var(--eds-font-family-primary)"
         },
         "005": {
-          "@": "var(--eds-font-weight-medium) var(--eds-font-size-16)/1.5 var(--eds-font-family-primary)",
-          "light": "var(--eds-font-weight-light) var(--eds-font-size-16)/1.5 var(--eds-font-family-primary)",
-          "bold": "var(--eds-font-weight-bold) var(--eds-font-size-16)/1.5 var(--eds-font-family-primary)"
+          "@": "var(--eds-font-weight-medium) 1rem/1.5 var(--eds-font-family-primary)",
+          "light": "var(--eds-font-weight-light) 1rem/1.5 var(--eds-font-family-primary)",
+          "bold": "var(--eds-font-weight-bold) 1rem/1.5 var(--eds-font-family-primary)"
         },
         "006": {
-          "@": "var(--eds-font-weight-medium) var(--eds-font-size-14)/1.57142857 var(--eds-font-family-primary)",
-          "light": "var(--eds-font-weight-light) var(--eds-font-size-14)/1.57142857 var(--eds-font-family-primary)",
-          "bold": "var(--eds-font-weight-bold) var(--eds-font-size-14)/1.57142857 var(--eds-font-family-primary)"
+          "@": "var(--eds-font-weight-medium) 0.875rem/1.57142857 var(--eds-font-family-primary)",
+          "light": "var(--eds-font-weight-light) 0.875rem/1.57142857 var(--eds-font-family-primary)",
+          "bold": "var(--eds-font-weight-bold) 0.875rem/1.57142857 var(--eds-font-family-primary)"
         },
         "007": {
-          "@": "var(--eds-font-weight-medium) var(--eds-font-size-14)/1.28571429 var(--eds-font-family-primary)",
-          "light": "var(--eds-font-weight-light) var(--eds-font-size-14)/1.28571429 var(--eds-font-family-primary)",
-          "bold": "var(--eds-font-weight-bold) var(--eds-font-size-14)/1.28571429 var(--eds-font-family-primary)"
+          "@": "var(--eds-font-weight-medium) 0.875rem/1.28571429 var(--eds-font-family-primary)",
+          "light": "var(--eds-font-weight-light) 0.875rem/1.28571429 var(--eds-font-family-primary)",
+          "bold": "var(--eds-font-weight-bold) 0.875rem/1.28571429 var(--eds-font-family-primary)"
         },
         "008": {
-          "@": "var(--eds-font-weight-medium) var(--eds-font-size-12)/1.666666667 var(--eds-font-family-primary)",
-          "light": "var(--eds-font-weight-light) var(--eds-font-size-12)/1.666666667 var(--eds-font-family-primary)",
-          "bold": "var(--eds-font-weight-bold) var(--eds-font-size-12)/1.666666667 var(--eds-font-family-primary)"
+          "@": "var(--eds-font-weight-medium) 0.75rem/1.666666667 var(--eds-font-family-primary)",
+          "light": "var(--eds-font-weight-light) 0.75rem/1.666666667 var(--eds-font-family-primary)",
+          "bold": "var(--eds-font-weight-bold) 0.75rem/1.666666667 var(--eds-font-family-primary)"
         },
         "009": {
-          "@": "var(--eds-font-weight-medium) var(--eds-font-size-12)/1.333333333 var(--eds-font-family-primary)",
-          "light": "var(--eds-font-weight-light) var(--eds-font-size-12)/1.333333333 var(--eds-font-family-primary)",
-          "bold": "var(--eds-font-weight-bold) var(--eds-font-size-12)/1.333333333 var(--eds-font-family-primary)"
+          "@": "var(--eds-font-weight-medium) 0.75rem/1.333333333 var(--eds-font-family-primary)",
+          "light": "var(--eds-font-weight-light) 0.75rem/1.333333333 var(--eds-font-family-primary)",
+          "bold": "var(--eds-font-weight-bold) 0.75rem/1.333333333 var(--eds-font-family-primary)"
         },
         "010": {
-          "@": "var(--eds-font-weight-medium) var(--eds-font-size-11)/1.272727272 var(--eds-font-family-primary)",
-          "light": "var(--eds-font-weight-light) var(--eds-font-size-11)/1.272727272 var(--eds-font-family-primary)",
-          "bold": "var(--eds-font-weight-bold) var(--eds-font-size-11)/1.272727272 var(--eds-font-family-primary)"
+          "@": "var(--eds-font-weight-medium) 0.6875rem/1.272727272 var(--eds-font-family-primary)",
+          "light": "var(--eds-font-weight-light) 0.6875rem/1.272727272 var(--eds-font-family-primary)",
+          "bold": "var(--eds-font-weight-bold) 0.6875rem/1.272727272 var(--eds-font-family-primary)"
         },
         "011": {
-          "@": "var(--eds-font-weight-medium) var(--eds-font-size-12)/1.333333333 var(--eds-font-family-primary)",
-          "light": "var(--eds-font-weight-light) var(--eds-font-size-12)/1.333333333 var(--eds-font-family-primary)",
-          "bold": "var(--eds-font-weight-bold) var(--eds-font-size-12)/1.333333333 var(--eds-font-family-primary)"
+          "@": "var(--eds-font-weight-medium) 0.75rem/1.333333333 var(--eds-font-family-primary)",
+          "light": "var(--eds-font-weight-light) 0.75rem/1.333333333 var(--eds-font-family-primary)",
+          "bold": "var(--eds-font-weight-bold) 0.75rem/1.333333333 var(--eds-font-family-primary)"
         },
         "012": {
-          "@": "var(--eds-font-weight-medium) var(--eds-font-size-11)/1.272727272 var(--eds-font-family-primary)",
-          "light": "var(--eds-font-weight-light) var(--eds-font-size-11)/1.272727272 var(--eds-font-family-primary)",
-          "bold": "var(--eds-font-weight-bold) var(--eds-font-size-11)/1.272727272 var(--eds-font-family-primary)"
+          "@": "var(--eds-font-weight-medium) 0.6875rem/1.272727272 var(--eds-font-family-primary)",
+          "light": "var(--eds-font-weight-light) 0.6875rem/1.272727272 var(--eds-font-family-primary)",
+          "bold": "var(--eds-font-weight-bold) 0.6875rem/1.272727272 var(--eds-font-family-primary)"
         },
         "secondary": {
           "001": {
-            "@": "var(--eds-font-weight-medium) var(--eds-font-size-32)/1.25 var(--eds-font-family-secondary)",
-            "light": "var(--eds-font-weight-light) var(--eds-font-size-32)/1.25 var(--eds-font-family-secondary)"
+            "@": "var(--eds-font-weight-medium) 2rem/1.25 var(--eds-font-family-secondary)",
+            "light": "var(--eds-font-weight-light) 2rem/1.25 var(--eds-font-family-secondary)"
           },
           "002": {
-            "@": "var(--eds-font-weight-medium) var(--eds-font-size-28)/1.28571429 var(--eds-font-family-secondary)",
-            "light": "var(--eds-font-weight-light) var(--eds-font-size-28)/1.28571429 var(--eds-font-family-secondary)"
+            "@": "var(--eds-font-weight-medium) 1.75rem/1.28571429 var(--eds-font-family-secondary)",
+            "light": "var(--eds-font-weight-light) 1.75rem/1.28571429 var(--eds-font-family-secondary)"
           },
           "003": {
-            "@": "var(--eds-font-weight-medium) var(--eds-font-size-20)/1.4 var(--eds-font-family-secondary)",
-            "light": "var(--eds-font-weight-light) var(--eds-font-size-20)/1.4 var(--eds-font-family-secondary)"
+            "@": "var(--eds-font-weight-medium) 1.25rem/1.4 var(--eds-font-family-secondary)",
+            "light": "var(--eds-font-weight-light) 1.25rem/1.4 var(--eds-font-family-secondary)"
           },
           "004": {
-            "@": "var(--eds-font-weight-medium) var(--eds-font-size-16)/1.5 var(--eds-font-family-secondary)",
-            "light": "var(--eds-font-weight-light) var(--eds-font-size-16)/1.5 var(--eds-font-family-secondary)"
+            "@": "var(--eds-font-weight-medium) 1rem/1.5 var(--eds-font-family-secondary)",
+            "light": "var(--eds-font-weight-light) 1rem/1.5 var(--eds-font-family-secondary)"
           },
           "005": {
-            "@": "var(--eds-font-weight-medium) var(--eds-font-size-14)/1.57142857 var(--eds-font-family-secondary)",
-            "light": "var(--eds-font-weight-light) var(--eds-font-size-14)/1.57142857 var(--eds-font-family-secondary)"
+            "@": "var(--eds-font-weight-medium) 0.875rem/1.57142857 var(--eds-font-family-secondary)",
+            "light": "var(--eds-font-weight-light) 0.875rem/1.57142857 var(--eds-font-family-secondary)"
           },
           "006": {
-            "@": "var(--eds-font-weight-medium) var(--eds-font-size-14)/1.42857143 var(--eds-font-family-secondary)",
-            "light": "var(--eds-font-weight-light) var(--eds-font-size-14)/1.42857143 var(--eds-font-family-secondary)"
+            "@": "var(--eds-font-weight-medium) 0.875rem/1.42857143 var(--eds-font-family-secondary)",
+            "light": "var(--eds-font-weight-light) 0.875rem/1.42857143 var(--eds-font-family-secondary)"
           },
           "007": {
-            "@": "var(--eds-font-weight-medium) var(--eds-font-size-12)/1.66666667 var(--eds-font-family-secondary)",
-            "light": "var(--eds-font-weight-light) var(--eds-font-size-12)/1.66666667 var(--eds-font-family-secondary)"
+            "@": "var(--eds-font-weight-medium) 0.75rem/1.66666667 var(--eds-font-family-secondary)",
+            "light": "var(--eds-font-weight-light) 0.75rem/1.66666667 var(--eds-font-family-secondary)"
           },
           "008": {
-            "@": "var(--eds-font-weight-medium) var(--eds-font-size-12)/1.33333333 var(--eds-font-family-secondary)",
-            "light": "var(--eds-font-weight-light) var(--eds-font-size-12)/1.33333333 var(--eds-font-family-secondary)"
+            "@": "var(--eds-font-weight-medium) 0.75rem/1.33333333 var(--eds-font-family-secondary)",
+            "light": "var(--eds-font-weight-light) 0.75rem/1.33333333 var(--eds-font-family-secondary)"
           },
           "mobile": {
             "001": {
-              "light": "var(--eds-font-weight-light) var(--eds-font-size-32)/1.25 var(--eds-font-family-secondary)",
-              "@": "var(--eds-font-weight-medium) var(--eds-font-size-32)/1.25 var(--eds-font-family-secondary)"
+              "light": "var(--eds-font-weight-light) 2rem/1.25 var(--eds-font-family-secondary)",
+              "@": "var(--eds-font-weight-medium) 2rem/1.25 var(--eds-font-family-secondary)"
             },
             "002": {
-              "light": "var(--eds-font-weight-light) var(--eds-font-size-28)/1.28571429 var(--eds-font-family-secondary)",
-              "@": "var(--eds-font-weight-medium) var(--eds-font-size-28)/1.28571429 var(--eds-font-family-secondary)"
+              "light": "var(--eds-font-weight-light) 1.75rem/1.28571429 var(--eds-font-family-secondary)",
+              "@": "var(--eds-font-weight-medium) 1.75rem/1.28571429 var(--eds-font-family-secondary)"
             },
             "003": {
-              "light": "var(--eds-font-weight-light) var(--eds-font-size-20)/1.4 var(--eds-font-family-secondary)",
-              "@": "var(--eds-font-weight-medium) var(--eds-font-size-20)/1.4 var(--eds-font-family-secondary)"
+              "light": "var(--eds-font-weight-light) 1.25rem/1.4 var(--eds-font-family-secondary)",
+              "@": "var(--eds-font-weight-medium) 1.25rem/1.4 var(--eds-font-family-secondary)"
             }
           }
         },
         "mobile": {
           "001": {
-            "light": "var(--eds-font-weight-light) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary)",
-            "@": "var(--eds-font-weight-medium) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary)",
-            "bold": "var(--eds-font-weight-bold) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary)"
+            "light": "var(--eds-font-weight-light) 2rem/1.25 var(--eds-font-family-primary)",
+            "@": "var(--eds-font-weight-medium) 2rem/1.25 var(--eds-font-family-primary)",
+            "bold": "var(--eds-font-weight-bold) 2rem/1.25 var(--eds-font-family-primary)"
           },
           "002": {
-            "light": "var(--eds-font-weight-light) var(--eds-font-size-28)/1.28571429 var(--eds-font-family-primary)",
-            "@": "var(--eds-font-weight-medium) var(--eds-font-size-28)/1.28571429 var(--eds-font-family-primary)",
-            "bold": "var(--eds-font-weight-bold) var(--eds-font-size-28)/1.28571429 var(--eds-font-family-primary)"
+            "light": "var(--eds-font-weight-light) 1.75rem/1.28571429 var(--eds-font-family-primary)",
+            "@": "var(--eds-font-weight-medium) 1.75rem/1.28571429 var(--eds-font-family-primary)",
+            "bold": "var(--eds-font-weight-bold) 1.75rem/1.28571429 var(--eds-font-family-primary)"
           },
           "003": {
-            "light": "var(--eds-font-weight-light) var(--eds-font-size-20)/1.4 var(--eds-font-family-primary)",
-            "@": "var(--eds-font-weight-medium) var(--eds-font-size-20)/1.4 var(--eds-font-family-primary)",
-            "bold": "var(--eds-font-weight-bold) var(--eds-font-size-20)/1.4 var(--eds-font-family-primary)"
+            "light": "var(--eds-font-weight-light) 1.25rem/1.4 var(--eds-font-family-primary)",
+            "@": "var(--eds-font-weight-medium) 1.25rem/1.4 var(--eds-font-family-primary)",
+            "bold": "var(--eds-font-weight-bold) 1.25rem/1.4 var(--eds-font-family-primary)"
           }
         }
       }
@@ -834,7 +836,7 @@
         },
         "text-highlight": {
           "foreground": "#21272D",
-          "background": "#F5FF8F"
+          "background": "#FDF1D0"
         },
         "toggle": {
           "on": {
diff --git a/src/tokens-dist/ts/colors.ts b/src/tokens-dist/ts/colors.ts
index bb63b9c05..5e668c920 100644
--- a/src/tokens-dist/ts/colors.ts
+++ b/src/tokens-dist/ts/colors.ts
@@ -32,8 +32,8 @@ export const EdsColorOtherYellow500 = '#D18400';
 export const EdsColorOtherYellow600 = '#BF7300';
 export const EdsColorOtherYellow700 = '#9E5B03';
 export const EdsColorOtherYellow800 = '#854C03';
-export const EdsColorOtherLemon = '#F5FF8F';
-export const EdsColorOtherEraser = '#F3DCE2'; // @deprecated This token has been deprecated and will be removed in a future EDS release.
+export const EdsColorOtherLemon = '#F5FF8F'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsColorOtherEraser = '#F3DCE2'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsColorOtherOrange100 = '#FFF1E9';
 export const EdsColorOtherOrange200 = '#FFCBA5';
 export const EdsColorOtherOrange300 = '#FFAF76';
@@ -63,12 +63,12 @@ export const EdsThemeColorBackgroundBrandPrimaryStrongHover = '#3E42B1';
 export const EdsThemeColorBackgroundUtilitySuccess = '#ECFFF5';
 export const EdsThemeColorBackgroundUtilityWarning = '#FFF1E9';
 export const EdsThemeColorBackgroundUtilityError = '#FFF0F4';
-export const EdsThemeColorBackgroundGradeCompleteDefault = '#008656';
-export const EdsThemeColorBackgroundGradeCompleteSubtle = '#ECFFF5';
-export const EdsThemeColorBackgroundGradeReviseDefault = '#F7BE2D';
-export const EdsThemeColorBackgroundGradeReviseSubtle = '#FDF1D0';
-export const EdsThemeColorBackgroundGradeStopDefault = '#D41E52';
-export const EdsThemeColorBackgroundGradeStopSubtle = '#FFF0F4';
+export const EdsThemeColorBackgroundGradeCompleteDefault = '#008656'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorBackgroundGradeCompleteSubtle = '#ECFFF5'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorBackgroundGradeReviseDefault = '#F7BE2D'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorBackgroundGradeReviseSubtle = '#FDF1D0'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorBackgroundGradeStopDefault = '#D41E52'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorBackgroundGradeStopSubtle = '#FFF0F4'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorBackgroundDisabled = '#C0C4C8';
 export const EdsThemeColorBorderNeutralSubtle = '#E7E8EA';
 export const EdsThemeColorBorderNeutralSubtleHover = '#C0C4C8';
@@ -90,11 +90,11 @@ export const EdsThemeColorBorderUtilityWarningStrong = '#F6924A';
 export const EdsThemeColorBorderUtilityErrorSubtle = '#FFCBD7';
 export const EdsThemeColorBorderUtilityErrorDefault = '#FB90B0';
 export const EdsThemeColorBorderUtilityErrorStrong = '#F76C96';
-export const EdsThemeColorBorderGradeComplete = '#8FDCB3';
-export const EdsThemeColorBorderGradeReviseSubtle = '#FFEBB3';
-export const EdsThemeColorBorderGradeReviseDefault = '#FFDD80';
-export const EdsThemeColorBorderGradeReviseStrong = '#F7BE2D';
-export const EdsThemeColorBorderGradeStop = '#FB90B0';
+export const EdsThemeColorBorderGradeComplete = '#8FDCB3'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorBorderGradeReviseSubtle = '#FFEBB3'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorBorderGradeReviseDefault = '#FFDD80'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorBorderGradeReviseStrong = '#F7BE2D'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorBorderGradeStop = '#FB90B0'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorBorderDisabled = '#C0C4C8';
 export const EdsThemeColorIconNeutralDefault = '#5D6369';
 export const EdsThemeColorIconNeutralDefaultInverse = '#FFFFFF';
@@ -113,12 +113,12 @@ export const EdsThemeColorIconUtilityWarning = '#E06B00';
 export const EdsThemeColorIconUtilityWarningHover = '#C64600';
 export const EdsThemeColorIconUtilityError = '#F1497B';
 export const EdsThemeColorIconUtilityErrorHover = '#D41E52';
-export const EdsThemeColorIconGradeComplete = '#00A56A';
-export const EdsThemeColorIconGradeCompleteHover = '#00A56A';
-export const EdsThemeColorIconGradeRevise = '#21272D';
-export const EdsThemeColorIconGradeReviseHover = '#161B1F';
-export const EdsThemeColorIconGradeStop = '#F1497B';
-export const EdsThemeColorIconGradeStopHover = '#D41E52';
+export const EdsThemeColorIconGradeComplete = '#00A56A'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorIconGradeCompleteHover = '#00A56A'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorIconGradeRevise = '#21272D'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorIconGradeReviseHover = '#161B1F'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorIconGradeStop = '#F1497B'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorIconGradeStopHover = '#D41E52'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorIconDisabled = '#C0C4C8';
 export const EdsThemeColorTextNeutralDefault = '#383C43';
 export const EdsThemeColorTextNeutralDefaultInverse = '#FFFFFF';
@@ -127,16 +127,16 @@ export const EdsThemeColorTextNeutralSubtle = '#5D6369';
 export const EdsThemeColorTextUtilitySuccess = '#007249';
 export const EdsThemeColorTextUtilityWarning = '#AC3400';
 export const EdsThemeColorTextUtilityError = '#BD0044';
-export const EdsThemeColorTextGradeComplete = '#007249';
-export const EdsThemeColorTextGradeRevise = '#21272D';
-export const EdsThemeColorTextGradeStop = '#BD0044';
+export const EdsThemeColorTextGradeComplete = '#007249'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorTextGradeRevise = '#21272D'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorTextGradeStop = '#BD0044'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorTextDisabled = '#C0C4C8';
 export const EdsThemeColorTextBrandDefault =
   'var(--eds-theme-color-text-brand-primary)';
-export const EdsThemeColorTextBrandPrimary = '#5751D2'; // @deprecated This token is deprecated. Please use eds-theme-color-text-brand-default instead.
-export const EdsThemeColorTransparentBlack0 = 'rgba(0, 0, 0, 0)';
-export const EdsThemeColorTransparentBlack30 = 'rgba(0, 0, 0, .3)';
-export const EdsThemeColorTransparentWhite0 = 'rgba(255, 255, 255, 0)';
+export const EdsThemeColorTextBrandPrimary = '#5751D2'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. Please use eds-theme-color-text-brand-default instead.
+export const EdsThemeColorTransparentBlack0 = 'rgba(0, 0, 0, 0)'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorTransparentBlack30 = 'rgba(0, 0, 0, .3)'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorTransparentWhite0 = 'rgba(255, 255, 255, 0)'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorBodyBackground = '#F4F6F8';
 export const EdsThemeColorBodyBackgroundInverted = '#383C43';
 export const EdsThemeColorButtonPrimaryBrandBackground = '#6B65E2';
@@ -278,8 +278,8 @@ export const EdsThemeColorButtonIconErrorText = '#BD0044';
 export const EdsThemeColorButtonIconErrorTextHover = '#BD0044';
 export const EdsThemeColorButtonIconErrorTextActive = '#FFFFFF';
 export const EdsThemeColorCheckboxBrandBackground = '#8984E8';
-export const EdsThemeColorDataBarBackground = '#F4F6F8';
-export const EdsThemeColorDataBarBorder = '#C0C4C8';
+export const EdsThemeColorDataBarBackground = '#F4F6F8'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorDataBarBorder = '#C0C4C8'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorFocusRing = '#6B65E2';
 export const EdsThemeColorFocusRingInverted = '#FFFFFF';
 export const EdsThemeColorFormBorder = '#878C90';
@@ -320,7 +320,7 @@ export const EdsThemeColorProgressBarBackground = '#E7E8EA';
 export const EdsThemeColorProgressBarBorder = '#E7E8EA';
 export const EdsThemeColorRadioBrandBackground = '#8984E8';
 export const EdsThemeColorTextHighlightForeground = '#21272D';
-export const EdsThemeColorTextHighlightBackground = '#F5FF8F';
+export const EdsThemeColorTextHighlightBackground = '#FDF1D0';
 export const EdsThemeColorToggleOnBackground =
   'var(--eds-theme-color-background-brand-primary-strong)';
 export const EdsThemeColorToggleOffBackground =