精選 · 開放 · 免費

Typewolf

一個精緻的編輯平台，用於探索和策劃現代排版。

editorialtype
Typewolf 網站截圖
↓ 下載設計系統包 (22 MB)在 OpenDesign 中開啟

原站: https://www.typewolf.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

排版策展參考編輯排版

一個為排版愛好者打造的精緻、精心策劃的圖書館。

02

色彩

#2e2c2cInk
#443235Ink soft
#e6dddeBG
#f8f5f5BG soft
#654a4eMuted
rgba(101, 74, 78, 0.3)Line

溫暖、柔和的大地色調調色盤，以深棕色墨水色為基調，並使用白色卡片與細微陰影創造層次感。

03

字型

transitional-serif · humanist-sans

所有主要的展示與標題文字均使用過渡襯線體，以維持精緻的編輯美學。 · 導覽標籤、小型元數據文字及大寫的 UI 元素，則使用人文主義無襯線體。 · 大型展示文字與導覽標籤應保持緊湊的負字距。

04

間距

4px
8px
16px
24px
32px
48px
64px
96px

基於 4px 網格的一致間距，為區塊之間與元件內部提供充足的呼吸空間。

05

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

sm · 4px
md · 0px
lg · 0px
pill · 999px

1px solid rgba(101, 74, 78, 0.3)

rgba(145, 106, 112, 0.15) 0px 6px 24px 0px

06

版面

1280container
12columns
24pxgutter
768 / 1024breakpoints

一個置中的單欄版面，帶有顯著的標頭，接著是響應式的雙欄內容卡片網格。

07

動效與互動

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

hover 狀態時的平滑背景與色彩過渡。 · 透過 box-shadow 遷移實現的細微高度變化。

透過背景色或文字顏色的細微變化來指示可互動性。 · 即時的視覺反饋，並帶有平滑的過渡效果。

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

Typewolf — 桌面首屏（hero）
桌面首屏（hero）
Typewolf — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typewolf — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typewolf — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typewolf — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typewolf — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typewolf — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typewolf — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typewolf — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typewolf — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typewolf — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typewolf — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typewolf — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typewolf — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typewolf — 移动首屏
移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

這是一個專注於排版策展與探索的精緻編輯平台。其設計 DNA 以溫暖、柔和、低飽和度的大地色調調色盤為基調，使用柔軟的灰粉色背景與深棕色墨水色作為文字。主要排版大量依賴過渡襯線體來呈現優雅的展示標題，並與用於大寫導覽與元數據的粗體人文主義無襯線體形成對比。白色卡片元件搭配細微的暖色陰影，創造了無需刺眼邊框的層次深度。關鍵的禁忌：不要使用鮮豔的霓虹色彩，不要在主要展示文字上使用幾何無襯線體，不要使用厚重的 3D 效果，不要在內文中使用大寫字母，不要創造過於密集的版面。整體美學是精緻、寧靜，並高度專注於可讀性與排版卓越性。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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