精選 · 開放 · 免費
Flutterwave
為 Flutterwave 設計團隊的故事、氛圍與作品集打造的溫暖編輯式展示平台。
StudioEditorialCleanCurationTypography
01
設計氣質 DNA
設計團隊創意編輯策展Flutterwave
一本展現企業設計團隊創意成果的精緻數位雜誌。
02
色彩
#171717Ink
#FFFFFFBG
#FCD2BABG quiet
rgba(23,23,23,0.2)Line
以溫潤中性色為基調，搭配強烈的深色文字，視覺趣味來自豐富影像而非介面色調。
03
字型
transitional-serif · geometric-sans
- display
64px · 700 - display-sm
32px · 700 - body
18px · 400 - caption
12px · 400
標題文字使用高對比度的過渡襯線體（Millik），以營造強烈視覺衝擊。 · 內文與介面文字使用簡潔的幾何無襯線體（Moderat），確保極佳的可讀性。 · 大型標題文字應使用緊湊的負字距（-0.8px 至 -1px），以營造緊湊的編輯風格。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
寬裕
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
極簡
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
文字採居中欄位，視覺內容使用水平滾動輪播
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.16, 1, 0.3, 1)easing
水平滾動 · 流暢過渡
互動元素顯示指標游標 · 可拖曳輪播使用 'grab' 游標
08
組件
- button 圓角輪廓按鈕，筆畫極細
- card 大型影像優先卡片，帶有覆蓋式文字
- hero 大型居中標題，附帶副標題
09
文案語氣與禁用清單
- 語氣 友善
- 標題風格 粗體、直接、略帶趣味
- 按鈕文案 全大寫、簡約、以文字為主
- 避免使用無菌、全灰色的企業色盤——截圖顯示應搭配溫暖的蜜桃色（#FCD2BA）與活潑的影像。
- 避免使用細體、淺色字型作為標題——截圖顯示應使用粗體、高對比度的襯線展示字型。
- 避免採用緊湊的內邊距與密集的佈局——截圖顯示元素周圍應有寬裕的留白。
- 避免僅依賴介面色調來傳達情感——截圖顯示氛圍應由精選攝影與插畫來驅動。
- 避免互動元素使用尖銳的直角——截圖顯示應使用 5px 圓角邊框。
- 避免模糊視覺層次——截圖顯示大型展示字型與內文之間應有清晰的區隔。
- 避免: 企業術語
- 避免: 僵硬正式語氣
- 避免: 侵略性銷售語言
- 避免: 複雜的視覺雜亂
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
為創意工作室或設計團隊設計一個友善、編輯風格的網站。佈局應感覺像一本精選的數位雜誌，使用純白色背景，並搭配輔助的溫暖蜜桃色（#FCD2BA）來區分段落。使用粗體過渡襯線體（如 Millik）作為展示標題，簡潔的幾何無襯線體（如 Moderat）作為內文，大型文字使用緊湊的負字距。核心互動模式應包含水平滾動輪播，以展示視覺作品，並使用 'grab' 游標。嚴格避免：厚重陰影、密集擁擠的佈局、無菌的企業色盤，或僅使用單一強調色來驅動介面——視覺趣味必須來自作品集豐富多彩的影像。
en · zh-CN · zh-TW · ja · ko