# Novu · Design system migration spec

> Source: https://novu.co  ·  Curated by OpenDesign  ·  en

> Worth including as a prime example of modern developer-focused dark-mode SaaS design, blending high technicality with a sophisticated visual identity.

## 1. Identity DNA

Novu operates as a command center for notification infrastructure, built on the premise that developer tools deserve a design language as precise as their code. The system pairs a deep, low-luminance foundation with high-contrast accents, treating the interface less like a brochure and more like a cockpit instrument panel. Every surface, shadow, and type choice serves clarity under extended use.

**One-liner:** A dark-mode, developer-focused notification infrastructure platform combining clean typography with a sophisticated, deep space-inspired color palette.
**Keywords:** developer-first · infrastructure · notifications · modern · open-source
**Analogy:** A developer-first command center for notifications, merging a sophisticated dark aesthetic with a clean, technical interface.

## 2. Color

The palette is engineered for low ambient fatigue: a near-black charcoal ground layered with dark blue-gray surfaces, set against pure white type and a single, vibrant cyan accent. This restricted triad (dark, light, accent) keeps cognitive load minimal while making interactive elements unmistakable against the deep field.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#111018` | main background |
| `--bg-soft` | `#1e2438` | card background |
| `--ink` | `#ffffff` | body text |
| `--ink-soft` | `#999999` | secondary text |
| `--muted` | `#cccccc` | placeholder |
| `--accent` | `#00d5ff` | single accent |
| `--line` | `rgba(255,255,255,0.1)` | divider |

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

Color here is functional infrastructure, not decoration—each hue earns its place by clarifying hierarchy or signaling interactivity.

## 3. Typography

Typography follows a clean, geometric sans-serif category that reads as both technical and modern. Headlines frequently borrow code-like syntax, treating angle brackets and component names as first-class typographic elements rather than stylistic flourishes.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.05 | 500 | -1px | Main hero heading |
| body | 16px | 1.5 | 400 | 0px | General body text |

## 4. Spacing

Spacing follows a strict 4px base grid, creating consistent vertical rhythm across all components and sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px base grid with consistent vertical spacing.

## 5. Surfaces

Surfaces are differentiated through subtle radial gradients and low-opacity white borders rather than heavy shadow stacks. A single, wide cyan glow shadow appears sparingly, reserved for elements that need to float above the primary layer without disrupting the dark-field cohesion.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Shadows:**
  - 0 0 100px rgba(0, 213, 255, 0.15)
- **Borders:** 1px solid rgba(255,255,255,0.1)

## 6. Layout

The layout anchors on a centered hero section where massive typography overlaps floating UI component demos, giving visitors an immediate, in-context preview of the product. Below, multi-column feature grids organize capabilities into scannable clusters, maintaining the dark surface continuity throughout.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is restrained and purposeful: smooth 300ms cubic-bezier transitions govern color shifts and background changes, while interactive elements scale subtly on hover or click. The philosophy treats animation as feedback—confirming state changes without drawing attention to itself.

- **Durations:** micro 200ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth background transitions
  - Hover color shifts
  - Transform scaling on interactive elements

- **Hover:** Subtle color shifts or background changes on navigation and buttons.
- **Click:** Scale transform on interactive elements.
- **Transition:** 0.3s cubic-bezier(0.4, 0, 0.2, 1) for color and background transitions.
- **Keyboard:** Standard focus states likely following WCAG contrast requirements.

## 8. Voice & Don'ts

The editorial voice is direct, technical, and confident, mirroring the audience it serves. Headlines adopt code-centric phrasing like `<Inbox />`, while calls to action are uppercase and unambiguous, avoiding any language that might read as marketing abstraction.

- **Tone:** Technical, confident, and developer-oriented.
- **Headline style:** Direct and bold, often incorporating code-like syntax (e.g., '<Inbox />').
- **CTA style:** Clear, uppercase action-oriented text (e.g., 'START FOR FREE').
- **Avoid:** fluff / marketing jargon / decorative metaphors / overly complex sentences

### Don'ts
- ❌ 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.

The system deliberately excludes light-mode variants, decorative serifs, multi-colored gradients, and any language that distances the product from its developer audience.

## System Prompt (paste into AI tool)

```
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.
```