01
设计气质 DNA
协作专业开发者中心可信赖创新
一台高端开发者工作站，既强大又平易近人
02
色彩
#238636Accent#f0f6fcInk#c9d1d9Ink soft#0d1117BG#161b22BG soft#21262dBG quiet#8b949eMutedrgba(240,246,252,0.1)Line深色模式优先，深海军蓝背景上使用高对比度文字，并以鲜明的绿色作为主要操作的强调色
03
字体
- display
56px · 500 - body
16px · 400
标题使用 500 字重，并带有轻微的负字间距 · 正文保持 1.5 行高，确保舒适的阅读节奏 · 界面演示中的代码示例使用等宽字体
04
间距
4px8px16px24px32px48px64px96px采用一致的 4px 基础单位，各区块间保持宽松的垂直间距以创造呼吸感
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(240,246,252,0.1) 用于实现微妙的视觉分隔
0 4px 12px rgba(0,0,0,0.3) · 0 8px 24px rgba(0,0,0,0.4)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中的单栏首屏区搭配全宽导航栏，其后为带插画的代码演示部分
07
动效与交互
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
导航项上细腻的悬停状态 · 交互元素间的平滑过渡
交互元素的颜色变化与细微缩放 · 颜色变化带来的即时视觉反馈
08
组件
- button 两种样式：实心绿色用于主要操作，描边透明用于次要操作
- card 深色卡片，带微妙边框和圆角，用于界面演示
- chip 标签页式选项片，用于代码编辑器演示中的文件导航
- input 简洁的白色输入框，带有占位符文本和集成的绿色按钮
- hero 全宽深色背景，居中放置文本、电子邮件输入框和 3D 插画元素
09
文案语气与禁用清单
- 语气 专业而不失亲和力，自信但不自夸
- 标题风格 清晰、以利益为中心的陈述，强调协作与创新
- 按钮文案 直接、面向行动的语言（‘注册’、‘试用 GitHub Copilot’）
- 不要使用浅色背景——截图显示主背景为深海军蓝（#0d1117）
- 不要为主要操作使用明亮的强调色——截图显示‘注册’按钮使用绿色（#238636）
- 不要使用衬线字体——截图显示所有文字元素均使用无衬线字体
- 不要使用纤细、低对比度的文字——截图显示深色背景上为高对比度的白色文字
- 不要在 UI 中使用复杂的渐变——截图显示仅在 3D 插画中使用微妙渐变
- 不要使用直角——截图显示一致使用圆角（8-12px 半径）
- 不要使用狭小、局促的间距——截图显示宽松的垂直与水平间距
- 避免: 疏远初学者的技术术语
- 避免: 过于随意或戏谑的语言，会削弱专业性
- 避免: 具有侵略性、令人反感的推销用语
11
System Prompt
GitHub 主页呈现了一个专业的开发者平台，背景为深海军蓝（#0d1117），文字为高对比度的白色（#f0f6fc），主要操作使用绿色（#238636）作为强调色。设计上对所有文本使用无衬线字体，对代码示例使用等宽字体，并始终保持宽松的间距。关键元素包括居中的首屏区（含电子邮件注册）、带 3D 插画的代码编辑器演示以及清晰的导航。关键设计约束：保持深色模式优先，确保高对比度以保证可读性，绿色仅用于主要操作且需克制使用，保持界面整洁专业。避免使用浅色背景、纤细低对比度的文字、UI 元素中的复杂渐变、直角或局促的间距，以免破坏其面向高端开发者的精致美感。