精選 · 開放 · 免費

Hoefler&Co

頂級鑄字所，透過編輯式敘事與優雅的字體樣本展示呈現其字體作品。

01

設計氣質 DNA

高端設計工作室與字體的編輯展場

02

色彩

深色介面與淺色內容區域之間的高對比度，使用鮮亮的藍色作為連結與 UI 元素的功能性強調色。

03

字型

transitional-serif · humanist-sans · monospace

• display56px · 400
• heading21px · 400
• body15px · 400
• caption10px · 400

使用過渡襯線體作為展示與標題字體，以喚起編輯設計的優雅感 · 使用人文無襯線體作為內文與 UI 元素，兼顧可讀性與現代感 · 展示文字採用緊湊的字距，營造精緻、匠心獨運的外觀

04

間距

以一致的 4px 為基準，內容區域採用寬裕的內距，為字體創造呼吸空間。

05

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

極少使用邊框；依賴背景對比與間距進行區隔。

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

06

版面

網格佈局，為字體樣本提供大型視覺區域，並建立清晰的內容層級。

07

動效與互動

互動元素上的流暢填充過渡 · hover 狀態下的色彩過渡 · 內容顯示時的透明度淡入

互動元素上的細微色彩變化與填充過渡。 · 即時回應，搭配流暢的過渡回饋。

08

組件

• button 極簡樣式，主要以文字為主，搭配細微的 hover 過渡效果。
• card 全幅出血的圖片區塊，搭配疊加文字，或在視覺與內容區域間保持簡潔分隔。
• chip 不作為主要功能；介面依賴簡潔的導覽連結。
• input 極簡的僅底線式輸入欄位，搭配細微的佔位文字。
• hero 大型字體樣本填滿視口，帶來強烈的視覺衝擊。

09

文案語氣與禁用清單

• 語氣 專業、精緻且具編輯感；以權威口吻談論字體與設計。
• 標題風格 大膽、自信的陳述，展示字體樣本與設計理念。
• 按鈕文案 內斂而優雅；邀請探索，而非積極轉換。

• 不要在內容區塊上使用圓角——截圖顯示所有容器皆為銳利、乾淨的邊緣。
• 不要在卡片或內容區域添加陰影——截圖顯示為平面、無邊框的設計。
• 不要為內文使用粗體字重——截圖顯示全文一致使用 400 字重。
• 不要以裝飾性元素 clutter 介面——截圖顯示克制的風格與充足的留白。
• 不要使用無襯線體作為展示標題——截圖顯示突出的字體使用過渡襯線體。
• 不要使用粗重的邊框來區隔章節——截圖依賴背景顏色對比而非邊框。
• 避免: 過度隨意或追逐潮流的語言
• 避免: 具侵略性的銷售訊息
• 避免: 缺乏脈絡的複雜技術術語

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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