精选 · 开放 · 免费

GitLab

GitLab 是一个面向 DevSecOps 的智能编排平台，定位为企业软件交付的安全、一体化解决方案。

01

设计气质 DNA

一个用于软件交付的企业指挥中心

02

色彩

以浅色背景为主，采用高对比度的简洁界面，搭配醒目的橙色强调色，并使用深色表面进行视觉突出。

03

字体

geometric-sans · monospace

• display96px · 660
• display-lg64px · 660
• display-md32px · 660
• body16px · 400
• body-sm14px · 400

大尺寸显示文本采用紧凑的字间距，呈现大胆、现代的视觉效果 · 标题使用高字重（660）以建立清晰的视觉层次 · 正文统一采用 1.5 的行高以保持可读性

04

间距

基于 4px 的基础网格，组件和布局遵循标准的空间递进规则

05

表面 (圆角 / 阴影 / 边线)

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

布局

多列网格布局，采用居中容器与灵活的内容区块

07

动效与交互

交互元素（按钮、链接）采用弹性/回弹过渡效果 · 标准背景色过渡（0.2秒） · 基于 transform 的悬停效果（0.3秒）

背景色变化或 transform 效果（弹性回弹过渡） · 通过背景色过渡提供即时反馈

08

组件

• button 填充式主按钮（黑色背景，白色文字）和描边式次按钮（透明背景，黑色文字）
• card 深色背景（#1F1C2E）搭配白色文字，用于功能亮点展示和状态更新
• chip 聊天组件界面内的交互式操作标签
• input 悬浮式聊天输入框，配有专用的发送图标
• hero 全宽区块，具有醒目的渐变背景（粉色/橙色）、大号字体和主要行动号召

09

文案语气与禁用清单

• 语气 自信、权威、直接
• 标题风格 简短、有力、以价值为导向（例如：“更快交付。值得信赖。”）
• 按钮文案 以行动为导向且清晰明确（例如：“免费试用”，“申请演示”）

• 不要使用低对比度文本——示例截图展示了纯黑（#171321）与纯白（#FFFFFF）的搭配以确保最佳可读性。
• 不要使用活泼或圆润的字体——示例截图展示了结构化、几何感强的无衬线字体系统。
• 不要仅用单一颜色表示所有状态——示例截图展示了橙色（#FC6D26）强调色在黑、白基色上的适度使用。
• 不要过度使用投影效果——示例截图展示了仅在卡片和弹窗上使用非常微妙、分层的盒阴影。
• 不要对所有内容都使用固定网格——示例截图展示了可容纳全宽 hero 区块的灵活网格。
• 不要使用浅色背景来突出功能亮点——示例截图展示了深色（#1F1C2E）表面以创造视觉对比和焦点。
• 避免: 缺乏上下文的术语
• 避免: 过于正式的企业语言
• 避免: 模糊或被动的措辞

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko