diff --git a/.storybook/main.js b/.storybook/main.js
index da0aeed..3ba2188 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -3,7 +3,7 @@ const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 module.exports = {
   stories: ['../docs/**/*.stories.tsx', '../docs/**/*.stories.tsx'],
 
-  addons: ['@storybook/addon-docs'],
+  addons: ['@storybook/addon-docs', 'storybook-addon-outline', '@storybook/addon-storysource'],
 
   babel: async (config) => {
     config.plugins.push('babel-plugin-styled-components');
diff --git a/docs/box.stories.tsx b/docs/box.stories.tsx
index 639da1e..d5e97de 100644
--- a/docs/box.stories.tsx
+++ b/docs/box.stories.tsx
@@ -8,8 +8,14 @@ export default {
 };
 
 export const Basic = () => (
-  <Box display="inline-block" bg="gray.100" color="gray.10" p="l" borderRadius="s">
-    Hello World
+  <Box as="button" bg="#FF0000" color="#FFFFFF" fontSize="14px" px="12px" py="4px" border="0" borderRadius="99px">
+    Button
+  </Box>
+);
+
+export const ButtonWithToken = () => (
+  <Box as="button" bg="brand" color="white" fontSize="title" px="xl" py="m" border="0" borderRadius="99px">
+    Button
   </Box>
 );
 
diff --git a/docs/theme.stories.tsx b/docs/theme.stories.tsx
index 1232ca7..f239493 100644
--- a/docs/theme.stories.tsx
+++ b/docs/theme.stories.tsx
@@ -1,100 +1,26 @@
-import React, { useMemo } from 'react';
-import { defaultTheme, Text, Box, Flex, FlexItem } from 'coral-system';
+import React from 'react';
+import { Box, extendTheme, SystemProvider } from 'coral-system';
 
 export default {
   title: 'Theme',
 };
 
-const renderColor = (value: string) => <Box display="inline-block" size="32px" bg={value} />;
-const renderFontSizes = (value: string) => <Text fontSize={value}>Hello World, 你好世界</Text>;
-const renderBorders = (value: string) => (
-  <Box display="inline-block" height="32px" width="60px" borderColor="black" border={value} />
-);
-const renderRadii = (value: string) => (
-  <Box display="inline-block" size="32px" bg="brand" border="solid" borderColor="brand" borderRadius={value} />
-);
-const renderShadows = (value: string) => <Box height="32px" width="60px" bg="white" boxShadow={value}></Box>;
-const renderSpace = (value: string) => (
-  <Flex display="inline-flex" spacing={value}>
-    {renderColor('brand')}
-    {renderColor('brand')}
-    {renderColor('brand')}
-  </Flex>
-);
-
-const renderMap = {
-  colors: renderColor,
-  fontSizes: renderFontSizes,
-  borders: renderBorders,
-  radii: renderRadii,
-  shadows: renderShadows,
-  space: renderSpace,
-  default: (): React.ReactNode => null,
-};
-
-function TokenBlock({
-  name,
-  value,
-  renderBlock = () => null,
-}: {
-  name: string;
-  value: string;
-  renderBlock?: (value: string) => React.ReactNode;
-}) {
+const newTheme = extendTheme({
+  colors: {
+    custom: {
+      bg: '#333',
+      color: '#fff',
+    },
+  },
+});
+
+export const Basic = () => {
+  // 自定义颜色必须使用完整的路径
   return (
-    <Flex px="l" py="s" borderBottom="solid" borderBottomColor="line.normal">
-      <FlexItem>{name}</FlexItem>
-      <FlexItem>{value}</FlexItem>
-      <FlexItem display="flex" alignItems="center">
-        {renderBlock(value)}
-      </FlexItem>
-    </Flex>
-  );
-}
-
-function TokenGroup({ title, tokens }: { title: string; tokens: Record<string, any> }) {
-  const collecting = useMemo(() => {
-    let memo = {};
-
-    const parseToken = (value: any, prefix: string) => {
-      if (typeof value === 'string') {
-        memo[prefix] = value;
-      }
-
-      if (typeof value === 'object') {
-        Object.keys(value).forEach((v) => {
-          parseToken(value[v], `${prefix}-${v}`);
-        });
-      }
-    };
-
-    parseToken(tokens, title);
-
-    return memo;
-  }, [tokens, title]);
-
-  const renderBlock = renderMap[title] || renderMap.default;
-
-  return (
-    <Box border="solid" borderColor="line.normal" mb="l">
-      <Box px="l" py="m" borderBottom="solid" borderBottomColor="line.normal" fontWeight="bold" fontSize="title">
-        {title}
-      </Box>
-      <Box>
-        {Object.keys(collecting).map((token) => (
-          <TokenBlock key={token} name={token} value={collecting[token]} renderBlock={renderBlock} />
-        ))}
+    <SystemProvider theme={newTheme}>
+      <Box bg="colors.custom.bg" color="colors.custom.color">
+        hello world
       </Box>
-    </Box>
+    </SystemProvider>
   );
-}
-
-export function Basic() {
-  return (
-    <Box fontSize="14px" color="text.normal">
-      {Object.keys(defaultTheme).map((key) => (
-        <TokenGroup key={key} title={key} tokens={defaultTheme[key]} />
-      ))}
-    </Box>
-  );
-}
+};
diff --git a/docs/tokens.stories.tsx b/docs/tokens.stories.tsx
new file mode 100644
index 0000000..3c222db
--- /dev/null
+++ b/docs/tokens.stories.tsx
@@ -0,0 +1,100 @@
+import React, { useMemo } from 'react';
+import { defaultTheme, Text, Box, Flex, FlexItem } from 'coral-system';
+
+export default {
+  title: 'Design Tokens',
+};
+
+const renderColor = (value: string) => <Box display="inline-block" size="32px" bg={value} />;
+const renderFontSizes = (value: string) => <Text fontSize={value}>Hello World, 你好世界</Text>;
+const renderBorders = (value: string) => (
+  <Box display="inline-block" height="32px" width="60px" borderColor="black" border={value} />
+);
+const renderRadii = (value: string) => (
+  <Box display="inline-block" size="32px" bg="brand" border="solid" borderColor="brand" borderRadius={value} />
+);
+const renderShadows = (value: string) => <Box height="32px" width="60px" bg="white" boxShadow={value}></Box>;
+const renderSpace = (value: string) => (
+  <Flex display="inline-flex" spacing={value}>
+    {renderColor('brand')}
+    {renderColor('brand')}
+    {renderColor('brand')}
+  </Flex>
+);
+
+const renderMap = {
+  colors: renderColor,
+  fontSizes: renderFontSizes,
+  borders: renderBorders,
+  radii: renderRadii,
+  shadows: renderShadows,
+  space: renderSpace,
+  default: (): React.ReactNode => null,
+};
+
+function TokenBlock({
+  name,
+  value,
+  renderBlock = () => null,
+}: {
+  name: string;
+  value: string;
+  renderBlock?: (value: string) => React.ReactNode;
+}) {
+  return (
+    <Flex px="l" py="s" borderBottom="solid" borderBottomColor="line.normal">
+      <FlexItem>{name}</FlexItem>
+      <FlexItem>{value}</FlexItem>
+      <FlexItem display="flex" alignItems="center">
+        {renderBlock(value)}
+      </FlexItem>
+    </Flex>
+  );
+}
+
+function TokenGroup({ title, tokens }: { title: string; tokens: Record<string, any> }) {
+  const collecting = useMemo(() => {
+    let memo = {};
+
+    const parseToken = (value: any, prefix: string) => {
+      if (typeof value === 'string') {
+        memo[prefix] = value;
+      }
+
+      if (typeof value === 'object') {
+        Object.keys(value).forEach((v) => {
+          parseToken(value[v], `${prefix}-${v}`);
+        });
+      }
+    };
+
+    parseToken(tokens, title);
+
+    return memo;
+  }, [tokens, title]);
+
+  const renderBlock = renderMap[title] || renderMap.default;
+
+  return (
+    <Box border="solid" borderColor="line.normal" mb="l">
+      <Box px="l" py="m" borderBottom="solid" borderBottomColor="line.normal" fontWeight="bold" fontSize="title">
+        {title}
+      </Box>
+      <Box>
+        {Object.keys(collecting).map((token) => (
+          <TokenBlock key={token} name={token} value={collecting[token]} renderBlock={renderBlock} />
+        ))}
+      </Box>
+    </Box>
+  );
+}
+
+export function Basic() {
+  return (
+    <Box fontSize="14px" color="text.normal">
+      {Object.keys(defaultTheme).map((key) => (
+        <TokenGroup key={key} title={key} tokens={defaultTheme[key]} />
+      ))}
+    </Box>
+  );
+}
diff --git a/package.json b/package.json
index 3df22d8..09c0cee 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coral-system",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "a lightweight style system with react ui primitives",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
@@ -47,6 +47,7 @@
     "@babel/preset-env": "^7.16.4",
     "@babel/preset-typescript": "^7.16.0",
     "@storybook/addon-docs": "^6.4.0",
+    "@storybook/addon-storysource": "^6.4.0",
     "@storybook/addons": "^6.4.0",
     "@storybook/react": "^6.4.0",
     "@storybook/storybook-deployer": "^2.8.10",
@@ -67,6 +68,7 @@
     "np": "^7.6.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "storybook-addon-outline": "^1.4.1",
     "styled-components": "^5.3.3",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.5.2"
diff --git a/src/theme.ts b/src/theme.ts
index e76ef10..1347dc9 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -20,9 +20,10 @@ type ThemeColorsType = {
   white?: string;
   brand?: string;
   highlight?: string;
-  text?: PartialRecord<'normal' | 'secondary', string>;
-  background?: PartialRecord<'normal', string>;
-  line?: PartialRecord<'normal', string>;
+  text?: Record<string, string>;
+  background?: Record<string, string>;
+  line?: Record<string, string>;
+  custom?: Record<string, string>;
 };
 
 export type ThemeType = {
@@ -180,11 +181,3 @@ export const defaultTheme: ThemeType = {
 export function extendTheme(overrides: ThemeType, baseTheme = defaultTheme) {
   return mergeWith({}, baseTheme, overrides);
 }
-
-extendTheme({
-  colors: {
-    primary: {
-      10: '#Fff',
-    },
-  },
-});
diff --git a/yarn.lock b/yarn.lock
index fc0783b..45878ff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2417,7 +2417,7 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/addons@6.4.0", "@storybook/addons@^6.4.0":
+"@storybook/addons@6.4.0", "@storybook/addons@^6.3.0", "@storybook/addons@^6.4.0":
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.4.0.tgz#a8bf56c282f14627415d272ab594007f0fadc510"
   integrity sha512-57IaMaG3FBK+SC8k/6i1GvLUFtNGfSISEMTJUd5qZszXj0Y5NhhBOTgz0Bb5l4zJJ6kHwP0eCcWi0ulV7nVsqw==
@@ -2434,7 +2434,7 @@
     global "^4.4.0"
     regenerator-runtime "^0.13.7"
 
-"@storybook/api@6.4.0":
+"@storybook/api@6.4.0", "@storybook/api@^6.3.0":
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.4.0.tgz#2b38da7605ff6a2c8f9f44d17c45084740ebf6ea"
   integrity sha512-7/+eHMsQOf0DoQWR7FVYRzLK2JoG+q5RytW9AgpTOJXELONC9/ewKSQdN3X6/WxNc+a9ycxWvTJPPR5m5jMb3A==
@@ -2600,7 +2600,7 @@
     core-js "^3.8.2"
     global "^4.4.0"
 
-"@storybook/components@6.4.0":
+"@storybook/components@6.4.0", "@storybook/components@^6.3.0":
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.4.0.tgz#36f443bf43e3a5d23fa8a4968f3d0583c4f63688"
   integrity sha512-IgmekBeBVHbYnG7aIEScHShoKIz2X/uY7In8njfO0Exj9Tw6n/yB1UVm34ABTkiKW+ApF/acO0BPXuv/Cuseug==
@@ -2711,7 +2711,7 @@
     util-deprecate "^1.0.2"
     webpack "4"
 
-"@storybook/core-events@6.4.0":
+"@storybook/core-events@6.4.0", "@storybook/core-events@^6.3.0":
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.4.0.tgz#880aa674b12aa2fd5f284a5c9bdcc55a1f3d5432"
   integrity sha512-uOwLYt95J6U5BUgw/e9KGRw1jBq6vyoLUG4GZbPc7a9DLmES31zpqpKaFPAUoYel/TPUHgTLlKRIg8uyjv9vLg==
@@ -11386,6 +11386,17 @@ store2@^2.12.0:
   resolved "https://registry.yarnpkg.com/store2/-/store2-2.12.0.tgz#e1f1b7e1a59b6083b2596a8d067f6ee88fd4d3cf"
   integrity sha512-7t+/wpKLanLzSnQPX8WAcuLCCeuSHoWdQuh9SB3xD0kNOM38DNf+0Oa+wmvxmYueRzkmh6IcdKFtvTa+ecgPDw==
 
+storybook-addon-outline@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/storybook-addon-outline/-/storybook-addon-outline-1.4.1.tgz#0a1b262b9c65df43fc63308a1fdbd4283c3d9458"
+  integrity sha512-Qvv9X86CoONbi+kYY78zQcTGmCgFaewYnOVR6WL7aOFJoW7TrLiIc/O4hH5X9PsEPZFqjfXEPUPENWVUQim6yw==
+  dependencies:
+    "@storybook/addons" "^6.3.0"
+    "@storybook/api" "^6.3.0"
+    "@storybook/components" "^6.3.0"
+    "@storybook/core-events" "^6.3.0"
+    ts-dedent "^2.1.1"
+
 stream-browserify@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"
@@ -11925,7 +11936,7 @@ trough@^1.0.0:
   resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
   integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
 
-ts-dedent@^2.0.0:
+ts-dedent@^2.0.0, ts-dedent@^2.1.1:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.2.0.tgz#39e4bd297cd036292ae2394eb3412be63f563bb5"
   integrity sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==