# PlayStation에서 영감을 받은 디자인 시스템

> Category: 미디어 & 소비자
> 게임 콘솔 리테일. 3면 채널 레이아웃, 조용한 권위감의 디스플레이 서체, 시안 호버 스케일.

## 1. 비주얼 테마 & 분위기

PlayStation.com은 마치 엔터테인먼트를 판매하는 프리미엄 소비자 가전 브랜드의 마케팅 부서처럼 스스로를 표현합니다. 페이지는 **교차하는 서피스의 수직 채널**로 구성됩니다: 거의 검정에 가까운 마스트헤드와 히어로 영역, 중간부의 종이 흰색 에디토리얼 패널 시퀀스, 그리고 전체 경험을 고정하는 진한 코발트블루 푸터. 이 서피스 모드 사이에서 사이트는 사진과 3D 제품 렌더링—PS5 콘솔, 게임 커버 아트, DualSense 컨트롤러—에 크게 의존하여 하드웨어가 감성적인 역할을 담당하는 동안 크롬 요소들은 절제된 상태를 유지합니다.

타이포그래피의 시그니처는 **SST Light (굵기 300)를 대형 사이즈에 사용**하는 것입니다. Sony의 커스텀 SST 패밀리는 22px부터 54px까지 굵기 300으로 사용되어, 디스플레이 헤드라인에 게임 스토어보다는 명품 시계 광고에 가까운 부드럽고 우아한 품격을 부여합니다. 이 "조용한 권위감"은 The Verge의 Manuka 스타일 강렬함이나 Wired의 신문 가판대 밀도와는 정반대입니다—PlayStation은 서체가 뒤로 물러나고 제품이 앞으로 나오기를 원합니다. 본문과 UI는 굵기 500–700에 의존하지만, *디스플레이* 톤은 일관되게 얇고 차분합니다.

절제가 깨지는 유일한 지점은 **인터랙션**입니다. 모든 primary 버튼은 동일한 호버 동작을 갖습니다: 채우기가 일렉트릭 시안 `#1eaedb`으로 전환되고, 2px 흰색 테두리가 나타나며, 2px PlayStation 블루 외곽 링이 뒤에서 피어오르고, 버튼 전체가 **1.2×로 확대**됩니다. 색상 팝, 테두리, 링, 리프트 스케일의 이 조합은 주요 브랜드 중 Sony만의 시그니처 동작으로, 사이트가 단일 페이지에서 수백 번 반복하는 소형 "전원 켜기" 애니메이션입니다.

**주요 특징:**
- 3면 채널 레이아웃: 거의 검정의 히어로, 종이 흰색 콘텐츠, 코발트블루 푸터—교차하되 혼합하지 않음
- 디스플레이용 SST 굵기 300, 22–54px — 제품 사진을 주인공으로 만드는 "조용한 권위감" 헤드라인
- PlayStation Blue `#0070cc`를 브랜드 앵커로; 시안 `#1eaedb`는 호버/포커스 상태에만 독점 사용
- 모든 인터랙티브 요소는 호버 시 1.2× 확대 — PlayStation만의 시그니처 "전원 켜기" 리프트
- 버튼은 완전한 999px 반지름의 필 형태; 카드 아트는 12–24px 둥근 직사각형
- 커머스 오렌지 `#d53b00`은 PlayStation Store / 구매 상태 CTA에만 독점 사용
- 최대 2120px까지 넓은 브레이크포인트 지원 — 4K TV 브라우징 환경까지 스케일 대응

## 2. 컬러 팔레트 & 역할

### Primary (브랜드 앵커)
- **PlayStation Blue** (`#0070cc`): 브랜드의 앵커 컬러. 주요 푸터, 인라인 링크, 어두운 서피스의 primary 버튼 채우기, 모든 "공식" 마커에 사용. 소비자 기억 속에서 브랜드와 가장 강하게 연결된 색상이므로 불변 요소로 취급할 것.
- **Console Black** (`#000000`): 마스트헤드, 히어로 배경, 제품 프레젠테이션 영역에 사용하는 순수 검정. PlayStation은 미술관이 조각품을 검정으로 프레이밍하듯 하드웨어를 검정으로 프레이밍합니다.

### Secondary & 액센트
- **PlayStation Cyan** (`#1eaedb`): 인터랙션 컬러. 버튼과 링크의 호버, 포커스, 활성 상태에만 적용. 기본 배경이나 정적 텍스트 색상으로는 절대 사용하지 않음. 호버 시 완전한 시그니처 처리를 위해 2px `#ffffff` 테두리와 2px `#0070cc` 외곽 링과 함께 페어링할 것.
- **Link Hover Blue** (`#1883fd`): 인라인 텍스트 링크 호버에 사용하는 더 밝은 변형. 시안과는 구별됨—이것은 링크 색상이고, 시안은 버튼 색상입니다.
- **Dark Link Blue** (`#0068bd`): 밝은 서피스에서 정적 상태의 링크 색상 — 브랜드 블루의 약간 더 채도 높은 사촌.

