Color Palette
Fill & Gradient Colors
Pink 3
rgba(173,108,170,.15)
Shadow Color
Dark Blue 2
rgba(22,15,36,.9)
Typography
Base Font · Rubik
Rubik
Detect and fix performance issues before they become outages. Ship faster with confidence.
Regular · 400
Medium · 500
Semibold · 600
Bold · 700
Mono Font · IBM Plex Mono
IBM Plex Mono
SyntaxError: Unexpected token 'undefined' at line 42 in handleRequest()
Regular · 400
Medium · 500
Fix bugs faster
Display Hero · 88px · Bold · line-height: 105.6px · letter-spacing: 0
Every error, every user
Display XL · 60px · Bold · line-height: 66px
Application Performance
Heading XL · 30px · Semibold · line-height: 36px
Monitor, debug, and resolve
Heading Large · 27px · Semibold · line-height: 33.75px
Error Tracking & APM
Heading · 24px · Semibold · line-height: 24px
Real-time error tracking, performance monitoring, and session replay across every platform.
Body Large · 20px · Medium · line-height: 30px
Sentry helps developers diagnose, fix, and optimize the performance of their code. Used by over 4 million developers at 90,000+ organizations.
Body Default · 15px · Regular · line-height: 25px
Last event 2 minutes ago · 847 errors today · P95 latency: 342ms
Body Small · 14px · Regular · line-height: 17.5px
Issues · Performance · Replays · Releases
Caption / Label · 12px · Medium · line-height: 16px · letter-spacing: 0.25px
Letter Spacing
Sentry Platform
Tight
0% · headings, display
Error Tracking
Normal
0.2px · body, UI labels
ISSUES · PERFORMANCE
Wide
0.25px · uppercase labels
Spacing
Spacing Scale
Token scale — 2px → 160px
Shadow / Elevation
Shadow Tokens
5 distinct tokens — dark overlay spread to inset highlights
Small
--shadow-sm
rgba(22,15,36,.9) 0px 4px 4px 9px · heavy dark spread
Medium
--shadow-md
rgba(0,0,0,.15) 0px 2px 10px inset · inner depth
Large
--shadow-lg
rgba(0,0,0,.08) 0px 2px 8px · subtle outer shadow
XL
--shadow-xl
rgba(0,0,0,.1) 0px 1px 3px inset · soft inset
Shadow 5
--shadow-shadow-5
rgba(0,0,0,.2) 0px 1px 3px · crisp drop shadow
Z-Index
| Token | Value | Usage |
|---|
| --z-1 | -1 | Background decorations, canvas layers beneath content |
| --z-2 | 1 | Base content layer |
| --z-3 | 2 | Slightly elevated content, e.g. active list items |
| --z-4 | 5 | Inline overlays, sticky elements |
| --z-5 | 10 | Navigation bar, sticky headers |
| --z-6 | 50 | Popovers, tooltips, dropdown menus |
| --z-7 | 1000 | Modals, dialogs, overlays |
| --z-8 | 9999 | Toasts, top-priority notifications |
Breakpoints
📱
--breakpoint-xs
1px
Base / all viewport sizes
📱
--breakpoint-sm
576px
Small mobile breakpoint
📲
--breakpoint-md
640px
Medium mobile / small tablet
📲
--breakpoint-lg
767px
Tablet portrait (upper edge)
💻
--breakpoint-xl
768px
Tablet landscape / small laptop
💻
--breakpoint-2xl
991px
Laptop (upper edge)
🖥️
--breakpoint-3xl
992px
Desktop
🖥️
--breakpoint-bp-8
1151px
Large desktop (upper edge)
🖥️
--breakpoint-bp-9
1152px
Wide desktop
📺
--breakpoint-bp-10
1440px
Full HD / wide monitors
Opacity
Opacity Tokens
6 tokens — 25% → 90%
Accessibility — Contrast Ratios
WCAG 2.1: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1
| Text Token | Background Token | Ratio | Rating |
|---|
| Light Gray 2 | White | 1.48:1 | Fail |
| Light Gray 2 | Dark Blue | 12.6:1 | AAA |
| Light Gray 2 | Dark Blue 3 | 11.6:1 | AAA |
| Light Gray 2 | Blue 3 | 3.52:1 | AA Large |
| Light Gray 2 | Blue 4 | 3.19:1 | AA Large |
| Black | White | 21:1 | AAA |
| Black | Dark Blue | 1.12:1 | Fail |
| Black | Dark Blue 3 | 1.22:1 | Fail |
| Black | Blue 3 | 4.02:1 | AA Large |
| Black | Blue 4 | 4.44:1 | AA Large |
| Blue | White | 2.95:1 | Fail |
| Blue | Dark Blue | 6.33:1 | AA |
| Blue | Dark Blue 3 | 5.83:1 | AA |
| Blue | Blue 3 | 1.77:1 | Fail |
| Blue | Blue 4 | 1.6:1 | Fail |
| Light Yellow | White | 1.41:1 | Fail |
| Light Yellow | Dark Blue | 13.22:1 | AAA |
| Light Yellow | Dark Blue 3 | 12.17:1 | AAA |
| Light Yellow | Blue 3 | 3.7:1 | AA Large |
| Light Yellow | Blue 4 | 3.35:1 | AA Large |
| Green | White | 3.33:1 | AA Large |
| Green | Dark Blue | 5.6:1 | AA |
| Green | Dark Blue 3 | 5.16:1 | AA |
| Green | Blue 3 | 1.57:1 | Fail |
| Green | Blue 4 | 1.42:1 | Fail |
CSS Variables Reference
Dark Blue--color-dark-blue#150F23
Dark Blue 3--color-dark-blue-3#1F1633
Dark Purple 3--color-dark-purple-3#2D2340
Dark Purple 5--color-dark-purple-5#422082
Blue 3--color-blue-3#6A5FC1
Blue 4--color-blue-4#7553FF
Purple--color-purple#79628C
Light Gray 3--color-light-gray-3#EFEFEF
White 2--color-white-2#F9F8FF
White 3--color-white-3#F6F6F8
White--color-white#FFFFFF
Light Gray 2--color-light-gray-2#D4D4D4
Green--color-green#6A9955
Green 2--color-green-2#C2EF4E
Light Yellow--color-light-yellow#DCDCAA
Orange--color-orange#CE9178
Light Gray--color-light-gray#E5E7EB
Dark Purple 4--color-dark-purple-4#433458
Purple 2--color-purple-2#584674
Dark Purple--color-dark-purple#452650
Red 2--color-red-2#C83852
Pink 2--color-pink-2#B44092
Light Red--color-light-red#FA7FAA
Light Red 2--color-light-red-2#FF9691
Light Orange--color-light-orange#FFB287
Base--font-family-baseRubik
Alt--font-family-2Dammit Sans
Mono--font-family-3IBM Plex Mono
Mono Alt--font-family-4Monaco
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
Bold--font-weight-bold700
2XS--font-size-2xs10px
XS--font-size-xs12px
SM--font-size-sm14px
Base--font-size-base15px
LG--font-size-lg16px
XL--font-size-xl20px
2XL--font-size-2xl24px
3XL--font-size-3xl27px
4XL--font-size-4xl30px
5XL--font-size-5xl60px
6XL--font-size-6xl88px
Tight--letter-spacing-tight0%
Normal--letter-spacing-normal0.2px
Wide--letter-spacing-wide0.25px
Space 160--space-16070.5px
Hairline--border-width-hairline1px
Thin--border-width-thin2px
SM--radius-sm0 12px 12px 0
R7--radius-r712px 0 0 12px
R12 Pill--radius-r129999px
Instant--duration-instant150ms
Fast--duration-fast200ms
Normal--duration-normal300ms
Slow--duration-slow400ms
Slower--duration-slower600ms
Duration 6--duration-duration-6800ms
Ease Out--easing-ease-outease-out
Ease In Out--easing-ease-in-outease-in-out
Background--z-1-1
Base--z-21
Elevated--z-32
Sticky--z-45
Navigation--z-510
Popover--z-650
Modal--z-71000
Toast--z-89999
XS--breakpoint-xs1px
SM--breakpoint-sm576px
MD--breakpoint-md640px
LG--breakpoint-lg767px
XL--breakpoint-xl768px
2XL--breakpoint-2xl991px
3XL--breakpoint-3xl992px
BP-8--breakpoint-bp-81151px
BP-9--breakpoint-bp-91152px
BP-10--breakpoint-bp-101440px
Design System Preview · Sentry (Dark) · Generated 18/04/2026