精選 · 開放 · 免費

Typotheque

頂尖字體鑄造所，以簡潔、圖片豐富的介面，展示全球字體系統與編輯專案。

01

設計氣質 DNA

一場數位展覽，呈現字體工藝與語言多樣性

02

色彩

以高對比的黑白為基底，點綴鮮豔飽和的強調色塊

03

字型

humanist-sans · monospace

• display40px · 700
• headline20px · 400
• body16px · 400

內文使用標準 16px 基礎尺寸，行高 1.0 · 標題使用粗體 40px 尺寸，寬鬆行高 1.1 · UI 標籤與次要文字使用稍小的 13px 尺寸 · 小型大寫字母或標籤的字間距略微增加

04

間距

主要區塊周圍留有充裕白邊，標準內容區塊保持一致的 20px padding

05

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

細薄 1px 邊框，使用柔和灰色，主要用於結構分隔

06

版面

多欄網格用於瀏覽字體收藏，上方為全幅主視覺圖片，下方為大型、色彩鮮豔的卡片區塊

07

動效與互動

互動元素的背景色平滑過渡（0.25s） · hover 時的細微 opacity 與 transform 變化（0.2s）

背景色過渡與細微 opacity 調整 · 立即的視覺回應或平滑過渡至連結區段

08

組件

• button 膠囊形狀，border-radius 為 9999px，提供實心與透明兩種樣式
• card 大型圓角矩形區塊（border-radius 24px），搭配大膽、飽和的背景色
• chip 資料視覺化網格中使用的縱向文字標籤
• input 極簡搜尋介面，以簡約放大鏡圖示呈現
• hero 全幅高解析度攝影風景圖，底部覆蓋細微深色漸層以確保文字可讀性

09

文案語氣與禁用清單

• 語氣 權威、具教育性，且專注於全球包容性
• 標題風格 直接、描述性且高度易讀（例如：「全球字體」、「所有字體」）
• 按鈕文案 低調且以行動為導向，常搭配箭頭圖示（例如：「了解更多 →」）

• 不要使用通用無襯線字體——截圖顯示一種具有獨特特質的人文主義無襯線字體
• 不要使用剛性的 8px 網格——截圖顯示靈活的間距，使用 10、20、30 與 80px 等數值
• 不要將按鈕做成矩形——截圖顯示始終為膠囊形狀、border-radius 9999px 的按鈕
• 不要使用大型陰影——截圖顯示完全平坦的表面，無陰影深度
• 不要使用小而密集的文字——截圖顯示寬鬆行高（1.0 至 1.3）與清晰的字體尺寸
• 不要只依賴單一背景色——截圖顯示純白、純黑與鮮豔飽和色塊的混合使用
• 避免: 過度激進的行銷術語或誇張修辭
• 避免: 雜亂或視覺嘈雜的 UI 元素
• 避免: 不同區塊間不一致的字體排印

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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