精選 · 開放 · 免費
Highlight
為現代網路應用程式打造的開源全端監控平台。
devobservability
01
設計氣質 DNA
開源監控全端開發者工具可觀測性
一個簡潔的深色 IDE 儀表板,用於全端監控。
02
色彩
#72E4FCAccent
#FFFFFFInk
#DFDFDFInk soft
#0D0225BG
#30294EBG soft
#9D97AAMuted
rgba(48, 41, 78, 1)Line
優先採用深色模式,搭配高對比的青色強調色與細微的霓黃色高光。
03
字型
humanist-sans · monospace
- display
58px · 600 - heading
44px · 600 - body-lg
18px · 400 - body
16px · 400
04
間距
4px
8px
12px
16px
24px
32px
44px
48px
64px
96px
以一致的 4px 網格為基底,搭配充足的留白以提升可讀性。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 16px
pill · 44px
1px solid rgba(48, 41, 78, 1)
rgb(108, 55, 244) 8px 8px 0px -2px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
內容居中,留有寬闊的邊距,使用 Flexbox 佈局功能分頁。
07
動效與互動
150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
互動元素在懸停時的細微顏色過渡。 · 功能分頁之間的平滑切換過渡。
按鈕與連結在懸停時的細微顏色與透明度變化。 · 點擊時提供即時的顏色過渡回饋。
08
組件
- button 膠囊形按鈕,包含實心青色的主按鈕與描邊樣式的次要按鈕。
- card 深色卡片,帶有細微邊框,常包含整合圖示。
- chip 標籤式選項,用於功能導航(如:工作階段回放、錯誤監控等)。
- input 極簡風格的深色輸入框,但在主視覺中並未突出顯示。
- hero 大型居中標題,使用強調色,搭配堆疊的行動呼籲按鈕與功能概覽分頁。
09
文案語氣與禁用清單
- 語氣 兼具技術性與親和力,專業且專注於開發者。
- 標題風格 直接、強調價值,並突顯其開源本質。
- 按鈕文案 以行動為導向(開始使用、即時演示),並建立清晰的視覺層級。
- 切勿使用淺色主題——截圖顯示的是深色模式介面,背景為深海軍藍(#0D0225)。
- 切勿使用次要強調色——截圖顯示僅有一個主導的高飽和度青色(#72E4FC)用於按鈕與高光。
- 切勿使用裝飾性襯線字體——截圖顯示所有文字皆使用簡潔現代的 Poppins 無襯線字體。
- 切勿到處使用尖銳的圓角——截圖顯示結合了細微的 8px/16px 圓角與 44px 的膠囊形圓角。
- 切勿使用低對比文字——截圖顯示在深色背景上使用高對比的白色(#FFFFFF)與淺灰色(#DFDFDF)。
- 切勿讓頁首雜亂——截圖顯示清晰的頂端對齊導覽列,並有明確的主要/次要操作按鈕。
- 避免: 避免使用過於隨意或「新創兄弟」式的術語。
- 避免: 避免在主視覺中放入複雜的架構圖。
- 避免: 避免使用雜亂的佈局,以免模糊核心價值主張。
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個專為開發者設計的 SaaS 登入頁面,用於推廣開源監控平台。其設計 DNA 以深色模式介面為特色,採用深海軍藍背景(#0D0225)、高對比的白色文字(#FFFFFF),以及單一主導的青色強調色(#72E4FC)。字體使用現代的 Poppins 無襯線字體,營造簡潔、技術性的感覺。關鍵元素包括大型粗體標題、膠囊形按鈕(實心青色與描邊變體),以及功能導航分頁。佈局居中且寬敞,強調可讀性與清晰的行動呼籲。關鍵禁忌:絕不使用淺色主題、絕不引入次要強調色,也絕不使用裝飾性襯線字體。整體設計簡潔、專業,並針對開發者受眾進行了優化。
en · zh-CN · zh-TW · ja · ko