精選 · 開放 · 免費
Linear
一個專注於精準度的深色 SaaS 設計系統，專為開發者工具而生。
SaaSProductivityApp UIDark Mode
01
設計氣質 DNA
精準速度感技術清晰度結構化AI 原生
為軟體團隊打造的高級錶面儀器——深邃、精準、毫無裝飾。
02
色彩
#F7F8F8Ink
#D0D6E0Ink soft
#08090ABG
rgba(255,255,255,0.05)BG soft
rgba(255,255,255,0.02)BG quiet
#62666DMuted
rgba(255,255,255,0.08)Line
極致對比以集中焦點，搭配細微雜訊與半透明圖層來營造深度。
03
字型
geometric-sans · humanist-sans · monospace
- display
64px · 400 - body
16px · 400 - mono
13px · 400
在大型標題上使用緊湊的負向字距調整。 · 內文維持 400 字重，以保持介面輕盈感。 · 僅在技術參考與識別碼上使用等寬字體。
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
96px
嚴格 4px 格線，組件間距緊湊。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 6px
lg · 12px
pill · 9999px
1px solid rgba(255,255,255,0.08)
0px 1.2px 0px 0px rgba(0,0,0,0.03) · 0px 2px 4px 0px rgba(0,0,0,0.4) · inset 0px 0px 12px 0px rgba(0,0,0,0.2)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全幅寬的深色畫布，結構緊湊，並嵌套凸起面板。
07
動效與互動
150msmicro
160mssmall
400msmedium
cubic-bezier(0.25, 0.46, 0.45, 0.94)easing
hover 時的微幅淡入與濾鏡過渡。 · 平滑的背景色調轉換。 · 游標與 focus 狀態下的微互動。
亮度略微提升或背景透明度變換。 · 狀態即時改變，伴隨細微縮放或顏色回饋。
08
組件
- button 膠囊形或微圓角矩形，透明背景搭配細邊框。
- card 凸起的深色面板，帶有細微的 1px 內邊框與柔和陰影。
- chip 小型圓角矩形，用於標籤與狀態指示器。
- input 深色、半透明背景的輸入欄位，邊框樣式極簡。
- hero 巨型、粗體的無襯線標題，搭配簡潔副標題與大型產品模型。
09
文案語氣與禁用清單
- 語氣 技術性、精準、自信。
- 標題風格 直接、具行動導向、權威感。
- 按鈕文案 極簡清晰，常為單純的文字連結或低強調按鈕。
- 勿使用高飽和度顏色——截圖顯示嚴格的灰階/白色調色盤。
- 勿使用圓潤、俏皮的形狀——截圖顯示銳利或極微圓角。
- 勿使用襯線或裝飾性字體——截圖顯示乾淨的幾何無襯線體。
- 勿使用明亮、多彩的漸層——截圖顯示深色、扁平、帶有顆粒質感的背景。
- 勿使用厚重、顯眼的邊框——截圖顯示髮絲般的 1px 分隔線。
- 勿使用複雜、多層次的陰影——截圖僅顯示細微、低透明度的投影。
- 避免: 行銷術語堆砌
- 避免: 模糊或有歧義的用詞
- 避免: 過多的驚嘆號
- 避免: 俏皮或隨意的語言
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
設計一個為開發者工具與 AI 時代生產力打造的高精準度 SaaS 介面。系統採用深色模式色調，背景主要使用 #08090A，文字使用白色 #F7F8F8 以達高對比。字體風格簡潔幾何，大型標題使用負向字距調整。關鍵色碼為 #08090A、#F7F8F8 與 #62666D（用於次要元素）。切勿使用高飽和度顏色或俏皮的圓潤形狀；美學必須保持銳利、技術感與專業。佈局緊湊且為全幅寬，利用半透明面板營造深度。確保過渡效果快速且細微，以維持速度感。
en · zh-CN · zh-TW · ja · ko