CURATED · OPEN · FREE

Doppler

Secure secrets management for engineering teams

devinfra

↓ Download design system (10 MB)Open in OpenDesign

Visit: https://www.doppler.com

📦 Browse pack contents →

Identity DNA

securityinfrastructuresecrets managementdeveloperenterprise

A fortified vault for digital secrets

Color

#00F575Accent

#F1F0ECInk

#D0C9C4Ink soft

#1C1624BG

#2D2734BG soft

#55505BMuted

rgba(255, 255, 255, 0.08)Line

High contrast neon on dark with subtle purple gradients

Typography

geometric-sans · humanist-sans · monospace

display56px · 500
display-sm32px · 500
body16px · 400

Use geometric sans for headlines · Use humanist sans for body text · Maintain tight letter spacing for large display text

Spacing

4px

8px

16px

20px

24px

32px

48px

64px

96px

8px grid system with 32px base increments

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 9999px

1px solid rgba(255, 255, 255, 0.08)

0 4px 12px rgba(0, 0, 0, 0.15) · 0 8px 24px rgba(0, 0, 0, 0.2)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

220msmicro

300mssmall

400msmedium

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

Smooth color transitions on interactive elements · Subtle transform animations for focus states · Gradient flow in hero section

Color transitions with 0.3s duration · Subtle scale or opacity changes

Components

button Solid neon green (#00F575) with dark text, rounded corners, hover states
card Dark glass panels with subtle borders and rounded corners
chip Small status indicators with rounded corners
input Dark background with subtle borders, search functionality
hero Large gradient background with floating UI mockup and bold headline

Voice & Don'ts

Tone Confident and technical, security-focused
Headlines Direct, action-oriented statements about security
CTAs Clear value propositions with green accent buttons

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
Avoid: Overly casual language
Avoid: Generic corporate speak
Avoid: Fear-mongering

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

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.

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