# Sentry — Design System
> Application performance monitoring and error tracking platform for developers.
- **Canonical:** https://uiuxskills.com/library/sentry
- **Source:** https://sentry.io
- **Category:** Developer Tools & IDEs
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 75%
- **License:** MIT
- **Last updated:** 2026-06-09T23:14:15.625Z

---

---
version: alpha
name: Sentry
description: Application performance monitoring and error tracking platform for developers.
tone: >-
  Direct, technical, confident, and developer-focused. The tone avoids marketing fluff, favoring
  clear benefit statements and actionable insights.
color-scheme: dark
colors:
  primary: "#FD44B0"
  secondary: "#C2EF4E"
  surface: "#181225"
  surface-container: "#1F1633"
  on-surface: "#FFFFFF"
  on-primary: "#181225"
  accent-inactive: "#7553FF"
  error: "#FF4B4B"
  success: "#C2EF4E"
  outline: "#30145F"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  label-sm:
    fontFamily: monospace
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "#FF66C0"
  card:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  input-field:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.outline}"
  link:
    textColor: "{colors.primary}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.secondary}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-accent-inactive:
    backgroundColor: "{colors.accent-inactive}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.1)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Sentry employs a high-contrast, dark-mode-first aesthetic that emphasizes technical precision and developer-centric utility. The brand identity is defined by vibrant neon accents against deep purple backgrounds, creating a hacker-chic vibe that feels both modern and highly functional.

## Colors

The color strategy relies on a dark, high-contrast palette designed to reduce eye strain while highlighting critical data points and interactive elements.