### 서피스 & 배경
- **Paper White** (`#ffffff`): 마스트헤드와 푸터 사이 에디토리얼 패널의 주요 콘텐츠 캔버스.
- **Ice Mist** (`#f5f7fa`): 밝은 섹션 그라디언트의 대기적 끝점. 특정 패널 뒤에 미묘하게 사용되어 순수 흰색에서 살짝 부각시킴.
- **Divider Tint** (`#f3f3f3`): 콘텐츠 행 사이의 조용한 수평 구분선 색상.
- **Masthead Black** (`#000000`): 상단 네비게이션과 히어로 캔버스 — 제품 중심 영역에 사용.
- **Shadow Black** (`#121314`): 패널에 대기적 깊이가 필요할 때 사용하는 어두운 섹션 그라디언트의 시작 앵커.
- **Filter Mist** (`rgba(245, 247, 250, 0.3)`): 고정 필터 바 뒤에 사용하는 반투명 배경 — 사이트에서 유일한 "글래스모피즘" 순간.

### 중립 & 텍스트
- **Display Ink** (`#000000`): 흰색 서피스의 주요 디스플레이 헤드라인.
- **Deep Charcoal** (`#1f1f1f`): 본문 헤드라인과 정적 상태 링크 색상 — 큰 텍스트 블록에서 시각적 진동을 줄이기 위해 순수 검정보다 약간 부드러움.
- **Body Gray** (`#6b6b6b`): 보조 본문 텍스트와 메타데이터.
- **Mute Gray** (`#cccccc`): 3차 레이블, 비활성화 상태.
- **Placeholder Ink** (`rgba(0, 0, 0, 0.6)`): 폼 플레이스홀더 텍스트 — 별도의 회색 값이 아닌 60% 검정.
- **Inverse White** (`#ffffff`): 어두운 서피스와 파란색 서피스의 주요 텍스트.
- **Dark-Link Blue** (`#53b1ff`): 어두운/검정 서피스에서 정적 상태의 링크 색상 — 검정 배경에서 가독성을 위한 PlayStation Blue의 더 밝고 경쾌한 변형.

### 시맨틱 & 커머스
- **Commerce Orange** (`#d53b00`): PlayStation Store 구매 상태 CTA, 가격 콜아웃, "할인" 뱃지에 사용. 사이트에서 유일한 따뜻한 색상 — 드물게 사용하고 커머스 맥락 외에는 절대 사용하지 않음.
- **Commerce Orange Active** (`#aa2f00`): 커머스 버튼의 눌림/활성 상태.
- **Warning Red** (`#c81b3a`): 폼 오류와 파괴적 액션 경고.
- **Shadow Wash 80** (`rgba(0, 0, 0, 0.8)`): 제품 사진 위 히어로 텍스트 뒤에 사용하는 극적인 스크림.
- **Shadow Wash 16** (`rgba(0, 0, 0, 0.16)`): 카드의 저중량 엘리베이션 링.
- **Shadow Wash 08** (`rgba(0, 0, 0, 0.08)`): 깃털처럼 가벼운 카드 엘리베이션 — 거의 보이지 않지만 흰색 배경에서 흰색 패널을 분리함.
- **Shadow Wash 06** (`rgba(0, 0, 0, 0.06)`): 시스템에서 가장 가벼운 그림자.

### 그라디언트 시스템
PlayStation은 **두 가지 섹션 그라디언트**만 사용합니다:
- **Light Section Gradient**: `#ffffff` → `#f5f7fa` — 패널을 캔버스에서 조용하게 부각시키는 거의 눈에 띄지 않는 워시.
- **Dark Section Gradient**: `#121314` → `#000000` — 색조 변화 없이 히어로 패널에 미묘한 비네트를 부여하는 짧은 수직 워시.

두 그라디언트 모두 **섹션 배경으로만** 사용하며, 컴포넌트 내부에는 사용하지 않습니다. 그라디언트 버튼, 그라디언트 텍스트, 빛나는 헤일로는 없습니다. 브랜드는 파란색입니다—파란색에서 보라색으로, 파란색에서 시안으로가 아닙니다.

## 3. 타이포그래피 규칙

### 폰트 패밀리
- **SST** / **Playstation SST** (Sony, 독점 소유) — 폴백: `Arial`, `Helvetica`. Toshi Omagari와 Akira Kobayashi가 디자인한 Sony의 커스텀 글로벌 서체. 홈페이지 전반에서 굵기 300 / 500 / 600 / 700을 커버. **22–54px에서의 굵기 300**이 PlayStation의 타이포그래피 시그니처입니다.
- **SST (condensed / alternate)** — 폴백: `helvetica`, `arial`. 너비가 중요한 일부 UI 모듈에서 사용하는 압축 변형.
- **Arial** — 시스템 산세리프로 렌더링되는 드문 버튼 변형을 위한 유틸리티 폴백.

### 계층 구조

