01
设计气质 DNA
编辑式生活方式杂志室内文化
一本精致的印刷杂志经过网页化改造，具有大胆、独特的视觉冲击力。
02
色彩
#FFEE42Accent#000000Ink#F8F4ECBG#767676Mutedrgba(0,0,0,1)Line柔和、温暖的中性色主导画布，通过一个单一、强烈的高饱和度黄色来点缀关键交互元素。
03
字体
- display
42px · 700 - h2
24px · 700 - body
16px · 400
使用高对比度的过渡衬线字体用于主要标题，以唤起印刷杂志的格调。 · 使用几何人文主义无衬线字体用于UI元素、导航和正文，以确保清晰的易读性。 · 对无衬线文本应用宽字间距，以增强其现代、通透的感觉。
04
间距
4px8px16px24px32px48px64px96px充足的内边距和留白，以支持编辑式布局并让图片有呼吸的空间
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
极简，使用细黑色边框用于输入框和导航下划线
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
经典的杂志网格布局，包含一个突出的全宽主图和一个用于文章卡片的结构化列布局。
07
动效与交互
150msmicro
300mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
淡入模态框 · 交互元素的平滑过渡
文本链接上微妙的颜色变化或下划线 · 交互元素上的标准指针光标
08
组件
- button 极简的纯文本按钮，采用药丸形圆角边框。
- card 内容卡片，包含大型编辑式摄影图片、衬线标题和无衬线元数据。
- chip 简单的文本链接或标签式元素。
- input 高对比度的圆角药丸形输入框，黑色边框置于鲜艳的黄色背景上。
- hero 全视口摄影主图，中央带有一个醒目的图形模态框覆盖层。
09
文案语气与禁用清单
- 语气 精致、亲切且有文化格调
- 标题风格 直接、大胆且略带内敛，依靠排版来传达冲击力。
- 按钮文案 清晰、直接，并融入编辑式内容流中。
- 不要使用纯白色背景——截图显示基底色是暖白色（#F8F4EC）
- 不要让所有按钮都使用亮黄色——截图显示黄色严格保留给模态框覆盖层使用
- 不要用无衬线字体做主要标题——截图显示“最新文章”使用了高对比度的过渡衬线字体
- 不要用圆角方正的形状做输入框——截图显示使用了极端的药丸形圆角
- 不要用密集的UI图案让布局显得拥挤——截图显示的是干净、有呼吸感的编辑网格
- 不要给UI卡片添加复杂的投影——截图显示是完全扁平、无阴影的组件
- 避免: 激进的营销语言
- 避免: 喧闹、冲突的霓虹色调
- 避免: 厚重的投影
- 避免: 过于花哨或圆润的UI组件
10
包内真实截图
11
System Prompt
设计一个受Apartamento杂志启发的精致编辑式网站。使用暖白色背景（#F8F4EC）和黑色（#000000）油墨色。字体应主要使用过渡衬线字体，并为导航和正文使用几何人文主义无衬线字体。谨慎地使用一个大胆、鲜艳的黄色（#FFEE42）作为高对比度强调色，用于如通讯模态框等关键覆盖层，但其余界面应保持克制和优雅。布局应是一个通透的编辑网格，拥有充足的留白。切勿使用投影、喧闹的渐变或激进的营销语言。整体保持冷静、有文化格调且高端的感觉。