diff --git a/packages/design-system/src/stories/foundation/colors/ColorSystem.tsx b/packages/design-system/src/stories/foundation/colors/ColorSystem.tsx
new file mode 100644
index 00000000..db100d4c
--- /dev/null
+++ b/packages/design-system/src/stories/foundation/colors/ColorSystem.tsx
@@ -0,0 +1,86 @@
+import React from "react";
+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 (
+
+
+
+
+ 색상 코드 값
+ #FFFFFF
+ #00C9EA
+ #FFB3B8
+
+
+
+
+
+
+
+ Global Palette
+ grey_0
+ lunit_teal_40
+ red_20
+
+
+
+
+
+
+
+ Color Token
+ bg_01
+ btn_primary_border
+ chip_error_bg
+
+
+
+
+ );
+};
+
+export default ColorSystem;
diff --git a/packages/design-system/src/stories/foundation/colors/Docs.mdx b/packages/design-system/src/stories/foundation/colors/Docs.mdx
new file mode 100644
index 00000000..0b84d3ee
--- /dev/null
+++ b/packages/design-system/src/stories/foundation/colors/Docs.mdx
@@ -0,0 +1,185 @@
+import { Canvas, Meta } from "@storybook/blocks";
+
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import ColorSystem from './ColorSystem';
+
+import * as ColorsStories from "./Colors.stories";
+import * as TokenInComponentStories from "./Token.inComponent.stories";
+
+
+
+# Color System & Token
+
+> 루닛 디자인 시스템에서는 일관된 색상 사용을 위해 미리 색상 팔레트를 구성하고, 이를 컴포넌트나 페이지에 쉽게 적용할 수 있도록 토큰화하여 제공한다.
+
+## Color System의 구조
+루닛의 색상 시스템은 다음과 같은 구조로 이루어져 있다.
+**색상 코드 값** (ex: hex, rgb값) → **Global Palette** (ex: Red10, Blue40..) → **Token** (ex: bg_01, btn_text_primary)
+
+
+
+### Global Palette Color
+
+> [Global Palette Color의 종류(link)](?path=/story/foundation-colors--global-colors)
+- 루닛 디자인 시스템 안에서 사용할 색상을 종류와 음영으로 분류해 구성한 색상의 모음.
+- 루닛 디자인 시스템에서는 이 팔레트 안에서만 색을 이용하고, 팔레트 이외의 색상은 가급적 사용하지 않는다.
+- Global Palette의 각 항목은 색상 코드(hex값)와 1:1 대응한다.
+- Color Token은 이 Global Paltte 값과 연결된다.
+
+### Color Token
+
+> [Core token의 종류(link)](?path=/story/foundation-colors--core-tokens)
+> [Component token의 종류(link)](?path=/story/foundation-colors--component-tokens)
+
+- **Core Token** : background, text 색상과 같이 범용적으로 적용되는 UI 에서 사용하는 컬러 토큰
+- **Component Token** : button, chip 등과 같이 특정 컴포넌트 안에서만 사용하는 컬러 토큰
+- 색상 코드나 Global Color 대신 _Color Token 을 이용하는 것_ 을 권장한다.
+- Color Token은 4가지 테마(Light1,2, Dark1,2) 별 색상을 가지고 있고, **해당 컴포넌트를 둘러싸고 있는 Base Wrapper** 에 의해 테마가 결정된다.
+
+## Color Token에 테마를 부여하는 Base Wrapper
+- Color token에 테마를 부여해주는 wrapper로, Base Layer 라고도 부른다.
+- Base Wrapper 설정은 **컴포넌트 className에 테마 이름을 추가하는 방식** 으로 이루어진다.
+ - ex) `
`, ``
+- 테마의 종류 : light1, light2, dark1, dark2
+- Color token은 Base Wrapper에서 설정한 테마에 해당하는 색이 적용된다.
+- Base Wrapper를 설정하지 않으면, Color Token은 기본적으로 Dark1 테마가 적용된다.
+- Base Wrapper가 중첩되었을 때 Color Token은 _바로 상위 부모_ Wrapper의 테마를 따른다.
+ - ex)
+ ```jsx
+
+
+
+
+ ```
+
+
+## 토큰 사용법
+루닛 디자인 시스템의 컴포넌트는 이미 Color Token을 이용해 개발되어 있다. 따로 스타일 커스텀이 필요없다면 컴포넌트를 감싸는 base wrapper만 설정하면 된다.
+Color Token은 MUI theme 기반으로 구현되어, 사용법도 MUI theme를 이용하는 방식과 비슷하다.
+
+### Styled 내에서 사용법
+
+
+
+```jsx
+ const StyledTextField = styled(TextField)(({ theme }) => ({
+ "& .MuiInputBase-root": {
+ backgroundColor: theme.palette.lunit_token.component.textfield_bg,
+ color: theme.palette.lunit_token.core.text_normal,
+ "& .MuiInputBase-input": {
+ padding: "8px 16px",
+ },
+ "&.Mui-focused fieldset": {
+ borderColor: theme.palette.lunit_token.core.focused,
+ },
+ },
+ }));
+
+const InComponentWithStyled = () => {
+ return (
+ <>
+