| 역할 | 폰트 | 크기 | 굵기 | 줄 높이 | 자간 | 비고 |
|---|---|---|---|---|---|---|
| Hero Display (XL) | SST | 54px / 3.38rem | 300 | 1.25 | -0.1px | 페이지에서 가장 큰 SST — 조용한 굵기의 럭셔리 헤드라인 |
| Hero Display (L) | SST | 44px / 2.75rem | 300 | 1.25 | 0.1px | 보조 히어로 헤드라인 |
| Large Display | SST | 35px / 2.20rem | 300 | 1.25 | — | 피처 패널 헤드라인 |
| Mid Display | SST | 28px / 1.75rem | 300 | 1.25 | 0.1px | 섹션 제목 |
| Compact Display | SST | 22px / 1.38rem | 300 | 1.25 | 0.1px | 모듈 제목 — 여전히 라이트 굵기 300 |
| Playstation SST Sub | Playstation SST | 22.5px / 1.41rem | 400 | 1.30 | — | 프로모션 서브 헤딩 |
| UI Heading Small | SST | 18px / 1.13rem | 600 | 1.00 | — | 타이트한 UI 헤딩 |
| Button / CTA | SST | 18px / 1.13rem | 500 | 1.25 | 0.4px | Primary 버튼 레이블 |
| Button / Emphasized | SST | 18px / 1.13rem | 700 | 1.25 | 0.45px | 고강조 CTA (구매, 구독) |
| Button Serif | SST | 18px / 1.13rem | 600 | 1.50 | — | Secondary 버튼 레이블 |
| Body Relaxed | SST | 18px / 1.13rem | 400 | 1.50 | 0.1px | 표준 읽기용 본문 |
| Link Body | SST | 18px / 1.13rem | 400 | 1.50 | — | 인라인 링크 텍스트 |
| Compact Button | SST | 14px / 0.88rem | 700 | 1.25 | 0.324px | 카드 내 미니 CTA |
| Utility Caption | SST | 14px / 0.88rem | 500 | 1.50 | — | 캡션, 태그 레이블 |
| Caption Body | SST | 14px / 0.88rem | 400 | 1.50 | — | 표준 메타데이터 |
| Playstation Caption Bold | Playstation SST | 14px / 0.88rem | 700 | 1.40 | — | 강조 캡션 |
| Playstation Caption Mid | Playstation SST | 14px / 0.88rem | 600 | 1.40 | — | 세미볼드 캡션 |
| Playstation Button | Playstation SST | 14.4px / 0.90rem | 700 | 1.00 | 0.144px | 타이트한 줄 높이의 UI 버튼 |
| Playstation Tab | Playstation SST | 14px / 0.88rem | 400 | 1.10 | 0.14px | 탭/필 레이블 |
| Playstation Compact Caption | Playstation SST | 12.8px / 0.80rem | 400 | 1.10 | — | 가장 작은 UI 캡션 |
| Micro Caption | SST | 12px / 0.75rem | 500 | 1.50 | — | 푸터 마이크로카피, 법적 텍스트 |
| Compact Caption Bold | SST | 12.06px / 0.75rem | 700 | 1.50 | — | 강조된 마이크로 텍스트 |

### 원칙
- **대형 사이즈에서 굵기 300이 목소리입니다.** PlayStation은 히어로 헤드라인에 라이트 웨이트 디스플레이를 사용하는 유일한 주요 콘솔 브랜드입니다. 디스플레이 서체를 500이나 700으로 "업그레이드"하려는 충동을 억제하세요 — 조용함이 곧 개성입니다.
- **UI 레이어에서 굵기가 점프합니다.** 18px 이하에서 시스템은 가독성을 위해 500–700으로 전환됩니다. 300 (디스플레이) → 400 (본문) → 500 (캡션) → 700 (버튼)의 굵기 그라디언트가 곧 계층 구조입니다.
- **자간은 거의 없는 수준입니다.** 대부분의 값이 0.1–0.45px로 양수 또는 약간 음수입니다. 54px 히어로의 `-0.1px`은 디스플레이 서체를 "디자인된" 느낌으로 충분히 조이지만 타이포그래피적 선언이 되지 않습니다.
- **두 가지 SST 케이싱.** "SST"와 "Playstation SST"는 메트릭 세트가 약간 다른 기능적으로 동일한 패밀리입니다 (Playstation SST는 소형 사이즈에서 더 타이트함). Sony의 내부 라이선싱 외의 목적에서는 상호 교환 가능하게 취급하세요.
- **대문자 없음.** The Verge나 Wired와 달리 PlayStation은 대문자 레이블을 거의 사용하지 않습니다. 키커와 태그는 타이틀 케이스나 문장 케이스를 유지합니다 — 또 다른 "조용한 권위감"의 표현입니다.
- **세리프 없음.** 전체 시스템은 산세리프입니다. 인쇄 감성의 대응물이 없습니다.

## 4. 컴포넌트 스타일

### 버튼

**Primary — PlayStation Blue 필**
- 배경: `#0070cc` (PlayStation Blue)
- 텍스트: `#ffffff`, SST 18px / 500 / 0.4px 자간
- 테두리: 정적 상태에서 없음
- 테두리 반지름: `999px` — 완전한 필
- 패딩: ~`12px 24px` (사이즈 클래스에 따라 가변)
- 아웃라인: 정적 상태에서 `rgb(255, 255, 255) none 0px`
- **호버 (시그니처 동작)**:
  - 배경이 `#1eaedb` (PlayStation Cyan)으로 전환
  - 텍스트는 `#ffffff` 유지
  - 2px `#ffffff` 테두리 등장
  - 2px `#0070cc` 외곽 링 섀도우 등장 (`0 0 0 2px #0070cc`)
  - `transform: scale(1.2)` — 버튼이 실제로 20% 성장
- 활성: `opacity: 0.6` — 누름을 알리는 빠른 어두워짐
- 포커스: 호버와 동일하지만 링이 `rgb(0, 114, 206) 0px 0px 0px 2px` 포커스 섀도우로 변환
- 전환: 배경, transform, 섀도우에 ~180ms ease 적용

**Secondary — 어두운 배경의 흰색 아웃라인**
- 배경: `#ffffff`
- 텍스트: `#0172ce` (PlayStation Blue 변형)
- 테두리: `2px outset #000000` — 현대 CSS에서 매우 드문 실제 `outset` 테두리
- 반지름: 가변 (종종 `999px` 또는 `36px`)
- 패딩: `16px 20px`
- 호버: 동일한 시그니처 시안 채우기 + scale(1.2) + 링 처리
- 포커스: 동일한 링 처리

**Commerce Orange**
- 배경: `#d53b00` (Commerce Orange)
- 텍스트: `#ffffff`, SST 18px / 700 / 0.45px 자간
- 테두리 반지름: `999px` — 필
- PS Store / 구매 / Plus 구독 CTA에만 사용
- 활성: 배경이 `#aa2f00`으로 어두워짐
- 호버: 모든 다른 버튼과 같이 시안 반전 규칙 적용 (오렌지 전용 호버가 아님)

**Transparent Ghost**
- 배경: transparent
- 텍스트: `#1f1f1f` (Deep Charcoal)
- 테두리: `1px solid #dedede`
- 패딩: `0 10px` (타이트, 네비게이션 최적화)
- 호버: 시안 채우기, 흰색 텍스트, 2px 흰색 테두리, scale(1.2)
- 활성: 텍스트가 `#0072ce`로 이동, opacity 0.6

**Icon Circle**
- 배경: 사진 위에서 `rgba(0, 0, 0, 0.2)`; 밝은 서피스에서 `#ffffff`
- 테두리 반지름: `100%` — 완전한 원
- 캐러셀 이전/다음 화살표와 공유 버튼에 사용
- 호버: `var(--color-role-backgrounds-primary-link-hover)` (밝은 배경에서 대략 `#e5e5e5`)로 밝아짐

**Mini CTA (카드 내부)**
- SST 14px / 700 / 0.324px 자간
- 패딩 ~8px 16px
- 반지름: `999px`
- 게임 카드 내부 "지금 구매" / "장바구니에 추가" 미니 CTA에 사용

### 카드 & 컨테이너

**Hero Card (게임 피처)**
- 배경: 사진/렌더링 — 보통 검정 앵커
- 테두리 반지름: 피처 카드에 `24px` 또는 `19px`
- 패딩: 내부 32–48px
- 섀도우: `rgba(0, 0, 0, 0.8) 0px 5px 9px 0px` — 카드가 히어로 사진과 겹칠 때만 사용하는 극적인 드롭 섀도우
- 호버: 미묘한 스케일 변환, primary CTA에 시안 아웃라인 등장

**Game Cover Tile**
- 배경: 게임 커버 아트, 패딩 없음
- 테두리 반지름: `12px` 또는 `13px` (이미지) / `19px` (카드 프레임)
- 섀도우: `rgba(0, 0, 0, 0.08) 0px 5px 9px 0px` — 깃털처럼 가벼운 엘리베이션
- 호버: 카드의 primary CTA가 시안으로 켜지고, 카드 자체는 1.02×로 확대될 수 있음
- 전환: transform에 200ms ease 적용

**Content Panel (White)**
- 배경: `#ffffff` 또는 밝은 섹션 그라디언트 `#ffffff → #f5f7fa`
- 테두리: 일반적으로 없음; 이웃 요소와는 간격과 미묘한 섀도우로 분리
- 반지름: 패널 계층에 따라 `12px`–`24px`
- 섀도우: `rgba(0, 0, 0, 0.06) 0px 5px 9px 0px` — 시스템에서 가장 가벼운

**Dark Card on Dark**
- 배경: 사진 위에서 `rgba(0, 0, 0, 0.2)`
- 테두리 반지름: `6px` (컴팩트) 또는 `24px` (피처)
- 히어로 비디오 위의 "프레스 킷" 또는 "통계 블록" 인레이에 사용

### 입력 & 폼
- **기본**: `#ffffff` 배경, `1px solid #cccccc` 테두리, `3px` 테두리 반지름 (시스템의 나머지보다 타이트 — 입력란은 PlayStation이 진정으로 컴팩트해지는 유일한 곳), SST 16px 텍스트 `#1f1f1f`, 플레이스홀더 `rgba(0, 0, 0, 0.6)`.
- **포커스**: `box-shadow: 0 0 0 2px #0070cc`를 통한 2px `#0070cc` 포커스 링. 테두리 색상 변화 없음 — 링이 역할을 담당.
- **오류**: 테두리와 텍스트가 `#c81b3a` (Warning Red)로 전환, 아래 같은 빨간색으로 인라인 오류 텍스트 표시.
- **전환**: 테두리와 섀도우에 ~180ms ease 적용.

