diff --git a/ui-kit/src/stories/Styles/Colors/index.stories.mdx b/ui-kit/src/stories/Styles/Colors/index.stories.mdx
index 94cddb85..36046828 100644
--- a/ui-kit/src/stories/Styles/Colors/index.stories.mdx
+++ b/ui-kit/src/stories/Styles/Colors/index.stories.mdx
@@ -7,10 +7,12 @@ import { grayScaleNames, semanticColorNames, indexMap } from './data';
# 컬러 팔레트
-이 곳은 컬러 팔레트 입니다.
+컬러는 보편적으로 사용하는 시멘틱 컬러와 그레이 스케일로 나뉘어집니다. 각 컬러는 시각 장애가 있는 사람들도 명확하게 컬러를 인지할 수 있는 웹 접근성(WCAG 2.0)을 준수하기 위한 W3C AA 등급을 충족합니다.
## 그레이 스케일(Gray Scale)
+그레이 스케일은 총 10단계로 나뉘어지며 텍스트 컬러와 배경색에 적절하게 사용합니다.
+
{Object.keys(semanticColorNames).map((name, index) => (
@@ -94,3 +98,19 @@ import { grayScaleNames, semanticColorNames, indexMap } from './data';
))}
+
+### Positive
+
+확인, 성공과 같은 긍정적인 메세지를 명확하게 보여줄 때 사용합니다.
+
+### Informative
+
+사용자에게 정보를 제공할 때 사용합니다.
+
+### Negative
+
+오류, 주의, 실패와 같은 부정적인 메시지에 사용합니다.
+
+### Notice
+
+주의사항이나 진행이 지연되는 것을 알릴 때 사용합니다.
diff --git a/ui-kit/src/stories/Styles/Shadows/index.stories.mdx b/ui-kit/src/stories/Styles/Shadows/index.stories.mdx
index f70af087..3f97b15d 100644
--- a/ui-kit/src/stories/Styles/Shadows/index.stories.mdx
+++ b/ui-kit/src/stories/Styles/Shadows/index.stories.mdx
@@ -7,6 +7,8 @@ import { shadowTypes } from './data';
# 그림자 (Shadows)
+각 컴포넌트에는 높이값이 있습니다. 특정 컴포넌트는 다른 컴포넌트보다 높은 고도에 배치되어 모든 화면에서 일관된 위계를 설정합니다. 예를 들어, 모달 팝업은 항상 가장 위에 배치됩니다. 높이값은 표면과의 거리를 나타냅니다. 한 표면의 앞면에서 다른 표면의 앞면까지의 거리는 피그마 Drop Shadow의 Y값으로 측정되며 픽셀을 사용합니다.
+
{shadowTypes.map((shadow, index) => (
@@ -28,3 +30,5 @@ import { shadowTypes } from './data';
))}
+
+그림자는 컴포넌트 간의 높이 차이를 감지 할 수 있게 합니다. 작고 선명한 그림자는 더 크고 부드러운 그림자보다 높이가 낮음을 나타냅니다. 크고 부드러운 그림자는 더 중요한 콘텐츠를 포함하거나 팝업과 같은 주의 집중을 위해 사용합니다.
diff --git a/ui-kit/src/stories/Styles/Typography/index.stories.mdx b/ui-kit/src/stories/Styles/Typography/index.stories.mdx
index d0c7d97c..84baffe9 100644
--- a/ui-kit/src/stories/Styles/Typography/index.stories.mdx
+++ b/ui-kit/src/stories/Styles/Typography/index.stories.mdx
@@ -7,6 +7,10 @@ import { typographyNames, fontWeightNames } from './data';
# 타이포그래피
+PC와 모바일의 rem 기준 서체 크기는 16px을 사용합니다. 서체는 보편성을 위해 노토 산스를 사용합니다. 위계는 글자의 두께, 크기, 글줄 간격의 차이를 통해 전달합니다.
+
+헤딩은 화면에서 가장 큰 글자로, 짧고 중요한 문장에 사용합니다. 본문은 작은 글자 크기로, 긴 글쓰기에 사용합니다. 캡션은 가장 작은 글자입니다. 이미지에 주석을 달거나 footer 영역에서 사용됩니다.
+
## 헤딩 (Heading)
diff --git a/ui-kit/src/stories/usage.stories.mdx b/ui-kit/src/stories/usage.stories.mdx
new file mode 100644
index 00000000..1b2da281
--- /dev/null
+++ b/ui-kit/src/stories/usage.stories.mdx
@@ -0,0 +1,28 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+
+
+# Usage
+
+Lubycon UI Kit은 사용자의 어플리케이션에 이미 구현되어있는 그 어떤 것에도 영향을 끼치지 않는 독립적인 라이브러리입니다.
+
+UI Kit 라이브러리는 라이브러리가 제공하고자 하는 UI 기능에 대한 관심사만을 가져야하기 때문에, Lubycon UI Kit은 `normalize.css` 나 `reset.css` 와 같이 브라우저 벤더들의 스타일을 정규화 및 초기화하는 기능을 포함하고 있지 않습니다.
+
+## Quick Start
+
+어플리케이션의 루트에 `LubyconUIKitProvider` 를 추가해주기만 하면 Lubycon UI Kit을 사용하기 위한 모든 준비가 끝납니다.
+
+```tsx
+// App.tsx
+
+import React, { PropsWithChildren } from 'react';
+import { LubyconUIKitProvider } from '@lubycon/ui-kit';
+
+function App({ children }: PropsWithChildren<{}>) {
+ return {children};
+}
+```
+
+> 🤔 왜 UI Kit 라이브러리가 Context를 사용하나요?
+>
+> Modal이나 Snackbar와 같이 어플리케이션 내부에서 전역적인 상태를 공유할 필요가 있는 컴포넌트들은 어플리케이션의 컴포넌트 렌더 트리에 영향을 주지 않도록 별도의 렌더 트리를 구성해야 하기 때문입니다.