精选 · 开放 · 免费

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

居中的单列布局，拥有醒目的页头，随后是响应式的2列内容卡片网格。

07

动效与交互

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

悬停状态下平滑的背景和颜色过渡。 · 通过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