diff --git a/src/v3/variables/designsafe.dark.css b/src/v3/variables/designsafe.dark.css
new file mode 100644
index 000000000..ce162c05f
--- /dev/null
+++ b/src/v3/variables/designsafe.dark.css
@@ -0,0 +1,2 @@
+@import './tokens/primitives-designsafe.css';
+@import './tokens/tokens-dark.css';
diff --git a/src/v3/variables/designsafe.light.css b/src/v3/variables/designsafe.light.css
new file mode 100644
index 000000000..dbc83095e
--- /dev/null
+++ b/src/v3/variables/designsafe.light.css
@@ -0,0 +1,2 @@
+@import './tokens/primitives-designsafe.css';
+@import './tokens/tokens-light.css';
diff --git a/src/v3/variables/tacc-cms.dark.css b/src/v3/variables/tacc-cms.dark.css
new file mode 100644
index 000000000..86725cd77
--- /dev/null
+++ b/src/v3/variables/tacc-cms.dark.css
@@ -0,0 +1,2 @@
+@import './tokens/primitives-tacc-cms.css';
+@import './tokens/tokens-dark.css';
diff --git a/src/v3/variables/tacc-cms.light.css b/src/v3/variables/tacc-cms.light.css
new file mode 100644
index 000000000..26b0e3104
--- /dev/null
+++ b/src/v3/variables/tacc-cms.light.css
@@ -0,0 +1,2 @@
+@import './tokens/primitives-tacc-cms.css';
+@import './tokens/tokens-light.css';
diff --git a/src/v3/variables/tacc-portal.dark.css b/src/v3/variables/tacc-portal.dark.css
new file mode 100644
index 000000000..769457ada
--- /dev/null
+++ b/src/v3/variables/tacc-portal.dark.css
@@ -0,0 +1,2 @@
+@import './tokens/primitives-tacc-portal.css';
+@import './tokens/tokens-dark.css';
diff --git a/src/v3/variables/tacc-portal.light.css b/src/v3/variables/tacc-portal.light.css
new file mode 100644
index 000000000..5a462b8fc
--- /dev/null
+++ b/src/v3/variables/tacc-portal.light.css
@@ -0,0 +1,2 @@
+@import './tokens/primitives-tacc-portal.css';
+@import './tokens/tokens-light.css';
diff --git a/src/v3/variables/tokens/primitives-designsafe.css b/src/v3/variables/tokens/primitives-designsafe.css
new file mode 100644
index 000000000..762414de7
--- /dev/null
+++ b/src/v3/variables/tokens/primitives-designsafe.css
@@ -0,0 +1,84 @@
+:scope {
+  --color-gray-light-2x: #ffffff;
+  --color-gray-light-x: #f4f4f4;
+  --color-gray-light: #d7d7d7;
+  --color-gray-normal: #afafaf;
+  --color-gray-dark: #707070;
+  --color-gray-x-dark: #484848;
+  --color-gray-xx-dark: #222222;
+  --color-gray-xxx-dark: #000000;
+  --color-gray-weak: #afafaf;
+  --color-accent-1-light-max: #eef9fc;
+  --color-accent-1-light-3x: #cfecf7;
+  --color-accent-1-light-2x: #b5e3f9;
+  --color-accent-1-light-x: #83cefa;
+  --color-accent-1-light: #56ace7;
+  --color-accent-1-normal: #337ab7;
+  --color-accent-1-dark: #286090;
+  --color-accent-1-dark-x: #204d74;
+  --color-accent-1-dark-2x: #122b40;
+  --color-accent-1-dark-3x: #0c1b29;
+  --color-accent-2-light-2x: #cdf9f4;
+  --color-accent-2-light-x: #a5e4dd;
+  --color-accent-2-light: #84cec6;
+  --color-accent-2-normal: #58a19b;
+  --color-accent-2-dark: #37817b;
+  --color-accent-2-dark-x: #2d4f4c;
+  --color-accent-3-light-2x: #ece4bf;
+  --color-accent-3-light-x: #e7d897;
+  --color-accent-3-light: #d4c16f;
+  --color-accent-3-normal: #a89a5b;
+  --color-accent-3-dark: #807649;
+  --color-accent-3-dark-x: #554f32;
+  --color-traffic-red-light-x: #fce4db;
+  --color-traffic-red-light: #fcaf91;
+  --color-traffic-red-normal: #ed4c11;
+  --color-traffic-red-dark: #c23a03;
+  --color-traffic-red-dark-x: #932b06;
+  --color-traffic-red-weak: #ed4c11;
+  --color-traffic-yellow-light-x: #ece4bf;
+  --color-traffic-yellow-light: #e7d897;
+  --color-traffic-yellow-normal: #c1ae5c;
+  --color-traffic-yellow-dark: #807649;
+  --color-traffic-yellow-dark-x: #554f32;
+  --color-traffic-yellow-weak: #c1ae5c;
+  --color-traffic-green-light-x: #addba3;
+  --color-traffic-green-light: #74b566;
+  --color-traffic-green-normal: #449d44;
+  --color-traffic-green-dark: #398439;
+  --color-traffic-green-dark-x: #255625;
+  --color-traffic-green-weak: #449d44;
+  --color-traffic-blue-light-x: #f0f6ff;
+  --color-traffic-blue-light: #b4d0f9;
+  --color-traffic-blue-normal: #3f85f4;
+  --color-traffic-blue-dark: #255bb1;
+  --color-traffic-blue-dark-x: #174a99;
+  --color-traffic-blue-weak: #3f85f4;
+  --spacing-fourth: 0.125rem;
+  --spacing-half: 0.25rem;
+  --spacing-1: 0.5rem;
+  --spacing-2: 1rem;
+  --spacing-3: 1.5rem;
+  --spacing-4: 2rem;
+  --spacing-5: 2.5rem;
+  --spacing-6: 3rem;
+  --spacing-7: 3.5rem;
+  --spacing-8: 4rem;
+  --spacing-9: 4.5rem;
+  --spacing-10: 5rem;
+  --spacing-11: 5.5rem;
+  --spacing-12: 6rem;
+  --spacing-13: 6.5rem;
+  /* XXX: Inaccurate */
+  /*
+  --font-weight-100: 6.25rem;
+  --font-weight-200: 12.5rem;
+  --font-weight-300: 18.75rem;
+  --font-weight-400: 25rem;
+  --font-weight-500: 31.25rem;
+  --font-weight-600: 37.5rem;
+  --font-weight-700: 43.75rem;
+  --font-weight-800: 50rem;
+  --font-weight-900: 56.25rem;
+  */
+}
diff --git a/src/v3/variables/tokens/primitives-tacc-cms.css b/src/v3/variables/tokens/primitives-tacc-cms.css
new file mode 100644
index 000000000..32e212d8b
--- /dev/null
+++ b/src/v3/variables/tokens/primitives-tacc-cms.css
@@ -0,0 +1,84 @@
+:scope {
+  --color-gray-light-2x: #ffffff;
+  --color-gray-light-x: #f4f4f4;
+  --color-gray-light: #d7d7d7;
+  --color-gray-normal: #afafaf;
+  --color-gray-dark: #707070;
+  --color-gray-x-dark: #484848;
+  --color-gray-xx-dark: #222222;
+  --color-gray-xxx-dark: #000000;
+  --color-gray-weak: #afafaf;
+  --color-accent-1-light-max: #f3f7fe;
+  --color-accent-1-light-3x: #dfeafe;
+  --color-accent-1-light-2x: #caddfe;
+  --color-accent-1-light-x: #aac7ff;
+  --color-accent-1-light: #86aeff;
+  --color-accent-1-normal: #003399;
+  --color-accent-1-dark: #002266;
+  --color-accent-1-dark-x: #001133;
+  --color-accent-1-dark-2x: #021230;
+  --color-accent-1-dark-3x: #000a22;
+  --color-accent-2-light-2x: #fcf6ec;
+  --color-accent-2-light-x: #e5d7c0;
+  --color-accent-2-light: #d5b57c;
+  --color-accent-2-normal: #877453;
+  --color-accent-2-dark: #514328;
+  --color-accent-2-dark-x: #332c1f;
+  --color-accent-3-light-2x: #e7f1f0;
+  --color-accent-3-light-x: #b1d1ce;
+  --color-accent-3-light: #92ccc5;
+  --color-accent-3-normal: #61a39c;
+  --color-accent-3-dark: #406d68;
+  --color-accent-3-dark-x: #1e3331;
+  --color-traffic-red-light-x: #fce4db;
+  --color-traffic-red-light: #fcaf91;
+  --color-traffic-red-normal: #ed4c11;
+  --color-traffic-red-dark: #c23a03;
+  --color-traffic-red-dark-x: #932b06;
+  --color-traffic-red-weak: #ed4c11;
+  --color-traffic-yellow-light-x: #fdf0d3;
+  --color-traffic-yellow-light: #fed880;
+  --color-traffic-yellow-normal: #f2b327;
+  --color-traffic-yellow-dark: #cd971c;
+  --color-traffic-yellow-dark-x: #996f0a;
+  --color-traffic-yellow-weak: #f2b327;
+  --color-traffic-green-light-x: #baf8dc;
+  --color-traffic-green-light: #93f6cd;
+  --color-traffic-green-normal: #10f7a9;
+  --color-traffic-green-dark: #3dce92;
+  --color-traffic-green-dark-x: #26885f;
+  --color-traffic-green-weak: #10f7a9;
+  --color-traffic-blue-light-x: #f0f6ff;
+  --color-traffic-blue-light: #b4d0f9;
+  --color-traffic-blue-normal: #3f85f4;
+  --color-traffic-blue-dark: #255bb1;
+  --color-traffic-blue-dark-x: #174a99;
+  --color-traffic-blue-weak: #3f85f4;
+  --spacing-fourth: 0.125rem;
+  --spacing-half: 0.25rem;
+  --spacing-1: 0.5rem;
+  --spacing-2: 1rem;
+  --spacing-3: 1.5rem;
+  --spacing-4: 2rem;
+  --spacing-5: 2.5rem;
+  --spacing-6: 3rem;
+  --spacing-7: 3.5rem;
+  --spacing-8: 4rem;
+  --spacing-9: 4.5rem;
+  --spacing-10: 5rem;
+  --spacing-11: 5.5rem;
+  --spacing-12: 6rem;
+  --spacing-13: 6.5rem;
+  /* XXX: Inaccurate */
+  /*
+  --font-weight-100: 6.25rem;
+  --font-weight-200: 12.5rem;
+  --font-weight-300: 18.75rem;
+  --font-weight-400: 25rem;
+  --font-weight-500: 31.25rem;
+  --font-weight-600: 37.5rem;
+  --font-weight-700: 43.75rem;
+  --font-weight-800: 50rem;
+  --font-weight-900: 56.25rem;
+  */
+}
diff --git a/src/v3/variables/tokens/primitives-tacc-portal.css b/src/v3/variables/tokens/primitives-tacc-portal.css
new file mode 100644
index 000000000..2474ec6fb
--- /dev/null
+++ b/src/v3/variables/tokens/primitives-tacc-portal.css
@@ -0,0 +1,84 @@
+:scope {
+  --color-gray-light-2x: #ffffff;
+  --color-gray-light-x: #f4f4f4;
+  --color-gray-light: #d7d7d7;
+  --color-gray-normal: #afafaf;
+  --color-gray-dark: #707070;
+  --color-gray-x-dark: #484848;
+  --color-gray-xx-dark: #222222;
+  --color-gray-xxx-dark: #000000;
+  --color-gray-weak: #afafaf;
+  --color-accent-1-light-max: #faf4ff;
+  --color-accent-1-light-3x: #f1ebfd;
+  --color-accent-1-light-2x: #e3d7fd;
+  --color-accent-1-light-x: #d5bfff;
+  --color-accent-1-light: #a387ed;
+  --color-accent-1-normal: #784fe8;
+  --color-accent-1-dark: #6039cc;
+  --color-accent-1-dark-x: #3d189b;
+  --color-accent-1-dark-2x: #281066;
+  --color-accent-1-dark-3x: #1e0c4c;
+  --color-accent-2-light-2x: #fcf6ec;
+  --color-accent-2-light-x: #e5d7c0;
+  --color-accent-2-light: #d5b57c;
+  --color-accent-2-normal: #877453;
+  --color-accent-2-dark: #514328;
+  --color-accent-2-dark-x: #332c1f;
+  --color-accent-3-light-2x: #e7f1f0;
+  --color-accent-3-light-x: #b1d1ce;
+  --color-accent-3-light: #92ccc5;
+  --color-accent-3-normal: #61a39c;
+  --color-accent-3-dark: #406d68;
+  --color-accent-3-dark-x: #1e3331;
+  --color-traffic-red-light-x: #fdf1f1;
+  --color-traffic-red-light: #f8c9c9;
+  --color-traffic-red-normal: #f09393;
+  --color-traffic-red-dark: #af1818;
+  --color-traffic-red-dark-x: #3c3030;
+  --color-traffic-red-weak: #f09393;
+  --color-traffic-yellow-light-x: #fdfdea;
+  --color-traffic-yellow-light: #f2f06f;
+  --color-traffic-yellow-normal: #e9e000;
+  --color-traffic-yellow-dark: #735911;
+  --color-traffic-yellow-dark-x: #3a3320;
+  --color-traffic-yellow-weak: #dfa70c;
+  --color-traffic-green-light-x: #e7f9e5;
+  --color-traffic-green-light: #afeca7;
+  --color-traffic-green-normal: #43d130;
+  --color-traffic-green-dark: #237119;
+  --color-traffic-green-dark-x: #263824;
+  --color-traffic-green-weak: #43d130;
+  --color-traffic-blue-light-x: #f0f6ff;
+  --color-traffic-blue-light: #b4d0f9;
+  --color-traffic-blue-normal: #3f85f4;
+  --color-traffic-blue-dark: #255bb1;
+  --color-traffic-blue-dark-x: #174a99;
+  --color-traffic-blue-weak: #3f85f4;
+  --spacing-fourth: 0.125rem;
+  --spacing-half: 0.25rem;
+  --spacing-1: 0.5rem;
+  --spacing-2: 1rem;
+  --spacing-3: 1.5rem;
+  --spacing-4: 2rem;
+  --spacing-5: 2.5rem;
+  --spacing-6: 3rem;
+  --spacing-7: 3.5rem;
+  --spacing-8: 4rem;
+  --spacing-9: 4.5rem;
+  --spacing-10: 5rem;
+  --spacing-11: 5.5rem;
+  --spacing-12: 6rem;
+  --spacing-13: 6.5rem;
+  /* XXX: Inaccurate */
+  /*
+  --font-weight-100: 6.25rem;
+  --font-weight-200: 12.5rem;
+  --font-weight-300: 18.75rem;
+  --font-weight-400: 25rem;
+  --font-weight-500: 31.25rem;
+  --font-weight-600: 37.5rem;
+  --font-weight-700: 43.75rem;
+  --font-weight-800: 50rem;
+  --font-weight-900: 56.25rem;
+  */
+}
diff --git a/src/v3/variables/tokens/tokens-dark.css b/src/v3/variables/tokens/tokens-dark.css
new file mode 100644
index 000000000..39e0a37b1
--- /dev/null
+++ b/src/v3/variables/tokens/tokens-dark.css
@@ -0,0 +1,52 @@
+:scope {
+  --color-info-light-x: var(--color-gray-xx-dark);
+  --color-info-light: var(--color-gray-x-dark);
+  --color-info-normal: var(--color-gray-normal);
+  --color-info-dark: var(--color-gray-light);
+  --color-info-dark-x: var(--color-gray-light-x);
+  --color-info-weak: var(--color-gray-weak);
+  --color-danger-light-x: var(--color-traffic-red-dark-x);
+  --color-danger-light: var(--color-traffic-red-dark);
+  --color-danger-normal: var(--color-traffic-red-normal);
+  --color-danger-dark: var(--color-traffic-red-light);
+  --color-danger-dark-x: var(--color-traffic-red-light-x);
+  --color-danger-weak: var(--color-traffic-red-weak);
+  --color-warning-light-x: var(--color-traffic-yellow-dark-x);
+  --color-warning-light: var(--color-traffic-yellow-dark);
+  --color-warning-normal: var(--color-traffic-yellow-normal);
+  --color-warning-dark: var(--color-traffic-yellow-light);
+  --color-warning-dark-x: var(--color-traffic-yellow-light-x);
+  --color-warning-weak: var(--color-traffic-yellow-weak);
+  --color-success-light-x: var(--color-traffic-green-dark-x);
+  --color-success-light: var(--color-traffic-green-dark);
+  --color-success-normal: var(--color-traffic-green-normal);
+  --color-success-dark: var(--color-traffic-green-light);
+  --color-success-dark-x: var(--color-traffic-green-light-x);
+  --color-success-weak: var(--color-traffic-green-weak);
+  --color-extra-light-x: var(--color-traffic-blue-dark-x);
+  --color-extra-light: var(--color-traffic-blue-dark);
+  --color-extra-normal: var(--color-traffic-blue-normal);
+  --color-extra-dark: var(--color-traffic-blue-light);
+  --color-extra-dark-x: var(--color-traffic-blue-light-x);
+  --color-extra-weak: var(--color-traffic-blue-weak);
+  --color-neutral-light-xx: var(--color-gray-xxx-dark);
+  --color-neutral-light-x: var(--color-gray-xx-dark);
+  --color-neutral-light: var(--color-gray-x-dark);
+  --color-neutral-normal: var(--color-gray-dark);
+  --color-neutral-dark: var(--color-gray-normal);
+  --color-neutral-dark-x: var(--color-gray-light);
+  --color-neutral-dark-xx: var(--color-gray-light-x);
+  --color-neutral-dark-xxx: var(--color-gray-light-2x);
+  --color-neutral-weak: var(--color-gray-weak);
+  --spacing-small-xx: var(--spacing-fourth);
+  --spacing-small-x: var(--spacing-half);
+  --spacing-small: var(--spacing-1);
+  --spacing-normal: var(--spacing-2);
+  --spacing-large: var(--spacing-3);
+  --spacing-large-x: var(--spacing-4);
+  /* XXX: Broken */
+  /*
+  --regular: var(--font-weight-400);
+  --bold: var(--font-weight-800);
+  */
+}
diff --git a/src/v3/variables/tokens/tokens-light.css b/src/v3/variables/tokens/tokens-light.css
new file mode 100644
index 000000000..9a3b4abb7
--- /dev/null
+++ b/src/v3/variables/tokens/tokens-light.css
@@ -0,0 +1,52 @@
+:scope {
+  --color-info-light-x: var(--color-gray-light-x);
+  --color-info-light: var(--color-gray-light);
+  --color-info-normal: var(--color-gray-dark);
+  --color-info-dark: var(--color-gray-x-dark);
+  --color-info-dark-x: var(--color-gray-xx-dark);
+  --color-info-weak: var(--color-gray-weak);
+  --color-danger-light-x: var(--color-traffic-red-light-x);
+  --color-danger-light: var(--color-traffic-red-light);
+  --color-danger-normal: var(--color-traffic-red-normal);
+  --color-danger-dark: var(--color-traffic-red-dark);
+  --color-danger-dark-x: var(--color-traffic-red-dark-x);
+  --color-danger-weak: var(--color-traffic-red-weak);
+  --color-warning-light-x: var(--color-traffic-yellow-light-x);
+  --color-warning-light: var(--color-traffic-yellow-light);
+  --color-warning-normal: var(--color-traffic-yellow-normal);
+  --color-warning-dark: var(--color-traffic-yellow-dark);
+  --color-warning-dark-x: var(--color-traffic-yellow-dark-x);
+  --color-warning-weak: var(--color-traffic-yellow-weak);
+  --color-success-light-x: var(--color-traffic-green-light-x);
+  --color-success-light: var(--color-traffic-green-light);
+  --color-success-normal: var(--color-traffic-green-normal);
+  --color-success-dark: var(--color-traffic-green-dark);
+  --color-success-dark-x: var(--color-traffic-green-dark-x);
+  --color-success-weak: var(--color-traffic-green-weak);
+  --color-extra-light-x: var(--color-traffic-blue-light-x);
+  --color-extra-light: var(--color-traffic-blue-light);
+  --color-extra-normal: var(--color-traffic-blue-normal);
+  --color-extra-dark: var(--color-traffic-blue-dark);
+  --color-extra-dark-x: var(--color-traffic-blue-dark-x);
+  --color-extra-weak: var(--color-traffic-blue-weak);
+  --color-neutral-light-xx: var(--color-gray-light-2x);
+  --color-neutral-light-x: var(--color-gray-light-x);
+  --color-neutral-light: var(--color-gray-light);
+  --color-neutral-normal: var(--color-gray-normal);
+  --color-neutral-dark: var(--color-gray-dark);
+  --color-neutral-dark-x: var(--color-gray-x-dark);
+  --color-neutral-dark-xx: var(--color-gray-xx-dark);
+  --color-neutral-dark-xxx: var(--color-gray-xxx-dark);
+  --color-neutral-weak: var(--color-gray-weak);
+  --spacing-small-xx: var(--spacing-fourth);
+  --spacing-small-x: var(--spacing-half);
+  --spacing-small: var(--spacing-1);
+  --spacing-normal: var(--spacing-2);
+  --spacing-large: var(--spacing-3);
+  --spacing-large-x: var(--spacing-4);
+  /* XXX: Broken */
+  /*
+  --regular: var(--font-weight-400);
+  --bold: var(--font-weight-800);
+  */
+}