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

> Category: 핀테크 & 암호화폐
> 결제 인프라. 시그니처 퍼플 그래디언트, 웨이트 300의 우아함.

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

Stripe의 웹사이트는 핀테크 디자인의 황금 기준입니다 — 기술적이면서도 럭셔리하고, 정밀하면서도 따뜻한 느낌을 동시에 자아내는 시스템입니다. 페이지는 깨끗한 흰 캔버스(`#ffffff`)와 짙은 네이비 헤딩(`#061b31`), 그리고 브랜드 앵커이자 인터랙티브 액센트 역할을 하는 시그니처 퍼플(`#533afd`)로 시작됩니다. 이것은 기업용 소프트웨어의 차갑고 딱딱한 퍼플이 아닙니다. 자신감 있고 프리미엄하게 읽히는 풍부하고 채도 높은 바이올렛입니다. 전체적인 인상은 세계적인 타입 파운드리가 재설계한 금융 기관 같은 느낌입니다.

커스텀 `sohne-var` 가변 폰트는 Stripe 비주얼 아이덴티티의 핵심 요소입니다. 모든 텍스트 요소에는 OpenType `"ss01"` 스타일리스틱 세트가 적용되어 있으며, 이는 문자 형태를 수정하여 뚜렷하게 기하학적이고 현대적인 느낌을 만들어냅니다. 디스플레이 크기(48px-56px)에서 sohne-var는 웨이트 300으로 실행됩니다 — 헤드라인에서는 매우 이례적인 가벼운 웨이트로, 묘하게 속삭이는 듯한 권위감을 자아냅니다. 이는 "굵은 히어로 헤드라인" 관례와는 정반대입니다. Stripe의 헤드라인은 소리를 지를 필요가 없는 것처럼 느껴집니다. 네거티브 자간(-1.4px at 56px, -0.96px at 48px)은 텍스트를 조밀하고 설계된 블록으로 압축합니다. 더 작은 크기에서도 시스템은 비례적으로 줄인 트래킹과 함께 웨이트 300을 사용하며, 금융 데이터 표시를 위해 `"tnum"`을 통한 테이블형 숫자를 사용합니다.

Stripe를 진정으로 차별화하는 것은 섀도우 시스템입니다. 대부분의 사이트의 플랫하거나 단층적인 접근 방식과 달리, Stripe는 다층적이고 블루 틴트의 섀도우를 사용합니다. 시그니처 `rgba(50,50,93,0.25)`와 `rgba(0,0,0,0.1)`의 조합은 마치 요소들이 황혼의 하늘에 떠있는 것처럼 시원하고 대기적인 깊이감을 가진 섀도우를 만들어냅니다. 주요 섀도우 색상(50,50,93)의 블루-그레이 언더톤은 네이비-퍼플 브랜드 팔레트와 직접적으로 연결되어, 엘리베이션조차 브랜드에 어울리는 느낌을 줍니다.

**주요 특성:**
- 모든 텍스트에 OpenType `"ss01"`을 적용한 sohne-var — 브랜드의 자형을 정의하는 커스텀 스타일리스틱 세트
- 시그니처 헤드라인 웨이트로서의 웨이트 300 — 가볍고, 자신감 있으며, 관례에 반하는
- 디스플레이 크기에서의 네거티브 자간(-1.4px at 56px, 아래로 갈수록 점진적으로 완화)
- `rgba(50,50,93,0.25)`를 사용한 블루 틴트 다층 섀도우 — 브랜드 색감이 느껴지는 엘리베이션
- 검정 대신 짙은 네이비(`#061b31`) 헤딩 — 따뜻하고, 프리미엄하며, 금융급 품질
- 보수적인 테두리 반지름(4px-8px) — 필 형태도, 거칠지도 않은
- 그래디언트 및 장식 요소를 위한 루비(`#ea2261`)와 마젠타(`#f96bee`) 액센트
- 코드와 기술 레이블을 위한 모노스페이스 보조 폰트로서의 `SourceCodePro`

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

### 기본색
- **Stripe 퍼플** (`#533afd`): 기본 브랜드 색상, CTA 배경, 링크 텍스트, 인터랙티브 하이라이트. 전체 시스템의 앵커 역할을 하는 채도 높은 블루-바이올렛.
- **짙은 네이비** (`#061b31`): `--hds-color-heading-solid`. 기본 헤딩 색상. 검정도, 회색도 아닌 — 텍스트에 따뜻함과 깊이를 더하는 매우 어두운 파랑.
- **순수한 흰색** (`#ffffff`): 페이지 배경, 카드 표면, 어두운 배경의 버튼 텍스트.

