diff --git a/src/components/designer/custom/NodeInner.tsx b/src/components/designer/custom/NodeInner.tsx
index bf1f75b7c..ea56f6b46 100644
--- a/src/components/designer/custom/NodeInner.tsx
+++ b/src/components/designer/custom/NodeInner.tsx
@@ -6,9 +6,9 @@ import { Loader, StatusBadge } from 'components/common';
 
 const Styled = {
   Node: styled.div<{ size?: ISize }>`
-    border: 1px solid #232323;
+    border: 1px solid #303030;
     border-radius: 2px;
-    background-color: #141414;
+    background-color: #1f1f1f;
     padding: 20px;
     font-weight: bold;
     display: flex;
diff --git a/src/components/designer/custom/Port.tsx b/src/components/designer/custom/Port.tsx
index 109df7ab8..49ab5e41f 100644
--- a/src/components/designer/custom/Port.tsx
+++ b/src/components/designer/custom/Port.tsx
@@ -6,9 +6,9 @@ import { Tooltip } from 'antd';
 const Outer = styled.div<{ type: string }>`
   width: 18px;
   height: 18px;
-  ${props => props.type && `border-${props.type}: 2px solid #232323;`}
+  ${props => props.type && `border-${props.type}: 2px solid #303030;`}
   border-radius: 50%;
-  background: #141414;
+  background: #1f1f1f;
   cursor: pointer;
   display: flex;
   justify-content: center;