精選 · 開放 · 免費

Jun Works

一個以排版為核心的極簡主義個人作品集，用以展示平面設計作品。

01

設計氣質 DNA

一本高端印刷的作品集書冊，字體排版簡潔，留白寬裕。

02

色彩

嚴格採用單色調，僅使用黑色與白色，以強調排版與內容。

03

字型

grotesque-sans

• display54px · 400
• body13px · 400

所有文字皆使用 Neue Haas Grotesk 或類似的 grotesque-sans 字體 · 大型標題文字維持 -2px 的緊湊字間距 · 所有元素統一使用 font-weight 400

04

間距

主要區塊四周留有寬裕的 45px padding，創造出寬敞、有呼吸感的佈局。

05

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

按鈕與互動元素採用 4px solid black 邊框，並使用藥丸形（border-radius: 129.6px）圓角。

06

版面

單欄置中佈局，搭配大型字體、寬裕的 padding，文字則嚴格採用左對齊。

07

動效與互動

連結與按鈕使用 'all' 屬性的 hover 過渡效果

互動元素帶有自訂游標變化與細膩的過渡效果。 · 標準的指標行為。

08

組件

• button 藥丸形按鈕，帶有 4px solid black 邊框，白底黑字，內部留有寬裕的 padding。
• card 不使用卡片，內容以連續的文字區塊或列表呈現。
• chip 藥丸形標籤（例如 #creative、#branding），帶有細黑色邊框。
• input 無可見的輸入欄位，主要為靜態內容。
• hero 大型、粗體的引言文字區塊，字間距緊湊，採左對齊，佔據主要視覺空間。

09

文案語氣與禁用清單

• 語氣 專業、簡潔且高度精煉。
• 標題風格 大型、粗體且字間距緊湊的 grotesque-sans 文字。
• 按鈕文案 帶有細黑色邊框與簡潔文字的藥丸形按鈕。

• 不要使用多種顏色 — 螢幕截圖顯示嚴格的黑白單色調色盤。
• 不要使用裝飾性字體 — 螢幕截圖顯示通篇採用簡潔的 grotesque-sans 排版。
• 不要使用陰影效果 — 螢幕截圖顯示完全平面的設計元素。
• 不要為按鈕使用方形圓角 — 螢幕截圖顯示藥丸形（999px radius）按鈕。
• 不要使用粗體字重 — 螢幕截圖顯示統一的 font-weight 400。
• 不要使用緊湊間距 — 螢幕截圖顯示內容區塊周圍寬裕的 padding（45px）。
• 避免: 避免裝飾性元素
• 避免: 避免不必要的色彩
• 避免: 避免複雜的佈局

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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