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".

위계

원칙

• 정체성으로서의 압축: 디스플레이 크기의 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. 깊이 & 고도

그림자 철학: 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. 반응형 동작

브레이크포인트

터치 타겟

• 버튼은 편안한 패딩 사용(수직 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