GPTers Brand
GPTers 브랜드 아이덴티티 기반 디자인 시스템입니다. 오렌지(#FF6900) 포인트 컬러와 깔끔한 미니멀 레이아웃이 특징입니다.
Landing Page Sample
Combination Palette
오렌지 브랜드 컬러와 어울리는 추천 조합
Set 1 - Classic오렌지 + 딥 블루 (보색 조화)
Set 2 - Warm오렌지 + 골드/베이지 (유사색 조화)
Set 3 - Modern오렌지 + 다크 그레이 (모노톤 대비)
Prompt
AI에게 바로 붙여넣을 수 있는 디자인 지침입니다.
GPTers 브랜드 디자인 가이드:
[디자인 철학]
- 깔끔하고 미니멀한 느낌. 복잡함 없이 핵심만 보여준다
- 오렌지는 "액션"을 의미. CTA와 강조에만 사용하고 남용 금지
- 충분한 여백으로 숨 쉴 공간을 준다. 빽빽하게 채우지 않는다
- 시각적 계층을 명확히: 제목 → 본문 → 보조텍스트 순으로 명도 차이
[UX 원칙]
- 사용자 플로우를 고려해 자연스러운 동선으로 배치한다
- 시각적 위계를 명확히: 가장 중요한 것이 가장 눈에 띄어야 한다
- 한 화면에 하나의 목적. 사용자가 뭘 해야 하는지 명확히
- 인터랙션 피드백은 즉각적으로. 클릭/호버 상태를 분명히 보여준다
[컬러]
- Primary: #FF6900 (CTA, 링크, 강조)
- Background: #FFFFFF, Secondary BG: #FAFAFA
- Text: #09090B (제목), #3F4146 (본문), #71717A (보조)
- Border: #E4E4E7, Focus: #FF6900
[사이즈]
- Spacing: 요소 내부 8px, 요소 간격 16px, 섹션 간격 32px
- Radius: 버튼/인풋 8px, 카드 12px, 배지 full
- 버튼: 32px (기본), 44px (큰 CTA)
- 인풋: 44px
- Font: Pretendard, 14px 본문, 24px 타이틀
[적용 가이드]
이 가이드는 기본 지침이며, 앱의 특성과 성격에 따라 유연하게 조정하세요:
- 웹 vs 모바일: 모바일은 터치 타겟 48px 이상, 대중적인 디바이스의 기준을 따른다.
- 정보 밀도: 대시보드는 적당히 촘촘하게, 랜딩/마케팅은 여유롭게
- 브랜드 톤: 친근함은 컬러를 조금 더 사용하고, 신뢰감은 화이트 위주 + 포인트 컬러는 적게
→ 컬러와 디자인 철학은 유지하되, 사이즈/간격/컬러 사용량은 상황에 맞게 조정Design Tokens
Brand
Content (Text)
Border
Status
Error
Success
Info
Shadow
shadow-smshadow-mdshadow-lgshadow-xlTypography
Display가나다 ABC 12324px / 600Heading가나다 ABC 12320px / 600Label L가나다 ABC 12316px / 600Label M가나다 ABC 12314px / 500Body L가나다 ABC 12316px / 400Body R가나다 ABC 12314px / 400Components
GPTers 브랜드 스타일이 적용된 컴포넌트 예시
Button
Input
Card
Card Title
Card description text goes here.
Compact Card
Smaller padding variant.
Badge
BrandSuccessErrorInfoNeutral