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

> Category: 개발자 도구
> 프론트엔드 배포. 흑백의 정밀함, Geist 폰트.

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

Vercel의 웹사이트는 개발자 인프라가 보이지 않게 만들어진다는 시각적 명제다 — 철학적 경계선에 닿을 만큼 절제된 디자인 시스템. 페이지는 압도적으로 흰색(`#ffffff`)이며 거의 검은(`#171717`) 텍스트와 함께, 모든 요소가 픽셀을 스스로 정당화해야 하는 갤러리 같은 여백을 만들어낸다. 이것은 장식으로서의 미니멀리즘이 아니라 엔지니어링 원칙으로서의 미니멀리즘이다. Geist 디자인 시스템은 인터페이스를 컴파일러가 코드를 대하듯 다룬다 — 불필요한 토큰을 모두 제거하여 구조만 남을 때까지.

커스텀 Geist 폰트 패밀리가 핵심이다. Geist Sans는 디스플레이 크기에서 공격적인 음수 자간(-2.4px ~ -2.88px)을 사용하여, 압축되고 긴박하며 엔지니어링된 느낌의 헤드라인을 만들어낸다 — 프로덕션을 위해 압축된 코드처럼. 본문 크기에서는 자간이 완화되지만 기하학적 정밀함은 유지된다. Geist Mono는 코드, 터미널 출력, 기술 레이블을 위한 모노스페이스 동반자로 시스템을 완성한다. 두 폰트 모두 OpenType `"liga"`(합자)를 전역으로 활성화하여, 가까이 읽을수록 보상받는 정교한 타이포그래피 레이어를 추가한다.

Vercel을 다른 모노크롬 디자인 시스템과 구분 짓는 것은 테두리로서의 그림자 철학이다. 전통적인 CSS 테두리 대신 Vercel은 `box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.08)`을 사용한다 — 오프셋 0, 블러 0, 스프레드 1px의 그림자로 박스 모델의 영향 없이 테두리 같은 선을 만든다. 이 기법은 테두리를 그림자 레이어에 존재하게 하여 더 부드러운 전환, 클리핑 없는 둥근 모서리, 전통적 테두리보다 섬세한 시각적 무게를 가능케 한다. 전체 깊이 시스템은 다중 값 그림자 스택으로 구성되며, 각 레이어는 특정 목적을 가진다: 하나는 테두리, 하나는 부드러운 고도, 하나는 주변 깊이.

**주요 특성:**
- 극도의 음수 자간(-2.4px ~ -2.88px)을 가진 Geist Sans — 압축된 인프라로서의 텍스트
- 코드와 기술 레이블에 OpenType `"liga"`를 전역으로 적용한 Geist Mono
- 테두리로서의 그림자 기법: `box-shadow 0px 0px 0px 1px`이 전통적 테두리를 대체
- 미묘한 깊이를 위한 다중 레이어 그림자 스택(단일 선언에 테두리 + 고도 + 주변)
- 거의 순수한 흰색 캔버스와 `#171717` 텍스트 — 완전한 검정이 아니라 마이크로 대비의 부드러움을 만듦
- 워크플로우별 강조 색상: Ship Red(`#ff5b4f`), Preview Pink(`#de1d8d`), Develop Blue(`#0a72ef`)
- 접근성을 위한 `hsla(212, 100%, 48%, 1)` 포커스 링 시스템 — 채도 높은 파란색
- 상태 표시기를 위한 틴트 배경의 필 배지(9999px)

## 2. 색상 팔레트 & 역할

### 주요
- **Vercel Black** (`#171717`): 기본 텍스트, 헤딩, 어두운 표면 배경. 순수한 검정이 아님 — 약간의 따뜻함이 거칠함을 방지.
- **Pure White** (`#ffffff`): 페이지 배경, 카드 표면, 어두운 배경의 버튼 텍스트.
- **True Black** (`#000000`): 보조 사용, `--geist-console-text-color-default`, 특정 콘솔/코드 컨텍스트에 사용.

### 워크플로우 강조 색상
- **Ship Red** (`#ff5b4f`): `--ship-text`, "프로덕션으로 배포" 워크플로우 단계 — 따뜻하고 긴박한 코럴 레드.
- **Preview Pink** (`#de1d8d`): `--preview-text`, 미리보기 배포 워크플로우 — 선명한 마젠타 핑크.
- **Develop Blue** (`#0a72ef`): `--develop-text`, 개발 워크플로우 — 밝고 집중된 파란색.

