精選 · 開放 · 免費

Hugoferradas

一個為品牌設計師與創意總監打造的精緻個人作品集，採用雙語佈局，以大膽的字體排版和克制的色彩方案為特色。

01

設計氣質 DNA

為創意總監準備的寧靜、字體排版型畫廊

02

色彩

高對比的單色調，純黑背景搭配純白文字，偶爾點綴如淺黃色標誌等細微的強調色。

03

字型

transitional-serif · grotesque-sans

• display36px · 700

標題使用經典的襯線字體（回退至 Times New Roman），以展現優雅與權威感。 · 內文使用簡潔的無襯線字體（Roboto），以在深色背景上達到最佳可讀性。 · 字體排版採用左對齊，並搭配寬鬆的行高，以維持乾淨、有呼吸感的佈局。

04

間距

透過主要區塊頂部和底部寬鬆的 padding，以及文字區塊之間一致的邊距，建立起垂直的節奏感。

05

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

不使用可見的邊框；深度感完全透過字體排版和色彩對比來創造。

06

版面

全寬的黑色畫布，中央放置一個左對齊的內容區塊，避免文字緊貼邊緣。

07

動效與互動

所有元素都應用了 transition 屬性，意味著在滑鼠懸停或互動時會有流暢的狀態變化。

全球性的 transition 屬性暗示了細微的游標互動效果。 · 針對專業所屬機構（R/GA, Stink Studios）採用標準連結行為。

08

組件

• button 沒有可見的傳統按鈕；導航透過文字連結和一個簡潔的切換圖示來處理。
• card 「ST·S·2·OS」這個元素扮演著圖形化卡片的角色，具有細微的背景色調變化和大型自訂字體。
• hero 一個以文字為主的極簡主義首頁區塊，包含一個大型襯線字體標題和簡潔的專業概述。

09

文案語氣與禁用清單

• 語氣 專業、簡潔且自信
• 標題風格 直接且帶有個人風格，使用經典的襯線字體來建立權威感。
• 按鈕文案 含蓄的；專業所屬機構以帶有底線的文字連結形式呈現。

• 不要使用淺色或多彩的背景——截圖顯示的是純黑（#000000）的畫布。
• 不要在標題中使用無襯線字體——截圖顯示的是過渡性襯線字體（Times New Roman）。
• 不要使用投影或複雜的邊框——截圖顯示的是扁平、無邊框的設計。
• 不要使用顯眼、高彩度的強調色——截圖顯示的是中性的單色調色板。
• 不要使用小而密集的文字——截圖顯示的是寬鬆的行高和大型字體大小以確保可讀性。
• 不要將所有文字置中對齊——截圖顯示的是左對齊的段落和標題。
• 避免: 避免使用過於隨意的語言
• 避免: 避免複雜的導航選單
• 避免: 避免雜亂的佈局
• 避免: 避免使用多種相互競爭的強調色
• 避免: 避免在內文中使用裝飾性字體

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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