디자인 시스템

Figma Variables와 코드 CSS 변수를 1:1로 맞춘 제출용 디자인 시스템입니다.

Figma pages structure

디자인 파일에서 분리될 페이지와 프레임 기준

00 Cover

제품 미리보기, 제출 범위, public-safe 고지

01 App Screens

Dashboard, CRM, Comparison, Assistant, Consent

02 Components

Button, Badge, Table, Modal, Tab, Alert variants

03 Variables

Color, Type, Spacing, Radius, Shadow, Density modes

04 Handoff

Auto Layout, Dev Mode notes, QA matrix

Figma Variables 모드

토큰이 쓰이는 화면 맥락

Base / Light

기본 업무 화면

color, type, radius, shadow

Data Dense

비교표·CRM 목록

spacing compact, tabular numbers

Compliance Alert

동의 누락·만료 경고

status warning/danger, audit label

Variables collection

Figma Variables 컬렉션과 코드 토큰 매핑

Collection	Modes	Token examples
Color / Semantic	Light	background, foreground, card, primary, status
Spacing / Density	Comfort, Dense	space-2, space-3, space-4, table-row-y
Type / Finance Data	Base	body, caption, mono tabular, heading
Elevation / Surface	Base	card, raised, overlay

색상 토큰

브랜드 적용 전 중립 팔레트 · 상태색 분리

브랜드 프라이머리

--primary

악센트

--accent

전경

--foreground

뮤트

--muted

보더

--border

상태 색상

피드백 · 상태 표시용

성공

--success

경고

--warning

정보

--info

위험

--danger

Component property matrix

Figma component properties와 코드 prop 대응

Component	Properties	States
Button	variant, size, disabled, icon	default, hover, focus, disabled
StatusBadge	tone, label	success, warning, danger, info, neutral
DataTable	density, pinned, sort, filter	empty, filtered, overflow, selected
CRM Modal	tab, consentStatus, warning	overview, ledger, history, llm, next
LLM Workbench	phase, guardrail, approval	context, generate, review, blocked

Density mode

운영 화면과 데이터 표의 밀도 토큰

Comfort

48px+

기본 운영 화면, 첫 검토, 태블릿

Dense

36px+

18개 공급사 비교, 숫자 스캔, 대량 검토

Table / modal spec

금융 B2B 핵심 컴포넌트 구현 기준

18개사 비교표

sticky provider columns, grouped headers, tabular numbers, pinned tray, horizontal scroll hint

CRM 상세 모달

max width 5xl, tablist overflow-x, consent warning panel, next-action cards

LLM 업무 보조

context/generate/review columns, guardrail list, approval gate, audit trail

타이포그래피

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