### 콘솔 / 코드 색상
- **Console Blue** (`#0070f3`): `--geist-console-text-color-blue`, 구문 강조 파란색.
- **Console Purple** (`#7928ca`): `--geist-console-text-color-purple`, 구문 강조 보라색.
- **Console Pink** (`#eb367f`): `--geist-console-text-color-pink`, 구문 강조 핑크.

### 인터랙티브
- **Link Blue** (`#0072f5`): 밑줄 장식이 있는 기본 링크 색상.
- **Focus Blue** (`hsla(212, 100%, 48%, 1)`): `--ds-focus-color`, 인터랙티브 요소의 포커스 링.
- **Ring Blue** (`rgba(147, 197, 253, 0.5)`): `--tw-ring-color`, Tailwind 링 유틸리티.

### 중립 스케일
- **Gray 900** (`#171717`): 기본 텍스트, 헤딩, 네비게이션 텍스트.
- **Gray 600** (`#4d4d4d`): 보조 텍스트, 설명 문구.
- **Gray 500** (`#666666`): 3차 텍스트, 음소거된 링크.
- **Gray 400** (`#808080`): 플레이스홀더 텍스트, 비활성화 상태.
- **Gray 100** (`#ebebeb`): 테두리, 카드 윤곽선, 구분선.
- **Gray 50** (`#fafafa`): 미묘한 표면 틴트, 내부 그림자 하이라이트.

### 표면 & 오버레이
- **Overlay Backdrop** (`hsla(0, 0%, 98%, 1)`): `--ds-overlay-backdrop-color`, 모달/다이얼로그 배경.
- **Selection Text** (`hsla(0, 0%, 95%, 1)`): `--geist-selection-text-color`, 텍스트 선택 하이라이트.
- **Badge Blue Bg** (`#ebf5ff`): 필 배지 배경, 틴트 파란 표면.
- **Badge Blue Text** (`#0068d6`): 필 배지 텍스트, 가독성을 위한 진한 파란색.

### 그림자 & 깊이
- **Border Shadow** (`rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`): 시그니처 — 전통적 테두리를 대체.
- **Subtle Elevation** (`rgba(0, 0, 0, 0.04) 0px 2px 2px`): 카드의 최소한의 리프트.
- **Card Stack** (`rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, rgba(0,0,0,0.04) 0px 8px 8px -8px, #fafafa 0px 0px 0px 1px`): 완전한 다중 레이어 카드 그림자.
- **Ring Border** (`rgb(235, 235, 235) 0px 0px 0px 1px`): 탭과 이미지를 위한 밝은 회색 링 테두리.

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

### 폰트 패밀리
- **기본**: `Geist`, 폴백: `Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol`
- **모노스페이스**: `Geist Mono`, 폴백: `ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New`
- **OpenType 기능**: 모든 Geist 텍스트에 전역으로 `"liga"` 활성화; 특정 캡션의 표 형식 숫자에 `"tnum"`.

### 위계

| 역할 | 폰트 | 크기 | 굵기 | 줄 높이 | 자간 | 비고 |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Geist | 48px (3.00rem) | 600 | 1.00–1.17 (좁음) | -2.4px ~ -2.88px | 최대 압축, 빌보드 임팩트 |
| Section Heading | Geist | 40px (2.50rem) | 600 | 1.20 (좁음) | -2.4px | 기능 섹션 제목 |
| Sub-heading Large | Geist | 32px (2.00rem) | 600 | 1.25 (좁음) | -1.28px | 카드 헤딩, 하위 섹션 |
| Sub-heading | Geist | 32px (2.00rem) | 400 | 1.50 | -1.28px | 가벼운 서브 헤딩 |
| Card Title | Geist | 24px (1.50rem) | 600 | 1.33 | -0.96px | 기능 카드 |
| Card Title Light | Geist | 24px (1.50rem) | 500 | 1.33 | -0.96px | 보조 카드 헤딩 |
| Body Large | Geist | 20px (1.25rem) | 400 | 1.80 (넓음) | normal | 소개, 기능 설명 |
| Body | Geist | 18px (1.13rem) | 400 | 1.56 | normal | 표준 본문 텍스트 |
| Body Small | Geist | 16px (1.00rem) | 400 | 1.50 | normal | 표준 UI 텍스트 |
| Body Medium | Geist | 16px (1.00rem) | 500 | 1.50 | normal | 네비게이션, 강조 텍스트 |
| Body Semibold | Geist | 16px (1.00rem) | 600 | 1.50 | -0.32px | 강한 레이블, 활성 상태 |
| Button / Link | Geist | 14px (0.88rem) | 500 | 1.43 | normal | 버튼, 링크, 캡션 |
| Button Small | Geist | 14px (0.88rem) | 400 | 1.00 (좁음) | normal | 컴팩트 버튼 |
| Caption | Geist | 12px (0.75rem) | 400–500 | 1.33 | normal | 메타데이터, 태그 |
| Mono Body | Geist Mono | 16px (1.00rem) | 400 | 1.50 | normal | 코드 블록 |
| Mono Caption | Geist Mono | 13px (0.81rem) | 500 | 1.54 | normal | 코드 레이블 |
| Mono Small | Geist Mono | 12px (0.75rem) | 500 | 1.00 (좁음) | normal | `text-transform: uppercase`, 기술 레이블 |
| Micro Badge | Geist | 7px (0.44rem) | 700 | 1.00 (좁음) | normal | `text-transform: uppercase`, 작은 배지 |

