diff --git a/src/styles/common-style/index.js b/src/styles/common-style/index.js
new file mode 100644
index 000000000..ca99b4865
--- /dev/null
+++ b/src/styles/common-style/index.js
@@ -0,0 +1,33 @@
+export default {
+  fontFamily: 'naive-ui, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+  monoFontFamily: 'naive-ui-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace',
+
+  strongFontWeight: '500',
+
+  easeInOutCubicBezier: 'cubic-bezier(.4, 0, .2, 1)',
+  easeOutCubicBezier: 'cubic-bezier(0, 0, .2, 1)',
+  easeInCubicBezier: 'cubic-bezier(.4, 0, 1, 1)',
+
+  borderRadius: '3px',
+  lightBorderRadius: '2px',
+
+  lineHeight: '1.75',
+
+  tinyHeight: '22px',
+  smallHeight: '28px',
+  mediumHeight: '34px',
+  largeHeight: '40px',
+  hugeHeight: '46px',
+
+  tinyFontSize: '13px',
+  smallFontSize: '14px',
+  mediumFontSize: '14px',
+  largeFontSize: '15px',
+  hugeFontSize: '16px',
+
+  iconTransition: 'fill .3s $--n-ease-in-out-cubic-bezier, stroke .3s $--n-ease-in-out-cubic-bezier',
+
+  transformDebounceScale: 'scale(0.99999)',
+
+  popmenuBoxShadow: '0px 2px 12px 0px rgba(0, 0, 0, 0.18)'
+}
diff --git a/src/styles/dark/base.js b/src/styles/dark/base.js
index 3f2ab646c..9e1efaea4 100644
--- a/src/styles/dark/base.js
+++ b/src/styles/dark/base.js
@@ -1,14 +1,172 @@
-import create from '../utils/create-theme-base'
+import create from '../utils/create-theme-base.js'
+import { read, composite } from '../../_utils/color/index.js'
+import commonVariables from '../common-style/index.js'
 
 export default create({
-  base: {
-    baseBackgroundColor: 'rgb(255, 255, 255)'
+  getBaseVariables () {
+    return Object.assign({
+      neutralBase: '#000',
+      neutralInvertBase: '#fff',
+      neutralTextBase: '#fff',
+      neutralPopover: 'rgb(72, 72, 78)',
+      neutralCard: 'rgb(24, 24, 28)',
+      neutralModal: 'rgb(44, 44, 50)',
+      neutralBody: 'rgb(16, 16, 20)',
+
+      alpha1: '0.9',
+      alpha2: '0.82',
+      alpha3: '0.52',
+      alpha4: '0.38',
+
+      alphaDisabled: '0.6',
+      alphaDisabledFill: '0.06',
+      alphaPending: '0.09',
+      alphaTablePending: '0.06',
+      alphaActive: '0.03',
+
+      alphaAvatar: '0.18',
+      alphaRail: '0.20',
+      alphaBorder: '0.24',
+      alphaDivider: '0.09',
+      alphaInput: '0.1',
+      alphaAction: '0.06',
+      alphaTab: '0.1',
+      alphaScrollbar: '0.2',
+      alphaScrollbarHover: '0.3',
+      alphaCode: '0.12',
+      alphaTag: '0',
+
+      // primary
+      primaryHover: '#7fe7c4',
+      primaryDefault: '#63e2b7',
+      primaryActive: '#5acea7',
+      primaryHs: 'rgb(42, 148, 125)',
+
+      // info
+      infoHover: '#8acbec',
+      infoDefault: '#70c0e8',
+      infoActive: '#66afd3',
+      infoHs: 'rgb(56, 137, 197)',
+
+      // error
+      errorHover: '#e98b8b',
+      errorDefault: '#e88080',
+      errorActive: '#e57272',
+      errorHs: 'rgb(208, 58, 82)',
+
+      // warning
+      warningHover: '#f5d599',
+      warningDefault: '#f2c97d',
+      warningActive: '#e6c260',
+      warningHs: 'rgb(240, 138, 0)',
+
+      // success
+      successHover: '#7fe7c4',
+      successDefault: '#63e2b7',
+      successActive: '#5acea7',
+      successHs: 'rgb(42, 148, 125)'
+    }, commonVariables)
   },
   getDerivedVariables (base) {
+    const baseBackgroundRgb = read(base.neutralBase)
+    const baseInvertBackgroundRgb = read(base.neutralInvertBase)
+    const overlayPrefix = 'rgba(' + baseInvertBackgroundRgb.slice(0, 3).join(', ') + ', '
+    function overlay (alpha) {
+      return overlayPrefix + String(alpha) + ')'
+    }
+    function neutral (alpha) {
+      const overlayRgba = Array.from(baseInvertBackgroundRgb)
+      overlayRgba[3] = Number(alpha)
+      return composite(baseBackgroundRgb, overlayRgba)
+    }
     const derived = {
+      baseBackgroundColor: base.neutralBase,
+
+      // primary color
       primaryColor: base.primaryDefault,
       primaryHoverColor: base.primaryHover,
-      primaryActiveColor: base.primaryActive
+      primaryActiveColor: base.primaryActive,
+      primaryHsColor: base.primaryHs,
+      // info color
+      infoColor: base.infoDefault,
+      infoHoverColor: base.infoHover,
+      infoActiveColor: base.infoActive,
+      infoHsColor: base.infoHs,
+      // success color
+      successColor: base.successDefault,
+      successHoverColor: base.successHover,
+      successActiveColor: base.successActive,
+      successHsColor: base.successHs,
+      // warning color
+      warningColor: base.warningDefault,
+      warningHoverColor: base.warningHover,
+      warningActiveColor: base.warningActive,
+      warningHsColor: base.warningHs,
+      // error color
+      errorColor: base.errorDefault,
+      errorHoverColor: base.errorHover,
+      errorActiveColor: base.errorActive,
+      errorHsColor: base.errorHs,
+      // text color
+      baseTextColor: base.neutralTextBase,
+      primaryTextColor: neutral(base.alpha1),
+      primaryTextOverlayColor: overlay(base.alpha1),
+      secondaryTextColor: neutral(base.alpha2),
+      secondaryTextOverlayColor: overlay(base.alpha2),
+      tertiaryTextColor: neutral(base.alpha3),
+      tertiaryTextOverlayColor: overlay(base.alpha3),
+      quaternaryTextColor: neutral(base.alpha4), // disabled, placeholder, icon
+      quaternaryTextOverlayColor: overlay(base.alpha4),
+
+      primaryOpacity: base.alpha1,
+      secondaryOpacity: base.alpha2,
+      tertiaryOpacity: base.alpha3,
+      pendingOpacity: base.alphaPending,
+      disabledFillOpacity: base.alphaDisabledFill,
+
+      iconColor: neutral(base.alpha4),
+      iconOverlayColor: overlay(base.alpha4),
+
+      dividerColor: neutral(base.alphaDivider),
+      dividerOverlayColor: neutral(base.alphaDivider),
+      borderColor: neutral(base.alphaBorder),
+      borderOverlayColor: neutral(base.alphaBorder),
+
+      closeHoverColor: neutral(base.alpha2),
+      closeHoverOverlayColor: overlay(base.alpha2),
+      closeColor: neutral(base.alpha3),
+      closeOverlayColor: overlay(base.alpha3),
+      disabledCloseColor: neutral(base.alpha4),
+      disabledCloseHoverColor: overlay(base.alpha4),
+
+      scrollbarOverlayBackgroundColor: overlay(base.alphaScrollbar),
+      scrollbarHoverOverlayBackgroundColor: overlay(base.alphaScrollbarHover),
+
+      railBackgroundColor: neutral(base.alphaRail),
+      railOverlayBackgroundColor: overlay(base.alphaRail),
+
+      popoverBackgroundColor: base.neutralPopover,
+      tableBodyBackgroundColor: base.neutralCard,
+      cardBackgroundColor: base.neutralCard,
+      modalBackgroundColor: base.neutralModal,
+      bodyBackgroundColor: base.neutralBody,
+      tagBackgroundColor: neutral(base.alphaTag),
+
+      inputOverlayBackgroundColor: overlay(base.alphaInput),
+      codeOverlayBackgroundColor: overlay(base.alphaCode),
+      tabOverlayBackgroundColor: overlay(base.alphaTab),
+      avatarOverlayBackgroundColor: overlay(base.alphaAvatar),
+      actionOverlayBackgroundColor: overlay(base.alphaAction),
+      tableHeaderOverlayBackgroundColor: overlay(base.alphaAction),
+
+      pendingOverlayBackgroundColor: overlay(base.alphaPending),
+      tablePendingOverlayBackgroundColor: overlay(base.alphaTablePending),
+      activeOverlayBackgroundColor: overlay(base.alphaActive),
+
+      disabledOpacity: base.alphaDisabled,
+      disabledFillBackgroundColor: neutral(base.alphaDisabledFill),
+
+      messageColoredBoxShadow: null
     }
     return derived
   }
diff --git a/src/styles/light/base.js b/src/styles/light/base.js
index 6a417e8fc..e9a9f4c19 100644
--- a/src/styles/light/base.js
+++ b/src/styles/light/base.js
@@ -1,9 +1,10 @@
 import create from '../utils/create-theme-base.js'
 import { read, composite } from '../../_utils/color/index.js'
+import commonVariables from '../common-style/index.js'
 
 export default create({
   getBaseVariables () {
-    return {
+    return Object.assign({
       neutralBase: '#FFF',
       neutralInvertBase: '#000',
       neutralTextBase: '#000',
@@ -27,7 +28,7 @@ export default create({
       alphaRail: '0.14',
       alphaBorder: '0.14',
       alphaDivider: '0.08',
-      alphaInput: null,
+      alphaInput: '0',
       alphaAction: '0.02',
       alphaTab: '0.04',
       alphaScrollbar: '0.25',
@@ -64,7 +65,7 @@ export default create({
       successDefault: '#18a058',
       successActive: '#0c7a43',
       successHs: '#36ad6a'
-    }
+    }, commonVariables)
   },
   getDerivedVariables (base) {
     const baseBackgroundRgb = read(base.neutralBase)
@@ -151,7 +152,7 @@ export default create({
       bodyBackgroundColor: base.neutralBody,
       tagBackgroundColor: neutral(base.alphaTag),
 
-      inputOverlayBackgroundColor: null,
+      inputOverlayBackgroundColor: overlay(base.alphaInput),
       codeOverlayBackgroundColor: overlay(base.alphaCode),
       tabOverlayBackgroundColor: overlay(base.alphaTab),
       avatarOverlayBackgroundColor: overlay(base.alphaAvatar),