精選 · 開放 · 免費

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 元素揭示時使用平滑的淡入與位移。 · 互動元素上的細微 hover 過渡效果。 · 群組元素錯落的進入動畫。

按鈕與連結上的細微透明度變化或背景位移。 · 即時回應，搭配細微的狀態過渡。

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 且無陰影、使用寬裕的留白建立清晰的視覺層級，並避免擁擠的介面。其設計語言克制且具高級感，聚焦於大型攝影與粗體標題，以傳達安全感與技術領導力。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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