Design System v1.0

미리봄 디자인 시스템

따뜻한 아이보리 바탕(#FAF9F5)과 테라코타 코랄 액센트(#D97757), 명조 디스플레이 서체를 결합한 Claude 스타일. 규제 산업 제품답게 차분한 신뢰감을 기본으로, 위험 신호만 선명하게 드러난다.

0. 디자인 원칙

차분한 바탕, 선명한 경고

화면의 95%는 아이보리·화이트·잉크로 조용하게. 상태 색(위험·주의·정상)은 규제 신호에만 사용하고, 반드시 아이콘+텍스트 라벨과 동반한다. 색만으로 의미를 전달하지 않는다.

근거가 보이는 UI

모든 경고·판정 옆에는 근거(규칙 ID·고시 조항·데이터 출처)가 따라붙는다. AI 제안은 항상 '제안' 배지(AI 제안 · 검수 필요)로 구분한다.

명조는 선언에, 고딕은 데이터에

Noto Serif KR은 제목·헤드라인·인용(판례)에만. 본문·표·숫자는 Pretendard. 숫자는 tabular-nums로 정렬한다.

1. 컬러 토큰

Surface / Ink / Accent / Status 네 그룹. Status는 차트 시리즈 색으로 재사용 금지.

Surface & Ink

--bg#FAF9F5 · 페이지 바탕
--surface#FFFFFF · 카드
--surface-2#F4F1EA · 보조 면
--ink#262521 · 본문 잉크

Accent — Claude Coral

--accent#D97757 · CTA·강조
--accent-strong#C05B3C · hover
--accent-deep#A34A2E · 텍스트 액센트
--accent-tint#F9EDE6 · 하이라이트 면

Status — 반드시 아이콘+라벨 동반

--ok#5E7D5A · 준수/정상
--warn#A87B1E · 주의/검수 대기
--danger#B3402E · 위반/차단
--info#5E748F · AI 제안/안내

2. 타이포그래피

Eyebrow Label · 13px / 700 / letter-spacing .12em

환수당하기 전에, 막는다

Display XL · Noto Serif KR 700 · clamp(34–52px)

청구 전 사전 검증(Pre-audit)

Display LG · clamp(26–36px)

리드 문단 · Pretendard 18px · --ink-2 · line-height 1.65

본문 · Pretendard 15–16px · --ink

캡션/보조 · 13.5px · --ink-3

"급식 위탁은 조리원 상시 배치와 규범적·실질적으로 동등해야 한다" — 인용·판례는 명조 이탤릭 없이 컬러로만 구분

3. 버튼 & 배지

● 위반 감지▲ 검수 대기✓ 규정 준수◆ AI 제안 · 검수 필요추천source_verified: false

4. 규제 알림 배너

경고에는 항상 규칙 근거를 표기한다.

!
위반 감지 — 인력배치기준
3월 14일: 요양보호사 김○○ 연차일에 서비스 제공 기록 존재 · 규칙 R-STAFF-004 (급여기준 고시 제58조)
▲
검수 필요 — 급식 기록 AI 판독
302호 박○○ 점심 식판에서 계획 외 반찬 감지(추정: 새우류) · 알레르기 프로필과 교차 확인 요망
✓
7월 청구 사전 검증 통과
청구 1,284건 전수 검사 완료 · 위반 0건 · 감사 로그 #A-2607에 보존됨
i
AI 제안 — 케어 레벨 분류
신규 입소 상담 이○○: 케어 레벨 3, 연하곤란 2단계 제안 · 시설장 승인 전에는 반영되지 않습니다

5. 스탯 타일 & 데이터 표현

이번 달 사전 차단
14건
▼ 위험 노출 감소
의료식 준수율
98.2%
▲ 1.4%p
검수 대기
7건
— 평균 4시간 내 처리
예방한 환수 추정액
3,120만 원
누적 · 백테스트 기준

위반 유형 분포 단일 색조 · 시퀀셜

막대는 액센트 단일 색. 여러 시리즈가 필요하면 색이 아닌 분리 차트(스몰 멀티플)로.

인력배치기준
43%
가산 요건
31%
시간 불일치
17%
기타
9%

6. 폼 & 테이블

규제 발견심각도상태
연차일 서비스 기록 R-STAFF-004● 높음청구 보류
야간 가산 요건 미충족 R-BILL-112▲ 중간검수 대기
기록지-RFID 시간차 8분 R-LOG-020✓ 낮음자동 해소

7. 사용 스펙 요약

radius : card 16px · control 10px · badge pill shadow : sm(카드 기본) · md(hover) · lg(목업/모달) spacing : 4의 배수 · 섹션 상하 88px · 카드 내부 28px font : display 'Noto Serif KR' / body 'Pretendard Variable' number : font-variant-numeric: tabular-nums grid : max-width 1120px · gutter 24px · 카드 gap 22px motion : 0.15–0.18s ease · hover 시 translateY(-1~-3px) 접근성 : 상태 색은 아이콘+라벨 동반 · 포커스 링 3px accent-tint
미리봄(가칭) 디자인 시스템 v1.0 · Claude Style · 프로토타입 — 실서비스 아님