diff --git a/packages/design-system/src/stories/foundation/colors/ColorSystem.tsx b/packages/design-system/src/stories/foundation/colors/ColorSystem.tsx
index 7068a851..db100d4c 100644
--- a/packages/design-system/src/stories/foundation/colors/ColorSystem.tsx
+++ b/packages/design-system/src/stories/foundation/colors/ColorSystem.tsx
@@ -1,72 +1,82 @@
import React from "react";
-import { Box, Grid } from "@mui/material";
+import { Box, Grid, styled } from "@mui/material";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+
+const ColorBox = styled(Box)(({ theme }) => ({
+ textAlign: "center",
+ padding: "4px 0",
+ fontSize: "14px !important",
+ marginTop: "5px !important",
+}));
+
+const BlockBox = styled(Box)(({ theme }) => ({
+ backgroundColor: "#d7d3d3",
+ textAlign: "center",
+ display: "flex",
+ flexDirection: "column",
+ flex: "auto",
+ padding: "10px",
+}));
const ColorSystem = () => {
return (
-색상 코드 값(ex: hex, rgb값) → Global Palette(ex: Red10, Blue40..) → Token(ex: bg_01, btn_text_primary)
+**색상 코드 값** (ex: hex, rgb값) → **Global Palette** (ex: Red10, Blue40..) → **Token** (ex: bg_01, btn_text_primary)
+> [Component token의 종류(link)](?path=/story/foundation-colors--component-tokens)
-- **Core Token** : background, text 와 같이 범용적으로 적용되는 UI 에서 사용하는 컬러 토큰
+- **Core Token** : background, text 색상과 같이 범용적으로 적용되는 UI 에서 사용하는 컬러 토큰
- **Component Token** : button, chip 등과 같이 특정 컴포넌트 안에서만 사용하는 컬러 토큰
-- 색상 코드나 Global Color 대신 Color Token 을 이용하는 것을 권장
-- Color Token의 색상은 해당 컴포넌트를 둘러싸고 있는 Base Wrapper에 의해 결정
-- Token은 각각 4가지 테마(Light1,2, Dark1,2) 별 색상을 가지고 있음.
-
+- 색상 코드나 Global Color 대신 _Color Token 을 이용하는 것_ 을 권장한다.
+- Color Token은 4가지 테마(Light1,2, Dark1,2) 별 색상을 가지고 있고, **해당 컴포넌트를 둘러싸고 있는 Base Wrapper** 에 의해 테마가 결정된다.
## Color Token에 테마를 부여하는 Base Wrapper
-- Base Layer 라고도 부름
-- Color token 에 컨텍스트(테마)를 부여해주는 wrapper
-- Light1, 2, Dark1, 2 네 가지 종류
-- 해당 wrapper 의 하위 컬러 토큰은 wrapper 의 컨텍스트(테마)의 색상을 보여줌
-- wrapper 가 중첩되었을 때 컬러 토큰은 바로 상위 부모 wrapper 의 컨텍스트를 따라감
+- Color token에 테마를 부여해주는 wrapper로, Base Layer 라고도 부른다.
+- Base Wrapper 설정은 **컴포넌트 className에 테마 이름을 추가하는 방식** 으로 이루어진다.
+ - ex) `