精選 · 開放 · 免費
Convex
Convex 提供整合式後端即服務，讓開發者能自信地進行建構。
devtoolsbackend
01
設計氣質 DNA
開發者後端基礎設施typescript即時
現代網路應用的工業級引擎模組
02
色彩
#141414Ink
#FFFFFFInk soft
#F6F0E1BG
#292929BG soft
#A9A9ACMuted
rgba(20, 20, 20, 1)Line
溫暖奶油色編輯區域與深色、專注的開發環境之間的高對比分離。
03
字型
geometric-sans · monospace
- display
40px · 700 - body
16px · 400
標題採用緊密字距與粗體字重 · 內文保持高度可讀性，搭配寬鬆的行高 · 等寬字體僅用於程式碼片段與終端機指令
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
4px 基礎網格，區段分隔處採用寬鬆的內距
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid #141414
0px -16px 72px -8px rgba(0, 0, 0, 0.25) · 0px 10px 15px -3px rgba(0, 0, 0, 0.1)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
分割螢幕英雄版，左側為文字，右側為互動式程式碼編輯器
07
動效與互動
150msmicro
250mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover 時平滑的 150 毫秒色彩與變形過渡 · 細微的背景漸層動畫
細微的背景與文字色彩變化，搭配平滑緩動 · 即時回應，帶有輕微的縮放回饋
08
組件
- button 實心深色填充按鈕，採用膠囊形圓角與白色文字
- card 深色主題卡片，12px 圓角搭配細微陰影
- chip 用於「工作」或「其他」等類別的彩色圓角標籤
- input 深色終端機風格輸入欄位，使用等寬字體
- hero 不對稱分割版面，一側為大型字體，另一側為即時展示
09
文案語氣與禁用清單
- 語氣 專業、自信且以開發者為中心
- 標題風格 大型、粗體且字距緊密的幾何無襯線字體
- 按鈕文案 直接且具行動導向，採用膠囊形按鈕
- 不要在主要按鈕上使用標準圓角 — 截圖顯示為膠囊形 (999px) 邊框
- 不要使用明亮的藍色或綠色強調色 — 截圖顯示為嚴格的單色調色板，僅在程式碼語法中使用彩色強調
- 不要使用襯線字體作為標題 — 截圖顯示為粗體、字距緊密的幾何無襯線字體
- 不要使用細薄、淺色的邊框 — 截圖顯示在淺色背景上使用 1px 實線深色邊框
- 不要使用純深色背景作為整個頁面背景 — 截圖顯示在淺奶油色主要內容區域與深色元件區域之間進行分割
- 不要使用像 Helvetica 這樣的標準無襯線字體 — 截圖顯示為獨特、稍寬的幾何無襯線字體類別
- 避免: 輕浮或過於 playful 的語言
- 避免: 雜亂的版面配置
- 避免: 明亮、霓虹感過重的配色方案
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Convex 是一款以開發者為中心的後端即服務工具，其特色在於精緻的分離式版面設計。主要背景為溫暖的奶油色 (#F6F0E1)，與程式碼編輯器和 UI 元件的深色 (#292929) 表面形成對比。字體方面，展示標題採用粗體幾何無襯線字體，內文使用簡潔的無襯線字體，而等寬字體則嚴格保留給程式碼使用。關鍵設計規則包括避免使用標準圓角（按鈕採用膠囊形圓角）、避免使用明亮的霓虹強調色而採用克制的單色調色板，並確保所有互動元素都有平滑的 150 毫秒過渡效果。版面配置強調高對比的編輯區域與深色、專注的工具介面並存。
en · zh-CN · zh-TW · ja · ko