# Sonarsource Design System

> High-contrast engineering precision anchored by deep purple ink and electric blue actions on a structured white canvas.

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

## TL;DR
Sonarsource utilizes a monochrome foundation of pure white `#ffffff` and deep neutral gray `#3b3f44`, punctuated by a signature deep purple `#290042` for semantic text and a vibrant blue `#126ed3` for primary interactions. The system is built on a geometric sans-serif pairing of **Poppins** for display and **Inter** for functional body copy. Layouts are strictly structured with a 4px base unit, utilizing generous 128px vertical section gaps and 16px rounded corners for content containers. High-contrast typography and wide letter-spacing on small labels (2.4px) signal a technical, developer-centric authority.

## Signature DNA
1. **The Deep Purple Anchor** (The use of `#290042` as a high-contrast alternative to black for primary text and semantic messaging, providing a distinct brand "ink" that feels more premium than standard gray).
2. **Geometric Display Hierarchy** (Poppins at 600 weight with tight -0.96px tracking for heroes, contrasted against Inter body text with wide tracking for technical labels).
3. **Softened Technical Surfaces** (The juxtaposition of 16px radius "Card" components against a sharp 0px "Surface" background, balancing modern SaaS friendliness with engineering rigor).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{colors.white}` | `#ffffff` | Page background, primary surface | 34 | 1 | `css_variable:--snr-n1` |
| `{colors.neutral-dark}` | `#3b3f44` | Secondary body text, card text | 8 | 1 | `css_variable:--snr-n8` |
| `{colors.canvas-soft}` | `#f3f6fb` | Subtle section backgrounds | 1 | 1 | `css_variable:--snr-n2` |
| `{colors.black}` | `#000000` | Primary text, button text | 205 | 0.8 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{colors.purple}` | `#290042` | Primary brand ink, semantic text | 249 | 1 | `css_variable:--snr-purple` |
| `{colors.blue}` | `#126ed3` | Primary CTA background, links | 44 | 1 | `css_variable:--snr-blue` |
| `{colors.yellow}` | `#f4bc39` | Decorative surface (decorative_only) | 5 | 0.6 | Computed style |
| `{colors.blue-muted}` | `#d3dce9` | Decorative surface (decorative_only) | 5 | 0.6 | Computed style |