*   Primary (#FD44B0): Vibrant pink used for primary call-to-action buttons and active states.
*   Secondary (#C2EF4E): Neon green used for secondary accents and success indicators.
*   Surface (#181225): Deep purple base background color.
*   Surface-container (#1F1633): Slightly lighter purple used for cards and containers to create depth.
*   On-surface (#FFFFFF): White text for high contrast against dark backgrounds.
*   On-primary (inferred) (#181225): Dark text for readability on primary buttons.
*   Accent-inactive (#7553FF): Muted purple for inactive UI elements.
*   Error (inferred) (#FF4B4B): Standard error red for alerts.
*   Success (inferred) (#C2EF4E): Shared with secondary for success states.
*   Outline (#30145F): Darker purple for borders and dividers.

## Typography

Typography is strictly utilitarian, favoring clean sans-serif faces for readability and monospaced fonts for technical accuracy.

*   Display-lg (inferred): Used for hero headlines.
*   Headline-lg: Used for sub-headers.
*   Body-md: Standard body text for paragraphs.
*   Label-sm (inferred): Monospaced font used for code snippets and technical labels.

## Layout

The layout follows a standard web-app grid with a max-width container, utilizing a 4px-based spacing rhythm. The page structure follows this order: nav, hero, social-proof, features, use-cases, testimonials, and footer. The hero pattern features a centered headline and subhead with primary and secondary CTAs, followed by a large product illustration. The design is mobile-first, with navigation collapsing into a menu on smaller screens and content blocks stacking vertically.

## Elevation & Depth

Elevation is used sparingly to differentiate cards from the background, relying more on color contrast between {colors.surface} and {colors.surface-container} to define depth.

*   Elevation.sm: Subtle lift for minor UI elements.
*   Elevation.md: Standard lift for interactive cards.
*   Elevation.lg: Pronounced lift for modal or drawer overlays.

## Shapes

The design system uses a consistent set of rounded corners to soften the technical nature of the interface. A scale ranging from 4px to 16px is applied to UI components, ensuring a clean, professional, and approachable aesthetic.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button-primary
The primary call-to-action button uses {colors.primary} with {typography.label-sm} text. Use this for the main conversion point on a page. On hover, the background shifts to a lighter pink to provide immediate feedback.

### Card
Cards utilize {colors.surface-container} and {rounded.lg} to group related content. They are the primary container for features and testimonials, providing a clear visual boundary against the {colors.surface} background.

### Input-field
Input fields are styled with a {colors.surface} background and {colors.outline} borders. They are designed for high-density forms where clarity and focus are paramount.

### Badge
Badges are used for status indicators or labels. Use {badge-success} for positive states and {badge-error} for critical issues, both utilizing {rounded.sm} for a compact, technical look.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for primary call-to-action buttons. | Use light backgrounds for the main content area. |
| Use {colors.surface-container} for card backgrounds to create depth. | Mix too many font families; stick to the system sans-serif. |
| Apply {rounded.lg} to all interactive cards. | Use {colors.error} for non-critical UI elements. |
| Use {typography.label-sm} for all code-related labels. | Use sharp corners on buttons; always apply at least {rounded.md}. |
| Maintain consistent {spacing.md} between content blocks. | Crowd content; ensure {spacing.lg} is used for section padding. |
| Use {colors.secondary} for success states and secondary highlights. | Use low-contrast text on {colors.surface-container}. |
| Use {colors.outline} for subtle borders and dividers. | Use high-elevation shadows for standard flat content. |
| Ensure all buttons have at least {rounded.md} corners. | Use primary colors for secondary or tertiary actions. |

## Content Style

CTA style is imperative and action-oriented, using verbs like "Get Started" or "See How" to drive immediate engagement.

Heading tone is direct and benefit-driven, focusing on solving specific developer pain points without marketing fluff.

Copy density is optimized for scannability, featuring short paragraphs, frequent use of code snippets, and bullet points to convey technical information quickly.

## Imagery & Icons

The imagery style is mixed, combining clean, terminal-style illustrations with high-fidelity product screenshots. Icons are minimalist and stroke-based, maintaining a technical, developer-focused aesthetic. Illustrations should be used to clarify complex concepts, while screenshots should demonstrate the product's value in real-world debugging scenarios.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Sentry, a developer-focused error tracking platform with a direct, technical, and confident tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.label-sm}`, `{rounded.lg}` — never hardcode hex values, pixel sizes, or font stacks.
2. Respect only the component shapes defined under `components:`. Do not invent variants (e.g. button-secondary, card-flat) that the spec does not list.
3. Follow the Layout section for page structure order (nav → hero → social-proof → features → use-cases → testimonials → footer) and apply mobile-first stacking; use a single breakpoint at 768px unless the spec states otherwise.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it — for example, using `{colors.error}` decoratively or placing content on a light background — surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations from a site render. If an authoritative source (theme file, Storybook, component metadata) is available, those values override the spec's inferred ones.

## Output contract

**Must:**
- Use token names for all colors, spacing, radii, typography, and elevation values.
- Cover hover (`button-primary-hover`), focus, and disabled states for every interactive component the spec defines.
- Apply `{spacing.md}` between content blocks and `{spacing.lg}` for section padding, per the Do's and Don'ts.
- Render all buttons with at minimum `{rounded.md}`; use `{typography.label-sm}` (monospace) for button labels.
- Use `{badge-success}` and `{badge-error}` — not plain badges — for status states.

**Must NOT:**
- Introduce colors, fonts, radii, or elevation values absent from the spec.
- Use light backgrounds for any content area — this is a dark-mode-first system built on `{colors.surface}`.
- Use `{colors.primary}` for secondary or tertiary actions.
- Add emoji, filler text, or marketing copy.
- Rewrite headings, button labels, nav items, or any page copy — visual tokens only.
- Alter navigation structure or page section order as a side effect of applying design tokens.

## When in doubt
- If the spec does not define a value, ask the user before inventing one.
- For background roles, default to `{colors.surface-container}`; for text on any dark surface, default to `{colors.on-surface}`.
- Compose existing components before proposing new tokens or variants.
- For depth decisions, prefer the `{colors.surface}` / `{colors.surface-container}` contrast relationship over elevation shadows; reserve `{elevation.lg}` for modals and drawers only.
- Inferred tokens are approximations — flag them if precision matters for the task at hand.