Dark Mode

Design System
Inspired by Sentry

A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized in dark mode.

Start Building View Tokens
Section 01

Color Palette

Primary Brand
Deep Purple
#1f1633
Primary background
Darker Purple
#150f23
Deeper sections
Border Purple
#362d59
Borders, dividers
Accent Colors
Sentry Purple
#6a5fc1
Links, hover, focus
Muted Purple
#79628c
Button backgrounds
Deep Violet
#422082
Selects, active
Lime Green
#c2ef4e
High-visibility accent
Coral
#ffb287
Focus backgrounds
Pink
#fa7faa
Focus outlines
Text Colors
Pure White
#ffffff
Primary text
Light Gray
#e5e7eb
Secondary text
Code Yellow
#dcdcaa
Syntax highlighting
Surface & Overlay
Glass White
rgba(255,255,255,0.12)
Frosted glass
Glass Dark
rgba(54,22,107,0.2)
Hover overlay
Input Border
#3a3252
Form borders (dark)
Section 02

Typography Scale

Display Hero
Display Hero — 88px / 700 / 1.20
Display Secondary
Display Secondary — 60px / 500 / 1.10
Section Heading
Section Heading — 30px / 400 / 1.20
Sub-heading
Sub-heading — 27px / 500 / 1.25
Card Title
Card Title — 24px / 500 / 1.25
Feature Title
Feature Title — 20px / 600 / 1.25
Body text — The quick brown fox jumps over the lazy dog. Sentry helps developers fix bugs faster.
Body — 16px / 400 / 1.50
Button Text
Button — 14px / 700 / uppercase / 0.2px
Micro Label
Micro — 10px / 600 / uppercase / 0.25px
const sentry = require('@sentry/node');
Code — 16px / Monaco / code-yellow
Section 03

Button Variants

Start Building
Lime Primary
Get Started
Muted Purple
View Docs
Glass White
Select Plan
Deep Violet
Section 04

Card Examples

Feature

Error Tracking

Automatically capture and organize errors from your application with full stack traces and breadcrumbs.

Elevated

Performance Monitoring

Track transactions and identify bottlenecks. Card shown with hover elevation.

Glass Card

Frosted glass surface with backdrop-filter blur on deep dark background.

Section 05

Form Elements

Default
Focus
Error
Section 06

Spacing Scale

1
2
4
8
12
16
24
32
40
48
Section 07

Border Radius Scale

6px
Inputs
8px
Buttons
10px
Containers
12px
Glass panels
13px
Primary btn
18px
Badges
Section 08

Elevation & Depth

Sunken (-1)
Inset — buttons
Flat (0)
No shadow
Surface (1)
Glass, subtle
Elevated (2)
Cards, panels
Prominent (3)
Hover, modals
Ambient (4)
Purple glow