diff --git a/packages/components/src/ui/visually-hidden/styles.js b/packages/components/src/ui/visually-hidden/styles.js
index 870f46950cecc5..9265d0c0aee604 100644
--- a/packages/components/src/ui/visually-hidden/styles.js
+++ b/packages/components/src/ui/visually-hidden/styles.js
@@ -1,7 +1,11 @@
 /**
  * External dependencies
  */
-import { css, ui } from '@wp-g2/styles';
+import { css } from 'emotion';
+/**
+ * Internal dependencies
+ */
+import { COLORS } from '../../utils/colors-values';
 
 export const VisuallyHidden = css`
 	border: 0;
@@ -17,7 +21,7 @@ export const VisuallyHidden = css`
 	word-wrap: normal !important;
 
 	&:focus {
-		background-color: ${ ui.get( 'lightGray300' ) };
+		background-color: ${ COLORS.lightGray[ '300' ] };
 		clip: auto !important;
 		clip-path: none;
 		color: #444;
diff --git a/packages/components/src/ui/visually-hidden/test/__snapshots__/index.js.snap b/packages/components/src/ui/visually-hidden/test/__snapshots__/index.js.snap
index a762bcc4b8c6e1..e6a1b7bd905bd3 100644
--- a/packages/components/src/ui/visually-hidden/test/__snapshots__/index.js.snap
+++ b/packages/components/src/ui/visually-hidden/test/__snapshots__/index.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VisuallyHidden should render correctly 1`] = `
-.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+.emotion-0 {
   border: 0;
   -webkit-clip: rect( 1px,1px,1px,1px );
   clip: rect( 1px,1px,1px,1px );
@@ -17,9 +17,8 @@ exports[`VisuallyHidden should render correctly 1`] = `
   word-wrap: normal !important;
 }
 
-.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus {
+.emotion-0:focus {
   background-color: #edeff0;
-  background-color: var(--wp-g2-light-gray-300);
   -webkit-clip: auto !important;
   clip: auto !important;
   -webkit-clip-path: none;