精選 · 開放 · 免費

Michaelspeichert

為設計工作室打造的簡潔、字體優先作品集。

01

設計氣質 DNA

一座粗獷主義藝術畫廊，透過侵略性的超大字體與高對比圖形進行溝通。

02

色彩

嚴格的雙色調色盤，依賴極端對比與留白創造衝擊力。

03

字型

display-sans · humanist-sans

• display170px · 500
• heading60px · 300
• title54px · 500
• body28px · 500

大寫字體頻繁用於強調與導覽 · 行高緊湊，營造更緊密、粗獷的感覺 · 字重在 light (300) 與 medium (500) 之間交替，創造強烈對比

04

間距

不對稱且寬大，以容納大膽字體

05

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

使用銳利的 1px 白色邊框來框線與分隔內容區塊

0px 0px 0px 1px rgba(255,255,255,1.0)

06

版面

基於網格的結構，支援大型、沉浸式影像與大膽字體區塊。

07

動效與互動

平滑的 opacity 轉場用於微妙的顯現效果 · 直接的 transform 用於互動式 hover 狀態

立即的視覺反饋，通常透過 opacity 變化或微妙的 transform 實現。 · 直接回應，延遲極小。

08

組件

• button 極簡、無邊框或直角，依賴文字樣式與 hover 狀態。
• card 高對比影像容器，搭配粗體字體疊加。
• chip 簡潔的文字標籤，採用大寫樣式。
• input 乾淨、極簡的欄位，由銳利邊框定義。
• hero 全螢幕、沉浸式區域，以大膽、富有表現力的字體與高對比影像為主。

09

文案語氣與禁用清單

• 語氣 大膽、直接且自信。
• 標題風格 大膽、富有表現力的字體，作為主要視覺元素。
• 按鈕文案 低調但清晰，通常整合於整體字體佈局中。

• 不要使用色彩漸層——截圖顯示嚴格的黑白調色盤
• 不要在文字上使用陰影——截圖顯示平面、高對比的字體
• 不要將所有文字置中對齊——截圖顯示左對齊與表現性佈局的混合
• 不要使用小巧、精緻的字體——截圖顯示大膽、粗體的展示型字體
• 不要大量使用圓角——截圖顯示銳利的幾何元素
• 不要使用複雜的多欄文字區塊——截圖顯示簡單、具衝擊力的字體陳述
• 避免: 避免使用柔和的漸層或陰影
• 避免: 避免使用許多小元素的雜亂佈局
• 避免: 避免裝飾性字體或俏皮的插圖
• 避免: 避免柔和的色調或淺粉彩色調
• 避免: 避免傳統的、基於網格的統一佈局
• 避免: 避免使用超過兩種字體族

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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