CURATED · OPEN · FREE

Sentry

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

Developer ToolsSaaSProductBold TypographyExpressive

↓ Download design system (38 MB)Open in OpenDesign

Visit: https://sentry.io

📦 Browse pack contents →

Identity DNA

Developer ToolsError MonitoringPerformanceSaaS

A vigilant engineer keeping your codebase healthy.

Color

#eb4c8cAccent

#ffffffInk

#d4d4d4Ink soft

#150f23BG

#1f1633BG soft

#79628cMuted

rgba(255, 255, 255, 0.1)Line

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

Typography

humanist-sans · monospace

display60px · 500
body16px · 400
mono16px · 400

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.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Standard 4px grid system for consistent component spacing.

Surfaces

sm · 4px

md · 8px

lg · 10px

pill · 999px

Thin 1px borders in rgba(255, 255, 255, 0.1) or rgb(58, 46, 74)

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)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth color transitions on hover states · Subtle background gradient shifts

Change background-color or border-color with a 0.2s cubic-bezier transition. · Subtle scale or opacity reduction on press.

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.

Voice & Don'ts

Tone Technical, slightly irreverent, and highly confident.
Headlines Direct, action-oriented, often using wordplay or dramatic phrasing.
CTAs Clear, imperative, and focused on the value proposition.

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
Avoid: Overly corporate jargon
Avoid: Passive voice
Avoid: Unnecessary filler words

Inside the pack — real screenshots

Sentry — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko