디자인 시스템 피그마 파일
Figma
Created with Figma
www.figma.com
설명
### 1. **헤딩(Heading) 스타일**
헤딩은 계층을 명확히 하고 콘텐츠의 구조를 시각적으로 구분하는 데 중요한 역할을 합니다.
- **H1 (메인 제목)**
- 폰트 사이즈: **48px**
- 폰트 두께: **Bold (700)**
- 줄 간격(Line height): **1.2**
- 용도: 페이지의 메인 타이틀, 가장 중요한 제목에 사용.
- **H2 (서브 제목)**
- 폰트 사이즈: **36px**
- 폰트 두께: **Bold (600)**
- 줄 간격: **1.3**
- 용도: 주요 섹션의 제목, H1 바로 다음 계층의 제목.
- **H3 (소제목)**
- 폰트 사이즈: **28px**
- 폰트 두께: **Semi-bold (500)**
- 줄 간격: **1.3**
- 용도: 세부 섹션의 제목.
- **H4 (부제목)**
- 폰트 사이즈: **22px**
- 폰트 두께: **Regular (400)**
- 줄 간격: **1.4**
- 용도: 하위 섹션 또는 구체적인 설명에 사용.
### 2. **본문 텍스트 스타일**
본문은 사용자들이 주요 정보를 읽는 영역이므로 가독성이 매우 중요합니다.
- **본문 (Body Text)**
- 폰트 사이즈: **16px**
- 폰트 두께: **Regular (400)**
- 줄 간격: **1.6**
- 용도: 기본적인 설명과 정보 전달.
- **강조 텍스트 (Emphasized Text)**
- 폰트 사이즈: **16px**
- 폰트 두께: **Bold (700)**
- 용도: 중요한 정보나 텍스트를 강조할 때 사용.
- **보조 텍스트 (Secondary Text)**
- 폰트 사이즈: **14px**
- 폰트 두께: **Regular (400)**
- 줄 간격: **1.5**
- 용도: 부가적인 설명이나 덜 중요한 정보에 사용.
### 3. **캡션 및 버튼 스타일**
이 스타일들은 인터페이스의 작은 요소들을 구성하는 데 필요합니다.
- **버튼 텍스트 (Button Text)**
- 폰트 사이즈: **16px**
- 폰트 두께: **Bold (700)**
- 줄 간격: **1.4**
- 용도: 버튼 및 인터랙티브한 요소에 사용.
- **캡션 및 설명 (Caption/Small Text)**
- 폰트 사이즈: **12px**
- 폰트 두께: **Regular (400)**
- 줄 간격: **1.4**
- 용도: 작은 설명, 라벨, 푸터 텍스트 등.
### 4. **글자 색상**
- **기본 텍스트 색상:** #333333 (짙은 회색) - 가독성을 위한 기본 색상.
- **보조 텍스트 색상:** #666666 (중간 회색) - 덜 중요한 정보에 사용.
- **링크 및 강조 색상:** #008080 (청록색) - 클릭 가능한 요소나 중요한 정보에 사용.
이 디자인 시스템을 사용하면, 사용자가 다양한 화면에서 읽기 쉽고 직관적인 웹사이트를 경험할 수 있을 것입니다.
