Design System inspired by Datadog

Monitoring platform. Purple brand, dashboard-heavy, observability aesthetic.

Usage

npx getdesign@latest add datadog

Run this command from your project root, then ask your AI assistant to use DESIGN.md for UI work.

Installs

Bookmarked

Not an official Datadog design system. A curated starting point for building Datadog-like UIs with your AI coding agent.

Monitoring platform. Purple brand, dashboard-heavy, observability aesthetic.

Preview

datadog.design.md

Brand System Catalog

DESIGN SYSTEM INSPIRATION OF DATADOG

Monitoring platform. Purple brand, dashboard-heavy, observability aesthetic.

Explore the system View tokens

Color Palette

Monitoring platform. Purple brand, dashboard-heavy, observability aesthetic.

Primary

DD Purple

#632ca6

Brand color

White

#ffffff

Brand color

Dark

#130338

Brand color

Light Purple

#f3ecff

Brand color

Gray

#6b7280

Brand color

Green

#2cb13e

Brand color

Red

#db0d43

Brand color

Yellow

#f0c800

Brand color

Blue

#118aef

Brand color

Typography

A type system inspired by Datadog.

system-ui

system-ui, system-ui

Inter

Inter, system-ui

DISPLAY / 64px / 700 / 1.1

EVERYONE

H1 / 48px / 700 / 1.2

A disciplined editorial voice

H2 / 32px / 600 / 1.3

Section heading

BODY / 16px / 400 / 1.6

Body copy reads at the size and rhythm extracted from the source spec. Lorem ipsum dolor sit amet.

SMALL / 14px / 400 / 1.5

Small

CODE / 14px / 400 / 1.6

Code

Buttons

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

Not detected on this URL

Cards

Card patterns inspired by Datadog.

Not detected on this URL

Components

Other component primitives mapped from the Datadog spec.

Not detected on this URL

Design System Inspired by Datadog

1. Visual Theme & Atmosphere

Monitoring platform. Purple brand, dashboard-heavy, observability aesthetic.

Key Characteristics:

Purple (#632CA6) as primary brand color

Dashboard-heavy data visualization aesthetic

Dog mascot as iconic brand element

Observability metrics and charts UI

Time-series graph components

2. Color Palette & Roles

Primary

DD Purple (#632CA6): Brand color
White (#FFFFFF): Brand color
Dark (#130338): Brand color
Light Purple (#F3ECFF): Brand color
Gray (#6B7280): Brand color
Green (#2CB13E): Brand color
Red (#DB0D43): Brand color
Yellow (#F0C800): Brand color
Blue (#118AEF): Brand color

3. Typography Rules

Font Family

Display & UI: system-ui, Inter

Hierarchy

Role	Size	Weight	Line Height
Display	64px	700	1.1
H1	48px	700	1.2
H2	32px	600	1.3
Body	16px	400	1.6
Small	14px	400	1.5
Code	14px	400	1.6

4. Component Stylings

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

5. Layout Principles

Base unit: 4-8px
Max container: 1100-1200px
Consistent section spacing: 80-120px vertical

6. Depth & Elevation

Depth communicated through background color shifts, subtle shadows, or border treatments.

7. Do's and Don'ts

Do

Follow the established color palette strictly
Maintain typographic hierarchy
Use brand-consistent border-radius

Don't

Introduce off-brand colors
Use inconsistent spacing
Override the established visual language

8. Responsive Behavior

Breakpoint	Width
Mobile	<640px
Tablet	640-1024px
Desktop	>1024px

9. Agent Prompt Guide

Quick Color Reference

DD Purple: #632CA6
White: #FFFFFF
Dark: #130338
Light Purple: #F3ECFF
Gray: #6B7280
Green: #2CB13E

Typography

Font: system-ui, Inter