精選 · 開放 · 免費
Variable Fonts
一個乾淨、以排版為核心的可變字體與品牌案例研究資源中心。
TypographyEditorialCleanCurationReference
01
設計氣質 DNA
排版可變字體字型鑄造廠專業知識設計
精緻的設計圖書館與資源中心
02
色彩
#1A73E8Accent
#1E242CInk
#576579Ink soft
#FFFFFFBG
#FCFCFDBG soft
#E7EAEABG quiet
rgba(231, 234, 238, 1)Line
乾淨、高對比度的中性畫布，搭配單一功能性藍色強調色
03
字型
grotesque-sans · monospace
- display
56px · 500 - h2
24px · 500 - body
16px · 400
使用標準系統後備字型堆疊（Helvetica、Arial）以確保 UI 渲染一致性 · 維持模組化比例以建立清晰的排版層級 · 內文字重維持 400 以獲得最佳可讀性
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
標準 4px 網格系統，搭配一致的 24px 間距
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 16px
pill · 999px
1px solid #E7EAEA
0px 1px 6px rgba(0, 0, 0, 0.06) · 0px 11px 15px rgba(0, 0, 0, 0.05)
06
版面
1280container
3columns
24pxgutter
768 / 1024breakpoints
響應式三欄卡片網格，於行動裝置上堆疊顯示
07
動效與互動
220msmicro
300mssmall
500msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
卡片懸停時細膩的陰影與變換轉場 · 內容載入時的平順淡入效果
互動卡片懸停時增加陰影深度並輕微縮放 · 透過細膩的狀態變化提供即時視覺回饋
08
組件
- button 功能性藍色強調按鈕，白色文字並帶有輕微圓角
- card 以圖片為主的卡片，具 16px 圓角與細膩的懸停陰影
- chip 以點號分隔的文字式類別標籤
- input 極簡搜尋輸入欄位
- hero 大型、左對齊的排版首頁區塊
09
文案語氣與禁用清單
- 語氣 專業、權威且具教育性
- 標題風格 粗體、直接且以主題為核心
- 按鈕文案 清晰且行動導向（例如：「洽詢銷售團隊」）
- 勿使用過度裝飾性的襯線字體 — 截圖顯示為乾淨的 grotesque-sans 系統
- 勿添加厚重陰影 — 截圖僅顯示非常細膩的 box-shadow
- 勿將所有文字置中 — 截圖顯示標題與內文採用左對齊
- 勿使用多種強調色 — 截圖僅顯示單一功能性藍色
- 勿在長篇文字中使用過緊行高 — 截圖顯示舒適的 1.5 行高
- 勿在所有元素上使用圓角 — 截圖顯示銳利與圓角卡片混用
- 避免: 避免過度口語化的語言或術語
- 避免: 避免雜亂的版面設計分散對排版的注意力
- 避免: 避免不必要的動效干擾閱讀
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個專業的排版資源中心與字型鑄造廠網站。採用乾淨、高對比度的調色盤，以白色（#FFFFFF）與深海軍藍墨色（#1E242C）為核心，搭配單一功能性藍色強調色（#1A73E8）用於主要操作。排版採用標準 groteske-sans 類別字型作為顯示與內文字型，使用 Helvetica 與 Arial 後備字型堆疊。版面為寬敞、左對齊的結構，保留充足留白。關鍵設計規則：堅持單一強調色系統、保持乾淨的排版層級，並使用細膩、功能性的陰影而非厚重裝飾性陰影。避免雜亂的 UI 或過於俏皮的元素，以免削弱其權威、教育性的語調。
en · zh-CN · zh-TW · ja · ko