--- version: alpha name: "Datadog" website: "https://www.datadoghq.com" description: "Datadog’s React design system pairs a deep violet brand voltage with a midnight canvas, uses the NationalWeb type family across display, heading, and body styles, and defines fourteen reusable components ranging from primary buttons to top‑nav cards, all calibrated for high‑contrast observability dashboards; buttons sit at 54 px height with 4 px radius, spacing tokens lean on a 4 px grid, and secondary text lives in ink‑muted gray for clear hierarchy." seo: title: "Datadog Design System for React — violet accent, NationalWeb, 14 components" metaDescription: "The Datadog design system gives React teams a deep violet accent on a midnight canvas, NationalWeb typography, and a set of fourteen components tuned for observability dashboards. It reads like a data‑first UI kit you can drop straight into a monitoring app." highlights: - "Deep violet voltage — The primary purple appears on buttons, links, and accent elements, instantly flagging actionable items and reinforcing Datadog’s brand identity across the UI." - "Midnight canvas — A near‑black background underlies hero sections, boosting contrast for white ink and making metric charts pop without extra shading tricks across the interface." - "NationalWeb typographic scale — Display, heading, and body styles span 36 px to 16 px with weights from 300 to 700, giving hierarchy without resorting to oversized caps." - "Rounded corners strategy — Most components use a 4 px radius, while cards adopt 6 px for subtle depth, creating a consistent yet tactile feel throughout the UI." - "4‑px grid spacing — Padding and margin utilities revolve around a 4 px baseline, simplifying layout decisions and keeping metric panels aligned across the interface." tags: - "Design & Creative Tools" lastUpdated: "2026-05-17" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | The first glance at Datadog’s UI feels like a control room lit by a deep violet pulse against a midnight canvas. Hero headings explode at 68 px, drenched in near‑black ink, while primary buttons glow with a violet voltage that never fades. Even the smallest caption text carries the same NationalWeb DNA, making every typographic layer feel like a coordinated alert panel. It’s a visual language built for engineers who need data at a glance, not a decorative afterthought. Why does Datadog lean into this palette? The brand treats color as a signal hierarchy: deep violet for primary actions, muted gray for secondary text, and a link‑blue that pops only where navigation demands attention. Where New Relic leans on teal gradients and Splunk sticks with grayscale, Datadog chooses a high‑contrast violet‑on‑dark scheme that amplifies metric readability. The spacing system follows a strict 4 px grid, and radii stay modest at 4 px or 6 px, reinforcing a data‑centric, no‑noise aesthetic that aligns with the observability mission. Feeding this spec into an AI generator yields components that scream “monitoring dashboard” instead of generic web UI. The system’s explicit token values—font sizes, line heights, button paddings—let the model produce code that matches Datadog’s visual cadence without manual tweaks. The one takeaway worth stealing is the disciplined contrast: a violet accent on a dark canvas that makes every alert, button, and chart instantly legible, a trick that can sharpen any telemetry‑heavy interface. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.datadoghq.com" title: "Datadog — official site" description: "Datadog's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "datadog-primary-button-styling" title: "Datadog primary button styling" answer: "Datadog’s primary button lives in deep violet, the brand’s signature voltage, with white text that pops against the hue. The button measures 54 px in height, offers 16 px vertical and 24 px horizontal padding, and rounds at a 4 px radius. Typography follows the button‑md token: 18 px size, weight 700, line‑height 18 px, and a subtle 0.08 px letter‑spacing tweak. The combination creates a high‑contrast call‑to‑action that stands out on the midnight canvas and signals an immediate next step." - id: "datadog-hero-heading-typography" title: "Datadog hero heading typography" answer: "The hero heading on Datadog’s landing page uses NationalWeb at a massive 68 px size, weight 600, and line‑height matching the font size for a tight visual block. Ink‑muted near‑black provides the text color, ensuring readability against the dark background. This typographic choice gives the headline the authority of a dashboard headline while keeping the overall hierarchy clear. The lack of extra letter‑spacing lets the headline dominate without competing with surrounding metrics." - id: "datadog-navigation-link-design" title: "Datadog navigation link design" answer: "Navigation links adopt a 18 px font from NationalWeb, weight 600, and a line‑height of roughly 25.7 px, delivering a comfortable click target. Padding is set to 8.5 px top, 12 px sides, and 9.5 px bottom, aligning the text within a consistent vertical rhythm. Text color rests in a muted gray surface-2 that blends into the dark canvas, while the same gray outlines the link’s border, creating a subtle but distinct navigation element that doesn’t distract from primary data visualizations." - id: "datadog-color-usage-for-accents" title: "Datadog color usage for accents" answer: "Datadog’s accent palette revolves around a deep violet primary, a link‑blue for interactive text, and optional pink and violet accents for special states. The violet appears on buttons, links, and highlight ribbons, reinforcing brand presence. Link‑blue is reserved for inline hyperlinks, ensuring they stand out without breaking the overall contrast scheme. Pink and extra violet accents surface in notification badges or experimental features, offering visual variety while staying within the brand’s high‑contrast philosophy." - id: "datadog-spacing-and-radius-system" title: "Datadog spacing and radius system" answer: "Spacing in Datadog’s design system follows a strict 4 px grid, with most utilities expressed as multiples of that base unit. Padding values like 4 px, 8.5 px, and 12 px appear across components, ensuring consistent gaps between metric cards and input fields. Corner radii are limited to three options: 0 px for sharp edges, 4 px for most UI elements, and a single 6 px radius for cards that need a hint of depth. This disciplined approach keeps the interface tight and data‑focused." colors: primary: "#632ca6" primary-hover: "#632ca6" primary-active: "#632ca6" ink: "#ffffff" ink-muted: "#212529" canvas: "#110617" surface-1: "#eeeeee" surface-2: "#555555" hairline: "#616161" link-blue: "#6a00ff" warning: "#fd7e14" info: "#0dcaf0" success: "#fab207" accent-pink: "#ffc8f9" accent-violet: "#8904ff" typography: display-xl: fontFamily: "NationalWeb, Helvetica, Arial, sans-serif" fontSize: 36px fontWeight: 700 lineHeight: 40px display-lg: fontFamily: "NationalWeb, Helvetica, Arial, sans-serif" fontSize: 36px fontWeight: 600 lineHeight: 40px heading-md: fontFamily: "NationalWeb, Helvetica, Arial, sans-serif" fontSize: 22px fontWeight: 700 lineHeight: 28px heading-sm: fontFamily: "NationalWeb, Helvetica, Arial, sans-serif" fontSize: 22px fontWeight: 300 lineHeight: 30px body-lg: fontFamily: "NationalWeb, Helvetica, Arial, sans-serif" fontSize: 22px fontWeight: 300 lineHeight: 30px body-md: fontFamily: "NationalWeb, Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 700 lineHeight: 18px body-sm: fontFamily: "NationalWeb, Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 300 lineHeight: 22px button-md: fontFamily: "NationalWeb, Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 700 lineHeight: 18px letterSpacing: 0.09px nav-link: fontFamily: "NationalWeb, Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 600 lineHeight: 25.7143px label-md: fontFamily: "NationalWeb, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 20px caption: fontFamily: "NationalWeb, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 300 lineHeight: 16px rounded: none: "0px" xs: "3px" sm: "4px" md: "6px" spacing: xxs: "0px" xs: "4px" sm: "8.5px" md: "12px" lg: "20px" xl: "40px" 2xl: "48px" 3xl: "15px" components: button-primary: backgroundColor: "{colors.primary}" color: "{colors.ink}" borderColor: "0" fontFamily: "{typography.button-md.fontFamily}" fontSize: "{typography.button-md.fontSize}" fontWeight: "{typography.button-md.fontWeight}" lineHeight: "{typography.button-md.lineHeight}" letterSpacing: "{typography.button-md.letterSpacing}" borderRadius: "{rounded.sm}" padding: "{spacing.md}" height: "54px" width: "235px" button-primary-hover: backgroundColor: "{colors.primary-hover}" color: "{colors.ink}" borderColor: "0" fontFamily: "{typography.button-md.fontFamily}" fontSize: "{typography.button-md.fontSize}" fontWeight: "{typography.button-md.fontWeight}" lineHeight: "{typography.button-md.lineHeight}" letterSpacing: "{typography.button-md.letterSpacing}" borderRadius: "{rounded.sm}" padding: "{spacing.md}" height: "54px" width: "235px" button-primary-active: backgroundColor: "{colors.primary-active}" color: "{colors.ink}" borderColor: "0" fontFamily: "{typography.button-md.fontFamily}" fontSize: "{typography.button-md.fontSize}" fontWeight: "{typography.button-md.fontWeight}" lineHeight: "{typography.button-md.lineHeight}" letterSpacing: "{typography.button-md.letterSpacing}" borderRadius: "{rounded.sm}" padding: "{spacing.md}" height: "54px" width: "235px" button-secondary: backgroundColor: "{colors.canvas}" color: "{colors.ink}" borderColor: "0" fontFamily: "{typography.button-md.fontFamily}" fontSize: "{typography.button-md.fontSize}" fontWeight: "{typography.button-md.fontWeight}" lineHeight: "{typography.button-md.lineHeight}" letterSpacing: "{typography.button-md.letterSpacing}" borderRadius: "{rounded.xs}" padding: "{spacing.sm}" height: "54px" width: "235px" button-secondary-hover: backgroundColor: "{colors.surface-1}" color: "{colors.ink}" borderColor: "0" fontFamily: "{typography.button-md.fontFamily}" fontSize: "{typography.button-md.fontSize}" fontWeight: "{typography.button-md.fontWeight}" lineHeight: "{typography.button-md.lineHeight}" letterSpacing: "{typography.button-md.letterSpacing}" borderRadius: "{rounded.xs}" padding: "{spacing.sm}" height: "54px" width: "235px" top-nav: backgroundColor: "{colors.surface-1}" color: "{colors.ink}" borderColor: "0" fontFamily: "{typography.nav-link.fontFamily}" fontSize: "{typography.nav-link.fontSize}" fontWeight: "{typography.nav-link.fontWeight}" lineHeight: "{typography.nav-link.lineHeight}" letterSpacing: "{typography.nav-link.letterSpacing}" borderRadius: "{rounded.none}" padding: "{spacing.lg}" nav-link: backgroundColor: "0" color: "{colors.link-blue}" borderColor: "0" fontFamily: "{typography.nav-link.fontFamily}" fontSize: "{typography.nav-link.fontSize}" fontWeight: "{typography.nav-link.fontWeight}" lineHeight: "{typography.nav-link.lineHeight}" letterSpacing: "{typography.nav-link.letterSpacing}" borderRadius: "{rounded.none}" padding: "{spacing.sm}" nav-link-hover: backgroundColor: "0" color: "{colors.link-blue}" borderColor: "0" fontFamily: "{typography.nav-link.fontFamily}" fontSize: "{typography.nav-link.fontSize}" fontWeight: "{typography.nav-link.fontWeight}" lineHeight: "{typography.nav-link.lineHeight}" letterSpacing: "{typography.nav-link.letterSpacing}" borderRadius: "{rounded.none}" padding: "{spacing.sm}" hero-heading: backgroundColor: "0" color: "{colors.ink-muted}" borderColor: "0" fontFamily: "{typography.display-xl.fontFamily}" fontSize: "{typography.display-xl.fontSize}" fontWeight: "{typography.display-xl.fontWeight}" lineHeight: "{typography.display-xl.lineHeight}" letterSpacing: "{typography.display-xl.letterSpacing}" borderRadius: "{rounded.none}" padding: "0px" body-paragraph: backgroundColor: "0" color: "{colors.ink}" borderColor: "0" fontFamily: "{typography.body-lg.fontFamily}" fontSize: "{typography.body-lg.fontSize}" fontWeight: "{typography.body-lg.fontWeight}" lineHeight: "{typography.body-lg.lineHeight}" letterSpacing: "{typography.body-lg.letterSpacing}" borderRadius: "{rounded.none}" padding: "0px" h2: backgroundColor: "0" color: "{colors.ink}" borderColor: "0" fontFamily: "{typography.heading-md.fontFamily}" fontSize: "{typography.heading-md.fontSize}" fontWeight: "{typography.heading-md.fontWeight}" lineHeight: "{typography.heading-md.lineHeight}" letterSpacing: "{typography.heading-md.letterSpacing}" borderRadius: "{rounded.none}" padding: "0px" text-input: backgroundColor: "{colors.canvas}" color: "{colors.ink}" borderColor: "{colors.hairline}" fontFamily: "{typography.body-sm.fontFamily}" fontSize: "{typography.body-sm.fontSize}" fontWeight: "{typography.body-sm.fontWeight}" lineHeight: "{typography.body-sm.lineHeight}" letterSpacing: "{typography.body-sm.letterSpacing}" borderRadius: "{rounded.sm}" padding: "{spacing.sm}" text-input-focus: backgroundColor: "{colors.canvas}" color: "{colors.ink}" borderColor: "{colors.link-blue}" fontFamily: "{typography.body-sm.fontFamily}" fontSize: "{typography.body-sm.fontSize}" fontWeight: "{typography.body-sm.fontWeight}" lineHeight: "{typography.body-sm.lineHeight}" letterSpacing: "{typography.body-sm.letterSpacing}" borderRadius: "{rounded.sm}" padding: "{spacing.sm}" card: backgroundColor: "{colors.surface-1}" color: "{colors.ink}" borderColor: "{colors.hairline}" fontFamily: "{typography.body-md.fontFamily}" fontSize: "{typography.body-md.fontSize}" fontWeight: "{typography.body-md.fontWeight}" lineHeight: "{typography.body-md.lineHeight}" letterSpacing: "{typography.body-md.letterSpacing}" borderRadius: "{rounded.md}" padding: "{spacing.lg}" --- ## Overview Datadog’s design system reads like a command‑center UI, where every element is tuned for rapid data consumption. The midnight canvas and violet voltage make alerts unmistakable, while the NationalWeb type family provides a familiar engineering feel. **Observability‑as‑canvas.** Unlike many SaaS products that sprinkle pastel accents over white space, Datadog treats the entire viewport as a live observability board. The contrast‑driven palette forces hierarchy without extra icons, and the 4 px grid locks metric tiles into place. This is not a decorative theme; it is a data‑first visual language that makes performance graphs and alert banners feel native. **Key Characteristics:** - Deep violet primary voltage on buttons, links, and accent ribbons. - Midnight canvas background that amplifies white and gray text. - NationalWeb typography ranging from 36 px display to 16 px captions, with weights from 300 to 700. - 4 px baseline grid for padding, margin, and spacing utilities. - Rounded corners at 4 px for most components, 6 px for cards. - Button‑md token: 18 px, weight 700, 0.08 px letter‑spacing. - Navigation links in muted gray with 8.5 px × 12 px × 9.5 px padding. - Consistent use of ink‑muted gray for secondary text, preserving focus on primary data. ## Known Gaps - The current token set lacks explicit dark‑mode variants for the deep violet accent, requiring designers to manually adjust contrast for low‑light environments. - Component documentation does not include usage examples for error or empty‑state cards, leaving developers to guess visual treatment for failure scenarios. - No token definitions exist for animated transitions, so motion designers must create bespoke easing curves that may diverge from the system’s visual rhythm. - Accessibility guidelines are minimal; there is no clear guidance on minimum touch target sizes beyond the primary button, which could affect mobile usability. - The spacing table omits a dedicated token for large gutters used in multi‑column dashboard layouts, forcing ad‑hoc calculations that break the 4 px grid discipline.