01
设计气质 DNA
创意方向叙事表达设计技术排版设计
具有温暖渐变质感的高端编辑杂志
02
色彩
#3F51B5Accent#5C6BC0Ink soft#FCE4ECBG#FFF3E0BG soft#FFF9C4BG quiet#C5CAE9Mutedrgba(63, 81, 181, 0.1)Line暖色调柔和渐变作为背景，高对比度靛蓝色用于文本与交互元素
03
字体
- display-lg
72px · 400 - display-md
48px · 400 - body-lg
24px · 400 - body-sm
16px · 400
展示型文字采用全大写或首字母大写，笔画粗细对比强烈 · 斜体变体用于强调及次级文本，如“叙事表达 + 设计 + 技术” · 文本颜色始终采用主色调靛蓝色，搭配暖色背景
04
间距
8px16px24px32px48px64px96px128px宽裕的留白，通过大量空白区域突出排版与渐变质感
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(63, 81, 181, 0.2)
0 2px 8px rgba(63, 81, 181, 0.15)
06
布局
1440container
12columns
32pxgutter
768 / 1024breakpoints
不对称结构，主名称标题左对齐，行动号召右对齐，正文位于右下方
07
动效与交互
150msmicro
300mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素的微妙hover过渡效果 · 渐变背景可能采用平滑滚动或视差效果
按钮与链接的微妙色彩或透明度变化 · 即时视觉反馈，伴随轻微缩放或阴影变化
08
组件
- button 胶囊造型，实心靛蓝色背景，白色文字配箭头图标
- card 极简风格，采用渐变背景或微弱边框
- chip 截图中未出现
- input 截图中未出现
- hero 全视口渐变背景，大尺度排版作为核心焦点
09
文案语气与禁用清单
- 语气 专业而温暖，自信且精致
- 标题风格 大字号优雅衬线排版，笔画对比强烈
- 按钮文案 清晰直接，配方向箭头图标
- 标题避免使用无衬线字体——截图显示为优雅的迪多内衬线排版
- 避免深色背景——截图显示为浅底色的暖色调柔和渐变
- 避免使用霓虹或荧光强调色——截图使用精炼的靛蓝色作为主强调色
- 避免创建布满众多UI元素的杂乱布局——截图展示宽裕留白与极简组件
- 避免使用生硬投影或粗重轮廓——截图采用微妙柔和的阴影
- 避免正文使用全大写——截图在次级文本中混合使用大小写与斜体
- 避免: 过度技术化术语
- 避免: 侵略性或炫目动画
- 避免: 杂乱布局
- 避免: 标题使用无衬线字体
- 避免: 深色背景
- 避免: 霓虹或高饱和度强调色
11
System Prompt
这是为创意总监设计的作品集网站，定位在叙事表达、设计与技术的交汇处。视觉标识依赖从粉色到黄色的暖色渐变背景，搭配深靛蓝色（#3F51B5）的精炼迪多内衬线排版。布局极简且具有编辑感，优先采用大尺度排版与宽裕留白，而非复杂UI组件。胶囊造型的“联系我们”按钮提供主要行动号召。关键约束：展示型文字绝不使用无衬线字体，绝不引入深色背景，绝不添加与排版及渐变纹理竞争的装饰元素。设计应通过克制的交互与微妙动效，保持其宁静、精致且高端的质感。