Acd Data Dense Datadog Design

---
name: acd-data-dense-datadog-design
description: Reference DESIGN.md for monitoring dashboards: deep navy chrome, royal-purple brand, warm-cool categorical chart palette tuned for stacked time series at 1px tick precision. Use when building UI components, applying design tokens, or implementing visual styles for data dense datadog.
license: CC-BY-NC-SA-4.0
metadata:
  risk: unknown
  source: community
  kind: mode
  category: design-systems
  tags: [design-system, ui, data-dense, claude-design]
---

# Datadog — Observability Density Design Mode

You are an expert in the Datadog — Observability Density aesthetic from the awesome-claude-design library. Apply its visual vocabulary, palette, typography, and component patterns when building UI.

## Source DESIGN.md

Reference DESIGN.md for monitoring dashboards: deep navy chrome, royal-purple brand, warm-cool categorical chart palette tuned for stacked time series at 1px tick precision.

## 1. Visual Theme & Atmosphere

The product is the dashboard. Chrome shrinks, charts dominate, density is the feature. Marketing chrome is light and editorial; the in-app shell is dark navy so multi-series charts pop. One royal purple is the only branded color — everything else is a measured chart hue or a status state.

Mood: dense, technical, on-call, never decorative.

## 2. Color Palette & Roles

```
/* marketing surface — light */
--bg:              #ffffff
--bg-alt:          #f7f6f9
--text:            #110617   /* near-black ink */
--text-muted:      #51495d
--border:          #e3e0e8

/* in-app shell — dark navy */
--bg-app:          #110617   /* deep navy-ink */
--bg-app-alt:      #1a0f23
--surface-app:     #2a1f37
--text-app:        #ffffff
--text-app-muted:  #b8b0c4
--border-app:      #3d3050

/* brand */
--accent:          #632ca6   /* royal purple */
--accent-hover:    #51228a
--accent-soft:     #774aa4   /* tinted purple, hover/highlight */

/* status */
--status-ok:       #29a347
--status-warn:     #f4b400
--status-error:    #d73a49
--status-info:     #4a90e2

/* categorical chart palette — preserve order */
--chart-1: #774aa4   /* purple */
--chart-2: #4a90e2   /* blue */
--chart-3: #29a347   /* green */
--chart-4: #f4b400   /* yellow */
--chart-5: #ec6d3f   /* orange */
--chart-6: #d73a49   /* red */
--chart-7: #2bb5b2   /* teal */
--chart-8: #b86bd9   /* lilac */
```

Rule: status colors (ok/warn/error) are reserved for state. Never reuse green-status for an arbitrary chart series — viewers misread it as "healthy".

## 3. Typography Rules

- **UI + body:** `National 2 Web` (NationalWeb), fallback Helvetica Neue, Arial. Weight 400/500/700.
- **Headlines:** National 2 weight 700. Marketing display goes to 68px.
- **Numerals:** tabular figures globally on dashboards, alerts, query rows.
- **Code + query language:** `Roboto Mono`, fallback `SF Mono`, `JetBrains Mono`. Used for query syntax, log lines, span IDs.

Scale: 11 / 12 / 13 / 14 / 16 / 20 / 28 / 36 / 48 / 68.

## 4. Component Stylings

**Buttons**
- Primary: purple fill, white text, radius 4px, padding 8/14, weight 500.
- Secondary on light: white fill, 1px `--border`, ink text.
- Secondary on dark shell: navy `#110617` fill, 1px white border, white text.
- Destructive: `--status-error` fill, white text, only on confirm modals.

**Cards / dashboard tiles**
- App: `--surface-app` fill, 1px `--border-app`, radius 4px. Header in 12px uppercase eyebrow.
- Marketing: white fill, 1px `--border`, radius 4px.
- Hover: 1px `--accent-soft` border. No shadow, no lift.

**Inputs**
- 1px border, radius 4px, padding 6/10. Focus: 2px purple ring, 1px offset.

**Tables**
- 28px row height. Hairline border separators. Sticky header in 11px uppercase mono. Tabular numerals throughout. Right-align numbers, left-align strings.

**Charts**
- 1px tick marks, axis labels in `--text-app-muted` 11px. Gridlines `--border-app` at 30% opacity.
- Series rendered in `--chart-1..8` declared order. Legend chips top-right with 8px swatch.
- Tooltip: `--bg-app` fill, white text, 1px `--accent-soft` border, radius 4px.

## 5. Layout Principles

- App shell uses 100% viewport. Left nav 200px, content fills.
- Marketing 1280px max, 24px gutter, 12 column.
- 4px base. 4 / 8 / 12 / 16 / 24 / 32 / 48.
- Dashboards default to 12-column draggable grid, tiles snap to 6/4/3/2 widths.

## 6. Depth & Elevation

Flat. Border + tonal shift only. Modals get `0 16px 48px rgba(17, 6, 23, 0.40)` over a 60% scrim. Tooltips lift via 1px accent border, not shadow.

## 7. Do's and Don'ts

**Do**
- Render every metric in tabular National numerals.
- Lock chart series to the declared categorical palette order across all dashboards — colors carry meaning across views.
- Keep the in-app shell on `#110617` navy. Light mode is for marketing only.

**Don't**
- Use status green for arbitrary chart series.
- Soften corners past 4px — this is dashboard chrome, not a SaaS card.
- Replace tabular figures with proportional figures inside metric tiles.
- Add gradient fills under area charts. Solid fills with 30% opacity only.
- Introduce a second brand color "for variety". Purple is the only branded hue.

## 8. Responsive Behavior

- Left nav collapses to 48px icon rail at 1280px, hidden behind hamburger below 768px.
- Dashboard tiles reflow 12 → 6 → 3 → 1 column at 1440 / 1024 / 768.
- Tables become stacked KV cards below 640px, numbers retained in tabular.
- Chart tooltips become bottom-sheet on mobile.

## 9. Agent Prompt Guide

Bias: deep navy `#110617` app shell, royal-purple `#632ca6` brand, National 2 with tabular numerals, 4px radii, 8-color categorical chart palette in declared order, dense 28px table rows, persistent left nav, hairline-only borders.

Reject: light-mode dashboards, multi-color brand palettes, gradient chart fills, rounded "bubble" tiles, proportional numerals on metrics, hero illustrations on the in-app shell, decorative emoji in chrome.

## When to Use This Mode

- When user references **datadog** or the **data-dense** family as inspiration
- When building UI in the data-dense aesthetic
- When applying this brand's color palette, typography, or layout patterns
- When critiquing UI for adherence to this aesthetic