# 크림/오렌지 톤 디자인 가이드

AIWEBMAKE에서 실제로 쓰고 있는 디자인 시스템이에요.
따뜻하고 친근한 느낌의 커뮤니티/교육 서비스를 만들 때 그대로 가져다 써도 좋아요.

## 1. 컬러 팔레트

| 이름 | 용도 | HEX |
|---|---|---|
| Cream | 배경 (기본) | `#FFF9F0` |
| Cream Card | 카드 배경 | `#FFFAF3` |
| Cream Soft | 강조 배경(연한 톤) | `#FFF4E8` |
| Brand Orange | 메인 포인트 컬러(버튼, 링크) | `#F97316` |
| Brand Orange Dark | 포인트 hover/강조 | `#EA6A0C` |
| Brand Green | 성공/완료 상태 | `#22C55E` |
| Brand Blue | 정보/보조 포인트 | `#3B82F6` |
| Ink | 본문 텍스트 | `#2B2B2B` |
| Ink Soft | 보조 텍스트(설명, 캡션) | `#6B6B6B` |

## 2. Tailwind CSS 설정 예시

```css
@theme {
    --color-cream: #fff9f0;
    --color-cream-card: #fffaf3;
    --color-cream-soft: #fff4e8;
    --color-brand-orange: #f97316;
    --color-brand-orange-dark: #ea6a0c;
    --color-brand-green: #22c55e;
    --color-brand-blue: #3b82f6;
    --color-ink: #2b2b2b;
    --color-ink-soft: #6b6b6b;
    --radius-card: 20px;
}
```

이렇게 등록하면 `bg-cream`, `text-brand-orange-dark`, `rounded-card` 같은 클래스를 바로 쓸 수 있어요.

## 3. 타이포그래피

- 폰트: Pretendard (한글 웹폰트, CDN으로 불러와 사용)
- 제목: `font-extrabold text-xl` ~ `text-2xl`
- 본문: `text-sm leading-relaxed text-ink`
- 보조 설명: `text-xs text-ink-soft`

## 4. 공통 컴포넌트 패턴

**카드**
```html
<div class="rounded-card bg-white p-6 shadow-sm">...</div>
```

**메인 버튼**
```html
<button class="rounded-full bg-brand-orange px-5 py-2.5 text-sm font-bold text-white hover:bg-brand-orange-dark">
  버튼 텍스트
</button>
```

**보조(아웃라인) 버튼**
```html
<button class="rounded-full border border-black/10 bg-white px-5 py-2.5 text-sm font-bold text-ink hover:bg-cream">
  버튼 텍스트
</button>
```

**배지/상태 표시**
```html
<span class="rounded-full bg-brand-green/10 px-3 py-1 text-xs font-bold text-brand-green">완료</span>
```

## 5. 여백·반경 규칙

- 카드 모서리: `rounded-card` (20px)
- 버튼/배지 모서리: `rounded-full` (알약 모양)
- 카드 내부 여백: `p-5` ~ `p-8`
- 섹션 간 여백: `mt-6` ~ `mt-10`

## 6. AI에게 이 가이드를 적용해달라고 요청하는 예시

> "위 디자인 가이드(컬러 팔레트, 컴포넌트 패턴)를 우리 프로젝트의 Tailwind 설정에 그대로 적용해줘. 기존 화면에 있는 버튼과 카드 스타일도 이 가이드에 맞게 통일해줘."