### 원칙
- **정체성으로서의 압축**: 디스플레이 크기의 Geist Sans는 -2.4px ~ -2.88px 자간을 사용한다 — 어떤 주요 디자인 시스템보다 가장 공격적인 음수 자간. 프로덕션에 최적화된 코드처럼 _압축된_ 느낌의 텍스트를 만든다. 자간은 크기가 줄어들수록 점진적으로 완화된다: 32px에서 -1.28px, 24px에서 -0.96px, 16px에서 -0.32px, 14px에서 normal.
- **어디에나 합자**: 모든 Geist 텍스트 요소는 OpenType `"liga"`를 활성화한다. 합자는 장식이 아니라 구조다 — 더 촘촘하고 효율적인 글리프 조합을 만들어낸다.
- **세 가지 굵기, 엄격한 역할**: 400(본문/읽기), 500(UI/인터랙티브), 600(헤딩/강조). 초소형 마이크로 배지를 제외하고 bold(700) 없음. 이 좁은 굵기 범위는 굵기가 아닌 크기와 자간으로 위계를 만든다.
- **정체성을 위한 Mono**: `"tnum"` 또는 `"liga"`와 함께 대문자로 사용하는 Geist Mono는 "개발자 콘솔" 목소리 역할을 한다 — 마케팅 사이트를 제품과 연결하는 컴팩트한 기술 레이블.

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

### 버튼

**Primary White (그림자 테두리)**
- 배경: `#ffffff`
- 텍스트: `#171717`
- 패딩: 0px 6px (최소 — 콘텐츠 기반 너비)
- 반지름: 6px (미묘하게 둥근)
- 그림자: `rgb(235, 235, 235) 0px 0px 0px 1px` (링 테두리)
- 호버: 배경이 `var(--ds-gray-1000)`(어두운색)으로 변경
- 포커스: `2px solid var(--ds-focus-color)` 아웃라인 + `var(--ds-focus-ring)` 그림자
- 사용: 표준 보조 버튼

**Primary Dark (Geist 시스템에서 추론)**
- 배경: `#171717`
- 텍스트: `#ffffff`
- 패딩: 8px 16px
- 반지름: 6px
- 사용: 주요 CTA ("Start Deploying", "Get Started")

**Pill 버튼 / 배지**
- 배경: `#ebf5ff` (틴트 파란색)
- 텍스트: `#0068d6`
- 패딩: 0px 10px
- 반지름: 9999px (완전한 필)
- 폰트: 12px 굵기 500
- 사용: 상태 배지, 태그, 기능 레이블

**Large Pill (네비게이션)**
- 배경: 투명 또는 `#171717`
- 반지름: 64px–100px
- 사용: 탭 네비게이션, 섹션 선택기

### 카드 & 컨테이너
- 배경: `#ffffff`
- 테두리: 그림자로 — `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`
- 반지름: 8px (표준), 12px (주요/이미지 카드)
- 그림자 스택: `rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px`
- 이미지 카드: `1px solid #ebebeb`에 12px 상단 반지름
- 호버: 미묘한 그림자 강화

