Doppler — Design System Showcase

Design Tokens

Colors

Click any swatch to copy the hex. Colors extracted from the live doppler.com CSS bundle and HTML inline styles.

Brand palette

purple-brand

#6B13F5

purple-light

#B997FF

orange-brand

#F55C15

pink-brand

#FF9EFA

green-brand

#00F575

green-dark

#00BF5B

Dark mode

#1C1624

surface

#2D2734

surface-raised

#302C37

text-primary

#F1F0EC

text-secondary

#8B877D

border

#44443C

Light mode

bg (warm cream)

#FCFAF6

surface

#F1F0EC

text-primary

#0C0404

border

#BCBCBC

Design Tokens

Typography

DopplerRepro is Doppler's custom proprietary typeface. Regular weight (400) is used even at display sizes. All secret keys and values use DopplerReproMono.

Display

64px · 400
DopplerRepro

Secure secrets.

Heading XL

40px · 400
DopplerRepro

Enter the new era of secrets management

Heading LG

28px · 400
DopplerRepro

Your central hub for secure integrations

Body

16px · 400
Inter

Built for how modern teams actually work. Where humans, pipelines, and AI agents all need secrets to operate. User-based pricing with no extra costs for non-human identities.

Body SM

14px · 400
Inter

SOC 2 and ISO compliant. Secure and audit-ready secrets management for teams of any size.

Mono

13px · 400
DopplerReproMono

DATABASE_URL=postgres://user:••••••••@db.prod.example.com:5432/app

Label

11px · 600
Inter uppercase

Environments · Secrets · Activity Log · Config

Design Tokens

Components

Core UI primitives from the Doppler product.

Buttons

Inputs

Secret key

Secret value

Environment Badges

dev staging production

Production always uses green — never red. Red is reserved for errors only.

Brand Gradient (mark only)

#FF9EFA → #F55C15 → #6B13F5

Easing

cubic-bezier(0.9, 0.1, 0.1, 0.9)

350ms. Fast-in, fast-out — assertive and deliberate.

Trust Signal

Trusted by the world's best DevOps and security teams

SOC 2 ISO 27001 GDPR

Signature Component

Secrets Browser

Doppler's iconic project → environment → secrets interface. Switch environments, search, reveal values, add and delete secrets.

Environment: development 20 secrets

Key	Value	Actions

Design System

Guardrails

Rules from Doppler's live design patterns — what to always do, and what to never do.

01 DopplerRepro only for display text. Never substitute Inter or system fonts at display sizes. DopplerRepro's proportions are part of the brand identity.
02 Dark mode background is #1C1624. Never use pure black or generic dark grays. The deep purple-near-black is canonical.
03 Cream, not white. Light mode background is #FCFAF6 (warm cream). Pure white reads as cold and off-brand.
04 Gradient belongs only to the mark. The pink→orange→purple gradient is the logo icon only. Never apply it to buttons, text, or UI chrome.
05 Regular weight headings. DopplerRepro at 400 weight reads as visually strong. Setting headings to 700 becomes heavy and off-brand.
06 Production is green, never red. Green (#00F575) signals the production environment. Red is reserved exclusively for errors and destructive actions.
07 Secret values are masked by default. Never render secret values as plaintext on initial load. Reveal only on explicit user interaction.
08 #6B13F5 is the only valid CTA color. Do not substitute indigo (#4F46E5), violet (#7C3AED), or any other purple. The exact brand purple is non-negotiable.
09 Mono font for all secrets. Every secret key and value must render in DopplerReproMono. Proportional fonts break the security-first visual contract.
10 Use the full 3-stop gradient. Single-stop purple or orange alone reads as generic. The gradient is always pink→orange→purple, all three stops.

Secure secrets.Prevent breaches.

Colors

Typography

Components

Secrets Browser

Guardrails

Secure secrets.
Prevent breaches.