디자인 시스템
Figma Variables와 코드 CSS 변수를 1:1로 맞춘 제출용 디자인 시스템입니다.
Figma Variables 모드
토큰이 쓰이는 화면 맥락
Base / Light
기본 업무 화면
color, type, radius, shadow
Data Dense
비교표·CRM 목록
spacing compact, tabular numbers
Compliance Alert
동의 누락·만료 경고
status warning/danger, audit label
색상 토큰
브랜드 적용 전 중립 팔레트 · 상태색 분리
브랜드 프라이머리
--primary
악센트
--accent
전경
--foreground
뮤트
--muted
보더
--border
상태 색상
피드백 · 상태 표시용
성공
--success
경고
--warning
정보
--info
위험
--danger
타이포그래피
Google Fonts 제거 · local/system font stack
금융 운영 플랫폼Display / 페이지 제목
고객 관리 대시보드Heading / 섹션 제목
월간 매출 추이Subheading / 카드 제목
모든 데이터는 가상 샘플이며 담당자 검토가 필요합니다.Body / 본문
2026년 6월 기준 · 데모 데이터Caption / 보조
1,552,000 KRWMono / 수치
Auto Layout · Responsive Tokens
Figma Dev Mode에서 확인할 간격·반응형 기준
| 토큰 | 값 | 사용처 |
|---|---|---|
space/2 | 8px | 셀 내부 간격, 작은 버튼 gap |
space/4 | 16px | 카드 기본 padding, 폼 그룹 간격 |
space/6 | 24px | 페이지 섹션 간격 |
radius/lg | 8px | 카드, 모달, 입력 필드 |
breakpoint/tablet | 768px | 2컬럼 전환, 표 가로 스크롤 |
container/desktop | 1400px | 운영 화면 최대 폭 |
버튼
변형 및 크기
뱃지 · 상태
라벨 및 상태 표시
기본아웃라인프라이머리정보
동의 완료확인 필요만료없음
입력 필드
폼 요소
입력 값을 확인해 주세요.
모서리 · 그림자
Radius & Elevation
card
raised
overlay