精選 · 開放 · 免費

TAG Heuer

瑞士頂級鐘錶品牌，透過單色調搭配精準紅強調色，彰顯精準、傳承與大膽極簡主義

watchesluxury
TAG Heuer 網站截圖
↓ 下載設計系統包 (21 MB)在 OpenDesign 中開啟

原站: https://www.tagheuer.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

奢華精準汽車傳承瑞士

高端汽車儀表板與瑞士精準工程的結合

02

色彩

#E31937Accent
#000000Ink
#808080Ink soft
#FFFFFFBG
#F5F5F5BG soft
rgba(0,0,0,0.1)Line

以單一精準紅作為主要操作強調色的高對比單色基底，確保奢華內斂感與最佳可讀性

03

字型

geometric-sans

導覽與區段標題採用全大寫，字母間距為2px · 粗體字重僅限於主要行動呼籲標題 · 內文維持嚴格的400字重以確保最大可讀性

04

間距

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

以4px為基礎單位建立嚴格的模組化比例，搭配充足留白塑造奢華定位

05

表面 (圓角 / 陰影 / 邊線)

sm · 0px
md · 0px
lg · 0px
pill · 999px

最少化的1px實體邊框，主要用於模態框容器與輸入欄位，其餘依靠留白分隔

0 0 20px rgba(0,0,0,1) · none

06

版面

1440container
12columns
24pxgutter
768 / 1024 / 1440breakpoints

全寬英雄影像搭配置中模態容器，背景為網格式產品展示

07

動效與互動

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

主要狀態轉換採用0.3秒 ease-in-out · 模態框淡出轉場採用0.5秒 ease-out · 按鈕懸停狀態採用基於變形的互動效果

懸停時背景色與邊框色以0.15秒 ease-in-out 進行微妙過渡 · 透過顏色反轉或微妙縮放變形提供即時視覺回饋

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

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

擷取自真實頁面 · 真 computed styles

11

System Prompt

TAG Heuer 奢華鐘錶電商網站，透過單色調設計體現瑞士精準度與汽車傳承。核心色板：純白（#FFFFFF）背景、純黑（#000000）用於文字與主要按鈕、中性灰（#808080）用於次要內容、精準紅（#E31937）用於關鍵行動呼籲元素。字型僅採用幾何無襯線體，粗體（900）保留給重要標題，常規體（400）用於所有內文內容，導覽與標籤採用嚴格的大寫處理與2px字母間距。關鍵設計原則：絕對內斂無裝飾、全站採用銳角矩形幾何（無圓角）、充足留白塑造奢華定位、高對比色塊建立即時視覺層級。避免：任何趣味或隨意元素、圓角UI組件、紅色以外的次要強調色、襯線或手寫體字型、以及可能削弱精準品牌識別的複雜動畫。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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