精选 · 开放 · 免费
Counter Print
面向设计专业人士的极简主义、图像优先精选书店。
EditorialCurationTypographyBooksPremium
01
设计气质 DNA
精选设计书籍平面设计参考资料
平面设计文献的数字画廊
02
色彩
#1C1C1CInk
#FFFFFFBG
rgba(229,231,235,1.0)Line
严格的单色画布，让多彩的书籍封面成为主要视觉焦点。
03
字体
grotesque-sans
- display
63px · 700 - body
15px · 400
对标题尺寸使用紧凑的负字距以增强视觉冲击力。 · 仅通过字重和字号（而非颜色）建立严格的视觉层级。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
充裕的垂直内边距分隔内容区块，紧密的水平间距将相关项目分组。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgb(229,231,235)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
简洁的网格布局，依靠大尺寸高质量摄影填充画布。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素上的平滑透明度与变换过渡。
通过过渡属性实现的微妙视觉变化，可能是透明度或变换。 · 即时响应，配合标准手形光标反馈。
08
组件
- button 用于“查看全部”等次级操作的幽灵/描边按钮，采用胶囊形圆角。
- card 边缘到边缘的图像卡片，紧密嵌入网格列中，强调产品摄影。
- hero 采用双栏分割布局，展示大型产品摄影与醒目、简洁的文本分类。
09
文案语气与禁用清单
- 语气 专业、极简且高度策展化。
- 标题风格 加粗、字距紧凑、描述性强。
- 按钮文案 低调，使用清晰的功能性语言与胶囊形描边按钮。
- 勿为 UI 元素使用装饰性或衬线字体——截图显示严格的几何/无衬线字体体系。
- 勿为按钮或高亮使用明亮的强调色——截图显示严格的单色 UI，无主导性强调色。
- 勿应用厚重的投影或柔和的光晕——截图显示完全扁平的表面，无阴影使用。
- 勿为主要内容卡片使用圆角——截图显示产品图像与布局区块均为直角。
- 勿使用两端对齐或密集的大段文本——截图显示左对齐文本与充裕的垂直间距。
- 勿添加不必要的边框或分隔线——截图使用留白和网格对齐分隔区域。
- 避免: 过度营销语言
- 避免: 杂乱的布局
- 避免: 装饰性字体
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
为精选平面设计书店设计的极简主义高端电商设计。UI 采用严格的单色调色板（#FFFFFF 背景，#1C1C1C 墨色），确保多彩书籍封面保持视觉焦点。排版依赖清晰、字距紧凑的无衬线字体（Helvetica/Arial），使用加粗、大尺寸标题。关键禁忌：绝不使用装饰性字体，绝不应用厚重阴影，绝不引入与产品竞争的明亮强调色。布局为网格制，内边距充裕，次级操作使用幽灵/胶囊按钮。交互模式微妙，依赖平滑的透明度与变换过渡。
en · zh-CN · zh-TW · ja · ko