01
设计气质 DNA
开发沙箱扩展代码基础设施
云端的深色模式终端
02
色彩
#d6fb41Accent#f0f0f0Ink#a3a3a3Ink soft#0e0e0eBG#161616BG soft#1d1d1dBG quiet#858585Mutedrgba(52, 52, 52, 1)Line在深色中性背景上使用高对比度霓虹强调色
03
字体
- display
56px · 500 - title
32px · 500 - subtitle
22px · 400 - body
16px · 400
为大型展示标题使用紧凑的负字距 · 保持文字与背景之间的高对比度
04
间距
4px8px16px24px32px48px64px96px4px 基础网格
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 6px
lg · 10px
pill · 9999px
使用 #252525 的 1px 实线边框
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中单列布局，交替使用深色和霓虹色背景区域
07
动效与交互
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
悬停状态的平滑透明度过渡 · 交互元素的微妙颜色过渡
微妙的颜色变化或透明度调整 · 即时的视觉反馈
08
组件
- button 主按钮使用强调色背景（#d6fb41）搭配深色文字（#0e0e0e）和药丸形状；次按钮采用描边样式
- card 霓虹色背景上的功能卡片，黑色文字，无可见边框或阴影
- chip 用于标签（如 'New'）的小型强调色徽章
- input 深色背景和细微边框的标准文本输入框
- hero 深色背景上的大尺寸排版标题，辅以说明文字和主要行动号召按钮
09
文案语气与禁用清单
- 语气 技术性、专业、直接
- 标题风格 粗体、简洁的陈述，聚焦于扩展性和安全性
- 按钮文案 行动导向的短语，如 '免费开始' 和 '试用 CodeSandbox SDK'
- 不要使用柔和、低对比度的强调色——截图显示主强调色是高饱和度的霓虹黄绿色（#d6fb41）
- 不要为标题使用衬线字体——截图显示是简洁、现代的无衬线字体系列
- 不要使用过多的阴影或渐变——截图显示是扁平化设计，层次极简
- 不要为主界面使用亮白色背景——截图显示主要是深色背景（#0e0e0e）
- 不要为标题使用宽字距——截图显示展示文本使用了紧凑的负字距（-2.8px）
- 不要使用多种强调色——截图显示是严格的双色调配色：深色中性色加单一霓虹强调色
- 不要为所有元素使用圆角——截图显示是直角边缘与细微圆角（最大 10px）的混合使用
- 避免: 营销术语
- 避免: 模糊的承诺
- 避免: 过于复杂的句子
- 避免: 不必要的感叹号
- 避免: 软弱或被动的措辞
10
包内真实截图
11
System Prompt
这是一个面向开发者的工具网站，用于基于云端的代码执行平台。设计采用深色模式美学，使用近黑色背景（#0e0e0e）和单一、高饱和度的霓虹黄绿色强调色（#d6fb41）。字体是简洁的无衬线字体类别，大型展示标题使用紧凑的负字距。关键禁忌：避免低对比度的强调色、不使用衬线字体、避免过度的阴影或渐变、不使用亮白色背景、避免标题使用宽字距、以及不引入多种强调色。布局是居中单列结构，通过交替背景区域建立视觉层次。