### 입력 & 폼
- 라디오: `var(--ds-gray-200)` 배경의 포커스와 함께 표준 스타일링
- 포커스 그림자: `1px 0 0 0 var(--ds-gray-alpha-600)`
- 포커스 아웃라인: `2px solid var(--ds-focus-color)` — 일관된 파란색 포커스 링
- 테두리: 전통적 테두리가 아닌 그림자 기법으로

### 네비게이션
- 흰색 배경의 깔끔한 수평 네비, 고정
- Vercel 로고타입 좌측 정렬, 262x52px
- 링크: Geist 14px 굵기 500, `#171717` 텍스트
- 활성: 굵기 600 또는 밑줄
- CTA: 어두운 필 버튼("Start Deploying", "Contact Sales")
- 모바일: 햄버거 메뉴로 접힘
- 다단계 메뉴가 있는 제품 드롭다운

### 이미지 처리
- `1px solid #ebebeb` 테두리가 있는 제품 스크린샷
- 상단 둥근 이미지: `12px 12px 0px 0px` 반지름
- 대시보드/코드 미리보기 스크린샷이 기능 섹션을 지배
- 히어로 이미지 뒤의 부드러운 그라디언트 배경(파스텔 다색)

### 독특한 컴포넌트

**워크플로우 파이프라인**
- 세 단계 수평 파이프라인: Develop → Preview → Ship
- 각 단계에는 고유한 강조 색상: 파란색 → 핑크 → 빨간색
- 선/화살표로 연결
- Vercel의 핵심 가치 제안을 위한 시각적 메타포

**신뢰 바 / 로고 그리드**
- 회사 로고(Perplexity, ChatGPT, Cursor 등)를 흑백으로
- 수평 스크롤 또는 그리드 레이아웃
- 미묘한 `#ebebeb` 테두리 구분

**메트릭 카드**
- 큰 숫자 표시(예: "10x faster")
- 메트릭에 Geist 48px 굵기 600
- 아래에 회색 본문 텍스트로 설명
- 그림자 테두리 카드 컨테이너

## 5. 레이아웃 원칙

### 간격 시스템
- 기본 단위: 8px
- 스케일: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 16px, 32px, 36px, 40px
- 주목할 점: 16px에서 32px로 점프 — 기본 스케일에 20px 또는 24px 없음

### 그리드 & 컨테이너
- 최대 콘텐츠 너비: 약 1200px
- 히어로: 넉넉한 상단 패딩의 중앙 단일 컬럼
- 기능 섹션: 카드를 위한 2–3 컬럼 그리드
- `border-bottom: 1px solid #171717`을 사용한 전체 너비 구분선
- 코드/대시보드 스크린샷은 전체 너비 또는 테두리로 제한

### 여백 철학
- **갤러리의 여백**: 섹션 사이에 대규모 수직 패딩(80px–120px+). 흰색 공간 자체가 디자인이다 — Vercel에게 증명할 것도 숨길 것도 없다는 것을 전달.
- **압축된 텍스트, 확장된 공간**: 헤드라인의 공격적인 음수 자간은 주변의 넉넉한 여백으로 균형을 이룬다. 텍스트는 빽빽하고, 그 주변 공간은 광활하다.
- **섹션 리듬**: 흰색 섹션과 흰색 섹션이 번갈아 — 섹션 간 색상 변화가 없다. 구분은 테두리(그림자 테두리)와 간격만으로.

### 모서리 반지름 스케일
- 마이크로(2px): 인라인 코드 스니펫, 작은 스팬
- 미묘(4px): 작은 컨테이너
- 표준(6px): 버튼, 링크, 기능 요소
- 편안(8px): 카드, 목록 항목
- 이미지(12px): 주요 카드, 이미지 컨테이너 (상단 둥근)
- 대형(64px): 탭 네비게이션 필
- XL(100px): 큰 네비게이션 링크
- 완전한 필(9999px): 배지, 상태 필, 태그
- 원형(50%): 메뉴 토글, 아바타 컨테이너

## 6. 깊이 & 고도

