fix: merge conflicts resolved from develop

refactor: tailwind config
Merge branch 'dev/theming' of https://github.com/makeplane/plane into dev/theming
2025-08-07 19:59:33 +00:00 · 2024-02-17 15:01:05 +05:30 · 2024-02-11 01:39:41 +05:30 · 2024-02-09 22:23:08 +05:30 · 2024-02-09 22:22:56 +05:30 · 2024-02-09 19:25:26 +05:30
673 changed files with 4550 additions and 3922 deletions
--- a/packages/editor/core/src/lib/utils.ts
+++ b/packages/editor/core/src/lib/utils.ts
@@ -9,8 +9,8 @@ interface EditorClassNames {
 export const getEditorClassNames = ({ noBorder, borderOnFocus, customClassName }: EditorClassNames) =>
  cn(
    "relative w-full max-w-full sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md",
-    noBorder ? "" : "border border-custom-border-200",
-    borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0",
+    noBorder ? "" : "border border-neutral-border-medium",
+    borderOnFocus ? "focus:border border-neutral-border-medium" : "focus:border-0",
    customClassName
  );

--- a/packages/editor/core/src/styles/editor.css
+++ b/packages/editor/core/src/styles/editor.css
@@ -1,7 +1,7 @@
 .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
-  color: rgb(var(--color-text-400));
+  color: var(--color-neutral-100);
  pointer-events: none;
  height: 0;
 }
@@ -20,7 +20,7 @@
 .ProseMirror .is-empty::before {
  content: attr(data-placeholder);
  float: left;
-  color: rgb(var(--color-text-400));
+  color: var(--color-neutral-100);
  pointer-events: none;
  height: 0;
 }
@@ -43,7 +43,7 @@
 }

 .ProseMirror-gapcursor:after {
-  border-top: 1px solid rgb(var(--color-text-100)) !important;
+  border-top: 1px solid var(--color-neutral-120) !important;
 }

 /* Custom TODO list checkboxes – shoutout to this awesome tutorial: https://moderncss.dev/pure-css-custom-checkbox-style/ */
