精选 · 开放 · 免费
Eye on Design
一个编辑设计博客，以独特的粉绿配色方案呈现精选文章。
editorialdesign
01
设计气质 DNA
设计出版策展视觉文化
一本高端数字设计杂志，拥有简洁的编辑式布局。
02
色彩
#FF8C8CAccent
#000000Ink
#524B48Ink soft
#FFFFFFBG
#ECE2E2BG quiet
rgba(0,0,0,1.0)Line
以洁净的白色画布为基础，突出粉色强调色，搭配高对比度的黑色字体。
03
字体
grotesque-sans · humanist-sans
- display
44px · 700 - body
16px · 400
标题使用粗体 grotesque-sans · 正文使用简洁的 humanist-sans · 标签采用大写字母并增加字间距
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
保持一致的垂直韵律，各区块间留有充足间距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 4px
lg · 4px
pill · 999px
特色元素使用 2px 实线黑色边框，其余元素尽量简化。
06
布局
1280container
3columns
24pxgutter
768 / 1024breakpoints
文章卡片采用三列网格，主要内容区域为单列布局。
07
动效与交互
150msmicro
300mssmall
300msmedium
ease-in-outeasing
交互元素采用平滑过渡效果
链接与按钮的颜色过渡。 · 即时响应。
08
组件
- button 简洁的文本链接或小号大写标签。
- card 包含图片、分类标签、标题和简短摘要。
- chip 粉色的大写分类标签。
- input 搜索功能集成于导航栏中。
- hero 采用粗体标题和图片的大型特色文章展示区。
09
文案语气与禁用清单
- 语气 专业、权威，同时平易近人且引人入胜。
- 标题风格 直接、信息明确且有力。
- 按钮文案 低调且功能性强。
- 避免使用拥挤的布局——截图显示元素间留有充足、洁净的间距
- 避免使用装饰性字体——截图显示使用了简洁、功能性的 grotesque 与 humanist 无衬线字体
- 避免使用深色背景——截图显示以白色背景为主
- 避免使用微妙的渐变——截图显示采用纯色色块（如粉色强调色）
- 避免使用低对比度文本——截图显示在白色背景上使用高对比度的黑色文本
- 避免隐藏导航——截图显示导航元素持久且清晰
- 避免: 过于随意的语言
- 避免: 分散内容注意力的装饰性元素
- 避免: 拥挤的布局
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个编辑设计出版网站。采用简洁的三列网格布局，留有充足间距，并使用高对比度排版。主色调为鲜亮的粉色（#FF8C8C），用于强调和分类标签，搭配黑色（#000000）标题和白色（#FFFFFF）背景。字体依赖于 grotesque-sans 和 humanist-sans 类别。关键设计约束：避免拥挤的布局、装饰性字体和低对比度文本。保持专业、权威的语调，同时确保视觉呈现简洁并聚焦于内容。
en · zh-CN · zh-TW · ja · ko