精選 · 開放 · 免費
Wgsn
全球領先的趨勢預測者。
PremiumEditorialProductivityCurationAgency
01
設計氣質 DNA
趨勢預測未來洞見高端
高端時尚編輯與企業級 SaaS 控制面板的結合。
02
色彩
#000000Ink
rgba(0,0,0,0.6)Ink soft
#FFFFFFBG
#F5F5F5BG soft
#999999Muted
採用高對比黑白的單色基底,讓影像提供主要色彩。
03
字型
humanist-sans · monospace
- display
56px · 700 - h2
48px · 400 - body
18px · 400
所有文字層級均使用 DM Sans。 · 內文保持清晰可讀,並使用充裕的行高。 · 大型展示文字使用緊湊的字距。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
充裕的留白,以反映高端定位。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 16px
lg · 40px
pill · 999px
使用 rgba(0,0,0,0.6) 的 1px 細邊框。
rgb(0, 0, 0) 0px 0px 0px 1px inset
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
標準的置中容器,採用分割螢幕的英雄區佈局。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
互動元素的平滑背景色彩轉換。
按鈕與連結的背景色彩轉換。 · 立即的視覺回饋。
08
組件
- button 藥丸形按鈕,邊框半徑 40px,並採用高對比(黑底白字或白底黑字)。
- card 圓角矩形(半徑 16px),包含影像與文字覆蓋層。
- chip 不適用
- input 不適用
- hero 大型分割佈局,一側展示趨勢影像拼貼,另一側則為粗體字體排印。
09
文案語氣與禁用清單
- 語氣 權威、具前瞻性且專業。
- 標題風格 簡短、有力且具前瞻性(例如:「創造明日」)。
- 按鈕文案 直接且以行動為導向(例如:「申請演示」)。
- 避免使用鮮豔的霓虹色彩——截圖顯示為嚴格的黑白單色基底。
- 避免使用銳利的 0px 圓角——截圖顯示藥丸形按鈕(40px)與圓角卡片(16px)。
- 避免在標題中使用寬鬆的字距——截圖顯示緊湊的字距(-1px)。
- 避免在標題中使用細字重——截圖顯示粗體/半粗體的展示文字。
- 避免使用雜亂的背景——截圖使用純黑、白或淺灰色作為區塊背景。
- 避免使用小而擁擠的文字——截圖使用充裕的 18px 內文,並搭配高行高。
- 避免: 休閒俚語
- 避免: 被動語態
- 避免: 過度技術性的行話
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
WGSN 是一個高端的 B2B 趨勢預測平台,採用精緻的編輯式設計語言。色彩配置嚴格採用單色調,使用純黑 (#000000) 與白 (#FFFFFF),並搭配半透明黑色建立層級,以及灰色 (#999999) 用於柔和元素。字體排印專用 DM Sans,一款人文無襯線字體,從 56px 粗體標題到 18px 內文。按鈕採用藥丸形(半徑 40px)並填入高對比色彩。佈局寬敞且置中,強調大型趨勢影像。關鍵限制:絕不使用強調色、絕不使用銳利圓角按鈕,且絕不讓文字變得擁擠。所有文案需保持權威且具前瞻性的語氣。
en · zh-CN · zh-TW · ja · ko