### 브랜드 & 다크
- **브랜드 다크** (`#1c1e54`): `--hds-color-util-brand-900`. 다크 섹션, 푸터 배경, 몰입형 브랜드 순간을 위한 딥 인디고.
- **다크 네이비** (`#0d253d`): `--hds-color-core-neutral-975`. 가장 어두운 중성색 — 최대 깊이를 위한 블루 언더톤이 있는 거의 검정에 가까운 색상, 거칠지 않은.

### 액센트 색상
- **루비** (`#ea2261`): `--hds-color-accentColorMode-ruby-icon-solid`. 아이콘, 알림, 액센트 요소를 위한 따뜻한 레드-핑크.
- **마젠타** (`#f96bee`): `--hds-color-accentColorMode-magenta-icon-gradientMiddle`. 그래디언트와 장식적 하이라이트를 위한 선명한 핑크-퍼플.
- **마젠타 라이트** (`#ffd7ef`): `--hds-color-util-accent-magenta-100`. 마젠타 테마 카드와 배지를 위한 틴트 표면.

### 인터랙티브
- **기본 퍼플** (`#533afd`): 기본 링크 색상, 활성 상태, 선택된 요소.
- **퍼플 호버** (`#4434d4`): 기본 요소의 호버 상태를 위한 더 어두운 퍼플.
- **퍼플 딥** (`#2e2b8c`): `--hds-color-button-ui-iconHover`. 아이콘 호버 상태를 위한 어두운 퍼플.
- **퍼플 라이트** (`#b9b9f9`): `--hds-color-action-bg-subduedHover`. 은은한 호버 배경을 위한 부드러운 라벤더.
- **퍼플 미드** (`#665efd`): `--hds-color-input-selector-text-range`. 범위 선택기 및 입력 하이라이트 색상.

### 중성색 스케일
- **헤딩** (`#061b31`): 기본 헤딩, 내비게이션 텍스트, 강조 레이블.
- **레이블** (`#273951`): `--hds-color-input-text-label`. 폼 레이블, 보조 헤딩.
- **본문** (`#64748d`): 보조 텍스트, 설명, 캡션.
- **성공 그린** (`#15be53`): 상태 배지, 성공 표시기(배경/테두리에 0.2-0.4 알파 사용).
- **성공 텍스트** (`#108c3d`): 성공 배지 텍스트 색상.
- **레몬** (`#9b6829`): `--hds-color-core-lemon-500`. 경고 및 하이라이트 액센트.

### 표면 & 테두리
- **기본 테두리** (`#e5edf5`): 카드, 구분선, 컨테이너의 표준 테두리 색상.
- **퍼플 테두리** (`#b9b9f9`): 버튼과 입력의 활성/선택 상태 테두리.
- **소프트 퍼플 테두리** (`#d6d9fc`): 보조 요소를 위한 은은한 퍼플 틴트 테두리.
- **마젠타 테두리** (`#ffd7ef`): 마젠타 테마 요소를 위한 핑크 틴트 테두리.
- **대시 테두리** (`#362baa`): 드롭 영역 및 플레이스홀더 요소를 위한 점선 테두리.

### 섀도우 색상
- **섀도우 블루** (`rgba(50,50,93,0.25)`): 시그니처 — 블루 틴트 기본 섀도우 색상.
- **섀도우 다크 블루** (`rgba(3,3,39,0.25)`): 엘리베이션된 요소를 위한 더 깊은 블루 섀도우.
- **섀도우 블랙** (`rgba(0,0,0,0.1)`): 깊이감 강화를 위한 보조 섀도우 레이어.
- **섀도우 앰비언트** (`rgba(23,23,23,0.08)`): 은은한 엘리베이션을 위한 부드러운 앰비언트 섀도우.
- **섀도우 소프트** (`rgba(23,23,23,0.06)`): 가벼운 리프트를 위한 최소한의 앰비언트 섀도우.

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

