# Sentry · Design system migration spec

> Source: https://sentry.io  ·  Curated by OpenDesign  ·  en

> Sentry's design successfully balances technical credibility with a bold, slightly irreverent brand voice, making a complex developer tool feel accessible and modern.

## 1. Identity DNA

Sentry’s visual system operates like a loud, expressive observatory for code health—it must broadcast clarity across complex systems while retaining a developer-first sensibility. The identity balances professional reliability with a playful-yet-serious tone, anchored by high-contrast color and heavy typographic weight.

**One-liner:** Application monitoring software designed to help developers find and fix crashes faster.
**Keywords:** Developer Tools · Error Monitoring · Performance · SaaS
**Analogy:** A vigilant engineer keeping your codebase healthy.

## 2. Color

The color system is built on high-contrast white-on-deep-purple foundations with energetic yellow accents, creating immediate visual punch without relying on corporate-safe palettes. This palette prioritizes legibility and focus, with the deep purple serving as a confident backdrop rather than a decorative element.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#150f23` | main background |
| `--bg-soft` | `#1f1633` | card background |
| `--ink` | `#ffffff` | body text |
| `--ink-soft` | `#d4d4d4` | secondary text |
| `--muted` | `#79628c` | placeholder |
| `--accent` | `#eb4c8c` | single accent |
| `--line` | `rgba(255, 255, 255, 0.1)` | divider |

**Color principle:** High-contrast neon accents on a deep indigo void to convey technical precision.

The principle is deliberate contrast—no muted tones, no pastel compromise.

## 3. Typography

Typography carries the system’s boldest voice: a geometric sans-serif rendered in heavy weights with tight tracking for hero text, all-caps for navigation, and strategic italics for emphasis. The scale serves clear hierarchical needs from headline statements to functional labels, treating type as both structural and expressive.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 60px | 1.0 | 500 | -1px | Main hero headline |
| body | 16px | 1.5 | 400 | 0.2px | General body text |
| mono | 16px | 1.5 | 400 | 0px | Code snippets and technical logs |

**Type rules:**
- Use humanist-sans for headlines and body text for a friendly developer feel.
- Reserve monospace fonts strictly for code blocks and technical data.
- Maintain a strict typographic hierarchy with clear size jumps.

## 4. Spacing

Spacing follows a flexible rhythm that gives hero sections generous breathing room while maintaining functional density elsewhere.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px grid system for consistent component spacing.

## 5. Surfaces

Surfaces are defined by depth through shadow and subtle border rather than heavy texture—a single deep shadow value and a semi-transparent white border create layered containment. The background remains solid and unadorned, letting color and illustration carry visual weight.

- **Radius:** sm 4px · md 8px · lg 10px · pill 999px
- **Shadows:**
  - 0px 0px 8px 6px rgb(21, 15, 35)
  - 0px 2px 10px 0px inset rgba(0, 0, 0, 0.15)
  - 0px 2px 8px 0px rgba(0, 0, 0, 0.08)
- **Borders:** Thin 1px borders in rgba(255, 255, 255, 0.1) or rgb(58, 46, 74)

## 6. Layout

The layout centers on a single-column hero anchored by a large, complex illustration positioned between text blocks. Full-width color fields and generous whitespace frame this composition, creating a clear visual hierarchy that doesn’t rely on rigid grid fragmentation.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width dark container with a centered content area, generous vertical padding for hero sections.

## 7. Motion & Interaction

Motion is implied as functional rather than decorative—smooth transitions for interactive states like button hovers, with potential subtle parallax on the central illustration. The philosophy suggests animation should clarify interaction without distracting from the monitoring-focused content.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color transitions on hover states
  - Subtle background gradient shifts

- **Hover:** Change background-color or border-color with a 0.2s cubic-bezier transition.
- **Click:** Subtle scale or opacity reduction on press.
- **Transition:** Standardize all interactive transitions to 0.2s with a smooth cubic-bezier easing.
- **Keyboard:** Ensure all interactive elements are focusable and have visible focus rings.

## 8. Voice & Don'ts

Voice operates with direct confidence and slight irreverence: bold statements in plain language, action-oriented CTAs, and strategic italic emphasis. The tone avoids corporate jargon, formal register, and passive constructions—matching the visual boldness with linguistic clarity.

- **Tone:** Technical, slightly irreverent, and highly confident.
- **Headline style:** Direct, action-oriented, often using wordplay or dramatic phrasing.
- **CTA style:** Clear, imperative, and focused on the value proposition.
- **Avoid:** Overly corporate jargon / Passive voice / Unnecessary filler words

### Don'ts
- ❌ don't use bright, saturated backgrounds — screenshot shows deep indigo and purple tones instead
- ❌ don't use light-themed UI elements — screenshot shows dark mode with neon accents
- ❌ don't use thin, delicate typography — screenshot shows bold, high-impact headlines
- ❌ don't use soft, rounded shapes everywhere — screenshot shows sharp, technical UI elements
- ❌ don't use a muted, low-contrast color palette — screenshot shows high-contrast neon greens and pinks
- ❌ don't use serif fonts for technical content — screenshot shows humanist-sans and monospace

What Sentry deliberately doesn’t do is play it safe—it rejects muted palettes, delicate typography, text-heavy layouts without visual anchors, and any trace of corporate blandness.

## System Prompt (paste into AI tool)

```
Sentry is an application monitoring SaaS for developers. The design is bold and technical, featuring a dark indigo and purple palette (#150f23, #1f1633) with vibrant neon accents in pink (#eb4c8c) and green (#00f5a0). Typography is humanist-sans for a friendly but professional feel, with a strong emphasis on bold headlines. Critical design constraints include: never use a light theme, avoid thin and delicate typography, and do not use overly corporate or stiff language. The UI is characterized by high-contrast elements and a slightly irreverent tone that resonates with a developer audience.
```
