Sentry Design System: High-Contrast Developer UI

1. Brand Overview

Sentry’s visual language is all about controlled intensity. It’s developer‑first, but with a polished marketing layer that makes the product feel approachable without losing credibility. The brand leans heavily into deep purples and rich dark tones — you won’t find candy colors or soft pastels here. This isn’t a “fun” brand in the playful SaaS sense. It’s confident, slightly moody, and serious about its craft.

The site’s tone comes from a combination of sharp typography, high‑contrast colors, and a restrained use of gradients. You see a lot of dark backgrounds (#1f1633, #4e2a9a) with bright white text (#ffffff) and accents of saturated pink (#e1567c) or golden yellow in active states. This gives the interface depth without needing heavy drop shadows. They use shadows sparingly — almost ceremonially — to highlight components only when necessary.

The typography choice — Rubik for almost everything — keeps the voice modern and geometric, with a subtle friendliness from its rounded terminals. IBM Plex Mono appears in code contexts, reinforcing Sentry’s technical audience. Line heights and weights are tuned for dense UI, not airy editorial layouts. This is a working tool, not a content site.

Spacing follows a disciplined 8px grid, with occasional 4px increments for micro‑adjustments. Corners are rounded just enough — mostly at 6px and 8px — to soften card edges without feeling bubbly. The occasional 999px pill radius is reserved for things like play buttons and circular avatars.

Overall, Sentry’s design system communicates: “We’re a serious, modern tool for developers. We respect your time and attention. We’ll guide you clearly, but we won’t spoon‑feed.” It’s opinionated, high‑contrast, and minimal in ornamentation. They nailed the balance between technical credibility and visual appeal — a hard thing to get right in developer tooling.

2. Color System

2.1 Primary Colors

The de facto brand color is #6a5fc1 (rgb(106, 95, 193)). It’s a muted violet — less aggressive than pure purple, but still strong enough to hold its own against dark backgrounds. This is used for interactive states and accents. It’s paired with #1f1633 (rgb(31, 22, 51)) as the primary dark background. White (#ffffff) is the primary text color in dark contexts.

This works because #6a5fc1 stands out without screaming. Against #1f1633, it’s accessible and legible. Compared to competitors in the error‑tracking space (who often use brighter blues or greens), Sentry’s purple is more distinctive and less common.

2.2 Complete Palette

2.3 Color Relationships

White on #1f1633 gives plenty of contrast — WCAG AA is easily met. Purple (#6a5fc1) on dark backgrounds also meets contrast requirements for large text, but for small text it’s borderline; that’s why they tend to use it for accents, not body copy.

Dark mode is dominant. Light mode is essentially white background with dark text (#1f1633) and purple accents.

2.4 Usage Guide

• Works well: White text on dark purple backgrounds, purple accents on dark or white surfaces, pink for interactive active states.
• Avoid: Using pink (#e1567c) for non‑interactive elements — it’s reserved for active/focus states.
• Combine carefully: #4e2a9a and #6a5fc1 together can feel muddy — they work best separated by white or black.

3. Typography

3.1 Font Families

Everything is Rubik, except code snippets which use IBM Plex Mono.
Rubik stack: "Rubik", -apple-system, system-ui, Segoe UI, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
IBM Plex Mono stack: "IBM Plex Mono", Consolas, Liberation Mono, Menlo, Courier

No Google Fonts or Adobe Fonts loading detected — likely self‑hosted.

3.2 Type Scale

3.3 Hierarchy

The type hierarchy is tight. H1 at 88px is massive for hero sections. Most UI text sits between 14px and 20px, meaning the scale is compressed — better for dense dashboards. Uppercase is used for small labels and navigation, giving a technical, “command‑line” feel. The mono font is reserved for code, reinforcing the developer audience.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid, with micro‑steps down to 1px and up to 368px.

Common values:

• 1px (23 uses) — hairline borders
• 2px (162 uses) — thin borders, micro spacing
• 4px (83 uses) — icon gaps
• 8px (114 uses) — button padding, small gaps
• 16px (122 uses) — card padding, medium gaps
• 24px, 32px, 48px, 64px — section spacing
• 58px — odd, likely specific to hero spacing
• 224px+ — layout blocks

4.2 Layout

Breakpoints: 0, 576, 768, 992, 1024, 1151, 1152px — they’re using a mix of Bootstrap‑like and custom breakpoints. Mobile starts at 0, tablet around 768, desktop beyond 1024.

5. Visual Elements

Border Radius

Values range from square (0px) to pill (999px). Common: 6px and 8px for most UI. 999px for circular buttons.

Shadows

Mostly subtle: rgba(43, 34, 51, 0.04) 0px 1px 2px for light depth. Occasional heavier shadows for modals. They avoid heavy drop shadows — depth is conveyed through color and border.

Borders & Dividers

Light gray (#ececf1) for dividers. 1px solid for inputs (#cfcfdB) and buttons.

6. Components

6.1 Buttons

Primary (btn-new silent dark-mode)
Default: transparent background, white text, 12px 16px padding, 8px radius.
Hover: background #9093c1, white text.
Active: complex box-shadow with white, yellow, pink rings; background #e1567c; text #584674.
Focus: background #e1567c, text #e1567c (odd — text matches background).

Secondary (css-wdi5o3)
Default: background #79628c, text #362d59, 13px radius, inset shadow. No hover/focus defined.

Snackbar (btn-new snackbar)
Default: background #452650, white text, 8px 12px padding, 8px radius.
Hover: background white, text #1f1633, opacity 0 (odd choice).
Active: same triple ring shadow as primary.
Focus: background #e1567c, border 0.125rem solid #e1567c.

Accordion
Default: background white, text #1f1633, padding 16px 20px 8px, radius top corners 6px.
Hover: no change.
Active: triple ring shadow.
Focus: background #e1567c, text #e1567c.

6.2 Links

Multiple styles:

• White text, underlined on hover.
• Dark text with underline on hover switching to white.
• Purple text (#6a5fc1) with underline on hover.
• Deep purple (#4e2a9a) with underline hover.

6.3 Forms

Email input
Default: white background, dark text, 1px solid #cfcfdB border, 6px radius, 5px 8px padding.
Focus: background #6a5fc1, white text, border #e1567c, shadow rgba(144,147,193,0.2) 0px 0px 15px.

Select-one
Default: background #452650, white text, 6px radius, 8px 16px padding.
Focus: border #9093c1.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-dark-purple: #1f1633;
  --color-violet: #6a5fc1;
  --color-deep-purple: #4e2a9a;
  --color-black: #000000;
  --color-pink: #e1567c;
  --color-light-gray: #ececf1;

  /* Typography */
  --font-rubik: "Rubik", -apple-system, system-ui, Segoe UI, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --font-plex-mono: "IBM Plex Mono", Consolas, Liberation Mono, Menlo, Courier;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-58: 58px;
  --space-64: 64px;
  --space-224: 224px;
  --space-256: 256px;
  --space-272: 272px;
  --space-368: 368.094px;

  /* Radius */
  --radius-none: 0px;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-13: 13px;
  --radius-16: 16px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-subtle: rgba(43, 34, 51, 0.04) 0px 1px 2px 0px;
  --shadow-inset: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px inset;
}

8. AI Coding Assistant Prompt

# Sentry Design System Specification

You are a Sentry design expert. Build UIs matching their visual language exactly.

## Brand Context
Sentry’s design is high-contrast, developer-focused, and minimal in ornamentation. Dark mode is dominant, with violet and pink accents. Typography is geometric and modern, with mono for code.

## Color Palette
- White: #ffffff — text on dark backgrounds, light surfaces
- Dark Purple: #1f1633 — primary dark background
- Violet: #6a5fc1 — primary brand accent, links, hover outlines
- Deep Purple: #4e2a9a — secondary accent for headings/buttons
- Black: #000000 — icons, functional UI
- Pink: #e1567c — active states, focus borders
- Light Gray: #ececf1 — dividers, light borders

## Typography
Font families:
- Rubik: "Rubik", -apple-system, system-ui, Segoe UI, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
- IBM Plex Mono: "IBM Plex Mono", Consolas, Liberation Mono, Menlo, Courier

Sizes:
| Level | Size | Weight | Line Height | Use For |
| H1 | 88px | 700 | 1.20 | Hero titles |
| H2 | 32px | 700 | 1.25 | Section headings |
| H3 | 24px | 700 | 1.25 | Subheadings |
| Body-lg | 20px | 400/700 | 1.25–1.50 | Paragraphs |
| Body | 16px | 400/700 | 1.40–2.00 | UI text |
| Caption | 14px | 400–700 | 1.13–1.25 | Labels |
| Small | 12px | 400/600 | 2.00 | Metadata |
| Tiny | 10px | 600 | 1.80 | Micro labels |

## Spacing & Grid
Base: 8px. Scale: 1, 2, 4, 8, 12, 16, 24, 32, 48, 58, 64, 224, 256, 272, 368px.

## Border Radius
- none: 0px — tables, hard-edged elements
- sm: 6px — inputs, small cards
- md: 8px — buttons, cards
- lg: 13px — specific buttons
- full: 999px — circular buttons, avatars

## Shadows & Depth
Use subtle shadows only:
- rgba(43, 34, 51, 0.04) 0px 1px 2px — light depth
- Avoid heavy shadows except for focus rings

## Component Specifications

### Primary Button
Default: transparent bg, white text, padding 12px 16px, radius 8px, border 2px transparent.  
Hover: bg #9093c1, white text.  
Active: triple ring box-shadow (white, yellow, pink), bg #e1567c, text #584674.  
Focus: bg #e1567c, text #e1567c.

### Secondary Button
Default: bg #79628c, text #362d59, radius 13px, inset shadow. No hover/focus.

### Input Field (email)
Default: bg white, text #362d59, border 1px solid #cfcfdB, radius 6px, padding 5px 8px.  
Focus: bg #6a5fc1, text white, border #e1567c, shadow rgba(144,147,193,0.2) 0px 0px 15px.

## Layout & Responsive Rules
Breakpoints: 0, 576, 768, 992, 1024, 1151, 1152px.  
Maintain 8px grid for spacing.

## Interaction Rules
Transitions: 150ms ease for hover/focus changes.  
Focus: use pink (#e1567c) border or bg.

## DO List
- Use only palette colors
- Maintain 8px grid
- Use Rubik for all headings/body
- Reserve IBM Plex Mono for code
- Use pink only for active/focus states

## DON'T List
- Don’t add custom colors
- Don’t use heavy shadows
- Don’t mix sharp and rounded corners
- Don’t reduce contrast below WCAG AA

## Code Examples

```css
.btn-primary {
  background: transparent;
  color: #ffffff;
  padding: 12px 16px;
  border-radius: 8px;
  border: 2px solid transparent;
  font-weight: 700;
  font-size: 14px;
}
.btn-primary:hover {
  background: #9093c1;
}
.btn-primary:focus {
  background: #e1567c;
  color: #e1567c;
}
```

```css
.input-email {
  background: #ffffff;
  color: #362d59;
  border: 1px solid #cfcfdB;
  border-radius: 6px;
  padding: 5px 8px;
}
.input-email:focus {
  background: #6a5fc1;
  color: #ffffff;
  border: 0.125rem solid #e1567c;
  box-shadow: rgba(144,147,193,0.2) 0px 0px 15px;
}
```

9. Summary

TL;DR — Sentry’s design system is dark, high‑contrast, and developer‑centric. Purple and pink accents against deep backgrounds, geometric typography, and disciplined spacing create a technical yet polished feel.

Brand Keywords — developer-serious, high-contrast, violet-forward, disciplined-grid, technical-minimal