Dynatrace Brand Design System Deep-Dive

1. Brand Overview

Dynatrace’s design language feels unapologetically enterprise. This is a platform for serious IT observability and AI-driven analytics, and the design reflects that: sharp edges where needed, bold typography, precise spacing, and a color system that screams “trust us, we know what we’re doing.”

The vibe: clean, controlled, technical. This isn’t the playful SaaS design you see in consumer apps. It’s closer to aerospace dashboards — heavy blues, deep purples, neutrals that keep visual noise low. The primary blue (#1966ff) drives attention, while secondary purples create a unique accent that differentiates from competitors like Datadog (which leans into pinks and violets) or New Relic (which uses teal).

Typography is consistent and modern. Everything is set in BerninaSans, a custom corporate typeface, with robust fallback stacks (-apple-system, Roboto, Helvetica, Arial). The weight range is broad — from 400 to 800 — allowing for flexible hierarchy without switching fonts.

Their spacing scale is 8px-based, which makes sense — predictable, grid-friendly, and easy to implement in responsive layouts. Breakpoints are numerous (over 25 distinct widths), showing that Dynatrace optimizes for a variety of screen sizes and complex layout shifts.

There’s a clear philosophy here:

• Precision over flair — no gratuitous decoration, everything has a purpose.
• High contrast for clarity — readable in both bright and dark modes.
• Consistency across states — buttons, links, and borders follow strict patterns.

If you’re building for Dynatrace, you’re building for a user who expects efficiency and clarity. And the design system delivers that.

2. Color System

2.1 Primary Colors

Main brand color: Primary Blue (#1966ff, rgb(25, 102, 255)).
This is the workhorse. It’s on CTAs, primary buttons, focus rings. It’s vibrant enough to stand out against dark UI backgrounds, yet accessible against light ones. Blue is psychologically associated with trust and stability — perfect for a B2B tech brand dealing in enterprise monitoring.

Compared to competitors:

• Datadog leans violet/pink. Feels more consumer-friendly.
• New Relic uses teal — more “calm”.
• Dynatrace’s blue is more assertive. It says “let’s get to work”.

2.2 Complete Palette

Here’s the full extracted palette, with semantic roles where identifiable:

2.3 Color Relationships

Contrast is strong. The primary blue against white is WCAG AA+ easily. Against deep neutral backgrounds (#0b152b), it pops hard, which makes it usable in dark UI contexts.

The palette supports both light and dark modes — neutrals run both ways. Functional colors (positive, error, warning) are bright enough to stand out against any background.

2.4 Usage Guide

• Primary Blue + White — Perfect for CTAs. High contrast.
• Secondary Purple + Black — Use for brand accents, headings. Avoid for body text.
• Positive Greens — Use sparingly for success states. They’re bright and grab attention.
• Error Reds — Strong, so tone down with lighter error backgrounds for passive alerts.
• Never mix functional colors in charts unless signaling multiple statuses — too much color noise.

3. Typography

3.1 Font Families

• Primary font: BerninaSans
• Fallbacks: -apple-system, Roboto, Helvetica, Arial
• Source: No Google or Adobe fonts — custom corporate font.

3.2 Type Scale

3.3 Hierarchy

They use weight and size aggressively to create hierarchy. Headings jump from 50px 800 weight to 18px 700 for subheads. Body text sits around 16–18px at 400–500 weight, which is readable and consistent.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid. Common values:

4.2 Layout

Breakpoints are numerous: from 320px mobile to 1860px ultra-wide. This suggests multiple container widths and adaptive layouts rather than fixed breakpoints.

5. Visual Elements

Border Radius

Shadows

Mostly subtle:

• rgba(2, 9, 27, 0.15) 0px 4px 10px
• rgba(2, 9, 27, 0.15) 0px 8px 20px
• rgba(0, 0, 0, 0.2) 0px 0px 18px
• rgb(153, 153, 153) 0px 2px 10px -3px

6. Components

6.1 Buttons

Primary (Variant 1)
Default: White bg, black text, 10px 30px padding, 8px radius, 2px white border.
Hover: Translates left, bg black, text white, border 1px neutral-100.
Active: Neutral-200 bg, text neutral-200.
Focus: Blue focus ring (--color-primary-500), slight scale.

Secondary
Same as primary but transparent bg, white text default.

Primary (Variant 2)
Default: Blue bg, white text, 8px radius, 2px blue border.
Hover: Bg black, text black.
Active: Neutral-200 bg, text neutral-200.
Focus: Blue ring, neutral-200 bg.

6.2 Links

Three styles:

• White text → hover black.
• Black text → hover white.
• Blue link → hover black and remove underline.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #1966ff;
  --color-link-blue: #2583ee;
  --color-black: #000000;
  --color-white: #ffffff;
  /* ... all other extracted hex values ... */

  /* Typography */
  --font-primary: "BerninaSans", -apple-system, Roboto, Helvetica, Arial;
  --font-size-h1: 50px;
  --font-size-body: 16px;
  /* ... all sizes ... */

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-5: 5px;
  /* ... */

  /* Radius */
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 50px;

  /* Shadows */
  --shadow-low: rgba(2, 9, 27, 0.15) 0px 4px 10px;
  --shadow-high: rgba(2, 9, 27, 0.15) 0px 8px 20px;
}

8. AI Coding Assistant Prompt

# Dynatrace Design System Specification

System Prompt:
You are a Dynatrace design expert. Build UIs matching their visual language exactly.

Brand Context:
Dynatrace’s design is precise, technical, and enterprise-focused. It uses a bold primary blue with deep purples and neutrals. Typography is BerninaSans with strong weight hierarchy.

Color Palette:
- Primary Blue: #1966ff — CTAs, buttons, focus rings
- Link Blue: #2583ee — Links in legal/footer
- Black: #000000 — Text, icons
- White: #ffffff — Backgrounds, text
- Secondary Purple: #5000b8 — Accents
- Error Red: #f43d5a — Alerts
- Positive Green: #02d394 — Success states
- Warning Yellow: #fdc300 — Warnings
- Neutral Gray: #707070 — Body text

Typography:
- Font Family: BerninaSans, -apple-system, Roboto, Helvetica, Arial
- Sizes: H1 50px/800, H2 40px/800, Body 16–18px/400–500, Buttons 14.4–18px
- Line heights: 1.2–1.63 depending on context

Spacing & Grid:
- Base: 8px
- Scale: 1, 2, 5, 8, 10, 12, 16, 20, 24, 32, 64, 96, 240px
- Apply to padding, margins in multiples of 8px

Border Radius:
- sm: 2px — buttons, inputs
- md: 8px — cards
- lg: 12px — modals
- full: 50px — pill search inputs

Shadows & Depth:
- Low: rgba(2, 9, 27, 0.15) 0px 4px 10px
- High: rgba(2, 9, 27, 0.15) 0px 8px 20px

Component Specifications:

Primary Button:
```css
.btn-primary {
  background: #1966ff;
  color: #ffffff;
  padding: 10px 30px;
  border-radius: 8px;
  border: 2px solid #1966ff;
  font-weight: 500;
  font-size: 18px;
}
.btn-primary:hover {
  background: #000000;
  color: #000000;
}

Secondary Button:

.btn-secondary {
  background: transparent;
  color: #ffffff;
  padding: 10px 30px;
  border-radius: 8px;
  border: 2px solid #ffffff;
}

Layout & Responsive Rules:

• Breakpoints: 320px, 768px, 1024px, 1280px, 1720px, 1860px
• Max content width: 1280px desktop

Interaction Rules:

• Transition: 150ms ease
• Focus: dotted outline or blue ring

DO List:

• Use only palette colors
• Maintain 8px spacing grid
• Use BerninaSans for all text
• Keep buttons consistent radius
• Use strong contrast

DON'T List:

• Don't invent new colors
• Don't mix rounded and sharp corners
• Don't use drop shadows outside defined set

Code Examples:

Primary Button:

.btn-primary { background:#1966ff; color:#fff; padding:10px 30px; border-radius:8px; }

Card:

.card { background:#fff; border-radius:12px; padding:24px; box-shadow:var(--shadow-low); }

Form Input:

.input { border:1px solid #c2c2c2; border-radius:8px; padding:12px; font-size:16px; }

---

## 9. Summary

**TL;DR** — Dynatrace’s design system is a disciplined, enterprise-focused toolkit: bold primary blue, deep purples, crisp BerninaSans typography, 8px spacing grid, and precise component states. It’s built for clarity and trust.  

**Brand Keywords**: enterprise-precision, bold-technical, high-contrast, grid-disciplined, functional-color