### 폰트 패밀리
- **기본**: `sohne-var`, 폴백: `SF Pro Display`
- **모노스페이스**: `SourceCodePro`, 폴백: `SFMono-Regular`
- **OpenType 기능**: 모든 sohne-var 텍스트에 전역으로 `"ss01"` 활성화; 금융 데이터 및 캡션의 테이블형 숫자에는 `"tnum"`.

### 계층 구조

| 역할 | 폰트 | 크기 | 웨이트 | 줄 높이 | 자간 | 기능 | 비고 |
|------|------|------|--------|-------------|----------------|----------|-------|
| 디스플레이 히어로 | sohne-var | 56px (3.50rem) | 300 | 1.03 (좁음) | -1.4px | ss01 | 최대 크기, 속삭이는 웨이트의 권위감 |
| 디스플레이 라지 | sohne-var | 48px (3.00rem) | 300 | 1.15 (좁음) | -0.96px | ss01 | 보조 히어로 헤드라인 |
| 섹션 헤딩 | sohne-var | 32px (2.00rem) | 300 | 1.10 (좁음) | -0.64px | ss01 | 기능 섹션 제목 |
| 서브헤딩 라지 | sohne-var | 26px (1.63rem) | 300 | 1.12 (좁음) | -0.26px | ss01 | 카드 헤딩, 서브섹션 |
| 서브헤딩 | sohne-var | 22px (1.38rem) | 300 | 1.10 (좁음) | -0.22px | ss01 | 더 작은 섹션 헤드 |
| 본문 라지 | sohne-var | 18px (1.13rem) | 300 | 1.40 | 보통 | ss01 | 기능 설명, 도입 텍스트 |
| 본문 | sohne-var | 16px (1.00rem) | 300-400 | 1.40 | 보통 | ss01 | 표준 읽기 텍스트 |
| 버튼 | sohne-var | 16px (1.00rem) | 400 | 1.00 (좁음) | 보통 | ss01 | 기본 버튼 텍스트 |
| 버튼 스몰 | sohne-var | 14px (0.88rem) | 400 | 1.00 (좁음) | 보통 | ss01 | 보조/컴팩트 버튼 |
| 링크 | sohne-var | 14px (0.88rem) | 400 | 1.00 (좁음) | 보통 | ss01 | 내비게이션 링크 |
| 캡션 | sohne-var | 13px (0.81rem) | 400 | 보통 | 보통 | ss01 | 소형 레이블, 메타데이터 |
| 캡션 스몰 | sohne-var | 12px (0.75rem) | 300-400 | 1.33-1.45 | 보통 | ss01 | 주석, 타임스탬프 |
| 캡션 테이블형 | sohne-var | 12px (0.75rem) | 300-400 | 1.33 | -0.36px | tnum | 금융 데이터, 숫자 |
| 마이크로 | sohne-var | 10px (0.63rem) | 300 | 1.15 (좁음) | 0.1px | ss01 | 소형 레이블, 축 마커 |
| 마이크로 테이블형 | sohne-var | 10px (0.63rem) | 300 | 1.15 (좁음) | -0.3px | tnum | 차트 데이터, 소형 숫자 |
| 나노 | sohne-var | 8px (0.50rem) | 300 | 1.07 (좁음) | 보통 | ss01 | 가장 작은 레이블 |
| 코드 본문 | SourceCodePro | 12px (0.75rem) | 500 | 2.00 (여유) | 보통 | -- | 코드 블록, 신택스 |
| 코드 볼드 | SourceCodePro | 12px (0.75rem) | 700 | 2.00 (여유) | 보통 | -- | 볼드 코드, 키워드 |
| 코드 레이블 | SourceCodePro | 12px (0.75rem) | 500 | 2.00 (여유) | 보통 | 대문자 | 기술 레이블 |
| 코드 마이크로 | SourceCodePro | 9px (0.56rem) | 500 | 1.00 (좁음) | 보통 | ss01 | 소형 코드 어노테이션 |

