---
version: alpha
name: Datadog
description: Enterprise observability platform with a clean white canvas, NationalWeb's wide-ranging weight system, signature purple CTAs, and a restrained technical confidence that never shouts.

colors:
  # Canvas + surfaces
  background: "#ffffff"
  surface: "#f5f5f5"
  surface-alt: "#f8f8f8"

  # Text / ink
  ink: "#212529"
  ink-secondary: "#555555"
  on-background: "#212529"
  on-surface: "#212529"

  # Brand accent — Datadog purple
  primary: "#632ca6"
  on-primary: "#ffffff"
  primary-hover: "#7735c7"  # was rgb(119,53,199) — hover state from dembrandt extraction
  primary-container: "#f0e9f9"  # opaque approx of rgba(99,44,166,0.06) over white — Google format requires hex

  # Interactive
  text-hover: "#7700ff"  # interactive link color-shift observed on nav — Google format requires hex
  focus-ring: "#3b82f6"
  focus-tint: "#9dc1fb"  # opaque approx of rgba(59,130,246,0.5) over white — Google format requires hex

  # Semantic
  success: "#00b050"
  warning: "#f5a623"
  error: "#d9232d"
  info: "#1b6ec2"

  # Borders
  border: "#d9d9d9"
  border-subtle: "#e8e8e8"

  # Shadow tints (opaque approximations of rgba originals)
  shadow-soft: "#ebebeb"   # was rgba(0,0,0,0.07) over white — Google format requires hex
  shadow-medium: "#cccccc"  # was rgba(0,0,0,0.2) over white — Google format requires hex

typography:
  display-hero:
    fontFamily: "NationalWeb, Helvetica, Arial, sans-serif"
    fontSize: 68px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0px
  display:
    fontFamily: "NationalWeb, Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: 0px
  heading-section:
    fontFamily: "NationalWeb, Helvetica, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.11
    letterSpacing: 0px
  heading-sub:
    fontFamily: "NationalWeb, Helvetica, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.14
    letterSpacing: 0px
  heading-5:
    fontFamily: "NationalWeb, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: 0.4px
  body-large:
    fontFamily: "NationalWeb, Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 300
    lineHeight: 1.43
    letterSpacing: 0px
  body:
    fontFamily: "NationalWeb, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.43
    letterSpacing: 0px
  body-semibold:
    fontFamily: "NationalWeb, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.43
    letterSpacing: 0px
  nav-link:
    fontFamily: "NationalWeb, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0px
  button-ui:
    fontFamily: "NationalWeb, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.08px
  caption:
    fontFamily: "NationalWeb, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 40px
  2xl: 48px
  3xl: 80px

rounded:
  none: 0px
  sm: 4px
  md: 6px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    borderColor: "{colors.primary}"
    borderWidth: 1px
    rounded: "{rounded.md}"
    padding: 12px 24px
  button-secondary-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary-hover}"
    borderColor: "{colors.primary-hover}"
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.sm}"
    padding: 8px 12px
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
  card:
    backgroundColor: "{colors.background}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: "{rounded.sm}"
    padding: 24px
  card-hover:
    boxShadow: "0px 8px 10px {colors.shadow-soft}"
  card-feature:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    padding: 32px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: "{rounded.md}"
    padding: 10px 16px
  input-focus:
    borderColor: "{colors.primary}"
    outlineColor: "{colors.focus-tint}"
    outlineWidth: 2px
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  badge-neutral:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  nav:
    backgroundColor: "{colors.background}"
    borderBottomColor: "{colors.border-subtle}"
    borderBottomWidth: 1px
    textColor: "{colors.ink-secondary}"
    typography: "{typography.nav-link}"
    padding: 0px 40px
  nav-item-hover:
    textColor: "{colors.primary}"
  tag:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
---

# Datadog Design System

## Overview

Datadog's visual identity is built around a principle of technical credibility without visual aggression. A pure white canvas (`{colors.background}`) establishes an open, airy foundation that lets product screenshots and data visualizations breathe — this isn't a dark-mode data dashboard aesthetic, but a bright enterprise SaaS that trusts its content. The platform's signature `{colors.primary}` purple appears sparingly but unmistakably: it owns every primary CTA and active link state, carving out strong brand recognition across a sea of blue-dominant enterprise software.