| 레벨 | 처리 | 사용 |
|-------|-----------|-----|
| 평면 (레벨 0) | 그림자 없음 | 페이지 배경, 텍스트 블록 |
| 링 (레벨 1) | `rgba(0,0,0,0.08) 0px 0px 0px 1px` | 대부분 요소의 테두리로서의 그림자 |
| Light Ring (레벨 1b) | `rgb(235,235,235) 0px 0px 0px 1px` | 탭, 이미지를 위한 밝은 링 |
| 미묘한 카드 (레벨 2) | 링 + `rgba(0,0,0,0.04) 0px 2px 2px` | 최소한의 리프트가 있는 표준 카드 |
| 완전한 카드 (레벨 3) | 링 + 미묘 + `rgba(0,0,0,0.04) 0px 8px 8px -8px` + 내부 `#fafafa` 링 | 주요 카드, 강조된 패널 |
| 포커스 (접근성) | `2px solid hsla(212, 100%, 48%, 1)` 아웃라인 | 모든 인터랙티브 요소의 키보드 포커스 |

**그림자 철학**: Vercel은 현대 웹 디자인에서 가장 정교한 그림자 시스템을 가지고 있다고 할 수 있다. Material Design의 전통적 의미에서 고도를 위해 그림자를 사용하는 대신, Vercel은 각 레이어가 뚜렷한 건축적 목적을 가진 다중 값 그림자 스택을 사용한다: 하나는 "테두리"를 만들고(스프레드 0px, 1px), 다른 하나는 주변 부드러움을 추가하며(블러 2px), 또 다른 하나는 거리의 깊이를 처리하고(음수 스프레드의 블러 8px), 내부 링(`#fafafa`)은 카드가 내부에서 "빛나게" 하는 미묘한 하이라이트를 만든다. 이 레이어드 접근법은 카드가 떠 있는 것이 아니라 만들어진 것처럼 느껴지게 한다.

### 장식적 깊이
- 히어로 그라디언트: 히어로 콘텐츠 뒤의 부드럽고 파스텔 다색 그라디언트 워시(거의 보이지 않는, 분위기적)
- 섹션 테두리: 주요 섹션 사이의 `1px solid #171717` (전체 진한 선)
- 배경 색상 변화 없음 — 깊이는 전적으로 그림자 레이어링과 테두리 대비에서만

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

### 해야 할 것
- 디스플레이 크기에서 공격적인 음수 자간(-2.4px ~ -2.88px at 48px)과 함께 Geist Sans 사용
- 전통적인 CSS 테두리 대신 테두리로서의 그림자(`0px 0px 0px 1px rgba(0,0,0,0.08)`) 사용
- 모든 Geist 텍스트에 `"liga"` 활성화 — 합자는 선택이 아닌 구조
- 세 가지 굵기 시스템 사용: 400(본문), 500(UI), 600(헤딩)
- 워크플로우 강조 색상(빨강/핑크/파랑)은 워크플로우 컨텍스트에서만 적용
- 카드에 다중 레이어 그림자 스택 사용(테두리 + 고도 + 주변 + 내부 하이라이트)
- 색상 팔레트를 무채색으로 유지 — `#171717`에서 `#ffffff`까지의 회색이 시스템
- 기본 텍스트에 `#000000` 대신 `#171717` 사용 — 마이크로 따뜻함이 중요

### 하지 말아야 할 것
- Geist Sans에 양수 자간 사용 금지 — 항상 음수 또는 0
- 본문 텍스트에 굵기 700(bold) 사용 금지 — 600이 최대, 헤딩에만 사용
- 카드에 전통적인 CSS `border` 사용 금지 — 그림자 테두리 기법 사용
- UI 크롬에 따뜻한 색상(오렌지, 노랑, 초록) 도입 금지
- 워크플로우 강조 색상(Ship Red, Preview Pink, Develop Blue)을 장식적으로 적용 금지
- 무거운 그림자(불투명도 > 0.1) 사용 금지 — 그림자 시스템은 속삭이는 수준
- 본문 텍스트 자간 증가 금지 — Geist는 촘촘하게 흐르도록 설계됨
- 주요 액션 버튼에 필 반지름(9999px) 사용 금지 — 필은 배지/태그에만
- 카드 그림자에서 내부 `#fafafa` 링 생략 금지 — 시스템을 작동시키는 글로우

## 8. 반응형 동작

### 브레이크포인트
| 이름 | 너비 | 주요 변경 사항 |
|------|-------|-------------|
| Mobile Small | <400px | 촘촘한 단일 컬럼, 최소한의 패딩 |
| Mobile | 400–600px | 표준 모바일, 스택 레이아웃 |
| Tablet Small | 600–768px | 2컬럼 그리드 시작 |
| Tablet | 768–1024px | 완전한 카드 그리드, 확장된 패딩 |
| Desktop Small | 1024–1200px | 표준 데스크톱 레이아웃 |
| Desktop | 1200–1400px | 전체 레이아웃, 최대 콘텐츠 너비 |
| Large Desktop | >1400px | 중앙 정렬, 넉넉한 마진 |

