Introduction

PAI Design은 일관된 색상, 간격, 타이포그래피와 컴포넌트 패턴으로 제품 화면을 더 빠르고 안정적으로 만들기 위한 디자인 시스템이에요. 화면의 기본 기준부터 실제 컴포넌트 사용법까지 같은 언어로 연결해, 디자인과 개발이 같은 기준으로 일할 수 있게 도와줘요.

이 문서에서는 아래 내용을 함께 다뤄요.

• Foundation: 색상, 간격, 타이포그래피, writing처럼 화면 전반의 기준을 소개해요.
• Guides: token 구조, 스타일 연결, 접근성 같은 시스템 사용 기준을 설명해요.
• Patterns: 여러 컴포넌트를 언제 어떻게 나눠 써야 하는지 비교해요.
• Components: 실제 React 컴포넌트를 언제 쓰는지, 어떤 속성과 상태를 가지는지 설명해요.

처음 프로젝트에 붙인다면 Getting started부터 읽어보세요. 설치, 스타일 import, dark mode 연결처럼 가장 먼저 필요한 흐름을 한 번에 볼 수 있어요. token 구조와 시스템 경계를 먼저 이해하고 싶다면 Design Token부터 살펴보세요. 실제 앱에 theme와 CSS를 연결하는 방법은 Styling Integration에서 이어서 볼 수 있어요. 컴포넌트 선택 기준이 궁금하다면 Components와 Overlay Patterns부터 살펴보세요.