Home
DESIGN.mdStar on GitHub
Copied!
Sentry
Colors
Brand
Blurple#6a5fc1
Dk Blurple#4e2a9a
Hot Pink#fd44b0
Lt Pink#fa7faa
Lt Orange#ffb287
Lt Yellow#ffdb4a
Dark Surfaces
Rich Black (bg)#1f1633
Utility Black#181225
Dk Violet (border)#362d59
Dk Purple#452650
Dk Violet Alt#36166b
Light Surfaces
White (bg)#ffffff
Bg Secondary#f6f6f8
Gray-2 (border)#ececf1
Gray-3#cfcfdb
Semantic / Status
Error (Dk Pink)#c73852
Warning (Md Yellow)#f2b712
Info (Blurple)#6a5fc1
Resolved#2ba22b
Typography — Rubik + IBM Plex Mono
34px700Rubik
Code breaks, fix it faster
24px700
Developer first. Always.
18px600
Debugging needs context — with or without AI
14px400
Catch critical issues before you merge and fix them when they hit prod with Seer, our debugging agent and code reviewer.
12px400
2 hours ago · frontend · assigned to m.chen
13pxIBM Plex Mono
TypeError: Cannot read properties of undefined (reading 'map')
11px600 caps
Level · Project · Events · Last Seen
Components
Buttons
Search & Filter
Event Level Badges
error warning info resolved
Fatal / Error — immediate action required
Warning — degraded or unexpected state
Info — informational, no action needed
Event Count Pill
TypeError: Cannot read properties 14.2k
RangeError: Maximum call stack 3.1k
ChunkLoadError: Loading chunk 42 287
Signature Component — Issues List

Filter by level · click any row to expand stack trace · check box or click Resolve to mark as resolved

Unresolved Issues

Issue
Level
Project
Assignee
Events
Last Seen
Spacing Scale (base 4px)
space-1
4px — icon gaps, tight inline
space-2
8px — list item padding
space-3
12px — inner card padding
space-4
16px — standard component gap
space-6
24px — section padding
space-8
32px — large section gaps
space-12
48px — page section spacing
Guardrails
Do
  • Use IBM Plex Mono for all event IDs, hashes, and stack traces
  • Color-code severity consistently — level dots, badges, and accents must align
  • Show timestamps as relative ("2 hours ago") with absolute datetime on hover
  • Keep error messages technically accurate — developers need precision over hand-holding
  • Use blurple (#6a5fc1) as the primary action color and for info-level events
  • Reserve hot-pink / lt-pink gradients for marketing surfaces only
Don't
  • Don't apply bright brand colors to large surface areas — they are status indicators
  • Don't exceed 8px border-radius on data tables or dashboards — stay sharp
  • Don't repurpose the error color (#c73852) for non-error UI states
  • Don't animate issue rows — performance tables demand focus, not delight
  • Don't override the dark primary surface (#1f1633) for the main dashboard view
  • Don't stack multiple accent colors in a single component