### 네비게이션

- **상단 네비게이션**: 흰색 PlayStation 로고가 왼쪽 정렬된 검정 (`#000000`) 전체 폭 스트립, SST 14–16px / 500으로 카테고리 링크 중앙 정렬, "로그인" CTA 오른쪽 정렬.
- **네비게이션 링크 호버**: 색상이 `#ffffff`에서 `#1883fd` (Link Hover Blue)로 전환, 밑줄 없음.
- **활성 섹션**: `#0070cc`의 미묘한 2px 밑줄로 표시.
- **모바일**: 네비게이션이 햄버거 드로어로 접힘. 드로어 내부에서 링크가 16px 간격과 20px 수평 패딩으로 수직 스택.
- **고정 동작**: 네비게이션은 스크롤 시 상단에 고정; 밝은 서피스 영역에 진입해도 **반전되지 않음** — 전체적으로 검정 배경 유지.

### 이미지 처리

- **종횡비**: 16:9 히어로 비디오/사진, 1:1 콘솔 렌더링, 3:4 게임 커버 아트, 4:3 라이프스타일 이미지.
- **모서리**: 카드 맥락에 따라 `12px`, `13px`, 또는 `24px`로 둥글게. 게임 커버는 `6–12px`, 히어로 이미지는 `24px`.
- **전체 폭**: 마스트헤드 히어로와 푸터 프로모션 배너에서만. 나머지는 모두 패딩된 콘텐츠 칼럼 내부에 위치.
- **섀도우**: 히어로에는 극적인 `rgba(0, 0, 0, 0.8) 0 5px 9px 0` 드롭, 그리드 타일에는 깃털 `rgba(0, 0, 0, 0.06) 0 5px 9px 0`.
- **호버**: 이미지는 정적 유지, 카드 프레임과 primary CTA가 반응.
- **지연 로딩**: 폴드 아래의 모든 것에 `loading="lazy"`, 마스트헤드 히어로는 `eager`.

### Game Store 필 (독특한 요소)
- 배경: `#ffffff`
- 텍스트: `#000000`, SST 14px / 500
- 패딩: `14px 18px`
- 반지름: `9999px` — 완전한 필
- 게임 커버 옆에 플랫폼을 레이블링하는 중립적인 필 태그 ("PS5", "PS4", "PSVR2"). 어두운 배경의 흰색 대비.

## 5. 레이아웃 원칙

### 간격 시스템
- **기본 단위**: 8px.
- **스케일**: 1, 2, 3, 4.5, 5, 8, 9, 10, 12, 14, 15, 16, 18, 20, 21px.
- **섹션 패딩**: 주요 패널 사이 48–96px 수직 간격. 히어로에서 콘텐츠로의 전환에는 더 큰 값 사용.
- **카드 패딩**: 내부 20–32px. 피처 히어로 카드는 48px까지 확장 가능.
- **인라인 간격**: 헤드라인과 덱 사이 8–12px, 덱과 CTA 사이 12–16px.
- **마이크로 스케일**: 1/2/3/4.5/5/9/10/12 값은 필 패딩, 캡션 간격, 테두리 오프셋에 사용 — 에디토리얼 리듬에는 아님.

### 그리드 & 컨테이너
- **최대 너비**: ~1920px (dembrandt에서 2120px까지 브레이크포인트 감지). 컨테이너는 패널에 따라 보통 `1280–1920px`로 제한.
- **칼럼 패턴**: 계층에 따라 3/4/6칼럼 게임 타일 행으로 해소되는 12칼럼 반응형 그리드. 히어로 영역은 종종 12칼럼 전체 span; 피처 타일은 6+3+3 또는 4+4+4 구성.
- **외부 패딩**: 모바일 16px → 태블릿 48px → 데스크탑 64–96px.
- **거터**: 칼럼 사이 16–24px, 타일 클러스터 내부에서는 더 타이트 (8–12px).

### 여백 철학
PlayStation은 여백을 럭셔리 브랜드가 매장 조명을 대하듯 — 프리미엄 신호로 — 취급합니다. 다른 주요 리테일 사이트보다 모듈 사이에 수직 여유 공간이 현저히 많으며, 흰색 에디토리얼 패널은 종종 히어로 스케일 패딩에 헤드라인 하나 + 이미지 하나 + CTA 하나만 담습니다. 효과는 각 제품이 섬네일 그리드에서 경쟁하지 않고 자신만의 공간을 갖는 "갤러리 페이스"입니다.

### 테두리 반지름 스케일
- **2px** — 쿠키 배너 버튼과 소형 어드민 UI
- **3px** — 폼 입력란, 탭 패널 (다른 모든 것보다 타이트 — 의도적인 "기능적 UI" 신호)
- **6px** — 컴팩트 버튼과 인라인 이미지
- **12px** — 표준 게임 커버 이미지와 콘텐츠 이미지
- **13px** — 특정 피규어 래퍼 (네스팅을 위한 12px에서 1px 오프셋)
- **19px** — 피처 카드
- **20px** — 인라인 태그 span
- **24px** — 히어로 카드, 주요 피처 프레임
- **36px** — 전체 필 네비게이션과 secondary 버튼 변형
- **48px** — 대형 피처 버튼
- **999px / 100%** — 전체 필 primary 버튼과 원형 아이콘 버튼

