精選 · 開放 · 免費

Smilingwolf

一個結合大型攝影與簡潔排版的高端品牌與數位代理商作品集。

01

設計氣質 DNA

高端攝影畫廊遇上瑞士設計工作室

02

色彩

溫暖的米白色背景搭配近黑色文字，完全依賴攝影圖片提供色彩。

03

字型

transitional-serif · geometric-sans · monospaced

• display59px · 520
• body12px · 400
• caption10px · 400
• mono10px · 400

導覽與標籤使用等寬大寫字體 · 展示標題使用緊湊字距與襯線字型 · 幾何無襯線字體為內文主要字型

04

間距

混合緊湊的 10-20px 間距與寬大的 60px 間隔，在主要內容區塊之間創造寬裕的呼吸空間。

05

表面 (圓角 / 陰影 / 邊線)

使用 rgba(19,23,19,0.15) 的細 1px 線條，謹慎地作為分隔線與標籤的細微輪廓。

06

版面

乾淨的單欄佈局用於主要作品列表，搭配全寬圖片與寬裕的垂直間距。

07

動效與互動

互動元素上的細膩 hover 狀態 · 頁面導覽與 hover 效果的流暢過渡

連結與標籤上的細微色彩變化或底線出現。 · 標準的指標游標互動。

08

組件

• button 內文文字連結，帶有細 1px 邊框與大寫等寬文字。
• card 作品集項目包含大型圖片、大寫等寬標籤、大型襯線標題與無襯線副標題。
• chip 小型大寫等寬標籤，帶有細 1px 邊框與 4px 圓角。
• input 在提供的截圖中不可見。
• hero 全寬攝影背景圖片，無文字疊層，後接代理商名稱與導覽。

09

文案語氣與禁用清單

• 語氣 精緻、自信且內斂。
• 標題風格 直接、簡潔且常帶有衝擊力，以大型襯線或無襯線字型呈現。
• 按鈕文案 簡單的大寫等寬文字，常搭配箭頭或細邊框。

• 勿使用明亮、人造的強調色 — 截圖顯示中性色調，圖片提供所有色彩。
• 勿在主要容器上使用圓角 — 截圖顯示銳利的 4px 或 0px 邊緣。
• 勿在卡片或容器上使用陰影 — 截圖顯示完全平坦的表面。
• 勿所有文字都使用無襯線字體 — 截圖顯示大型標題使用襯線字體、UI 使用等寬字體的混合。
• 勿在佈局中塞入密集資訊 — 截圖顯示寬裕的留白與單欄流動。
• 勿使用粗重的邊框 — 截圖顯示非常細微的分隔線與輪廓。
• 避免: 過多的驚嘆號
• 避免: 過於技術性的術語
• 避免: 侵略性的行銷語言
• 避免: 色彩鮮豔的 UI 元素
• 避免: 主要容器上的圓角
• 避免: 容器上的陰影

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko