Sentry Design System · Dark Theme

Code observability with clarity

A clean, developer-focused design system for error monitoring, performance tracking, and application health dashboards.

Rich Black #1f1633 Purple Accent Developer Tools Error Monitoring

Foundation

Color Tokens

Surface colors for light theme, semantic colors for issue states and alerts, with purple as the primary brand accent.

Arctic White

#FFFFFF

Primary background, card surfaces

Snow Gray

#FAF9FB

Secondary background, sidebar

Pearl

#F2F0F5

Hover states, selected rows

Mist

#E9E6ED

Borders, dividers, gridlines

Storm Gray

#D6D0DC

Disabled states, inactive borders

Slate

#80708F

Secondary text, placeholders

Charcoal

#3E2C4C

Headings, emphasized text

Obsidian

#1D1D2E

Primary text, code output

Sentry Purple

#6C5FC7

Brand accent, actions, active states

Purple Light

#A397E0

Hover state, selected tabs

Purple Muted

#E7E1F1

Purple backgrounds, badges

Error Red

#F55459

Errors, critical alerts, crashes

Error Surface

#FDF0F0

Error backgrounds, failed tests

Warning Amber

#E2A309

Warnings, performance alerts

Success Green

#2BA176

Resolved, healthy status

Info Blue

#2675B2

Informational, docs links

Foundation

Typography Scale

Inter for UI text, Roboto Mono for code and technical data. Compact scale optimized for dense developer interfaces.

Overline

ISSUE SUMMARY

11px / 1.2 / .04em / 600

Caption

Last seen 2 hours ago

12px / 1.5 / .01em / 400

Code SM

              src/utils/handler.ts:42
            

12px / 1.5 / 0 / 400

Body SM

TypeError: Cannot read property 'map' of undefined

13px / 1.5 / .01em / 400

Code

              at render (components/App.tsx:127:15)
            

14px / 1.5 / 0 / 400

Body

This issue has been occurring across multiple environments.

14px / 1.6 / 0 / 400

Subheading

Stack Trace

16px / 1.5 / 0 / 500

Heading SM

Issue Details

18px / 1.4 / -.01em / 600

Heading

Performance Summary

20px / 1.4 / -.01em / 600

Heading LG

Project Settings

24px / 1.3 / -.02em / 600

Display

Dashboard

32px / 1.2 / -.02em / 700

Components

UI Elements

Buttons, inputs, badges, and cards designed for developer-focused error monitoring interfaces.

Buttons

Inputs

Project Name Used in URLs and SDK configuration

DSN (Error) Invalid DSN format

Organization Contact admin to change

Badges

javascript react unresolved regressed resolved v2.1.0

Issue Stream

TypeError: Cannot read properties of undefined (reading 'map')

src/components/Dashboard.tsx:42

1,247

2h ago

NetworkError: Failed to fetch /api/events

src/api/client.ts:89

843

4h ago

Slow transaction: GET /api/issues (avg 2.4s)

routes/issues.py:156

156

6h ago

RangeError: Maximum call stack size exceeded

src/utils/parser.ts:23

1d ago

Metric Cards

Errors

2,847

+12.4% from last week

Crash Free Sessions

99.2%

+0.3% from last week

P95 Latency

1.8s

+240ms from last week

Chart

Stack Trace

          TypeError: Cannot read properties of
          undefined (reading 'map')

            at render (src/components/Dashboard.tsx:42:15)

            at processChild (node_modules/react-dom/cjs/react-dom.development.js:2345:14)

            at reconcileChildren (node_modules/react-dom/cjs/react-dom.development.js:6789:28)

          // 12 more frames...

Foundation

Spacing Scale

4px base unit with compact density for dense data displays typical in monitoring dashboards.

2px

4px

6px

8px

12px

16px

24px

32px

48px

64px

80px

Foundation

Shadows & Elevation

Subtle shadows using dark purple-tinted rgba values for depth without harshness.

Low

0 1px 2px rgba(29,29,46,0.06)

Medium

0 2px 8px rgba(29,29,46,0.08)

High

0 4px 16px rgba(29,29,46,0.12)

Modal

0 8px 32px rgba(29,29,46,0.16)