精選 · 開放 · 免費

Bareis Nicolaus

一個為視覺傳達機構打造的高對比度、標籤驅動的設計作品集。

01

設計氣質 DNA

一個 sleek、單色調的視覺作品歸檔系統。

02

色彩

嚴格單色調，由專案影像提供所有色彩。

03

字型

geometric-sans · humanist-sans

• display72px · 400
• body24px · 400

字體系列：Lausanne, sans-serif · 字重：400 在 856 個元素中一致使用。 · 字號：24px 為主要文字尺寸。

04

間距

由互動式標籤元素的 padding 定義一致的垂直與水平節奏。

05

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

標籤與按鈕使用 2px 實心白色邊框。

06

版面

分割畫面佈局，左側為導覽/篩選標籤，右側為專案影像。

07

動效與互動

互動標籤在 hover 時的流暢過渡。 · 用於展開與收合區塊的彈性與透明度過渡。

標籤的背景填充或透明度變化。 · 標籤篩選專案網格。

08

組件

• button 標籤，具 2px 實心白色邊框，藥丸形狀（border-radius 120px），黑色背景，白色文字。
• card 全出血攝影影像，覆蓋藥丸形狀的文字標籤。
• chip 廣泛用於篩選類別，樣式與標籤相同。
• input 由標籤式互動所暗示的極簡搜尋或篩選輸入欄位。
• hero 大型分割畫面，結合用於導覽的巨型排版與高品質的專案攝影圖像。

09

文案語氣與禁用清單

• 語氣 專業、直接且專注。
• 標題風格 大型、粗體、無襯線排版（72px）用於主要導覽。
• 按鈕文案 互動式藥丸形狀標籤，邀請探索與篩選。

• 不要使用白色背景——截圖顯示為純黑背景。
• 不要使用裝飾性或襯線字體於主要 UI——截圖顯示為簡潔的無襯線字體。
• 不要使用彩色按鈕或強調色——截圖顯示為嚴格單色調的 UI 元素。
• 不要使用厚重的陰影——截圖顯示為平坦、基於邊框的元素。
• 不要使用複雜的多欄文字佈局——截圖顯示為簡潔的、基於標籤的網格。
• 不要使用小於藥丸形狀的圓角——截圖顯示為高度圓角的邊框（120px）。
• 避免: 手寫體字體
• 避免: 柔和陰影
• 避免: 裝飾性漸層

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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