### 터치 타겟
- 버튼은 편안한 패딩 사용(수직 8px–16px)
- 네비게이션 링크는 14px에 적절한 간격
- 필 배지는 탭 타겟을 위한 10px 수평 패딩
- 모바일 메뉴 토글은 50% 반지름 원형 버튼 사용

### 접힘 전략
- 히어로: 디스플레이 48px → 축소, 음수 자간 비례 유지
- 네비게이션: 수평 링크 + CTA → 햄버거 메뉴
- 기능 카드: 3컬럼 → 2컬럼 → 단일 컬럼 스택
- 코드 스크린샷: 비율 유지, 수평 스크롤 가능
- 신뢰 바 로고: 그리드 → 수평 스크롤
- 푸터: 다중 컬럼 → 단일 컬럼 스택
- 섹션 간격: 80px+ → 모바일에서 48px

### 이미지 동작
- 대시보드 스크린샷은 모든 크기에서 테두리 처리 유지
- 히어로 그라디언트는 모바일에서 부드러워지고/단순해짐
- 제품 스크린샷은 일관된 테두리 반지름의 반응형 이미지 사용
- 전체 너비 섹션은 가장자리까지의 처리 유지

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

### 빠른 색상 참조
- 주요 CTA: Vercel Black (`#171717`)
- 배경: Pure White (`#ffffff`)
- 헤딩 텍스트: Vercel Black (`#171717`)
- 본문 텍스트: Gray 600 (`#4d4d4d`)
- 테두리(그림자): `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`
- 링크: Link Blue (`#0072f5`)
- 포커스 링: Focus Blue (`hsla(212, 100%, 48%, 1)`)

### 컴포넌트 프롬프트 예시
- "흰색 배경의 히어로 섹션 생성. 헤드라인 48px Geist 굵기 600, 줄 높이 1.00, 자간 -2.4px, 색상 #171717. 서브타이틀 20px Geist 굵기 400, 줄 높이 1.80, 색상 #4d4d4d. 어두운 CTA 버튼(#171717, 6px 반지름, 8px 16px 패딩)과 고스트 버튼(흰색, 그림자 테두리 rgba(0,0,0,0.08) 0px 0px 0px 1px, 6px 반지름)."
- "카드 디자인: 흰색 배경, CSS 테두리 없음. 그림자 스택 사용: rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px. 반지름 8px. 제목 24px Geist 굵기 600, 자간 -0.96px. 본문 16px 굵기 400, #4d4d4d."
- "필 배지 빌드: #ebf5ff 배경, #0068d6 텍스트, 9999px 반지름, 0px 10px 패딩, 12px Geist 굵기 500."
- "네비게이션 생성: 흰색 고정 헤더. 링크에 Geist 14px 굵기 500, #171717 텍스트. 우측 정렬 어두운 필 CTA 'Start Deploying'. 하단 그림자 테두리: rgba(0,0,0,0.08) 0px 0px 0px 1px."
- "세 단계를 보여주는 워크플로우 섹션 디자인: Develop(텍스트 색상 #0a72ef), Preview(#de1d8d), Ship(#ff5b4f). 각 단계: 14px Geist Mono 대문자 레이블 + 24px Geist 굵기 600 제목 + #4d4d4d의 16px 굵기 400 설명."

### 반복 가이드
1. CSS 테두리 대신 항상 테두리로서의 그림자 사용 — `0px 0px 0px 1px rgba(0,0,0,0.08)`이 기반
2. 자간은 폰트 크기에 따라 조정: 48px에서 -2.4px, 32px에서 -1.28px, 24px에서 -0.96px, 14px에서 normal
3. 세 가지 굵기만: 400(읽기), 500(인터랙티브), 600(강조)
4. 색상은 기능적, 장식적이지 않음 — 워크플로우 색상(빨강/핑크/파랑)은 파이프라인 단계만 표시
5. 카드 그림자의 내부 `#fafafa` 링이 Vercel 카드에 미묘한 내부 글로우를 부여
6. 기술 레이블에는 Geist Mono 대문자, 나머지 모든 것에는 Geist Sans