01
设计气质 DNA
技术专业面向开发者会议现代
一份高端科技会议邀请函,具备干净、现代的美学。
02
色彩
#0070f3Accent#000000Ink#ffffffBG#666666Mutedrgba(0, 0, 0, 0.1)Line在干净的白色画布上,运用高对比度和单一的亮蓝色点缀。
03
字体
- display
56px · 700 - heading
48px · 700 - body
16px · 400 - caption
14px · 400
04
间距
4px8px16px24px32px48px64px96px基于 4px 的统一垂直节奏。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(0, 0, 0, 0.1)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
单栏居中布局,垂直层次分明。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互文本链接在 hover 时出现微妙的下划线或颜色变化。 · 标准的按钮点击反馈。
08
组件
- button 极简的、基于文本的按钮,使用大写标签或简单的描边容器。
- card 作为独立组件不明显。
- chip 带有文本的微型描边药丸形元素(例如 'New')。
- input 未出现。
- hero 全宽 Hero 区域,包含大标题、等宽体正文以及图片拼贴。
09
文案语气与禁用清单
- 语气 专业、清晰、以开发者为中心。
- 标题风格 粗体、大写或大尺寸的无衬线字体。
- 按钮文案 大写的等宽体文本,通常置于简洁的边框内。
- 避免使用渐变——截图显示为纯色和锐利的几何形状。
- 避免使用装饰性字体——截图仅使用了干净的 grotesque-sans 和等宽字体。
- 避免到处使用圆角——截图使用的是直角或非常小的圆角半径。
- 避免使用投影来营造层次感——截图依赖于扁平设计和留白。
- 避免使用多种点缀色——截图仅使用单一的亮蓝色点缀。
- 避免使用两端对齐的文本——截图使用的是左对齐或居中文本。
- 避免: 俏皮的语言
- 避免: 过度的装饰
- 避免: 复杂的渐变
11
System Prompt
这是一个 Next.js 开发者会议的着陆页。设计干净、专业、面向开发者,采用纯白背景、黑色文字和单一的亮蓝色(#0070f3)点缀。排版使用粗体 grotesque-sans 作为展示字体,等宽字体用于正文/说明文字。关键禁止事项:绝不使用渐变,避免装饰性字体,保持直角。布局居中且宽敞,通过粗体排版和留白策略来强调内容层次。