OpenDesign·你的设计资产库

网页参考

Kinfolk

白色页面用极简刊头、期号标题与居中的杂志封面展示当期内容。

EditorialMagazine
Kinfolk 网站截图

理解与复用

从这份设计中借鉴什么

基于收录时的历史截图解读

设计亮点

  • 刊头与大量留白建立出版感
  • 单一封面明确当期焦点

适合什么项目

  • 独立杂志
  • 编辑出版入口

如何带进你的设计

  • 先建立期号、主题、封面的稳定顺序
  • 让正文与目录有独立导航入口

使用边界

  • 封面只展示一个截面，不能推断整本刊物的网格与字体规范
  • 仅依据已检查的历史预览；未核实现行网站、交互、精确 Tokens 或素材授权。

此解读由 Agent 编写，尚未经过人工终审；不代表原作者规范或使用授权。

01

设计气质 DNA

编辑型极简主义生活方式杂志精致

一本高端生活方式杂志将其精致的印刷美学转化为网络体验。

02

色彩

#000000Ink
#212121Ink soft
#FFFFFFBG
#DBDED5BG quiet
#333333Muted
rgba(0,0,0,1)Line

一个克制的、近乎单色的调色板，黑色文字配白色背景，使用柔和的鼠尾草绿（#DBDED5）作为微妙的背景点缀。

03

字体

didone-serif · humanist-sans

  • display56px · 400
  • heading32px · 400
  • body20px · 400
  • small13px · 400

主要的展示和标题字体使用一款 didone-serif 字族。 · UI元素、导航和说明文字使用一款干净的 humanist-sans 字族。 · 文本经常被转换为大写，用于导航和标签。 · 字间距经过微妙调整，以在不同尺寸下提升可读性。

04

间距

4px
8px
16px
20px
24px
32px
60px
170px

保持严格的垂直节奏，留白充裕，特别是使用了较大的垂直内边距（例如170px），以营造通透感和焦点。

05

表面 (圆角 / 阴影 / 边线)

sm · 2px
md · 6px
lg · 0px
pill · 50px

1px solid black，用于分隔线和部分按钮状态。

rgba(0,0,0,0.3) 0px 32px 68px 0px

06

布局

1280container
12columns
20pxgutter
768 / 1024breakpoints

一个居中的单栏布局，用于主视觉和阅读部分，过渡到用于文章列表的四栏网格。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 1, 0.5, 1)easing

用于内容揭示和图像加载的平滑透明度过渡。 · 基于变换的动画，提供微妙的交互反馈。 · 交错元素出现时的延迟动画序列。

在交互元素上采用微妙的颜色或透明度变化，保持极简感。 · 没有明显的点击反馈；交互专注于导航和内容流。

08

组件

  • button 极简的纯文本或简单带边框的按钮，通常使用大写的无衬线字体。
  • card 以图像为中心的卡片，使用柔和的灰绿色背景作为占位符，搭配小号、左对齐的无衬线元数据和衬线标题。
  • hero 一个大型、居中的构图，以杂志封面图像、醒目的衬线标题和清晰的行动号召为特色。

09

文案语气与禁用清单

  • 语气 精致、沉稳且优雅。
  • 标题风格 醒目、优雅的 didone-serif 标题，通常以大写形式设置，字间距紧凑。
  • 按钮文案 内敛的、大写的无衬线文本链接或极简的带边框按钮。
  • 不要使用亮色强调色——截图显示调色板仅限于黑色、白色和柔和的灰绿色。
  • 不要为标题使用粗体无衬线字体——截图显示标题始终使用精致的 didone-serif 字体。
  • 不要紧凑地堆砌内容——截图显示章节之间有充足的留白和宽松的垂直内边距。
  • 不要使用装饰性、 playful 的图标——截图使用极简的双线汉堡菜单。
  • 不要使用复杂、多色的背景——截图使用纯白色或单一的柔和鼠尾草绿。
  • 不要在大多数元素上使用粗重、可见的投影——截图仅对特定图像使用了单一的深色投影。
  • 避免: 避免使用鲜艳、饱和的颜色。
  • 避免: 避免使用装饰性或 playful 的字体排印。
  • 避免: 避免使用粗重的边框或复杂的投影。

10

包内真实截图

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

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

Kinfolk 是一个高端生活方式杂志网站，具有精致、极简的编辑美学。其设计基因建立在以黑色（#000000）在白色（#FFFFFF）背景上形成的鲜明单色调色板上，并以柔和的鼠尾草绿（#DBDED5）作为安静的点缀。字体排印是关键区别因素，展示标题使用 didone-serif，UI和正文使用干净的 humanist-sans。布局宽敞且居中，优先考虑大型图像和充裕的留白（例如170px垂直内边距）。关键禁忌：不要引入粗体、饱和的强调色；不要为一级标题使用无衬线字体；不要用紧凑的间距或复杂的边框挤满布局。交互是微妙的，依赖平滑的透明度和变换过渡，并使用自定义 cubic-bezier 缓动函数。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明，可复制给 Agent。