INFINITH Design System Specification
Version: 1.0
Date: 2026-03-23
1. Design Principles
| 원칙 |
설명 |
| No Primary Colors |
빨강, 주황, 초록, 파랑 등 원색 사용 금지. 파스텔 변형만 허용 |
| Filled Icons Only |
라인(outlined) 아이콘 금지. SVG shape fill 스타일만 사용 |
| No Emoji |
모든 아이콘은 벡터 shape으로 표현 |
| Dark/Light Rhythm |
페이지 내 섹션은 다크/라이트 배경을 교대 배치 |
| White Cards on Dark |
다크 섹션 내 카드는 bg-white 사용 (glassmorphism 아님) |
| Diagonal Shadows |
카드/요소에 사선 방향 연한 그림자: shadow-[3px_4px_12px_rgba(0,0,0,0.06)] |
| Pastel Semantics |
상태 표현은 반드시 INFINITH 파스텔 팔레트의 bg/text/border/dot 세트 사용 |
2. Color System
2.1 INFINITH Brand Colors
| Token |
Hex |
CSS Variable |
용도 |
| Primary Navy |
#0A1128 |
--color-primary-900 |
다크 섹션 bg, 본문 텍스트, 테이블 헤더 |
| Medium Navy |
#1A2B5E |
--color-primary-800 |
보조 다크 |
| Near White |
#F4F6FB |
--color-primary-50 |
밝은 배경 변형 |
| Accent Purple |
#6C5CE7 |
--color-accent |
활성 탭 보더, 강조 아이콘, 로딩 스피너 |
| Gradient Start |
#4F1DA1 |
— |
버튼, 배지 그라디언트 왼쪽 |
| Gradient End |
#021341 |
— |
버튼, 배지 그라디언트 오른쪽 |
2.2 Warm CTA Gradient (3-stop)
background: linear-gradient(to right, #fff3eb, #e4cfff, #f5f9ff);
| Stop |
Hex |
이름 |
| Start |
#fff3eb |
Warm Peach |
| Mid |
#e4cfff |
Soft Lilac |
| End |
#f5f9ff |
Cool White-Blue |
사용처: CTA 카드 배경, URL 입력 필드, KPI CTA 카드
2.3 Semantic Status Palette
규칙: 상태를 표현할 때 반드시 이 4가지 세트 중 하나를 사용. 원색(빨강/초록) 절대 금지.
| Status |
Background |
Text |
Border |
Dot |
한국어 |
| Critical |
#FFF0F0 |
#7C3A4B |
#F5D5DC |
#D4889A |
심각 |
| Warning |
#FFF6ED |
#7C5C3A |
#F5E0C5 |
#D4A872 |
주의 |
| Good |
#F3F0FF |
#4A3A7C |
#D5CDF5 |
#9B8AD4 |
양호 |
| Info |
#EFF0FF |
#3A3F7C |
#C5CBF5 |
#7A84D4 |
우수 |
CSS Variables:
--color-status-{level}-bg
--color-status-{level}-text
--color-status-{level}-border
--color-status-{level}-dot
2.4 ScoreRing Color Thresholds
| Score Range |
Color |
Token |
| 0~40% |
#C084CF |
Soft Violet (Critical) |
| 41~60% |
#8B9CF7 |
Periwinkle (Caution) |
| 61~80% |
#7C6DD8 |
Medium Purple (Good) |
| 81~100% |
#6C5CE7 |
INFINITH Purple (Excellent) |
2.5 Platform Brand Colors (외부 브랜드 존중)
| Platform |
Hex |
용도 |
| YouTube |
#FF0000 |
아이콘 컨테이너, 진단 구분 |
| Instagram |
#E1306C |
아이콘 그라디언트 |
| Facebook |
#1877F2 |
아이콘 컨테이너, 로고 |
| VIEW Purple |
#7B2D8E |
고객 브랜드 (뷰성형외과) |
| VIEW Gold |
#E8B931 |
고객 브랜드 (뷰성형외과) |
3. Typography
3.1 Font Families
| 폰트 |
역할 |
로딩 |
| Playfair Display |
영문 헤딩, 섹션 타이틀, INFINITH 로고 |
Google Fonts |
| Pretendard |
한글 헤딩, 본문 |
CDN |
| Inter |
영문 본문, UI 요소 |
Google Fonts (sans-serif) |
3.2 Size & Weight Scale
| 용도 |
폰트 |
Size |
Weight |
Tailwind Class |
| INFINITH 로고 |
Playfair Display |
3xl (30px) |
Black 900 |
font-serif text-3xl font-black tracking-[0.05em] |
| 페이지 H1 |
Playfair Display |
5xl~7xl |
Bold 700 |
font-serif text-5xl md:text-7xl font-bold tracking-[-0.02em] |
| 섹션 타이틀 (영문) |
Playfair Display |
3xl~5xl |
Bold 700 |
font-serif text-3xl md:text-5xl font-bold |
| 섹션 서브타이틀 |
Pretendard |
lg (18px) |
Regular 400 |
text-lg |
| 카드 제목 |
Pretendard |
lg (18px) |
Bold 700 |
text-lg font-bold |
| 본문 |
Pretendard / Inter |
sm~base (14~16px) |
Regular 400 |
text-sm or text-base |
| 캡션/라벨 |
Inter |
xs (12px) |
Medium 500 |
text-xs font-medium |
| 배지/태그 |
Inter |
xs (12px) |
Semibold 600 |
text-xs font-semibold |
3.3 Text Color Mapping
| 컨텍스트 |
라이트 섹션 |
다크 섹션 |
| 제목 |
text-[#0A1128] |
gradient from-purple-300 to-blue-300 |
| 서브타이틀 |
text-slate-600 |
text-purple-200 |
| 본문 |
text-slate-700 |
text-white/80 |
| 캡션 |
text-slate-500 |
text-purple-300 |
| 강조 |
text-[#6C5CE7] |
text-purple-300 |
4. Layout Patterns
4.1 SectionWrapper
모든 콘텐츠 섹션의 기본 래퍼. src/components/report/ui/SectionWrapper.tsx
| Prop |
Light Mode |
Dark Mode |
| Background |
bg-white |
bg-[#0A1128] + radial-gradient rgba(108,92,231,0.15) |
| Padding |
py-16 md:py-20 px-6 |
동일 |
| Max Width |
max-w-7xl mx-auto |
동일 |
| Title Style |
.text-gradient (navy gradient) |
purple-300→blue-300 gradient |
| Animation |
opacity: 0, y: 40 → 1, 0 on scroll |
동일 |
4.2 Card Patterns
| 패턴 |
클래스 |
사용처 |
| Standard Card |
bg-white rounded-2xl border border-slate-100 shadow-sm p-5 |
대부분의 라이트 섹션 카드 |
| White Card on Dark |
bg-white rounded-2xl shadow-[3px_4px_12px_rgba(0,0,0,0.06)] p-6 |
ChannelStrategy, ContentCalendar |
| Glass Card |
bg-white/70 backdrop-blur-xl border border-white/40 shadow-[0_8px_32px_0_rgba(31,38,135,0.07)] rounded-2xl |
랜딩 페이지 (TargetAudience, UseCases) |
| Dark Glass Card |
bg-white/10 backdrop-blur-sm border border-white/10 rounded-2xl |
ProblemDiagnosis 내부 |
| Gradient Card |
bg-gradient-to-r from-[#4F1DA1] to-[#021341] |
ConsolidationCard, 강조 카드 |
4.3 Shadow System
/* Standard (대부분의 카드) */
shadow-sm /* Tailwind default */
/* Diagonal soft shadow (화이트 카드 on 다크) */
shadow-[3px_4px_12px_rgba(0,0,0,0.06)] /* 기본 */
shadow-[4px_6px_16px_rgba(0,0,0,0.09)] /* hover */
/* Status-tinted shadows (배지/태그) */
shadow-[2px_3px_8px_rgba(212,136,154,0.15)] /* Critical tint */
shadow-[2px_3px_8px_rgba(212,168,114,0.15)] /* Warning tint */
shadow-[2px_3px_8px_rgba(155,138,212,0.15)] /* Good/Purple tint */
shadow-[2px_3px_8px_rgba(122,132,212,0.15)] /* Info tint */
/* Elevated (헤더, 라이트박스) */
shadow-lg /* 리포트/플랜 헤더 패널 */
shadow-2xl /* 라이트박스 모달 */
5. Component Inventory
5.1 Shared UI Components (src/components/report/ui/)
| Component |
Props |
Description |
SectionWrapper |
id, title, subtitle, dark?, className? |
모든 섹션의 래퍼 |
MetricCard |
value, label, trend?, subtext? |
숫자 지표 카드 |
ScoreRing |
score, maxScore, size? |
SVG 원형 점수 표시 |
SeverityBadge |
severity |
상태 배지 (심각/주의/양호/우수) |
DiagnosisRow |
category, detail, severity, evidenceIds? |
진단 항목 행 |
ComparisonRow |
area, asIs, toBe |
As-Is → To-Be 비교 행 |
EvidenceGallery |
evidenceIds[] |
스크린샷 근거 갤러리 |
EvidenceScreenshot |
evidence, compact? |
개별 스크린샷 카드 |
EvidenceLightbox |
evidence, onClose |
스크린샷 확대 모달 |
5.2 Custom Icons (src/components/icons/FilledIcons.tsx)
모든 아이콘은 fill 전용 (stroke 없음), opacity: 0.25 배경 rect + fill path.
| Icon |
용도 |
YoutubeFilled |
YouTube 채널 |
InstagramFilled |
Instagram 채널 |
FacebookFilled |
Facebook 채널 |
TiktokFilled |
TikTok 채널 |
GlobeFilled |
웹사이트/기타 채널 |
VideoFilled |
영상 콘텐츠 |
FileTextFilled |
블로그 콘텐츠 |
ShareFilled |
소셜 콘텐츠 |
MegaphoneFilled |
광고 콘텐츠 |
MessageFilled |
메시지/커뮤니티 |
CalendarFilled |
일정/빈도 |
5.3 Button Patterns
| 타입 |
클래스 |
사용처 |
| Primary |
bg-gradient-to-r from-[#4F1DA1] to-[#021341] text-white rounded-full |
CTA, 로그인 |
| Secondary |
bg-white border border-slate-200 text-[#021341] rounded-full |
PDF 다운로드 |
| Tab Active |
bg-gradient-to-r from-[#4F1DA1] to-[#021341] text-white rounded-full |
탭 인터페이스 |
| Tab Inactive |
bg-slate-100 text-slate-600 rounded-full hover:bg-slate-200 |
탭 인터페이스 |
| Nav Active |
border-b-2 border-[#6C5CE7] text-[#0A1128] |
ReportNav 탭 |
5.4 Badge/Tag Patterns
| 타입 |
스타일 |
예시 |
| Priority P0 |
bg-[#FFF0F0] text-[#7C3A4B] border-[#F5D5DC] |
긴급 채널 |
| Priority P1 |
bg-[#FFF6ED] text-[#7C5C3A] border-[#F5E0C5] |
주요 채널 |
| Priority P2 |
bg-[#F3F0FF] text-[#4A3A7C] border-[#D5CDF5] |
보조 채널 |
| Content Type |
각 semantic status 색상 |
카드 내 유형 태그 |
| Platform |
bg-slate-100 text-slate-700 |
일반 플랫폼 라벨 |
6. Animation Patterns
| 패턴 |
구현 |
사용처 |
| Scroll reveal |
motion.div opacity: 0, y: 20→40 |
모든 SectionWrapper, 카드 |
| Stagger |
delay: index * 0.1 |
그리드 카드, 리스트 |
| Blob float |
animate-blob (7s) / animate-blob-large (25s) |
Hero, Modules 배경 |
| Score ring |
motion.circle dashoffset animation |
ScoreRing |
| Page transition |
Instant (no transition) |
React Router |
9. Hero Section Specification
Layout & Spacing
| Property |
Value |
Tailwind Class |
| Top padding |
112px / 144px |
pt-28 md:pt-36 |
| Bottom padding |
48px / 64px |
pb-12 md:pb-16 |
| Content max-width |
896px |
max-w-4xl mx-auto |
주의: min-h-screen 사용 금지 — 다른 섹션과 일관된 간격 유지 (~160px gap between sections)
Content Structure
- Badge —
PrismFilled infinity loop icon + "Agentic AI Marketing Automation for Premium Medical Business & Marketing Agency"
- H1 — "Infinite Growth Marketing Engine." (
text-5xl md:text-7xl tracking-[-0.02em])
- Subtitle — "Marketing that learns, improves, and accelerates — automatically. 쓸수록 더 정교해지는 AI 마케팅 엔진."
- CTA — URL input + Analyze button (gradient
from-[#4F1DA1] to-[#021341])
Kerning Adjustments (Playfair Display ligature fix)
Playfair Display의 fi ligature가 겹침 발생 시 개별 문자에 margin-left 음수값 적용:
<span className="tracking-[0.05em]">
In<span className="ml-[-0.04em]">f</span>
<span className="ml-[-0.04em]">inite</span>
</span>
규칙: letter-spacing은 문자 뒤에 적용되므로, 특정 문자 앞만 좁히려면 margin-left 사용
Section Spacing Consistency
| Section Transition |
Gap (approx.) |
| Hero → TargetAudience |
~160px |
| TargetAudience → Problems |
~192px |
| Problems → Solution |
~192px |
| Solution → Modules |
~192px |
7. PDF Export Rules
| 규칙 |
구현 |
| 숨길 요소 |
data-report-nav, data-plan-nav, nav, data-cta-card, data-no-print |
| 콘텐츠 래퍼 |
data-report-content 또는 data-plan-content |
| 페이지 분할 |
섹션 단위 원자적 처리, 900px 이하 섹션은 통째로 |
| 마진 |
8mm 전방향 |
| 푸터 |
"INFINITH Marketing Intelligence Report |
| 해상도 |
scale: 2, JPEG quality: 0.9 |
| 애니메이션 |
내보내기 전 opacity: 1, transform: none 강제 적용 |
8. Responsive Breakpoints
| Breakpoint |
Width |
주요 변화 |
| Mobile |
< 768px |
1열 그리드, 축소된 헤딩 |
| Tablet (md) |
768px+ |
2열 그리드, 중간 헤딩 |
| Desktop (lg) |
1024px+ |
3열 그리드, 풀 레이아웃 |
| Max content |
1280px |
max-w-7xl mx-auto |
이 문서는 코드와 함께 버전 관리됩니다. 디자인 변경 시 반드시 이 문서도 업데이트하세요.