큐레이션 · 오픈 · 무료

Vercel

대담하고 단색의 미학에 생동감 넘치는 그라디언트가 포인트인 고성능 개발자 플랫폼.

01

디자인 DNA

현대 웹 인프라를 위한 정밀 계측기

02

컬러

대담하고 단색의 기반을 통해 타이포그래피와 고대비 UI 요소가 시각적 무게감을 담당합니다.

03

타이포그래피

geometric-sans · humanist-sans · monospace

• display48px · 500
• headline32px · 500
• body16px · 400
• caption14px · 400
• mono14px · 400

디스플레이 사이즈용으로 좁은 네거티브 트래킹 적용 · 본문 텍스트에 넉넉한 수직 리듬 사용 · 모든 코드 표현에 모노스페이스 폰트 적용

04

여백

4px 기본 그리드를 기반으로 일관된 배수를 활용한 간격 및 크기

05

표면 (라운드 / 그림자 / 경계선)

1px solid #ebebeb

rgba(0,0,0,0.08) 0px 0px 0px 1px · rgba(0,0,0,0.04) 0px 2px 2px 0px

06

레이아웃

히어로 섹션에 가시적인 12열 그리드를 활용한, 넓은 마진의 중앙 정렬 단일 열 레이아웃

07

모션과 인터랙션

미세한 투명도 전환 · hover 시 색상 변화 · 클릭 시 변환

미세한 색상 변화 또는 테두리 전환 · 약간의 변환 또는 투명도 변화를 통한 즉각적인 시각적 반응

08

컴포넌트

• button 고대비 알약형 버튼; 주요 버튼은 검정 배경에 흰색 텍스트, 보조 버튼은 검정 텍스트의 아웃라인 스타일
• card 은은한 그림자와 넉넉한 패딩이 적용된 미세한 테두리의 카드
• chip 최소 패딩과 얇은 테두리의 작고 둥근 태그
• input 은은한 테두리와 내부 패딩이 있는 깔끔한 텍스트 입력 필드
• hero 돋보이는 배경 그래픽, 명확한 CTA, 보조 텍스트가 포함된 중앙의 대형 헤드라인

09

보이스와 금지 목록

• 톤 전문적이고 직관적이며 기술적으로 정확한
• 헤드라인 대담하고 간결하며 행동을 유도하는 문구
• CTA '배포 시작하기' 및 '데모 받기'와 같이 명확하고 명령형인 동사

• 주요 UI 요소로 생생하거나 네온 컬러를 사용하지 마세요 — 스크린샷은 엄격한 단색 인터페이스를 보여줍니다
• 모든 요소에 둥근 모서리를 사용하지 마세요 — 스크린샷은 로고와 카드와 같은 날카롭고 기하학적인 형태를 보여줍니다
• 넓고 장식적인 폰트를 사용하지 마세요 — 스크린샷은 모든 제목에 깔끔하고 기능적인 산세리프체를 사용합니다
• 여러 열이 있는 지나치게 복잡한 레이아웃을 만들지 마세요 — 스크린샷은 넉넉한 단일 열 흐름을 보여줍니다
• 깊이감을 위해 드롭 섀도우를 사용하지 마세요 — 스크린샷은 얇은 테두리와 고대비로 요소를 구분합니다
• 본문 텍스트에 모두 대문자를 사용하지 마세요 — 스크린샷은 대문자를 작은 레이블이나 태그에만 사용합니다
• 피하기: 지나치게 장난스러운 언어
• 피하기: 애매한 전문 용어
• 피하기: 과도한 감탄사

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko