New Relic Brand Design System Deep Dive

1. Brand Overview

New Relic’s design language screams developer-first, but it’s polished enough for enterprise buyers. This isn’t a “marketing site” aesthetic — it’s a UI that feels like it could be the front-end of the actual product. You get strong dark backgrounds (#1d252c), neon-like greens (#1ce783), and clean sans-serif typography. It’s functional, but it’s also opinionated.

The vibe: modern tech platform, confident and precise. No gratuitous gradients, very few ornamental flourishes. Components are built with Tailwind utility classes and Vuetify structure — meaning they’re modular, responsive, and consistent. The spacing is based on an 8px grid, which makes everything align cleanly for both app-style UI and marketing content.

They’ve clearly optimized for accessibility in dark mode: high-contrast greens for CTAs, muted gray text for secondary copy, and white accents for structural elements. Buttons are crisp rectangles with small radii (4px), not pill-shaped by default — though pill shapes (9999px) appear in specific micro-interactions.

Typography is clean and modern: Soehne is the workhorse, supported by Corbel and Arial fallbacks. Sizes range from massive 72px headlines to tiny 12px uppercase captions. Line heights are tight — this gives the brand a denser, more serious feel compared to airy consumer brands.

Who’s this for? Engineers, product managers, CTOs — people who want to see data visualizations, dashboards, and actionable UI. The design says “we handle complexity” without looking messy. It’s not playful, and it’s not trying to be “cool” in a lifestyle sense. It’s confident tech minimalism with a slight neon punch.

2. Color System

2.1 Primary Colors

The core brand color is a deep near-black: #1d252c (rgb(29, 37, 44)). This is the foundation — backgrounds, text in light contexts, and the “neutral” base for UI. The primary accent is #1ce783 (rgb(28, 231, 131)), a vivid green that reads as “success” but is used for primary actions. It’s eye-catching against the dark background and stays readable even at small sizes.

Compared to competitors: Datadog leans purple, Grafana leans orange, Splunk leans black/white — New Relic’s green is more “signal” oriented, like a healthy status light. It’s unique in the observability space.

2.2 Complete Palette

2.3 Color Relationships

This palette is built for dark mode first. Primary dark background (#1d252c) with bright green (#1ce783) yields excellent contrast — AAA level for text. Gray (#898e91) provides readable secondary text without overpowering. White (#ffffff) is used sparingly for maximum contrast.

Teal (#0095a9) is a secondary accent — it doesn’t clash with green because it’s adjacent on the cool spectrum. The Osano-specific purples and blues are exceptions, clearly scoped to compliance UI.

2.4 Usage Guide

• Works well: #1d252c with #1ce783 (primary CTA), #0095a9 for chart lines, #ffffff for icons.
• Avoid: green (#1ce783) on teal (#0095a9) — low contrast.
• Hover states often invert or outline the button using #1ce783.
• Focus outlines use semi-transparent green (rgba(28, 231, 131, 0.3)).

3. Typography

3.1 Font Families

Primary: Soehne, fallbacks Corbel, Arial.
Secondary (video player contexts): WistiaPlayerInter, fallback Helvetica.
System fallback: Helvetica, Arial, plus an extended Asian font stack for multilingual support.

No Google Fonts, no Adobe Fonts — likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

Headlines are tight — low line height keeps them compact. Body copy at 18px is slightly larger than the web standard 16px, which helps readability against the dark background. Captions drop to 12px, often uppercase with 2px letter spacing — classic data table style.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid.
Common values: 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px.

4.2 Layout

Breakpoints:
342px, 376px, 480px, 576px, 768px, 800px, 991px, 992px, 1024px, 1100px, 1200px, 1248px, 1320px.
Responsive approach: Tailwind classes for layout, Vuetify for components.

5. Visual Elements

Border Radius

Rounded corners are restrained — default is 4px for buttons.

Shadows

Mostly flat design — many elements have none. When used, shadows are soft and large:
rgba(29, 37, 44, 0.66) 0px 40px 72px -16px.

Borders are used to separate sections: 1px solid rgba(249, 250, 250, 0.1).

6. Components

6.1 Buttons

Primary (btn-green)

• Default: BG #1ce783, text #1d252c, radius 4px, padding 0 32px.
• Hover: Transparent BG, border 2px solid #1ce783, same text color.
• Active: BG #007853, border 1px solid #555.
• Focus: Transparent BG, border 1px solid #ccc.

Secondary (btn-secondary)

• Default: Transparent BG, text #f9fafa, border 1px solid #f9fafa.
• Hover: Transparent BG, border 2px solid #1ce783.

Dark Primary (btn-primary)

• Default: BG #1d252c, text #1ce783.
• Hover: Transparent BG, border 2px solid #1ce783.

Rounded Special

• Default: BG #141a1f, text #f9fafa, radius 16px, border 12px solid #141a1f.

6.2 Links

Four styles:

1. Light link: rgba(249, 250, 250, 0.5) default, underline; hover #1d252c.
2. Dark link: #1d252c default, no underline; hover underline.
3. Green link: #1ce783 default; hover dark.
4. Gray link: #898e91 default; hover dark.

6.3 Forms

No text inputs detailed — likely styled via Vuetify defaults.

6.4 Cards

Radius varies (12px, 16px, 20px), padding from spacing scale, often with 1px solid rgba(249, 250, 250, 0.1) borders, minimal shadows.

7. Design Tokens

:root {
  /* Colors */
  --color-primary-dark: #1d252c;
  --color-secondary-transparent: transparent;
  --color-neutral-gray1: #898e91;
  --color-accent-teal: #0095a9;
  --color-accent-green: #1ce783;
  --color-gray-overlay: #858a8d;
  --color-light-overlay1: #f9fafa;
  --color-light-overlay2: #f9fafa;
  --color-osano-info-bg: #180D43;
  --color-osano-deny-bg: #7A3FF1;
  --color-osano-link: #c5c5c5;
  --color-osano-link-focus: #b1b1b1;
  --color-osano-widget: #37cd8f;
  --color-osano-widget-outline: #29246a;
  --color-dialog-bg: #252e39;
  --color-white: #ffffff;

  /* Typography */
  --font-primary: "Soehne", Corbel, Arial;
  --font-secondary: "WistiaPlayerInter", Helvetica;
  --font-size-h1-lg: 72px;
  --font-size-h1-md: 56px;
  --font-size-h1-sm: 44px;
  --font-size-subtitle: 24px;
  --font-size-h2: 20px;
  --font-size-body-lg: 18px;
  --font-size-caption: 14px;
  --font-size-caption-sm: 12px;

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-xxl: 20px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-soft-lg: rgba(29, 37, 44, 0.66) 0px 40px 72px -16px;
}

8. AI Coding Assistant Prompt

# New Relic Design System Specification

You are a New Relic design expert. Build UIs matching their visual language exactly.

## Brand Context
New Relic’s design is developer-focused, minimal, and precise. Dark mode is the default, with vivid greens for primary actions. Typography is clean and functional, spacing follows an 8px grid.

## Color Palette
- Primary Dark: #1d252c — Backgrounds, base UI
- Secondary Transparent: transparent — Overlay backgrounds
- Neutral Gray: #898e91 — Secondary text
- Accent Teal: #0095a9 — Data visualization accents
- Accent Green: #1ce783 — Primary CTAs
- Gray Overlay: #858a8d — Hover/focus states
- Light Overlay: #f9fafa — Hover borders
- Osano Info BG: #180D43 — Privacy modals
- Osano Deny BG: #7A3FF1 — Secondary modal actions
- Osano Link: #c5c5c5 — Links in modals
- Osano Link Focus: #b1b1b1 — Focused link
- Osano Widget: #37cd8f — Widget accents
- Osano Widget Outline: #29246a — Widget borders
- Dialog BG: #252e39 — Modal backgrounds
- White: #ffffff — Icons, text on dark

## Typography
- Primary: "Soehne", Corbel, Arial
- Secondary: "WistiaPlayerInter", Helvetica

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 large | 72px | 500 | 1.06 | Hero titles |
| H1 medium | 56px | 500 | 1.07 | Section titles |
| H1 small | 44px | 500 | 1.14 | Subsection titles |
| Subtitle | 24px | 400 | 1.33 | Supporting headings |
| H2 | 20px | 600 | 1.40 | Minor headings |
| Body large | 18px | 400 | 1.56 | Paragraphs |
| Caption | 14px | 400 | 1.50 | Notes |
| Caption small | 12px | 400 | 1.33 | Labels |

## Spacing & Grid
Base: 8px  
Scale: 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px

## Border Radius
- none: 0px — Tables
- xs: 2px — Chips
- sm: 4px — Buttons
- md: 8px — Images
- lg: 12px — Cards
- xl: 16px — Dialogs
- xxl: 20px — Large cards
- pill: 9999px — Pills
- circle: 50% — Avatars

## Shadows & Depth
Mostly flat design. Use `rgba(29, 37, 44, 0.66) 0px 40px 72px -16px` for elevated modals.

## Components

### Primary Button
Default: BG #1ce783, text #1d252c, radius 4px, padding 0 32px, border none  
Hover: Transparent BG, border 2px solid #1ce783  
Active: BG #007853, border 1px solid #555  
Focus: Transparent BG, border 1px solid #ccc

### Secondary Button
Default: Transparent BG, text #f9fafa, border 1px solid #f9fafa  
Hover: Transparent BG, border 2px solid #1ce783

### Link Styles
Light link: rgba(249, 250, 250, 0.5) underline → hover #1d252c  
Dark link: #1d252c no underline → hover underline  
Green link: #1ce783 no underline → hover #1d252c  
Gray link: #898e91 no underline → hover #1d252c

### Card
Radius: 12px–20px, padding from spacing scale, border 1px solid rgba(249, 250, 250, 0.1)

## Layout & Responsive Rules
Breakpoints: 342px, 376px, 480px, 576px, 768px, 800px, 991px, 992px, 1024px, 1100px, 1200px, 1248px, 1320px  
Page padding: 16px mobile / 32px desktop

## Interaction Rules
- Transition timing: 150ms ease
- Focus indicators: 1px–2px solid #1ce783
- Hover outlines use primary green

## DO List
- Use only palette colors
- Maintain 8px grid
- Keep line heights tight for headings
- Use 4px radius for buttons
- Scope Osano colors to privacy UI
- Use green only for CTAs and active states

## DON'T List
- Don’t mix teal and green in the same element
- Don’t use shadows for buttons
- Don’t round corners inconsistently
- Don’t use colors outside the palette
- Don’t increase line height for headings beyond spec

## Code Examples

```css
.btn-primary {
  background: #1ce783;
  color: #1d252c;
  padding: 0 32px;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 400;
  border: none;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: transparent;
  border: 2px solid #1ce783;
}
.btn-primary:focus {
  border: 1px solid #ccc;
}

.card {
  background: #1d252c;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid rgba(249, 250, 250, 0.1);
}

.input {
  border: 1px solid rgba(249, 250, 250, 0.1);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  background: #1d252c;
  color: #ffffff;
}
```

9. Summary

TL;DR — New Relic’s design system is dark, tight, and developer-focused. Greens signal action, typography is compact, spacing follows an 8px grid. Tailwind + Vuetify give it structure. Stick to the palette — it’s deliberate.

Brand Keywords: tech-minimalist, neon-signal, dark-mode-native, developer-serious