11개의 개별 반지름 값 — 이 카탈로그의 어떤 사이트보다 풍부한 반지름 시스템. PlayStation이 *계층*에 따라 의도적으로 다른 반지름을 사용하기 때문에 이 범위가 존재합니다: 유틸리티에 3px, 미디어에 12px, 피처에 24px, CTA에 999px.

## 6. 깊이 & 엘리베이션

| 레벨 | 처리 | 사용처 |
|---|---|---|
| 0 | 섀도우 없음 | `#ffffff` 위의 기본 콘텐츠 |
| 1 | `rgba(0, 0, 0, 0.06) 0 5px 9px 0` | 깃털처럼 가벼운 에디토리얼 패널 리프트 |
| 2 | `rgba(0, 0, 0, 0.08) 0 5px 9px 0` | 표준 그리드 타일 엘리베이션 |
| 3 | `rgba(0, 0, 0, 0.16) 0 5px 9px 0` | 강조 카드 (호버 또는 활성) |
| 4 | `rgba(0, 0, 0, 0.8) 0 5px 9px 0` | 히어로 오버레이 섀도우 — 사진 위에 사용하는 극적인 드롭 |
| 5 | `0 0 0 2px #0070cc` (포커스 링) | Primary 버튼 포커스 상태 |
| 6 | `0 0 0 2px #000000` (호버 링) | Secondary 버튼 호버 링 |
| 7 | 섹션 그라디언트 `#121314 → #000000` | 어두운 히어로 패널의 대기적 깊이 |

PlayStation의 깊이 철학은 **레이어드이지만 절제됩니다**. 섀도우 스케일은 일반 상태에서 0.06에서 0.16으로 실행되다가 히어로 드롭에서 0.8로 점프합니다 — 0.2, 0.3, 0.4의 중간 지점이 없습니다. 효과는 페이지 대부분이 거의 평평하게 앉아 있지만, 히어로 카드가 사진 위에 떠 있어야 할 때 진짜로 *떠 있다*는 것입니다. 엘리베이션은 속삭이거나 외치거나 — 결코 중얼거리지 않습니다.

### 장식적 깊이
- **섹션 그라디언트** (어두운 것과 밝은 것, 위에서 모두 설명) — 섹션 배경으로만 사용
- **포커스/호버 링** 2px, 상태에 따라 항상 파란색 또는 시안
- **섹션 그라디언트 두 가지 외에 글로우, 블러, 대기 효과 없음**
- **그라디언트 버튼이나 그라디언트 텍스트 없음** — 비주얼 시스템은 섹션 전환 외에는 모든 곳에서 단색 블록

## 7. 해야 할 것과 하지 말아야 할 것

### 해야 할 것
- **하세요:** PlayStation Blue (`#0070cc`)를 primary CTA 채우기와 푸터 앵커로 사용. 브랜드의 앵커 컬러입니다.
- **하세요:** 22px 이상의 모든 디스플레이 헤드라인에 SST 굵기 300 사용. 조용한 굵기의 헤드라인이 바로 목소리입니다.
- **하세요:** 모든 primary 버튼에 완전한 호버 시그니처 적용: 시안 채우기 + 2px 흰색 테두리 + 2px 파란색 외곽 링 + `scale(1.2)`.
- **하세요:** primary 및 커머스 버튼에 전체 필 반지름 (`999px`) 사용.
- **하세요:** PlayStation Cyan (`#1eaedb`)은 호버, 포커스, 활성 상태에만 독점 사용 — 정적 배경으로는 절대 사용하지 않기.
- **하세요:** Commerce Orange (`#d53b00`)는 PlayStation Store / 구매 CTA 및 가격 콜아웃에만 사용.
- **하세요:** 어두운 히어로 패널과 흰색 콘텐츠 패널을 교차하고 진한 파란색 푸터로 고정 — 3면 채널 레이아웃이 페이지 리듬입니다.
- **하세요:** 카드가 제품 사진과 겹칠 때 극적인 `rgba(0, 0, 0, 0.8)` 히어로 드롭 섀도우 사용.
- **하세요:** 상단 네비게이션을 모든 스크롤 위치에서 검정으로 유지 — 밝은 패널 위에서 흰색으로 반전하지 않기.