@@ -62,24 +62,24 @@ ul[data-type="taskList"] li > label {
 ul[data-type="taskList"] li > label input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
-  background-color: rgb(var(--color-background-100));
+  background-color: var(--color-neutral-30);
  margin: 0;
  cursor: pointer;
  width: 0.8rem;
  height: 0.8rem;
  position: relative;
-  border: 1.5px solid rgb(var(--color-text-100));
+  border: 1.5px solid var(--color-neutral-120);
  margin-right: 0.2rem;
  margin-top: 0.15rem;
  display: grid;
  place-content: center;

  &:hover {
-    background-color: rgb(var(--color-background-80));
+    background-color: var(--color-neutral-50);
  }

  &:active {
-    background-color: rgb(var(--color-background-90));
+    background-color: var(--color-neutral-40);
  }

  &::before {
@@ -99,7 +99,7 @@ ul[data-type="taskList"] li > label input[type="checkbox"] {
 }

 ul[data-type="taskList"] li[data-checked="true"] > div > p {
-  color: rgb(var(--color-text-200));
+  color: var(--color-neutral-110);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
 }
@@ -158,7 +158,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
    width: 20px;
    height: 20px;
    border-radius: 50%;
-    border: 3px solid rgba(var(--color-text-200));
+    border: 3px solid var(--color-neutral-110);
    border-top-color: rgba(var(--color-text-800));
    animation: spinning 0.6s linear infinite;
  }
@@ -176,13 +176,13 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
    table-layout: fixed;
    margin: 0.5em 0 0.5em 0;

-    border: 1px solid rgb(var(--color-border-200));
+    border: 1px solid var(--color-neutral-70);
    width: 100%;

    td,
    th {
      min-width: 1em;
-      border: 1px solid rgb(var(--color-border-200));
+      border: 1px solid var(--color-neutral-70);
      padding: 10px 15px;
      vertical-align: top;
      box-sizing: border-box;
@@ -197,7 +197,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
    th {
      font-weight: bold;
      text-align: left;
-      background-color: rgb(var(--color-primary-100));
+      background-color: var(--color-primary-90);
    }

    td:hover {
@@ -247,9 +247,9 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
 }

 .ProseMirror pre {
-  background: rgba(var(--color-background-80));
+  background: var(--color-neutral-50);
  border-radius: 0.5rem;
-  color: rgba(var(--color-text-100));
+  color: var(--color-neutral-120);
  font-family: "JetBrainsMono", monospace;
  padding: 0.75rem 1rem;
 }
@@ -268,7 +268,7 @@ div[data-type="horizontalRule"] {
  margin-bottom: 0;

  & > div {
-    border-bottom: 1px solid rgb(var(--color-text-100));
+    border-bottom: 1px solid var(--color-neutral-120);
  }
 }

--- a/packages/editor/core/src/styles/table.css
+++ b/packages/editor/core/src/styles/table.css
@@ -10,14 +10,14 @@
  table-layout: fixed;
  margin: 0;
  margin-bottom: 3rem;
-  border: 1px solid rgba(var(--color-border-200));
+  border: 1px solid var(--color-neutral-70);
  width: 100%;
 }

 .tableWrapper table td,
 .tableWrapper table th {
  min-width: 1em;
-  border: 1px solid rgba(var(--color-border-200));
+  border: 1px solid var(--color-neutral-70);
  padding: 10px 15px;
  vertical-align: top;
  box-sizing: border-box;
@@ -43,7 +43,7 @@
 .tableWrapper table th {
  font-weight: bold;
  text-align: left;
-  background-color: rgba(var(--color-primary-100));
+  background-color: var(--color-primary-90);
 }

 .tableWrapper table th * {
@@ -112,8 +112,8 @@
 }

 .tableWrapper .tableControls .rowsControlDiv {
-  background-color: rgba(var(--color-primary-100));
-  border: 1px solid rgba(var(--color-border-200));
+  background-color: var(--color-primary-90);
+  border: 1px solid var(--color-neutral-70);
  border-radius: 2px;
  background-size: 1.25rem;
  background-repeat: no-repeat;
@@ -127,8 +127,8 @@
 }

 .tableWrapper .tableControls .columnsControlDiv {
-  background-color: rgba(var(--color-primary-100));
-  border: 1px solid rgba(var(--color-border-200));
+  background-color: var(--color-primary-90);
+  border: 1px solid var(--color-neutral-70);
  border-radius: 2px;
  background-size: 1.25rem;
  background-repeat: no-repeat;
@@ -142,8 +142,8 @@
 }
 .tableWrapper .tableControls .tableToolbox,
 .tableWrapper .tableControls .tableColorPickerToolbox {
-  border: 1px solid rgba(var(--color-border-300));
-  background-color: rgba(var(--color-background-100));
+  border: 1px solid var(--color-neutral-70);
+  background-color: var(--color-neutral-30);
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
@@ -153,7 +153,7 @@

 .tableWrapper .tableControls .tableToolbox .toolboxItem,
 .tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem {
-  background-color: rgba(var(--color-background-100));
+  background-color: var(--color-neutral-30);
  display: flex;
  align-items: center;
  gap: 0.5rem;
@@ -166,14 +166,14 @@

 .tableWrapper .tableControls .tableToolbox .toolboxItem:hover,
 .tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem:hover {
-  background-color: rgba(var(--color-background-100), 0.5);
+  background-color: var(--color-neutral-30);
 }

 .tableWrapper .tableControls .tableToolbox .toolboxItem .iconContainer,
 .tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .iconContainer,
 .tableWrapper .tableControls .tableToolbox .toolboxItem .colorContainer,
 .tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .colorContainer {
-  border: 1px solid rgba(var(--color-border-300));
+  border: 1px solid var(--color-neutral-70);
  border-radius: 3px;
  padding: 4px;
  display: flex;
@@ -192,13 +192,13 @@
 }

 .tableToolbox {
-  background-color: rgba(var(--color-background-100));
+  background-color: var(--color-neutral-30);
 }

 .tableWrapper .tableControls .tableToolbox .toolboxItem .label,
 .tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .label {
  font-size: 0.85rem;
-  color: rgba(var(--color-text-300));
+  color: var(--color-neutral-110);
 }

 .resize-cursor .tableWrapper .tableControls .rowsControl,
--- a/packages/editor/core/src/ui/extensions/code-inline/index.tsx
+++ b/packages/editor/core/src/ui/extensions/code-inline/index.tsx
@@ -32,7 +32,7 @@ export const CustomCodeInlineExtension = Mark.create<CodeOptions>({
  addOptions() {
    return {
      HTMLAttributes: {
-        class: "rounded-md bg-custom-primary-30 mx-1 px-1 py-[2px] font-mono font-medium text-custom-text-1000",
+        class: "rounded-md bg-custom-primary-30 mx-1 px-1 py-[2px] font-mono font-medium text-neutral-text-strong0",
        spellcheck: "false",
      },
    };
--- a/packages/editor/core/src/ui/extensions/index.tsx
+++ b/packages/editor/core/src/ui/extensions/index.tsx
@@ -59,12 +59,12 @@ export const CoreEditorExtensions = (
    },
    blockquote: false,
    dropcursor: {
-      color: "rgba(var(--color-text-100))",
+      color: "var(--color-neutral-120)",
      width: 2,
    },
  }),
  CustomQuoteExtension.configure({
-    HTMLAttributes: { className: "border-l-4 border-custom-border-300" },
+    HTMLAttributes: { className: "border-l-4 border-neutral-border-medium" },
  }),
  CustomKeymap,
  ListKeymap,
@@ -81,7 +81,7 @@ export const CoreEditorExtensions = (
  }),
  ImageExtension(deleteFile, restoreFile, cancelUploadImage).configure({
    HTMLAttributes: {
-      class: "rounded-lg border border-custom-border-300",
+      class: "rounded-lg border border-neutral-border-medium",
    },
  }),
  TiptapUnderline,
--- a/packages/editor/core/src/ui/extensions/table/table-header/table-header.ts
+++ b/packages/editor/core/src/ui/extensions/table/table-header/table-header.ts
@@ -33,7 +33,7 @@ export const TableHeader = Node.create<TableHeaderOptions>({
        },
      },
      background: {
-        default: "rgb(var(--color-primary-100))",
+        default: "var(--color-primary-90)",
      },
    };
  },
--- a/packages/editor/core/src/ui/extensions/table/table/icons.ts
+++ b/packages/editor/core/src/ui/extensions/table/table/icons.ts
@@ -1,5 +1,5 @@
 export const icons = {
-  colorPicker: `<svg xmlns="http://www.w3.org/2000/svg" length="24" viewBox="0 0 24 24" style="transform: ;msFilter:;"><path fill="rgb(var(--color-text-300))" d="M20 14c-.092.064-2 2.083-2 3.5 0 1.494.949 2.448 2 2.5.906.044 2-.891 2-2.5 0-1.5-1.908-3.436-2-3.5zM9.586 20c.378.378.88.586 1.414.586s1.036-.208 1.414-.586l7-7-.707-.707L11 4.586 8.707 2.293 7.293 3.707 9.586 6 4 11.586c-.378.378-.586.88-.586 1.414s.208 1.036.586 1.414L9.586 20zM11 7.414 16.586 13H5.414L11 7.414z"></path></svg>`,
+  colorPicker: `<svg xmlns="http://www.w3.org/2000/svg" length="24" viewBox="0 0 24 24" style="transform: ;msFilter:;"><path fill="var(--color-neutral-110)" d="M20 14c-.092.064-2 2.083-2 3.5 0 1.494.949 2.448 2 2.5.906.044 2-.891 2-2.5 0-1.5-1.908-3.436-2-3.5zM9.586 20c.378.378.88.586 1.414.586s1.036-.208 1.414-.586l7-7-.707-.707L11 4.586 8.707 2.293 7.293 3.707 9.586 6 4 11.586c-.378.378-.586.88-.586 1.414s.208 1.036.586 1.414L9.586 20zM11 7.414 16.586 13H5.414L11 7.414z"></path></svg>`,
  deleteColumn: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" length="24"><path fill="#e53e3e" d="M0 0H24V24H0z"/><path d="M12 3c.552 0 1 .448 1 1v8c.835-.628 1.874-1 3-1 2.761 0 5 2.239 5 5s-2.239 5-5 5c-1.032 0-1.99-.313-2.787-.848L13 20c0 .552-.448 1-1 1H6c-.552 0-1-.448-1-1V4c0-.552.448-1 1-1h6zm-1 2H7v14h4V5zm8 10h-6v2h6v-2z"/></svg>`,
  deleteRow: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" length="24"><path fill="#e53e3e" d="M0 0H24V24H0z"/><path d="M20 5c.552 0 1 .448 1 1v6c0 .552-.448 1-1 1 .628.835 1 1.874 1 3 0 2.761-2.239 5-5 5s-5-2.239-5-5c0-1.126.372-2.165 1-3H4c-.552 0-1-.448-1-1V6c0-.552.448-1 1-1h16zm-7 10v2h6v-2h-6zm6-8H5v4h14V7z"/></svg>`,
  insertLeftTableIcon: `<svg
@@ -9,7 +9,7 @@ export const icons = {
      >
    <path
      d="M224.617-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm147.691-607.69q0-4.616-3.846-8.463-3.846-3.846-8.462-3.846H600q-4.616 0-8.462 3.846-3.847 3.847-3.847 8.463v535.382q0 4.616 3.847 8.463Q595.384-200 600-200h135.383q4.616 0 8.462-3.846 3.846-3.847 3.846-8.463v-535.382ZM587.691-200h160-160Z"
-      fill="rgb(var(--color-text-300))"
+      fill="var(--color-neutral-110)"
    />
  </svg>
 `,
@@ -20,7 +20,7 @@ export const icons = {
  >
    <path
      d="M600-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm-375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm-12.308-607.69v535.382q0 4.616 3.846 8.463 3.846 3.846 8.462 3.846H360q4.616 0 8.462-3.846 3.847-3.847 3.847-8.463v-535.382q0-4.616-3.847-8.463Q364.616-760 360-760H224.617q-4.616 0-8.462 3.846-3.846 3.847-3.846 8.463Zm160 547.691h-160 160Z"
-      fill="rgb(var(--color-text-300))"
+      fill="var(--color-neutral-110)"
    />
  </svg>
 `,
@@ -31,7 +31,7 @@ export const icons = {
  >
    <path
      d="M212.309-527.693q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0 375.383q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-59.999h535.382q4.616 0 8.463-3.846 3.846-3.846 3.846-8.462V-360q0-4.616-3.846-8.462-3.847-3.847-8.463-3.847H212.309q-4.616 0-8.463 3.847Q200-364.616 200-360v135.383q0 4.616 3.846 8.462 3.847 3.846 8.463 3.846Zm-12.309-160v160-160Z"
-      fill="rgb(var(--color-text-300))"
+      fill="var(--color-neutral-110)"
    />
  </svg>
 `,
@@ -42,7 +42,7 @@ export const icons = {
  >
    <path
      d="M212.309-152.31q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-375.383q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm535.382-219.998H212.309q-4.616 0-8.463 3.846-3.846 3.846-3.846 8.462V-600q0 4.616 3.846 8.462 3.847 3.847 8.463 3.847h535.382q4.616 0 8.463-3.847Q760-595.384 760-600v-135.383q0-4.616-3.846-8.462-3.847-3.846-8.463-3.846ZM200-587.691v-160 160Z"
-      fill="rgb(var(--color-text-300))"
+      fill="var(--color-neutral-110)"
    />
  </svg>
 `,
--- a/packages/editor/core/src/ui/extensions/table/table/table-view.tsx
+++ b/packages/editor/core/src/ui/extensions/table/table/table-view.tsx
@@ -224,7 +224,7 @@ function createColorPickerToolbox({
  onSelectColor?: (color: string) => void;
 }) {
  const items = {
-    Default: "rgb(var(--color-primary-100))",
+    Default: "var(--color-primary-90)",
    Orange: "#FFE5D1",
    Grey: "#F1F1F1",
    Yellow: "#FEF3C7",
@@ -437,16 +437,19 @@ export class TableView implements NodeView {
  }

  updateControls() {
-    const { hoveredTable: table, hoveredCell: cell } = Object.values(this.decorations).reduce((acc, curr) => {
-      if (curr.spec.hoveredCell !== undefined) {
-        acc["hoveredCell"] = curr.spec.hoveredCell;
-      }
+    const { hoveredTable: table, hoveredCell: cell } = Object.values(this.decorations).reduce(
+      (acc, curr) => {
+        if (curr.spec.hoveredCell !== undefined) {
+          acc["hoveredCell"] = curr.spec.hoveredCell;
+        }

-      if (curr.spec.hoveredTable !== undefined) {
-        acc["hoveredTable"] = curr.spec.hoveredTable;
-      }
-      return acc;
-    }, {} as Record<string, HTMLElement>) as any;
+        if (curr.spec.hoveredTable !== undefined) {
+          acc["hoveredTable"] = curr.spec.hoveredTable;
+        }
+        return acc;
+      },
+      {} as Record<string, HTMLElement>
+    ) as any;

    if (table === undefined || cell === undefined) {
      return this.root.classList.add("controls--disabled");
--- a/packages/editor/core/src/ui/mentions/mention-list.tsx
+++ b/packages/editor/core/src/ui/mentions/mention-list.tsx
@@ -63,13 +63,13 @@ export const MentionList = forwardRef((props: MentionListProps, ref) => {
  }));

  return props.items && props.items.length !== 0 ? (
-    <div className="mentions absolute max-h-40 w-48 space-y-0.5 overflow-y-auto rounded-md bg-custom-background-100 p-1 text-sm text-custom-text-300 shadow-custom-shadow-sm">
+    <div className="mentions absolute max-h-40 w-48 space-y-0.5 overflow-y-auto rounded-md bg-neutral-component-surface-light p-1 text-sm text-neutral-text-medium shadow-custom-shadow-sm">
      {props.items.length ? (
        props.items.map((item, index) => (
          <div
            key={item.id}
-            className={`flex cursor-pointer items-center gap-2 rounded p-1 hover:bg-custom-background-80 ${
-              index === selectedIndex ? "bg-custom-background-80" : ""
+            className={`flex cursor-pointer items-center gap-2 rounded p-1 hover:bg-neutral-component-surface-dark ${
+              index === selectedIndex ? "bg-neutral-component-surface-dark" : ""
            }`}
            onClick={() => selectItem(index)}
          >
@@ -77,7 +77,7 @@ export const MentionList = forwardRef((props: MentionListProps, ref) => {
              {item.avatar && item.avatar.trim() !== "" ? (
                <img src={item.avatar} className="h-full w-full rounded-sm object-cover" alt={item.title} />
              ) : (
-                <div className="grid h-full w-full place-items-center rounded-sm bg-gray-700 text-xs capitalize text-white">
+                <div className="grid h-full w-full place-items-center rounded-sm bg-primary-solid text-xs capitalize text-white">
                  {item.title[0]}
                </div>
              )}
--- a/packages/editor/core/src/ui/mentions/mention-node-view.tsx
+++ b/packages/editor/core/src/ui/mentions/mention-node-view.tsx
@@ -19,8 +19,10 @@ export const MentionNodeView = (props) => {
  return (
    <NodeViewWrapper className="mention-component inline w-fit">
      <span
-        className={cn("mention rounded bg-custom-primary-100/20 px-1 py-0.5 font-medium text-custom-primary-100", {
-          "bg-yellow-500/20 text-yellow-500": highlights ? highlights.includes(props.node.attrs.id) : false,
+        className={cn("mention rounded bg-primary-solid/20 px-1 py-0.5 font-medium text-primary-text-subtle", {
+          "bg-warning-component-surface-light text-warning-text-subtle": highlights
+            ? highlights.includes(props.node.attrs.id)
+            : false,
          "cursor-pointer": !props.extension.options.readonly,
          // "hover:bg-custom-primary-300" : !props.extension.options.readonly && !highlights.includes(props.node.attrs.id)
        })}
--- a/packages/editor/core/src/ui/plugins/upload-image.tsx
+++ b/packages/editor/core/src/ui/plugins/upload-image.tsx
@@ -21,7 +21,7 @@ export const UploadImagesPlugin = (cancelUploadImage?: () => any) =>
          const placeholder = document.createElement("div");
          placeholder.setAttribute("class", "img-placeholder");
          const image = document.createElement("img");
-          image.setAttribute("class", "opacity-10 rounded-lg border border-custom-border-300");
+          image.setAttribute("class", "opacity-10 rounded-lg border border-neutral-border-medium");
          image.src = src;
          placeholder.appendChild(image);

--- a/packages/editor/core/src/ui/read-only/extensions.tsx
+++ b/packages/editor/core/src/ui/read-only/extensions.tsx
@@ -40,12 +40,12 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
    },
    blockquote: {
      HTMLAttributes: {
-        class: "border-l-4 border-custom-border-300",
+        class: "border-l-4 border-neutral-border-medium",
      },
    },
    code: {
      HTMLAttributes: {
-        class: "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000",
+        class: "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-neutral-text-strong0",
        spellcheck: "false",
      },
    },
@@ -54,7 +54,7 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
      HTMLAttributes: { class: "mt-4 mb-4" },
    },
    dropcursor: {
-      color: "rgba(var(--color-text-100))",
+      color: "var(--color-neutral-120)",
      width: 2,
    },
    gapcursor: false,
@@ -70,7 +70,7 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
  }),
  ReadOnlyImageExtension.configure({
    HTMLAttributes: {
-      class: "rounded-lg border border-custom-border-300",
+      class: "rounded-lg border border-neutral-border-medium",
    },
  }),
  TiptapUnderline,
--- a/packages/editor/document-editor/src/ui/components/content-browser.tsx
+++ b/packages/editor/document-editor/src/ui/components/content-browser.tsx
@@ -32,7 +32,7 @@ export const ContentBrowser = (props: ContentBrowserProps) => {
            )
          )
        ) : (
-          <p className="mt-3 text-xs text-custom-text-400">Headings will be displayed here for navigation</p>
+          <p className="mt-3 text-xs text-neutral-text-subtle">Headings will be displayed here for navigation</p>
        )}
      </div>
    </div>
--- a/packages/editor/document-editor/src/ui/components/editor-header.tsx
+++ b/packages/editor/document-editor/src/ui/components/editor-header.tsx
@@ -42,7 +42,7 @@ export const EditorHeader = (props: IEditorHeader) => {
  } = props;

  return (
-    <div className="flex items-center border-b border-custom-border-200 md:px-5 px-3 py-2">
+    <div className="flex items-center border-b border-neutral-border-medium md:px-5 px-3 py-2">
      <div className="md:w-56 flex-shrink-0 lg:w-72 w-fit">
        <SummaryPopover
          editor={editor}
@@ -62,8 +62,8 @@ export const EditorHeader = (props: IEditorHeader) => {
        {isLocked && (
          <AlertLabel
            Icon={Lock}
-            backgroundColor="bg-custom-background-80"
-            textColor="text-custom-text-300"
+            backgroundColor="bg-neutral-component-surface-dark"
+            textColor="text-neutral-text-medium"
            label="Locked"
          />
        )}
@@ -83,9 +83,9 @@ export const EditorHeader = (props: IEditorHeader) => {
            }`}
          >
            {isSubmitting !== "submitted" && isSubmitting !== "saved" && (
-              <RefreshCw className="h-4 w-4 stroke-custom-text-300" />
+              <RefreshCw className="h-4 w-4 stroke-neutral-text-medium" />
            )}
-            <span className="text-sm text-custom-text-300">
+            <span className="text-sm text-neutral-text-medium">
              {isSubmitting === "submitting" ? "Saving..." : "Saved"}
            </span>
          </div>
--- a/packages/editor/document-editor/src/ui/components/info-popover.tsx
+++ b/packages/editor/document-editor/src/ui/components/info-popover.tsx
@@ -43,20 +43,20 @@ export const InfoPopover: React.FC<Props> = (props) => {
      </button>
      {isPopoverOpen && (
        <div
-          className="z-10 w-64 space-y-2.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3 shadow-custom-shadow-rg"
+          className="z-10 w-64 space-y-2.5 rounded border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-light p-3 shadow-custom-shadow-rg"
          ref={setPopperElement}
          style={infoPopoverStyles.popper}
          {...infoPopoverAttributes.popper}
        >
          <div className="space-y-1.5">
-            <h6 className="text-xs text-custom-text-400">Last updated on</h6>
+            <h6 className="text-xs text-neutral-text-subtle">Last updated on</h6>
            <h5 className="flex items-center gap-1 text-sm">
              <History className="h-3 w-3" />
              {renderDate(new Date(documentDetails.last_updated_at))}
            </h5>
          </div>
          <div className="space-y-1.5">
-            <h6 className="text-xs text-custom-text-400">Created on</h6>
+            <h6 className="text-xs text-neutral-text-subtle">Created on</h6>
            <h5 className="flex items-center gap-1 text-sm">
              <Calendar className="h-3 w-3" />
              {renderDate(new Date(documentDetails.created_on))}
--- a/packages/editor/document-editor/src/ui/components/links/link-edit-view.tsx
+++ b/packages/editor/document-editor/src/ui/components/links/link-edit-view.tsx
@@ -16,13 +16,13 @@ const InputView = ({
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }) => (
  <div className="flex flex-col gap-1">
-    <label className="inline-block font-semibold text-xs text-custom-text-400">{label}</label>
+    <label className="inline-block font-semibold text-xs text-neutral-text-subtle">{label}</label>
    <input
      placeholder={placeholder}
      onClick={(e) => {
        e.stopPropagation();
      }}
-      className="w-[280px] outline-none bg-custom-background-90 text-custom-text-900 text-sm"
+      className="w-[280px] outline-none bg-neutral-component-surface-medium text-custom-text-900 text-sm"
      defaultValue={defaultValue}
      onChange={onChange}
    />
@@ -122,7 +122,7 @@ export const LinkEditView = ({
  return (
    <div
      onKeyDown={(e) => e.key === "Enter" && viewProps.closeLinkView()}
-      className="shadow-md rounded p-2 flex flex-col gap-3 bg-custom-background-90 border-custom-border-100 border-2"
+      className="shadow-md rounded p-2 flex flex-col gap-3 bg-neutral-component-surface-medium border-neutral-border-subtle border-2"
    >
      <InputView
        label={"URL"}
--- a/packages/editor/document-editor/src/ui/components/links/link-preview.tsx
+++ b/packages/editor/document-editor/src/ui/components/links/link-preview.tsx
@@ -32,7 +32,7 @@ export const LinkPreview = ({

  return (
    <div className="absolute left-0 top-0 max-w-max">
-      <div className="shadow-md items-center rounded p-2 flex gap-3 bg-custom-background-90 border-custom-border-100 border-2 text-custom-text-300 text-xs">
+      <div className="shadow-md items-center rounded p-2 flex gap-3 bg-neutral-component-surface-medium border-neutral-border-subtle border-2 text-neutral-text-medium text-xs">
        <GlobeIcon size={14} className="inline-block" />
        <p>{url.length > 40 ? url.slice(0, 40) + "..." : url}</p>
        <div className="flex gap-2">
--- a/packages/editor/document-editor/src/ui/components/page-renderer.tsx
+++ b/packages/editor/document-editor/src/ui/components/page-renderer.tsx
@@ -156,13 +156,13 @@ export const PageRenderer = (props: IPageRenderer) => {
      {!readonly ? (
        <input
          onChange={(e) => handlePageTitleChange(e.target.value)}
-          className="-mt-2 w-full break-words border-none bg-custom-background pr-5 text-4xl font-bold outline-none"
+          className="-mt-2 w-full break-words border-none pr-5 text-4xl font-bold outline-none bg-transparent"
          value={pageTitle}
        />
      ) : (
        <input
          onChange={(e) => handlePageTitleChange(e.target.value)}
-          className="-mt-2 w-full overflow-x-clip break-words border-none bg-custom-background pr-5 text-4xl font-bold outline-none"
+          className="-mt-2 w-full overflow-x-clip break-words border-none pr-5 text-4xl font-bold outline-none"
          value={pageTitle}
          disabled
        />
--- a/packages/editor/document-editor/src/ui/components/summary-popover.tsx
+++ b/packages/editor/document-editor/src/ui/components/summary-popover.tsx
@@ -33,8 +33,9 @@ export const SummaryPopover: React.FC<Props> = (props) => {
      <button
        type="button"
        ref={setReferenceElement}
-        className={`grid h-7 w-7 place-items-center rounded ${sidePeekVisible ? "bg-custom-primary-100/20 text-custom-primary-100" : "text-custom-text-300"
-          }`}
+        className={`grid h-7 w-7 place-items-center rounded ${
+          sidePeekVisible ? "bg-primary-solid/20 text-primary-text-subtle" : "text-neutral-text-medium"
+        }`}
        onClick={() => setSidePeekVisible(!sidePeekVisible)}
      >
        <List className="h-4 w-4" />
--- a/packages/editor/document-editor/src/ui/components/vertical-dropdown-menu.tsx
+++ b/packages/editor/document-editor/src/ui/components/vertical-dropdown-menu.tsx
@@ -27,7 +27,7 @@ export interface IVerticalDropdownMenuProps {
 const VerticalDropdownItem = ({ Icon, label, action }: IVerticalDropdownItemProps) => (
  <CustomMenu.MenuItem onClick={action} className="flex items-center gap-2">
    <Icon className="h-3 w-3" />
-    <div className="text-custom-text-300">{label}</div>
+    <div className="text-neutral-text-medium">{label}</div>
  </CustomMenu.MenuItem>
 );

@@ -36,7 +36,7 @@ export const VerticalDropdownMenu = ({ items }: IVerticalDropdownMenuProps) => (
    maxHeight={"md"}
    className={"h-4.5 mt-1"}
    placement={"bottom-start"}
-    optionsClassName={"border-custom-border border-r border-solid transition-all duration-200 ease-in-out "}
+    optionsClassName="border-neutral-border-medium border-r border-solid transition-all duration-200 ease-in-out"
    customButton={<MoreVertical size={14} />}
  >
    {items.map((item) => (
--- a/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-renderer.tsx
+++ b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-renderer.tsx
@@ -145,7 +145,7 @@ const IssueSuggestionList = ({
    <div
      id="issue-list-container"
      ref={commandListContainer}
-      className=" fixed z-[10] max-h-80 w-60 overflow-y-auto overflow-x-hidden rounded-md border border-custom-border-100 bg-custom-background-100 px-1 shadow-custom-shadow-xs transition-all"
+      className=" fixed z-[10] max-h-80 w-60 overflow-y-auto overflow-x-hidden rounded-md border border-neutral-border-subtle bg-neutral-component-surface-light px-1 shadow-custom-shadow-xs transition-all"
    >
      {sections.map((section) => {
        const sectionItems = displayedItems[section];
@@ -155,7 +155,7 @@ const IssueSuggestionList = ({
            <div className={"flex h-full w-full flex-col"} key={`${section}-container`} id={`${section}-container`}>
              <h6
                className={
-                  "sticky top-0 z-[10] bg-custom-background-100 px-2 py-1 text-xs font-medium text-custom-text-400"
+                  "sticky top-0 z-[10] bg-neutral-component-surface-light px-2 py-1 text-xs font-medium text-neutral-text-subtle"
                }
              >
                {section}
@@ -164,16 +164,16 @@ const IssueSuggestionList = ({
                {sectionItems.map((item: IssueSuggestionProps, index: number) => (
                  <button
                    className={cn(
-                      `flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100`,
+                      `flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-neutral-text-medium hover:bg-primary-solid/5 hover:text-neutral-text-strong`,
                      {
-                        "bg-custom-primary-100/5  text-custom-text-100":
+                        "bg-primary-solid/5  text-neutral-text-strong":
                          section === currentSection && index === selectedIndex,
                      }
                    )}
                    key={item.identifier}
                    onClick={() => selectItem(section, index)}
                  >
-                    <h5 className="whitespace-nowrap text-xs text-custom-text-300">{item.identifier}</h5>
+                    <h5 className="whitespace-nowrap text-xs text-neutral-text-medium">{item.identifier}</h5>
                    <PriorityIcon priority={item.priority} />
                    <div>
                      <p className="flex-grow truncate text-xs">{item.title}</p>
--- a/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-card.tsx
+++ b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-card.tsx
@@ -8,13 +8,13 @@ export const IssueWidgetCard = (props) => (
    <div
      className={`${
        props.selected ? "border-custom-primary-200 border-[2px]" : ""
-      } w-full h-[100px] cursor-pointer space-y-2 rounded-md border-[0.5px] border-custom-border-200 shadow-custom-shadow-2xs`}
+      } w-full h-[100px] cursor-pointer space-y-2 rounded-md border-[0.5px] border-neutral-border-medium shadow-custom-shadow-2xs`}
    >
-      <h5 className="h-[20%] text-xs text-custom-text-300 p-2">
+      <h5 className="h-[20%] text-xs text-neutral-text-medium p-2">
        {props.node.attrs.project_identifier}-{props.node.attrs.sequence_id}
      </h5>
      <div className="relative h-[71%]">
-        <div className="h-full backdrop-filter backdrop-blur-[30px] bg-custom-background-80 bg-opacity-30 flex items-center w-full justify-between gap-5 mt-2.5 pl-4 pr-5 py-3 max-md:max-w-full max-md:flex-wrap relative">
+        <div className="h-full backdrop-filter backdrop-blur-[30px] bg-neutral-component-surface-dark bg-opacity-30 flex items-center w-full justify-between gap-5 mt-2.5 pl-4 pr-5 py-3 max-md:max-w-full max-md:flex-wrap relative">
          <div className="flex gap-2 items-center">
            <div className="rounded">
              <Crown className="m-2" size={16} color="#FFBA18" />
--- a/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx
+++ b/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx
@@ -77,7 +77,7 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
  }

  return (
-    <div className="flex flex-wrap items-center divide-x divide-custom-border-200">
+    <div className="flex flex-wrap items-center divide-x divide-neutral-border-medium">
      <div className="flex items-center gap-0.5 pr-2">
        {basicMarkItems.map((item) => (
          <button
@@ -85,9 +85,9 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
            type="button"
            onClick={item.command}
            className={cn(
-              "grid h-7 w-7 place-items-center rounded text-custom-text-300 hover:bg-custom-background-80",
+              "grid h-7 w-7 place-items-center rounded text-neutral-text-medium hover:bg-neutral-component-surface-dark",
              {
-                "bg-custom-background-80 text-custom-text-100": item.isActive(),
+                "bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
              }
            )}
          >
@@ -102,15 +102,15 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
            type="button"
            onClick={item.command}
            className={cn(
-              "grid h-7 w-7 place-items-center rounded text-custom-text-300 hover:bg-custom-background-80",
+              "grid h-7 w-7 place-items-center rounded text-neutral-text-medium hover:bg-neutral-component-surface-dark",
              {
-                "bg-custom-background-80 text-custom-text-100": item.isActive(),
+                "bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
              }
            )}
          >
            <item.icon
              className={cn("h-4 w-4", {
-                "text-custom-text-100": item.isActive(),
+                "text-neutral-text-strong": item.isActive(),
              })}
            />
          </button>
@@ -123,15 +123,15 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
            type="button"
            onClick={item.command}
            className={cn(
-              "grid h-7 w-7 place-items-center rounded text-custom-text-300 hover:bg-custom-background-80",
+              "grid h-7 w-7 place-items-center rounded text-neutral-text-medium hover:bg-neutral-component-surface-dark",
              {
-                "bg-custom-background-80 text-custom-text-100": item.isActive(),
+                "bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
              }
            )}
          >
            <item.icon
              className={cn("h-4 w-4", {
-                "text-custom-text-100": item.isActive(),
+                "text-neutral-text-strong": item.isActive(),
              })}
            />
          </button>
@@ -144,15 +144,15 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
            type="button"
            onClick={item.command}
            className={cn(
-              "grid h-7 w-7 place-items-center rounded text-custom-text-300 hover:bg-custom-background-80",
+              "grid h-7 w-7 place-items-center rounded text-neutral-text-medium hover:bg-neutral-component-surface-dark",
              {
-                "bg-custom-background-80 text-custom-text-100": item.isActive(),
+                "bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
              }
            )}
          >
            <item.icon
              className={cn("h-4 w-4", {
-                "text-custom-text-100": item.isActive(),
+                "text-neutral-text-strong": item.isActive(),
              })}
            />
          </button>
--- a/packages/editor/document-editor/src/ui/tooltip.tsx
+++ b/packages/editor/document-editor/src/ui/tooltip.tsx
@@ -51,11 +51,13 @@ export const Tooltip: React.FC<Props> = ({
      content={
        <div
          className={`relative z-50 max-w-xs gap-1 rounded-md p-2 text-xs shadow-md ${
-            theme === "custom" ? "bg-custom-background-100 text-custom-text-200" : "bg-black text-gray-400"
+            theme === "custom"
+              ? "bg-neutral-component-surface-light text-neutral-text-medium"
+              : "bg-black text-gray-400"
          } overflow-hidden break-words ${className}`}
        >
          {tooltipHeading && (
-            <h5 className={`font-medium ${theme === "custom" ? "text-custom-text-100" : "text-white"}`}>
+            <h5 className={`font-medium ${theme === "custom" ? "text-neutral-text-strong" : "text-white"}`}>
              {tooltipHeading}
            </h5>
          )}
--- a/packages/editor/extensions/Readme.md
+++ b/packages/editor/extensions/Readme.md
@@ -92,6 +92,6 @@ Here is an example of how to use the `RichReadOnlyEditor` component
 ```tsx
 <LiteReadOnlyEditor
  value={comment.comment_html}
-  customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+  customClassName="text-xs border border-neutral-border-medium bg-neutral-component-surface-light"
 />
 ```
--- a/packages/editor/extensions/src/extensions/slash-commands.tsx
+++ b/packages/editor/extensions/src/extensions/slash-commands.tsx
@@ -291,15 +291,15 @@ const CommandList = ({ items, command }: { items: CommandItemProps[]; command: a
    <div
      id="slash-command"
      ref={commandListContainer}
-      className="fixed z-50 h-auto max-h-[330px] w-52 overflow-y-auto rounded-md border border-custom-border-300 bg-custom-background-100 px-1 py-2 shadow-md transition-all"
+      className="fixed z-50 h-auto max-h-[330px] w-52 overflow-y-auto rounded-md border border-neutral-border-medium bg-neutral-component-surface-light px-1 py-2 shadow-md transition-all"
    >
      {items.map((item, index) => (
        <button
          key={item.key}
          className={cn(
-            `flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-sm text-custom-text-100 hover:bg-custom-primary-100/5`,
+            `flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-sm text-neutral-text-strong hover:bg-primary-solid/5`,
            {
-              "bg-custom-primary-100/5": index === selectedIndex,
+              "bg-primary-solid/5": index === selectedIndex,
            }
          )}
          onClick={() => selectItem(index)}
--- a/packages/editor/extensions/src/styles/drag-drop.css
+++ b/packages/editor/extensions/src/styles/drag-drop.css
@@ -9,11 +9,11 @@
  z-index: 10;
  cursor: grab;
  border-radius: 2px;
-  background-color: rgb(var(--color-background-90));
+  background-color: var(--color-neutral-40);
 }

 .drag-handle:hover {
-  background-color: rgb(var(--color-background-80));
+  background-color: var(--color-neutral-50);
  transition: background-color 0.2s;
 }

@@ -48,6 +48,6 @@
 .drag-handle-dot {
  height: 2.75px;
  width: 3px;
-  background-color: rgba(var(--color-text-200));
+  background-color: var(--color-neutral-110);
  border-radius: 50%;
 }
--- a/packages/editor/lite-text-editor/Readme.md
+++ b/packages/editor/lite-text-editor/Readme.md
@@ -92,6 +92,6 @@ Here is an example of how to use the `RichReadOnlyEditor` component
 ```tsx
 <LiteReadOnlyEditor
  value={comment.comment_html}
-  customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+  customClassName="text-xs border border-neutral-border-medium bg-neutral-component-surface-light"
 />
 ```
--- a/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
+++ b/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
@@ -95,21 +95,21 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
  return (
    <div className="flex h-9 w-full items-stretch gap-1.5 overflow-x-scroll">
      {props.commentAccessSpecifier && (
-        <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded border-[0.5px] border-custom-border-200 p-1">
+        <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded border-[0.5px] border-neutral-border-medium p-1">
          {props?.commentAccessSpecifier.commentAccess?.map((access) => (
            <Tooltip key={access.key} tooltipContent={access.label}>
              <button
                type="button"
                onClick={() => handleAccessChange(access.key)}
-                className={`grid aspect-square place-items-center rounded-sm p-1 hover:bg-custom-background-90 ${
-                  props.commentAccessSpecifier?.accessValue === access.key ? "bg-custom-background-90" : ""
+                className={`grid aspect-square place-items-center rounded-sm p-1 hover:bg-neutral-component-surface-medium ${
+                  props.commentAccessSpecifier?.accessValue === access.key ? "bg-neutral-component-surface-medium" : ""
                }`}
              >
                <access.icon
                  className={`h-3.5 w-3.5 ${
                    props.commentAccessSpecifier?.accessValue === access.key
-                      ? "text-custom-text-100"
-                      : "text-custom-text-400"
+                      ? "text-neutral-text-strong"
+                      : "text-neutral-text-subtle"
                  }`}
                  strokeWidth={2}
                />
@@ -118,24 +118,24 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
          ))}
        </div>
      )}
-      <div className="flex w-full items-stretch justify-between gap-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 p-1">
+      <div className="flex w-full items-stretch justify-between gap-2 rounded border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-medium p-1">
        <div className="flex items-stretch">
-          <div className="flex items-stretch gap-0.5 border-r border-custom-border-200 pr-2.5">
+          <div className="flex items-stretch gap-0.5 border-r border-neutral-border-medium pr-2.5">
            {basicTextFormattingItems.map((item) => (
              <Tooltip key={item.name} tooltipContent={<span className="capitalize">{item.name}</span>}>
                <button
                  type="button"
                  onClick={item.command}
                  className={cn(
-                    "grid aspect-square place-items-center rounded-sm p-1 text-custom-text-400 hover:bg-custom-background-80",
+                    "grid aspect-square place-items-center rounded-sm p-1 text-neutral-text-subtle hover:bg-neutral-component-surface-dark",
                    {
-                      "bg-custom-background-80 text-custom-text-100": item.isActive(),
+                      "bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
                    }
                  )}
                >
                  <item.icon
                    className={cn("h-3.5 w-3.5", {
-                      "text-custom-text-100": item.isActive(),
+                      "text-neutral-text-strong": item.isActive(),
                    })}
                    strokeWidth={2.5}
                  />
@@ -143,22 +143,22 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
              </Tooltip>
            ))}
          </div>
-          <div className="flex items-stretch gap-0.5 border-r border-custom-border-200 px-2.5">
+          <div className="flex items-stretch gap-0.5 border-r border-neutral-border-medium px-2.5">
            {listFormattingItems.map((item) => (
              <Tooltip key={item.name} tooltipContent={<span className="capitalize">{item.name}</span>}>
                <button
                  type="button"
                  onClick={item.command}
                  className={cn(
-                    "grid aspect-square place-items-center rounded-sm p-1 text-custom-text-400 hover:bg-custom-background-80",
+                    "grid aspect-square place-items-center rounded-sm p-1 text-neutral-text-subtle hover:bg-neutral-component-surface-dark",
                    {
-                      "bg-custom-background-80 text-custom-text-100": item.isActive(),
+                      "bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
                    }
                  )}
                >
                  <item.icon
                    className={cn("h-3.5 w-3.5", {
-                      "text-custom-text-100": item.isActive(),
+                      "text-neutral-text-strong": item.isActive(),
                    })}
                    strokeWidth={2.5}
                  />
@@ -166,22 +166,22 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
              </Tooltip>
            ))}
          </div>
-          <div className="flex items-stretch gap-0.5 border-r border-custom-border-200 px-2.5">
+          <div className="flex items-stretch gap-0.5 border-r border-neutral-border-medium px-2.5">
            {userActionItems.map((item) => (
              <Tooltip key={item.name} tooltipContent={<span className="capitalize">{item.name}</span>}>
                <button
                  type="button"
                  onClick={item.command}
                  className={cn(
-                    "grid aspect-square place-items-center rounded-sm p-1 text-custom-text-400 hover:bg-custom-background-80",
+                    "grid aspect-square place-items-center rounded-sm p-1 text-neutral-text-subtle hover:bg-neutral-component-surface-dark",
                    {
-                      "bg-custom-background-80 text-custom-text-100": item.isActive(),
+                      "bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
                    }
                  )}
                >
                  <item.icon
                    className={cn("h-3.5 w-3.5", {
-                      "text-custom-text-100": item.isActive(),
+                      "text-neutral-text-strong": item.isActive(),
                    })}
                    strokeWidth={2.5}
                  />
@@ -196,15 +196,15 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
                  type="button"
                  onClick={item.command}
                  className={cn(
-                    "grid aspect-square place-items-center rounded-sm p-1 text-custom-text-400 hover:bg-custom-background-80",
+                    "grid aspect-square place-items-center rounded-sm p-1 text-neutral-text-subtle hover:bg-neutral-component-surface-dark",
                    {
-                      "bg-custom-background-80 text-custom-text-100": item.isActive(),
+                      "bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
                    }
                  )}
                >
                  <item.icon
                    className={cn("h-3.5 w-3.5", {
-                      "text-custom-text-100": item.isActive(),
+                      "text-neutral-text-strong": item.isActive(),
                    })}
                    strokeWidth={2.5}
                  />
--- a/packages/editor/rich-text-editor/Readme.md
+++ b/packages/editor/rich-text-editor/Readme.md
@@ -41,7 +41,7 @@ The `@plane/rich-text-editor` package extends from the `editor-core` package, in
  debouncedUpdatesEnabled={true}
  setShouldShowAlert={setShowAlert}
  setIsSubmitting={setIsSubmitting}
-  customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"}
+  customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-neutral-text-medium"}
  noBorder={!isAllowed}
  onChange={(description: Object, description_html: string) => {
    setShowAlert(true);
--- a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/index.tsx
+++ b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/index.tsx
@@ -94,7 +94,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
  return (
    <BubbleMenu
      {...bubbleMenuProps}
-      className="flex w-fit divide-x divide-custom-border-300 rounded border border-custom-border-300 bg-custom-background-100 shadow-xl"
+      className="flex w-fit divide-x divide-neutral-border-medium rounded border border-neutral-border-medium bg-neutral-component-surface-light shadow-xl"
    >
      {isSelecting ? null : (
        <>
@@ -123,15 +123,15 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
                type="button"
                onClick={item.command}
                className={cn(
-                  "p-2 text-custom-text-300 transition-colors hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5",
+                  "p-2 text-neutral-text-medium transition-colors hover:bg-primary-solid/5 active:bg-primary-solid/5",
                  {
-                    "bg-custom-primary-100/5 text-custom-text-100": item.isActive(),
+                    "bg-primary-solid/5 text-neutral-text-strong": item.isActive(),
                  }
                )}
              >
                <item.icon
                  className={cn("h-4 w-4", {
-                    "text-custom-text-100": item.isActive(),
+                    "text-neutral-text-strong": item.isActive(),
                  })}
                />
              </button>
--- a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/link-selector.tsx
+++ b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/link-selector.tsx
@@ -30,8 +30,8 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
      <button
        type="button"
        className={cn(
-          "flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-custom-text-300 hover:bg-custom-background-100 active:bg-custom-background-100",
-          { "bg-custom-background-100": isOpen }
+          "flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-neutral-text-medium hover:bg-neutral-component-surface-light active:bg-neutral-component-surface-light",
+          { "bg-neutral-component-surface-light": isOpen }
        )}
        onClick={() => {
          setIsOpen(!isOpen);
@@ -40,7 +40,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
        <p className="text-base">↗</p>
        <p
          className={cn("underline underline-offset-4", {
-            "text-custom-text-100": editor.isActive("link"),
+            "text-neutral-text-strong": editor.isActive("link"),
          })}
        >
          Link
@@ -48,7 +48,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
      </button>
      {isOpen && (
        <div
-          className="dow-xl fixed top-full z-[99999] mt-1 flex w-60 overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 animate-in fade-in slide-in-from-top-1"
+          className="dow-xl fixed top-full z-[99999] mt-1 flex w-60 overflow-hidden rounded border border-neutral-border-medium bg-neutral-component-surface-light animate-in fade-in slide-in-from-top-1"
          onKeyDown={(e) => {
            if (e.key === "Enter") {
              e.preventDefault();
@@ -60,13 +60,13 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
            ref={inputRef}
            type="url"
            placeholder="Paste a link"
-            className="flex-1 border-r border-custom-border-300 bg-custom-background-100 p-1 text-sm outline-none placeholder:text-custom-text-400"
+            className="flex-1 border-r border-neutral-border-medium bg-neutral-component-surface-light p-1 text-sm outline-none placeholder:text-neutral-text-subtle"
            defaultValue={editor.getAttributes("link").href || ""}
          />
          {editor.getAttributes("link").href ? (
            <button
              type="button"
-              className="flex items-center rounded-sm p-1 text-red-600 transition-all hover:bg-red-100 dark:hover:bg-red-800"
+              className="flex items-center rounded-sm p-1 text-danger-text-medium transition-all hover:bg-red-100 dark:hover:bg-red-800"
              onClick={() => {
                unsetLinkEditor(editor);
                setIsOpen(false);
@@ -76,7 +76,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
            </button>
          ) : (
            <button
-              className="flex items-center rounded-sm p-1 text-custom-text-300 transition-all hover:bg-custom-background-90"
+              className="flex items-center rounded-sm p-1 text-neutral-text-medium transition-all hover:bg-neutral-component-surface-medium"
              type="button"
              onClick={() => {
                onLinkSubmit();
--- a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx
+++ b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx
@@ -48,14 +48,14 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
      <button
        type="button"
        onClick={() => setIsOpen(!isOpen)}
-        className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5"
+        className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-neutral-text-medium hover:bg-primary-solid/5 active:bg-primary-solid/5"
      >
        <span>{activeItem?.name}</span>
        <ChevronDown className="h-4 w-4" />
      </button>

      {isOpen && (
-        <section className="fixed top-full z-[99999] mt-1 flex w-48 flex-col overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
+        <section className="fixed top-full z-[99999] mt-1 flex w-48 flex-col overflow-hidden rounded border border-neutral-border-medium bg-neutral-component-surface-light p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
          {items.map((item) => (
            <button
              key={item.name}
@@ -65,14 +65,14 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
                setIsOpen(false);
              }}
              className={cn(
-                "flex items-center justify-between rounded-sm px-2 py-1 text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100",
+                "flex items-center justify-between rounded-sm px-2 py-1 text-sm text-neutral-text-medium hover:bg-primary-solid/5 hover:text-neutral-text-strong",
                {
-                  "bg-custom-primary-100/5 text-custom-text-100": activeItem.name === item.name,
+                  "bg-primary-solid/5 text-neutral-text-strong": activeItem.name === item.name,
                }
              )}
            >
              <div className="flex items-center space-x-2">
-                <div className="rounded-sm border border-custom-border-300 p-1">
+                <div className="rounded-sm border border-neutral-border-medium p-1">
                  <item.icon className="h-3 w-3" />
                </div>
                <span>{item.name}</span>
--- a/packages/tailwind-config-custom/legacy-tailwind.config.js
+++ b/packages/tailwind-config-custom/legacy-tailwind.config.js
@@ -0,0 +1,389 @@
+const convertToRGB = (variableName) => `rgba(var(${variableName}))`;
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: "class",
+  content: {
+    relative: true,
+    files: [
+      "./components/**/*.tsx",
+      "./constants/**/*.{js,ts,jsx,tsx}",
+      "./layouts/**/*.tsx",
+      "./pages/**/*.tsx",
+      "./ui/**/*.tsx",
+      "../packages/ui/**/*.{js,ts,jsx,tsx}",
+      "../packages/editor/**/src/**/*.{js,ts,jsx,tsx}",
+    ],
+  },
+  theme: {
+    extend: {
+      boxShadow: {
+        "custom-shadow-2xs": "var(--color-shadow-2xs)",
+        "custom-shadow-xs": "var(--color-shadow-xs)",
+        "custom-shadow-sm": "var(--color-shadow-sm)",
+        "custom-shadow-rg": "var(--color-shadow-rg)",
+        "custom-shadow-md": "var(--color-shadow-md)",
+        "custom-shadow-lg": "var(--color-shadow-lg)",
+        "custom-shadow-xl": "var(--color-shadow-xl)",
+        "custom-shadow-2xl": "var(--color-shadow-2xl)",
+        "custom-shadow-3xl": "var(--color-shadow-3xl)",
+        "custom-shadow-4xl": "var(--color-shadow-4xl)",
+        "custom-sidebar-shadow-2xs": "var(--color-sidebar-shadow-2xs)",
+        "custom-sidebar-shadow-xs": "var(--color-sidebar-shadow-xs)",
+        "custom-sidebar-shadow-sm": "var(--color-sidebar-shadow-sm)",
+        "custom-sidebar-shadow-rg": "var(--color-sidebar-shadow-rg)",
+        "custom-sidebar-shadow-md": "var(--color-sidebar-shadow-md)",
+        "custom-sidebar-shadow-lg": "var(--color-sidebar-shadow-lg)",
+        "custom-sidebar-shadow-xl": "var(--color-sidebar-shadow-xl)",
+        "custom-sidebar-shadow-2xl": "var(--color-sidebar-shadow-2xl)",
+        "custom-sidebar-shadow-3xl": "var(--color-sidebar-shadow-3xl)",
+        "custom-sidebar-shadow-4xl": "var(--color-sidebar-shadow-4xl)",
+        "onboarding-shadow-sm": "var(--color-onboarding-shadow-sm)",
+      },
+      colors: {
+        custom: {
+          primary: {
+            0: "rgb(255, 255, 255)",
+            10: convertToRGB("--color-primary-10"),
+            20: convertToRGB("--color-primary-20"),
+            30: convertToRGB("--color-primary-30"),
+            40: convertToRGB("--color-primary-40"),
+            50: convertToRGB("--color-primary-50"),
+            60: convertToRGB("--color-primary-60"),
+            70: convertToRGB("--color-primary-70"),
+            80: convertToRGB("--color-primary-80"),
+            90: convertToRGB("--color-primary-90"),
+            100: convertToRGB("--color-primary-100"),
+            200: convertToRGB("--color-primary-200"),
+            300: convertToRGB("--color-primary-300"),
+            400: convertToRGB("--color-primary-400"),
+            500: convertToRGB("--color-primary-500"),
+            600: convertToRGB("--color-primary-600"),
+            700: convertToRGB("--color-primary-700"),
+            800: convertToRGB("--color-primary-800"),
+            900: convertToRGB("--color-primary-900"),
+            1000: "rgb(0, 0, 0)",
+            DEFAULT: convertToRGB("--color-primary-100"),
+          },
+          background: {
+            0: "rgb(255, 255, 255)",
+            10: convertToRGB("--color-background-10"),
+            20: convertToRGB("--color-background-20"),
+            30: convertToRGB("--color-background-30"),
+            40: convertToRGB("--color-background-40"),
+            50: convertToRGB("--color-background-50"),
+            60: convertToRGB("--color-background-60"),
+            70: convertToRGB("--color-background-70"),
+            80: convertToRGB("--color-background-80"),
+            90: convertToRGB("--color-background-90"),
+            100: convertToRGB("--color-background-100"),
+            200: convertToRGB("--color-background-200"),
+            300: convertToRGB("--color-background-300"),
+            400: convertToRGB("--color-background-400"),
+            500: convertToRGB("--color-background-500"),
+            600: convertToRGB("--color-background-600"),
+            700: convertToRGB("--color-background-700"),
+            800: convertToRGB("--color-background-800"),
+            900: convertToRGB("--color-background-900"),
+            1000: "rgb(0, 0, 0)",
+            DEFAULT: convertToRGB("--color-background-100"),
+          },
+          text: {
+            0: "rgb(255, 255, 255)",
+            10: convertToRGB("--color-text-10"),
+            20: convertToRGB("--color-text-20"),
+            30: convertToRGB("--color-text-30"),
+            40: convertToRGB("--color-text-40"),
+            50: convertToRGB("--color-text-50"),
+            60: convertToRGB("--color-text-60"),
+            70: convertToRGB("--color-text-70"),
+            80: convertToRGB("--color-text-80"),
+            90: convertToRGB("--color-text-90"),
+            100: convertToRGB("--color-text-100"),
+            200: convertToRGB("--color-text-200"),
+            300: convertToRGB("--color-text-300"),
+            400: convertToRGB("--color-text-400"),
+            500: convertToRGB("--color-text-500"),
+            600: convertToRGB("--color-text-600"),
+            700: convertToRGB("--color-text-700"),
+            800: convertToRGB("--color-text-800"),
+            900: convertToRGB("--color-text-900"),
+            1000: "rgb(0, 0, 0)",
+            DEFAULT: convertToRGB("--color-text-100"),
+          },
+          border: {
+            0: "rgb(255, 255, 255)",
+            100: convertToRGB("--color-border-100"),
+            200: convertToRGB("--color-border-200"),
+            300: convertToRGB("--color-border-300"),
+            400: convertToRGB("--color-border-400"),
+            1000: "rgb(0, 0, 0)",
+            DEFAULT: convertToRGB("--color-border-200"),
+          },
+          sidebar: {
+            background: {
+              0: "rgb(255, 255, 255)",
+              10: convertToRGB("--color-sidebar-background-10"),
+              20: convertToRGB("--color-sidebar-background-20"),
+              30: convertToRGB("--color-sidebar-background-30"),
+              40: convertToRGB("--color-sidebar-background-40"),
+              50: convertToRGB("--color-sidebar-background-50"),
+              60: convertToRGB("--color-sidebar-background-60"),
+              70: convertToRGB("--color-sidebar-background-70"),
+              80: convertToRGB("--color-sidebar-background-80"),
+              90: convertToRGB("--color-sidebar-background-90"),
+              100: convertToRGB("--color-sidebar-background-100"),
+              200: convertToRGB("--color-sidebar-background-200"),
+              300: convertToRGB("--color-sidebar-background-300"),
+              400: convertToRGB("--color-sidebar-background-400"),
+              500: convertToRGB("--color-sidebar-background-500"),
+              600: convertToRGB("--color-sidebar-background-600"),
+              700: convertToRGB("--color-sidebar-background-700"),
+              800: convertToRGB("--color-sidebar-background-800"),
+              900: convertToRGB("--color-sidebar-background-900"),
+              1000: "rgb(0, 0, 0)",
+              DEFAULT: convertToRGB("--color-sidebar-background-100"),
+            },
+            text: {
+              0: "rgb(255, 255, 255)",
+              10: convertToRGB("--color-sidebar-text-10"),
+              20: convertToRGB("--color-sidebar-text-20"),
+              30: convertToRGB("--color-sidebar-text-30"),
+              40: convertToRGB("--color-sidebar-text-40"),
+              50: convertToRGB("--color-sidebar-text-50"),
+              60: convertToRGB("--color-sidebar-text-60"),
+              70: convertToRGB("--color-sidebar-text-70"),
+              80: convertToRGB("--color-sidebar-text-80"),
+              90: convertToRGB("--color-sidebar-text-90"),
+              100: convertToRGB("--color-sidebar-text-100"),
+              200: convertToRGB("--color-sidebar-text-200"),
+              300: convertToRGB("--color-sidebar-text-300"),
+              400: convertToRGB("--color-sidebar-text-400"),
+              500: convertToRGB("--color-sidebar-text-500"),
+              600: convertToRGB("--color-sidebar-text-600"),
+              700: convertToRGB("--color-sidebar-text-700"),
+              800: convertToRGB("--color-sidebar-text-800"),
+              900: convertToRGB("--color-sidebar-text-900"),
+              1000: "rgb(0, 0, 0)",
+              DEFAULT: convertToRGB("--color-sidebar-text-100"),
+            },
+            border: {
+              0: "rgb(255, 255, 255)",
+              100: convertToRGB("--color-sidebar-border-100"),
+              200: convertToRGB("--color-sidebar-border-200"),
+              300: convertToRGB("--color-sidebar-border-300"),
+              400: convertToRGB("--color-sidebar-border-400"),
+              1000: "rgb(0, 0, 0)",
+              DEFAULT: convertToRGB("--color-sidebar-border-200"),
+            },
+          },
+          backdrop: "rgba(0, 0, 0, 0.25)",
+        },
+        onboarding: {
+          background: {
+            100: convertToRGB("--color-onboarding-background-100"),
+            200: convertToRGB("--color-onboarding-background-200"),
+            300: convertToRGB("--color-onboarding-background-300"),
+            400: convertToRGB("--color-onboarding-background-400"),
+          },
+          text: {
+            100: convertToRGB("--color-onboarding-text-100"),
+            200: convertToRGB("--color-onboarding-text-200"),
+            300: convertToRGB("--color-onboarding-text-300"),
+            400: convertToRGB("--color-onboarding-text-400"),
+          },
+          border: {
+            100: convertToRGB("--color-onboarding-border-100"),
+            200: convertToRGB("--color-onboarding-border-200"),
+            300: convertToRGB("--color-onboarding-border-300"),
+          },
+        },
+      },
+      keyframes: {
+        leftToaster: {
+          "0%": { left: "-20rem" },
+          "100%": { left: "0" },
+        },
+        rightToaster: {
+          "0%": { right: "-20rem" },
+          "100%": { right: "0" },
+        },
+        "bar-loader": {
+          from: { left: "-100%" },
+          to: { left: "100%" },
+        },
+      },
+      typography: () => ({
+        brand: {
+          css: {
+            "--tw-prose-body": convertToRGB("--color-text-100"),
+            "--tw-prose-p": convertToRGB("--color-text-100"),
+            "--tw-prose-headings": convertToRGB("--color-text-100"),
+            "--tw-prose-lead": convertToRGB("--color-text-100"),
+            "--tw-prose-links": convertToRGB("--color-primary-100"),
+            "--tw-prose-bold": convertToRGB("--color-text-100"),
+            "--tw-prose-counters": convertToRGB("--color-text-100"),
+            "--tw-prose-bullets": convertToRGB("--color-text-100"),
+            "--tw-prose-hr": convertToRGB("--color-text-100"),
+            "--tw-prose-quotes": convertToRGB("--color-text-100"),
+            "--tw-prose-quote-borders": convertToRGB("--color-border-200"),
+            "--tw-prose-code": convertToRGB("--color-text-100"),
+            "--tw-prose-pre-code": convertToRGB("--color-text-100"),
+            "--tw-prose-pre-bg": convertToRGB("--color-background-100"),
+            "--tw-prose-th-borders": convertToRGB("--color-border-200"),
+            "--tw-prose-td-borders": convertToRGB("--color-border-200"),
+          },
+        },
+      }),
+      screens: {
+        "3xl": "1792px",
+      },
+      // scale down font sizes to 90% of default
+      fontSize: {
+        xs: "0.675rem",
+        sm: "0.7875rem",
+        base: "0.9rem",
+        lg: "1.0125rem",
+        xl: "1.125rem",
+        "2xl": "1.35rem",
+        "3xl": "1.6875rem",
+        "4xl": "2.25rem",
+        "5xl": "2.7rem",
+        "6xl": "3.375rem",
+        "7xl": "4.05rem",
+        "8xl": "5.4rem",
+        "9xl": "7.2rem",
+      },
+      // scale down spacing to 90% of default
+      padding: {
+        0: "0",
+        0.5: "0.1125rem",
+        1: "0.225rem",
+        1.5: "0.3375rem",
+        2: "0.45rem",
+        2.5: "0.5625rem",
+        3: "0.675rem",
+        3.5: "0.7875rem",
+        4: "0.9rem",
+        5: "1.125rem",
+        6: "1.35rem",
+        7: "1.575rem",
+        8: "1.8rem",
+        9: "2.025rem",
+        10: "2.25rem",
+        11: "2.475rem",
+        12: "2.7rem",
+        16: "3.6rem",
+        20: "4.5rem",
+        24: "5.4rem",
+        32: "7.2rem",
+        40: "9rem",
+        48: "10.8rem",
+        56: "12.6rem",
+        64: "14.4rem",
+        72: "16.2rem",
+        80: "18rem",
+        96: "21.6rem",
+      },
+      margin: {
+        0: "0",
+        0.5: "0.1125rem",
+        1: "0.225rem",
+        1.5: "0.3375rem",
+        2: "0.45rem",
+        2.5: "0.5625rem",
+        3: "0.675rem",
+        3.5: "0.7875rem",
+        4: "0.9rem",
+        5: "1.125rem",
+        6: "1.35rem",
+        7: "1.575rem",
+        8: "1.8rem",
+        9: "2.025rem",
+        10: "2.25rem",
+        11: "2.475rem",
+        12: "2.7rem",
+        16: "3.6rem",
+        20: "4.5rem",
+        24: "5.4rem",
+        32: "7.2rem",
+        40: "9rem",
+        48: "10.8rem",
+        56: "12.6rem",
+        64: "14.4rem",
+        72: "16.2rem",
+        80: "18rem",
+        96: "21.6rem",
+      },
+      space: {
+        0: "0",
+        0.5: "0.1125rem",
+        1: "0.225rem",
+        1.5: "0.3375rem",
+        2: "0.45rem",
+        2.5: "0.5625rem",
+        3: "0.675rem",
+        3.5: "0.7875rem",
+        4: "0.9rem",
+        5: "1.125rem",
+        6: "1.35rem",
+        7: "1.575rem",
+        8: "1.8rem",
+        9: "2.025rem",
+        10: "2.25rem",
+        11: "2.475rem",
+        12: "2.7rem",
+        16: "3.6rem",
+        20: "4.5rem",
+        24: "5.4rem",
+        32: "7.2rem",
+        40: "9rem",
+        48: "10.8rem",
+        56: "12.6rem",
+        64: "14.4rem",
+        72: "16.2rem",
+        80: "18rem",
+        96: "21.6rem",
+      },
+      gap: {
+        0: "0",
+        0.5: "0.1125rem",
+        1: "0.225rem",
+        1.5: "0.3375rem",
+        2: "0.45rem",
+        2.5: "0.5625rem",
+        3: "0.675rem",
+        3.5: "0.7875rem",
+        4: "0.9rem",
+        5: "1.125rem",
+        6: "1.35rem",
+        7: "1.575rem",
+        8: "1.8rem",
+        9: "2.025rem",
+        10: "2.25rem",
+        11: "2.475rem",
+        12: "2.7rem",
+        16: "3.6rem",
+        20: "4.5rem",
+        24: "5.4rem",
+        32: "7.2rem",
+        40: "9rem",
+        48: "10.8rem",
+        56: "12.6rem",
+        64: "14.4rem",
+        72: "16.2rem",
+        80: "18rem",
+        96: "21.6rem",
+      },
+      backgroundImage: {
+        "onboarding-gradient-100": "var( --gradient-onboarding-100)",
+        "onboarding-gradient-200": "var( --gradient-onboarding-200)",
+        "onboarding-gradient-300": "var( --gradient-onboarding-300)",
+      },
+    },
+    fontFamily: {
+      custom: ["Inter", "sans-serif"],
+    },
+  },
+  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
+};
--- a/packages/tailwind-config-custom/tailwind.config.js
+++ b/packages/tailwind-config-custom/tailwind.config.js
@@ -1,389 +1,255 @@
-const convertToRGB = (variableName) => `rgba(var(${variableName}))`;
+import colors from "tailwindcss/colors";
+
+const generateColorShades = (color) => ({
+  page: {
+    ...(color === "neutral"
+      ? { "surface-default": `var(--color-${color}-0)` }
+      : {}),
+    "surface-light": `var(--color-${color}-10)`,
+    "surface-medium": `var(--color-${color}-20)`,
+  },
+  component: {
+    "surface-light": `var(--color-${color}-30)`,
+    "surface-medium": `var(--color-${color}-40)`,
+    "surface-dark": `var(--color-${color}-50)`,
+  },
+  border: {
+    subtle: `var(--color-${color}-60)`,
+    medium: `var(--color-${color}-70)`,
+    strong: `var(--color-${color}-80)`,
+  },
+  solid: `var(--color-${color}-90)`,
+  "solid-hover": `var(--color-${color}-100)`,
+  text: {
+    subtle: `var(--color-${color}-100)`,
+    medium: `var(--color-${color}-110)`,
+    strong: `var(--color-${color}-120)`,
+  },
+  10: `var(--color-${color}-10)`,
+  20: `var(--color-${color}-20)`,
+  30: `var(--color-${color}-30)`,
+  40: `var(--color-${color}-40)`,
+  50: `var(--color-${color}-50)`,
+  60: `var(--color-${color}-60)`,
+  70: `var(--color-${color}-70)`,
+  80: `var(--color-${color}-80)`,
+  90: `var(--color-${color}-90)`,
+  100: `var(--color-${color}-100)`,
+  110: `var(--color-${color}-110)`,
+  120: `var(--color-${color}-120)`,
+  DEFAULT: `var(--color-${color}-90)`,
+});
+
+const generateSidebarColorShades = (color) => ({
+  page: {
+    ...(color === "neutral"
+      ? { "surface-default": `var(--color-sidebar-${color}-0)` }
+      : {}),
+    "surface-light": `var(--color-sidebar-${color}-10)`,
+    "surface-medium": `var(--color-sidebar-${color}-20)`,
+  },
+  component: {
+    "surface-light": `var(--color-sidebar-${color}-30)`,
+    "surface-medium": `var(--color-sidebar-${color}-40)`,
+    "surface-dark": `var(--color-sidebar-${color}-50)`,
+  },
+  border: {
+    subtle: `var(--color-sidebar-${color}-60)`,
+    medium: `var(--color-sidebar-${color}-70)`,
+    strong: `var(--color-sidebar-${color}-80)`,
+  },
+  solid: `var(--color-sidebar-${color}-90)`,
+  "solid-hover": `var(--color-sidebar-${color}-100)`,
+  text: {
+    subtle: `var(--color-sidebar-${color}-100)`,
+    medium: `var(--color-sidebar-${color}-110)`,
+    strong: `var(--color-sidebar-${color}-120)`,
+  },
+  10: `var(--color-sidebar-${color}-10)`,
+  20: `var(--color-sidebar-${color}-20)`,
+  30: `var(--color-sidebar-${color}-30)`,
+  40: `var(--color-sidebar-${color}-40)`,
+  50: `var(--color-sidebar-${color}-50)`,
+  60: `var(--color-sidebar-${color}-60)`,
+  70: `var(--color-sidebar-${color}-70)`,
+  80: `var(--color-sidebar-${color}-80)`,
+  90: `var(--color-sidebar-${color}-90)`,
+  100: `var(--color-sidebar-${color}-100)`,
+  110: `var(--color-sidebar-${color}-110)`,
+  120: `var(--color-sidebar-${color}-120)`,
+  DEFAULT: `var(--color-sidebar-${color}-90)`,
+});
+
+const generateSaturatedColorShades = (color) => ({
+  10: `var(--color-${color}-10)`,
+  20: `var(--color-${color}-20)`,
+  30: `var(--color-${color}-30)`,
+  40: `var(--color-${color}-40)`,
+  50: `var(--color-${color}-50)`,
+  60: `var(--color-${color}-60)`,
+  70: `var(--color-${color}-70)`,
+  80: `var(--color-${color}-80)`,
+  90: `var(--color-${color}-90)`,
+  100: `var(--color-${color}-100)`,
+  110: `var(--color-${color}-110)`,
+  120: `var(--color-${color}-120)`,
+  DEFAULT: `var(--color-${color}-90)`,
+});
+
+const SPACING_SCALE = {
+  0: "0",
+  0.5: "0.1125rem",
+  1: "0.225rem",
+  1.5: "0.3375rem",
+  2: "0.45rem",
+  2.5: "0.5625rem",
+  3: "0.675rem",
+  3.5: "0.7875rem",
+  4: "0.9rem",
+  5: "1.125rem",
+  6: "1.35rem",
+  7: "1.575rem",
+  8: "1.8rem",
+  9: "2.025rem",
+  10: "2.25rem",
+  11: "2.475rem",
+  12: "2.7rem",
+  16: "3.6rem",
+  20: "4.5rem",
+  24: "5.4rem",
+  32: "7.2rem",
+  40: "9rem",
+  48: "10.8rem",
+  56: "12.6rem",
+  64: "14.4rem",
+  72: "16.2rem",
+  80: "18rem",
+  96: "21.6rem",
+};

 /** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: "class",
-  content: {
-    relative: true,
-    files: [
-      "./components/**/*.tsx",
-      "./constants/**/*.{js,ts,jsx,tsx}",
-      "./layouts/**/*.tsx",
-      "./pages/**/*.tsx",
-      "./ui/**/*.tsx",
-      "../packages/ui/**/*.{js,ts,jsx,tsx}",
-      "../packages/editor/**/src/**/*.{js,ts,jsx,tsx}",
-    ],
-  },
-  theme: {
-    extend: {
-      boxShadow: {
-        "custom-shadow-2xs": "var(--color-shadow-2xs)",
-        "custom-shadow-xs": "var(--color-shadow-xs)",
-        "custom-shadow-sm": "var(--color-shadow-sm)",
-        "custom-shadow-rg": "var(--color-shadow-rg)",
-        "custom-shadow-md": "var(--color-shadow-md)",
-        "custom-shadow-lg": "var(--color-shadow-lg)",
-        "custom-shadow-xl": "var(--color-shadow-xl)",
-        "custom-shadow-2xl": "var(--color-shadow-2xl)",
-        "custom-shadow-3xl": "var(--color-shadow-3xl)",
-        "custom-shadow-4xl": "var(--color-shadow-4xl)",
-        "custom-sidebar-shadow-2xs": "var(--color-sidebar-shadow-2xs)",
-        "custom-sidebar-shadow-xs": "var(--color-sidebar-shadow-xs)",
-        "custom-sidebar-shadow-sm": "var(--color-sidebar-shadow-sm)",
-        "custom-sidebar-shadow-rg": "var(--color-sidebar-shadow-rg)",
-        "custom-sidebar-shadow-md": "var(--color-sidebar-shadow-md)",
-        "custom-sidebar-shadow-lg": "var(--color-sidebar-shadow-lg)",
-        "custom-sidebar-shadow-xl": "var(--color-sidebar-shadow-xl)",
-        "custom-sidebar-shadow-2xl": "var(--color-sidebar-shadow-2xl)",
-        "custom-sidebar-shadow-3xl": "var(--color-sidebar-shadow-3xl)",
-        "custom-sidebar-shadow-4xl": "var(--color-sidebar-shadow-4xl)",
-        "onboarding-shadow-sm": "var(--color-onboarding-shadow-sm)",
-      },
-      colors: {
-        custom: {
-          primary: {
-            0: "rgb(255, 255, 255)",
-            10: convertToRGB("--color-primary-10"),
-            20: convertToRGB("--color-primary-20"),
-            30: convertToRGB("--color-primary-30"),
-            40: convertToRGB("--color-primary-40"),
-            50: convertToRGB("--color-primary-50"),
-            60: convertToRGB("--color-primary-60"),
-            70: convertToRGB("--color-primary-70"),
-            80: convertToRGB("--color-primary-80"),
-            90: convertToRGB("--color-primary-90"),
-            100: convertToRGB("--color-primary-100"),
-            200: convertToRGB("--color-primary-200"),
-            300: convertToRGB("--color-primary-300"),
-            400: convertToRGB("--color-primary-400"),
-            500: convertToRGB("--color-primary-500"),
-            600: convertToRGB("--color-primary-600"),
-            700: convertToRGB("--color-primary-700"),
-            800: convertToRGB("--color-primary-800"),
-            900: convertToRGB("--color-primary-900"),
-            1000: "rgb(0, 0, 0)",
-            DEFAULT: convertToRGB("--color-primary-100"),
-          },
-          background: {
-            0: "rgb(255, 255, 255)",
-            10: convertToRGB("--color-background-10"),
-            20: convertToRGB("--color-background-20"),
-            30: convertToRGB("--color-background-30"),
-            40: convertToRGB("--color-background-40"),
-            50: convertToRGB("--color-background-50"),
-            60: convertToRGB("--color-background-60"),
-            70: convertToRGB("--color-background-70"),
-            80: convertToRGB("--color-background-80"),
-            90: convertToRGB("--color-background-90"),
-            100: convertToRGB("--color-background-100"),
-            200: convertToRGB("--color-background-200"),
-            300: convertToRGB("--color-background-300"),
-            400: convertToRGB("--color-background-400"),
-            500: convertToRGB("--color-background-500"),
-            600: convertToRGB("--color-background-600"),
-            700: convertToRGB("--color-background-700"),
-            800: convertToRGB("--color-background-800"),
-            900: convertToRGB("--color-background-900"),
-            1000: "rgb(0, 0, 0)",
-            DEFAULT: convertToRGB("--color-background-100"),
-          },
-          text: {
-            0: "rgb(255, 255, 255)",
-            10: convertToRGB("--color-text-10"),
-            20: convertToRGB("--color-text-20"),
-            30: convertToRGB("--color-text-30"),
-            40: convertToRGB("--color-text-40"),
-            50: convertToRGB("--color-text-50"),
-            60: convertToRGB("--color-text-60"),
-            70: convertToRGB("--color-text-70"),
-            80: convertToRGB("--color-text-80"),
-            90: convertToRGB("--color-text-90"),
-            100: convertToRGB("--color-text-100"),
-            200: convertToRGB("--color-text-200"),
-            300: convertToRGB("--color-text-300"),
-            400: convertToRGB("--color-text-400"),
-            500: convertToRGB("--color-text-500"),
-            600: convertToRGB("--color-text-600"),
-            700: convertToRGB("--color-text-700"),
-            800: convertToRGB("--color-text-800"),
-            900: convertToRGB("--color-text-900"),
-            1000: "rgb(0, 0, 0)",
-            DEFAULT: convertToRGB("--color-text-100"),
-          },
-          border: {
-            0: "rgb(255, 255, 255)",
-            100: convertToRGB("--color-border-100"),
-            200: convertToRGB("--color-border-200"),
-            300: convertToRGB("--color-border-300"),
-            400: convertToRGB("--color-border-400"),
-            1000: "rgb(0, 0, 0)",
-            DEFAULT: convertToRGB("--color-border-200"),
-          },
-          sidebar: {
-            background: {
-              0: "rgb(255, 255, 255)",
-              10: convertToRGB("--color-sidebar-background-10"),
-              20: convertToRGB("--color-sidebar-background-20"),
-              30: convertToRGB("--color-sidebar-background-30"),
-              40: convertToRGB("--color-sidebar-background-40"),
-              50: convertToRGB("--color-sidebar-background-50"),
-              60: convertToRGB("--color-sidebar-background-60"),
-              70: convertToRGB("--color-sidebar-background-70"),
-              80: convertToRGB("--color-sidebar-background-80"),
-              90: convertToRGB("--color-sidebar-background-90"),
-              100: convertToRGB("--color-sidebar-background-100"),
-              200: convertToRGB("--color-sidebar-background-200"),
-              300: convertToRGB("--color-sidebar-background-300"),
-              400: convertToRGB("--color-sidebar-background-400"),
-              500: convertToRGB("--color-sidebar-background-500"),
-              600: convertToRGB("--color-sidebar-background-600"),
-              700: convertToRGB("--color-sidebar-background-700"),
-              800: convertToRGB("--color-sidebar-background-800"),
-              900: convertToRGB("--color-sidebar-background-900"),
-              1000: "rgb(0, 0, 0)",
-              DEFAULT: convertToRGB("--color-sidebar-background-100"),
-            },
-            text: {
-              0: "rgb(255, 255, 255)",
-              10: convertToRGB("--color-sidebar-text-10"),
-              20: convertToRGB("--color-sidebar-text-20"),
-              30: convertToRGB("--color-sidebar-text-30"),
-              40: convertToRGB("--color-sidebar-text-40"),
-              50: convertToRGB("--color-sidebar-text-50"),
-              60: convertToRGB("--color-sidebar-text-60"),
-              70: convertToRGB("--color-sidebar-text-70"),
-              80: convertToRGB("--color-sidebar-text-80"),
-              90: convertToRGB("--color-sidebar-text-90"),
-              100: convertToRGB("--color-sidebar-text-100"),
-              200: convertToRGB("--color-sidebar-text-200"),
-              300: convertToRGB("--color-sidebar-text-300"),
-              400: convertToRGB("--color-sidebar-text-400"),
-              500: convertToRGB("--color-sidebar-text-500"),
-              600: convertToRGB("--color-sidebar-text-600"),
-              700: convertToRGB("--color-sidebar-text-700"),
-              800: convertToRGB("--color-sidebar-text-800"),
-              900: convertToRGB("--color-sidebar-text-900"),
-              1000: "rgb(0, 0, 0)",
-              DEFAULT: convertToRGB("--color-sidebar-text-100"),
-            },
-            border: {
-              0: "rgb(255, 255, 255)",
-              100: convertToRGB("--color-sidebar-border-100"),
-              200: convertToRGB("--color-sidebar-border-200"),
-              300: convertToRGB("--color-sidebar-border-300"),
-              400: convertToRGB("--color-sidebar-border-400"),
-              1000: "rgb(0, 0, 0)",
-              DEFAULT: convertToRGB("--color-sidebar-border-200"),
-            },
-          },
-          backdrop: "rgba(0, 0, 0, 0.25)",
-        },
-        onboarding: {
-          background: {
-            100: convertToRGB("--color-onboarding-background-100"),
-            200: convertToRGB("--color-onboarding-background-200"),
-            300: convertToRGB("--color-onboarding-background-300"),
-            400: convertToRGB("--color-onboarding-background-400"),
-          },
-          text: {
-            100: convertToRGB("--color-onboarding-text-100"),
-            200: convertToRGB("--color-onboarding-text-200"),
-            300: convertToRGB("--color-onboarding-text-300"),
-            400: convertToRGB("--color-onboarding-text-400"),
-          },
-          border: {
-            100: convertToRGB("--color-onboarding-border-100"),
-            200: convertToRGB("--color-onboarding-border-200"),
-            300: convertToRGB("--color-onboarding-border-300"),
-          },
-        },
-      },
-      keyframes: {
-        leftToaster: {
-          "0%": { left: "-20rem" },
-          "100%": { left: "0" },
-        },
-        rightToaster: {
-          "0%": { right: "-20rem" },
-          "100%": { right: "0" },
-        },
-        "bar-loader": {
-          from: { left: "-100%" },
-          to: { left: "100%" },
-        },
-      },
-      typography: () => ({
-        brand: {
-          css: {
-            "--tw-prose-body": convertToRGB("--color-text-100"),
-            "--tw-prose-p": convertToRGB("--color-text-100"),
-            "--tw-prose-headings": convertToRGB("--color-text-100"),
-            "--tw-prose-lead": convertToRGB("--color-text-100"),
-            "--tw-prose-links": convertToRGB("--color-primary-100"),
-            "--tw-prose-bold": convertToRGB("--color-text-100"),
-            "--tw-prose-counters": convertToRGB("--color-text-100"),
-            "--tw-prose-bullets": convertToRGB("--color-text-100"),
-            "--tw-prose-hr": convertToRGB("--color-text-100"),
-            "--tw-prose-quotes": convertToRGB("--color-text-100"),
-            "--tw-prose-quote-borders": convertToRGB("--color-border-200"),
-            "--tw-prose-code": convertToRGB("--color-text-100"),
-            "--tw-prose-pre-code": convertToRGB("--color-text-100"),
-            "--tw-prose-pre-bg": convertToRGB("--color-background-100"),
-            "--tw-prose-th-borders": convertToRGB("--color-border-200"),
-            "--tw-prose-td-borders": convertToRGB("--color-border-200"),
-          },
-        },
-      }),
-      screens: {
-        "3xl": "1792px",
-      },
-      // scale down font sizes to 90% of default
-      fontSize: {
-        xs: "0.675rem",
-        sm: "0.7875rem",
-        base: "0.9rem",
-        lg: "1.0125rem",
-        xl: "1.125rem",
-        "2xl": "1.35rem",
-        "3xl": "1.6875rem",
-        "4xl": "2.25rem",
-        "5xl": "2.7rem",
-        "6xl": "3.375rem",
-        "7xl": "4.05rem",
-        "8xl": "5.4rem",
-        "9xl": "7.2rem",
-      },
-      // scale down spacing to 90% of default
-      padding: {
-        0: "0",
-        0.5: "0.1125rem",
-        1: "0.225rem",
-        1.5: "0.3375rem",
-        2: "0.45rem",
-        2.5: "0.5625rem",
-        3: "0.675rem",
-        3.5: "0.7875rem",
-        4: "0.9rem",
-        5: "1.125rem",
-        6: "1.35rem",
-        7: "1.575rem",
-        8: "1.8rem",
-        9: "2.025rem",
-        10: "2.25rem",
-        11: "2.475rem",
-        12: "2.7rem",
-        16: "3.6rem",
-        20: "4.5rem",
-        24: "5.4rem",
-        32: "7.2rem",
-        40: "9rem",
-        48: "10.8rem",
-        56: "12.6rem",
-        64: "14.4rem",
-        72: "16.2rem",
-        80: "18rem",
-        96: "21.6rem",
-      },
-      margin: {
-        0: "0",
-        0.5: "0.1125rem",
-        1: "0.225rem",
-        1.5: "0.3375rem",
-        2: "0.45rem",
-        2.5: "0.5625rem",
-        3: "0.675rem",
-        3.5: "0.7875rem",
-        4: "0.9rem",
-        5: "1.125rem",
-        6: "1.35rem",
-        7: "1.575rem",
-        8: "1.8rem",
-        9: "2.025rem",
-        10: "2.25rem",
-        11: "2.475rem",
-        12: "2.7rem",
-        16: "3.6rem",
-        20: "4.5rem",
-        24: "5.4rem",
-        32: "7.2rem",
-        40: "9rem",
-        48: "10.8rem",
-        56: "12.6rem",
-        64: "14.4rem",
-        72: "16.2rem",
-        80: "18rem",
-        96: "21.6rem",
-      },
-      space: {
-        0: "0",
-        0.5: "0.1125rem",
-        1: "0.225rem",
-        1.5: "0.3375rem",
-        2: "0.45rem",
-        2.5: "0.5625rem",
-        3: "0.675rem",
-        3.5: "0.7875rem",
-        4: "0.9rem",
-        5: "1.125rem",
-        6: "1.35rem",
-        7: "1.575rem",
-        8: "1.8rem",
-        9: "2.025rem",
-        10: "2.25rem",
-        11: "2.475rem",
-        12: "2.7rem",
-        16: "3.6rem",
-        20: "4.5rem",
-        24: "5.4rem",
-        32: "7.2rem",
-        40: "9rem",
-        48: "10.8rem",
-        56: "12.6rem",
-        64: "14.4rem",
-        72: "16.2rem",
-        80: "18rem",
-        96: "21.6rem",
-      },
-      gap: {
-        0: "0",
-        0.5: "0.1125rem",
-        1: "0.225rem",
-        1.5: "0.3375rem",
-        2: "0.45rem",
-        2.5: "0.5625rem",
-        3: "0.675rem",
-        3.5: "0.7875rem",
-        4: "0.9rem",
-        5: "1.125rem",
-        6: "1.35rem",
-        7: "1.575rem",
-        8: "1.8rem",
-        9: "2.025rem",
-        10: "2.25rem",
-        11: "2.475rem",
-        12: "2.7rem",
-        16: "3.6rem",
-        20: "4.5rem",
-        24: "5.4rem",
-        32: "7.2rem",
-        40: "9rem",
-        48: "10.8rem",
-        56: "12.6rem",
-        64: "14.4rem",
-        72: "16.2rem",
-        80: "18rem",
-        96: "21.6rem",
-      },
-      backgroundImage: {
-        "onboarding-gradient-100": "var( --gradient-onboarding-100)",
-        "onboarding-gradient-200": "var( --gradient-onboarding-200)",
-        "onboarding-gradient-300": "var( --gradient-onboarding-300)",
-      },
-    },
-    fontFamily: {
-      custom: ["Inter", "sans-serif"],
-    },
-  },
-  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
+export const darkMode = "class";
+export const content = {
+  relative: true,
+  files: [
+    "./components/**/*.tsx",
+    "./constants/**/*.{js,ts,jsx,tsx}",
+    "./layouts/**/*.tsx",
+    "./pages/**/*.tsx",
+    "./ui/**/*.tsx",
+    "../packages/ui/**/*.{js,ts,jsx,tsx}",
+    "../packages/editor/**/src/**/*.{js,ts,jsx,tsx}",
+  ],
 };
+export const theme = {
+  boxShadow: {
+    "custom-shadow-2xs": "var(--color-shadow-2xs)",
+    "custom-shadow-xs": "var(--color-shadow-xs)",
+    "custom-shadow-sm": "var(--color-shadow-sm)",
+    "custom-shadow-rg": "var(--color-shadow-rg)",
+    "custom-shadow-md": "var(--color-shadow-md)",
+    "custom-shadow-lg": "var(--color-shadow-lg)",
+    "custom-shadow-xl": "var(--color-shadow-xl)",
+    "custom-shadow-2xl": "var(--color-shadow-2xl)",
+    "custom-shadow-3xl": "var(--color-shadow-3xl)",
+    "custom-shadow-4xl": "var(--color-shadow-4xl)",
+    "custom-sidebar-shadow-2xs": "var(--color-sidebar-shadow-2xs)",
+    "custom-sidebar-shadow-xs": "var(--color-sidebar-shadow-xs)",
+    "custom-sidebar-shadow-sm": "var(--color-sidebar-shadow-sm)",
+    "custom-sidebar-shadow-rg": "var(--color-sidebar-shadow-rg)",
+    "custom-sidebar-shadow-md": "var(--color-sidebar-shadow-md)",
+    "custom-sidebar-shadow-lg": "var(--color-sidebar-shadow-lg)",
+    "custom-sidebar-shadow-xl": "var(--color-sidebar-shadow-xl)",
+    "custom-sidebar-shadow-2xl": "var(--color-sidebar-shadow-2xl)",
+    "custom-sidebar-shadow-3xl": "var(--color-sidebar-shadow-3xl)",
+    "custom-sidebar-shadow-4xl": "var(--color-sidebar-shadow-4xl)",
+    "onboarding-shadow-sm": "var(--color-onboarding-shadow-sm)",
+  },
+  colors: {
+    inherit: colors.inherit,
+    current: colors.current,
+    transparent: colors.transparent,
+    black: colors.black,
+    white: colors.white,
+    primary: generateColorShades("primary"),
+    neutral: generateColorShades("neutral"),
+    success: generateColorShades("success"),
+    warning: generateColorShades("warning"),
+    danger: generateColorShades("danger"),
+    info: generateColorShades("info"),
+    orange: generateSaturatedColorShades("orange"),
+    pink: generateSaturatedColorShades("pink"),
+    purple: generateSaturatedColorShades("purple"),
+    violet: generateSaturatedColorShades("violet"),
+    sidebar: {
+      neutral: generateSidebarColorShades("neutral"),
+    },
+  },
+  extend: {
+    keyframes: {
+      "bar-loader": {
+        from: { left: "-100%" },
+        to: { left: "100%" },
+      },
+    },
+    typography: () => ({
+      brand: {
+        css: {
+          "--tw-prose-body": "--color-neutral-120",
+          "--tw-prose-p": "--color-neutral-120",
+          "--tw-prose-headings": "--color-neutral-120",
+          "--tw-prose-lead": "--color-neutral-120",
+          "--tw-prose-links": "--color-primary-90",
+          "--tw-prose-bold": "--color-neutral-120",
+          "--tw-prose-counters": "--color-neutral-120",
+          "--tw-prose-bullets": "--color-neutral-120",
+          "--tw-prose-hr": "--color-neutral-120",
+          "--tw-prose-quotes": "--color-neutral-120",
+          "--tw-prose-quote-borders": "--color-neutral-70",
+          "--tw-prose-code": "--color-neutral-120",
+          "--tw-prose-pre-code": "--color-neutral-120",
+          "--tw-prose-pre-bg": "--color-neutral-30",
+          "--tw-prose-th-borders": "--color-neutral-70",
+          "--tw-prose-td-borders": "--color-neutral-70",
+        },
+      },
+    }),
+    screens: {
+      "3xl": "1792px",
+    },
+    // scale down font sizes to 90% of default
+    fontSize: {
+      xs: "0.675rem",
+      sm: "0.7875rem",
+      base: "0.9rem",
+      lg: "1.0125rem",
+      xl: "1.125rem",
+      "2xl": "1.35rem",
+      "3xl": "1.6875rem",
+      "4xl": "2.25rem",
+      "5xl": "2.7rem",
+      "6xl": "3.375rem",
+      "7xl": "4.05rem",
+      "8xl": "5.4rem",
+      "9xl": "7.2rem",
+    },
+    // scale down spacing to 90% of default
+    padding: SPACING_SCALE,
+    margin: SPACING_SCALE,
+    space: SPACING_SCALE,
+    gap: SPACING_SCALE,
+    backgroundImage: {
+      "onboarding-gradient-100": "var( --gradient-onboarding-100)",
+      "onboarding-gradient-200": "var( --gradient-onboarding-200)",
+      "onboarding-gradient-300": "var( --gradient-onboarding-300)",
+    },
+  },
+  fontFamily: {
+    custom: ["Inter", "sans-serif"],
+  },
+};
+
+export const plugins = [
+  require("tailwindcss-animate"),
+  require("@tailwindcss/typography"),
+];
--- a/packages/ui/src/avatar/avatar-group.tsx
+++ b/packages/ui/src/avatar/avatar-group.tsx
@@ -66,7 +66,7 @@ export const AvatarGroup: React.FC<Props> = (props) => {
          <div
            className={`${
              !isAValidNumber(size) ? sizeInfo.avatarSize : ""
-            } grid place-items-center rounded-full bg-custom-primary-10 text-[9px] text-custom-primary-100 ring-1 ring-custom-background-100`}
+            } grid place-items-center rounded-full bg-custom-primary-10 text-[9px] text-primary-text-subtle ring-1 ring-custom-background-100`}
            style={
              isAValidNumber(size)
                ? {
--- a/packages/ui/src/avatar/avatar.tsx
+++ b/packages/ui/src/avatar/avatar.tsx
@@ -151,7 +151,7 @@ export const Avatar: React.FC<Props> = (props) => {
              shape
            )} ${className}`}
            style={{
-              backgroundColor: fallbackBackgroundColor ?? "rgba(var(--color-primary-500))",
+              backgroundColor: fallbackBackgroundColor ?? "var(--color-primary-90)",
              color: fallbackTextColor ?? "#ffffff",
            }}
          >
--- a/packages/ui/src/badge/helper.tsx
+++ b/packages/ui/src/badge/helper.tsx
@@ -41,39 +41,39 @@ enum badgeIconStyling {

 export const badgeStyling: IBadgeStyling = {
  primary: {
-    default: `text-white bg-custom-primary-100`,
+    default: `text-white bg-primary-solid`,
    hover: `hover:bg-custom-primary-200`,
    disabled: `cursor-not-allowed !bg-custom-primary-60 hover:bg-custom-primary-60`,
  },
  "accent-primary": {
-    default: `bg-custom-primary-10 text-custom-primary-100`,
+    default: `bg-custom-primary-10 text-primary-text-subtle`,
    hover: `hover:bg-custom-primary-20 hover:text-custom-primary-200`,
    disabled: `cursor-not-allowed !text-custom-primary-60`,
  },
  "outline-primary": {
-    default: `text-custom-primary-100 bg-custom-background-100 border border-custom-primary-100`,
+    default: `text-primary-text-subtle bg-neutral-component-surface-light border border-custom-primary-100`,
    hover: `hover:border-custom-primary-80 hover:bg-custom-primary-10`,
    disabled: `cursor-not-allowed !text-custom-primary-60 !border-custom-primary-60 `,
  },

  neutral: {
-    default: `text-custom-background-100 bg-custom-text-100 border border-custom-border-200`,
+    default: `text-custom-background-100 bg-custom-text-100 border border-neutral-border-medium`,
    hover: `hover:bg-custom-text-200`,
-    disabled: `cursor-not-allowed bg-custom-border-200 !text-custom-text-400`,
+    disabled: `cursor-not-allowed bg-custom-border-200 !text-neutral-text-subtle`,
  },
  "accent-neutral": {
-    default: `text-custom-text-200 bg-custom-background-80`,
-    hover: `hover:bg-custom-border-200 hover:text-custom-text-100`,
-    disabled: `cursor-not-allowed !text-custom-text-400`,
+    default: `text-neutral-text-medium bg-neutral-component-surface-dark`,
+    hover: `hover:bg-custom-border-200 hover:text-neutral-text-strong`,
+    disabled: `cursor-not-allowed !text-neutral-text-subtle`,
  },
  "outline-neutral": {
-    default: `text-custom-text-200 bg-custom-background-100 border border-custom-border-200`,
-    hover: `hover:text-custom-text-100 hover:bg-custom-border-200`,
-    disabled: `cursor-not-allowed !text-custom-text-400`,
+    default: `text-neutral-text-medium bg-neutral-component-surface-light border border-neutral-border-medium`,
+    hover: `hover:text-neutral-text-strong hover:bg-custom-border-200`,
+    disabled: `cursor-not-allowed !text-neutral-text-subtle`,
  },

  success: {
-    default: `text-white bg-green-500`,
+    default: `text-white bg-success-solid`,
    hover: `hover:bg-green-600`,
    disabled: `cursor-not-allowed !bg-green-300`,
  },
@@ -83,7 +83,7 @@ export const badgeStyling: IBadgeStyling = {
    disabled: `cursor-not-allowed !text-green-300`,
  },
  "outline-success": {
-    default: `text-green-500 bg-custom-background-100 border border-green-500`,
+    default: `text-green-500 bg-neutral-component-surface-light border border-green-500`,
    hover: `hover:text-green-600 hover:bg-green-50`,
    disabled: `cursor-not-allowed !text-green-300 border-green-300`,
  },
@@ -99,7 +99,7 @@ export const badgeStyling: IBadgeStyling = {
    disabled: `cursor-not-allowed !text-amber-300`,
  },
  "outline-warning": {
-    default: `text-amber-500 bg-custom-background-100 border border-amber-500`,
+    default: `text-amber-500 bg-neutral-component-surface-light border border-amber-500`,
    hover: `hover:text-amber-600 hover:bg-amber-50`,
    disabled: `cursor-not-allowed !text-amber-300 border-amber-300`,
  },
@@ -110,13 +110,13 @@ export const badgeStyling: IBadgeStyling = {
    disabled: `cursor-not-allowed !bg-red-300`,
  },
  "accent-destructive": {
-    default: `text-red-500 bg-red-50`,
-    hover: `hover:bg-red-100 hover:text-red-600`,
+    default: `text-danger-text-medium bg-red-50`,
+    hover: `hover:bg-red-100 hover:text-danger-text-medium`,
    disabled: `cursor-not-allowed !text-red-300`,
  },
  "outline-destructive": {
-    default: `text-red-500 bg-custom-background-100 border border-red-500`,
-    hover: `hover:text-red-600 hover:bg-red-50`,
+    default: `text-danger-text-medium bg-neutral-component-surface-light border border-red-500`,
+    hover: `hover:text-danger-text-medium hover:bg-red-50`,
    disabled: `cursor-not-allowed !text-red-300 border-red-300`,
  },
 };
--- a/packages/ui/src/breadcrumbs/breadcrumbs.tsx
+++ b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
@@ -29,13 +29,10 @@ const Breadcrumbs = ({ children, onBack }: BreadcrumbsProps) => {
            <React.Fragment key={index}>
              {index > 0 && !isSmallScreen && (
                <div className="flex items-center gap-2.5">
-                  <ChevronRight
-                    className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400"
-                    aria-hidden="true"
-                  />
+                  <ChevronRight className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400" aria-hidden="true" />
                </div>
              )}
-              <div className={`flex items-center gap-2.5 ${isSmallScreen && index > 0 ? 'hidden sm:flex' : 'flex'}`}>
+              <div className={`flex items-center gap-2.5 ${isSmallScreen && index > 0 ? "hidden sm:flex" : "flex"}`}>
                {child}
              </div>
            </React.Fragment>
@@ -46,7 +43,11 @@ const Breadcrumbs = ({ children, onBack }: BreadcrumbsProps) => {
      {isSmallScreen && childrenArray.length > 1 && (
        <>
          <div className="flex items-center gap-2.5">
-            {onBack && <span onClick={onBack} className="text-custom-text-200">...</span>}
+            {onBack && (
+              <span onClick={onBack} className="text-custom-text-200">
+                ...
+              </span>
+            )}
            <ChevronRight className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400" aria-hidden="true" />
          </div>
          <div className="flex items-center gap-2.5">{childrenArray[childrenArray.length - 1]}</div>
@@ -70,4 +71,4 @@ const BreadcrumbItem: React.FC<Props> = (props) => {

 Breadcrumbs.BreadcrumbItem = BreadcrumbItem;

-export { Breadcrumbs, BreadcrumbItem };
+export { Breadcrumbs, BreadcrumbItem };
--- a/packages/ui/src/button/button.tsx
+++ b/packages/ui/src/button/button.tsx
@@ -32,7 +32,13 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
  const buttonIconStyle = getIconStyling(size);

  return (
-    <button ref={ref} type={type} className={cn(buttonStyle, className)} disabled={disabled || loading} {...rest}>
+    <button
+      ref={ref}
+      type={type}
+      className={cn("outline-none", buttonStyle, className)}
+      disabled={disabled || loading}
+      {...rest}
+    >
      {prependIcon && <div className={buttonIconStyle}>{React.cloneElement(prependIcon, { strokeWidth: 2 })}</div>}
      {children}
      {appendIcon && <div className={buttonIconStyle}>{React.cloneElement(appendIcon, { strokeWidth: 2 })}</div>}
--- a/packages/ui/src/button/helper.tsx
+++ b/packages/ui/src/button/helper.tsx
@@ -1,25 +1,24 @@
 export type TButtonVariant =
  | "primary"
-  | "accent-primary"
+  | "surface-primary"
  | "outline-primary"
-  | "neutral-primary"
-  | "link-primary"
-  | "danger"
-  | "accent-danger"
-  | "outline-danger"
-  | "link-danger"
-  | "tertiary-danger";
+  | "text-primary"
+  | "surface-neutral"
+  | "outline-neutral"
+  | "text-neutral"
+  | "warning"
+  | "danger";

 export type TButtonSizes = "sm" | "md" | "lg" | "xl";

-export interface IButtonStyling {
-  [key: string]: {
+export type TButtonStyling = {
+  [key in TButtonVariant]: {
    default: string;
    hover: string;
    pressed: string;
    disabled: string;
  };
-}
+};

 enum buttonSizeStyling {
  sm = `px-3 py-1.5 font-medium text-xs rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center`,
@@ -35,67 +34,60 @@ enum buttonIconStyling {
  xl = "h-4 w-4 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0",
 }

-export const buttonStyling: IButtonStyling = {
+export const buttonStyling: TButtonStyling = {
  primary: {
-    default: `text-white bg-custom-primary-100`,
-    hover: `hover:bg-custom-primary-200`,
-    pressed: `focus:text-custom-brand-40 focus:bg-custom-primary-200`,
-    disabled: `cursor-not-allowed !bg-custom-primary-60 hover:bg-custom-primary-60`,
+    default: `text-white bg-primary-solid`,
+    hover: `hover:bg-primary-solid-hover`,
+    pressed: `focus:bg-primary-solid-hover focus:ring-2 focus:ring-primary-border-medium`,
+    disabled: `cursor-not-allowed bg-neutral-component-surface-dark text-neutral-text-subtle`,
  },
-  "accent-primary": {
-    default: `bg-custom-primary-10 text-custom-primary-100`,
-    hover: `hover:bg-custom-primary-20 hover:text-custom-primary-200`,
-    pressed: `focus:bg-custom-primary-20`,
-    disabled: `cursor-not-allowed !text-custom-primary-60`,
+  "surface-primary": {
+    default: `bg-primary-component-surface-light text-primary-text-subtle`,
+    hover: `hover:bg-primary-component-surface-medium`,
+    pressed: `focus:bg-primary-component-surface-dark focus:ring-2 focus:ring-primary-border-medium focus:text-neutral-text-medium`,
+    disabled: `cursor-not-allowed bg-neutral-component-surface-dark text-neutral-text-subtle`,
  },
  "outline-primary": {
-    default: `text-custom-primary-100 bg-transparent border border-custom-primary-100`,
-    hover: `hover:bg-custom-primary-100/20`,
-    pressed: `focus:text-custom-primary-100 focus:bg-custom-primary-100/30`,
-    disabled: `cursor-not-allowed !text-custom-primary-60 !border-custom-primary-60 `,
+    default: `text-primary-text-subtle bg-transparent border border-primary-border-subtle`,
+    hover: `hover:bg-primary-component-surface-medium hover:border-primary-border-medium`,
+    pressed: `focus:bg-primary-component-surface-dark focus:ring-1 focus:ring-primary-border-medium`,
+    disabled: `cursor-not-allowed border-transparent bg-neutral-component-surface-dark text-neutral-text-subtle`,
  },
-  "neutral-primary": {
-    default: `text-custom-text-200 bg-custom-background-100 border border-custom-border-200`,
-    hover: `hover:bg-custom-background-90`,
-    pressed: `focus:text-custom-text-300 focus:bg-custom-background-90`,
-    disabled: `cursor-not-allowed !text-custom-text-400`,
+  "text-primary": {
+    default: `text-primary-text-subtle bg-transparent`,
+    hover: `hover:bg-primary-component-surface-light`,
+    pressed: `focus:bg-primary-component-surface-medium`,
+    disabled: `cursor-not-allowed bg-neutral-component-surface-dark text-neutral-text-subtle`,
  },
-  "link-primary": {
-    default: `text-custom-primary-100 bg-custom-background-100`,
-    hover: `hover:text-custom-primary-200`,
-    pressed: `focus:text-custom-primary-80 `,
-    disabled: `cursor-not-allowed !text-custom-primary-60`,
+  "surface-neutral": {
+    default: `bg-neutral-component-surface-light text-neutral-text-subtle`,
+    hover: `hover:bg-neutral-component-surface-medium`,
+    pressed: `focus:bg-neutral-component-surface-dark focus:ring-2 focus:ring-neutral-border-medium focus:text-neutral-text-medium`,
+    disabled: `cursor-not-allowed bg-neutral-component-surface-dark text-neutral-text-subtle`,
+  },
+  "outline-neutral": {
+    default: `text-neutral-text-subtle bg-transparent border border-neutral-border-subtle`,
+    hover: `hover:bg-neutral-component-surface-medium hover:border-neutral-border-medium`,
+    pressed: `focus:bg-neutral-component-surface-dark focus:ring-1 focus:ring-neutral-border-medium`,
+    disabled: `cursor-not-allowed border-transparent bg-neutral-component-surface-dark text-neutral-text-subtle`,
+  },
+  "text-neutral": {
+    default: `text-neutral-text-subtle bg-transparent`,
+    hover: `hover:bg-neutral-component-surface-light`,
+    pressed: `focus:bg-neutral-component-surface-medium`,
+    disabled: `cursor-not-allowed bg-neutral-component-surface-dark text-neutral-text-subtle`,
+  },
+  warning: {
+    default: `text-white bg-warning-solid`,
+    hover: `hover:bg-warning-solid-hover`,
+    pressed: `focus:bg-warning-solid-hover focus:ring-2 focus:ring-warning-border-medium`,
+    disabled: `cursor-not-allowed bg-neutral-component-surface-dark text-neutral-text-subtle`,
  },
-
  danger: {
-    default: `text-white bg-red-500`,
-    hover: ` hover:bg-red-600`,
-    pressed: `focus:text-red-200 focus:bg-red-600`,
-    disabled: `cursor-not-allowed !bg-red-300`,
-  },
-  "accent-danger": {
-    default: `text-red-500 bg-red-50`,
-    hover: `hover:text-red-600 hover:bg-red-100`,
-    pressed: `focus:text-red-500 focus:bg-red-100`,
-    disabled: `cursor-not-allowed !text-red-300`,
-  },
-  "outline-danger": {
-    default: `text-red-500 bg-transparent border border-red-500`,
-    hover: `hover:text-red-400 hover:border-red-400`,
-    pressed: `focus:text-red-400 focus:border-red-400`,
-    disabled: `cursor-not-allowed !text-red-300 !border-red-300`,
-  },
-  "link-danger": {
-    default: `text-red-500 bg-custom-background-100`,
-    hover: `hover:text-red-400`,
-    pressed: `focus:text-red-400`,
-    disabled: `cursor-not-allowed !text-red-300`,
-  },
-  "tertiary-danger": {
-    default: `text-red-500 bg-custom-background-100 border border-red-200`,
-    hover: `hover:bg-red-50 hover:border-red-300`,
-    pressed: `focus:text-red-400`,
-    disabled: `cursor-not-allowed !text-red-300`,
+    default: `text-white bg-danger-solid`,
+    hover: ` hover:bg-danger-solid-hover`,
+    pressed: `focus:bg-danger-solid-hover focus:ring-2 focus:ring-danger-border-medium`,
+    disabled: `cursor-not-allowed bg-neutral-component-surface-dark text-neutral-text-subtle`,
  },
 };

--- a/packages/ui/src/button/toggle-switch.tsx
+++ b/packages/ui/src/button/toggle-switch.tsx
@@ -21,8 +21,8 @@ const ToggleSwitch: React.FC<IToggleSwitchProps> = (props) => {
      onChange={onChange}
      className={`relative inline-flex flex-shrink-0 ${
        size === "sm" ? "h-4 w-6" : size === "md" ? "h-5 w-8" : "h-6 w-10"
-      } flex-shrink-0 cursor-pointer rounded-full border border-custom-border-200 transition-colors duration-200 ease-in-out focus:outline-none ${
-        value ? "bg-custom-primary-100" : "bg-gray-700"
+      } flex-shrink-0 cursor-pointer rounded-full border border-neutral-border-medium transition-colors duration-200 ease-in-out focus:outline-none ${
+        value ? "bg-primary-solid" : "bg-primary-solid"
      } ${className || ""} ${disabled ? "cursor-not-allowed" : ""}`}
    >
      <span className="sr-only">{label}</span>
@@ -33,7 +33,7 @@ const ToggleSwitch: React.FC<IToggleSwitchProps> = (props) => {
        } transform rounded-full shadow ring-0 transition duration-200 ease-in-out ${
          value
            ? (size === "sm" ? "translate-x-3" : size === "md" ? "translate-x-4" : "translate-x-5") + " bg-white"
-            : "translate-x-0.5 bg-custom-background-90"
+            : "translate-x-0.5 bg-neutral-component-surface-medium"
        } ${disabled ? "cursor-not-allowed" : ""}`}
      />
    </Switch>
--- a/packages/ui/src/dropdowns/custom-menu.tsx
+++ b/packages/ui/src/dropdowns/custom-menu.tsx
@@ -73,7 +73,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
    <Menu.Items className="fixed z-10" static>
      <div
        className={cn(
-          "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
+          "my-1 overflow-y-scroll rounded-md border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-light px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
          {
            "max-h-60": maxHeight === "lg",
            "max-h-48": maxHeight === "md",
@@ -135,8 +135,8 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
                      if (menuButtonOnClick) menuButtonOnClick();
                    }}
                    disabled={disabled}
-                    className={`relative grid place-items-center rounded p-1 text-custom-text-200 outline-none hover:text-custom-text-100 ${
-                      disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
+                    className={`relative grid place-items-center rounded p-1 text-neutral-text-medium outline-none hover:text-neutral-text-strong ${
+                      disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-neutral-component-surface-dark"
                    } ${buttonClassName}`}
                    tabIndex={customButtonTabIndex}
                  >
@@ -149,11 +149,11 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
                    ref={setReferenceElement}
                    type="button"
                    className={`flex items-center justify-between gap-1 whitespace-nowrap rounded-md px-2.5 py-1 text-xs duration-300 ${
-                      open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
-                    } ${noBorder ? "" : "border border-custom-border-300 shadow-sm focus:outline-none"} ${
+                      open ? "bg-neutral-component-surface-medium text-neutral-text-strong" : "text-neutral-text-medium"
+                    } ${noBorder ? "" : "border border-neutral-border-medium shadow-sm focus:outline-none"} ${
                      disabled
-                        ? "cursor-not-allowed text-custom-text-200"
-                        : "cursor-pointer hover:bg-custom-background-80"
+                        ? "cursor-not-allowed text-neutral-text-medium"
+                        : "cursor-pointer hover:bg-neutral-component-surface-dark"
                    } ${buttonClassName}`}
                    onClick={(e) => {
                      e.stopPropagation();
@@ -185,9 +185,9 @@ const MenuItem: React.FC<ICustomMenuItemProps> = (props) => {
        <button
          type="button"
          className={cn(
-            "w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200",
+            "w-full select-none truncate rounded px-1 py-1.5 text-left text-neutral-text-medium",
            {
-              "bg-custom-background-80": active,
+              "bg-neutral-component-surface-dark": active,
            },
            className
          )}
--- a/packages/ui/src/dropdowns/custom-search-select.tsx
+++ b/packages/ui/src/dropdowns/custom-search-select.tsx
@@ -87,8 +87,8 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                  type="button"
                  className={`flex w-full items-center justify-between gap-1 text-xs ${
                    disabled
-                      ? "cursor-not-allowed text-custom-text-200"
-                      : "cursor-pointer hover:bg-custom-background-80"
+                      ? "cursor-not-allowed text-neutral-text-medium"
+                      : "cursor-pointer hover:bg-neutral-component-surface-dark"
                  }  ${customButtonClassName}`}
                  onClick={openDropdown}
                >
@@ -100,12 +100,12 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                <button
                  ref={setReferenceElement}
                  type="button"
-                  className={`flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 ${
+                  className={`flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-neutral-border-medium ${
                    input ? "px-3 py-2 text-sm" : "px-2 py-1 text-xs"
                  } ${
                    disabled
-                      ? "cursor-not-allowed text-custom-text-200"
-                      : "cursor-pointer hover:bg-custom-background-80"
+                      ? "cursor-not-allowed text-neutral-text-medium"
+                      : "cursor-pointer hover:bg-neutral-component-surface-dark"
                  } ${buttonClassName}`}
                  onClick={openDropdown}
                >
@@ -118,17 +118,17 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
              <Combobox.Options className="fixed z-10" static>
                <div
                  className={cn(
-                    "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
+                    "my-1 overflow-y-scroll rounded-md border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-light px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
                    optionsClassName
                  )}
                  ref={setPopperElement}
                  style={styles.popper}
                  {...attributes.popper}
                >
-                  <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
-                    <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+                  <div className="flex items-center gap-1.5 rounded border border-neutral-border-subtle bg-neutral-component-surface-medium px-2">
+                    <Search className="h-3.5 w-3.5 text-neutral-text-subtle" strokeWidth={1.5} />
                    <Combobox.Input
-                      className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                      className="w-full bg-transparent py-1 text-xs text-neutral-text-medium placeholder:text-neutral-text-subtle focus:outline-none"
                      value={query}
                      onChange={(e) => setQuery(e.target.value)}
                      placeholder="Search"
@@ -153,7 +153,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                              cn(
                                "w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none",
                                {
-                                  "bg-custom-background-80": active,
+                                  "bg-neutral-component-surface-dark": active,
                                }
                              )
                            }
@@ -170,10 +170,10 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                          </Combobox.Option>
                        ))
                      ) : (
-                        <p className="text-custom-text-400 italic py-1 px-1.5">No matches found</p>
+                        <p className="text-neutral-text-subtle italic py-1 px-1.5">No matches found</p>
                      )
                    ) : (
-                      <p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
+                      <p className="text-neutral-text-subtle italic py-1 px-1.5">Loading...</p>
                    )}
                  </div>
                  {footerOption}
--- a/packages/ui/src/dropdowns/custom-select.tsx
+++ b/packages/ui/src/dropdowns/custom-select.tsx
@@ -65,7 +65,9 @@ const CustomSelect = (props: ICustomSelectProps) => {
              ref={setReferenceElement}
              type="button"
              className={`flex items-center justify-between gap-1 text-xs ${
-                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+                disabled
+                  ? "cursor-not-allowed text-neutral-text-medium"
+                  : "cursor-pointer hover:bg-neutral-component-surface-dark"
              } ${customButtonClassName}`}
              onClick={openDropdown}
            >
@@ -77,10 +79,12 @@ const CustomSelect = (props: ICustomSelectProps) => {
            <button
              ref={setReferenceElement}
              type="button"
-              className={`flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 ${
+              className={`flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-neutral-border-medium ${
                input ? "px-3 py-2 text-sm" : "px-2 py-1 text-xs"
              } ${
-                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+                disabled
+                  ? "cursor-not-allowed text-neutral-text-medium"
+                  : "cursor-pointer hover:bg-neutral-component-surface-dark"
              } ${buttonClassName}`}
              onClick={openDropdown}
            >
@@ -94,7 +98,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
        <Listbox.Options className="fixed z-10" onClick={() => closeDropdown()} static>
          <div
            className={cn(
-              "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
+              "my-1 overflow-y-scroll rounded-md border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-light px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
              {
                "max-h-60": maxHeight === "lg",
                "max-h-48": maxHeight === "md",
@@ -122,9 +126,9 @@ const Option = (props: ICustomSelectItemProps) => {
      value={value}
      className={({ active }) =>
        cn(
-          "cursor-pointer select-none truncate rounded px-1 py-1.5 text-custom-text-200",
+          "cursor-pointer select-none truncate rounded px-1 py-1.5 text-neutral-text-medium",
          {
-            "bg-custom-background-80": active,
+            "bg-neutral-component-surface-dark": active,
          },
          className
        )
--- a/packages/ui/src/form-fields/checkbox.tsx
+++ b/packages/ui/src/form-fields/checkbox.tsx
@@ -20,11 +20,11 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>((props, ref)
          appearance-none shrink-0 w-4 h-4 border rounded-[3px] focus:outline-1 focus:outline-offset-4 focus:outline-custom-primary-50
          ${
            disabled
-              ? "border-custom-border-200 bg-custom-background-80 cursor-not-allowed"
+              ? "border-neutral-border-medium bg-neutral-component-surface-dark cursor-not-allowed"
              : `cursor-pointer ${
                  checked || intermediate
-                    ? "border-custom-primary-40 bg-custom-primary-100 hover:bg-custom-primary-200"
-                    : "border-custom-border-300 hover:border-custom-border-400 bg-white"
+                    ? "border-custom-primary-40 bg-primary-solid hover:bg-custom-primary-200"
+                    : "border-neutral-border-medium hover:border-neutral-border-strong bg-white"
                }`
          }
        `}
--- a/packages/ui/src/form-fields/input-color-picker.tsx
+++ b/packages/ui/src/form-fields/input-color-picker.tsx
@@ -45,7 +45,7 @@ export const InputColorPicker: React.FC<InputColorPickerProps> = (props) => {
        onChange={handleInputChange}
        hasError={hasError}
        placeholder={placeholder}
-        className={`border-[0.5px] border-custom-border-200 ${className}`}
+        className={`border-[0.5px] border-neutral-border-medium ${className}`}
        style={style}
      />

@@ -58,7 +58,7 @@ export const InputColorPicker: React.FC<InputColorPickerProps> = (props) => {
              <Popover.Button as={React.Fragment}>
                <Button
                  ref={setReferenceElement}
-                  variant="neutral-primary"
+                  variant="outline-neutral"
                  size="sm"
                  className="border-none !bg-transparent"
                >
@@ -93,7 +93,7 @@ export const InputColorPicker: React.FC<InputColorPickerProps> = (props) => {
              >
                <Popover.Panel>
                  <div
-                    className="z-10 overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg"
+                    className="z-10 overflow-hidden rounded border border-neutral-border-medium bg-neutral-component-surface-light shadow-custom-shadow-rg"
                    ref={setPopperElement}
                    style={styles.popper}
                    {...attributes.popper}
--- a/packages/ui/src/form-fields/input.tsx
+++ b/packages/ui/src/form-fields/input.tsx
@@ -18,7 +18,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
      name={name}
      className={`block rounded-md bg-transparent text-sm placeholder-custom-text-400 focus:outline-none ${
        mode === "primary"
-          ? "rounded-md border-[0.5px] border-custom-border-200"
+          ? "rounded-md border-[0.5px] border-neutral-border-medium"
          : mode === "transparent"
            ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary"
            : mode === "true-transparent"
--- a/packages/ui/src/form-fields/textarea.tsx
+++ b/packages/ui/src/form-fields/textarea.tsx
@@ -48,7 +48,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>((props, re
      cols={cols}
      className={`no-scrollbar w-full bg-transparent px-3 py-2 placeholder-custom-text-400 outline-none ${
        mode === "primary"
-          ? "rounded-md border-[0.5px] border-custom-border-200"
+          ? "rounded-md border-[0.5px] border-neutral-border-medium"
          : mode === "transparent"
            ? "focus:ring-theme rounded border-none bg-transparent ring-0 transition-all focus:ring-1"
            : ""
--- a/packages/ui/src/icons/calendar-after-icon.tsx
+++ b/packages/ui/src/icons/calendar-after-icon.tsx
@@ -7,7 +7,7 @@ export const CalendarAfterIcon: React.FC<ISvgIcons> = ({ className = "fill-curre
    <g clipPath="url(#clip0_3309_70901)">
      <path
        d="M10.6125 17V15.875H14.625V7.8125H3.375V11.9375H2.25V4.25C2.25 3.95 2.3625 3.6875 2.5875 3.4625C2.8125 3.2375 3.075 3.125 3.375 3.125H4.59375V2H5.8125V3.125H12.1875V2H13.4063V3.125H14.625C14.925 3.125 15.1875 3.2375 15.4125 3.4625C15.6375 3.6875 15.75 3.95 15.75 4.25V15.875C15.75 16.175 15.6375 16.4375 15.4125 16.6625C15.1875 16.8875 14.925 17 14.625 17H10.6125ZM6 18.2375L5.2125 17.45L7.33125 15.3125H0.9375V14.1875H7.33125L5.2125 12.05L6 11.2625L9.4875 14.75L6 18.2375ZM3.375 6.6875H14.625V4.25H3.375V6.6875Z"
-        fill="rgb(var(--color-text-200))"
+        fill="var(--color-neutral-110)"
      />
    </g>
    <defs>
--- a/packages/ui/src/icons/calendar-before-icon.tsx
+++ b/packages/ui/src/icons/calendar-before-icon.tsx
@@ -7,13 +7,13 @@ export const CalendarBeforeIcon: React.FC<ISvgIcons> = ({ className = "fill-curr
    <g clipPath="url(#clip0_3309_70907)">
      <path
        d="M10.6125 16.5V15.375H14.625V7.3125H3.375V11.4375H2.25V3.75C2.25 3.45 2.3625 3.1875 2.5875 2.9625C2.8125 2.7375 3.075 2.625 3.375 2.625H4.59375V1.5H5.8125V2.625H12.1875V1.5H13.4062V2.625H14.625C14.925 2.625 15.1875 2.7375 15.4125 2.9625C15.6375 3.1875 15.75 3.45 15.75 3.75V15.375C15.75 15.675 15.6375 15.9375 15.4125 16.1625C15.1875 16.3875 14.925 16.5 14.625 16.5H10.6125ZM3.375 6.1875H14.625V3.75H3.375V6.1875Z"
-        fill="rgb(var(--color-text-200))"
+        fill="var(--color-neutral-110)"
      />
      <g clipPath="url(#clip1_3309_70907)">
        <path
          d="M3.99967 17.1667L1.33301 14.5L3.99967 11.8334L4.34967 12.1834L2.28301 14.25H8V14.75H2.28301L4.34967 16.8167L3.99967 17.1667Z"
-          fill="rgb(var(--color-text-200))"
-          stroke="rgb(var(--color-text-200))"
+          fill="var(--color-neutral-110)"
+          stroke="var(--color-neutral-110)"
          strokeWidth="0.5"
        />
      </g>
--- a/packages/ui/src/icons/discord-icon.tsx
+++ b/packages/ui/src/icons/discord-icon.tsx
@@ -13,7 +13,7 @@ export const DiscordIcon: React.FC<ISvgIcons> = ({ width = "24", height = "24",
  >
    <g clipPath="url(#clip0_282_229)">
      <path
-        fill={color ? color : "rgb(var(--color-text-200))"}
+        fill={color ? color : "var(--color-neutral-110)"}
        d="M16.9312 3.64157C15.6346 3.04643 14.2662 2.62206 12.8604 2.37907C12.8476 2.37657 12.8343 2.37821 12.8225 2.38375C12.8106 2.38929 12.8009 2.39845 12.7946 2.4099C12.6196 2.7224 12.4246 3.1299 12.2879 3.45157C10.7724 3.22139 9.23088 3.22139 7.7154 3.45157C7.5633 3.09515 7.39165 2.7474 7.20123 2.4099C7.19467 2.39871 7.18486 2.38977 7.1731 2.38426C7.16135 2.37876 7.1482 2.37695 7.1354 2.37907C5.72944 2.62155 4.36101 3.04595 3.06457 3.64157C3.05359 3.64617 3.04429 3.65402 3.0379 3.66407C0.444567 7.53823 -0.266266 11.3166 0.0829005 15.0474C0.0837487 15.0567 0.0864772 15.0656 0.0909192 15.0738C0.0953611 15.082 0.101423 15.0892 0.108734 15.0949C1.6184 16.2134 3.30716 17.0672 5.1029 17.6199C5.11556 17.6236 5.12903 17.6233 5.14153 17.6191C5.15403 17.615 5.16497 17.6071 5.1729 17.5966C5.55895 17.072 5.90069 16.5162 6.19457 15.9349C6.19866 15.9269 6.20103 15.9182 6.2015 15.9093C6.20198 15.9003 6.20056 15.8914 6.19733 15.8831C6.1941 15.8747 6.18914 15.8671 6.18278 15.8609C6.17641 15.8546 6.16878 15.8497 6.1604 15.8466C5.62159 15.6404 5.09995 15.3918 4.6004 15.1032C4.59124 15.0979 4.58354 15.0905 4.57797 15.0815C4.5724 15.0725 4.56914 15.0622 4.56848 15.0517C4.56782 15.0411 4.56978 15.0306 4.57418 15.021C4.57859 15.0113 4.58531 15.003 4.59373 14.9966C4.69893 14.9179 4.80229 14.8367 4.90373 14.7532C4.91261 14.746 4.92331 14.7414 4.93464 14.74C4.94597 14.7385 4.95748 14.7402 4.9679 14.7449C8.24123 16.2391 11.7846 16.2391 15.0196 14.7449C15.0301 14.74 15.0418 14.7382 15.0533 14.7397C15.0648 14.7412 15.0756 14.7459 15.0846 14.7532C15.1846 14.8349 15.2896 14.9182 15.3954 14.9966C15.4037 15.0029 15.4104 15.0111 15.4148 15.0205C15.4193 15.03 15.4213 15.0404 15.4208 15.0508C15.4203 15.0612 15.4173 15.0714 15.412 15.0804C15.4067 15.0894 15.3993 15.0969 15.3904 15.1024C14.892 15.3937 14.3699 15.6424 13.8296 15.8457C13.8212 15.849 13.8135 15.8539 13.8071 15.8603C13.8008 15.8666 13.7958 15.8743 13.7926 15.8827C13.7894 15.8911 13.788 15.9001 13.7884 15.9091C13.7889 15.9181 13.7913 15.9269 13.7954 15.9349C14.0954 16.5166 14.4387 17.0699 14.8162 17.5957C14.824 17.6064 14.8349 17.6145 14.8475 17.6186C14.86 17.6228 14.8736 17.623 14.8862 17.6191C16.685 17.0681 18.3765 16.2142 19.8879 15.0941C19.8953 15.0889 19.9014 15.0822 19.906 15.0744C19.9106 15.0667 19.9135 15.058 19.9146 15.0491C20.3312 10.7349 19.2162 6.9874 16.9571 3.66573C16.9518 3.65453 16.9426 3.64564 16.9312 3.64073V3.64157ZM6.68373 12.7749C5.6979 12.7749 4.88623 11.8707 4.88623 10.7591C4.88623 9.64823 5.6829 8.74323 6.68373 8.74323C7.69207 8.74323 8.49707 9.65657 8.48123 10.7599C8.48123 11.8707 7.68457 12.7749 6.68373 12.7749ZM13.3296 12.7749C12.3437 12.7749 11.5321 11.8707 11.5321 10.7591C11.5321 9.64823 12.3279 8.74323 13.3296 8.74323C14.3379 8.74323 15.1429 9.65657 15.1271 10.7599C15.1271 11.8707 14.3387 12.7749 13.3296 12.7749Z"
      />
    </g>
--- a/packages/ui/src/icons/github-icon.tsx
+++ b/packages/ui/src/icons/github-icon.tsx
@@ -16,7 +16,7 @@ export const GithubIcon: React.FC<ISvgIcons> = ({ width = "24", height = "24", c
        fillRule="evenodd"
        clipRule="evenodd"
        d="M10 0C4.475 0 0 4.475 0 10C0 14.425 2.8625 18.1625 6.8375 19.4875C7.3375 19.575 7.525 19.275 7.525 19.0125C7.525 18.775 7.5125 17.9875 7.5125 17.15C5 17.6125 4.35 16.5375 4.15 15.975C4.0375 15.6875 3.55 14.8 3.125 14.5625C2.775 14.375 2.275 13.9125 3.1125 13.9C3.9 13.8875 4.4625 14.625 4.65 14.925C5.55 16.4375 6.9875 16.0125 7.5625 15.75C7.65 15.1 7.9125 14.6625 8.2 14.4125C5.975 14.1625 3.65 13.3 3.65 9.475C3.65 8.3875 4.0375 7.4875 4.675 6.7875C4.575 6.5375 4.225 5.5125 4.775 4.1375C4.775 4.1375 5.6125 3.875 7.525 5.1625C8.325 4.9375 9.175 4.825 10.025 4.825C10.875 4.825 11.725 4.9375 12.525 5.1625C14.4375 3.8625 15.275 4.1375 15.275 4.1375C15.825 5.5125 15.475 6.5375 15.375 6.7875C16.0125 7.4875 16.4 8.375 16.4 9.475C16.4 13.3125 14.0625 14.1625 11.8375 14.4125C12.2 14.725 12.5125 15.325 12.5125 16.2625C12.5125 17.6 12.5 18.675 12.5 19.0125C12.5 19.275 12.6875 19.5875 13.1875 19.4875C15.1726 18.8173 16.8976 17.5414 18.1197 15.8395C19.3418 14.1375 19.9994 12.0952 20 10C20 4.475 15.525 0 10 0Z"
-        fill={color ? color : "rgb(var(--color-text-200))"}
+        fill={color ? color : "var(--color-neutral-110)"}
      />
    </g>
    <defs>
--- a/packages/ui/src/icons/priority-icon.tsx
+++ b/packages/ui/src/icons/priority-icon.tsx
@@ -16,11 +16,11 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
  const { priority, className = "", containerClassName = "", size = 14, withContainer = false } = props;

  const priorityClasses = {
-    urgent: "bg-red-500 text-red-500 border-red-500",
-    high: "bg-orange-500/20 text-orange-500 border-orange-500",
-    medium: "bg-yellow-500/20 text-yellow-500 border-yellow-500",
-    low: "bg-custom-primary-100/20 text-custom-primary-100 border-custom-primary-100",
-    none: "bg-custom-background-80 text-custom-text-200 border-custom-border-300",
+    urgent: "bg-danger-solid text-danger-text-medium border-danger-solid",
+    high: "bg-orange-30 text-orange-110 border-orange-90",
+    medium: "bg-warning-component-surface-light text-warning-text-medium border-warning-solid",
+    low: "bg-primary-component-surface-light text-primary-text-medium border-primary-90",
+    none: "bg-neutral-component-surface-light text-neutral-text-medium border-neutral-border-strong",
  };

  // get priority icon
@@ -64,11 +64,11 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
          size={size}
          className={cn(
            {
-              "text-red-500": priority === "urgent",
-              "text-orange-500": priority === "high",
-              "text-yellow-500": priority === "medium",
-              "text-custom-primary-100": priority === "low",
-              "text-custom-text-200": priority === "none",
+              "text-danger-solid": priority === "urgent",
+              "text-orange-90": priority === "high",
+              "text-warning-text-solid": priority === "medium",
+              "text-primary-text-solid": priority === "low",
+              "text-neutral-text-solid": priority === "none",
            },
            className
          )}
--- a/packages/ui/src/loader.tsx
+++ b/packages/ui/src/loader.tsx
@@ -17,7 +17,7 @@ type ItemProps = {
 };

 const Item: React.FC<ItemProps> = ({ height = "auto", width = "auto" }) => (
-  <div className="rounded-md bg-custom-background-80" style={{ height: height, width: width }} />
+  <div className="rounded-md bg-neutral-component-surface-dark" style={{ height: height, width: width }} />
 );

 Loader.Item = Item;
--- a/packages/ui/src/progress/linear-progress-indicator.tsx
+++ b/packages/ui/src/progress/linear-progress-indicator.tsx
@@ -45,9 +45,13 @@ export const LinearProgressIndicator: React.FC<Props> = ({
      })}
    >
      {total === 0 ? (
-        <div className="flex h-full w-full gap-[1.5px] p-[2px] bg-custom-background-90 rounded-sm">{bars}</div>
+        <div className="flex h-full w-full gap-[1.5px] p-[2px] bg-neutral-component-surface-medium rounded-sm">
+          {bars}
+        </div>
      ) : (
-        <div className="flex h-full w-full gap-[1.5px] p-[2px] bg-custom-background-90 rounded-sm">{bars}</div>
+        <div className="flex h-full w-full gap-[1.5px] p-[2px] bg-neutral-component-surface-medium rounded-sm">
+          {bars}
+        </div>
      )}
    </div>
  );
--- a/packages/ui/src/spinners/circular-spinner.tsx
+++ b/packages/ui/src/spinners/circular-spinner.tsx
@@ -1,4 +1,6 @@
 import * as React from "react";
+// helpers
+import { cn } from "../../helpers";

 export interface ISpinner extends React.SVGAttributes<SVGElement> {
  height?: string;
@@ -12,7 +14,7 @@ export const Spinner: React.FC<ISpinner> = ({ height = "32px", width = "32px", c
      aria-hidden="true"
      height={height}
      width={width}
-      className={`animate-spin fill-blue-600 text-custom-text-200 ${className}`}
+      className={cn("animate-spin fill-primary-solid text-neutral-text-subtle", className)}
      viewBox="0 0 100 101"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
--- a/packages/ui/src/tooltip/tooltip.tsx
+++ b/packages/ui/src/tooltip/tooltip.tsx
@@ -47,9 +47,9 @@ export const Tooltip: React.FC<ITooltipProps> = ({
    hoverCloseDelay={closeDelay}
    content={
      <div
-        className={`relative z-50 max-w-xs gap-1 overflow-hidden break-words rounded-md bg-custom-background-100 p-2 text-xs text-custom-text-200 shadow-md ${className}`}
+        className={`relative z-50 max-w-xs gap-1 overflow-hidden break-words rounded-md bg-neutral-component-surface-light p-2 text-xs text-neutral-text-medium shadow-md ${className}`}
      >
-        {tooltipHeading && <h5 className="font-medium text-custom-text-100">{tooltipHeading}</h5>}
+        {tooltipHeading && <h5 className="font-medium text-neutral-text-strong">{tooltipHeading}</h5>}
        {tooltipContent}
      </div>
    }
--- a/space/components/accounts/github-sign-in.tsx
+++ b/space/components/accounts/github-sign-in.tsx
@@ -43,7 +43,7 @@ export const GitHubSignInButton: FC<Props> = (props) => {
        className="w-full"
        href={`https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
      >
-        <button className="flex h-[46px] w-full items-center justify-center gap-2 rounded border border-custom-border-300 p-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-custom-background-80">
+        <button className="flex h-[46px] w-full items-center justify-center gap-2 rounded border border-neutral-border-medium p-2 text-sm font-medium text-neutral-text-strong duration-300 hover:bg-neutral-component-surface-dark">
          <Image
            src={theme === "dark" ? githubWhiteImage : githubBlackImage}
            height={20}
--- a/space/components/accounts/onboarding-form.tsx
+++ b/space/components/accounts/onboarding-form.tsx
@@ -99,7 +99,7 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
              required: "First name is required",
            })}
          />
-          {errors.first_name && <div className="text-sm text-red-500">{errors.first_name.message}</div>}
+          {errors.first_name && <div className="text-sm text-danger-text-medium">{errors.first_name.message}</div>}
        </div>
        <div className="space-y-1 text-sm">
          <label htmlFor="lastName">Last Name</label>
@@ -112,7 +112,7 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
              required: "Last name is required",
            })}
          />
-          {errors.last_name && <div className="text-sm text-red-500">{errors.last_name.message}</div>}
+          {errors.last_name && <div className="text-sm text-danger-text-medium">{errors.last_name.message}</div>}
        </div>
        <div className="space-y-1 text-sm">
          <span>What{"'"}s your role?</span>
@@ -125,9 +125,9 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
                <Listbox as="div" value={value} onChange={onChange} className="relative flex-shrink-0 text-left">
                  <Listbox.Button
                    type="button"
-                    className={`flex w-full items-center justify-between gap-1 rounded-md border border-custom-border-300 px-3 py-2 text-sm shadow-sm duration-300 focus:outline-none`}
+                    className={`flex w-full items-center justify-between gap-1 rounded-md border border-neutral-border-medium px-3 py-2 text-sm shadow-sm duration-300 focus:outline-none`}
                  >
-                    <span className={value ? "" : "text-custom-text-400"}>{value || "Select your role..."}</span>
+                    <span className={value ? "" : "text-neutral-text-subtle"}>{value || "Select your role..."}</span>
                    <ChevronDown className="h-3 w-3" aria-hidden="true" strokeWidth={2} />
                  </Listbox.Button>

@@ -141,7 +141,7 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
                    leaveTo="transform opacity-0 scale-95"
                  >
                    <Listbox.Options
-                      className={`absolute left-0 z-10 mt-1 max-h-36 w-full origin-top-left overflow-y-auto rounded-md border border-custom-border-300 bg-custom-background-90 text-xs shadow-lg focus:outline-none`}
+                      className={`absolute left-0 z-10 mt-1 max-h-36 w-full origin-top-left overflow-y-auto rounded-md border border-neutral-border-medium bg-neutral-component-surface-medium text-xs shadow-lg focus:outline-none`}
                    >
                      <div className="space-y-1 p-2">
                        {USER_ROLES.map((role) => (
@@ -150,8 +150,8 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
                            value={role.value}
                            className={({ active, selected }) =>
                              `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                                active || selected ? "bg-custom-background-80" : ""
-                              } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                                active || selected ? "bg-neutral-component-surface-dark" : ""
+                              } ${selected ? "text-neutral-text-strong" : "text-neutral-text-medium"}`
                            }
                          >
                            {({ selected }) => (
@@ -170,7 +170,7 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
                </Listbox>
              )}
            />
-            {errors.role && <span className="text-sm text-red-500">{errors.role.message}</span>}
+            {errors.role && <span className="text-sm text-danger-text-medium">{errors.role.message}</span>}
          </div>
        </div>
      </div>
--- a/space/components/accounts/sign-in-forms/email-form.tsx
+++ b/space/components/accounts/sign-in-forms/email-form.tsx
@@ -105,7 +105,7 @@ export const EmailForm: React.FC<Props> = (props) => {
                />
                {value.length > 0 && (
                  <XCircle
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
                    onClick={() => onChange("")}
                  />
                )}
--- a/space/components/accounts/sign-in-forms/optional-set-password.tsx
+++ b/space/components/accounts/sign-in-forms/optional-set-password.tsx
@@ -92,7 +92,7 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
        </div>
        <p className="text-xs text-onboarding-text-200">
          When you click{" "}
-          <span className="text-custom-primary-100">{isOnboarded ? "Go to board" : "Set up profile"}</span> above, you
+          <span className="text-primary-text-subtle">{isOnboarded ? "Go to board" : "Set up profile"}</span> above, you
          agree with our{" "}
          <Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
            <span className="font-semibold underline">terms and conditions of service.</span>
--- a/space/components/accounts/sign-in-forms/password.tsx
+++ b/space/components/accounts/sign-in-forms/password.tsx
@@ -160,7 +160,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
                />
                {value.length > 0 && (
                  <XCircle
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
                    onClick={() => onChange("")}
                  />
                )}
@@ -191,7 +191,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
              type="button"
              onClick={handleForgotPassword}
              className={`text-xs font-medium ${
-                isSendingResetPasswordLink ? "text-onboarding-text-300" : "text-custom-primary-100"
+                isSendingResetPasswordLink ? "text-onboarding-text-300" : "text-primary-text-subtle"
              }`}
              disabled={isSendingResetPasswordLink}
            >
@@ -222,7 +222,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
          </Button>
        </div>
        <p className="text-xs text-onboarding-text-200">
-          When you click <span className="text-custom-primary-100">Go to board</span> above, you agree with our{" "}
+          When you click <span className="text-primary-text-subtle">Go to board</span> above, you agree with our{" "}
          <Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
            <span className="font-semibold underline">terms and conditions of service.</span>
          </Link>
--- a/space/components/accounts/sign-in-forms/self-hosted-sign-in.tsx
+++ b/space/components/accounts/sign-in-forms/self-hosted-sign-in.tsx
@@ -102,7 +102,7 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
                />
                {value.length > 0 && (
                  <XCircle
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
                    onClick={() => onChange("")}
                  />
                )}
--- a/space/components/accounts/sign-in-forms/set-password-link.tsx
+++ b/space/components/accounts/sign-in-forms/set-password-link.tsx
@@ -66,7 +66,7 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
        Get on your flight deck
      </h1>
      <p className="mt-2.5 px-20 text-center text-sm text-onboarding-text-200">
-        We have sent a link to <span className="font-semibold text-custom-primary-100">{email},</span> so you can set a
+        We have sent a link to <span className="font-semibold text-primary-text-subtle">{email},</span> so you can set a
        password
      </p>

--- a/space/components/accounts/sign-in-forms/unique-code.tsx
+++ b/space/components/accounts/sign-in-forms/unique-code.tsx
@@ -157,7 +157,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
        Get on your flight deck
      </h1>
      <p className="mt-2.5 text-center text-sm text-onboarding-text-200">
-        Paste the code you got at <span className="font-semibold text-custom-primary-100">{email}</span> below.
+        Paste the code you got at <span className="font-semibold text-primary-text-subtle">{email}</span> below.
      </p>

      <form onSubmit={handleSubmit(handleFormSubmit)} className="mx-auto mt-5 space-y-4 sm:w-96">
@@ -187,7 +187,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
                />
                {value.length > 0 && (
                  <XCircle
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
                    onClick={() => onChange("")}
                  />
                )}
@@ -227,7 +227,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
              className={`text-xs ${
                isRequestNewCodeDisabled
                  ? "text-onboarding-text-300"
-                  : "text-onboarding-text-200 hover:text-custom-primary-100"
+                  : "text-onboarding-text-200 hover:text-primary-text-subtle"
              }`}
              disabled={isRequestNewCodeDisabled}
            >
--- a/space/components/accounts/user-logged-in.tsx
+++ b/space/components/accounts/user-logged-in.tsx
@@ -14,18 +14,18 @@ export const UserLoggedIn = () => {

  return (
    <div className="flex h-screen w-screen flex-col">
-      <div className="relative flex w-full items-center justify-between gap-4 border-b border-custom-border-200 px-6 py-5">
+      <div className="relative flex w-full items-center justify-between gap-4 border-b border-neutral-border-medium px-6 py-5">
        <div>
          <Image src={PlaneLogo} alt="User already logged in" />
        </div>
-        <div className="flex items-center gap-2 rounded border border-custom-border-200 p-2">
+        <div className="flex items-center gap-2 rounded border border-neutral-border-medium p-2">
          {user.avatar && user.avatar !== "" ? (
            <div className="h-5 w-5 rounded-full">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src={user.avatar} alt={user.display_name ?? ""} className="rounded-full" />
            </div>
          ) : (
-            <div className="grid h-5 w-5 place-items-center rounded-full bg-custom-background-80 text-[10px] capitalize">
+            <div className="grid h-5 w-5 place-items-center rounded-full bg-neutral-component-surface-dark text-[10px] capitalize">
              {(user.display_name ?? "U")[0]}
            </div>
          )}
@@ -35,7 +35,7 @@ export const UserLoggedIn = () => {

      <div className="grid h-full w-full place-items-center p-6">
        <div className="text-center">
-          <div className="mx-auto grid h-52 w-52 place-items-center rounded-full bg-custom-background-80">
+          <div className="mx-auto grid h-52 w-52 place-items-center rounded-full bg-neutral-component-surface-dark">
            <div className="h-32 w-32">
              <Image src={UserLoggedInImage} alt="User already logged in" />
            </div>
--- a/space/components/issues/board-views/block-downvotes.tsx
+++ b/space/components/issues/board-views/block-downvotes.tsx
@@ -1,8 +1,8 @@
 "use client";

 export const IssueBlockDownVotes = ({ number }: { number: number }) => (
-  <div className="flex h-6 items-center rounded border-[0.5px] border-custom-border-300 px-1.5 py-1 pl-1 text-xs text-custom-text-300">
-    <span className="material-symbols-rounded !m-0 rotate-180 !p-0 text-base text-custom-text-300">
+  <div className="flex h-6 items-center rounded border-[0.5px] border-neutral-border-medium px-1.5 py-1 pl-1 text-xs text-neutral-text-medium">
+    <span className="material-symbols-rounded !m-0 rotate-180 !p-0 text-base text-neutral-text-medium">
      arrow_upward_alt
    </span>
    {number}
--- a/space/components/issues/board-views/block-due-date.tsx
+++ b/space/components/issues/board-views/block-due-date.tsx
@@ -26,13 +26,13 @@ export const dueDateIconDetails = (

    if (timeDifference < 0) {
      iconName = "event_busy";
-      className = "text-red-500";
+      className = "text-danger-text-medium";
    } else if (timeDifference === 0) {
      iconName = "today";
-      className = "text-red-500";
+      className = "text-danger-text-medium";
    } else if (timeDifference === 24 * 60 * 60 * 1000) {
      iconName = "event";
-      className = "text-yellow-500";
+      className = "text-warning-text-subtle";
    } else {
      iconName = "calendar_today";
      className = "";
@@ -49,7 +49,7 @@ export const IssueBlockDueDate = ({ due_date, group }: { due_date: string; group
  const iconDetails = dueDateIconDetails(due_date, group);

  return (
-    <div className="flex items-center gap-1 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs text-custom-text-100">
+    <div className="flex items-center gap-1 rounded border-[0.5px] border-neutral-border-medium px-2.5 py-1 text-xs text-neutral-text-strong">
      <span className={`material-symbols-rounded -my-0.5 text-sm ${iconDetails.className}`}>
        {iconDetails.iconName}
      </span>
--- a/space/components/issues/board-views/block-labels.tsx
+++ b/space/components/issues/board-views/block-labels.tsx
@@ -7,9 +7,9 @@ export const IssueBlockLabels = ({ labels }: any) => (
      labels.map((_label: any) => (
        <div
          key={_label?.id}
-          className="flex flex-shrink-0 cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm"
+          className="flex flex-shrink-0 cursor-default items-center rounded-md border border-neutral-border-medium px-2.5 py-1 text-xs shadow-sm"
        >
-          <div className="flex items-center gap-1.5 text-custom-text-200">
+          <div className="flex items-center gap-1.5 text-neutral-text-medium">
            <div className="h-2 w-2 rounded-full" style={{ backgroundColor: `${_label?.color}` }} />
            <div className="text-xs">{_label?.name}</div>
          </div>
--- a/space/components/issues/board-views/block-state.tsx
+++ b/space/components/issues/board-views/block-state.tsx
@@ -8,8 +8,8 @@ export const IssueBlockState = ({ state }: any) => {

  if (stateGroup === null) return <></>;
  return (
-    <div className="flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs shadow-sm duration-300 focus:outline-none">
-      <div className="flex w-full items-center gap-1.5 text-custom-text-200">
+    <div className="flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-neutral-border-medium px-2.5 py-1 text-xs shadow-sm duration-300 focus:outline-none">
+      <div className="flex w-full items-center gap-1.5 text-neutral-text-medium">
        <StateGroupIcon stateGroup={state.group} color={state.color} />
        <div className="text-xs">{state?.name}</div>
      </div>
--- a/space/components/issues/board-views/block-upvotes.tsx
+++ b/space/components/issues/board-views/block-upvotes.tsx
@@ -1,8 +1,8 @@
 "use client";

 export const IssueBlockUpVotes = ({ number }: { number: number }) => (
-  <div className="flex h-6 items-center rounded border-[0.5px] border-custom-border-300 px-1.5 py-1 pl-1 text-xs text-custom-text-300">
-    <span className="material-symbols-rounded !m-0 !p-0 text-base text-custom-text-300">arrow_upward_alt</span>
+  <div className="flex h-6 items-center rounded border-[0.5px] border-neutral-border-medium px-1.5 py-1 pl-1 text-xs text-neutral-text-medium">
+    <span className="material-symbols-rounded !m-0 !p-0 text-base text-neutral-text-medium">arrow_upward_alt</span>
    {number}
  </div>
 );
--- a/space/components/issues/board-views/kanban/block.tsx
+++ b/space/components/issues/board-views/kanban/block.tsx
@@ -44,9 +44,9 @@ export const IssueKanBanBlock = observer(({ issue }: { issue: IIssue }) => {
  };

  return (
-    <div className="flex flex-col gap-1.5 space-y-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-3 py-2 text-sm shadow-custom-shadow-2xs">
+    <div className="flex flex-col gap-1.5 space-y-2 rounded border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-light px-3 py-2 text-sm shadow-custom-shadow-2xs">
      {/* id */}
-      <div className="break-words text-xs text-custom-text-300">
+      <div className="break-words text-xs text-neutral-text-medium">
        {projectStore?.project?.identifier}-{issue?.sequence_id}
      </div>

--- a/space/components/issues/board-views/kanban/header.tsx
+++ b/space/components/issues/board-views/kanban/header.tsx
@@ -22,8 +22,8 @@ export const IssueKanBanHeader = observer(({ state }: { state: IIssueState }) =>
      <div className="flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center">
        <StateGroupIcon stateGroup={state.group} color={state.color} height="14" width="14" />
      </div>
-      <div className="mr-1 truncate font-semibold capitalize text-custom-text-200">{state?.name}</div>
-      <span className="flex-shrink-0 rounded-full text-custom-text-300">
+      <div className="mr-1 truncate font-semibold capitalize text-neutral-text-medium">{state?.name}</div>
+      <span className="flex-shrink-0 rounded-full text-neutral-text-medium">
        {store.issue.getCountOfIssuesByState(state.id)}
      </span>
    </div>
--- a/space/components/issues/board-views/kanban/index.tsx
+++ b/space/components/issues/board-views/kanban/index.tsx
@@ -34,7 +34,7 @@ export const IssueKanbanView = observer(() => {
                  ))}
                </div>
              ) : (
-                <div className="flex items-center justify-center gap-2 pt-10 text-center text-sm font-medium text-custom-text-200">
+                <div className="flex items-center justify-center gap-2 pt-10 text-center text-sm font-medium text-neutral-text-medium">
                  <Icon iconName="stack" />
                  No issues in this state
                </div>
--- a/space/components/issues/board-views/list/block.tsx
+++ b/space/components/issues/board-views/list/block.tsx
@@ -46,10 +46,10 @@ export const IssueListBlock: FC<{ issue: IIssue }> = observer((props) => {
  };

  return (
-    <div className="relative flex items-center gap-10 bg-custom-background-100 p-3">
+    <div className="relative flex items-center gap-10 bg-neutral-component-surface-light p-3">
      <div className="relative flex w-full flex-grow items-center gap-3 overflow-hidden">
        {/* id */}
-        <div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
+        <div className="flex-shrink-0 text-xs font-medium text-neutral-text-medium">
          {projectStore?.project?.identifier}-{issue?.sequence_id}
        </div>
        {/* name */}
--- a/space/components/issues/board-views/list/header.tsx
+++ b/space/components/issues/board-views/list/header.tsx
@@ -23,7 +23,9 @@ export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
        <StateGroupIcon stateGroup={state.group} color={state.color} height="14" width="14" />
      </div>
      <div className="mr-1 font-medium capitalize">{state?.name}</div>
-      <div className="text-sm font-medium text-custom-text-200">{store.issue.getCountOfIssuesByState(state.id)}</div>
+      <div className="text-sm font-medium text-neutral-text-medium">
+        {store.issue.getCountOfIssuesByState(state.id)}
+      </div>
    </div>
  );
 });
--- a/space/components/issues/board-views/list/index.tsx
+++ b/space/components/issues/board-views/list/index.tsx
@@ -21,13 +21,13 @@ export const IssueListView = observer(() => {
            <IssueListHeader state={_state} />
            {issueStore.getFilteredIssuesByState(_state.id) &&
            issueStore.getFilteredIssuesByState(_state.id).length > 0 ? (
-              <div className="divide-y divide-custom-border-200">
+              <div className="divide-y divide-neutral-border-medium">
                {issueStore.getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
                  <IssueListBlock key={_issue.id} issue={_issue} />
                ))}
              </div>
            ) : (
-              <div className="bg-custom-background-100 p-3 text-sm text-custom-text-400">No issues.</div>
+              <div className="bg-neutral-component-surface-light p-3 text-sm text-neutral-text-subtle">No issues.</div>
            )}
          </div>
        ))}
--- a/space/components/issues/filters/applied-filters/filters-list.tsx
+++ b/space/components/issues/filters/applied-filters/filters-list.tsx
@@ -22,7 +22,7 @@ export const AppliedFiltersList: React.FC<Props> = (props) => {
  const { appliedFilters, handleRemoveAllFilters, handleRemoveFilter, states } = props;

  return (
-    <div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100">
+    <div className="flex flex-wrap items-stretch gap-2 bg-neutral-component-surface-light">
      {Object.entries(appliedFilters).map(([key, value]) => {
        const filterKey = key as keyof IIssueFilterOptions;

@@ -31,9 +31,9 @@ export const AppliedFiltersList: React.FC<Props> = (props) => {
        return (
          <div
            key={filterKey}
-            className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
+            className="flex flex-wrap items-center gap-2 rounded-md border border-neutral-border-medium px-2 py-1 capitalize"
          >
-            <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+            <span className="text-xs text-neutral-text-medium">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
            <div className="flex flex-wrap items-center gap-1">
              {filterKey === "priority" && (
                <AppliedPriorityFilters handleRemove={(val) => handleRemoveFilter("priority", val)} values={value} />
@@ -57,7 +57,7 @@ export const AppliedFiltersList: React.FC<Props> = (props) => {

              <button
                type="button"
-                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                className="grid place-items-center text-neutral-text-medium hover:text-neutral-text-medium"
                onClick={() => handleRemoveFilter(filterKey, null)}
              >
                <X size={12} strokeWidth={2} />
@@ -69,7 +69,7 @@ export const AppliedFiltersList: React.FC<Props> = (props) => {
      <button
        type="button"
        onClick={handleRemoveAllFilters}
-        className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
+        className="flex items-center gap-2 rounded-md border border-neutral-border-medium px-2 py-1 text-xs text-neutral-text-medium hover:text-neutral-text-medium"
      >
        Clear all
        <X size={12} strokeWidth={2} />
--- a/space/components/issues/filters/applied-filters/label.tsx
+++ b/space/components/issues/filters/applied-filters/label.tsx
@@ -19,7 +19,7 @@ export const AppliedLabelsFilters: React.FC<Props> = (props) => {
        if (!labelDetails) return null;

        return (
-          <div key={labelId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+          <div key={labelId} className="flex items-center gap-1 rounded bg-neutral-component-surface-dark p-1 text-xs">
            <span
              className="h-1.5 w-1.5 rounded-full"
              style={{
@@ -29,7 +29,7 @@ export const AppliedLabelsFilters: React.FC<Props> = (props) => {
            <span className="normal-case">{labelDetails.name}</span>
            <button
              type="button"
-              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              className="grid place-items-center text-neutral-text-medium hover:text-neutral-text-medium"
              onClick={() => handleRemove(labelId)}
            >
              <X size={10} strokeWidth={2} />
--- a/space/components/issues/filters/applied-filters/priority.tsx
+++ b/space/components/issues/filters/applied-filters/priority.tsx
@@ -14,12 +14,12 @@ export const AppliedPriorityFilters: React.FC<Props> = (props) => {
      {values &&
        values.length > 0 &&
        values.map((priority) => (
-          <div key={priority} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+          <div key={priority} className="flex items-center gap-1 rounded bg-neutral-component-surface-dark p-1 text-xs">
            <PriorityIcon priority={priority as any} className={`h-3 w-3`} />
            {priority}
            <button
              type="button"
-              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              className="grid place-items-center text-neutral-text-medium hover:text-neutral-text-medium"
              onClick={() => handleRemove(priority)}
            >
              <X size={10} strokeWidth={2} />
--- a/space/components/issues/filters/applied-filters/root.tsx
+++ b/space/components/issues/filters/applied-filters/root.tsx
@@ -77,7 +77,7 @@ export const IssueAppliedFilters: FC = observer(() => {
  if (Object.keys(appliedFilters).length === 0) return null;

  return (
-    <div className="border-b border-custom-border-200 p-5 py-3">
+    <div className="border-b border-neutral-border-medium p-5 py-3">
      <AppliedFiltersList
        appliedFilters={appliedFilters || {}}
        handleRemoveFilter={handleRemoveFilter}
--- a/space/components/issues/filters/applied-filters/state.tsx
+++ b/space/components/issues/filters/applied-filters/state.tsx
@@ -21,12 +21,12 @@ export const AppliedStateFilters: React.FC<Props> = (props) => {
        if (!stateDetails) return null;

        return (
-          <div key={stateId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+          <div key={stateId} className="flex items-center gap-1 rounded bg-neutral-component-surface-dark p-1 text-xs">
            <StateGroupIcon color={stateDetails.color} stateGroup={stateDetails.group} height="12px" width="12px" />
            {stateDetails.name}
            <button
              type="button"
-              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              className="grid place-items-center text-neutral-text-medium hover:text-neutral-text-medium"
              onClick={() => handleRemove(stateId)}
            >
              <X size={10} strokeWidth={2} />
--- a/space/components/issues/filters/helpers/dropdown.tsx
+++ b/space/components/issues/filters/helpers/dropdown.tsx
@@ -29,8 +29,8 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
        return (
          <>
            <Popover.Button as={React.Fragment}>
-              <Button ref={setReferenceElement} variant="neutral-primary" size="sm">
-                <div className={`${open ? "text-custom-text-100" : "text-custom-text-200"}`}>
+              <Button ref={setReferenceElement} variant="outline-neutral" size="sm">
+                <div className={`${open ? "text-neutral-text-strong" : "text-neutral-text-medium"}`}>
                  <span>{title}</span>
                </div>
              </Button>
@@ -46,7 +46,7 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
            >
              <Popover.Panel>
                <div
-                  className="z-10 overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg"
+                  className="z-10 overflow-hidden rounded border border-neutral-border-medium bg-neutral-component-surface-light shadow-custom-shadow-rg"
                  ref={setPopperElement}
                  style={styles.popper}
                  {...attributes.popper}
--- a/space/components/issues/filters/helpers/filter-header.tsx
+++ b/space/components/issues/filters/helpers/filter-header.tsx
@@ -9,11 +9,11 @@ interface IFilterHeader {
 }

 export const FilterHeader = ({ title, isPreviewEnabled, handleIsPreviewEnabled }: IFilterHeader) => (
-  <div className="sticky top-0 flex items-center justify-between gap-2 bg-custom-background-100">
-    <div className="flex-grow truncate text-xs font-medium text-custom-text-300">{title}</div>
+  <div className="sticky top-0 flex items-center justify-between gap-2 bg-neutral-component-surface-light">
+    <div className="flex-grow truncate text-xs font-medium text-neutral-text-medium">{title}</div>
    <button
      type="button"
-      className="grid h-5 w-5 flex-shrink-0 place-items-center rounded hover:bg-custom-background-80"
+      className="grid h-5 w-5 flex-shrink-0 place-items-center rounded hover:bg-neutral-component-surface-dark"
      onClick={handleIsPreviewEnabled}
    >
      {isPreviewEnabled ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
--- a/space/components/issues/filters/helpers/filter-option.tsx
+++ b/space/components/issues/filters/helpers/filter-option.tsx
@@ -16,19 +16,19 @@ export const FilterOption: React.FC<Props> = (props) => {
  return (
    <button
      type="button"
-      className="flex w-full items-center gap-2 rounded p-1.5 hover:bg-custom-background-80"
+      className="flex w-full items-center gap-2 rounded p-1.5 hover:bg-neutral-component-surface-dark"
      onClick={onClick}
    >
      <div
-        className={`grid h-3 w-3 flex-shrink-0 place-items-center border bg-custom-background-90 ${
-          isChecked ? "border-custom-primary-100 bg-custom-primary-100 text-white" : "border-custom-border-300"
+        className={`grid h-3 w-3 flex-shrink-0 place-items-center border bg-neutral-component-surface-medium ${
+          isChecked ? "border-custom-primary-100 bg-primary-solid text-white" : "border-neutral-border-medium"
        } ${multiple ? "rounded-sm" : "rounded-full"}`}
      >
        {isChecked && <Check size={10} strokeWidth={3} />}
      </div>
      <div className="flex items-center gap-2 truncate">
        {icon && <div className="grid w-5 flex-shrink-0 place-items-center">{icon}</div>}
-        <div className="flex-grow truncate text-xs text-custom-text-200">{title}</div>
+        <div className="flex-grow truncate text-xs text-neutral-text-medium">{title}</div>
      </div>
    </button>
  );
--- a/space/components/issues/filters/labels.tsx
+++ b/space/components/issues/filters/labels.tsx
@@ -59,7 +59,7 @@ export const FilterLabels: React.FC<Props> = (props) => {
                {filteredOptions.length > 5 && (
                  <button
                    type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="ml-8 text-xs font-medium text-primary-text-subtle"
                    onClick={handleViewToggle}
                  >
                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
@@ -67,7 +67,7 @@ export const FilterLabels: React.FC<Props> = (props) => {
                )}
              </>
            ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-xs italic text-neutral-text-subtle">No matches found</p>
            )
          ) : (
            <Loader className="space-y-2">
--- a/space/components/issues/filters/priority.tsx
+++ b/space/components/issues/filters/priority.tsx
@@ -42,7 +42,7 @@ export const FilterPriority: React.FC<Props> = observer((props) => {
              />
            ))
          ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-xs italic text-neutral-text-subtle">No matches found</p>
          )}
        </div>
      )}
--- a/space/components/issues/filters/selection.tsx
+++ b/space/components/issues/filters/selection.tsx
@@ -27,12 +27,12 @@ export const FilterSelection: React.FC<Props> = observer((props) => {

  return (
    <div className="flex h-full w-full flex-col overflow-hidden">
-      <div className="bg-custom-background-100 p-2.5 pb-0">
-        <div className="flex items-center gap-1.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 py-1 text-xs">
-          <Search className="text-custom-text-400" size={12} strokeWidth={2} />
+      <div className="bg-neutral-component-surface-light p-2.5 pb-0">
+        <div className="flex items-center gap-1.5 rounded border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-medium px-1.5 py-1 text-xs">
+          <Search className="text-neutral-text-subtle" size={12} strokeWidth={2} />
          <input
            type="text"
-            className="w-full bg-custom-background-90 outline-none placeholder:text-custom-text-400"
+            className="w-full bg-neutral-component-surface-medium outline-none placeholder:text-neutral-text-subtle"
            placeholder="Search"
            value={filtersSearchQuery}
            onChange={(e) => setFiltersSearchQuery(e.target.value)}
@@ -40,12 +40,12 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
          />
          {filtersSearchQuery !== "" && (
            <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
-              <X className="text-custom-text-300" size={12} strokeWidth={2} />
+              <X className="text-neutral-text-medium" size={12} strokeWidth={2} />
            </button>
          )}
        </div>
      </div>
-      <div className="h-full w-full divide-y divide-custom-border-200 overflow-y-auto px-2.5">
+      <div className="h-full w-full divide-y divide-neutral-border-medium overflow-y-auto px-2.5">
        {/* priority */}
        {isFilterEnabled("priority") && (
          <div className="py-2">
--- a/space/components/issues/filters/state.tsx
+++ b/space/components/issues/filters/state.tsx
@@ -54,7 +54,7 @@ export const FilterState: React.FC<Props> = (props) => {
                {filteredOptions.length > 5 && (
                  <button
                    type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="ml-8 text-xs font-medium text-primary-text-subtle"
                    onClick={handleViewToggle}
                  >
                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
@@ -62,7 +62,7 @@ export const FilterState: React.FC<Props> = (props) => {
                )}
              </>
            ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-xs italic text-neutral-text-subtle">No matches found</p>
            )
          ) : (
            <Loader className="space-y-2">
--- a/space/components/issues/navbar/index.tsx
+++ b/space/components/issues/navbar/index.tsx
@@ -134,7 +134,7 @@ const IssueNavbar = observer(() => {
                {renderEmoji(projectStore.project.icon_prop)}
              </div>
            ) : (
-              <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+              <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
                {projectStore.project?.name.charAt(0)}
              </span>
            )
@@ -168,7 +168,7 @@ const IssueNavbar = observer(() => {
      </div>

      {user ? (
-        <div className="flex items-center gap-2 rounded border border-custom-border-200 p-2">
+        <div className="flex items-center gap-2 rounded border border-neutral-border-medium p-2">
          <Avatar name={user?.display_name} src={user?.avatar} shape="square" size="sm" />
          <h6 className="text-xs font-medium">{user.display_name}</h6>
        </div>
--- a/space/components/issues/navbar/issue-board-view.tsx
+++ b/space/components/issues/navbar/issue-board-view.tsx
@@ -30,8 +30,8 @@ export const NavbarIssueBoardView = observer(() => {
                key={viewKey}
                className={`flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded-sm ${
                  viewKey === activeBoard
-                    ? `bg-custom-background-80 text-custom-text-200`
-                    : `text-custom-text-300 hover:bg-custom-background-80`
+                    ? `bg-neutral-component-surface-dark text-neutral-text-medium`
+                    : `text-neutral-text-medium hover:bg-neutral-component-surface-dark`
                }`}
                onClick={() => handleCurrentBoardView(viewKey)}
                title={viewKey}
--- a/space/components/issues/navbar/theme.tsx
+++ b/space/components/issues/navbar/theme.tsx
@@ -24,7 +24,7 @@ export const NavbarTheme = observer(() => {
    <button
      type="button"
      onClick={handleTheme}
-      className="relative grid h-7 w-7 place-items-center rounded bg-custom-background-100 text-custom-text-100 hover:bg-custom-background-80"
+      className="relative grid h-7 w-7 place-items-center rounded bg-neutral-component-surface-light text-neutral-text-strong hover:bg-neutral-component-surface-dark"
    >
      <span className="material-symbols-rounded text-sm">{appTheme === "light" ? "dark_mode" : "light_mode"}</span>
    </button>
--- a/space/components/issues/peek-overview/comment/comment-detail-card.tsx
+++ b/space/components/issues/peek-overview/comment/comment-detail-card.tsx
@@ -72,18 +72,20 @@ export const CommentCard: React.FC<Props> = observer((props) => {
            }
            height={30}
            width={30}
-            className="grid h-7 w-7 place-items-center rounded-full border-2 border-custom-border-200"
+            className="grid h-7 w-7 place-items-center rounded-full border-2 border-neutral-border-medium"
          />
        ) : (
-          <div className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}>
+          <div
+            className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-primary-solid text-white`}
+          >
            {comment.actor_detail.is_bot
              ? comment?.actor_detail?.first_name?.charAt(0)
              : comment?.actor_detail?.display_name?.charAt(0)}
          </div>
        )}

-        <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-custom-background-80 px-0.5 py-px">
-          <MessageSquare className="h-3 w-3 text-custom-text-200" aria-hidden="true" strokeWidth={2} />
+        <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-neutral-component-surface-dark px-0.5 py-px">
+          <MessageSquare className="h-3 w-3 text-neutral-text-medium" aria-hidden="true" strokeWidth={2} />
        </span>
      </div>
      <div className="min-w-0 flex-1">
@@ -91,7 +93,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
          <div className="text-xs">
            {comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name}
          </div>
-          <p className="mt-0.5 text-xs text-custom-text-200">
+          <p className="mt-0.5 text-xs text-neutral-text-medium">
            <>commented {timeAgo(comment.created_at)}</>
          </p>
        </div>
@@ -126,16 +128,19 @@ export const CommentCard: React.FC<Props> = observer((props) => {
              <button
                type="submit"
                disabled={isSubmitting}
-                className="group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500"
+                className="group rounded border border-green-500 bg-success-component-surface-dark p-2 shadow-md duration-300 hover:bg-success-solid"
              >
-                <Check className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" strokeWidth={2} />
+                <Check
+                  className="h-3 w-3 text-success-text-medium duration-300 group-hover:text-white"
+                  strokeWidth={2}
+                />
              </button>
              <button
                type="button"
-                className="group rounded border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
+                className="group rounded border border-red-500 bg-danger-component-surface-dark p-2 shadow-md duration-300 hover:bg-danger-solid"
                onClick={() => setIsEditing(false)}
              >
-                <X className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" strokeWidth={2} />
+                <X className="h-3 w-3 text-danger-text-medium duration-300 group-hover:text-white" strokeWidth={2} />
              </button>
            </div>
          </form>
@@ -143,7 +148,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
            <LiteReadOnlyEditorWithRef
              ref={showEditorRef}
              value={comment.comment_html}
-              customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+              customClassName="text-xs border border-neutral-border-medium bg-neutral-component-surface-light"
              mentionHighlights={mentionsConfig.mentionHighlights}
            />
            <CommentReactions commentId={comment.id} projectId={comment.project} />
@@ -156,9 +161,9 @@ export const CommentCard: React.FC<Props> = observer((props) => {
          <Menu.Button
            type="button"
            onClick={() => {}}
-            className="relative grid cursor-pointer place-items-center rounded p-1 text-custom-text-200 outline-none hover:bg-custom-background-80 hover:text-custom-text-100"
+            className="relative grid cursor-pointer place-items-center rounded p-1 text-neutral-text-medium outline-none hover:bg-neutral-component-surface-dark hover:text-neutral-text-strong"
          >
-            <MoreVertical className="h-4 w-4 text-custom-text-200 duration-300" strokeWidth={2} />
+            <MoreVertical className="h-4 w-4 text-neutral-text-medium duration-300" strokeWidth={2} />
          </Menu.Button>

          <Transition
@@ -170,7 +175,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
            leaveFrom="transform opacity-100 scale-100"
            leaveTo="transform opacity-0 scale-95"
          >
-            <Menu.Items className="absolute right-0 z-10 mt-1 max-h-36 min-w-[8rem] origin-top-right overflow-auto overflow-y-scroll whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-90 p-1 text-xs shadow-lg focus:outline-none">
+            <Menu.Items className="absolute right-0 z-10 mt-1 max-h-36 min-w-[8rem] origin-top-right overflow-auto overflow-y-scroll whitespace-nowrap rounded-md border border-neutral-border-medium bg-neutral-component-surface-medium p-1 text-xs shadow-lg focus:outline-none">
              <Menu.Item>
                {({ active }) => (
                  <div className="py-1">
@@ -179,8 +184,8 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                      onClick={() => {
                        setIsEditing(true);
                      }}
-                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
-                        active ? "bg-custom-background-80" : ""
+                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-neutral-text-medium hover:bg-neutral-component-surface-dark ${
+                        active ? "bg-neutral-component-surface-dark" : ""
                      }`}
                    >
                      Edit
@@ -194,8 +199,8 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                    <button
                      type="button"
                      onClick={handleDelete}
-                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
-                        active ? "bg-custom-background-80" : ""
+                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-neutral-text-medium hover:bg-neutral-component-surface-dark ${
+                        active ? "bg-neutral-component-surface-dark" : ""
                      }`}
                    >
                      Delete
--- a/space/components/issues/peek-overview/comment/comment-reactions.tsx
+++ b/space/components/issues/peek-overview/comment/comment-reactions.tsx
@@ -103,12 +103,12 @@ export const CommentReactions: React.FC<Props> = observer((props) => {
                    handleReactionClick(reaction);
                  });
                }}
-                className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-custom-text-100 ${
+                className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-neutral-text-strong ${
                  commentReactions?.some(
                    (r) => r.actor_detail.id === userStore.currentUser?.id && r.reaction === reaction
                  )
-                    ? "bg-custom-primary-100/10"
-                    : "bg-custom-background-80"
+                    ? "bg-primary-solid/10"
+                    : "bg-neutral-component-surface-dark"
                }`}
              >
                <span>{renderEmoji(reaction)}</span>
@@ -117,7 +117,7 @@ export const CommentReactions: React.FC<Props> = observer((props) => {
                    commentReactions?.some(
                      (r) => r.actor_detail.id === userStore.currentUser?.id && r.reaction === reaction
                    )
-                      ? "text-custom-primary-100"
+                      ? "text-primary-text-subtle"
                      : ""
                  }
                >
--- a/space/components/issues/peek-overview/full-screen-peek-view.tsx
+++ b/space/components/issues/peek-overview/full-screen-peek-view.tsx
@@ -19,7 +19,7 @@ export const FullScreenPeekView: React.FC<Props> = observer((props) => {
  const { handleClose, issueDetails } = props;

  return (
-    <div className="grid h-full w-full grid-cols-10 divide-x divide-custom-border-200 overflow-hidden">
+    <div className="grid h-full w-full grid-cols-10 divide-x divide-neutral-border-medium overflow-hidden">
      <div className="col-span-7 flex h-full w-full flex-col overflow-hidden">
        <div className="w-full p-5">
          <PeekOverviewHeader handleClose={handleClose} issueDetails={issueDetails} />
@@ -31,7 +31,7 @@ export const FullScreenPeekView: React.FC<Props> = observer((props) => {
              <PeekOverviewIssueDetails issueDetails={issueDetails} />
            </div>
            {/* divider */}
-            <div className="my-5 h-[1] w-full border-t border-custom-border-200" />
+            <div className="my-5 h-[1] w-full border-t border-neutral-border-medium" />
            {/* issue activity/comments */}
            <div className="w-full pb-5">
              <PeekOverviewIssueActivity issueDetails={issueDetails} />
--- a/space/components/issues/peek-overview/header.tsx
+++ b/space/components/issues/peek-overview/header.tsx
@@ -88,7 +88,7 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
              leaveFrom="transform opacity-100 scale-100"
              leaveTo="transform opacity-0 scale-95"
            >
-              <Listbox.Options className="absolute left-0 z-10 mt-1 min-w-[8rem] origin-top-left overflow-y-auto whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-90 text-xs shadow-lg focus:outline-none">
+              <Listbox.Options className="absolute left-0 z-10 mt-1 min-w-[8rem] origin-top-left overflow-y-auto whitespace-nowrap rounded-md border border-neutral-border-medium bg-neutral-component-surface-medium text-xs shadow-lg focus:outline-none">
                <div className="space-y-1 p-2">
                  {peekModes.map((mode) => (
                    <Listbox.Option
@@ -96,8 +96,8 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
                      value={mode.key}
                      className={({ active, selected }) =>
                        `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                          active || selected ? "bg-custom-background-80" : ""
-                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                          active || selected ? "bg-neutral-component-surface-dark" : ""
+                        } ${selected ? "text-neutral-text-strong" : "text-neutral-text-medium"}`
                      }
                    >
                      {({ selected }) => (
--- a/space/components/issues/peek-overview/issue-activity.tsx
+++ b/space/components/issues/peek-overview/issue-activity.tsx
@@ -50,8 +50,8 @@ export const PeekOverviewIssueActivity: React.FC<Props> = observer(() => {
              )}
            </>
          ) : (
-            <div className="mt-4 flex items-center justify-between gap-2 rounded border border-custom-border-300 bg-custom-background-80 px-2 py-2.5">
-              <p className="flex gap-2 overflow-hidden break-words text-sm text-custom-text-200">
+            <div className="mt-4 flex items-center justify-between gap-2 rounded border border-neutral-border-medium bg-neutral-component-surface-dark px-2 py-2.5">
+              <p className="flex gap-2 overflow-hidden break-words text-sm text-neutral-text-medium">
                <Icon iconName="lock" className="!text-sm" />
                Sign in to add your comment
              </p>
--- a/space/components/issues/peek-overview/issue-details.tsx
+++ b/space/components/issues/peek-overview/issue-details.tsx
@@ -13,7 +13,7 @@ export const PeekOverviewIssueDetails: React.FC<Props> = ({ issueDetails }) => {

  return (
    <div className="space-y-2">
-      <h6 className="font-medium text-custom-text-200">
+      <h6 className="font-medium text-neutral-text-medium">
        {issueDetails.project_detail.identifier}-{issueDetails.sequence_id}
      </h6>
      <h4 className="break-words text-2xl font-semibold">{issueDetails.name}</h4>
--- a/space/components/issues/peek-overview/issue-emoji-reactions.tsx
+++ b/space/components/issues/peek-overview/issue-emoji-reactions.tsx
@@ -84,17 +84,17 @@ export const IssueEmojiReactions: React.FC = observer(() => {
                      handleReactionClick(reaction);
                    });
                  }}
-                  className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-custom-text-100 ${
+                  className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-neutral-text-strong ${
                    reactions?.some((r) => r.actor_detail.id === user?.id && r.reaction === reaction)
-                      ? "bg-custom-primary-100/10"
-                      : "bg-custom-background-80"
+                      ? "bg-primary-solid/10"
+                      : "bg-neutral-component-surface-dark"
                  }`}
                >
                  <span>{renderEmoji(reaction)}</span>
                  <span
                    className={
                      reactions?.some((r) => r.actor_detail.id === user?.id && r.reaction === reaction)
-                        ? "text-custom-primary-100"
+                        ? "text-primary-text-subtle"
                        : ""
                    }
                  >
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Aaryan Khandelwal	513b5b743f	fix: merge conflicts resolved from develop	2024-02-17 15:01:05 +05:30
Aaryan Khandelwal	03bcb57aaa	refactor: tailwind config	2024-02-11 01:39:41 +05:30
Aaryan Khandelwal	dbab4807fa	Merge branch 'dev/theming' of https://github.com/makeplane/plane into dev/theming	2024-02-09 22:23:08 +05:30
Aaryan Khandelwal	32dcf6cca5	chore: updated primary colors	2024-02-09 22:22:56 +05:30
Anmol Singh Bhatia	b649825920	chore: saturated color shades added	2024-02-09 19:25:26 +05:30
Aaryan Khandelwal	e000e7eedd	fix: merge conflicts resolved from develop	2024-02-09 16:46:40 +05:30
Aaryan Khandelwal	14664073ac	fix: merge conflicts resolved from develop	2024-02-09 16:34:11 +05:30
Aaryan Khandelwal	6b68f1510e	chore: updated button component and tailwind config implementation	2024-02-09 16:12:42 +05:30
Aaryan Khandelwal	146d4e72a4	chore: updated page and component backgrounds	2024-02-09 13:01:46 +05:30
Aaryan Khandelwal	2e444c1426	fix: merge conflicts resolved from develop	2024-02-08 23:47:15 +05:30
Aaryan Khandelwal	f74138f931	chore: replace css variables	2024-02-08 20:05:52 +05:30
Aaryan Khandelwal	fd52712983	chore: update primary text color	2024-02-08 19:21:08 +05:30
Aaryan Khandelwal	8dd5776e69	chore: update text colors	2024-02-08 18:23:13 +05:30
Aaryan Khandelwal	52d1db26ea	chore: update border colors	2024-02-08 17:49:45 +05:30
Aaryan Khandelwal	5e110e2684	fix: merge conflicts resolved from develop	2024-02-08 15:57:20 +05:30
Aaryan Khandelwal	084669e658	chore: update background colors	2024-01-30 12:16:21 +05:30
Aaryan Khandelwal	92ab1ea164	chore: update sidebar border colors	2024-01-29 19:53:46 +05:30
Aaryan Khandelwal	9b0e280d89	chore: updated priority icon	2024-01-29 15:53:24 +05:30
Aaryan Khandelwal	ff803f2b6a	chore: update main content border colors	2024-01-29 13:47:56 +05:30
Aaryan Khandelwal	79b8083448	chore: update tailwind config	2024-01-29 12:56:31 +05:30