精選 · 開放 · 免費

GitLab

GitLab 是一個用於 DevSecOps 的智慧編排平台，定位為企業軟體交付的安全、全方位解決方案。

01

設計氣質 DNA

軟體交付的企業級指揮中心

02

色彩

以淺色背景為主，搭配醒目橘色強調的簡潔高對比 UI，並運用深色表面來凸顯重點。

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

動效與互動

互動元素（按鈕、連結）採用彈性/過衝緩動效果 · 標準 background-color 轉場（0.2 秒） · 基於 transform 的 hover 效果（0.3 秒）

背景顏色變換或 transform（過衝緩動） · 透過 background-color 轉場提供即時回饋

08

組件

• button 實心主按鈕（黑色背景、白色文字）與外框次按鈕（透明背景、黑色文字）
• card 深色背景（#1F1C2E）搭配白色文字，用於功能亮點與狀態更新
• chip 聊天視窗介面中的互動操作標籤
• input 浮動式聊天輸入欄位，附專屬傳送圖示
• hero 全寬區塊，採用顯眼漸層背景（粉橘色系）、大型字體與主要行動呼籲

09

文案語氣與禁用清單

• 語氣 自信、權威且直接
• 標題風格 簡短有力、強調效益（例如：「更快交付。值得信賴。」）
• 按鈕文案 以行動為導向且清晰明確（例如：「免費試用」、「申請演示」）

• 避免使用低對比文字 — 截圖顯示採用純黑（#171321）與白色（#FFFFFF）以確保最大可讀性。
• 避免使用活潑或圓潤的字體 — 截圖顯示採用結構化的幾何無襯線字體系統。
• 避免單一顏色涵蓋所有狀態 — 截圖顯示橘色（#FC6D26）僅作為強調色，與黑白搭配使用。
• 避免過度使用陰影效果 — 截圖顯示卡片與彈出視窗僅採用極為細微的多層陰影。
• 避免所有版面皆採用剛性網格 — 截圖顯示採用彈性網格以容納全寬主視覺區塊。
• 避免功能亮點使用淺色背景 — 截圖顯示採用深色（#1F1C2E）表面以建立視覺對比與焦點。
• 避免: 未經解釋的專業術語
• 避免: 過於正式的企業用語
• 避免: 模糊或被動的語句結構

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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