### 하지 말아야 할 것
- **하지 마세요:** 디스플레이 헤드라인을 굵게 하지 말기. 22–54px에서 굵기 300이 PlayStation의 목소리입니다. 굵기 700 디스플레이 서체는 "또 다른 게임 리테일러"처럼 보입니다.
- **하지 마세요:** 대문자 레이블이나 키커를 사용하지 말기. PlayStation은 대문자를 거의 사용하지 않습니다 — 조용한 권위감 브랜드이지, 경고 테이프 브랜드가 아닙니다.
- **하지 마세요:** 두 선언된 섹션 그라디언트 외에 그라디언트 버튼, 텍스트, 배경을 사용하지 말기.
- **하지 마세요:** Commerce Orange 외에 따뜻한 색상을 도입하지 말기. 빨간색 CTA, 노란색 하이라이트, 녹색 성공 필 없음.
- **하지 마세요:** 버튼이나 미디어에 직각 모서리를 사용하지 말기. 시스템에 11개의 반지름이 있습니다 — 하나를 선택하되, 절대 `0`은 안 됩니다.
- **하지 마세요:** primary 버튼에서 `scale(1.2)` 호버 동작을 생략하지 말기. 리프트 스케일은 브랜드 인터랙션 시그니처입니다.
- **하지 마세요:** 세리프 서체를 사용하지 말기. 시스템은 100% SST 산세리프입니다.
- **하지 마세요:** 시안 `#1eaedb`이 정적 상태에서 텍스트 또는 배경 색상으로 나타나지 않도록 하기. 오직 동작 중에만 존재합니다.
- **하지 마세요:** 주의를 끌기 위해 경쟁하는 패널을 디자인하지 말기. PlayStation의 여백 리듬은 각 모듈에 자체 "갤러리 공간"을 줍니다.

## 8. 반응형 동작

### 브레이크포인트

| 이름 | 너비 | 주요 변경 사항 |
|---|---|---|
| Small Mobile | <400px | 단일 칼럼, 네비게이션이 햄버거로 접힘, SST 히어로가 ~28px로 스케일 축소 |
| Mobile | 400–599px | 단일 칼럼, 타일이 전체 너비로 스택, 패딩이 16px로 열림 |
| Large Mobile | 600–767px | 여전히 단일 칼럼이지만 일부 모듈에서 2칼럼 타일 옵션 |
| Tablet Portrait | 768–1023px | 2칼럼 게임 그리드, 네비게이션 여전히 축소 |
| Tablet Landscape | 1024–1279px | 3–4칼럼 그리드, 전체 네비게이션 복원 |
| Desktop | 1280–1599px | 전체 에디토리얼 그리드, 최대 히어로 디스플레이 스케일 (44–54px) |
| Large Desktop | 1600–1919px | 컨테이너가 1600px로 제한, 마진 확장 |
| 4K / Big-Screen | ≥1920px | 컨테이너가 1920px 최대로 확장, 히어로 콘텐츠가 TV 시청 거리에 맞게 스케일 업 |
| Ultra-Wide | ≥2120px | 극단적 브레이크포인트 — 페이지 고정 유지, 외부 마진이 추가 너비 흡수 |

dembrandt 스윕에서 320px와 2120px 사이에서 30개의 브레이크포인트가 감지되었습니다 — 비정상적으로 넓은 반응형 범위. PS5 소유자들이 콘솔의 브라우저를 통해 또는 폰에서 TV로의 캐스팅을 통해 TV에서 사이트를 자주 탐색하기 때문에 PlayStation은 **대형 화면 맥락** (1920–2120px)을 위해 구체적으로 튜닝합니다. 대부분의 리테일 사이트는 1440px에서 튜닝을 중지하지만 PlayStation은 4K까지 계속 튜닝합니다.

### 터치 타겟
- Primary 필 버튼은 ~48–56px 높이 (SST 18px 텍스트 + ~12–16px 수직 패딩) — WCAG AAA에 편안하게 적합.
- 네비게이션 링크는 데스크탑에서 더 작음 (~32–40px 높이); 모바일에서는 드로어 내부에서 48px+로 패딩.
- 아이콘 원 버튼은 40–48px — 터치 친화적.

### 접힘 전략
- **네비게이션**: 뷰포트가 좁아질수록 전체 네비게이션 → 축소 → 햄버거 드로어. 로고는 왼쪽에 고정; CTA는 오른쪽에 고정.
- **그리드**: 6칼럼 → 4칼럼 → 3칼럼 → 2칼럼 → 1칼럼. 게임 타일 카드는 커버 아트를 자르지 않고 재배열.
- **간격**: 뷰포트가 좁아질수록 섹션 패딩이 96px → 64px → 48px → 32px → 24px로 타이트해짐.
- **서체**: SST 히어로가 54px → 44px → 35px → 28px → 22px로 스케일. 라이트 굵기 300은 모든 크기에서 유지.
- **히어로 사진**: 아트 디렉션 스왑 — 데스크탑은 넓은 16:9 크롭, 모바일은 제품이 중앙에 오는 4:3 또는 1:1 크롭.

### 이미지 동작
- 반응형 래스터 (`srcset` + 아트 디렉션이 있는 `<picture>`), 종횡비는 브레이크포인트마다 유지.
- 4K 준비: 사이트는 TV 탐색 시 업스케일링을 피하기 위해 1920px+에서 고밀도 이미지 제공.
- 폴드 아래의 모든 것에 `loading="lazy"`; 히어로는 프리로드 힌트와 함께 `eager`.

## 9. 에이전트 프롬프트 가이드

