1. 컬러 시스템 (Color) 상세 가이드 보기 →
주조색(Primary)은 한 가지만 쓰고, 나머지는 무채색으로 채워야 화면이 깔끔해집니다.
| 색상 | 이름 | HEX | 용도 |
| Primary | #0052CC | 주요 버튼, 활성 탭 | |
| Success | #36B37E | 완료, 승인 | |
| Danger | #EA5455 | 삭제, 에러 | |
| Background | #F4F5F7 | 배경색 |
3. 레이아웃 및 간격 전체 간격 보기 →
복잡한 여백 수치 대신, 아래 핵심 규칙만 적용해 보세요.
규칙 1. 관련된 것끼리 묶어주기
숨막히는 간격 이름 홍길동 부서 영업팀 | 보기 편한 간격 이름 홍길동 부서 영업팀 |
규칙 2. 컨트롤 높이 일치시키기
2. 타이포그래피 (Typography) 상세 가이드 보기 →
크기와 굵기만 잘 구분해도 데이터가 한눈에 들어옵니다.
| 레벨 | 크기 | 굵기 | 미리보기 |
| Page Title | 24px | Bold | 페이지 타이틀 |
| Section Header | 16px | Semi-Bold | 섹션 헤더 |
| Body Text | 14px | Regular | 본문 텍스트 |
정렬 원칙
| 1,234,567 | 숫자 → 우측 정렬 |
| 홍길동 | 텍스트 → 좌측 정렬 |
| 2024-01-15 | 날짜 → 중앙 정렬 |
4. 컨트롤 속성 (Controls) 상세 가이드 보기 →
자주 쓰는 버튼과 입력창의 형태를 통일하여 시스템의 일관성을 높여 보세요.
| 컨트롤 종류 | 표준 높이 (Height) | 테두리 (Border) |
| 주요 버튼 | 30px | 없음 (배경색 활용) |
| 입력창 / 캘린더 | 30px | 1px solid #DFE1E6 |
| 데이터 그리드 | 행 높이 36px | 1px solid #DFE1E6 |
