> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 디자인 시스템 구성과 DESIGN.md

> 생성된 디자인 시스템에 담기는 것들(토큰, 색상, 타이포그래피, 컴포넌트)과 DESIGN.md가 프로젝트에서 이를 어떻게 표현하는지 알아보세요.

## 디자인 시스템의 구성

생성된 디자인 시스템에는 다음이 포함됩니다.

* **토큰(Tokens)** — 시스템의 나머지 부분이 참조하는 이름 붙은 값(색상, 간격, 반경)
* **색상(Colors)** — 역할(primary, surface, accent 등)이 부여된 팔레트
* **타이포그래피(Typography)** — 폰트 패밀리, 크기, 굵기
* **예시 컴포넌트(Example components)** — 시스템의 사용 예시를 보여주는 2\~3개의 빌드된 컴포넌트
* **로고와 브랜드 에셋** — 명확하게 제공한 경우 포함됨

<Frame>
  <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ds-review.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=947fb5e6043b6740ed93fd437bd9223d" alt="포커스 모드에서 살아있는 스타일 가이드로 표시된 APEX X1 Design System. 색상, 폰트, 레이아웃, 컴포넌트 사이드바와 핵심 팔레트, 타입 스케일, 예시 컴포넌트가 함께 표시됨" width="2000" height="1254" data-path="images/design/replit-design/ds-review.png" />
</Frame>

## 저장 방식

생성된 시스템은 프로젝트 안에 **살아있는 스타일 가이드**로 존재합니다. `tokens.json`의 토큰이 컴포넌트가 사용하는 CSS 변수(예: `src/index.css`)로 반영됩니다. `DESIGN.md`는 이를 문서로 표현한 것으로, 사람이 읽을 수 있고 Agent도 사용할 수 있습니다.

## 소스로서의 DESIGN.md 활용하기

기존 `DESIGN.md`는 새 디자인 시스템의 소스가 될 수 있습니다. [시스템을 만들 때](/ko/design/create-a-design-system) Figma URL, 웹사이트, 코드, 참고 이미지 같은 다른 소스와 함께 이를 지정하세요.