### 빠른 컬러 참조
- **Primary CTA**: "PlayStation Blue (`#0070cc`)"
- **호버 / 포커스 액센트**: "PlayStation Cyan (`#1eaedb`)"
- **배경 (흰색 서피스)**: "Paper White (`#ffffff`)"
- **배경 (어두운 서피스)**: "Console Black (`#000000`)"
- **흰색 배경의 헤딩 텍스트**: "Display Ink (`#000000`)"
- **흰색 배경의 본문 텍스트**: "Deep Charcoal (`#1f1f1f`)"
- **검정 배경의 본문 텍스트**: "Inverse White (`#ffffff`)"
- **커머스 / 구매 액센트**: "Commerce Orange (`#d53b00`)"
- **푸터 앵커**: "PlayStation Blue (`#0070cc`)"

### 컴포넌트 프롬프트 예시
1. *"`#0070cc` PlayStation Blue 채우기, SST 18px / 500 / 0.4px 자간의 흰색 텍스트, 999px 테두리 반지름, 12px × 24px 패딩으로 primary CTA 버튼을 만드세요. 호버 시 배경이 `#1eaedb` PlayStation Cyan으로 전환되고, 2px `#ffffff` 테두리가 나타나며, box-shadow를 통해 2px `#0070cc` 외곽 링이 피어오르고, 버튼 전체가 1.2×로 확대됩니다 — 모두 180ms ease 전환으로."*
2. *"`#000000` Console Black 캔버스 위에, -0.1px 자간과 1.25 줄 높이로 `#ffffff`의 54px SST 굵기 300 헤드라인이 있는 히어로 패널을 디자인하세요. 아래에 표준 PlayStation 호버 처리가 적용된 single primary CTA를 배치하세요. 어디에도 대문자 레이블 없음."*
3. *"게임 커버 타일 만들기: 12px 테두리 반지름과 깃털 `rgba(0, 0, 0, 0.08) 0 5px 9px 0` 드롭 섀도우가 있는 3:4 종횡비 이미지, 아래 14px SST 700 제목, 12px SST 500 플랫폼 태그, PlayStation Blue의 14px / 700 / 0.324px 자간 미니 primary CTA."*
4. *"PlayStation Store 구매용 커머스 필 버튼 만들기: `#d53b00` Commerce Orange 채우기, SST 18px / 700 / 0.45px 자간의 `#ffffff` 텍스트, 999px 반지름, 12px × 28px 패딩. 활성 상태는 `#aa2f00`으로 어두워짐. 호버는 1.2× 스케일의 표준 시안 반전을 따름."*
5. *"어두운 히어로 섹션 사이의 흰색 콘텐츠 패널 디자인: 미묘한 `#ffffff → #f5f7fa` 밝은 섹션 그라디언트가 있는 `#ffffff` 배경, 24px 테두리 반지름, 48px 내부 패딩, 깃털 `rgba(0, 0, 0, 0.06) 0 5px 9px 0` 엘리베이션, 35px SST 300 헤드라인, 18px 본문 단락, single primary CTA."*

### 반복 작업 가이드
이 디자인 시스템으로 생성된 기존 화면을 개선할 때:
1. **디스플레이 굵기를 감사하세요.** 22px 이상의 모든 헤드라인은 SST 굵기 300이어야 합니다. 히어로 스케일에서 굵기 500이나 700이 보이면 PlayStation의 목소리를 잃은 것입니다.
2. **호버 처리를 감사하세요.** 모든 primary 버튼은 시안 채우기 + 흰색 테두리 + 파란색 링 조합으로 호버 시 1.2×로 확대되어야 합니다. 그 네 가지 중 하나라도 놓치면 인터랙션 시그니처가 깨집니다.
3. **모서리를 감사하세요.** 모든 컨테이너와 버튼은 2, 3, 6, 12, 13, 19, 20, 24, 36, 48, 또는 999px / 100%에 해당해야 합니다. 직각 모서리는 목소리를 깨뜨립니다.
4. **색상 확산을 감사하세요.** PlayStation Blue (`#0070cc`), Cyan (`#1eaedb`), Commerce Orange (`#d53b00`), 그리고 선언된 회색/검정/흰색만 크롬에 나타나야 합니다. 다른 색조가 보이면 수정하세요.
5. **서피스 교차를 감사하세요.** 페이지는 어두운 히어로 → 흰색 콘텐츠 → 어두운 히어로 → 흰색 콘텐츠 → 파란색 푸터 순으로 교차해야 합니다. 두 개의 동일한 서피스 패널이 인접해 있으면 전환을 삽입하세요.
6. **케이싱을 감사하세요.** 문장 케이스와 타이틀 케이스만. 대문자 레이블, 버튼, 키커 없음. 대문자가 보이면 변환하세요.
7. **섀도우 굵기를 감사하세요.** 섀도우 불투명도는 0.06 / 0.08 / 0.16 / 0.8에 해당해야 합니다 — 그 사이는 없습니다. 0.1, 0.2, 0.3, 0.5 드롭 섀도우가 보이면 가장 가까운 선언 티어로 수정하세요.
8. **여백을 감사하세요.** 두 모듈이 "경쟁적"으로 느껴진다면 (주의를 끌기 위해 싸우는 것처럼), 48–96px의 수직 여유 공간을 추가하세요. PlayStation의 갤러리 페이스 리듬은 협상 불가능합니다.