# Doppler · Design system migration spec

> Source: https://www.doppler.com  ·  Curated by OpenDesign  ·  en

> Exemplary dark mode developer tool aesthetic with strong brand consistency

## 1. Identity DNA

The Doppler design system is built upon the analogy of a fortified vault for digital secrets. Its identity DNA is one of high-contrast security, where every pixel serves to reinforce trust in the safeguarding of critical infrastructure.

**One-liner:** Secure secrets management for engineering teams
**Keywords:** security · infrastructure · secrets management · developer · enterprise
**Analogy:** A fortified vault for digital secrets

## 2. Color

The palette operates on a principle of high-contrast neon on dark, using a deep purple-black base to make interactive elements pop. This is a focused system, deliberately restrained to a single neon accent color for maximum clarity.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#1C1624` | main background |
| `--bg-soft` | `#2D2734` | card background |
| `--ink` | `#F1F0EC` | body text |
| `--ink-soft` | `#D0C9C4` | secondary text |
| `--muted` | `#55505B` | placeholder |
| `--accent` | `#00F575` | single accent |
| `--line` | `rgba(255, 255, 255, 0.08)` | divider |

**Color principle:** High contrast neon on dark with subtle purple gradients

The core principle is functional contrast, where color is not decorative but a direct signal for primary action.

## 3. Typography

Typography is split between a **geometric sans-serif** for authoritative headlines and a **humanist sans-serif** for readable body copy. The tight letter spacing on large display text adds to the system's confident, technical tone.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1px | Hero headline |
| display-sm | 32px | 1.2 | 500 | -0.64px | Section titles |
| body | 16px | 1.5 | 400 | 0.15px | Main text |

**Type rules:**
- Use geometric sans for headlines
- Use humanist sans for body text
- Maintain tight letter spacing for large display text

## 4. Spacing

A consistent 8px grid system governs all rhythm, with base increments of 32px establishing a foundation of generous, breathable space.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px grid system with 32px base increments

## 5. Surfaces

Depth is constructed through subtle, layered shadows and delicate borders. The glass-like panels use semi-transparent borders to maintain the dark theme's solidity without visual weight.

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

## 6. Layout

The layout skeleton is anchored by a full-width hero section with centered content, establishing a strong initial hierarchy. Supporting feature sections then shift into a two-column grid, creating a clear and scannable information architecture.

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

**Skeleton:** Full-width hero with centered content, two-column feature sections

## 7. Motion & Interaction

Motion philosophy is one of controlled, purposeful feedback. Transitions are smooth and calibrated, using a consistent cubic-bezier curve to provide physicality without distraction.

- **Durations:** micro 220ms · small 300ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color transitions on interactive elements
  - Subtle transform animations for focus states
  - Gradient flow in hero section

- **Hover:** Color transitions with 0.3s duration
- **Click:** Subtle scale or opacity changes
- **Transition:** All transitions use cubic-bezier(0.4, 0, 0.2, 1)
- **Keyboard:** Focus states with clear visual indicators

## 8. Voice & Don'ts

The editorial voice is confident and technical, directly addressing security needs with action-oriented statements. It avoids generic corporate language, favoring precise, developer-centric propositions.

- **Tone:** Confident and technical, security-focused
- **Headline style:** Direct, action-oriented statements about security
- **CTA style:** Clear value propositions with green accent buttons
- **Avoid:** Overly casual language / Generic corporate speak / Fear-mongering

### Don'ts
- ❌ Don't use light backgrounds — screenshot shows dark purple/black theme
- ❌ Don't use multiple accent colors — screenshot shows single neon green accent
- ❌ Don't use serif fonts — screenshot shows geometric/humanist sans fonts
- ❌ Don't use small, cramped spacing — screenshot shows generous padding (32-70px)
- ❌ Don't use sharp corners — screenshot shows rounded corners (8-20px radius)
- ❌ Don't use muted, low-contrast colors — screenshot shows high contrast neon on dark

The system deliberately avoids light backgrounds, multiple accent colors, serif typography, cramped spacing, sharp corners, and low-contrast palettes.

## System Prompt (paste into AI tool)

```
Doppler is a premium developer tool for secrets management with a dark, security-focused aesthetic. The design uses deep purple-black backgrounds (#1C1624) with neon green accents (#00F575) for high visibility CTAs. Typography features geometric sans for display and humanist sans for body text. The layout centers around a strong hero with floating UI mockup, using generous spacing (32-70px padding) and rounded corners (8-20px). Key features include gradient backgrounds, glass-morphism cards, and smooth 0.3s transitions. Critical donts: avoid light backgrounds, multiple accent colors, serif fonts, cramped spacing, sharp corners, and low-contrast palettes. The system targets enterprise engineering teams needing secure, scalable secrets management across CI/CD pipelines.
```