Skip to main content

Vivid AI Frontend Design System

이 문서는 Vivid AI의 프론트엔드 개발을 위한 디자인 시스템, 컬러 팔레트, 타이포그래피 및 공통 컴포넌트 가이드라인을 정의합니다.

1. Design Philosophy​

Vivid AI의 디자인은 **"Vivid Pop & Pure"**라는 아이덴티티와 "4-Level Visual Hierarchy" 원칙을 따릅니다.

Core Principles​

  1. Vivid Pop & Pure: 생동감 넘치는 컬러(#FF3366, #7000FF)와 깨끗한 배경(#F8F9FA)의 조화.
  2. Super Rounded: rounded-[2rem] 이상의 둥근 모서리를 사용하여 친근하고 몰입감 있는 UI 제공.
  3. Borderless & Soft: 딱딱한 경계선(Border) 대신 여백(Whitespace)과 그림자(Soft Shadow)로 계층 구분.
  4. 4-Level Hierarchy: 정보의 중요도에 따라 시각적 강약을 철저히 구분.

2. Design Tokens (Tailwind Config)​

🎨 Color Palette​

Token NameHex CodeUsage
Primary#FF3366핵심 액션, 브랜드 강조 (Vivid Pink)
Secondary#7000FF그라디언트 보조, 깊이감 (Deep Purple)
Background#F8F9FA메인 배경 (Soft Gray)
Surface#FFFFFF카드, 모달 배경
Text-Primary#1A1A1A본문, 제목
Text-Secondary#868E96설명, 보조 텍스트 (Level 3)
Text-Tertiary#ADB5BD비활성 텍스트, 플레이스홀더

🔠 Typography​

  • Font Family: Pretendard, system-ui, sans-serif
  • Logo Font: Pretendard Black Italic (커스텀 로고용)
ScaleClassSizeWeightUsage
H1text-3xl30pxBlack (900)페이지 타이틀 (Level 1)
H2text-2xl24pxBold (700)섹션 타이틀
H3text-xl20pxBold (700)카드 타이틀
Bodytext-base16pxMedium (500)기본 본문
Smalltext-sm14pxMedium (500)설명, 버튼 텍스트
Tinytext-xs12pxBold (700)태그, 메타 정보

🌑 Shadows & Radius​

  • Shadow-Soft: 0 20px 40px -10px rgba(0,0,0,0.05) (기본 카드)
  • Shadow-Hover: 0 25px 50px -12px rgba(112, 0, 255, 0.15) (호버 시 Secondary 컬러 발광)
  • Radius-Large: 2.5rem (40px) - 메인 컨테이너, 카드
  • Radius-Medium: 1rem (16px) - 내부 버튼, 입력창

3. Component Hierarchy System​

모든 컴포넌트는 아래 4단계 위계에 따라 디자인되어야 합니다.

Level 1: Core Focus (주인공)​

  • 대상: 생성된 이미지, 선택된 페르소나 카드.
  • 스타일:
    • 가장 큰 영역 차지.
    • 가장 선명한 컬러 및 고해상도 이미지.
    • shadow-2xl 등 강한 그림자 사용 가능.

Level 2: Active Tools (조연)​

  • 대상: Generate 버튼, 프롬프트 입력창, 주요 태그 선택.
  • 스타일:
    • Primary Button: bg-gradient-to-r from-primary to-secondary + text-white.
    • Input: bg-gray-50 + hover:bg-gray-100 (Border 없이 배경색으로 구분).
    • Selection: 선택 시 Primary 컬러 테두리 또는 배경색 적용.

Level 3: Passive Context (배경)​

  • 대상: Top Bar(로고, 프로필), 내비게이션, 크레딧 잔액.
  • 스타일:
    • Borderless: 경계선 없이 배경과 자연스럽게 어우러짐.
    • Top Bar: 스크롤 시 bg-white/80 backdrop-blur-md 적용.
    • Text: text-gray-400 ~ text-gray-500.

Level 4: Hidden / On-Demand (무대 뒤)​

  • 대상: 고급 설정(Seed, Sampler), 부가 정보, 삭제 버튼.
  • 스타일:
    • 기본적으로 숨김 처리 (Accordion, Modal, Hover).
    • 노출 시에도 가장 작은 폰트(text-xs)와 연한 컬러 사용.

4. Common Components Guide​

1. Top Bar (Global Header)​

  • 모든 페이지 상단에 고정적으로 노출.
  • 구성: 좌측 Vivid. 로고(Gradient Text) + 우측 프로필/크레딧.
  • 스타일: 배경색 투명 혹은 흰색 블러, border-none.

2. Action Button (Primary)​

// Tailwind Classes
<button class="bg-black text-white px-6 py-3 rounded-full font-bold 
               hover:bg-gradient-to-r hover:from-primary hover:to-secondary 
               transition-all duration-300 shadow-lg hover:shadow-primary/40">
  Generate
</button>

3. Glass Card (Container)​

<div class="bg-white rounded-[2.5rem] p-8 shadow-soft card-hover border border-white/50">
  <!-- Content -->
</div>

4. Tag / Chip (Toggle)​

  • Inactive: bg-gray-100 text-gray-400 hover:bg-gray-200
  • Active: bg-black text-white (또는 Primary Gradient)

5. Implementation Strategy (Next.js + Tailwind)​

  1. Tailwind Config: tailwind.config.ts에 위 컬러와 폰트, 쉐도우를 theme.extend로 등록.
  2. Base Layer: globals.css에 기본 배경색(bg-[#F8F9FA])과 폰트 적용.
  3. Components: src/components/common 디렉토리에 Button.tsx, Card.tsx, TopBar.tsx 등으로 원자(Atomic) 단위 컴포넌트화.