### Semantic
| Token | Hex | Role | Source |
|-------|-----|------|--------|
| `{colors.success}` | `#126ed3` | Success icons and progress | `--toastify-color-success` |
| `{colors.info}` | `#126ed3` | Informational elements | `--toastify-color-info` |
| `{colors.warning}` | `#f1c40f` | Warning states | `--toastify-color-warning` |
| `{colors.error}` | `#d3121d` | Error states | `--toastify-color-error` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Poppins | 400, 600, 700 | Display, Headings | Poppins (Google Fonts) | OFL |
| Inter | 400, 600 | Body, Labels, UI | Inter (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display-xl}` | 48px | 58px | -0.96px | 600 | Hero H1 | `h1.snr-hero-h1` |
| `{text.display-lg}` | 48px | 58px | normal | 600 | Section H2 | `h2.css-rgfl42` |
| `{text.display-md}` | 32px | 400px | normal | 600 | Sub-section H2 | `h2.css-1f6pbzf` |
| `{text.title-sm}` | 22px | 28px | normal | 600 | Card titles | `h3.css-181a5b9` |
| `{text.lede}` | 20px | 30px | normal | 400 | Hero intro text | `p.snr-hero-lede` |
| `{text.body}` | 18px | 28px | normal | 400 | Standard prose | `p` |
| `{text.label-caps}` | 16px | 18px | 2.4px | 600 | All-caps labels | `span.css-k22npi` |
| `{text.ui-sm}` | 14px | 21px | normal | 400 | Footer links | `a.css-1kvzd8j` |
| `{text.caption}` | 12px | 14px | 1.8px | 600 | Overlines/Badges | `span.css-1k0a1pm` |

### Principles
1. **Display Tightness:** Hero headlines use negative letter-spacing (-0.96px) to maintain visual density at large scales.
2. **Label Breathing:** Small UI labels and captions use aggressive positive letter-spacing (1.8px to 2.4px) to ensure legibility in technical contexts.
3. **Weight Contrast:** Headings are strictly 600 or 700 weight, while body copy remains at 400 to maximize the hierarchy gap.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 4px | 104 |
| `{space.sm}` | 8px | 152 |
| `{space.md}` | 16px | 22 |
| `{space.lg}` | 32px | 5 |
| `{space.xl}` | 64px | 8 |
| `{space.section}` | 128px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section backgrounds | 455 occurrences |
| `{radius.sm}` | 4px | Small cards/inputs | `radius: 4px` |
| `{radius.md}` | 12px | Feature cards | `radius: 12px` |
| `{radius.lg}` | 16px | Primary content cards | `radius: 16px` |
| `{radius.pill}` | 9999px | CTA Buttons | `radius: 9999px` |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | None | All observed components | `shadow: none` |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action
**Pages observed:** https://sonarsource.com
**Spec:** Background `{colors.blue}` (#126ed3) / Text `{colors.white}` (#ffffff) / Radius `{radius.pill}` (9999px) / Typography Poppins 600
**States observed:** Default | Hover | Focus | Active | Disabled: captured

#### Secondary Button
**Role:** Ghost/Outline action
**Pages observed:** https://sonarsource.com
**Spec:** Background transparent / Text `{colors.blue}` (#126ed3) / Border 2px `{colors.blue}` (#126ed3) / Radius `{radius.pill}` (9999px)

### Tier 2: Patterns

#### Feature Card
**Role:** Benefit and feature grid items
**Pages observed:** https://sonarsource.com
**Spec:** Background `{colors.white}` (#ffffff) / Text `{colors.neutral-dark}` (#3b3f44) / Border 1px `{colors.blue}` (#126ed3) / Radius `{radius.lg}` (16px) / Padding 26px 16px 20px

#### Resource Card
**Role:** Blog and news items
**Pages observed:** https://sonarsource.com
**Spec:** Background `{colors.white}` (#ffffff) / Text `{colors.purple}` (#290042) / Border 2px `{colors.purple}` (#290042) / Radius `{radius.md}` (12px)

### Tier 3: Surface-specific

#### Section Surface
**Role:** Full-width background bands
**Pages observed:** https://sonarsource.com
**Spec:** Background `{colors.blue-muted}` (#d3dce9) or `{colors.yellow}` (#f4bc39) / Text `{colors.black}` (#000000) / Radius `{radius.none}` (0px)

#### Dark Accent Card
**Role:** High-emphasis content blocks
**Pages observed:** https://sonarsource.com
**Spec:** Background `{colors.purple}` (#290042) / Text `{colors.white}` (#ffffff) / Radius `{radius.control}` (8px) / Padding 8px

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Padding (V) | 128px |
| Grid Gutter | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Hero H1 reduces to stacked layout; padding reduces to 16px |
| Desktop | 1440px | 12-column grid; 128px section spacing |

## Imagery & decoration
Sonarsource uses clean, technical illustrations and logo grids (Adobe, NASA, Ford) in grayscale to establish enterprise credibility. It avoids heavy drop shadows and complex gradients, preferring flat color blocks and sharp hairlines.

## Do's
- Use `#290042` for primary body text to maintain brand depth.
- Apply `letter-spacing: 2.4px` to all-caps Inter labels.
- Set section vertical gaps to `128px` for high-end editorial pacing.
- Use `16px` border radius for primary white cards.
- Pair Poppins (Display) with Inter (Body) exclusively.

## Don'ts
- **Wrong:** Using `#126ed3` (Blue) for large blocks of text. **Right:** Use Blue only for interactive triggers. **Reason:** Blue is reserved for primary actions to maintain functional affordance.
- **Wrong:** Applying drop shadows to cards. **Right:** Use 1px or 2px borders for containment. **Reason:** The system is strictly flat/monochrome-parent style.
- **Wrong:** Using sub-brand accent colors (like yellow) for primary navigation. **Right:** Keep navigation in the parent monochrome palette.

## Similar brands
- Snyk
- Datadog
- HashiCorp
- Vercel

## Quick start

```css
/* CSS Variables */
:root {
  --snr-purple: #290042;
  --snr-blue: #126ed3;
  --snr-n1: #ffffff;
  --snr-n8: #3b3f44;
  --snr-n2: #f3f6fb;
  --radius-lg: 16px;
  --radius-pill: 9999px;
}
```

```json
{
  "tokens": {
    "colors": {
      "brand": {
        "purple": { "value": "#290042" },
        "blue": { "value": "#126ed3" }
      },
      "neutral": {
        "white": { "value": "#ffffff" },
        "gray": { "value": "#3b3f44" }
      }
    }
  }
}
```

## Agent prompt examples
- "Create a feature grid using 16px rounded cards with a 1px #126ed3 border and Poppins 600 headings."
- "Generate a primary CTA button using a 9999px pill radius, #126ed3 background, and white Poppins text."
- "Design a technical label using Inter 600 at 16px with 2.4px letter spacing in #290042."

## Known gaps
- Hover and Active states for buttons were not explicitly detailed in the CSS variable tokens, though the primary blue is confirmed.
- Shadow tokens were not present in the captured evidence, suggesting a purely flat design system.
- Specific mobile-only font sizes were not captured in the scale.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Main Homepage | https://sonarsource.com | 1440x900 | 2026-06-06 |
| Mobile View | https://sonarsource.com | 390x844 | 2026-06-06 |