01
设计气质 DNA
DevSecOps企业级Agentic AI编排平台
一个用于软件交付的企业指挥中心
02
色彩
#FC6D26Accent#171321Ink#74717AInk soft#FFFFFFBG#F2F1F5BG soft#1F1C2EBG quiet#E8E7EBMutedrgba(232, 231, 235, 1)Line以浅色背景为主，采用高对比度的简洁界面，搭配醒目的橙色强调色，并使用深色表面进行视觉突出。
03
字体
- display
96px · 660 - display-lg
64px · 660 - display-md
32px · 660 - body
16px · 400 - body-sm
14px · 400
大尺寸显示文本采用紧凑的字间距，呈现大胆、现代的视觉效果 · 标题使用高字重（660）以建立清晰的视觉层次 · 正文统一采用 1.5 的行高以保持可读性
04
间距
4px8px16px24px32px48px64px96px基于 4px 的基础网格，组件和布局遵循标准的空间递进规则
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 16px
pill · 999px
1px solid #E8E7EB
0px 3px 7px 0px rgba(0, 0, 0, 0.05) · 0px 13px 13px 0px rgba(0, 0, 0, 0.04) · 0px 29px 17px 0px rgba(0, 0, 0, 0.03)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
多列网格布局，采用居中容器与灵活的内容区块
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.34, 1.56, 0.64, 1)easing
交互元素（按钮、链接）采用弹性/回弹过渡效果 · 标准背景色过渡（0.2秒） · 基于 transform 的悬停效果（0.3秒）
背景色变化或 transform 效果（弹性回弹过渡） · 通过背景色过渡提供即时反馈
08
组件
- button 填充式主按钮（黑色背景，白色文字）和描边式次按钮（透明背景，黑色文字）
- card 深色背景（#1F1C2E）搭配白色文字，用于功能亮点展示和状态更新
- chip 聊天组件界面内的交互式操作标签
- input 悬浮式聊天输入框，配有专用的发送图标
- hero 全宽区块，具有醒目的渐变背景（粉色/橙色）、大号字体和主要行动号召
09
文案语气与禁用清单
- 语气 自信、权威、直接
- 标题风格 简短、有力、以价值为导向（例如：“更快交付。值得信赖。”）
- 按钮文案 以行动为导向且清晰明确（例如：“免费试用”，“申请演示”）
- 不要使用低对比度文本——示例截图展示了纯黑（#171321）与纯白（#FFFFFF）的搭配以确保最佳可读性。
- 不要使用活泼或圆润的字体——示例截图展示了结构化、几何感强的无衬线字体系统。
- 不要仅用单一颜色表示所有状态——示例截图展示了橙色（#FC6D26）强调色在黑、白基色上的适度使用。
- 不要过度使用投影效果——示例截图展示了仅在卡片和弹窗上使用非常微妙、分层的盒阴影。
- 不要对所有内容都使用固定网格——示例截图展示了可容纳全宽 hero 区块的灵活网格。
- 不要使用浅色背景来突出功能亮点——示例截图展示了深色（#1F1C2E）表面以创造视觉对比和焦点。
- 避免: 缺乏上下文的术语
- 避免: 过于正式的企业语言
- 避免: 模糊或被动的措辞
10
包内真实截图
11
System Prompt
GitLab 的视觉系统是一套简洁的企业级 SaaS 美学，其特点是高对比度的排版和醒目的橙色（#FC6D26）强调色。它使用几何无衬线字体（GitLab Sans）以营造现代、面向开发者的感受，背景主要为纯白（#FFFFFF），并使用深色（#1F1C2E）功能卡片进行视觉突出。布局依赖于严格的 4px 基础网格和充裕的间距，以保持专业的清晰度。关键的十六进制颜色值包括：用于主要文字的 #171321、用于弱化文字的 #74717A，以及用于柔和背景的 #F2F1F5。关键禁忌包括：绝不要使用低对比度文本，避免活泼的字体风格，切勿过度使用橙色强调色。该系统优先采用大胆、价值导向的标题和清晰、以行动为导向的行动号召。