精選 · 開放 · 免費
PlanetScale
一款為開發者打造、以等寬字體為核心的高效能資料庫基礎設施平台。
devtoolsdatabase
01
設計氣質 DNA
速度可靠性基礎設施效能開發者優先
一款讓人感覺像可靠命令列工具的資料庫開發者工具。
02
色彩
#F35815Accent
#414141Ink
#FAFAFABG
#737373Muted
rgba(65, 65, 65, 1)Line
高對比度實用調色板，搭配橙色點綴與等寬字體排印。
03
字型
geometric-sans · monospace
所有內文與導覽皆使用等寬字體。 · 使用粗體強調文字中的重點。 · 連結採用藍色。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
模組化間距採用一致的 24px 間隔。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
結構性元素與網格採用 1px solid #414141。
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
單欄內容佈局，採用固定寬度容器。
07
動效與互動
150msmicro
150mssmall
150msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
標準狀態轉換（hover、focus、active）。
互動元素的顏色轉換。 · 標準按鈕與連結行為。
08
組件
- button 藥丸形狀，搭配實心背景色。
- card 用於展示標誌的網格式卡片。
- chip 無
- input 無
- hero 粗體標題搭配支援段落與標誌網格。
09
文案語氣與禁用清單
- 語氣 自信、技術性且直接。
- 標題風格 粗體且具宣告性。
- 按鈕文案 簡潔且以行動為導向（例如：「聯絡我們」）。
- 不要使用襯線字體——截圖顯示為等寬與無襯線字體。
- 不要使用柔軟的圓角——截圖顯示為藥丸形按鈕與銳利網格線。
- 不要使用細微陰影——截圖顯示為扁平化、以邊框為主的表面。
- 不要使用低飽和度、低對比的調色板——截圖顯示為高對比黑白搭配粗體點綴。
- 不要使用手寫或裝飾性字體——截圖顯示為嚴格的功能性字體排印。
- 不要使用複雜的多色漸層——截圖顯示為實心背景色。
- 避免: 缺乏脈絡的術語解釋。
- 避免: 過於隨意或俏皮的語言。
- 避免: 視覺雜亂或不必要的裝飾元素。
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個面向開發者的 SaaS 網站，服務於資料庫基礎設施平台 PlanetScale。設計以等寬字體排印（ui-monospace）為主，營造出技術感、命令列美學。關鍵十六進位色碼包括：主要墨色 #414141、背景色 #FAFAFA、連結色 #0B6EC5，以及行動呼籲點綴色 #F35815。佈局簡潔且基於網格，透過字體粗細與大小建立清晰的視覺層級。關鍵禁忌：避免使用襯線字體、避免柔軟圓角、避免低對比調色板。本網站優先考量技術受眾的清晰度與可讀性。
en · zh-CN · zh-TW · ja · ko