W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Datadog
Datadog, Inc. is the cloud-monitoring and observability platform covering infrastructure metrics, APM tracing, log management, real-user monitoring, synthetic testing, and security monitoring. The brand identity is anchored on Datadog Purple (#632CA6) — the fill of the dog-paw mark — paired with a secondary Datadog Yellow accent and a deep near-black canvas that defines the Datadog application chrome. The voice is operator-direct and metric- forward: dashboards, alerts, and SLO compliance front and center, with a strong preference for live signal over marketing claim.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/datadog/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/datadog/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Datadog
Datadog, Inc. is the cloud-monitoring and observability platform covering infrastructure metrics, APM tracing, log management, real-user monitoring, synthetic testing, and security monitoring. The brand identity is anchored on Datadog Purple (#632CA6) — the fill of the dog-paw mark — paired with a secondary Datadog Yellow accent and a deep near-black canvas that defines the Datadog application chrome. The voice is operator-direct and metric- forward: dashboards, alerts, and SLO compliance front and center, with a strong preference for live signal over marketing claim.
Tags: tech, observability, monitoring, datadog, devops, dark-canvas
Atoms
Palette
Datadog · [email protected] · Proprietary — All Rights Reserved
Datadog brand palette anchored on Datadog Purple (#632CA6) — the signature purple of the dog-paw mark and the principal accent across datadoghq.com and the Datadog observability platform — paired with the Datadog Yellow used on the secondary brand accent and a deep canvas used in the Datadog application chrome (the platform itself is dark-first).
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
datadog-purple |
Datadog Purple | #632CA6 |
datadog-purple-dark |
Datadog Purple Dark | #4B1F80 |
datadog-purple-light |
Datadog Purple Light | #8E5DC9 |
datadog-yellow |
Datadog Yellow | #F8B400 |
datadog-canvas |
Datadog Canvas | #1B1F23 |
datadog-canvas-deep |
Datadog Canvas Deep | #0E1114 |
datadog-ink |
Datadog Ink | #1B2730 |
datadog-gray |
Datadog Gray | #5E6A75 |
datadog-gray-light |
Datadog Gray Light | #8995A1 |
datadog-surface |
Datadog Surface | #F3F4F6 |
datadog-border |
Datadog Border | #DCDFE3 |
datadog-white |
Datadog White | #FFFFFF |
datadog-success |
Datadog Success | #3FAE2A |
datadog-warning |
Datadog Warning | #FFB400 |
datadog-error |
Datadog Error | #D63B3B |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
datadog-white |
#FFFFFF |
surface |
datadog-surface |
#F3F4F6 |
surface-elevated |
datadog-white |
#FFFFFF |
text-primary |
datadog-ink |
#1B2730 |
text-secondary |
datadog-gray |
#5E6A75 |
text-tertiary |
datadog-gray-light |
#8995A1 |
primary |
datadog-purple |
#632CA6 |
primary-hover |
datadog-purple-dark |
#4B1F80 |
accent |
datadog-yellow |
#F8B400 |
accent-hover |
datadog-purple-light |
#8E5DC9 |
warning |
datadog-warning |
#FFB400 |
warning-hover |
datadog-error |
#D63B3B |
error |
datadog-error |
#D63B3B |
success |
datadog-success |
#3FAE2A |
border |
datadog-border |
#DCDFE3 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
datadog-canvas-deep |
#0E1114 |
surface |
datadog-canvas |
#1B1F23 |
surface-elevated |
datadog-purple-dark |
#4B1F80 |
text-primary |
datadog-white |
#FFFFFF |
text-secondary |
datadog-surface |
#F3F4F6 |
text-tertiary |
datadog-gray-light |
#8995A1 |
primary |
datadog-purple-light |
#8E5DC9 |
primary-hover |
datadog-purple |
#632CA6 |
accent |
datadog-yellow |
#F8B400 |
accent-hover |
datadog-purple-light |
#8E5DC9 |
warning |
datadog-warning |
#FFB400 |
warning-hover |
datadog-error |
#D63B3B |
error |
datadog-error |
#D63B3B |
success |
datadog-success |
#3FAE2A |
border |
datadog-canvas |
#1B1F23 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
datadog-purple |
#632CA6 |
on-identity |
datadog-white |
#FFFFFF |
primary |
datadog-purple |
#632CA6 |
primary-hover |
datadog-purple-dark |
#4B1F80 |
accent |
datadog-yellow |
#F8B400 |
accent-hover |
datadog-purple-light |
#8E5DC9 |
background |
datadog-white |
#FFFFFF |
surface |
datadog-surface |
#F3F4F6 |
surface-elevated |
datadog-white |
#FFFFFF |
text-primary |
datadog-ink |
#1B2730 |
text-secondary |
datadog-gray |
#5E6A75 |
text-tertiary |
datadog-gray-light |
#8995A1 |
chrome |
datadog-canvas |
#1B1F23 |
chrome-deep |
datadog-canvas-deep |
#0E1114 |
mark |
datadog-purple |
#632CA6 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (6)
colorChoice → logo.paw.fill
- allowed: datadog-purple, datadog-white
- forbidden: datadog-purple-dark, datadog-purple-light, datadog-yellow
The Datadog dog-paw mark renders in Datadog Purple (#632CA6) or reversed white. The hover/active variants and the secondary yellow accent are not valid mark fills — the yellow appears as an accessory detail (the "eye" inside the paw on the published variant) but does not stand in for the mark color.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, paw-detached-from-wordmark, gradient-fill
Datadog's brand guidelines explicitly prohibit altering the proportions, color, or orientation of the dog-paw mark. Gradient fills are not part of the published brand system, and the paw must not be detached from the wordmark on shared lockups.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Datadog Ink (#1B2730) on Datadog White gives ~14:1 — well above WCAG 2.1 Level AA. The rule encodes the floor for any new foreground/background pairing on datadoghq.com.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Datadog Purple (#632CA6) on Datadog White gives ~8:1 — well above WCAG AA for body-sized text. The marketing site's purple link/button labels rely on this contrast.
contextRestriction → roles.colors.accent
- forbiddenContexts: error-state, critical-alert
Datadog Yellow is the secondary brand accent. The critical / alerting context is reserved for Datadog Error red, and the warning context is reserved for Datadog Warning amber. Substituting yellow for red on critical alerts breaks the monitoring-color contract.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Datadog's application is consumed by operators across long incident-response sessions; AA is the floor for dashboard-text legibility.
💡 recommendation (2)
compositionConstraint → roles.colors.primary
- pairsWith: datadog-white, datadog-canvas, datadog-canvas-deep, datadog-yellow
- doesNotPairWith: datadog-error
The canonical Datadog composition is purple-on-canvas or purple-on-white, with the yellow accent as a brand-family pair. Combining Datadog Purple directly with the alert red reads as a status-color conflict on observability dashboards.
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.4
Datadog's marketing surfaces use Inter for both heading and body, with a modest size differential consistent with the data-dense observability voice. A 1.4× floor preserves the display-to-prose distinction without overpowering dashboards.
Provenance
- Source: https://www.datadoghq.com/
- License:
Proprietary — All Rights Reserved - Attribution: Datadog and the Datadog logo are trademarks of Datadog, Inc. Brand colors and identity guidance documented here are derived from the visible style values on datadoghq.com, the Datadog application chrome, and the Datadog press kit (datadoghq.com/about/press-kit/).
- Imported:
2026-05-18 - Notes: Brand-atoms' read of Datadog's publicly available brand surface and the visible application chrome. This file is not an official Datadog brand-guidelines document. The Datadog application is dark-first; the marketing site is light-first. Both modes are authored. No asset files are bundled; the dog-paw mark is trademarked.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Datadog
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Datadog
A clear hierarchy in Datadog's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ datadog-yellow #F8B400 accent-hover
→ datadog-purple-light #8E5DC9 background
→ datadog-white #FFFFFF chrome
→ datadog-canvas #1B1F23 chrome-deep
→ datadog-canvas-deep #0E1114 identity
→ datadog-purple #632CA6 mark
→ datadog-purple #632CA6 on-identity
→ datadog-white #FFFFFF primary
→ datadog-purple #632CA6 primary-hover
→ datadog-purple-dark #4B1F80 surface
→ datadog-surface #F3F4F6 surface-elevated
→ datadog-white #FFFFFF text-primary
→ datadog-ink #1B2730 text-secondary
→ datadog-gray #5E6A75 text-tertiary
→ datadog-gray-light #8995A1 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from datadog)
Light mode (15 roles)
accent
→ datadog-yellow accent-hover
→ datadog-purple-light background
→ datadog-white border
→ datadog-border error
→ datadog-error primary
→ datadog-purple primary-hover
→ datadog-purple-dark success
→ datadog-success surface
→ datadog-surface surface-elevated
→ datadog-white text-primary
→ datadog-ink text-secondary
→ datadog-gray text-tertiary
→ datadog-gray-light warning
→ datadog-warning warning-hover
→ datadog-error Dark mode (15 roles)
accent
→ datadog-yellow accent-hover
→ datadog-purple-light background
→ datadog-canvas-deep border
→ datadog-canvas error
→ datadog-error primary
→ datadog-purple-light primary-hover
→ datadog-purple success
→ datadog-success surface
→ datadog-canvas surface-elevated
→ datadog-purple-dark text-primary
→ datadog-white text-secondary
→ datadog-surface text-tertiary
→ datadog-gray-light warning
→ datadog-warning warning-hover
→ datadog-error Rules (8 typed constraints)
error · 6 rules
colorChoice logo.paw.fill allowed datadog-purple, datadog-white forbidden datadog-purple-dark, datadog-purple-light, datadog-yellow The Datadog dog-paw mark renders in Datadog Purple (#632CA6) or reversed white. The hover/active variants and the secondary yellow accent are not valid mark fills — the yellow appears as an accessory detail (the "eye" inside the paw on the published variant) but does not stand in for the mark color.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, paw-detached-from-wordmark, gradient-fill Datadog's brand guidelines explicitly prohibit altering the proportions, color, or orientation of the dog-paw mark. Gradient fills are not part of the published brand system, and the paw must not be detached from the wordmark on shared lockups.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Datadog Ink (#1B2730) on Datadog White gives ~14:1 — well above WCAG 2.1 Level AA. The rule encodes the floor for any new foreground/background pairing on datadoghq.com.
contrastRatio roles.colors.primary against background minRatio 4.5 standard WCAG-AA Datadog Purple (#632CA6) on Datadog White gives ~8:1 — well above WCAG AA for body-sized text. The marketing site's purple link/button labels rely on this contrast.
contextRestriction roles.colors.accent forbiddenContexts error-state, critical-alert Datadog Yellow is the secondary brand accent. The critical / alerting context is reserved for Datadog Error red, and the warning context is reserved for Datadog Warning amber. Substituting yellow for red on critical alerts breaks the monitoring-color contract.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Datadog's application is consumed by operators across long incident-response sessions; AA is the floor for dashboard-text legibility.
recommendation · 2 rules
compositionConstraint roles.colors.primary pairsWith datadog-white, datadog-canvas, datadog-canvas-deep, datadog-yellow doesNotPairWith datadog-error The canonical Datadog composition is purple-on-canvas or purple-on-white, with the yellow accent as a brand-family pair. Combining Datadog Purple directly with the alert red reads as a status-color conflict on observability dashboards.
fontPairing typography.heading requires body minSizeRatio 1.4 Datadog's marketing surfaces use Inter for both heading and body, with a modest size differential consistent with the data-dense observability voice. A 1.4× floor preserves the display-to-prose distinction without overpowering dashboards.
Provenance
- Source
- https://www.datadoghq.com/
- License
Proprietary — All Rights Reserved- Attribution
- Datadog and the Datadog logo are trademarks of Datadog, Inc. Brand colors and identity guidance documented here are derived from the visible style values on datadoghq.com, the Datadog application chrome, and the Datadog press kit (datadoghq.com/about/press-kit/).
- Imported
2026-05-18- Notes
- Brand-atoms' read of Datadog's publicly available brand surface and the visible application chrome. This file is not an official Datadog brand-guidelines document. The Datadog application is dark-first; the marketing site is light-first. Both modes are authored. No asset files are bundled; the dog-paw mark is trademarked.