Playful developer-noir: deep grainy-purple canvas, a hand-drawn Dammit Sans hero broken by a hot-pink accent word, Rubik chrome, white pill buttons, and dark product cards lit only by GitHub-dark code syntax with a lime Seer/AI accent.
Browse Sentry in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: sentry.io/welcome (live DOM, computed styles), 2026-07-13 (desktop 1512px). Coverage: homepage (hero, product cards, nav, footer). Dashboard: behind login (needs-dashboard). Backfilled 2026-07-26 — §4 states, §7 motion and §10 responsive all said "not captured"; all three were readable fromdocument.styleSheetsthe whole time. 0 stylesheets blocked. Astro build (data-astro-cid-*) with Tailwind v4 over a hand-authored.btn/.btn-newsystem. The focus finding is the best in this library: 36 focus rules, one per button variant, each pre-setting anoutline-colormatched to that variant's own fill and growingoutline-widthfrom0remto0.125rem. Excluded from §4 as vendor: Marketo form styles (_formField_jumrn_*) and the Vimeo play button — their#3b82f6ring is not Sentry's, though the#6a5fc1violet variant of it is brand-themed.
Playful developer-noir: a deep grainy-purple canvas lit by a red-to-violet gradient hero and cartoon mascots, with a big hand-drawn display face that gives the brand its irreverent, "not bad" voice. Personality comes from the custom Dammit Sans headline and a hot-pink emphasis word, while the working chrome stays clean Rubik. Product is shown through dark UI cards whose only real color is GitHub-style code syntax highlighting and a lime "Seer" AI accent. Buttons are simple white pills. It reads as technical but self-aware — a debugging tool that doesn't take itself too seriously. Feels: dark, playful, technical, irreverent.
| Token | Hex | Role / usage |
|---|---|---|
| bg-deep | #150f23 | Deepest section background |
| bg | #1f1633 | Page canvas, footer, button text color |
| surface | #2d2340 | Raised cards / panels |
| surface-violet | #422082 | Violet-tinted panel fills |
| purple-mid | #4e2a9a | Mid purple blocks |
| Token | Hex | Role / usage |
|---|---|---|
| white | #ffffff | Primary text, headings |
| text-70 | rgba(255,255,255,.7) | Secondary text |
| muted | #d4d4d4 | Tertiary / captions |
| violet | #7553ff | Primary brand accent, links, highlights |
| indigo | #6a5fc1 | Gradient mid-stop, secondary UI, .btn-new.primary fill |
| pink | #fd44b0 | Hot-pink emphasis (script word, highlights) |
| lime | #c2ef4e | "Seer" AI accent, chart lines |
| Token | Hex | Role |
|---|---|---|
| code-fg | #e1e4e8 | Code default text |
| code-red | #f97583 | Keywords |
| code-blue | #9ecbff / #79b8ff | Strings / functions |
| code-purple | #b392f0 | Constants |
| code-green | #85e89d | Additions |
| code-comment | #6a737d | Comments |
Rule: chrome is purple + white; color energy is the gradient, the pink accent word, and code syntax. Reserve lime for AI (Seer) features.
"Dammit Sans", sans-serif — Sentry's custom hand-drawn face, hero headlines only.Rubik, -apple-system, system-ui, "Segoe UI", sans-serif."IBM Plex Mono", Consolas, monospace and Monaco, Menlo, monospace.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 88 / 105.6 | 700 | normal, Dammit Sans |
| Section (h2) | ~40 | 700 | Rubik |
| Body / subhead | 20–24 | 400 | 0, Rubik |
| Button / UI | 14 | 700 | +0.2px |
| Nav | 14 | 500–700 | +0.2px, UPPERCASE |
| Code | 13–14 mono | 400 | 0 |
Patterns: display is huge (88px) and hand-drawn; the pink emphasis word breaks the headline. Button/nav labels are 700 with slight positive tracking; nav is uppercase.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.