精選 · 開放 · 免費
Drawhistory
一個雙欄式編輯佈局，以對比的大地色與深色卡片公告公司合併。
AgencyCase StudyCleanBold TypographyPremium
01
設計氣質 DNA
衝擊力設計策略整合公告
一張正式而溫暖的企業公告卡片
02
色彩
#ff6714Accent
#f2e9e1Ink
#101010BG
#3d3b31BG soft
#808080Muted
rgba(242, 233, 225, 0.4)Line
深色背景與淺色溫暖文字之間形成高對比，並以單一亮橙色作為點綴。
03
字型
geometric-sans · humanist-sans · monospace
- display
104px · 400 - body
16px · 400 - label
14px · 400
按鈕與公告橫幅採用全大寫 · 大型展示標題使用緊湊字距 · 單字型字體用於大寫介面標籤
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
卡片內部保持一致的 32px 與 24px 內邊距
05
表面 (圓角 / 陰影 / 邊線)
sm · 8px
md · 16px
lg · 16px
pill · 9999px
細微的淺色邊框分隔內部元素
06
版面
1280container
2columns
32pxgutter
768 / 1024breakpoints
兩張高大的卡片居中於深色背景上，頂部配有全寬橫幅
07
動效與互動
150msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
滑鼠懸停時流暢的顏色與不透明度過渡 · 文字裝飾過渡
互動元素上的細微過渡效果 · 所有互動元素上顯示指標游標
08
組件
- button 基於文字的按鈕，採用大寫單字型字體與細邊框
- card 全高深色卡片，具有充足的內部內邊距與圓角
- chip 頂部公告欄，帶有小型橙色方形指示器
- input 截圖中不可見
- hero 結合文字與影像的密集型編輯公告區塊
09
文案語氣與禁用清單
- 語氣 專業、具衝擊力且著眼未來
- 標題風格 全大寫、緊湊字距、大尺寸幾何無襯線字體
- 按鈕文案 大寫單字型字體配細邊框
- 勿使用彩色漸層——截圖顯示為平坦的純色深色表面
- 勿使用粗體字重——截圖顯示全部使用常規（400）字重
- 勿使用段落文字置中對齊——截圖顯示所有元素文字均置中對齊
- 勿使用明亮背景——截圖顯示為深沉、柔和的大地色調
- 勿使用複雜投影——截圖顯示為無浮動效果的平坦卡片
- 勿使用裝飾性襯線字體——截圖顯示為簡潔的幾何與單字型字體
- 避免: 過於隨意的語言
- 避免: 雜亂的佈局
- 避免: 高飽和度色彩
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
此網站為使用高對比、柔和色調的設計機構公告頁面。佈局特色為兩張大型深色卡片（深橄欖色 #3d3b31 與炭色 #101010）居中於深色背景上。主要顏色為 #f2e9e1（文字）、#101010（背景）及 #ff6714（點綴色）。字體依賴幾何無襯線字體作為展示字體，單字型字體用於標籤。關鍵注意事項：絕不使用粗體字重（所有文字均為常規）、避免明亮或霓虹色彩、不使用投影製造浮動效果。
en · zh-CN · zh-TW · ja · ko