🎨 디자인 시스템¶
Version: v3.0.0 · Updated: 2026-05-03 · Owner: 장캐리
Tone: Innovation + Professional — 데이터 권위감 + 고객 친밀감
Benchmarks: Pattern, Snowflake, Databricks, Stripe (구조), PostHog
First impression goal: "전문적이네 / 세련됐네"
Forbidden vibe: 촌스러움 · 스타트업스러움 · 관공서스러움 · 럭셔리 캐주얼
1. 비주얼 테마¶
흰 캔버스(#FFFFFF) 위에 깊은 슬레이트 헤딩(#0F172A)과 시그니처 보라(#7C3AED).
핵심 철학: 단단한 헤딩(Bold) + 절제된 컬러 + 큰 여백. Stripe의 weight-300 우아함과 달리, ADCARRY는 weight-700 헤딩으로 명확한 권위. 컬러는 헤더·버튼·액센트에만, 본문 가독성 우선.
그림자는 모든 레이어에 보라 틴트 미세하게 적용. 무채색 그림자 ❌.
2. 컬러 팔레트¶
🎯 Primary¶
| Token | HEX | 용도 |
|---|---|---|
| ADCARRY Violet | #7C3AED |
메인 브랜드 · CTA · 액센트 바 |
| Deep Slate | #0F172A |
본문 · 헤딩 |
| Pure White | #FFFFFF |
페이지 배경 · 카드 표면 |
🟣 Brand Variants¶
| Token | HEX | 용도 |
|---|---|---|
| Violet Hover | #6D28D9 |
호버 · 진한 강조 |
| Violet Deep | #5B21B6 |
합계행 · CTA 패널 그라데이션 끝 |
| Violet Indigo | #3B0764 |
다크 모드 · 풀스크린 보라 패널 |
💎 Accent (Cyan)¶
| Token | HEX | 용도 |
|---|---|---|
| Cyan Primary | #06B6D4 |
데이터 액센트 · 정보 · 링크 |
| Cyan 50 | #ECFEFF |
시안 배지 배경 |
| Cyan Hover | #0891B2 |
시안 호버 |
🚦 Status¶
| Token | HEX | 용도 |
|---|---|---|
| Success | #10B981 |
성공 · 증가 (Emerald) |
| Warning | #F59E0B |
주의 · 검토 (Amber) |
| Danger | #EF4444 |
실패 · 감소 (Red) |
| Info | #06B6D4 |
정보 (Cyan과 동일) |
⚪ Neutral Scale (Slate 9단계)¶
| Token | HEX | 주 용도 |
|---|---|---|
| Slate 50 | #F8FAFC |
옅은 배경 · 줄무늬 행 |
| Slate 100 | #F1F5F9 |
호버 배경 |
| Slate 200 | #E2E8F0 |
기본 보더 ★ |
| Slate 300 | #CBD5E1 |
강한 보더 |
| Slate 400 | #94A3B8 |
비활성 텍스트 |
| Slate 500 | #64748B |
보조 텍스트 ★ (캡션, 영문 부제) |
| Slate 600 | #475569 |
중성 강조 · 차트 fallback |
| Slate 700 | #334155 |
다크 보더 |
| Slate 800 | #1E293B |
다크 표면 |
| Slate 900 | #0F172A |
본문 텍스트 ★ / 다크 배경 |
📊 Chart Sequence (한 차트에 여러 시리즈)¶
#7C3AEDViolet 600#06B6D4Cyan 500#10B981Emerald 500#F59E0BAmber 500#6366F1Indigo 500#475569Slate 600 (중성 fallback)
❌ 차트 금지색: 핑크(
#EC4899), 오렌지 — 톤 깨짐 ❌ 전역 금지색: amzcarry.com 추출색 (#1C3D5A네이비,#FFB800골드)
3. 타이포그래피¶
🅰️ 폰트¶
- 한글 메인:
Pretendard(R 400 / SB 600 / B 700) - 영문 메인:
IBM Plex Sans(R 400 / SB 600 / B 700) - 숫자 · 코드:
IBM Plex Mono(R 400 / SB 600)
CSS stack:
font-family: Pretendard, "IBM Plex Sans", -apple-system, sans-serif;
font-feature-settings: "tnum" on; /* 표 숫자 등폭 정렬 */
📏 위계¶
| 레벨 | Family | Weight | Size | 용도 |
|---|---|---|---|---|
| Display | Pretendard | Bold 700 | 48-64px | 히어로 헤드라인 |
| H1 | Pretendard | Bold 700 | 36-40px | 페이지 타이틀 |
| H2 | Pretendard | Bold 700 | 28-32px | 섹션 헤더 |
| H3 | Pretendard | SemiBold 600 | 22-24px | 서브섹션 |
| H4 | Pretendard | SemiBold 600 | 18-20px | 카드 타이틀 |
| Body | Pretendard | Regular 400 | 14-16px | 본문 |
| Caption | Pretendard | Regular 400 | 12-13px slate-500 | 보조 |
| Eyebrow | IBM Plex Sans | SemiBold 600 UPPER | 11-12px Violet | 라벨 |
| Number | IBM Plex Mono | SemiBold 600 | 14-40px slate-900 | KPI · 표 숫자 |
🌐 한·영 병기 룰¶
- 한글이 main, 영문이 sub (slate-500, 작게)
- Eyebrow 라벨은 영문 UPPER + IBM Plex SemiBold + 보라
- 영문 라벨에 한국식 typography 적용 ❌ (영문은 IBM Plex 전용)
✏️ 헤딩 처리¶
- 32px 이상 헤딩은
letter-spacing: -0.02em(음수 자간) - 본문은 Regular gray, 강조어만 Bold black
4. 컴포넌트¶
🔘 Buttons¶
| 종류 | 배경 | 텍스트 | 보더 | 용도 |
|---|---|---|---|---|
| Primary (CTA) | #7C3AED |
#FFFFFF |
— | "무료 상담받기", "지금 시작" |
| Secondary | #FFFFFF |
#7C3AED |
1px #7C3AED |
보조 액션 |
| Ghost | transparent | #334155 |
1px #E2E8F0 |
평이한 액션 |
| Destructive | #EF4444 |
#FFFFFF |
— | 삭제·취소 (확인 다이얼로그) |
| Link | transparent | #7C3AED + 밑줄 |
— | 인라인 링크 |
공통 스펙:
- Radius 6px
- Padding 12px 20px (md) / 8px 16px (sm) / 16px 28px (lg)
- Font: Pretendard SemiBold 14px (md)
- Hover (Primary): bg #6D28D9 + box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.18)
🃏 Cards & Containers¶
- Background
#FFFFFF, Border 1px#E2E8F0, Radius6px(기본) /8px(featured) /12px(히어로) - Default shadow:
0 1px 3px 0 rgba(15, 23, 42, 0.06) - Hover shadow (purple-tinted):
0 4px 6px -1px rgba(124, 58, 237, 0.10) - Hover:
transform: translateY(-2px)
Stat / KPI Card:
- 좌측 4px 액센트 바 (보라/시안/상태색)
- 라벨 (Pretendard SB 12-13px slate-500) + 영문 라벨 (IBM Plex 10-11px slate-400)
- 큰 숫자 (IBM Plex Mono SB 32-40px slate-900, tnum)
- 델타 배지 — 증가 emerald, 감소 red, 페일 배경
🏷️ Badges / Tags¶
Status Badge (pill) — Radius 9999, Padding 2px 10px, Pretendard SB 11px
| Variant | 배경 | 텍스트 |
|---|---|---|
| 진행중 | #ECFEFF |
#06B6D4 (Cyan) |
| 신규 | #F5F3FF |
#6D28D9 (Violet) |
| 검토중 | #FFFBEB |
#F59E0B (Amber) |
| 완료 | #ECFDF5 |
#10B981 (Emerald) |
| 실패 | #FEF2F2 |
#EF4444 (Red) |
Tag (square) — Radius 4px, 작은 분류용 ([차별화], [가격경쟁] 등).
📝 Inputs & Forms¶
- Border 1px
#E2E8F0, Radius6px, Height40px(md) /32px(sm) - Padding
0 12px, Font Pretendard 14px - Focus: border
#7C3AED+box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18) - Label: Pretendard SemiBold 13px slate-700, margin-bottom 6px
- Error: border
#EF4444, helper text 12px red
📋 Tables¶
- Header: bg
#F8FAFC, Pretendard SB 12px slate-500 UPPER - Row height
48px, 행 사이 1px#F1F5F9(격자 ❌) - Hover row: bg
#F8FAFC - Numbers: IBM Plex Mono SB 14px,
tnum, 우정렬 - Text: Pretendard 14px slate-900, 좌정렬
🧭 Navigation¶
- Sticky top, 높이
64px - Background
rgba(255, 255, 255, 0.85)+backdrop-filter: blur(12px) - Border-bottom 1px
#F1F5F9 - Logo: Pretendard Bold 22px slate-900
- Menu links: Pretendard SemiBold 14px slate-700
- Active: 보라 글씨 또는 보라 하단 보더 2px
5. 레이아웃¶
📐 Spacing System (4px base)¶
스케일: 0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96 px
🏛️ Grid & Container¶
- Max content width 1280px
- Page padding 32px (좌우)
- Grid 12 columns, gap 16-24px
- Sidebar (앱) 260px
- Header 64px
🌬️ Whitespace Philosophy¶
- Pattern/Snowflake식 큰 여백: 섹션 사이 96-120px
- 데이터는 빽빽, 크롬은 넉넉: 표·차트 안은 dense, 주변 패딩은 generous
- 보라 절제: 보라는 헤더·버튼·액센트만. 본문 도배 ❌
🔘 Border Radius Scale¶
| Token | px | 용도 |
|---|---|---|
| none | 0 | 분리선 |
| sm | 4 | input, badge square |
| md | 6 | button, card 기본 |
| lg | 8 | modal, big card |
| xl | 12 | 히어로 패널 |
| full | 9999 | pill |
6. Depth & Shadow¶
| Level | Shadow | Use |
|---|---|---|
| 0 Flat | none | 페이지 배경, 인라인 |
| 1 Ambient | 0 1px 2px rgba(15,23,42,.04) |
미세 lift |
| 2 Standard | 0 1px 3px rgba(15,23,42,.06) |
카드 기본 |
| 3 Elevated | 0 4px 6px rgba(124,58,237,.10) |
호버, 부유 카드 |
| 4 Floating | 0 10px 15px rgba(124,58,237,.10) |
드롭다운, 팝오버 |
| 5 Modal | 0 20px 40px rgba(91,33,182,.18) |
모달, 다이얼로그 |
| Focus | 0 0 0 3px rgba(124,58,237,.18) |
포커스 링 |
Level 3+에는 보라 틴트 필수. Level 1-2는 무채색 미세.
7. Do's & Don'ts¶
✅ Do¶
- 흰 배경 + 큰 여백 + 보라 포인트만
- 본문 Regular gray, 강조어만 Bold black
- 표·KPI 숫자는
tnum(IBM Plex Mono SemiBold) - 한·영 병기 시 한글 main, 영문 sub (slate-500)
- Eyebrow 라벨은 영문 UPPER + IBM Plex SemiBold + 보라
- 카드 호버 시 살짝 떠오르고 보라 틴트 그림자
- 시맨틱 색상은 의미가 분명할 때만 (성공=초록, 실패=빨강 절대 흔들지 않기)
- 헤딩 32px↑ 음수 자간
❌ Don't¶
- 보라를 본문에 도배 (헤더·버튼·액센트만)
- 차트에 핑크/오렌지 사용
- amzcarry.com 색상 (
#1C3D5A,#FFB800) 사용 — 본사 보라로 통일 - 한 문장에 색상 강조 2개 이상 (촌스러움)
- 세 가지 이상 weight를 한 화면에 (Light/Regular/Bold만)
- 너무 둥근 radius (12px 이상은 히어로 패널 한정)
- 무채색 그림자만 사용 (Level 3+는 보라 틴트 필수)
- 영문 라벨에 한국식 typography 적용
8. 반응형¶
Breakpoints (Tailwind 기준)¶
| Token | px | Device |
|---|---|---|
| sm | 640 | 모바일 가로 |
| md | 768 | 태블릿 세로 |
| lg | 1024 | 태블릿 가로 / 작은 노트북 |
| xl | 1280 | 데스크탑 ★ |
| 2xl | 1536 | 와이드 |
Touch Targets¶
- 모바일: 최소
44x44px(Apple HIG) - 인접 터치 영역 사이
8px간격 이상
9. 정본 위치¶
본 사이트는 사람용 가이드. 컴포넌트 prompt 가이드·코드 토큰·전체 정의는 정본 참조:
추가 자료:
- 컬러 프리뷰 이미지:
output/design_preview_v3.png - 컴포넌트 프롬프트 가이드:
DESIGN.md섹션 9 (Agent Prompt Guide) - Stripe 벤치마크 분석:
output/stripe_DESIGN.md
10. 변경 이력¶
| 버전 | 날짜 | 변경 |
|---|---|---|
| v3.0.0 | 2026-05-03 | Pattern/Snowflake 톤 채택, 보라 틴트 그림자 시스템 |
| v2.x | 2026-04 | Stripe 구조 + ADCARRY 컬러 통합 |
| docs 박제 | 2026-05-17 | 사람용 docs 가이드로 재구성 (이 페이지) |