### 원칙
- **시그니처로서의 가벼운 웨이트**: 디스플레이 크기에서의 웨이트 300은 Stripe의 가장 독특한 타이포그래픽 선택입니다. 다른 곳에서 600-700 웨이트로 주목을 끌 때, Stripe는 가벼움을 럭셔리로 사용합니다 — 텍스트는 권위를 갖기 위해 무게가 필요 없을 만큼 자신감이 있습니다.
- **어디서나 ss01**: `"ss01"` 스타일리스틱 세트는 타협 불가입니다. 특정 글리프(아마도 대체 `a`, `g`, `l` 형태)를 수정하여 모든 sohne-var 텍스트에 더 기하학적이고 현대적인 느낌을 만들어냅니다.
- **두 가지 OpenType 모드**: 디스플레이/본문 텍스트에는 `"ss01"`, 금융 데이터의 테이블형 숫자에는 `"tnum"`. 이 둘은 절대 겹치지 않습니다 — 단락 안의 숫자는 ss01, 데이터 테이블 안의 숫자는 tnum을 사용합니다.
- **점진적 트래킹**: 자간은 크기에 비례하여 좁아집니다: 56px에서 -1.4px, 48px에서 -0.96px, 32px에서 -0.64px, 26px에서 -0.26px, 16px 이하에서는 보통.
- **두 가지 웨이트의 단순함**: 주로 300(본문과 헤딩)과 400(UI/버튼). 기본 폰트에는 볼드(700)가 없습니다 — SourceCodePro는 코드 대비를 위해 500/700을 사용합니다.

## 4. 컴포넌트 스타일링

### 버튼

**기본 퍼플**
- 배경: `#533afd`
- 텍스트: `#ffffff`
- 패딩: 8px 16px
- 반지름: 4px
- 폰트: 16px sohne-var 웨이트 400, `"ss01"`
- 호버: `#4434d4` 배경
- 용도: 기본 CTA ("Start now", "Contact sales")

**고스트 / 아웃라인**
- 배경: 투명
- 텍스트: `#533afd`
- 패딩: 8px 16px
- 반지름: 4px
- 테두리: `1px solid #b9b9f9`
- 폰트: 16px sohne-var 웨이트 400, `"ss01"`
- 호버: 배경이 `rgba(83,58,253,0.05)`로 변경
- 용도: 보조 액션

**투명 인포**
- 배경: 투명
- 텍스트: `#2874ad`
- 패딩: 8px 16px
- 반지름: 4px
- 테두리: `1px solid rgba(43,145,223,0.2)`
- 용도: 3차/정보 수준의 액션

**중성 고스트**
- 배경: 투명 (`rgba(255,255,255,0)`)
- 텍스트: `rgba(16,16,16,0.3)`
- 패딩: 8px 16px
- 반지름: 4px
- 아웃라인: `1px solid rgb(212,222,233)`
- 용도: 비활성화되거나 음소거된 액션

### 카드 & 컨테이너
- 배경: `#ffffff`
- 테두리: `1px solid #e5edf5`(표준) 또는 `1px solid #061b31`(다크 액센트)
- 반지름: 4px(좁음), 5px(표준), 6px(편안함), 8px(추천)
- 섀도우(표준): `rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px`
- 섀도우(앰비언트): `rgba(23,23,23,0.08) 0px 15px 35px 0px`
- 호버: 섀도우가 강해지며, 종종 블루 틴트 레이어가 추가됨

### 배지 / 태그 / 필
**중성 필**
- 배경: `#ffffff`
- 텍스트: `#000000`
- 패딩: 0px 6px
- 반지름: 4px
- 테두리: `1px solid #f6f9fc`
- 폰트: 11px 웨이트 400

**성공 배지**
- 배경: `rgba(21,190,83,0.2)`
- 텍스트: `#108c3d`
- 패딩: 1px 6px
- 반지름: 4px
- 테두리: `1px solid rgba(21,190,83,0.4)`
- 폰트: 10px 웨이트 300

### 입력 & 폼
- 테두리: `1px solid #e5edf5`
- 반지름: 4px
- 포커스: `1px solid #533afd` 또는 퍼플 링
- 레이블: `#273951`, 14px sohne-var
- 텍스트: `#061b31`
- 플레이스홀더: `#64748d`

### 내비게이션
- 흰 배경의 깔끔한 수평 내비, 블러 백드롭으로 고정
- 브랜드 로고타입 왼쪽 정렬
- 링크: sohne-var 14px 웨이트 400, `#061b31` 텍스트, `"ss01"` 적용
- 반지름: 내비 컨테이너에 6px
- CTA: 오른쪽 정렬된 퍼플 버튼("Sign in", "Start now")
- 모바일: 6px 반지름의 햄버거 토글

