---
title: "Doppler design system"
variant: extended
source: https://www.doppler.com/
captured_at: 2026-10-12
theme: dark
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/doppler-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Doppler · Design System

> Dark developer tooling, lit by violet and electric green

**Theme:** dark · **Industry:** devtools · **Source:** https://www.doppler.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Doppler presents secrets management as a polished developer platform, using a deep plum canvas, luminous violet transitions, and crisp product-interface imagery. Large, humanist headlines and spacious modular sections make technical capabilities feel approachable without losing a distinctly dark, technical character.

## North star

Keep the deep plum canvas calm and spacious, then use violet for atmosphere and electric green only where action matters.

## Overview

The page is grounded in a near-black plum canvas (#1c1624), with pale warm text and muted gray-lilac copy providing legible contrast. Violet (#6b13f5) and lavender (#b997ff) energize hero treatments, section transitions, and selected headings; electric green (#00f575) is reserved for high-priority actions. A subtle violet-to-pink gradient appears as decorative light, not as a reason to expand the core palette. One custom sans-serif family handles the full hierarchy: oversized, lightly weighted display headlines contrast with compact uppercase labels and bolder navigation. The opening section pairs left-aligned copy and CTA with a dark product-interface visual; later content alternates centered introductions, feature cards, logo proof, integrations, and customer stories. Repeated rounded cards, thin outlines, restrained borders, and large vertical gaps keep dense technical information orderly. Imagery is predominantly interface captures and branded technology illustrations rather than lifestyle photography.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Plum | `#1c1624` | `--color-deep-plum` | brand | Dominant page canvas and navigation base; also anchors dark gradients and preserves contrast around product imagery. |
| Warm Chalk | `#f1f0ec` | `--color-warm-chalk` | neutral | Primary headings, navigation, button labels, and high-contrast text on dark surfaces. |
| Electric Violet | `#6b13f5` | `--color-electric-violet` | accent | Violet gradient light and prominent colored section treatments; use for atmospheric brand emphasis. |
| Soft Pebble | `#d0c9c4` | `--color-soft-pebble` | neutral | Muted paragraph copy, secondary navigation links, and supporting text beneath headings. |
| Lavender Glow | `#b997ff` | `--color-lavender-glow` | accent | Highlighted headline phrases and secondary violet section accents against the plum canvas. |
| Quiet Ash | `#a8a5a7` | `--color-quiet-ash` | neutral | Lower-emphasis supporting text, including subdued technical descriptions. |
| Signal Green | `#00f575` | `--color-signal-green` | semantic | Primary Start for Free actions and small operational-status indicators. |
| Slate Hairline | `#55505b` | `--color-slate-hairline` | neutral | Fine navigation and component outlines that separate dark surfaces without adding visual weight. |
| Raised Plum | `#2e2835` | `--color-raised-plum` | surface | Subtle raised control and card surfaces within the otherwise dark page. |
| Petal Light | `#ff9efa` | `--color-petal-light` | accent | Appears as a stop in a decorative violet-pink gradient; treat as illustration detail, not a core UI color. |

### Semantic aliases

`--color-canvas` → `#1c1624` (Deep Plum) · `--color-surface` → `#2e2835` (Raised Plum) · `--color-text` → `#f1f0ec` (Warm Chalk) · `--color-text-muted` → `#d0c9c4` (Soft Pebble) · `--color-text-subtle` → `#a8a5a7` (Quiet Ash) · `--color-border` → `#55505b` (Slate Hairline) · `--color-accent` → `#6b13f5` (Electric Violet) · `--color-accent-2` → `#b997ff` (Lavender Glow) · `--color-accent-3` → `#00f575` (Signal Green) · `--color-on-accent` → `#1c1624` (Deep Plum)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f1f0ec` | `#1c1624` | 15.48:1 | AAA |
| `#f1f0ec` | `#2e2835` | 12.52:1 | AAA |
| `#d0c9c4` | `#1c1624` | 10.79:1 | AAA |
| `#d0c9c4` | `#2e2835` | 8.72:1 | AAA |
| `#a8a5a7` | `#1c1624` | 7.23:1 | AAA |
| `#a8a5a7` | `#2e2835` | 5.85:1 | AA |
| `#6b13f5` | `#1c1624` | 2.55:1 | fail |
| `#6b13f5` | `#2e2835` | 2.06:1 | fail |

### Gradients

- `linear-gradient(rgb(28, 22, 36), rgba(0, 0, 0, 0))`
- `linear-gradient(to top, rgb(28, 22, 36), rgba(0, 0, 0, 0))`
- `linear-gradient(to right, rgb(107, 19, 245), rgb(255, 158, 250), rgb(107, 19, 245))`
- `linear-gradient(91deg, rgb(133, 90, 255) 14.92%, rgb(255, 86, 50) 90.53%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| __DopplerRepro_a18e76 | `--font-body` | webfont | 400, 500, 700, 450 | Site-wide display, headings, body copy, navigation, links, and controls | Inter |

- **__DopplerRepro_a18e76:** Use lightly weighted large headings with tight negative tracking; body copy is compact, while eyebrow labels are bold, uppercase, and widely tracked.

### Type scale — Perfect Fifth (ratio ≈ 1.47, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 450 | 1.05 | -0.02em | — | __DopplerRepro_a18e76 | Hero-scale headline treatment for prominent brand statements. |
| h1 | 64px | 450 | 1.15 | -0.02em | — | __DopplerRepro_a18e76 | Primary page and major section headlines. |
| h2 | 48px | 450 | 1.2 | -0.02em | — | __DopplerRepro_a18e76 | Section headings, often centered above content. |
| h3 | 32px | 450 | 1.2 | -0.02em | — | __DopplerRepro_a18e76 | Feature and customer-story card titles. |
| h4 | 24px | 400 | 1.4 | -0.01em | — | __DopplerRepro_a18e76 | Smaller supporting headings within feature content. |
| body | 14px | 400 | 1.5 | 0.03em | — | __DopplerRepro_a18e76 | Paragraphs explaining product value and technical capabilities. |
| caption | 10px | 700 | 1 | 0.1em | uppercase | __DopplerRepro_a18e76 | Compact uppercase category labels and metadata. |
| nav | 15px | 700 | 1 | 0.01em | — | __DopplerRepro_a18e76 | Primary navigation labels and top-level site links. |
| link | 15px | 700 | 1 | 0.01em | — | __DopplerRepro_a18e76 | Bold secondary actions such as Learn More. |
| eyebrow | 10px | 700 | 1 | 0.1em | uppercase | __DopplerRepro_a18e76 | Small uppercase labels introducing content categories. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 2, 4, 8, 10, 14, 16, 20, 28, 32, 56 px.
- Section rhythm 140px · element gap 8px · card padding — · max content width 1252px.

A spacious, centered page uses a measured 1252px maximum content width and a 12-column-like rhythm, with hero copy and product visual arranged side by side. Subsequent sections combine centered headings, three-column card rows, a split integration feature, and broad story cards. The measured section rhythm is generous, with large vertical separation and compact gaps within related elements. Cards sit in tidy grids, while the footer expands into multiple link columns. Alignment alternates between centered introductions and left-aligned content.

## Shape & elevation

- Radius: button `12px` · xs `8px` · sm `12px` · md `20px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page favors restrained layering over heavy shadows: product screenshots and cards sit slightly above the plum canvas through subtle tonal differences. Fine outlines define navigation and card edges, while rounded corners soften interface panels and CTAs. Violet glow and gradients provide depth in selected hero and CTA areas; most content remains visually flat and clean.

## Imagery

The hero pairs concise copy with a dark, cropped product-dashboard capture framed as a wide interface panel. Below, small integration marks, customer logos, security and permissions screens, and illustrated ecosystem graphics carry the technical story. Images remain embedded in the dark palette, often with violet light or soft glow; they are product proof and interface detail rather than decorative lifestyle photography. The closing CTA uses a prominent branded illustration.

## Components

### Primary CTA

Electric-green Start for Free button with dark text, a measured 12px radius, and compact internal padding; appears in navigation and hero.

### Outline CTA

See Integrations uses warm chalk text and a 1px warm-chalk border, with the same 12px button radius.

### Top navigation

Dark, outlined horizontal bar with the Doppler mark, bold compact links, a green CTA, and a secondary outlined sign-in action.

### Feature cards

Dark raised panels in three-column rows, combining a small graphic or interface visual, a concise title, muted description, and Learn More link.

### Integration split

Integration ecosystem artwork sits beside a left-aligned heading, technical copy, and an outlined See Integrations action.

### Customer story cards

Three-column dark cards pair customer branding and category labels with outcome-focused summaries and understated reading links.

### Footer

Dark, multi-column directory with a prominent Doppler wordmark, operational status, link groups, trust badges, preferences, and social icons.

### Measured component styles

- **Primary button** (“Start for Free”): background #00f575 · text #1c1624 · radius 12px · padding 14px 16px · 400 16px __DopplerRepro_a18e76
- **Secondary button** (“See Integrations”): transparent background · text #f1f0ec · border 1px solid #f1f0ec · radius 12px · padding 14px 16px · 400 16px __DopplerRepro_a18e76
- **Link** (“Learn More”): transparent background · text #d0c9c4 · radius 0px · padding 0px · 700 15px __DopplerRepro_a18e76
- **Navigation item** (“Platform Solutions Resources Doppler for”): transparent background · text #f1f0ec · radius 0px · padding 0px · 700 15px __DopplerRepro_a18e76

## Do

- Use Deep Plum (#1c1624) as the dominant canvas.
- Set primary text in Warm Chalk (#f1f0ec).
- Reserve Signal Green (#00f575) for key actions and status.
- Use violet and lavender gradients as selective atmosphere.
- Keep technical visuals inside dark, rounded interface panels.
- Alternate centered section introductions with structured card grids.

## Don't

- Do not turn the page into a bright white SaaS template.
- Do not use green as a large background field.
- Do not apply Petal Light (#ff9efa) as a general UI color.
- Do not crowd the page with tight section spacing.
- Do not rely on heavy shadows to separate every card.
- Do not replace product-interface imagery with lifestyle photography.

## Agent prompt

Build a new Doppler-style developer-tools page on Deep Plum (#1c1624), with Warm Chalk (#f1f0ec) for primary text and Soft Pebble (#d0c9c4) for supporting copy. Use Electric Violet (#6b13f5) and Lavender Glow (#b997ff) sparingly for atmospheric gradients and emphasized headings; reserve Signal Green (#00f575) for primary actions. Follow a spacious centered layout with a side-by-side hero, dark product-interface imagery, clear section introductions, and orderly rounded feature cards. Use a single clean sans-serif family, lightly weighted large headings, compact body copy, and bold navigation. Define panels with subtle tonal contrast and fine borders rather than strong shadows. Keep technical proof—screenshots, integration marks, customer logos—visually integrated with the dark canvas. Maintain generous section rhythm and focused CTAs.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Dark plum hero with left-aligned headline and copy beside a wide product dashboard visual; compact navigation sits above. | primary signup CTA, self-guided product tour, top-level navigation | split hero, dark interface screenshot, violet gradient linework, green CTA |
| 2 | logo-cloud | Centered capability introduction followed by three feature cards, customer logos, and an integration-artwork split. | feature discovery, customer proof, integration exploration | centered heading, three-column cards, logo row, split integration panel |
| 3 | feature-grid | Centered section heading above three feature cards, followed by a wider two-card row. | capability comparison, learn-more links | dark rounded cards, small product visuals, three-to-two card arrangement |
| 4 | testimonials | Centered title above three evenly aligned customer-story cards. | customer proof, read-story links | logo-led cards, category captions, outcome summaries |
| 5 | cta | Broad violet section with a large centered message, trust metrics, and a bordered split CTA panel. | start-free action, demo action, trust metrics | violet gradient field, large rounded panel, paired buttons, ecosystem illustration |
| 6 | footer | Dark footer with a large wordmark, status indicator, multiple link columns, trust badges, and a bottom utility row. | deep site navigation, cookie preferences, social links | multi-column directory, operational status pill, certification marks, icon row |

## Source CSS custom properties (selected)

```css
--global-ease: cubic-bezier(0.9,0.1,0.1,0.9);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/doppler-com