精选 · 开放 · 免费
Footer
一个专注于大胆排版和编辑式呈现的精选设计画廊。
designgallery
01
设计气质 DNA
策展编辑式页脚设计画廊极简
一个简洁的、以排版为主的设计画廊策展平台
02
色彩
#242424Ink
rgba(36,36,36,0.64)Ink soft
#FFFFFFBG
#F2F2F2BG soft
#737373Muted
rgba(36,36,36,0.12)Line
严格单色系，白色留白与深色文字间保持高对比度
03
字体
grotesque-sans · humanist-sans
主文本使用18px，字间距-0.54px · 次级文本使用14px，字间距-0.42px · 标题使用600字重 · 正文使用400字重
04
间距
4px
8px
12px
16px
24px
40px
60px
一致的间距递增：4, 8, 12, 16, 24, 40, 60
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 1600px
pill · 1600px
卡片和按钮使用1px solid rgba(36,36,36,0.12)边框
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
用于画廊卡片的多列网格布局
07
动效与交互
150msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover时细微的淡入淡出过渡 · 平滑的颜色和背景色变化 · 状态变化时的不透明度过渡
颜色和背景色在0.15秒内过渡 · 标准指针光标
08
组件
- button 胶囊形状，1600px border radius，黑色或白色填充
- card 以图片为主，边框极简，排版清晰
- chip 用于筛选的小型圆角标签
- hero 大型排版引言，伴有细微动画
09
文案语气与禁用清单
- 语气 专业、简洁、策展感
- 标题风格 粗体，紧凑字间距，大写或首字母大写
- 按钮文案 直接且以行动为导向，使用胶囊形状按钮
- 不要使用鲜艳的点缀色——截图显示为严格单色系调色板
- 除胶囊按钮外，不要使用圆角——截图显示卡片为直角
- 不要使用投影——截图显示为平面、边框定义的界面
- 不要使用装饰性字体——截图使用简洁的 grotesque-sans 和 humanist-sans 无衬线字体
- 不要创建密集的布局——截图使用大量留白和清晰的层级
- 不要使用多种字体族——截图主要依赖 Inter 字体，并使用不同字重
- 避免: 杂乱的界面
- 避免: 过多的装饰性元素
- 避免: 模糊的措辞
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
一个极简的设计策展画廊，专注于网页设计作品的编辑式呈现。调色板严格单色，使用 #FFFFFF 背景、#F2F2F2 柔和背景、#242424 主要文字和 rgba(36,36,36,0.64) 次级文字。排版使用 Inter（humanist-sans 用于正文，grotesque-sans 用于展示），字间距紧凑。关键禁忌：避免鲜艳的点缀色，避免圆角（胶囊按钮除外），避免投影，避免装饰性字体，避免密集布局，避免多种字体族。设计强调简洁的线条、充足的间距和清晰的排版层级，以展示精选的设计作品。
en · zh-CN · zh-TW · ja · ko