精選 · 開放 · 免費
Embacy
一個簡潔、精緻的設計代理商作品集，以大膽排版和高對比黑白基底為特色。
AgencyPortfolioCleanBold TypographyRefinement
01
設計氣質 DNA
全球科技設計夥伴代理商
一個專注於全球科技品牌的高端設計代理商作品集。
02
色彩
#ff5319Accent
#000000Ink
#ffffffBG
#f7f7f7BG soft
#999999Muted
rgba(0,0,0,0.1)Line
高對比的單色調基底，搭配一個鮮明的橘色強調色，謹慎用於強調與行動呼籲。
03
字型
geometric-sans
- display
56px · 400 - heading
43px · 400 - body
16px · 400 - caption
14px · 400
標題使用緊湊的負字距。 · 各區塊之間保持寬裕的垂直留白。 · 避免使用過重的字體粗細；層次感依賴尺寸和間距。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
寬裕的留白，網格項目之間有清晰的分隔。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 10px
pill · 999px
盡量不見或無可見邊框；結構透過間距和背景對比來定義。
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
標準 12 欄網格，在行動裝置上會縮減為 2 欄網格。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.1, 0, 0.3, 1)easing
頁面元素的流暢透明度與變形轉場。 · 用於公告的水平滾動跑馬燈。
細膩的透明度或色彩過渡。 · 直接導航或流暢捲動。
08
組件
- button 膠囊形的主要行動呼籲按鈕，搭配鉛筆表情符號；次要選項為文字連結。
- card 專案卡片由全寬圖片、專案名稱和國家組成。
- chip 無可見元件。
- input 無可見元件。
- hero 大規模左對齊的排版，用以介紹代理商。
09
文案語氣與禁用清單
- 語氣 專業、直接且自信。
- 標題風格 極簡、大規模且具宣言性。
- 按鈕文案 有趣但清晰，使用表情符號作為視覺錨點。
- 不要使用多種亮色系強調色——截圖顯示僅有一個主導的橘色。
- 不要使用過重的字體粗細如粗體或黑體——截圖顯示以 400 字重文字為主。
- 不要為卡片添加裝飾性邊框——截圖顯示結構透過間距和圖片內容呈現。
- 不要為標題使用寬字距——截圖顯示緊湊的負字距。
- 不要用許多 UI 元件使介面變得擁擠——截圖顯示非常簡潔、極簡的版面。
- 不要使用陰影來營造深度——截圖顯示扁平化設計美學。
- 避免: 過多的形容詞
- 避免: 技術術語
- 避免: 喧鬧或侵略性的銷售文案
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 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個名為 Embacy 的設計代理商作品集，其定位為「全球科技品牌的設計夥伴」。設計依賴高對比的單色調色板，搭配一個鮮明的橘色（#FF5319）強調色。排版採用幾何無襯線字體（Haffer），標題大而字距緊湊，並配以寬裕的留白。關鍵的避免事項包括：不使用過重的字體粗細、不使用多種強調色、不添加裝飾性邊框、不使用寬字距、不使介面過於擁擠、以及不使用陰影。版面簡潔且具編輯風格，著重於大膽的影像與文字。
en · zh-CN · zh-TW · ja · ko