diff --git a/examples/bullet/basic/demo/basic.ts b/examples/bullet/basic/demo/basic.ts
index 1a94cd75c7..0452974407 100644
--- a/examples/bullet/basic/demo/basic.ts
+++ b/examples/bullet/basic/demo/basic.ts
@@ -16,9 +16,9 @@ const bulletPlot = new Bullet('container', {
   targetField: 'target',
   xField: 'title',
   color: {
-    range: '#5B8FF9',
-    measure: '#5B8FF9',
-    target: '#5B8FF9',
+    range: '#f0fbff',
+    measure: '#1890ff',
+    target: '#43a5ff',
   },
   xAxis: {
     line: null,
@@ -32,12 +32,12 @@ const bulletPlot = new Bullet('container', {
       {
         value: '实际值',
         name: '实际值',
-        marker: { symbol: 'square', style: { fill: '#5B8FF9', r: 5 } },
+        marker: { symbol: 'square', style: { fill: '#1890ff', r: 5 } },
       },
       {
         value: '目标值',
         name: '目标值',
-        marker: { symbol: 'line', style: { stroke: '#5B8FF9', r: 5 } },
+        marker: { symbol: 'line', style: { stroke: '#43a5ff', r: 5 } },
       },
     ],
   },
diff --git a/examples/bullet/basic/demo/color.ts b/examples/bullet/basic/demo/color.ts
index 2caf29eff8..b7a0715466 100644
--- a/examples/bullet/basic/demo/color.ts
+++ b/examples/bullet/basic/demo/color.ts
@@ -16,9 +16,9 @@ const bulletPlot = new Bullet('container', {
   targetField: 'target',
   xField: 'title',
   color: {
-    range: ['#FFB1AC', '#FFDBA2', '#B4EBBF'],
-    measure: '#5B8FF9',
-    target: '#5B8FF9',
+    range: ['#FFbcb8', '#FFe0b0', '#bfeec8'],
+    measure: '#1890ff',
+    target: '#39a3f4',
   },
   xAxis: {
     line: null,
@@ -35,27 +35,27 @@ const bulletPlot = new Bullet('container', {
       {
         value: '差',
         name: '差',
-        marker: { symbol: 'square', style: { fill: '#FFB1AC', r: 5 } },
+        marker: { symbol: 'square', style: { fill: '#FFbcb8', r: 5 } },
       },
       {
         value: '良',
         name: '良',
-        marker: { symbol: 'square', style: { fill: '#FFDBA2', r: 5 } },
+        marker: { symbol: 'square', style: { fill: '#FFe0b0', r: 5 } },
       },
       {
         value: '优',
         name: '优',
-        marker: { symbol: 'square', style: { fill: '#B4EBBF', r: 5 } },
+        marker: { symbol: 'square', style: { fill: '#bfeec8', r: 5 } },
       },
       {
         value: '实际值',
         name: '实际值',
-        marker: { symbol: 'square', style: { fill: '#5B8FF9', r: 5 } },
+        marker: { symbol: 'square', style: { fill: '#1890ff', r: 5 } },
       },
       {
         value: '目标值',
         name: '目标值',
-        marker: { symbol: 'line', style: { stroke: '#5B8FF9', r: 5 } },
+        marker: { symbol: 'line', style: { stroke: '#39a3f4', r: 5 } },
       },
     ],
   },
diff --git a/examples/bullet/basic/demo/grouped.ts b/examples/bullet/basic/demo/grouped.ts
index 2fa3d2f3f4..ad838ee037 100644
--- a/examples/bullet/basic/demo/grouped.ts
+++ b/examples/bullet/basic/demo/grouped.ts
@@ -34,9 +34,9 @@ const bulletPlot = new Bullet('container', {
   targetField: 'target',
   xField: 'title',
   color: {
-    range: ['#FFB1AC', '#FFDBA2', '#B4EBBF'],
-    measure: '#5B8FF9',
-    target: '#5B8FF9',
+    range: ['#FFbcb8', '#FFe0b0', '#bfeec8'],
+    measure: '#1890ff',
+    target: '#39a3f4',
   },
   label: {
     measure: {
@@ -58,27 +58,27 @@ const bulletPlot = new Bullet('container', {
       {
         value: '差',
         name: '差',
-        marker: { symbol: 'square', style: { fill: '#FFB1AC', r: 5 } },
+        marker: { symbol: 'square', style: { fill: '#FFbcb8', r: 5 } },
       },
       {
         value: '良',
         name: '良',
-        marker: { symbol: 'square', style: { fill: '#FFDBA2', r: 5 } },
+        marker: { symbol: 'square', style: { fill: '#FFe0b0', r: 5 } },
       },
       {
         value: '优',
         name: '优',
-        marker: { symbol: 'square', style: { fill: '#B4EBBF', r: 5 } },
+        marker: { symbol: 'square', style: { fill: '#bfeec8', r: 5 } },
       },
       {
         value: '实际值',
         name: '实际值',
-        marker: { symbol: 'square', style: { fill: '#5B8FF9', r: 5 } },
+        marker: { symbol: 'square', style: { fill: '#1890ff', r: 5 } },
       },
       {
         value: '目标值',
         name: '目标值',
-        marker: { symbol: 'line', style: { stroke: '#5B8FF9', r: 5 } },
+        marker: { symbol: 'line', style: { stroke: '#39a3f4', r: 5 } },
       },
     ],
   },
diff --git a/examples/bullet/basic/demo/layout.ts b/examples/bullet/basic/demo/layout.ts
index f8e98d5309..e96f03946f 100644
--- a/examples/bullet/basic/demo/layout.ts
+++ b/examples/bullet/basic/demo/layout.ts
@@ -17,9 +17,9 @@ const bulletPlot = new Bullet('container', {
   targetField: 'target',
   xField: 'title',
   color: {
-    range: '#5B8FF9',
-    measure: '#5B8FF9',
-    target: '#5B8FF9',
+    range: '#f0fbff',
+    measure: '#1890ff',
+    target: '#43a5ff',
   },
   xAxis: {
     line: null,
@@ -42,12 +42,12 @@ const bulletPlot = new Bullet('container', {
       {
         value: '实际值',
         name: '实际值',
-        marker: { symbol: 'square', style: { fill: '#5B8FF9', r: 5 } },
+        marker: { symbol: 'square', style: { fill: '#1890ff', r: 5 } },
       },
       {
         value: '目标值',
         name: '目标值',
-        marker: { symbol: 'line', style: { stroke: '#5B8FF9', r: 5 } },
+        marker: { symbol: 'line', style: { stroke: '#43a5ff', r: 5 } },
       },
     ],
   },
diff --git a/examples/bullet/basic/demo/stacked.ts b/examples/bullet/basic/demo/stacked.ts
index 5fcdf8d7b2..0db693dcc0 100644
--- a/examples/bullet/basic/demo/stacked.ts
+++ b/examples/bullet/basic/demo/stacked.ts
@@ -16,9 +16,9 @@ const bulletPlot = new Bullet('container', {
   targetField: 'target',
   xField: 'title',
   color: {
-    range: ['#FFB1AC', '#FFDBA2', '#B4EBBF'],
-    measure: ['#5B8FF9', '#5AD8A6'],
-    target: '#5B8FF9',
+    range: ['#FFbcb8', '#FFe0b0', '#bfeec8'],
+    measure: '#1890ff',
+    target: '#39a3f4',
   },
   label: {
     measure: {
@@ -44,17 +44,17 @@ const bulletPlot = new Bullet('container', {
       {
         value: '差',
         name: '差',
-        marker: { symbol: 'square', style: { fill: '#FFB1AC', r: 5 } },
+        marker: { symbol: 'square', style: { fill: '#FFbcb8', r: 5 } },
       },
       {
         value: '良',
         name: '良',
-        marker: { symbol: 'square', style: { fill: '#FFDBA2', r: 5 } },
+        marker: { symbol: 'square', style: { fill: '#FFe0b0', r: 5 } },
       },
       {
         value: '优',
         name: '优',
-        marker: { symbol: 'square', style: { fill: '#B4EBBF', r: 5 } },
+        marker: { symbol: 'square', style: { fill: '#bfeec8', r: 5 } },
       },
       {
         value: '第一季度',
@@ -64,12 +64,12 @@ const bulletPlot = new Bullet('container', {
       {
         value: '第二季度',
         name: '第二季度',
-        marker: { symbol: 'square', style: { fill: ' #5AD8A6', r: 5 } },
+        marker: { symbol: 'square', style: { fill: ' #1890ff', r: 5 } },
       },
       {
         value: '目标值',
         name: '目标值',
-        marker: { symbol: 'line', style: { stroke: '#5B8FF9', r: 5 } },
+        marker: { symbol: 'line', style: { stroke: '#39a3f4', r: 5 } },
       },
     ],
   },
diff --git a/examples/general/state/demo/meta.json b/examples/general/state/demo/meta.json
index c78b64b1aa..e084cd4a06 100644
--- a/examples/general/state/demo/meta.json
+++ b/examples/general/state/demo/meta.json
@@ -10,7 +10,7 @@
         "zh": "自定义设置状态样式",
         "en": "Custom state style"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*wmldRZZj9lIAAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*7hXwSaRxeYwAAAAAAAAAAAAAARQnAQ"
     },
     {
       "filename": "set-state.ts",
@@ -18,7 +18,7 @@
         "zh": "设置状态",
         "en": "Set state"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*y8zjS5DZib8AAAAAAAAAAAAAARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*Bd2ITJ6tjIEAAAAAAAAAAAAAARQnAQ"
     }
   ]
 }
diff --git a/examples/heatmap/density/demo/basic.ts b/examples/heatmap/density/demo/basic.ts
index f3c459ddf1..1fac402b8e 100644
--- a/examples/heatmap/density/demo/basic.ts
+++ b/examples/heatmap/density/demo/basic.ts
@@ -9,7 +9,10 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/heatmap.json')
       xField: 'g',
       yField: 'l',
       colorField: 'tmp',
-      color: '#F51D27-#FA541C-#FF8C12-#FFC838-#FAFFA8-#80FF73-#12CCCC-#1890FF-#6E32C2',
+      color: '#c6e5ff-#9ec9ff-#7cabff-#5b8ff9-#3474db-#005cbe-#00419f-#00287e',
+      legend: {
+        position: 'bottom',
+      },
       annotations: [
         {
           type: 'image',