1. 컬러 시스템 (Color) 상세 가이드 보기 →

주조색(Primary)은 한 가지만 쓰고, 나머지는 무채색으로 채워야 화면이 깔끔해집니다.

색상이름HEX용도


Primary#0052CC주요 버튼, 활성 탭


Success#36B37E완료, 승인

Danger#EA5455삭제, 에러

Background#F4F5F7배경색



3. 레이아웃 및 간격 전체 간격 보기 →

복잡한 여백 수치 대신, 아래 핵심 규칙만 적용해 보세요.

규칙 1. 관련된 것끼리 묶어주기

숨막히는 간격

이름

홍길동

부서

영업팀


보기 편한 간격

이름

홍길동

부서

영업팀





2. 타이포그래피 (Typography) 상세 가이드 보기 →

크기와 굵기만 잘 구분해도 데이터가 한눈에 들어옵니다.

레벨크기굵기미리보기
Page Title24pxBold페이지 타이틀
Section Header16pxSemi-Bold섹션 헤더
Body Text14pxRegular본문 텍스트


정렬 원칙

1,234,567숫자 → 우측 정렬
홍길동텍스트 → 좌측 정렬
2024-01-15날짜 → 중앙 정렬




4. 컨트롤 속성 (Controls) 상세 가이드 보기 →

자주 쓰는 버튼과 입력창의 형태를 통일하여 시스템의 일관성을 높여 보세요.

컨트롤 종류표준 높이 (Height)테두리 (Border)
주요 버튼36px없음 (배경색 활용)
입력창 / 캘린더36px1px solid #DFE1E6
데이터 그리드행 높이 36px1px solid #DFE1E6