精選 · 開放 · 免費
Wearemotto
一個由排版主導、大膽的代理商網站,透過巨型展示字體與廣闊留白來掌控目光。
AgencyBold TypographyCleanPremiumCase Study
01
設計氣質 DNA
策略設計諮詢創新未來主義
專注於品牌策略的高端建築事務所
02
色彩
#1B1B1CInk
#717476Ink soft
#F4F3F0BG
#848484Muted
rgba(0, 0, 0, 1)Line
高對比單色調,以溫潤的中性色為基底
03
字型
geometric-sans · humanist-sans
- display
153px · 500 - heading-1
99px · 500 - body
20px · 500
巨型、全大寫的展示字體主導整個佈局 · 大型展示文字採用緊湊的行高(1.0) · 所有文字統一使用中等字重(500)
04
間距
4px
8px
16px
19px
24px
32px
38px
48px
67px
77px
99px
158px
寬裕的垂直間距,主要區塊頂部內距為 158px
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 9px
lg · 9999px
pill · 9999px
1px solid black 用於作用中 CTA 的下底線
06
版面
1440container
12columns
23pxgutter
768 / 1024breakpoints
全出血首頁橫幅,搭配寬幅多欄格線系統用於作品集項目
07
動效與互動
350msmicro
400mssmall
750msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
平滑、高輸出的緩動效果用於內容揭示 · 懸停時細微的透明度過渡 · 作品集元素的複雜變換動畫
連結與按鈕上的細微色彩或透明度變化 · 立即回應,並平滑緩動進入新狀態
08
組件
- button 帶有實心黑色 1px 下底線的文字連結
- card 以圖片為主的作品集格線項目,搭配最小化的文字標籤
- hero 巨型分割式標題,左對齊的描述文字與向下箭頭指示器
09
文案語氣與禁用清單
- 語氣 自信、權威且具遠見
- 標題風格 使用巨型、全大寫的幾何無襯線字體的宣言式語句
- 按鈕文案 簡單、直接的文字連結,視覺重量極小
- 勿使用多種強調色 — 截圖顯示嚴格的單色調色盤搭配溫潤的米白色背景。
- 勿使用小型、置中的標題 — 截圖顯示橫跨視窗的巨型、左對齊展示字體。
- 勿使用厚重的陰影或 3D 效果 — 截圖顯示完全平面的 2D 表面。
- 勿使用圓角按鈕或卡片 — 截圖顯示銳利邊緣或特定形狀的圓形膠囊。
- 勿使用襯線字體 — 截圖顯示嚴格的無襯線排版系統。
- 勿使用密集的多欄文字佈局 — 截圖顯示極致留白與單欄式的主要內容閱讀流。
- 避免: 嬉鬧的語言
- 避免: 圓角
- 避免: 鮮豔的強調色
- 避免: 密集的文字區塊
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 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個高端代理商與諮詢網站,其特色在於巨型、大膽的展示排版與廣闊留白。主要色彩為溫潤的米白色背景(#F4F3F0)與深黑色文字(#1B1B1C),營造出精緻、高對比的美學。排版使用幾何與人文無襯線字類,展示標題採用極端尺寸(150px+),搭配緊湊的 1.0 行高與中等字重。互動效果平滑且精煉,仰賴細微的透明度與色彩變化。關鍵要求:勿使用圓角、陰影或鮮豔強調色;設計純粹依賴排版尺度與空間節奏。避免雜亂的佈局,並確保所有標題保持左對齊與大寫,以實現最大影響力。
en · zh-CN · zh-TW · ja · ko