精選 · 開放 · 免費

A Ware At

一個利用大膽的編輯攝影與古典排版，展現自然力量與精緻品質的高端戶外與運動品牌。

PhotographicProductPremiumCleanConsumer

A Ware At 網站截圖

↓ 下載設計系統包 (38 MB)在 OpenDesign 中開啟

原站: https://a-ware.at

📦 瀏覽包內檔案 →

01

設計氣質 DNA

自然效能高端戶外

一個結合原始自然攝影與精緻古典排版的高端運動品牌。

02

色彩

#000000Ink

#333333Ink soft

#ECE9DFBG

#F7F5EEBG soft

#A77A41Muted

rgba(0,0,0,0.12)Line

大地中性色與深黑色，以攝影作為色彩與視覺趣味的主要來源。

03

字型

transitional-serif · humanist-sans · geometric-mono

display150px · 300
heading38px · 300
body14px · 400

大寫無襯線標籤使用寬鬆字間距。 · 大型展示用襯線體使用緊湊字距。

04

間距

4px

8px

12px

16px

24px

32px

48px

96px

寬裕的留白空間，結構間隔以 48px 為基準。

05

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

sm · 8px

md · 12px

lg · 32px

pill · 999px

極簡處理，大多無邊框，偶爾使用 1px 分隔線或細微下劃線。

rgba(172,171,171,0.3) 0px -1px 10px 0px

06

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

全出血的編輯攝影，搭配大型排版覆蓋。

07

動效與互動

150msmicro

400mssmall

500msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

使用者介面狀態轉換時，採用平滑的線性透明度過渡。

細微的色彩或透明度變化。 · 即時回饋，採用線性過渡效果。

08

組件

button 外框膠囊形狀，帶有寬裕的 padding。
card 極簡風格，通常僅有影像與覆蓋文字。
hero 全視域攝影背景，搭配超大號襯線排版。

09

文案語氣與禁用清單

語氣自信、直接且高端。
標題風格 巨型、全大寫、字距緊湊的襯線體或字間距寬鬆的無襯線體。
按鈕文案 字間距寬鬆的大寫無襯線體，通常置於膠囊形狀外框內。

不要使用明亮、人工的強調色——截圖依賴自然色調與攝影。
不要使用緊湊、置中的文字區塊——設計偏好寬幅、左對齊或全出血的排版構圖。
不要使用厚重的陰影或 3D 效果——使用者介面是平面的，深度來自攝影。
不要使用圓潤的無襯線字體作為展示用途——截圖使用銳利、古典的襯線體來創造衝擊力。
不要在版面中堆砌多個使用者介面元素——設計極度寬敞且極簡。
不要使用複雜的背景圖樣——設計使用單一的大地色調或全出血影像。
避免: 俏皮或隨意的語言。
避免: 雜亂的版面配置。
避免: 明亮、霓虹色的強調色。

10

包內真實截圖

A Ware At — 桌面首屏（hero） — 桌面首屏（hero）

A Ware At — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

A Ware At — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

A Ware At — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

A Ware At — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

A Ware At — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

A Ware At — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

A Ware At — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

A Ware At — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

A Ware At — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

A Ware At — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

A Ware At — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

A Ware At — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

A Ware At — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

A Ware At — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

A Ware At — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

A Ware At — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

A Ware At — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

一個高端運動與戶外電商品牌。版面以全出血、高對比的運動員自然攝影為主。排版使用巨型、字距緊湊的過渡襯線體作為標題（例如 'A-WARE'），導覽與標籤則使用乾淨、字間距寬鬆的無襯線體。關鍵色彩包括米白色背景 (#ECE9DF)、深黑墨色 (#000000) 與細微的金棕色強調色 (#A77A41)。嚴禁事項：切勿使用明亮的霓虹色、避免雜亂的多欄版面、不要使用俏皮或隨意的排版。整體感覺是編輯式、精緻且充滿自然力量的。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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