精選 · 開放 · 免費

Frere-Jones Type

一個高端的獨立字型鑄造所，透過極簡、編輯風格的設計展示原創字型。

01

設計氣質 DNA

一間精緻的、具有傳統工藝感的設計工作室，優先考慮字型的清晰度與美感。

02

色彩

高對比單色調，搭配單一、柔和的灰藍色用於展示特定字型樣本。

03

字型

transitional-serif · humanist-sans · monospaced

• display86px · 700
• h156px · 700
• body16px · 400
• caption12px · 400

使用過渡襯線體作為大型展示字體，以展現字體細節 · 使用人文無襯線體於所有功能性介面與內文

04

間距

寬鬆的留白，搭配嚴格的 4px 基線網格。

05

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

使用 1px solid black 作為細微的分隔線與按鈕邊框。

06

版面

乾淨的網格，劃分出首頁、關於、部落格與定制作品等明確區域。

07

動效與互動

首頁輪播中字型樣本間的細膩交叉淡入淡出

文字連結與按鈕在懸停時出現細微的顏色變化或底線。 · 立即轉換至下一個狀態或頁面。

08

組件

• button 帶有底線的純文字，或黑色背景配白色文字；無圓角。
• card 全寬區塊或粗體網格區塊用於展示定制作品，通常為黑底白字。
• chip 帶底線的純文字標籤，如「版本發布」。
• input 極簡、無邊框的搜尋欄。
• hero 巨大、全出血的字型樣本，以黑色或藍色呈現，旨在展示字體。

09

文案語氣與禁用清單

• 語氣 權威、精緻且內斂。
• 標題風格 簡短、直接，通常就是字型本身的名稱。
• 按鈕文案 低調的文字連結，如「了解更多」或「閱讀文章 →」，很少使用大型按鈕。

• 不要在按鈕或卡片上使用圓角——截圖顯示為銳利的 90 度角。
• 不要在介面元素上使用陰影——截圖顯示完全平坦的表面。
• 不要使用寬泛、多彩的調色板——截圖顯示嚴格的黑、白與單一強調色。
• 不要使用裝飾性的無襯線體作為大型展示字體——截圖顯示使用粗體過渡襯線體作為樣本。
• 不要使用厚重、粗壯的邊框——截圖顯示非常細、1px 的邊框或完全無邊框。
• 不要在介面上堆砌圖示——截圖幾乎完全依賴文字與字體排印。
• 避免: 避免使用過於表達性或裝飾性的元素
• 避免: 避免使用明亮、霓虹或衝突的色彩
• 避免: 避免在主要介面元素上使用圓角

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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