01
设计气质 DNA
开发者平台网站部署基础设施
面向Web开发者的现代化专业工作坊。
02
色彩
#32D3B0Accent#FFFFFFInk#545A61Ink soft#040B10BG#E9EBEDBG soft#F7F7F9BG quiet#89DDFFMutedrgba(35,41,44,1)Line以暗色模式为主，搭配高对比度蓝绿色强调色，用于行动号召与开发者导向的视觉焦点。
03
字体
- display
64px · 700
04
间距
4px8px12px16px24px32px48px64px96px基于4px网格的统一间距系统
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid
0px 16px 24px 0px rgba(0,0,0,0.07) · 0px 6px 30px 0px rgba(0,0,0,0.06)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
采用暗色首屏与浅色内容区域的多栏布局
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.33, 1, 0.68, 1)easing
悬停时平滑的背景色过渡
按钮与链接的微妙背景色变化 · 最小化反馈
08
组件
- button 圆润药丸形状，实心填充或描边样式
- card 用于功能与推荐内容的简洁边框卡片
- chip 极简标签设计
- input 简洁描边文本输入框
- hero 搭配暗色背景与趣味线条插画的大字号标题
09
文案语气与禁用清单
- 语气 专业、鼓励且直接
- 标题风格 粗体、行动导向且清晰
- 按钮文案 突出、圆润且高对比度
- 避免使用衬线字体——截图显示所有文本均采用无衬线体
- 避免使用柔和或淡彩色板——截图显示深色背景上的高对比度蓝绿色与白色
- 避免按钮使用尖锐的直角——截图显示完全圆润的药丸形状
- 避免使用厚重的投影效果——截图显示微妙、柔和的阴影
- 避免使用复杂渐变——截图主要采用纯色与简单线性渐变
- 避免主标题使用过小字号——截图显示大号、粗体的展示文本
- 避免: 模糊的营销术语
- 避免: 过于复杂的句式
10
包内真实截图
11
System Prompt
Netlify是面向开发者的SaaS网站部署平台。其设计采用暗色模式主界面，深蓝蓝黑背景，搭配鲜明的蓝绿色强调色（#32D3B0）与干净的白色文字。字体排印方面，展示标题使用几何无衬线体，正文使用人文主义无衬线体，代码片段使用等宽字体。关键禁忌包括避免衬线字体、避免柔和淡彩色板、避免尖锐按钮边角、避免厚重阴影、避免复杂渐变，以及避免使用过小的标题字号。布局宽敞、整洁且可读性极高，旨在传达速度、可靠性与技术精湛感。