CURATED · OPEN · FREE

Novu

A dark-mode, developer-focused notification infrastructure platform combining clean typography with a sophisticated, deep space-inspired color palette.

devnotifications

↓ Download design system (25 MB)Open in OpenDesign

Visit: https://novu.co

📦 Browse pack contents →

Identity DNA

developer-firstinfrastructurenotificationsmodernopen-source

A developer-first command center for notifications, merging a sophisticated dark aesthetic with a clean, technical interface.

Color

#00d5ffAccent

#ffffffInk

#999999Ink soft

#111018BG

#1e2438BG soft

#ccccccMuted

rgba(255,255,255,0.1)Line

High-contrast dark mode foundation with cyan accents, relying on deep blues and grays for depth and layering.

Typography

geometric-sans · monospace

display64px · 500
body16px · 400

Spacing

4px

8px

12px

16px

20px

24px

32px

48px

64px

96px

4px base grid with consistent vertical spacing.

Surfaces

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)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Centered hero section followed by multi-column feature grids and complex overlapping UI demos.

Motion & Interaction

200msmicro

300mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth background transitions · Hover color shifts · Transform scaling on interactive elements

Subtle color shifts or background changes on navigation and buttons. · Scale transform on interactive elements.

Components

button Pill-shaped solid primary buttons (white with black text) and outlined secondary buttons.
card Dark-themed cards with subtle borders and soft radial gradients for depth.
chip Small pill badges with solid backgrounds for counts (e.g., yellow/orange '18').
input Dark-themed inputs with subtle borders.
hero Massive centered typography with overlapping floating interface components.

Voice & Don'ts

Tone Technical, confident, and developer-oriented.
Headlines Direct and bold, often incorporating code-like syntax (e.g., '<Inbox />').
CTAs Clear, uppercase action-oriented text (e.g., 'START FOR FREE').

don't use light backgrounds — screenshot shows a deep dark mode foundation (#111018).
don't use decorative serif fonts — screenshot shows clean, geometric sans-serif typography.
don't avoid code syntax in headlines — screenshot shows '<Inbox />' used prominently in the hero.
don't use muted, low-contrast colors — screenshot shows high-contrast white text on dark backgrounds with bright cyan accents.
don't use complex, multi-colored gradients everywhere — screenshot shows subtle, dark radial gradients for depth.
don't use sharp, boxy corners — screenshot shows widespread use of pill-shaped (9999px) and 12px rounded corners.
Avoid: fluff
Avoid: marketing jargon
Avoid: decorative metaphors
Avoid: overly complex sentences

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

Novu is a dark-mode, developer-first notification infrastructure platform. It features a deep dark background (#111018) with high-contrast white text (#ffffff) and bright cyan accents (#00d5ff). The typography is a clean geometric sans-serif category with large, bold headings and a technical tone, often incorporating code-like syntax. The design emphasizes complex UI demos, pill-shaped buttons, and subtle radial gradients. Critical donts: never use light backgrounds, never use decorative serifs, and never avoid code-centric headlines. Maintain a high-contrast, technical aesthetic suitable for a developer audience.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

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