精選 · 開放 · 免費
Novu
一個深色模式、面向開發者的通知基礎設施平台，結合簡潔排版與精緻的深空靈感配色。
devnotifications
01
設計氣質 DNA
開發者優先基礎設施通知系統現代化開源
一個以開發者為中心的通知指令中心，融合精緻的深色美學與簡潔的技術介面。
02
色彩
#00d5ffAccent
#ffffffInk
#999999Ink soft
#111018BG
#1e2438BG soft
#ccccccMuted
rgba(255,255,255,0.1)Line
以深藍與灰色構成高對比深色模式基礎，搭配青色強調色，創造層次與深度。
03
字型
geometric-sans · monospace
- display
64px · 500 - body
16px · 400
04
間距
4px
8px
12px
16px
20px
24px
32px
48px
64px
96px
以 4px 為基準網格，維持一致的垂直間距。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
1px solid rgba(255,255,255,0.1)
0 0 100px rgba(0, 213, 255, 0.15)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
中央英雄區域，接續多欄功能格網與複雜的重疊 UI 示範。
07
動效與互動
200msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
流暢的背景轉場 · hover 色彩變換 · 互動元件的縮放變形
導覽與按鈕上的細微色彩或背景變化。 · 互動元件的縮放變形。
08
組件
- button 膠囊形實心主按鈕（白底黑字）與描邊次按鈕。
- card 深色主題卡片，帶有細微邊框與柔和的徑向漸層以增加深度。
- chip 小型膠囊標籤，使用實心背景顯示計數（例如黃色/橘色的「18」）。
- input 深色主題輸入框，帶有細微邊框。
- hero 中央大字體標題，搭配重疊的浮動介面元件。
09
文案語氣與禁用清單
- 語氣 技術性、自信、面向開發者。
- 標題風格 直接且大膽，常融入程式碼語法（例如「<Inbox />」）。
- 按鈕文案 清晰、大寫、行動導向的文字（例如「免費開始」）。
- 不要使用淺色背景——截圖顯示深色模式基礎 (#111018)。
- 不要使用裝飾性襯線字體——截圖顯示簡潔的幾何無襯線排版。
- 不要在標題中避免使用程式碼語法——截圖顯示英雄區域顯著使用「<Inbox />」。
- 不要使用低飽和度、低對比的顏色——截圖顯示深色背景上的高對比白色文字與亮青強調色。
- 不要到處使用複雜的多彩漸層——截圖顯示使用細微的深色徑向漸層增加深度。
- 不要使用尖銳的直角——截圖顯示廣泛使用膠囊形 (9999px) 與 12px 圓角。
- 避免: 冗詞贅字
- 避免: 行銷術語
- 避免: 裝飾性比喻
- 避免: 過於複雜的句子
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 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Novu 是一個深色模式、以開發者為中心的通知基礎設施平台。它採用深色背景 (#111018)，搭配高對比白色文字 (#ffffff) 與亮青強調色 (#00d5ff)。字體使用簡潔的幾何無襯線類別，標題大而粗體，語調技術性，常融入程式碼語法。設計強調複雜的 UI 示範、膠囊形按鈕與細微的徑向漸層。關鍵禁忌：絕不使用淺色背景、絕不使用裝飾性襯線字體、絕不迴避以程式碼為核心的標題。保持高對比、技術性的美學，適合開發者受眾。
en · zh-CN · zh-TW · ja · ko