厳選・オープン・無料

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

プライマリアクションに1つの外科的な赤をアクセントとした、コントラストの高いモノクローム基盤。ラグジュアリーな抑制と最大限の可読性を確保

03

タイポグラフィ

geometric-sans

ナビゲーションとセクションヘッダーには2pxの字送りを用いた全大文字 · 太字ウェイトはプライマリーなCTA見出しにのみ保留 · 本文テキストは最大限の可読性のために厳格に400ウェイトを維持

04

余白

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

4pxを基本単位とし、ラグジュアリーなポジショニングのための豊かな空白と共に厳格なモジュラースケールを生成

05

サーフェス (角丸 / 影 / 罫線)

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

主にモーダルの境界や入力フィールドに用いられる最小限の1px solidボーダー。それ以外は空白による区切りに依存

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.3s ease-in-out · モーダルフェードトランジションには0.5s ease-out · ボタンのhover状態にはTransformベースのインタラクション

0.15s ease-in-outの間の微細なbackground-colorとborder-colorのトランジション · 色の反転または微細なscale変換による即座の視覚的フィードバック

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ラグジュアリー時計eコマースサイト。鮮明なモノクロームデザインを通じて、スイッズの精密さと自動車の遺産を体現。コアパレット：純白（#FFFFFF）背景、テキストとプライマリーボタンに絶対的な黒（#000000）、二次コンテンツに中程度のグレー（#808080）、重要なCTA要素に外科的な赤（#E31937）。タイポグラフィは厳密に幾何学的サンセリフで、太字ウェイト（900）は主要な見出しに、通常ウェイト（400）はすべての本文コンテンツに保留。ナビゲーションとラベルには2pxの字送りを用いた厳格な全大文字処理。重要なデザイン原則：装飾要素ゼロの絶対的な抑制、全体にわたる鋭角な長方形ジオメトリ（角丸なし）、ラグジュアリーなポジショニングのための最大限の空白、即座の視覚的階層のための高コントラスト色ブロッキング。回避すべきもの：遊び心またはカジュアルな要素、角丸のUIコンポーネント、赤以外の二次色アクセント、セリフまたはスクリプトの書体、精密さを重視するブランドアイデンティティを損なう複雑なアニメーション。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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