큐레이션 · 오픈 · 무료

Waymo

선도적인 자율주행 기술 플랫폼을 위한, 깔끔하고 전문적이며 신뢰를 앞세운 디자인입니다.

automotiveav
Waymo 스크린샷
↓ 디자인 시스템 다운로드 (19 MB)OpenDesign 에서 열기

원본 사이트: https://waymo.com

📦 팩 내용 보기 →

01

디자인 DNA

자율안전접근성신뢰지속가능

자동차와 소프트웨어의 교차점에서 운영되는 프리미엄, 신뢰할 수 있는 테크 기업.

02

컬러

#006feeAccent
#23233cInk
#ffffffBG
#f2f2f2BG soft
#808080Muted
rgba(35, 35, 60, 1.0)Line

강한 대비와 전문성을 지향하며, 깊은 네이비를 기본 텍스트 컬러로, 강렬한 블루를 인터랙티브 악센트로 사용합니다.

03

타이포그래피

humanist-sans · monospace

모든 타이포그래피에는 타이트한 음수 레터스페이싱이 적용됩니다. · 헤드라인은 굵고 크게, 본문 텍스트는 높은 가독성을 유지합니다. · 텍스트 컬러는 깊은 네이비 잉크 또는 어두운 배경용 화이트로 엄격히 제한됩니다.

04

여백

4px
8px
16px
24px
32px
48px
64px
96px

표준 4px 그리드를 사용하며, 넉넉한 여백을 통해 명확한 시각적 그룹화를 구현합니다.

05

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

sm · 3px
md · 8px
lg · 12px
pill · 999px

버튼에는 2px 실선 테두리를 적용하여 명확한 인터랙션 인터페이스를 제공합니다.

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

표준 상단 내비게이션이 있는 중앙 정렬 컨테이너, 분리된 히어로 섹션, 그리고 수직으로 쌓이는 전체 폭 콘텐츠 블록으로 구성됩니다.

07

모션과 인터랙션

150msmicro
400mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

UI 요소 등장을 위한 부드러운 페이드 및 이동 효과. · 인터랙티브 요소에 대한 섬세한 호버 트랜지션. · 그룹화된 요소의 순차적인 등장 애니메이션.

버튼과 링크에 대한 미세한 불투명도 변화 또는 배경 이동. · 미세한 상태 전환이 적용된 즉각적인 반응.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

Waymo — 桌面首屏（hero）
桌面首屏（hero）
Waymo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Waymo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Waymo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Waymo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Waymo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Waymo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Waymo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Waymo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Waymo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Waymo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Waymo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Waymo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Waymo — 移动首屏
移动首屏

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

11

System Prompt

Waymo의 웹사이트 디자인은 소비자 대상 자율주행 플랫폼을 위한, 깔끔하고 전문적이며 신뢰를 앞세운 레이아웃입니다. 색상 팔레트는 깊은 네이비 잉크(#23233c)와 선명한 화이트 배경(#ffffff)이 지배적이며, 주요 액션을 위한 강렬한 블루 악센트(#006fee)가 사용됩니다. 타이포그래피는 타이트한 음수 레터스페이싱이 특징인 휴머니스트 산세리프 계열로, 현대적이고 자신감 있는 느낌을 만듭니다. 핵심 디자인 제약 사항으로는 드롭 섀도우 없는 플랫 UI 유지, 명확한 시각적 계층 구조를 위한 넉넉한 여백 사용, 그리고 혼잡한 인터페이스 회피가 있습니다. 디자인 언어는 절제되고 프리미엄적이며, 안전감과 기술적 리더십을 전달하기 위해 큰 사진과 굵은 헤드라인에 중점을 둡니다.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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