1. 색상 (Color) 상세 가이드 보기 →
주조색(Primary)은 한 가지만 쓰고, 나머지는 무채색으로 채워야 화면이 깔끔해집니다.
| 색상 | 이름 | HEX | 용도 |
| Primary | #0052CC | 주요 버튼, 활성 탭 | |
| Success | #36B37E | 완료, 승인 | |
| Danger | #EA5455 | 삭제, 에러 | |
| Background | #F4F5F7 | 배경색 |
3. 레이아웃 및 간격 (Layout & Spacing) 상세 가이드 보기 →
복잡한 여백 수치 대신, 아래 핵심 규칙만 적용해 보세요.
- 화면 가장 바깥쪽 여백은 최소 20px을 권장합니다.
- 카드형 구조의 경우 카드 사이는 10px로 띄우세요.
- 카드 내부의 '소제목'과 '차트/그리드' 사이는 18px을 띄우세요.
- 관련된 항목(라벨-입력창)은 8px로 가깝게 붙이세요.
2. 타이포그래피 (Typography) 상세 가이드 보기 →
크기와 굵기만 잘 구분해도 데이터가 한눈에 들어옵니다.
| 레벨 | 크기 | 굵기 | 미리보기 |
| Page Title | 24px | Bold | 페이지 타이틀 |
| Section Header | 16px | Semi-Bold | 섹션 헤더 |
| Body Text | 14px | Regular | 본문 텍스트 |
4. 컨트롤 속성(Controls) 상세 가이드 보기 →
자주 쓰는 버튼과 입력창의 형태를 통일하여 시스템의 일관성을 높여 보세요.
| 컨트롤 종류 | 표준 높이 (Height) | 테두리 (Border) |
| 주요 버튼 | 30px | 없음 (배경색 활용) |
| 입력창 / 캘린더 | 30px | 1px solid #DFE1E6 |
| 데이터 그리드 | 행 높이 36px | 1px solid #DFE1E6 |