### 장식 요소
**대시 테두리**
- 플레이스홀더/드롭 영역에 `1px dashed #362baa`(퍼플)
- 마젠타 테마 장식 테두리에 `1px dashed #ffd7ef`(마젠타)

**그래디언트 액센트**
- 히어로 장식을 위한 루비에서 마젠타 그래디언트(`#ea2261`에서 `#f96bee`)
- 브랜드 다크 섹션은 흰 텍스트와 함께 `#1c1e54` 배경 사용

## 5. 레이아웃 원칙

### 간격 시스템
- 기본 단위: 8px
- 스케일: 1px, 2px, 4px, 6px, 8px, 10px, 11px, 12px, 14px, 16px, 18px, 20px
- 특이사항: 스케일은 소형 끝에서 촘촘합니다(4-12에서 2px마다), 금융 데이터를 위한 Stripe의 정밀 지향 UI를 반영합니다

### 그리드 & 컨테이너
- 최대 콘텐츠 너비: 약 1080px
- 히어로: 여유로운 패딩과 가벼운 헤드라인을 갖춘 중앙 단일 열
- 기능 섹션: 기능 카드를 위한 2-3열 그리드
- 브랜드 몰입을 위한 `#1c1e54` 배경의 전체 너비 다크 섹션
- 블루 틴트 섀도우를 갖춘 포함된 카드로서의 코드/대시보드 미리보기

### 여백 철학
- **정밀한 간격**: 미니멀리스트 시스템의 광대한 여백과 달리, Stripe는 측정되고 목적 있는 여백을 사용합니다. 모든 간격은 신중한 타이포그래픽 선택입니다.
- **촘촘한 데이터, 여유로운 크롬**: 금융 데이터 표시(테이블, 차트)는 빽빽하게 채워져 있지만, 주변 UI 크롬은 여유롭게 간격을 두었습니다. 이는 아름다운 프레임 안의 잘 정리된 스프레드시트처럼 통제된 밀도감을 만들어냅니다.
- **섹션 리듬**: 흰 섹션과 다크 브랜드 섹션(`#1c1e54`)이 번갈아 나타나, 임의적인 색상 없이 단조로움을 방지하는 극적인 밝음/어두움의 리듬을 만들어냅니다.

### 테두리 반지름 스케일
- 마이크로(1px): 세밀한 요소, 은은한 모서리 처리
- 표준(4px): 버튼, 입력, 배지, 카드 — 주력
- 편안함(5px): 표준 카드 컨테이너
- 여유(6px): 내비게이션, 더 큰 인터랙티브 요소
- 라지(8px): 추천 카드, 히어로 요소
- 복합: `0px 0px 6px 6px` 아래가 둥근 컨테이너(탭 패널, 드롭다운 푸터)

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

| 레벨 | 처리 | 용도 |
|-------|-----------|-----|
| 플랫 (레벨 0) | 섀도우 없음 | 페이지 배경, 인라인 텍스트 |
| 앰비언트 (레벨 1) | `rgba(23,23,23,0.06) 0px 3px 6px` | 은은한 카드 리프트, 호버 힌트 |
| 표준 (레벨 2) | `rgba(23,23,23,0.08) 0px 15px 35px` | 표준 카드, 콘텐츠 패널 |
| 엘리베이션 (레벨 3) | `rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px` | 추천 카드, 드롭다운, 팝오버 |
| 딥 (레벨 4) | `rgba(3,3,39,0.25) 0px 14px 21px -14px, rgba(0,0,0,0.1) 0px 8px 17px -8px` | 모달, 플로팅 패널 |
| 링 (접근성) | `2px solid #533afd` 아웃라인 | 키보드 포커스 링 |

**섀도우 철학**: Stripe의 섀도우 시스템은 색채적 깊이의 원칙 위에 구축되어 있습니다. 대부분의 디자인 시스템이 중성 회색이나 검정 섀도우를 사용하는 반면, Stripe의 기본 섀도우 색상(`rgba(50,50,93,0.25)`)은 브랜드의 네이비 팔레트를 반향하는 딥 블루-그레이입니다. 이는 단순히 깊이감을 더하는 것이 아니라 브랜드 분위기를 더하는 섀도우를 만들어냅니다. 다층 접근 방식은 이 블루 틴트 섀도우와 다른 오프셋의 순수한 블랙 보조 레이어(`rgba(0,0,0,0.1)`)를 짝지어, 브랜드 섀도우가 요소에서 더 멀리, 중성 섀도우가 더 가까이 위치하는 시차 효과 같은 깊이감을 만들어냅니다. 네거티브 스프레드 값(-30px, -18px)은 섀도우가 요소의 가로 방향 풋프린트를 넘지 않도록 하여, 엘리베이션을 수직적이고 통제된 상태로 유지합니다.

