# SolarWinds Design System

> High-contrast enterprise utility anchored by a signature orange spark against a stark monochrome grid.

**Source:** https://solarwinds.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
SolarWinds utilizes a "monochrome plus one" strategy where a foundational palette of Obsidian (#111111) and White (#ffffff) is punctuated by a high-voltage Brand Orange (#ff6200). The system is built on a rigid 4px base unit, favoring sharp 0px corners for layout containers and generous 40px radii for interactive elements. Typography is strictly Roboto, utilizing extreme weight contrast—pairing 300 Light for expansive display headers with 900 Black for punchy, authoritative sub-headlines. Navigation and links introduce a secondary Deep Teal (#006482) to separate functional utility from brand storytelling.

## Signature DNA
1. **The Orange Spark** (The use of #ff6200 as a high-visibility accent for primary CTAs, active pagination, and iconography against a grayscale canvas. Seen on Home and Pricing pages.)
2. **Weight Extremity** (The juxtaposition of Roboto 300 for hero headlines and Roboto 900 for section titles, creating a technical yet modern editorial rhythm. Seen on Home and About pages.)
3. **Pill-on-Grid Geometry** (The contrast between perfectly sharp 0px container edges and ultra-rounded 40px pill buttons. Seen across all analyzed pages.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--color-swdc-black-600` | `#111111` | Primary text, Primary button fill, Headlines | 171 | 1 | Computed style |
| `--color-white` | `#ffffff` | Page background, Button text, Card surfaces | 127 | 1 | Computed style |
| `--color-swdc-gray-400` | `#444444` | Body text, Subheads, Eyebrow text | 131 | 1 | Computed style |
| `--color-swdc-gray-300` | `#666666` | Secondary body, Pagination dots | 86 | 1 | Computed style |
| `--color-swdc-gray-50` | `#eeeeee` | Section backgrounds, subtle surfaces | 8 | 1 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--color-swdc-orange-400` | `#ff6200` | Primary brand accent, CTA hover, Active states | 34 | 1 | Computed style |
| `--color-swdc-blue-500` | `#006482` | Links, Tertiary content, Tab active states | 104 | 1 | Computed style |
| `--color-swdc-silver-300` | `#a0b9b9` | Borders, secondary surfaces | 8 | 1 | Computed style |
| `--color-swdc-silver-400` | `#6e8c96` | Decorative graphics only | 1 | 0.8 | decorative_only |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `--color-semantic-alert-critical` | `#eb686a` | Error / Critical alerts |
| `--color-semantic-alert-high` | `#ff9b66` | Warning / High priority |
| `--color-semantic-alert-medium` | `#f0d671` | Warning / Medium priority |
| `--color-semantic-alert-low` | `#cccccc` | Info / Low priority |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Roboto | 300, 400, 500, 600, 700, 900 | Display, Heading, Body, UI | Roboto (Google Fonts) | Apache 2.0 |
| Roboto Slab | 300, 400 | Heading (alternate) | Roboto Slab (Google Fonts) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `display-mega` | 100px | 110px | normal | 900 | Hero display | `div.builder-text` |
| `display-xl` | 70px | 64px | normal | 600 | Section display | `span.builder-block` |
| `display-lg` | 56px | 66px | normal | 300 | Hero H1 | `h1.builder-block` |
| `heading-lg` | 48px | 60px | normal | 900 | Section H2 | `h2` |
| `heading-md` | 34px | 44px | normal | 700 | Subsection H2 | `h2.builder-block` |
| `heading-sm` | 30px | 40px | normal | 900 | Feature titles | `p` |
| `body-lg` | 22px | 32px | normal | 400 | Lead paragraph | `span.hidden.md:block` |
| `body-md` | 18px | 32px | normal | 400 | Standard body | `p` |
| `button-text` | 18px | 24px | normal | 700 | CTA labels | `a.text-button-secondary-content` |
| `caption` | 12px | normal | normal | 700 | Small labels | `p` |

### Principles
1. **Extreme Weight Pairing:** Never pair 400 with 500. Pair 300 with 900 for maximum hierarchy impact.
2. **Tight Display Leading:** Large display sizes (100px) use a tight 1.1x line height.
3. **Link Distinction:** Interactive text links use #006482 (Teal) to distinguish them from Brand Orange (#ff6200) storytelling elements.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `--spacing-xs` | 4px | 3 |
| `--spacing-sm` | 12px | 16 |
| `--spacing-md` | 16px | 39 |
| `--spacing-lg` | 24px | 57 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `--radius-none` | 0px | Layout containers, cards, sections | 623 occurrences |
| `--radius-pill` | 40px | Buttons, interactive chips | 52 occurrences |
| `--radius-full` | 9999px | Avatars, specific icons | 1 occurrence |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All cards and surfaces | Observed across all pages |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** Home, Pricing, About
**Spec:** Background: #111111 / Text: #ffffff / Radius: 40px / Padding: 16px 24px / Typography: Roboto 700 (18px)
**States observed:** Default | Hover: #ff6200 background | Focus: #003366 ring | Active: #ff9b66 fill | Disabled: #a1a1a1

#### Surface
**Role:** Content grouping and sectioning
**Pages observed:** Home, Pricing, About
**Spec:** Background: #ffffff / Text: #000000 / Radius: 0px / Border: 0px
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns

#### Pricing Card
**Role:** Product tier display
**Pages observed:** Pricing
**Spec:** Background: #ffffff / Border: 1px #a0b9b9 / Radius: 0px / Padding: 24px
**States observed:** Default: captured

#### Feature Grid
**Role:** Capabilities listing
**Pages observed:** Home, Pricing
**Spec:** Gap: 24px / Typography: Roboto 900 (30px) for titles / Icon color: #ff6200

### Tier 3: Surface-specific

#### Global Navigation
**Role:** Site-wide utility
**Pages observed:** Home, Pricing, About
**Spec:** Background: #ffffff / Text: #111111 / Height: ~80px / Link color: #111111 (Default), #006482 (Hover)

#### Footer
**Role:** Corporate navigation
**Pages observed:** Home, Pricing, About
**Spec:** Background: #ffffff / Border-top: 1px #eeeeee / Text: #444444 / Typography: Roboto 400 (14px)

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1200px |
| Section Padding | 64px 24px |
| Column Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; 1-column grid stacking |
| Desktop | 1440px | Multi-column layouts (3-up or 4-up feature grids) |

## Imagery & decoration
- **Technical Schematics:** Uses high-detail product UI screenshots with dark mode overlays.
- **Abstract Geometry:** 3D rendered shapes using the brand palette (#ff6200, #006482, #a0b9b9).
- **Avoidance:** Avoids soft shadows, rounded corners on containers, and photographic backgrounds that obscure text legibility.

## Do's
- Use Roboto 300 for headlines exceeding 50px.
- Apply #ff6200 exclusively for primary calls to action and active UI indicators.
- Maintain 0px border radius for all content cards and layout sections.
- Use #444444 for long-form body text to reduce contrast strain on white backgrounds.
- Ensure all buttons use the 40px "pill" radius.

## Don'ts
- **Wrong:** Using #006482 for a primary CTA button. **Right:** Use #111111 or #ff6200. **Reason:** Teal is reserved for utility links and secondary navigation.
- **Wrong:** Applying rounded corners to pricing cards. **Right:** Keep corners at 0px. **Reason:** Container geometry must remain sharp to contrast with pill buttons.
- **Wrong:** Pairing Roboto 400 with Roboto 500 for hierarchy. **Right:** Use 400 and 700/900. **Reason:** The brand relies on high weight contrast.
- **Don't** use #ff6200 for large background areas; it is a high-frequency accent only.
- **Don't** use drop shadows on cards; use 1px borders (#a0b9b9) for separation.

## Similar brands
- IBM (Monochrome foundation, technical focus)
- Splunk (High-contrast data-centric UI)
- Cisco (Enterprise blue/gray utility)
- Akamai (Sharp geometry, high-contrast accents)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --sw-black: #111111;
  --sw-white: #ffffff;
  --sw-orange: #ff6200;
  --sw-teal: #006482;
  --sw-gray-text: #444444;
  --radius-pill: 40px;
  --font-main: 'Roboto', sans-serif;
}
```

```javascript
// Tailwind v4 @theme
@theme {
  --color-primary: #111111;
  --color-accent: #ff6200;
  --color-utility: #006482;
  --font-sans: 'Roboto';
  --radius-button: 40px;
}
```

## Agent prompt examples
- "Generate a hero section with a Roboto 300 headline at 56px, a #111111 pill button with 40px radius, and a sharp-edged image container."
- "Create a 3-column feature grid using Roboto 900 for titles and #ff6200 for small icons."
- "Design a pricing card with a 1px #a0b9b9 border, 0px border-radius, and a primary CTA button that turns #ff6200 on hover."

## Known gaps
- Hover states for tertiary buttons were not fully captured in the automated run.
- Mobile-specific typography scaling for "display-mega" (100px) was not observed in the 390px viewport.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://solarwinds.com | 1440px | 2026-06-06 |
| Pricing | https://solarwinds.com/pricing | 1440px | 2026-06-06 |
| About | https://solarwinds.com/about | 1440px | 2026-06-06 |