# 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

Email Address
Default state
Project Name
Focus state (inset shadow)
API Key
Error state (pink ring)
Description
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