精選 · 開放 · 免費

Quentinhocde

一個為互動開發者打造的高對比、排版主導的作品集網站。

01

設計氣質 DNA

一個數位作品集，作為創意技術人員的現代野獸派海報。

02

色彩

嚴格的單色調，無強調色，完全依賴排版層級與字重來建立視覺層次。

03

字型

geometric-sans · grotesque-sans

• display-xl144px · 700
• display-lg97px · 700
• body16px · 400
• caption10px · 400

大型展示文字使用緊湊的負字距，營造緊實而有力的視覺效果。 · 展示文字與導覽連結大量使用大寫，以維持結構化的野獸派風格。 · 內文字級應保持標準的 16px，以確保在複雜背景上的可讀性。

04

間距

所有間距使用 4px 基礎比例，12px 與 20px 作為內部元件間距的主要溝槽。

05

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

無可見邊框；透過空間定位與排版實現區隔。

06

版面

全出血沉浸式佈局，搭配複雜背景，包含固定頂部導覽列與靈活網格分布的內容。

07

動效與互動

互動元件與背景組件應用帶有輕微延遲的 Transform 與背景尺寸轉場。 · 背景質感在不同狀態下的變化，暗示了細微而持續的動態感。

互動元素使用 'cursor: pointer' 表示可點擊性，並透過 transform 轉場提供細膩回饋。 · 標準指標事件，透過 CSS 轉場實現即時視覺狀態變更。

08

組件

• button 文字連結搭配 pointer 游標與大寫樣式，無傳統按鈕邊框或背景。
• card 無傳統卡片；資訊以浮動文字區塊直接呈現於背景之上。
• chip 無可見的標籤或分類標示。
• input 著陸頁上無可見的表單輸入欄位。
• hero 全視窗沉浸式區塊，主導視覺的是巨大的多行排版聲明，疊加於複雜的質感背景上。

09

文案語氣與禁用清單

• 語氣 專業、直接、自信，聚焦於工藝與技術能力。
• 標題風格 大型、大寫、粗重的排版聲明，作為主要的視覺焦點。
• 按鈕文案 簡潔、無裝飾的文字連結，常使用外部連結圖示表示導覽離開當前頁面。

• 不要引入第三種顏色作為強調色——截圖顯示的是嚴格的白底黑字單色調色盤。
• 不要在大型文字上使用寬鬆字距——截圖顯示使用緊湊負字距以營造密集、野獸派的外觀。
• 不要在展示文字上使用襯線或書寫字體——截圖顯示所有主要標題均使用幾何無襯線體。
• 不要為互動元素添加邊框、陰影或背景色——截圖顯示的是純文字連結。
• 不要使用傳統按鈕元件——截圖顯示的是帶有 pointer 游標的大寫文字連結。
• 不要為主要英雄聲明使用多欄網格——截圖顯示的是巨大的單欄排版區塊。
• 避免: 避免使用彩色強調色或漸層。
• 避免: 避免使用裝飾性或書寫風格的字體。
• 避免: 避免使用帶有邊框或陰影的傳統卡片式 UI 元件。
• 避免: 避免使用大量內邊距或留白，以免破壞沉浸感。
• 避免: 避免使用帶有背景填充的標準按鈕元件。
• 避免: 避免為首要聲明使用小型、低調的排版。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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