Bold & Vibrant
강렬한 레드와 옐로우 악센트의 임팩트 있는 디자인 시스템입니다. 마케팅 사이트, 프로모션 페이지에 적합합니다.
Landing Page Sample
Combination Palette
레드 브랜드 컬러와 어울리는 강렬한 추천 조합
Set 1 - Fire레드 + 옐로우 + 다크
Set 2 - Contrast레드 + 블랙 + 화이트 고대비
Set 3 - Vibrant레드 + 퍼플 + 핑크 대담함
Prompt
AI에게 바로 붙여넣을 수 있는 디자인 지침입니다.
Bold & Vibrant 디자인 가이드:
[디자인 철학]
- 대담한 색상이 주목을 끈다. 눈에 확 들어오는 첫인상
- 큰 타이포그래피가 메시지를 전달한다. 두꺼운 웨이트 적극 활용
- 높은 대비가 명확한 시각적 위계를 만든다. 흑백 + 원색
- 전략적인 색상 사용이 최대의 임팩트. 너무 많으면 효과 반감
[UX 원칙]
- 핵심 메시지와 CTA가 가장 먼저 눈에 들어와야 한다
- 에너지 넘치면서도 혼란스럽지 않은 레이아웃
- 액션 유도 요소는 강렬하게, 나머지는 절제
- 빠르고 임팩트 있는 인터랙션
[컬러]
- Primary: #EF4444 (Red), Hover: #DC2626
- Accent: #FBBF24 (Yellow)
- Background: #FFFFFF, Tinted: #FEF2F2
- Text: #18181B (제목), #27272A (본문), #52525B (보조)
- Border: #FECACA, Focus: #EF4444
[사이즈]
- Spacing: 요소 내부 16px, 요소 간격 20px, 섹션 간격 64px
- Radius: 버튼/인풋 12px, 카드 16px, 배지 14px (pill)
- 버튼: 52px (기본), 40px (소형)
- 인풋: 52px
- Font: Pretendard, 16px 본문 (bold weight), 48px 디스플레이 (extrabold)
[적용 가이드]
이 가이드는 기본 지침이며, 앱의 특성과 성격에 따라 유연하게 조정하세요:
- 웹 vs 모바일: 모바일은 터치 타겟 48px 이상, 대중적인 디바이스의 기준을 따른다.
- 정보 밀도: 대시보드는 적당히 촘촘하게, 랜딩/마케팅은 여유롭게
- 브랜드 톤: 친근함은 컬러를 조금 더 사용하고, 신뢰감은 화이트 위주 + 포인트 컬러는 적게
→ 컬러와 디자인 철학은 유지하되, 사이즈/간격/컬러 사용량은 상황에 맞게 조정Design Tokens
Brand
Content (Text)
Border
Status
Error
Success
Info
Shadow
shadow-smshadow-mdshadow-lgshadow-brandTypography
DisplayBOLD 12348px / 800HeadingBOLD 12332px / 700Label LBOLD 12318px / 700Label MBOLD 12316px / 600Body LBOLD 12316px / 500Body RBOLD 12314px / 500Components
Bold & Vibrant 스타일이 적용된 컴포넌트 예시
Button
Input
Card
Bold Card
High contrast card with offset shadow.
Accent Card
Brand accent color title.
Badge
BrandAccentSuccessDark