웜 워크스페이스

# 웜 워크스페이스 — web 디자인 팩

## 이 스타일의 정체성
따뜻한 오프화이트 캔버스와 잉크 그레이 본문 위에, 손그림 느낌의 단색 라인 일러스트와 둥근 모서리 콘텐츠 카드가 친근하게 섞인다. 휴머니스트 세리프 헤드라인 + 산세리프 본문의 혼합 타이포로 문서 친화적이면서 따뜻하다. 강조는 차분한 인디고와 살구색 두 톤으로만. 빈 공간은 이모지가 아니라 일관된 1.5px stroke 라인 일러스트가 채운다. 한눈에 "따뜻하고 조용한, 문서 도구의 마케팅 페이지"로 읽혀야 한다.

## 색
- 배경: `#fffdf9` (따뜻한 오프화이트)
- 표면(카드): `#ffffff`, 보조 표면 `#faf6ef` (살짝 더 웜)
- 텍스트: `#37352f` (잉크 그레이, 약간 웜) / 보조 `#6b6862`
- 보더: `#ece8e0` (1px 헤어라인)
- 강조색 2개: `#4f4dc4`(차분한 인디고) · `#e8a87c`(살구) — 인디고는 링크·1차 CTA에, 살구는 하이라이트·배경 워시·일러스트 포인트에. 합쳐 면적 12% 이하.
- 그라디언트 금지 — 색은 솔리드 또는 아주 옅은 단색 워시(`#faf6ef` 같은)만.

## 타이포그래피
- 헤드라인: `Fraunces, "Source Serif 4", Georgia, serif` (Fraunces = Google Fonts 공개, 휴머니스트 세리프) — `opsz` 큰 옵티컬 사이즈, 약간의 부드러움
- 본문/라벨: `Inter, Pretendard, sans-serif` (Google Fonts)
- H1: `clamp(2.4rem, 5vw, 4rem)`, Fraunces weight 500, letter-spacing `-0.01em`, line-height 1.12
- H2: `clamp(1.6rem, 3vw, 2.3rem)`, Fraunces weight 500, line-height 1.2
- 본문: `1.0625rem`, Inter weight 400, line-height 1.7, 측정 폭 62~70자
- 라벨/eyebrow: `0.8125rem`, Inter weight 600, letter-spacing `0.04em`, 대문자, 종종 살구색
- 인용/강조 문장: Fraunces 이탤릭 사용 가능 — 세리프의 따뜻함을 살린다.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭 `980px` (좁게 — 문서처럼 읽히게), 좌우 패딩 `24px`
- 중앙 정렬 기조 — 콘텐츠 컬럼이 가운데, 일러스트는 컬럼 옆 여백으로 살짝 비어져 나온다.
- 브레이크포인트: `<768px` 1열 / `>768px` 텍스트+일러스트 2열
- 섹션 수직 간격 `120px`, 블록 간격 `40px` (airy — 여백을 넉넉히)
- 카드 그리드는 2열 또는 3열, 카드 사이 간격 `24px`.

## 형태 / 질감
- radius: 카드 `14px`, 버튼 `10px`, 이미지·일러스트 프레임 `12px`, 입력 필드 `10px`
- 보더: `1px solid #ece8e0` — 부드러운 헤어라인
- 그림자: 카드에 `0 2px 8px rgba(55,53,47,0.06)` 한 단계 — 아주 옅고 낮게. 진하거나 컬러 섀도 금지.
- 라인 일러스트: `1.5px` stroke, 단색(`#37352f` 또는 인디고), 채움 없음, 손그림 느낌의 약간 불완전한 곡선. 일관된 한 세트의 스타일로.
- 아이콘: 일러스트와 같은 1.5px stroke 라인 스타일, 단색.
- 버튼: 1차 CTA는 인디고 배경 + 흰 텍스트, 보조는 흰 배경 + 1px 보더.

## 모션
- subtle. 트랜지션 `220ms ease-out`.
- 호버: 카드는 `translateY(-3px)` + 그림자 살짝 깊어짐(`0 6px 16px rgba(55,53,47,0.08)`). 버튼은 배경 톤만 미세하게.
- 스크롤 진입: 섹션 `opacity 0→1` + `translateY(16px→0)`, 280ms, 부드럽게. 일러스트는 살짝 늦게(80ms 지연) 등장.
- `prefers-reduced-motion: reduce` 시 transform 제거, opacity만.

## 하지 말 것
- 이모지 금지 — 빈 공간은 일관된 라인 일러스트로 채운다.
- 보라/인디고 풀블리드 그라디언트 금지. 어떤 그라디언트도 금지 — 옅은 단색 워시까지만.
- 두툼한 3D 클레이 형태·과장된 압출 금지 — 일러스트는 항상 플랫한 1.5px 라인.
- 진하거나 컬러가 든 드롭섀도 금지 — 그림자는 한 단계, 아주 옅게.
- 차가운 순백(`#ffffff`)을 페이지 배경으로 쓰지 말 것 — 배경은 항상 웜 오프화이트(`#fffdf9`).
- 굵은(700+) 디스플레이 헤드라인 금지 — 헤드라인은 Fraunces 500.
- blob 도형·정체불명 일러스트·채워진 일러스트 금지. 강조 두 색을 넘는 색 추가 금지.

## 적용 예
- **히어로**: 웜 오프화이트 배경, 중앙 정렬 Fraunces H1(500) + Inter 보조 텍스트 + 인디고 CTA 버튼. 컬럼 우측 여백으로 라인 일러스트 한 점이 살짝 비어져 나온다. 살구색 옅은 워시를 히어로 하단 배경에 깔 수 있다.
- **카드 섹션**: 2~3열 카드, 14px radius, 1px 헤어라인 보더, 옅은 그림자. 각 카드 상단에 1.5px 라인 아이콘 한 개. 호버 시 부드럽게 들림.
- **푸터**: 보조 표면색(`#faf6ef`)으로 살짝 구분, 색 반전하지 않음. 링크를 3~4열로 정렬, 상단에 1px 헤어라인. 모서리에 작은 라인 일러스트 한 점.