메인 화면에 나온 필수 컨트롤(버튼, 입력창, 캘린더, 그리드)의 기본 형태와 상태별 속성값을 정리했습니다.

1. 일반 폼 컨트롤 및 버튼 규격

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

컨트롤 종류표준 높이디자인 속성 및 상태 (State)
주요 버튼
(저장, 승인 등)
36px
기본 저장 배경: #0052CC / 글자: 흰색
Hover 저장 배경: #0043CC (약간 짙어짐)
보조 버튼
(취소, 닫기 등)
36px
기본 취소 테두리: #DFE1E6 / 글자: #172B4D
Hover 취소 배경: #F4F5F7 (약간 어두워짐)
입력창 / 캘린더36px테두리: #DFE1E6 둥글기: 4px 내부여백: Left 12px

2. 테마별 데이터 그리드 색상 적용표 (Grid Theme Colors)

대시보드의 주조색(Primary Color) 테마에 맞춰, 데이터 그리드의 '헤더/반복행/선택행/테두리' 색상을 짝지어 입력해 보세요.



블루 (Standard Blue)
헤더 스타일
일반 데이터
행 배경 (반복)
선택 레코드 색
헤더 스타일 #F4F5F7
행 배경 (반복) #FAFBFC
선택 레코드 색 #E6EFFC
테두리 / 소계 #DFE1E6




소프트 그린 (Soft Green)
헤더 스타일
일반 데이터
행 배경 (반복)
선택 레코드 색
헤더 스타일 #F0FAF5
행 배경 (반복) #F7FCF9
선택 레코드 색 #E3FCEF
테두리 / 소계 #ABF5D1




모던 다크 (Modern Dark)
헤더 스타일
일반 데이터
행 배경 (반복)
선택 레코드 색
헤더 스타일 #EBECF0
행 배경 (반복) #FAFBFC
선택 레코드 색 #E4ECF0
테두리 / 소계 #C5CDD7




웜 오렌지 (Warm Orange)
헤더 스타일
일반 데이터
행 배경 (반복)
선택 레코드 색
헤더 스타일 #FFEBE6
행 배경 (반복) #FFF7F5
선택 레코드 색 #FFD8CC
테두리 / 소계 #FFBDAD