diff --git a/content/foundations/primitives/color.mdx b/content/foundations/primitives/color.mdx
index e863e22d3..919e54218 100644
--- a/content/foundations/primitives/color.mdx
+++ b/content/foundations/primitives/color.mdx
@@ -4,8 +4,6 @@ description:
   An overview of all available color CSS variables
 ---
 
-<Note>The following color tokens are still in beta and require a fallback value be used.</Note>
-
 ## Foundational
 
 ### Foreground
diff --git a/content/foundations/primitives/migrating.mdx b/content/foundations/primitives/migrating.mdx
new file mode 100644
index 000000000..8da84781b
--- /dev/null
+++ b/content/foundations/primitives/migrating.mdx
@@ -0,0 +1,91 @@
+---
+title: Migrating to CSS variables
+description:
+  Support for migrating from SCSS varibles to CSS variables
+---
+
+## CSS variable replacements for SCSS variables
+
+Most legacy SCSS variables from Primer CSS have new CSS variable replacements.
+
+For values that have no replacement listed, use the raw value or find a replacement that is close in value.
+
+| Legacy `scss` variable | New `css` variable |
+| -- | -- |
+| $h00-size-mobile | `--text-display-size` |
+| $h0-size-mobile | `--text-title-size-large` |
+| $h1-size-mobile | 26px `deprecated` |
+| $h2-size-mobile | 22px `deprecated` |
+| $h3-size-mobile | 18px `deprecated` |
+| $h00-size | `--base-size-48` |
+| $h0-size | `--text-display-size` |
+| $h1-size | `--text-title-size-large` |
+| $h2-size | `--base-size-24` |
+| $h3-size | `--text-title-size-medium` |
+| $h4-size | `--text-title-size-small` |
+| $h5-size | `--text-body-size-medium` |
+| $h6-size | `--text-body-size-small` |
+| $font-size-small | `--text-body-size-small` |
+| $font-weight-bold | `--base-text-weight-semibold` |
+| $font-weight-semibold | `--base-text-weight-medium` |
+| $font-weight-normal | `--base-text-weight-normal` |
+| $font-weight-light | `--base-text-weight-light` |
+| $lh-condensed-ultra | 1` |
+| $lh-condensed | 1.25` |
+| $lh-default | 1.5` |
+| $body-font | `--fontStack-system` |
+| $mono-font | `--fontStack-monospace` |
+| $body-font-size | `--text-body-size-medium` |
+| $body-line-height | `--text-body-lineHeight-medium` |
+| $spacer | `--base-size-8` |
+| $spacer-0 | 0 `deprecated` |
+| $spacer-1 | `--base-size-4` |
+| $spacer-2 | `--base-size-8` |
+| $spacer-3 | `--base-size-16` |
+| $spacer-4 | `--base-size-24` |
+| $spacer-5 | `--base-size-32` |
+| $spacer-6 | `--base-size-40` |
+| $spacer-7 | `--base-size-48` |
+| $spacer-8 | `--base-size-64` |
+| $spacer-9 | `--base-size-80` |
+| $spacer-10 | `--base-size-96` |
+| $spacer-11 | `--base-size-112` |
+| $spacer-12 | `--base-size-128` |
+| $em-spacer-1 | 0.0625em `deprecated` |
+| $em-spacer-2 | 0.125em `deprecated`|
+| $em-spacer-3 | 0.25em `deprecated` |
+| $em-spacer-4 | 0.375em `deprecated` |
+| $em-spacer-5 | 0.5em `deprecated` |
+| $em-spacer-6 | 0.75em `deprecated` |
+| $size | `--base-size-16` |
+| $size-0 | 0 `deprecated` |
+| $size-1 | `--base-size-16` |
+| $size-2 | `--base-size-20` |
+| $size-3 | `--base-size-24` |
+| $size-4 | `--base-size-28` |
+| $size-5 | `--base-size-32` |
+| $size-6 | `--base-size-40` |
+| $size-7 | `--base-size-48` |
+| $size-8 | `--base-size-64` |
+| $container-width | 980px `deprecated` |
+| $grid-gutter | 10px `deprecated` |
+| $width-xs | 0 `deprecated` |
+| $width-sm | `--breakpoint-small` |
+| $width-md | `--breakpoint-medium` |
+| $width-lg | `--breakpoint-large` |
+| $width-xl | `--breakpoint-xlarge` |
+| $container-sm | `--breakpoint-small` |
+| $container-md | `--breakpoint-medium` |
+| $container-lg | `--breakpoint-large` |
+| $container-xl | `--breakpoint-xlarge` |
+| $viewport-narrow | `--viewportRange-narrow` |
+| $viewport-regular | `--viewportRange-regular` |
+| $viewport-wide | `--viewportRange-wide` |
+| $border-width | `--borderWidth-thin` |
+| $border-style | solid `deprecated` |
+| $border | `solid var(--borderWidth-thin) var(--borderColor-default)` |
+| $border-rem | `solid var(--borderWidth-thin) var(--borderColor-default)` |
+| $border-radius-1 | `--borderRadius-small` |
+| $border-radius-2 | `--borderRadius-medium` |
+| $border-radius-3 | 8px --borderRadius-medium` |
+| $border-radius | `--borderRadius-small` |
diff --git a/src/@primer/gatsby-theme-doctocat/nav.yml b/src/@primer/gatsby-theme-doctocat/nav.yml
index a1a75f714..737aacae1 100644
--- a/src/@primer/gatsby-theme-doctocat/nav.yml
+++ b/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -126,6 +126,8 @@
           url: /foundations/primitives/size
         - title: Typography
           url: /foundations/primitives/typography
+        - title: Migrating
+          url: /foundations/primitives/migrating
     - title: Responsive
       url: /foundations/responsive
     - title: CSS utilities