프레스티지 SaaS 리스트레인트

# 프레스티지 SaaS 리스트레인트 — web 디자인 팩

## 이 스타일의 정체성
차분한 오프화이트 배경에 미디엄 굵기 그로테스크 헤드라인 한 줄과 태그라인 한 줄, 그 아래 부드러운 다단 그림자를 단 제품 스크린샷이 비대칭으로 앉는 절제된 프리미엄 SaaS 웹이다. 무엇을 보면 이 스타일임을 아는가 — 색이 거의 없다(무채 + 잉크 슬레이트 네이비 단 한 톤), 헤드라인이 거대하지 않고 미디엄 굵기로 단정하며 가끔 세리프 단어 하나가 악센트로 끼어든다, 제품 스크린샷이 중앙이 아닌 한쪽으로 치우쳐 여백을 넓게 남기고, 호버하면 카드가 짧고 단호하게(snappy) 들리며 색이 순간 반전된다.

## 색
- 배경: `#f8f8f6` (차분한 오프화이트). 섹션 교차로 `#ffffff`.
- 표면(카드): `#ffffff`, 보더로 구분.
- 텍스트: `#1a1d24` (잉크 슬레이트-블랙, 본문·헤드라인). 부제·메타는 `#5b6170`.
- 강조: 슬레이트 네이비 단 하나 — `#2d3850`. CTA 솔리드 배경, 링크, 키커, 포커스 링에만. 면적 6% 이하. 보조 농담: `#e8eaef`(연한 슬레이트 틴트, 태그·하이라이트 면). 네이비 외 다른 색상 금지.
- 본문 대비: `#1a1d24` on `#f8f8f6` ≈ 14:1 (WCAG AAA).

## 타이포그래피
- 헤드라인: `Geist`(Google Fonts, 미사용 시 `Inter`) weight 500~600, 대체 `system-ui, sans-serif`. H1 `clamp(2rem, 3.6vw, 3.2rem)`, weight 600, `letter-spacing: -0.02em`, line-height 1.18 — 거대하지 않은 단정한 미디엄 디스플레이.
- 세리프 악센트: H1·H2 안의 핵심 단어 1개만 `Source Serif 4`(Google Fonts) italic, weight 400, 같은 크기. 그 외 세리프 사용 금지 — 악센트 한 단어로 절제.
- 키커/라벨: `Inter` `0.78rem`, weight 600, 대문자, `letter-spacing: 0.1em`, 색 `#2d3850`.
- 본문: `Inter` `1.0625rem`, weight 400, line-height 1.65, 측정 60~70자.
- 마이크로 라벨(태그·배지): `Inter` `0.75rem`, weight 500.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭: `1140px`. 좌우 패딩 모바일 24px / 데스크탑 56px.
- 브레이크포인트: 720px, 1080px.
- 비대칭 12열 — 히어로는 텍스트 5열(좌) + 제품 스크린샷 7열(우)이되 스크린샷이 우측 가장자리 밖으로 살짝 넘쳐(`overflow` 24~48px) 비대칭 긴장. 다음 섹션은 좌우 반전.
- 섹션 수직 리듬: 섹션 간 `clamp(96px, 11vw, 152px)` (airy — 넉넉한 여백).
- 그리드 정렬은 엄격하되 요소 배치는 비대칭. 중앙 정렬 히어로 금지.

## 형태 / 질감
- 모서리: 카드·스크린샷 컨테이너 radius `12px`. 버튼 — CTA는 알약(`radius 999px`), 작고 단단하게.
- 보더: 카드 `1px solid #e8eaef`. 강조 보더는 `1px solid #2d3850`.
- 그림자: 제품 스크린샷에만 부드러운 다단 그림자 — `0 2px 8px rgba(26,29,36,0.06), 0 24px 48px rgba(26,29,36,0.10)`. 일반 카드는 그림자 없이 보더로만 — 모든 카드에 같은 soft shadow를 깔지 않는다.
- 이미지/스크린샷: radius 12px, `1px solid #e8eaef`, 위에 미세한 상단 글로스(`linear-gradient` 화이트 4%) 한 줄만.
- 버튼: CTA — 솔리드 `#2d3850` 알약, `#f8f8f6` 텍스트, 패딩 `12px 26px`, weight 600. 세컨더리 — 텍스트만 + 슬레이트 밑줄.

## 모션
- 전환: `snappy` — `140ms cubic-bezier(0.2, 0, 0, 1)`.
- 스크롤 진입: `opacity 0 → 1` + `translateY(10px → 0)`, 200ms, 거의 즉각적.
- 호버: 카드 `translateY(-2px)` 140ms + 보더가 `#e8eaef → #2d3850`로 단호하게 전환. CTA 알약은 호버 시 배경·텍스트 색이 짧게 반전(`#2d3850` 배경 → `#f8f8f6` 배경 + `#2d3850` 텍스트) 120ms — 스냅 마이크로인터랙션.
- 링크 밑줄은 좌→우가 아니라 즉시(opacity) 나타남 — 느린 흐름 금지.
- 패럴랙스·바운스·1초 이상 모션 금지. 절제된 럭셔리지만 모션만은 빠르고 단호하다.

## 하지 말 것
- 보라/인디고 그라디언트 금지. 그라디언트 자체를 쓰지 않는다(미세 상단 글로스 1줄 예외).
- 슬레이트 네이비 외 강조색(특히 청록·바이올렛 SaaS 클리셰) 금지.
- 중앙 정렬 히어로 금지 — 비대칭이 정체성.
- 모든 카드에 동일한 soft shadow 깔기 금지 — 그림자는 제품 스크린샷에만, 카드는 보더로만 구분.
- 세리프를 본문·여러 단어에 쓰기 금지 — 세리프는 헤드라인 속 악센트 한 단어로만.
- 느린 페이드(> 300ms)·우아한 흐름 모션 금지 — 이 팩의 모션은 snappy.
- 거대한(`clamp` 상한 4rem 초과) 디스플레이 헤드라인 금지 — 단정한 미디엄 스케일.
- 이모지·일러스트·blob·그라디언트 텍스트·글래스 패널 금지.

## 적용 예
- **히어로:** 오프화이트 배경. 좌측 5열에 슬레이트 키커 + 미디엄 그로테스크 H1(핵심 단어 1개만 Source Serif italic) + Inter 태그라인 + 슬레이트 솔리드 알약 CTA + 텍스트 세컨더리. 우측 7열에 radius 12px 제품 스크린샷, 우측 가장자리 밖으로 32px 넘쳐 부드러운 다단 그림자.
- **카드(기능/플랜):** `#ffffff` 표면, `1px solid #e8eaef`, radius 12px, 그림자 없음. 안에 작은 슬레이트 아이콘(라인) + 키커 + 미디엄 제목 + 본문. 호버 시 `translateY(-2px)` + 보더가 슬레이트 네이비로 단호하게.
- **푸터:** `#ffffff` 위 상단 `1px solid #e8eaef`. 좌측 워드마크(Geist 미디엄), 우측 메뉴 다단(Inter, 슬레이트 호버). airy 패딩(112px). 색 반전 없음 — 절제된 라이트 푸터.