Design System
Inspired by Sentry

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

Start Building View Tokens
Section 01

Color Palette

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

Typography Scale

Display Hero
Display Hero — 88px / 700 / 1.20 / Dammit Sans (approximated)
Display Secondary
Display Secondary — 60px / 500 / 1.10 / Dammit Sans (approximated)
Section Heading
Section Heading — 30px / 400 / 1.20 / Rubik
Sub-heading
Sub-heading — 27px / 500 / 1.25 / Rubik
Card Title
Card Title — 24px / 500 / 1.25 / Rubik
Feature Title
Feature Title — 20px / 600 / 1.25 / Rubik
Body text — The quick brown fox jumps over the lazy dog. Sentry helps developers fix bugs faster.
Body — 16px / 400 / 1.50 / Rubik
Body Emphasis — The quick brown fox jumps over the lazy dog.
Body Emphasis — 16px / 600 / 1.50 / Rubik
Nav Label
Nav Label — 15px / 500 / 1.40 / Rubik
Uppercase Label
Uppercase Label — 15px / 500 / 1.25 / Rubik / uppercase
Button Text
Button Text — 14px / 700 / 1.14 / Rubik / uppercase / 0.2px spacing
Caption
Caption — 14px / 500 / 1.43 / Rubik / uppercase / 0.2px spacing
Small Caption
Small Caption — 12px / 600 / 2.00 / Rubik
Micro Label
Micro Label — 10px / 600 / 1.80 / Rubik / uppercase / 0.25px spacing
const sentry = require('@sentry/node');
Code — 16px / 400 / 1.50 / Monaco
Section 03

Button Variants

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

Card Examples

Feature

Error Tracking

Automatically capture and organize errors from your application. Get full stack traces, breadcrumbs, and context for every issue.

Elevated

Performance Monitoring

Track transactions and identify slow database queries, API calls, and rendering issues. Card shown with hover elevation.

Glass Card

Frosted glass surface using backdrop-filter blur and white alpha overlay. Used for layered panels on dark backgrounds.

Section 05

Form Elements

Default state
Focus state (inset shadow)
Error state (pink ring)
Textarea
Section 06

Spacing Scale

1
2
4
8
12
16
24
32
40
48

Base unit: 8px. Scale: 1, 2, 4, 5, 6, 8, 12, 16, 24, 32, 40, 44, 45, 47px

Section 07

Border Radius Scale

6px
Inputs
8px
Buttons, cards
10px
Containers
12px
Glass panels
13px
Primary buttons
18px
Badges, images
Section 08

Elevation & Depth

Level -1: Sunken
Inset shadow — tactile pressed buttons
Level 0: Flat
No shadow — default surfaces
Level 1: Surface
Glass buttons, subtle cards
Level 2: Elevated
Cards, floating panels
Level 3: Prominent
Hover states, modals
Level 4: Ambient
Purple glow around hero