精選 · 開放 · 免費
Collins
高級設計代理網站，平衡大膽編輯排版與克制、精緻的極簡主義。
brandingstudio
01
設計氣質 DNA
精緻權威編輯高級
高端設計代理工作室
02
色彩
#140700Ink
#d0d0c8Ink soft
#f8f8f7BG
#ffffffBG soft
#efefefBG quiet
#514c49Muted
rgba(208, 208, 200, 0.5)Line
近單色調，搭配細微溫潤灰階與高對比黑墨色，實現最大編輯衝擊力。
03
字型
transitional-serif · humanist-sans
- display
72px · 400 - heading
36px · 400 - body
16px · 400 - caption
14px · 400
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
96px
寬裕留白搭配緊湊字距，創造有呼吸感的編輯節奏
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 16px
lg · 96px
pill · 999px
細微 1px 邊框，使用柔和溫潤灰階
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
置中首頁橫幅，搭配寬裕垂直內邊距，後接不對稱內容區塊
07
動效與互動
250msmicro
400mssmall
800msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
clip-path 揭示 · transform 滑動 · opacity 淡化
細微顏色過渡，0.7s 緩動 · 即時反饋，無彈跳效果
08
組件
- button 極簡藥丸形按鈕，深墨色填充搭配白色文字
- card 大型影像優先卡片，圓角（16px），展示案例研究
- chip 月桂框獎章徽章，水平 flex 佈局排列
- input 極簡內嵌文字輸入框，搭配細微邊框
- hero 全視域置中標題，搭配充裕垂直呼吸空間
09
文案語氣與禁用清單
- 語氣 權威而引人入勝
- 標題風格 簡短、有力的祈使句，帶句點
- 按鈕文案 簡潔單字操作（探索）
- 勿使用鮮豔強調色——網站依賴近單色調色盤，無主導強調色
- 勿使用厚重陰影——表面設計簡潔平坦
- 勿在標題使用緊湊行距——全站維持寬裕垂直節奏
- 勿在展示文字使用無襯線體——首頁標題專用襯線體
- 勿在佈局中堆砌多個元素——每區塊最大留白，僅一個焦點
- 勿使用裝飾性邊框——僅有 1px 細微分隔線可見
- 避免: 技術術語
- 避免: 過度隨意的語言
- 避免: 泛用行銷用語
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是 Collins 高級設計代理網站，展現編輯式、克制美學。色盤為近單色調：米白背景（#f8f8f7）、近黑墨色（#140700）與細微溫潤灰階（#d0d0c8、#514c49）。無主導強調色。排版交替使用過渡襯線體於展示標題（緊負字距）與人文無襯線體於內文。寬裕留白創造有呼吸感的編輯節奏。關鍵約束：永不添加彩色強調色，永不使用緊湊間距於大型文字，永不 clutter 佈局，永不使用無襯線體於首頁展示標題，始終維持克制高級語調，並優先呈現影像為主的案例研究，而非文字密集區塊。
en · zh-CN · zh-TW · ja · ko