### 장식적 깊이
- 다크 브랜드 섹션(`#1c1e54`)은 배경색 대비를 통해 몰입형 깊이감을 만들어냅니다
- 히어로 장식을 위한 루비에서 마젠타 트랜지션의 그래디언트 오버레이
- 고정 요소의 상단 모서리 섀도우를 위한 섀도우 색상 `rgba(0,55,112,0.08)` (`--hds-color-shadow-sm-top`)

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

### 해야 할 것
- 모든 텍스트 요소에 `"ss01"`을 적용한 sohne-var 사용 — 스타일리스틱 세트가 곧 브랜드입니다
- 모든 헤드라인과 본문 텍스트에 웨이트 300 사용 — 가벼움이 시그니처입니다
- 모든 엘리베이션된 요소에 블루 틴트 섀도우(`rgba(50,50,93,0.25)`) 적용
- 헤딩에 `#000000` 대신 `#061b31`(짙은 네이비) 사용 — 따뜻함이 중요합니다
- 테두리 반지름은 4px-8px 사이로 유지 — 보수적인 모서리 처리는 의도적입니다
- 테이블형/금융 숫자 표시에는 `"tnum"` 사용
- 섀도우 레이어 적용: 깊이 시차를 위해 블루 틴트 원거리 + 중성 근거리
- `#533afd` 퍼플을 기본 인터랙티브/CTA 색상으로 사용

### 하지 말아야 할 것
- sohne-var 헤드라인에 웨이트 600-700 사용 금지 — 웨이트 300이 브랜드 보이스입니다
- 카드나 버튼에 큰 테두리 반지름(12px+, 필 형태) 사용 금지 — Stripe는 보수적입니다
- 중성 회색 섀도우 사용 금지 — 항상 블루로 틴트(`rgba(50,50,93,...)`)
- sohne-var 텍스트에서 `"ss01"` 생략 금지 — 대체 글리프가 개성을 정의합니다
- 헤딩에 순수한 검정(`#000000`) 사용 금지 — 항상 `#061b31` 짙은 네이비 사용
- 인터랙티브 요소에 따뜻한 액센트 색상(오렌지, 노랑) 사용 금지 — 퍼플이 기본입니다
- 디스플레이 크기에서 양수 자간 적용 금지 — Stripe는 좁게 트래킹합니다
- 버튼이나 링크에 마젠타/루비 액센트 사용 금지 — 이들은 장식/그래디언트 전용입니다

## 8. 반응형 동작

### 브레이크포인트
| 이름 | 너비 | 주요 변경사항 |
|------|-------|-------------|
| 모바일 | <640px | 단일 열, 줄어든 헤딩 크기, 쌓인 카드 |
| 태블릿 | 640-1024px | 2열 그리드, 적당한 패딩 |
| 데스크탑 | 1024-1280px | 전체 레이아웃, 3열 기능 그리드 |
| 라지 데스크탑 | >1280px | 여유로운 마진의 중앙 정렬 콘텐츠 |

### 터치 타겟
- 버튼은 편안한 패딩 사용(수직 8px-16px)
- 내비게이션 링크는 적절한 간격의 14px
- 배지는 탭 타겟을 위한 최소 6px 수평 패딩
- 6px 반지름 버튼의 모바일 내비 토글

### 축소 전략
- 히어로: 56px 디스플레이 -> 모바일에서 32px, 웨이트 300 유지
- 내비게이션: 수평 링크 + CTA -> 햄버거 토글
- 기능 카드: 3열 -> 2열 -> 단일 열 쌓기
- 다크 브랜드 섹션: 전체 너비 처리 유지, 내부 패딩 축소
- 금융 데이터 테이블: 모바일에서 가로 스크롤
- 섹션 간격: 64px+ -> 모바일에서 40px
- 타이포그래피 스케일 압축: 브레이크포인트 전반에 걸쳐 56px -> 48px -> 32px 히어로 크기

