精选 · 开放 · 免费
Idheal Fr
IDHEAL 运用粗体、结构性的排版和简洁的编辑网格,展示关于住房和城市规划的研究。
EditorialTypographyCurationCleanGrid
01
设计气质 DNA
学院培养住房研究IDHEAL
一本高端的学术期刊或艺术展览图录
02
色彩
#FF00BCAccent
#000000Ink
#FFFFFFBG
#E5E5E5BG soft
#D9D9D9BG quiet
#51633CMuted
rgba(0,0,0,1)Line
高对比度的单色基底,搭配用于分类的鲜明、彩色强调色
03
字体
grotesque-sans · transitional-serif · monospace
- display
56px · 700 - body
16px · 400
UI 元素和标题使用 Helvetica Neue · 叙事性正文使用 New Century Schoolbook
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
基于网格,垂直间距一致以提高可读性
05
表面 (圆角 / 阴影 / 边线)
sm · 10px
md · 15px
lg · 38px
pill · 999px
用于标签的细实线边框(1px solid 黑色或彩色)
4px 2px 4px rgba(0,0,0,0.2) · 2px -1px 6px rgb(237,237,237)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
一个结构性网格,其中巨大的字母划分内容区块
07
动效与交互
200msmicro
300mssmall
800msmedium
lineareasing
背景颜色和字号变化的平滑过渡效果
可点击元素上细微的背景颜色变化 · 即时状态变化
08
组件
- button 带实线边框和细微阴影的轮廓药丸按钮
- card 由结构线分隔的扁平内容块
- chip 彩色圆点后跟小写文本的圆角药丸标签
- input 极简风格,可能是轮廓或下划线样式
- hero 一个巨大的排版组合,字母横跨整个视口
09
文案语气与禁用清单
- 语气 学术、权威、精确
- 标题风格 粗体、大写、高度结构化
- 按钮文案 简洁、直接,通常为小写或句首字母大写
- 不要为主要内容容器使用柔软的圆角——截图显示边缘锐利且网格线严格
- 不要使用多彩的渐变背景——截图显示白色、灰色或黑色的扁平、纯色区块
- 不要使用厚重的投影来营造深度——截图显示非常轻微、有方向性的投影或完全没有投影
- 不要使用居中的、流动的布局——截图显示一个严格的、不对称的网格,字母构成列
- 不要为主要内容的品牌标识使用小写——截图显示“IDHEAL”为全大写
- 不要将导航隐藏在复杂的 UI 后面——截图显示一个带有图标的简单汉堡菜单
- 避免: 俏皮语言
- 避免: 过度装饰性元素
- 避免: 杂乱的布局
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
为一个学术或研究机构设计高度结构化的编辑界面。使用严格的网格,其中粗体、超大号的排版既作为内容也作为布局结构。主色调为单色(黑色、白色、#E5E5E5),搭配如 #FF00BC 这样的鲜明强调色。排版应形成对比:标题使用粗体无衬线字体,正文使用精致的过渡衬线字体。避免居中布局、厚重的投影以及俏皮或圆润的 UI 元素。保持简洁、高对比度且富有知性的美感。
en · zh-CN · zh-TW · ja · ko