Splunk UI Design System

# Splunk UI — Design Style Reference

```yaml
# How this file was made. Sources are first-party; nothing here is
# read from a rendered page. Full breakdown at source_page below.
method: partial
confidence: medium
verified_at: unknown
source_page: https://www.designsystems.one/design-systems/splunk-ui
sources:
  - https://splunkui.splunk.com/
```

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Splunk. "Splunk UI" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Splunk UI
**Owner:** Splunk
**Official documentation:** https://splunkui.splunk.com/
**Visual character:** SOC-floor pragmatism: severity colors that page on-call humans, dense 14px data type, and dashboards meant to run on wall monitors.

---

## Summary

Splunk's React component toolkit and design language for building consistent enterprise data and dashboard interfaces.

_Editorial confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product. Field-level evidence: 0/74 claims source-linked, 0/74 dated. Confidence is not verification; validate canonical values before implementation._

[Inspect every field and its evidence](https://www.designsystems.one/api/style-spec?system=splunk-ui)

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Splunk Orange | `#f38037` | `--splunk-orange` | Brand accent |
| Action Blue | `#006eaa` | `--splunk-link` | Links and primary actions (Enterprise light) |
| Text | `#3c444d` | `--splunk-text` | Primary text |
| Secondary Text | `#6b7785` | `--splunk-text-muted` | Secondary text |
| White | `#ffffff` | `--splunk-surface` | Surfaces |
| Gray 96 | `#f2f4f5` | `--splunk-gray-96` | Panel background |
| Border | `#c3cbd4` | `--splunk-border` | Borders |
| Error Red | `#dc4e41` | `--splunk-error` | Errors and alert severities |
| Success Green | `#53a051` | `--splunk-success` | Success |
| Warning Yellow | `#f8be34` | `--splunk-warning` | Warnings |

## Typography

- **Body:** Splunk Platform Sans / system — weights 400, 500, 700 — `'Splunk Platform Sans', 'Proxima Nova', Roboto, Droid, 'Helvetica Neue', Helvetica, Arial, sans-serif`
- **Mono:** Inconsolata — weights 400 — `Inconsolata, Consolas, monospace`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| title-1 | `24px` | `32px` |
| title-3 | `18px` | `24px` |
| body | `14px` | `20px` |
| small | `12px` | `16px` |

## Spacing

Base unit: `4px`

Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `32px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `3px` |
| large | `6px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| popover | `0 2px 8px rgba(0,0,0,0.2)` |

## Quick start (CSS)

```css
/* Splunk UI — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Native dp/sp values are omitted, never silently converted.
   Official reference: https://splunkui.splunk.com/
   Field evidence: https://www.designsystems.one/api/style-spec?system=splunk-ui */

:root {
  /* Color */
  --splunk-orange: #f38037; /* Brand accent */
  --splunk-link: #006eaa; /* Links and primary actions (Enterprise light) */
  --splunk-text: #3c444d; /* Primary text */
  --splunk-text-muted: #6b7785; /* Secondary text */
  --splunk-surface: #ffffff; /* Surfaces */
  --splunk-gray-96: #f2f4f5; /* Panel background */
  --splunk-border: #c3cbd4; /* Borders */
  --splunk-error: #dc4e41; /* Errors and alert severities */
  --splunk-success: #53a051; /* Success */
  --splunk-warning: #f8be34; /* Warnings */

  /* Typography */
  --font-body: 'Splunk Platform Sans', 'Proxima Nova', Roboto, Droid, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: Inconsolata, Consolas, monospace;

  /* Type scale */
  --text-title-1: 24px; /* line-height 32px */
  --text-title-3: 18px; /* line-height 24px */
  --text-body: 14px; /* line-height 20px */
  --text-small: 12px; /* line-height 16px */

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Radius */
  --radius-default: 3px;
  --radius-large: 6px;

  /* Elevation */
  --shadow-popover: 0 2px 8px rgba(0,0,0,0.2);
}
```

## Engineering profile

- **Ships for:** React
- **Source model:** Open source

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Splunk UI by Splunk — Splunk's React component toolkit and design language for building consistent enterprise data and dashboard interfaces. Character: SOC-floor pragmatism: severity colors that page on-call humans, dense 14px data type, and dashboards meant to run on wall monitors. Use a primary colour near #f38037, the typeface "Splunk Platform Sans / system" (or a close equivalent), corner radius around 3px, a spacing rhythm on a 4px base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Splunk UI documentation](https://splunkui.splunk.com/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/splunk-ui) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._