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

Email
Default
Project
Focus
API Key
Error
Description

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