# Design System Inspiration of Reddit

> **카테고리**: b2c
> **출처**: Inspired by reddit.com / brand identity, abstracted by Insuro Design System
> **추출 범위**: 디자인 토큰 (color/typography/spacing) + 레이아웃 영감 (코드 직접 복제 0%)

---

## 1. Visual Theme & Atmosphere

**전체 테마**: 커뮤니티 오렌지 다크/라이트

**키 특징**:
- Primary 색상은 `#FF4500` — 브랜드의 시그니처
- 배경 `#1A1A1B` 위에 텍스트 `#D7DADC`로 충분한 대비 확보
- 폰트는 `IBM Plex Sans, Inter` — 브랜드 정체성과 정합
- 컴포넌트 라운딩과 그림자는 브랜드 톤 유지
- Accent `#0079D3`는 CTA / 상태 표시에 한정 사용

---

## 2. Color Palette & Roles

### Primary
- **Brand Primary** (`#FF4500`): 브랜드 메인 — CTA, 로고, 핵심 강조
- **Brand Accent** (`#0079D3`): 보조 강조 — 호버, 활성 상태

### Neutral
- **Background** (`#1A1A1B`): 페이지 기본 배경
- **Surface** (`#F5F5F5` 또는 `#1A1A1A` 라이트/다크 분기): 카드/패널 배경
- **Text Primary** (`#D7DADC`): 기본 텍스트
- **Text Secondary** (`#6B7280` 라이트 / `#9CA3AF` 다크): 보조 텍스트
- **Border** (`#E5E7EB` 라이트 / `#27272A` 다크): 구분선

### Semantic
- **Success** (`#10B981`): 성공 / 완료
- **Error** (`#EF4444`): 에러 / 위험
- **Warning** (`#F59E0B`): 경고
- **Info** (`#3B82F6`): 정보 안내

---

## 3. Typography Rules

**Font Family**: `font-family: IBM Plex Sans, Inter, sans-serif;`
**Display Font**: `font-family: IBM Plex Sans, Inter, serif;` (헤드라인 강조 시)

### 크기 체계
- H1: 48px / weight 700 / line-height 1.2 / letter-spacing -0.02em
- H2: 36px / weight 700 / line-height 1.3
- H3: 24px / weight 600 / line-height 1.4
- Body: 16px / weight 400 / line-height 1.6
- Caption: 14px / weight 400 / line-height 1.5

---

## 4. Component Stylings

### Button
- **Primary**: `background: #FF4500; color: #1A1A1B; border-radius: 8px; padding: 12px 24px; font-weight: 600;`
- **Secondary**: `background: transparent; color: #FF4500; border: 1.5px solid #FF4500; border-radius: 8px;`
- **Ghost**: `background: transparent; color: #D7DADC; padding: 8px 16px;`

### Card
- `background: #1A1A1B; border: 1px solid #E5E7EB; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);`

### Input
- `background: #1A1A1B; border: 1px solid #D1D5DB; border-radius: 8px; padding: 12px 16px; font-size: 16px;`
- Focus ring: `box-shadow: 0 0 0 3px #FF450033;`

### Badge / Tag
- `background: #0079D31A; color: #0079D3; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500;`

---

## 5. Layout Principles

**Max Width**: `1200px` (desktop) / `100%` (mobile)
**Grid**: 12 columns, gap `24px`
**Spacing Scale**: `4, 8, 12, 16, 24, 32, 48, 64, 96px`
**Section Padding**: `96px 0` (desktop) / `48px 0` (mobile)

---

## 6. Depth & Elevation

### Shadow Scale
- sm: `0 1px 2px rgba(0,0,0,0.05)`
- md: `0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06)`
- lg: `0 10px 15px rgba(0,0,0,0.10), 0 4px 6px rgba(0,0,0,0.05)`
- xl: `0 20px 25px rgba(0,0,0,0.10), 0 10px 10px rgba(0,0,0,0.04)`

### Z-index
- Base: 0
- Dropdown: 10
- Sticky: 20
- Modal: 30
- Toast: 40

---

## 7. Do's and Don'ts

### Do's
- [x] Primary `#FF4500`는 페이지당 1~2회만 사용
- [x] 충분한 대비 확보 (WCAG AA 4.5:1 이상)
- [x] 폰트 `IBM Plex Sans, Inter` 패밀리 통일
- [x] 8px 그리드 기반 spacing 준수

### Don'ts
- [x] Primary 색상을 본문 텍스트에 사용 금지
- [x] 그림자 5단계 이상 중첩 금지
- [x] 폰트 패밀리 3개 이상 동시 사용 금지
- [x] 임의의 spacing 값 (예: 13px, 27px) 사용 금지

---

## 8. Agent Prompt Guide

**핵심 지시**: "이 프로젝트는 Reddit 스타일입니다. Primary 색상 `#FF4500`을 메인으로 사용하고, `IBM Plex Sans, Inter`를 기본 폰트로 사용하세요. 배경은 `#1A1A1B`, 본문 텍스트는 `#D7DADC`로 통일하세요."

**참고 사이트**: Reddit (reddit.com 또는 공식 브랜드 자료)

**카테고리 매칭**: b2c