NationalWeb is Datadog's custom typeface, and it carries the entire typographic spectrum on its own. The system exploits NationalWeb's unusual weight range — weight 300 for body and supporting text, weight 600–700 for headings and UI labels — creating a tonal contrast between relaxed, readable paragraphs and assertive, bold callouts without needing a secondary typeface. The lack of letter-spacing at most sizes signals confidence rather than formality; the few exceptions (heading-5 at `0.4px`, button labels at `0.08px`) introduce just enough structure for UI affordances.

Elevation and depth are handled with deliberate restraint. Shadows are light and functional — cards gain depth on hover rather than sitting in permanent shadow — and rounded corners stay tight (`{rounded.sm}` at 4px, `{rounded.md}` at 6px), never softening toward the pill-shapes common in consumer SaaS. The overall impression is precise, professional, and performance-oriented: a platform designed for engineers who read dashboards all day.

**Key Characteristics:**
- Pure white `{colors.background}` canvas with no tinting — maximum contrast for data-dense interfaces
- Signature `{colors.primary}` purple (#632ca6) reserved exclusively for primary interactions; the rest of the UI is near-achromatic
- NationalWeb custom typeface across all roles — weight 300 body against weight 700 headings creates a wide, intentional tonal range
- `{typography.display-hero}` at 68px / weight 600 is imposing without being decorative — function-first headline scale
- Tight border-radius vocabulary: `{rounded.sm}` (4px) for cards and containers, `{rounded.md}` (6px) for inputs and buttons — no organic softness
- `{typography.body}` and `{typography.body-large}` use weight 300 — an unusual lightness that reads as calm intelligence rather than assertiveness
- Font feature settings `"clig", "liga", "lnum"` active throughout — tabular numerals keep metrics and numbers grid-aligned in dashboards
- Hover transitions at 0.15s ease-in-out — responsive but never flashy; `box-shadow` transitions on interactive cards
- Nav links shift from `{colors.ink-secondary}` to `{colors.primary}` on hover — a color-shift that reinforces brand presence in the chrome
- 8px base spacing grid with 12px, 20px, and 40px as the primary rhythm values
- CTAs use `{typography.button-ui}` weight 700 with slight letter-spacing (0.08px) — legible at small sizes and visually distinct from body text
- Product screenshots and UI previews carry the visual weight of most pages — the design system frames rather than competes

## Colors

### Primary
- **White** (`{colors.background}`): The dominant canvas. Every page begins here, allowing product visuals to establish brand color rather than the chrome.
- **Near-black** (`{colors.ink}`): #212529 — a very dark warm gray (not pure black) for primary body and heading text. Reduces harshness while maintaining high contrast.

### Brand Accent
- **Datadog Purple** (`{colors.primary}`): #632ca6 — the sole brand color in the system. Applied to primary CTAs, active navigation states, link hovers, and interactive accents. Hover deepens to `{colors.primary-hover}` (#7735c7). A tinted container `{colors.primary-container}` is used for badge backgrounds and hover fills on secondary buttons.

### Text States
- **Secondary ink** (`{colors.ink-secondary}`): #555555 — supporting copy, nav labels, captions. Noticeably lighter than `{colors.ink}` to establish a clear visual hierarchy.
- **Interactive hover** (`{colors.text-hover}`): #7700ff — observed on nav link hover transitions, a vivid violet shift that reinforces the purple brand identity.
- **Focus** (`{colors.focus-ring}`): #3b82f6 — standard accessible blue focus ring; `{colors.focus-tint}` provides a softer outer glow.

### Semantic
- **Success** (`{colors.success}`): #00b050, **Warning** (`{colors.warning}`): #f5a623, **Error** (`{colors.error}`): #d9232d, **Info** (`{colors.info}`): #1b6ec2 — conventional enterprise status palette.

### Borders & Shadows
- **Border** (`{colors.border}`): #d9d9d9 — light and unobtrusive; `{colors.border-subtle}` (#e8e8e8) for nav hairlines and dividers.
- **Shadow** (`{colors.shadow-soft}`): opaque approximation of rgba(0,0,0,0.07) — barely-visible lift for hover states on cards.

## Typography

### Font Family
- **Primary**: `NationalWeb`, with fallbacks: `Helvetica, Arial, sans-serif`
- NationalWeb is Datadog's proprietary typeface — not available on Google Fonts. The closest Google Font match for generated UIs is **Inter** (geometric neutral) or **Plus Jakarta Sans** (slightly warmer construction).
- **OpenType Features**: `"clig"` (contextual ligatures), `"liga"` (standard ligatures), `"lnum"` (lining numerals — critical for data displays), `"frac" 0` (fractions disabled).

### Hierarchy

The complete type scale is declared in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | Primary homepage hero headings — 68px/600 |
| `display` | Section-level feature headers — 48px/600 |
| `heading-section` | Sub-section headings and card titles — 36px/700 |
| `heading-sub` | Feature list headings — 28px/700 |
| `heading-5` | Small callout labels with uppercase-weight spacing — 18px/600 |
| `body-large` | Lead paragraphs and intro copy — 22px/300 |
| `body` | Standard body text — 18px/300 |
| `body-semibold` | Emphasized body copy and feature descriptions — 18px/600 |
| `nav-link` | Navigation labels — 16px/600 |
| `button-ui` | All button labels — 18px/700, slight tracking |
| `caption` | Tags, badges, labels — 12px/700 |

### Principles
- NationalWeb's weight 300 body text is the most distinctive typographic decision — it reads as calm expertise rather than consumer-friendly warmth
- Weight spans 300 to 700 within a single family, eliminating the need for a secondary typeface
- Tabular lining numerals (`lnum`) are always active — critical for the product's data-density
- No display-level letter-spacing (other than heading-5 labels) — headline type is confident, not decorative

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 4px, primary rhythm: 12px / 20px / 40px.

Datadog's spacing is purposeful and moderately dense — the product serves engineers monitoring infrastructure, so it doesn't waste vertical space with overly generous padding. Marketing pages open up with larger gaps (`{spacing.xl}` and `{spacing.3xl}`) while UI components run tight.

### Grid & Container
- Max content width: approximately 1440px (breakpoint observed at 1400px and 1512px)
- Marketing sections use a 12-column grid with content spanning 8–10 columns
- Feature cards typically run 3-column grids on desktop
- Navigation is horizontally scrollable mega-menu at large breakpoints

### Whitespace Philosophy
- Breathing room is earned — marketing heroes are spacious, but supporting content rows are efficiently packed
- Asymmetric section layouts (text left / visual right) are the dominant pattern, preserving content density
- Section separation uses generous `{spacing.3xl}` vertical gaps rather than dividing lines

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, `{colors.border}` hairline | Default cards, table rows, input resting state |
| Subtle (Level 1) | `0px 8px 10px {colors.shadow-soft}` | Cards on hover, dropdown menus |
| Elevated (Level 2) | `0px 4px 10px {colors.shadow-medium}` | Modals, sticky nav on scroll |
| Focus Ring | `2px solid {colors.focus-ring}` + `{colors.focus-tint}` glow | All keyboard-interactive elements |

**Shadow Philosophy**: Shadows at Datadog are transitional, not ambient. Cards start flat and gain depth only on hover — this teaches the user that elevation signals interactivity rather than hierarchy. The shadows themselves are very light (7% opacity against white), keeping the interface crisp and avoiding the "layered paper" heaviness of more expressive enterprise tools. Modal overlays are the only place where more pronounced shadowing appears.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Tables, horizontal rules, nav underlines |
| `sm` | 4px | Cards, feature tiles, tag chips, most containers |
| `md` | 6px | Buttons, input fields, textareas |
| `pill` | 9999px | Status badges, plan tags |

Datadog's shape language is decisively angular. The 4px/6px radius vocabulary is tight enough to signal engineering precision — this is a product that tracks millisecond response times, and its UI reflects that. The jump to `{rounded.pill}` for badges creates a deliberate contrast between container-shapes (angular) and metadata-chips (soft).

## Components

The complete component spec lives in the `components:` token block above.

### Button variants
- **`button-primary`** — Solid `{colors.primary}` fill, white label, 6px radius. The exclusive CTA shape: "Get Started Free", trial sign-ups, product sign-in. Hover lifts to `{colors.primary-hover}`.
- **`button-secondary`** — Outlined in `{colors.primary}`, transparent fill. Used alongside primary buttons for secondary actions like "Learn More" or "View Docs". Hover fills with `{colors.primary-container}`.
- **`button-ghost`** — No border, no fill. Used for nav-level items and inline text actions. Text color shifts from `{colors.ink-secondary}` to `{colors.ink}` on hover.

### Cards
Cards are `{colors.background}` with a 1px `{colors.border}` border and `{rounded.sm}` radius. Feature section cards use `{colors.surface}` as the background. Hover state adds `card-hover` shadow — this is the primary depth signal.

### Inputs
Standard inputs carry a 1px `{colors.border}` border, `{rounded.md}` radius, and weight-300 placeholder text. On focus, the border shifts to `{colors.primary}` with a `{colors.focus-tint}` outline — clear and accessible without being obtrusive.

### Badges / Tags
Two shapes: `badge` uses `{rounded.pill}` for status metadata and plan labels (e.g., "Enterprise", "New"). `tag` uses `{rounded.sm}` for categorical chips. Both render in `{colors.primary-container}` / `{colors.primary}` for brand-connected labeling.

### Navigation
Full-width sticky nav on scroll, 1px `{colors.border-subtle}` bottom border. Links use `{typography.nav-link}` and shift from `{colors.ink-secondary}` to `{colors.primary}` on hover. Mega-menu dropdowns appear at desktop breakpoints; collapses to hamburger below 768px.

## Do's and Don'ts

### Do
- Use `{colors.primary}` exclusively for primary CTAs and active states — it functions as a brand signal, not a general accent
- Apply `{typography.body}` at weight 300 for supporting copy — the lightness is deliberate and creates the right hierarchy against bold headings
- Use `{rounded.sm}` (4px) for containers and `{rounded.md}` (6px) for interactive elements — this two-value vocabulary must stay consistent
- Keep shadows transitional — add `card-hover` shadow only on hover, not as a default resting state
- Use `lnum` (lining numerals) for all numerical displays — tabular alignment is required for data-heavy contexts
- Apply `{spacing.xl}` (40px) as the standard section-row gutter on marketing pages
- Use `{colors.ink-secondary}` for supporting copy and nav labels — never pure `{colors.ink}` for secondary text
- Maintain the font-feature-settings `"clig", "liga", "lnum"` on all NationalWeb/Inter text

### Don't
- Don't use `{colors.primary}` for decorative purposes — no purple backgrounds, purple icon fills, or purple borders outside of interactive affordances
- Don't add border-radius values outside `{rounded.sm}`, `{rounded.md}`, and `{rounded.pill}` — mid-range values like 12px or 16px break the shape language
- Don't introduce a second typeface — the weight range of NationalWeb (or Inter in generated UIs) covers all roles
- Don't apply permanent (non-hover) box shadows to cards — the flat default is intentional and signals a non-interactive state
- Don't use weight 400 or 500 body text — the system reads 300 as body and 600+ as UI/heading; mid-weights create ambiguity
- Don't use colored section backgrounds — all marketing sections are white or `{colors.surface}` gray; tinted backgrounds break the clinical precision of the brand
- Don't override `{colors.focus-ring}` — the accessible blue focus state must not be replaced with the brand purple to avoid confusion with interactive accent
- Don't center-align body paragraphs — left-alignment is mandatory for body copy; centered text is only used for short hero subheads

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single column, tightest spacing |
| Mobile | 375–767px | Single column, hamburger nav, stacked hero |
| Tablet | 768–1023px | 2-column feature grids, nav may still compress |
| Desktop | 1024–1399px | Full mega-menu nav, 3-column feature grids |
| Large Desktop | ≥1400px | Max-width container (~1440px) centered, additional spacing |

### Touch Targets
- Interactive nav items and CTAs maintain minimum 44px touch target height on mobile
- Hamburger menu expands to full-viewport overlay with generous tap targets

### Collapsing Strategy
- Navigation collapses to hamburger at 768px; mega-menus become full-screen accordions
- Hero sections compress from 2-column (text + visual) to single-column stacked at mobile
- 3-column feature card grids collapse to 1-column on mobile, 2-column on tablet
- Spacing tokens scale down proportionally — `{spacing.xl}` gaps compress to `{spacing.lg}` on mobile

### Image Behavior
- Product screenshots and dashboard previews maintain aspect ratio; may crop or scale at mobile
- Hero visuals (product UI mockups) become full-width at mobile with reduced height
- Logo grid sections wrap to 2×n at tablet, 1×n at mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Brand accent: `{colors.primary}`
- Border: `{colors.border}`
- CTA: `{colors.primary}`

### Example Component Prompts

- "Build a Datadog-style hero section with a white `{colors.background}` canvas, a `{typography.display-hero}` heading in `{colors.ink}` (NationalWeb 600 or Inter 600 as fallback), a `{typography.body-large}` subtitle at weight 300, a `{components.button-primary}` CTA with `{colors.primary}` fill and 6px radius, and a `{components.button-secondary}` outline button beside it. Keep horizontal padding at `{spacing.xl}` on each side."

- "Create a Datadog-style feature card using `{components.card}`: white `{colors.background}`, 1px `{colors.border}` border, 4px `{rounded.sm}` radius, 24px padding. Add a small `{components.badge}` tag in `{colors.primary-container}` / `{colors.primary}` at the top. Heading in `{typography.heading-sub}`, body in `{typography.body}` weight 300. On hover, apply `{components.card-hover}` box-shadow: `0px 8px 10px {colors.shadow-soft}`."

- "Implement a Datadog-style primary button using `{components.button-primary}`: `{colors.primary}` background, white text, `{typography.button-ui}` (weight 700, 0.08px letter-spacing), 6px border-radius, 12px 24px padding. Hover state transitions background to `{colors.primary-hover}` over 0.15s ease-in-out."

- "Build a Datadog-style navigation bar: white `{colors.background}`, 1px `{colors.border-subtle}` bottom border, logo left. Nav links in `{typography.nav-link}` (16px/600) using `{colors.ink-secondary}`. On hover, links transition to `{colors.primary}` at 0.15s ease-in-out. Right side: ghost button for login + `{components.button-primary}` 'Get Started Free' CTA. Sticky on scroll."

- "Create a Datadog-style status badge system using `{components.badge}`: pill-shaped (`{rounded.pill}`), `{colors.primary-container}` background, `{colors.primary}` text, `{typography.caption}` (12px/700), 4px 10px padding. For neutral/gray states use `{components.badge-neutral}` with `{colors.surface}` background and `{colors.ink-secondary}` text."

### Iteration Guide

1. Start with `{colors.background}` white canvas — never tint backgrounds or add a colored hero fill
2. Brand accent rule: `{colors.primary}` purple appears ONLY on primary CTAs, active nav states, and interactive focus; everywhere else is achromatic
3. Typography weight rule: 300 for body, 600 for UI/semibold labels, 700 for headings and buttons — skip 400 and 500
4. Elevation formula: flat by default → `card-hover` shadow (`0px 8px 10px {colors.shadow-soft}`) on hover only
5. Color hierarchy: `{colors.ink}` for primary text → `{colors.ink-secondary}` for secondary/nav → `{colors.primary}` for interactive only
6. Shape vocabulary: `{rounded.sm}` (4px) for containers, `{rounded.md}` (6px) for inputs/buttons, `{rounded.pill}` for metadata badges — nothing else
7. Signature detail: enable `lnum` (lining numerals) and `liga` font-features on all text — especially critical in any data display, metric card, or dashboard component

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Datadog. Brand names and trademarks belong to their respective owners.