01
设计气质 DNA
学院培养住房研究IDHEAL
一本高端的学术期刊或艺术展览图录
02
色彩
#FF00BCAccent#000000Ink#FFFFFFBG#E5E5E5BG soft#D9D9D9BG quiet#51633CMutedrgba(0,0,0,1)Line高对比度的单色基底，搭配用于分类的鲜明、彩色强调色
03
字体
- display
56px · 700 - body
16px · 400
UI 元素和标题使用 Helvetica Neue · 叙事性正文使用 New Century Schoolbook
04
间距
4px8px16px24px32px48px64px96px基于网格，垂直间距一致以提高可读性
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
包内真实截图
11
System Prompt
为一个学术或研究机构设计高度结构化的编辑界面。使用严格的网格，其中粗体、超大号的排版既作为内容也作为布局结构。主色调为单色（黑色、白色、#E5E5E5），搭配如 #FF00BC 这样的鲜明强调色。排版应形成对比：标题使用粗体无衬线字体，正文使用精致的过渡衬线字体。避免居中布局、厚重的投影以及俏皮或圆润的 UI 元素。保持简洁、高对比度且富有知性的美感。