1. 컬러 시스템 (Color)
주조색(Primary)은 한 가지만 쓰고, 나머지는 무채색으로 채워야 화면이 깔끔해집니다.
색상
이름
HEX
용도
Primary
#0052CC
주요 버튼, 활성 탭
Success
#36B37E
완료, 승인
Danger
#EA5455
삭제, 에러
Background
#F4F5F7
배경색
3. 레이아웃 및 간격
복잡한 여백 수치 대신, 아래 핵심 규칙만 적용해 보세요.
규칙 1. 관련된 것끼리 묶어주기
숨막히는 간격
이름
홍길동
부서
영업팀
보기 편한 간격
이름
홍길동
부서
영업팀
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)
주요 버튼
36px
없음 (배경색 활용)
입력창 / 캘린더
36px
1px solid #DFE1E6
데이터 그리드
행 높이 36px
1px solid #DFE1E6
