diff --git a/apps/landing/devup.json b/apps/landing/devup.json
index 90f9c6f..1c581df 100644
--- a/apps/landing/devup.json
+++ b/apps/landing/devup.json
@@ -18,26 +18,38 @@
                 "title": "#1A1A1A",
                 "caption": "#787878",
                 "menuHover": "#D8D8D8",
-                "menuActive": "#CCC"
+                "menuActive": "#CCC",
+                "testCaseFailedBg": "#D8D8D8",
+                "testCaseText": "#FFF",
+                "tableHeaderBg": "#2B2B2B",
+                "tableHeaderBorder": "#EFEEEB",
+                "tableBorder": "#2B2B2B",
+                "toggleBg": "#2B2B2B"
             },
             "dark": {
-                "primary": "#EBEBEB",
-                "secondary": "#EAD5FF",
-                "link": "#006BFF",
-                "text": "#EBEBEB",
-                "background": "#000",
-                "containerBackground": "#202020",
-                "border": "#333",
-                "success": "#3F8580",
-                "warning": "#FF9800",
+                "primary": "#F0F4E1",
+                "secondary": "#A1BEBF",
+                "link": "#BA99FF",
+                "text": "#F0F4E1",
+                "background": "#011919",
+                "containerBackground": "#022322",
+                "border": "#013936",
+                "success": "#009F99",
+                "warning": "#E9FF66",
                 "error": "#EA1C5D",
-                "info": "#2196F3",
-                "base": "#000",
-                "negativeBase": "#FFF",
-                "title": "#FAFAFA",
-                "caption": "#787878",
-                "menuHover": "#272727",
-                "menuActive": "#434343"
+                "info": "#009F99",
+                "base": "#011919",
+                "negativeBase": "#F0F4E1",
+                "title": "#ffffff",
+                "caption": "#A1BEBF",
+                "menuHover": "#013936",
+                "menuActive": "#009F99",
+                "testCaseFailedBg": "#033433",
+                "testCaseText": "#F0F4E1",
+                "tableHeaderBg": "#C9CEAC",
+                "tableHeaderBorder": "#013936",
+                "tableBorder": "#013936",
+                "toggleBg": "#009F99"
             }
         },
         "typography": {
diff --git a/apps/landing/src/components/test-case/TestCaseTypeToggle.tsx b/apps/landing/src/components/test-case/TestCaseTypeToggle.tsx
index d454991..0324804 100644
--- a/apps/landing/src/components/test-case/TestCaseTypeToggle.tsx
+++ b/apps/landing/src/components/test-case/TestCaseTypeToggle.tsx
@@ -13,7 +13,7 @@ export function TestCaseTypeToggle(props: ComponentProps<typeof Toggle>) {
         onChangeOptions({ ...options, type: value ? 'table' : 'list' })
       }
       style={{
-        backgroundColor: 'var(--primary)',
+        backgroundColor: 'var(--toggleBg)',
       }}
       value={options.type === 'table'}
       {...props}
diff --git a/apps/landing/src/components/test-case/list/TestCaseList.tsx b/apps/landing/src/components/test-case/list/TestCaseList.tsx
index 79e8ed7..278882e 100644
--- a/apps/landing/src/components/test-case/list/TestCaseList.tsx
+++ b/apps/landing/src/components/test-case/list/TestCaseList.tsx
@@ -20,7 +20,7 @@ export function TestCaseList({ results }: { results: TestStatus[2] }) {
           >
             <TestCaseCircle key={text + idx} isSuccess={isSuccess}>
               <Box minW="50vw" w="100%" whiteSpace="pre-wrap">
-                <Text color="#FFF" typography="body">
+                <Text color="$testCaseText" typography="body">
                   {textParts.map((part, partIdx) =>
                     part.type === 'latex' ? (
                       <Latex key={partIdx}>${part.content}$</Latex>
diff --git a/apps/landing/src/components/test-case/table/TestCaseTable.tsx b/apps/landing/src/components/test-case/table/TestCaseTable.tsx
index 092aecf..02916a7 100644
--- a/apps/landing/src/components/test-case/table/TestCaseTable.tsx
+++ b/apps/landing/src/components/test-case/table/TestCaseTable.tsx
@@ -30,7 +30,7 @@ export function TestCaseTable({ results }: { results: TestStatus[2] }) {
             <Tr
               key={index + 'desktop'}
               className={css({
-                bg: isSuccess ? 'unset' : '#D8D8D8',
+                bg: isSuccess ? 'unset' : '$testCaseFailedBg',
                 display: ['none', null, null, 'table-row'],
               })}
               data-responsive="desktop"
@@ -62,7 +62,7 @@ export function TestCaseTable({ results }: { results: TestStatus[2] }) {
             <Tr
               key={index + 'mobile'}
               className={css({
-                bg: isSuccess ? 'unset' : '#D8D8D8',
+                bg: isSuccess ? 'unset' : '$testCaseFailedBg',
                 display: ['table-row', null, null, 'none'],
               })}
               data-responsive="mobile"
diff --git a/apps/landing/src/components/test-case/table/index.tsx b/apps/landing/src/components/test-case/table/index.tsx
index 3bb304c..d34e6d5 100644
--- a/apps/landing/src/components/test-case/table/index.tsx
+++ b/apps/landing/src/components/test-case/table/index.tsx
@@ -19,8 +19,8 @@ export function Thead(props: ComponentProps<typeof Box<'thead'>>) {
   return (
     <Box
       as="thead"
-      bg="#2B2B2B"
-      borderRight="solid 1px #EFEEEB"
+      bg="$tableHeaderBg"
+      borderRight="solid 1px $tableHeaderBorder"
       justifyContent="center"
       px="20px"
       py="8px"
@@ -42,17 +42,17 @@ export function Th(props: ComponentProps<typeof Box<'th'>>) {
   return (
     <Box
       as="th"
-      bg="#2B2B2B"
-      borderBottom="solid 1px #2B2B2B"
-      borderRight="solid 1px #EFEEEB"
-      borderTop="solid 1px #2B2B2B"
+      bg="$tableHeaderBg"
+      borderBottom="solid 1px $tableBorder"
+      borderRight="solid 1px $tableHeaderBorder"
+      borderTop="solid 1px $tableBorder"
       color="$base"
       justifyContent="center"
       px="20px"
       py="8px"
       selectors={{
         '&:last-child': {
-          borderRight: 'solid 1px #2B2B2B',
+          borderRight: 'solid 1px $tableBorder',
           borderTopRightRadius: '10px',
         },
         '&:first-child': {
@@ -73,18 +73,18 @@ export function Td({
   return (
     <Box
       as="td"
-      borderBottom="solid 1px #2B2B2B"
-      borderRight="solid 1px #2B2B2B"
+      borderBottom="solid 1px $tableBorder"
+      borderRight="solid 1px $tableBorder"
       justifyContent="center"
       px={[null, null, null, '20px']}
       py="8px"
       selectors={{
         '&:first-child': {
-          borderLeft: 'solid 1px #2B2B2B',
+          borderLeft: 'solid 1px $tableBorder',
         },
         'tr[data-responsive="desktop"]:first-of-type &, tr[data-responsive="mobile"]:nth-of-type(2) &':
           {
-            borderTop: 'solid 1px #2B2B2B',
+            borderTop: 'solid 1px $tableBorder',
           },
       }}
       styleOrder={1}