---
name: Sentry
description: "Sentry's design successfully balances technical credibility with a bold, slightly irreverent brand voice, making a complex developer tool feel accessible and modern."
version: alpha

colors:
  background: "#150f23"
  primary: "#ffffff"
  secondary: "#d4d4d4"
  tertiary: "#eb4c8c"
  neutral: "#79628c"
  bg-soft: "#1f1633"
  line: "rgba(255, 255, 255, 0.1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 60px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.2px"
  mono:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 10px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Application monitoring software designed to help developers find and fix crashes faster.

*A vigilant engineer keeping your codebase healthy.*

## Colors

High-contrast neon accents on a deep indigo void to convey technical precision.

- **Background (`#150f23`)** — uses `bg` token
- **Primary text (`#ffffff`)** — uses `ink` token
- **Secondary text (`#d4d4d4`)** — uses `ink-soft` token
- **Accent (`#eb4c8c`)** — uses `accent` token
- **Muted (`#79628c`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.1)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Use humanist-sans for headlines and body text for a friendly developer feel.
- Reserve monospace fonts strictly for code blocks and technical data.
- Maintain a strict typographic hierarchy with clear size jumps.

## Layout

Full-width dark container with a centered content area, generous vertical padding for hero sections.

*Rhythm:* Standard 4px grid system for consistent component spacing.

## Elevation & Depth

- 0px 0px 8px 6px rgb(21, 15, 35)
- 0px 2px 10px 0px inset rgba(0, 0, 0, 0.15)
- 0px 2px 8px 0px rgba(0, 0, 0, 0.08)
- Borders: Thin 1px borders in rgba(255, 255, 255, 0.1) or rgb(58, 46, 74)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 10px
- `pill`: 999px

## Components

- **button:** Bold, rounded buttons (primary solid white with dark text, secondary outlined with white text).
- **card:** Dark elevated cards with subtle gradients and glowing borders.
- **chip:** Small rounded badges with low-opacity backgrounds.
- **input:** Dark input fields with subtle inset shadows and thin borders.
- **hero:** Centered, large-scale typography with vibrant gradient accents and background illustrations.

## Do's and Don'ts

**Don't:**
- don't use bright, saturated backgrounds — screenshot shows deep indigo and purple tones instead
- don't use light-themed UI elements — screenshot shows dark mode with neon accents
- don't use thin, delicate typography — screenshot shows bold, high-impact headlines
- don't use soft, rounded shapes everywhere — screenshot shows sharp, technical UI elements
- don't use a muted, low-contrast color palette — screenshot shows high-contrast neon greens and pinks
- don't use serif fonts for technical content — screenshot shows humanist-sans and monospace

---

## System Prompt (paste into AI agent)

```
Sentry is an application monitoring SaaS for developers. The design is bold and technical, featuring a dark indigo and purple palette (#150f23, #1f1633) with vibrant neon accents in pink (#eb4c8c) and green (#00f5a0). Typography is humanist-sans for a friendly but professional feel, with a strong emphasis on bold headlines. Critical design constraints include: never use a light theme, avoid thin and delicate typography, and do not use overly corporate or stiff language. The UI is characterized by high-contrast elements and a slightly irreverent tone that resonates with a developer audience.
```