精選 · 開放 · 免費
Heartaerospace
一個高端、簡潔的航空航天品牌,以克制的排版與大尺寸影像,展示電動航空硬體。
CleanHardwareEditorialPremiumRestraint
01
設計氣質 DNA
航空航天電動航空永續性清潔科技高端硬體
簡潔、克制的航空航天工程文檔風格。
02
色彩
#1032CFAccent
#141414Ink
#767676Ink soft
#FFFFFFBG
#EEF0F2BG soft
rgba(20,20,20,0.15)Line
高對比的單色調基底,搭配單一、鮮明的深藍強調色用於互動元素。
03
字型
neue-haas-grotesk-display · neue-haas-grotesk-text
- display
50px · 500 - body
18px · 400 - caption
14px · 400
所有主要標題文字使用 Neue Haas Grotesk Display。 · 所有內文與介面文字使用 Neue Haas Grotesk Text。 · 標題維持緊湊的字距。
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
96px
嚴格的 4px 基礎網格,搭配寬裕的 64px 章節內距。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 32px
pill · 999px
使用 rgba(20,20,20,0.15) 或低透明度黑色的細微 1px 邊框。
0 32px 68px rgba(0, 0, 0, 0.3)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全幅主視覺影像,搭配置中的大尺寸排版層疊。
07
動效與互動
150msmicro
200mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
hover 時細微的透明度過渡。 · 主要按鈕的色彩過渡。 · 影像的濾鏡過渡。
互動元素輕微降低透明度或改變色彩。 · 立即視覺回饋,無彈跳縮放效果。
08
組件
- button 實心深藍 (#1032CF) 矩形按鈕,搭配白色文字與圓角(lg radius)。
- card 簡潔的白色或透明表面,無可見邊框。
- chip 用於 Cookie 同意的最小膠囊形狀切換開關。
- input 簡潔的文字輸入欄,搭配細微的底邊框。
- hero 全幅攝影背景,搭配大型白色排版文字覆蓋。
09
文案語氣與禁用清單
- 語氣 專業、前瞻且具遠見。
- 標題風格 大型、粗體、首字母大寫的陳述句式。
- 按鈕文案 清晰、行動導向的文字,置於實心藍色背景上。
- 避免使用裝飾性字體——截圖顯示為簡潔、幾何感的無襯線字體排版。
- 避免在文字後使用雜亂背景——截圖顯示文字清晰地覆蓋於影像或純白背景上。
- 避免使用多種強調色——截圖顯示單一主導的深藍色被一致使用。
- 避免使用銳利、具攻擊性的角落——截圖顯示主要元素採用一致的圓角(最大 32px)。
- 避免主介面採用深色模式——截圖顯示以白色與淺色主題為主的版面配置。
- 避免使用低對比文字——截圖顯示高對比的黑色或白色文字與其背景對應。
- 避免: 未提供上下文的過度技術術語。
- 避免: 具攻擊性或炒作式的行銷語言。
- 避免: 視覺雜亂的介面。
- 避免: 使用多種鮮豔色彩。
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Heart Aerospace 是一家高端電動飛機製造商。設計簡潔、克制且專注於硬體,採用純白 (#FFFFFF)、深黑 (#141414) 與單一鮮明深藍 (#1032CF) 強調色的高對比色盤。排版依賴 Neue Haas Grotesk Display 與 Text,特點為緊湊字距與大尺寸比例。關鍵禁止事項:避免使用多種強調色,切勿使用裝飾性或襯線字體,並避免視覺雜亂或繁忙的版面配置。設計 DNA 以簡潔的幾何線條、寬裕的留白與高品質攝影為核心,傳達技術精確性與前瞻使命。
en · zh-CN · zh-TW · ja · ko