### 이미지 동작
- 대시보드/제품 스크린샷은 모든 크기에서 블루 틴트 섀도우 유지
- 히어로 그래디언트 장식은 모바일에서 단순화
- 코드 블록은 `SourceCodePro` 처리 유지, 가로 스크롤 가능
- 카드 이미지는 일관된 4px-6px 테두리 반지름 유지

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

### 빠른 색상 참조
- 기본 CTA: Stripe 퍼플 (`#533afd`)
- CTA 호버: 퍼플 다크 (`#4434d4`)
- 배경: 순수한 흰색 (`#ffffff`)
- 헤딩 텍스트: 짙은 네이비 (`#061b31`)
- 본문 텍스트: 슬레이트 (`#64748d`)
- 레이블 텍스트: 다크 슬레이트 (`#273951`)
- 테두리: 소프트 블루 (`#e5edf5`)
- 링크: Stripe 퍼플 (`#533afd`)
- 다크 섹션: 브랜드 다크 (`#1c1e54`)
- 성공: 그린 (`#15be53`)
- 장식 액센트: 루비 (`#ea2261`), 마젠타 (`#f96bee`)

### 컴포넌트 프롬프트 예시
- "흰 배경의 히어로 섹션을 만드세요. 헤드라인은 48px sohne-var 웨이트 300, line-height 1.15, letter-spacing -0.96px, color #061b31, font-feature-settings 'ss01'. 서브타이틀은 18px 웨이트 300, line-height 1.40, color #64748d. 퍼플 CTA 버튼(#533afd, 4px 반지름, 8px 16px 패딩, 흰 텍스트)과 고스트 버튼(투명, 1px solid #b9b9f9, #533afd 텍스트, 4px 반지름)."
- "카드를 디자인하세요: 흰 배경, 1px solid #e5edf5 테두리, 6px 반지름. 섀도우: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px. 제목은 22px sohne-var 웨이트 300, letter-spacing -0.22px, color #061b31, 'ss01'. 본문은 16px 웨이트 300, #64748d."
- "성공 배지를 만드세요: rgba(21,190,83,0.2) 배경, #108c3d 텍스트, 4px 반지름, 1px 6px 패딩, 10px sohne-var 웨이트 300, 테두리 1px solid rgba(21,190,83,0.4)."
- "내비게이션을 만드세요: backdrop-filter blur(12px)의 흰색 고정 헤더. 링크에는 sohne-var 14px 웨이트 400, #061b31 텍스트, 'ss01'. 오른쪽 정렬된 퍼플 CTA 'Start now'(#533afd 배경, 흰 텍스트, 4px 반지름). 내비 컨테이너 6px 반지름."
- "다크 브랜드 섹션을 디자인하세요: #1c1e54 배경, 흰 텍스트. 헤드라인 32px sohne-var 웨이트 300, letter-spacing -0.64px, 'ss01'. 본문 16px 웨이트 300, rgba(255,255,255,0.7). 내부 카드는 6px 반지름의 rgba(255,255,255,0.1) 테두리 사용."

### 반복 가이드
1. sohne-var 텍스트에 항상 `font-feature-settings: "ss01"` 활성화 — 이것이 브랜드의 타이포그래픽 DNA입니다
2. 웨이트 300이 기본값; 400은 버튼/링크/내비게이션에만 사용
3. 섀도우 공식: `rgba(50,50,93,0.25) 0px Y1 B1 -S1, rgba(0,0,0,0.1) 0px Y2 B2 -S2` (Y1/B1은 더 크게(원거리 섀도우), Y2/B2는 더 작게(근거리 섀도우))
4. 헤딩 색상은 `#061b31`(짙은 네이비), 본문은 `#64748d`(슬레이트), 레이블은 `#273951`(다크 슬레이트)
5. 테두리 반지름은 4px-8px 범위 유지 — 필 형태나 큰 모서리 처리 절대 금지
6. 테이블, 차트, 금융 표시의 모든 숫자에 `"tnum"` 사용
7. 다크 섹션은 `#1c1e54` 사용 — 검정도, 회색도 아닌, 딥 브랜드 인디고
8. 코드에는 SourceCodePro, 12px/500 웨이트, 가독성을 위한 2.00 line-height(매우 여유로운) 사용