精选 · 开放 · 免费

Novu

一个深色模式、面向开发者的通知基础设施平台，结合了简洁的排版与精致的、灵感来自深空的配色方案。

devnotifications
Novu 网站截图
↓ 下载设计系统包 (25 MB)在 OpenDesign 中打开

原站: https://novu.co

📦 浏览包内文件 →

01

设计气质 DNA

开发者优先基础设施通知现代开源

一个开发者优先的通知指挥中心，将精致的暗色美学与简洁、技术感的界面融为一体。

02

色彩

#00d5ffAccent
#ffffffInk
#999999Ink soft
#111018BG
#1e2438BG soft
#ccccccMuted
rgba(255,255,255,0.1)Line

以青色为点缀的高对比度深色模式基础，依赖深蓝和灰色构建深度与层次感。

03

字体

geometric-sans · monospace

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

平滑的背景过渡 · 悬停颜色变化 · 交互元素的变换缩放

导航和按钮上的细微颜色变化或背景改变。 · 交互元素上的缩放变换。

08

组件

09

文案语气与禁用清单

10

包内真实截图

Novu — 桌面首屏（hero）
桌面首屏（hero）
Novu — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Novu — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Novu — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Novu — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Novu — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Novu — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Novu — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Novu — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Novu — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Novu — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Novu — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Novu — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Novu — 移动首屏
移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

Novu 是一个深色模式、开发者优先的通知基础设施平台。它以深色背景（#111018）为基础，搭配高对比度的白色文字（#ffffff）和明亮的青色点缀（#00d5ff）。字体属于简洁的几何无衬线类别，具有大而粗的标题和技术性语气，常融入类代码语法。设计强调复杂的UI演示、胶囊形按钮和微妙的径向渐变。关键禁忌：绝不使用浅色背景，绝不使用装饰性衬线字体，绝不避免以代码为中心的标题。保持一种高对比度、技术感的美学，适合开发者受众。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko