diff --git a/packages/test-in-browser/driver.css b/packages/test-in-browser/driver.css
index f58f42fea1..ad37252a17 100644
--- a/packages/test-in-browser/driver.css
+++ b/packages/test-in-browser/driver.css
@@ -1,135 +1,199 @@
+
+* {
+    /* Variables */
+    /* for reference: https://tailwindcss.com/docs/customizing-colors */
+
+    --bg-black: #18181b;
+    --neutral-black: #262626;
+    --primary-white: #F9FAFB;
+    --red-50: #fef2f2;
+    --red-200: #fecaca;
+    --red-600: #dc2626;
+    --red-900: #7f1d1d;
+    --gray-300: #d6d3d1;
+    --gray-500: #737373;
+
+
+    --blue-500: #6366f1;
+    --blue-50: #eef2ff;
+
+    --yellow-400: #facc15;
+
+    --green-600: #16a34a;
+}
+
 body {
-  height: 100vh;
-  width: 100vw;
-  background-color: black !important;
-  color: white !important;
+    height: 100vh;
+    width: 100vw;
+    background-color: var(--bg-black) !important;
+    color: var(--primary-white) !important;
+
 }
 
 .test-in-browser {
-  display: flex;
-  height: 100%;
-  flex-direction: column;
+    display: flex;
+    height: 100%;
+    flex-direction: column;
 }
 
 .test-results {
-  flex: 1;
-  overflow: auto;
+    flex: 1;
+    overflow: auto;
 }
 
 #testProgressBar {
-  flex: 1;
-  max-width: 400px;
-  position: relative;
+    flex: 1;
+    max-width: 400px;
+    position: relative;
 }
 
 .header {
-  font-family: Arial, sans-serif;
-  font-size: 24px;
-  padding-bottom: 4px;
+    font-family: Arial, sans-serif;
+    font-size: 24px;
+    padding-bottom: 4px;
 }
 
 .header.in-progress {
-  color: #ccc;
+    color: var(--red-50);
 }
 
 .header.pass {
-  color: #090; /* green */
+    color: #090; /* green */
 }
 
 .header.fail {
-  color: #900; /* red */
-  font-weight: bold;
+    color: #900; /* red */
+    font-weight: bold;
 }
 
 .header .time {
-  color: #666;
-  font-size: 14px;
+    color: var(--gray-500);
+    font-size: 14px;
 }
 
 .test_table {
-  font-family: Arial, sans-serif;
-  font-size: 16px;
+    font-family: Arial, sans-serif;
+    font-size: 16px;
 }
 
 .test_table .group {
-  border-left: 1px solid #ddd;
+    border-left: 1px solid #ddd;
 }
 
 .test_table .group .group {
-  margin-left: 20px;
+    margin-left: 20px;
 }
 
 .test_table .test {
-  margin-left: 20px;
+    margin-left: 20px;
 }
 
 .test_table .testname {
-  margin-left: 200px;
-  line-height: 24px;
-  vertical-align: middle;
-  text-decoration: underline;
-  cursor: pointer;
+    margin-left: 200px;
+    line-height: 24px;
+    vertical-align: middle;
+    text-decoration: underline;
+    cursor: pointer;
 }
 
 .test_table .groupname {
-  font-weight: bold;
-  background: #212121;
-  padding-left: 5px;
-  line-height: 24px;
-  vertical-align: middle;
-  font-size: 16px;
-  color: white;
+    font-weight: bold;
+    background: var(--neutral-black);
+    padding-left: 5px;
+    line-height: 24px;
+    vertical-align: middle;
+    font-size: 16px;
+    color: var(--primary-white);
 }
 
 .test_table .event {
-  margin-left: 20px;
-  font-size: 14px;
-  border-left: 2px solid #def;
-  padding: 4px;
-  position: relative;
+    margin-left: 20px;
+    font-size: 14px;
+    border-left: 2px solid var(--blue-50);
+    padding: 4px;
+    position: relative;
 }
 
-.test_table .test .testrow { position: relative; overflow: hidden; /*hasLayout*/ }
+.test_table .test .testrow {
+    position: relative;
+    overflow: hidden; /*hasLayout*/
+}
 
-.test_table .running .testname { color: #66c; /* blue */ }
-.test_table .failed .testname { color: #900; /* red */ }
-.test_table .succeeded .testname { color: #090; /* green */ }
+.test_table .running .testname {
+    color: var(--blue-500);
+}
+
+.test_table .failed .testname {
+    color: var(--red-900);
+}
+
+.test_table .succeeded .testname {
+    color: var(--green-600);
+}
 
 .test_table .teststatus {
-  position: absolute;
-  height: 100%;
-  width: 100px;
-  left: 0px;
-  top: 0;
-  text-align: center;
-  line-height: 24px;
-  vertical-align: middle;
+    position: absolute;
+    height: 100%;
+    width: 100px;
+    left: 0px;
+    top: 0;
+    text-align: center;
+    line-height: 24px;
+    vertical-align: middle;
 }
 
 .test_table .testtime {
-  position: absolute;
-  height: 100%;
-  width: 75px;
-  margin-right: 5px;
-  left: 100px;
-  top: 0;
-  text-align: right;
-  line-height: 24px;
-  vertical-align: middle;
-  font-size: 14px;
-  color: #757575;
+    position: absolute;
+    height: 100%;
+    width: 75px;
+    margin-right: 5px;
+    left: 100px;
+    top: 0;
+    text-align: right;
+    line-height: 24px;
+    vertical-align: middle;
+    font-size: 14px;
+    color: var(--gray-500);
 }
 
-.test_table .succeeded .teststatus { color: #090; /* green */  background: black; }
-.test_table .failed .teststatus { color: #900; /* red */  background: black; }
-.test_table .running .teststatus { color: #ccc; }
+.test_table .succeeded .teststatus {
+    color: var(--green-600);
+    background: var(--bg-black);
+}
 
-.test_table .event .expected_fail { color: #600; }
-.test_table .event .fail { color: #d00; }
-.test_table .event .exception { color: #d00; }
-.test_table .event .nodata { color: #ccc; font-style: italic; }
+.test_table .failed .teststatus {
+    color: var(--red-900); /* red */
+    background: var(--bg-black);
+}
 
-.test_table .event .xtimes, .test_table .event .failkey { font-weight: bold; }
+.test_table .running .teststatus {
+    color: var(--red-50);
+}
+
+.test_table .event .expected_fail {
+    color: var(--red-900);
+}
+
+.test_table .event .fail {
+    color: var(--red-600);
+}
+
+.test_table .event .exception {
+    color: var(--red-600);
+}
+
+.exception pre {
+    color: var(--primary-white);
+}
+
+.test_table .event .nodata {
+    color: var(--red-50);
+    font-style: italic;
+}
+
+.test_table .event .xtimes, .test_table .event .failkey {
+    font-weight: bold;
+}
 
 .test_table .event .debug {
     display: none;
@@ -137,7 +201,7 @@ body {
 
 .test_table .event:hover .debug {
     display: inline;
-    color: gray;
+    color: var(--gray-500);
     text-decoration: underline;
     cursor: pointer;
 }
@@ -149,25 +213,28 @@ body {
 }
 
 .string_equal {
-  line-height: 1.2;
-  margin-left: 30px;
+    line-height: 1.2;
+    margin-left: 30px;
 }
+
 .string_equal ins {
-  text-decoration: none;
+    text-decoration: none;
 }
+
 .string_equal_expected ins {
-  background: #ed0;
+    background: var(--yellow-400);
 }
+
 .string_equal_actual ins {
-  color: #d00;
-  background: #fcc;
+    color: var(--red-600);
+    background: var(--red-200);
 }
 
 #current-client-test {
-  color: #ccc;
-  margin-right: 15px;
+    color: var(--gray-300);
+    margin-right: 15px;
 }
 
 .failedTests {
-  color: #900; /* red */
+    color: var(--red-900);
 }