# Sentry — Marketing Site Design Spec

> 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`). Responsive: breakpoints not captured (desktop only).

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Surfaces (dark purple)
| 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 |

### Text
| Token | Hex | Role / usage |
|---|---|---|
| white | `#ffffff` | Primary text, headings |
| text-70 | `rgba(255,255,255,.7)` | Secondary text |
| muted | `#d4d4d4` | Tertiary / captions |

### Accents
| Token | Hex | Role / usage |
|---|---|---|
| violet | `#7553ff` | Primary brand accent, links, highlights |
| indigo | `#6a5fc1` | Gradient mid-stop, secondary UI |
| pink | `#fd44b0` | Hot-pink emphasis (script word, highlights) |
| lime | `#c2ef4e` | "Seer" AI accent, chart lines |

### Code syntax (GitHub-dark, in code cards)
| 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.

## 3. Typography Rules

- Display: `"Dammit Sans", sans-serif` — Sentry's custom hand-drawn face, hero headlines only.
- Sans (body/UI/buttons): `Rubik, -apple-system, system-ui, "Segoe UI", sans-serif`.
- Mono (code): `"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.

## 4. Component Stylings

### Buttons
- **Primary**: bg `#ffffff`, text `#1f1633`, radius `8px`, height ~40px, Rubik 14/700, +0.2px tracking, padding `0 16px`.
- **Demo (outline)**: transparent bg, text `#ffffff`, 2px pink/red outline border, radius `8px`, same metrics.
- **Secondary (sandbox outline)**: transparent, white text, subtle outline border, radius `8px`.
- **Ghost / nav (Sign in)**: transparent, white text, weight 500.

### Cards / product panels
- bg `#2d2340` (or violet `#422082`), radius `10–12px`, holding dark product UI (Errors, Replays, Seer) and code blocks; subtle borders/glow.

### Code block
- Dark inset, IBM Plex Mono, GitHub-dark syntax palette (see §2); a highlighted line uses a violet/red-tinted background.

### Nav
- Uppercase Rubik links (Platform, Solutions, Resources, Docs, Pricing) with dropdown carets; right side: Sign in (ghost), Get demo (pink outline), Get started (white primary).

## 5. Layout Principles

- Centered hero, ~1300px content width; headline centered with subhead + dual CTA, then a wide band of overlapping product cards and mascot illustration.
- Section rhythm generous; product surfaces float over the grainy purple field.
- Footer: same deep purple `#1f1633`, multi-column links.

## 6. Depth & Elevation

- Radii: `8px` buttons, `10–12px` cards, `16–18px` larger panels, full for pills/avatars.
- Elevation via soft glows and layered cards over the textured background rather than hard drop shadows.

## 7. Motion

- Micro-transitions on hover (color/opacity/transform), short durations. Product cards and mascots animate on scroll/load. "Marketing Mode ON" toggle in the corner. Animation library not positively identified (`not captured`).

## 8. Backgrounds, Effects & WebGL

- Grainy/noise-textured deep-purple background across the page.
- Signature hero gradient: `linear-gradient(120deg, #c83852, #b44092, #6a5fc1 50%, #45...)` (red → magenta → violet); a warm variant `linear-gradient(120deg, #fa7faa, #ff9691, #ffb287 50%, …)`.
- Illustrated 3D mascots and glowing product cards provide depth. No WebGL confirmed (`not captured`).

## 9. Do's and Don'ts

### Do
- Use a deep grainy-purple canvas (`#1f1633` / `#150f23`) with white text.
- Set hero headlines in the hand-drawn Dammit Sans at ~88px/700, and break the line with a hot-pink emphasis word.
- Keep body, UI, buttons in Rubik; nav labels uppercase 700 with +0.2px tracking.
- Make primary buttons white pills (`#fff` bg, `#1f1633` text, radius 8px); demo button a pink outline.
- Show product in dark cards with GitHub-dark code syntax colors; reserve lime `#c2ef4e` for AI (Seer).
- Use the red→magenta→violet 120deg gradient for the hero moment.

### Don't
- Don't set the canvas to flat black or neutral gray — it is purple and grainy.
- Don't use Dammit Sans for body or UI — display only.
- Don't colorize primary buttons; they stay white.
- Don't spread lime or pink across chrome; keep them as accents.

## 10. Responsive Behavior

- Not captured (desktop 1512px only). Nav collapses to a menu on small screens (pattern present, not verified).

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#1f1633` · Deep `#150f23` · Text `#ffffff` · Muted `rgba(255,255,255,.7)` · Accent violet `#7553ff` · Pink `#fd44b0`
- Font: Display `Dammit Sans` 88/700 · Body/UI `Rubik` · Code `IBM Plex Mono` · Button 14/700 +0.2px · Radius 8px control / 10–12px card
- Primary button: white bg `#fff`, text `#1f1633`, radius 8px · Hero gradient: `linear-gradient(120deg,#c83852,#b44092,#6a5fc1)`

<sentry_design_language>
Use the Sentry design language: a deep grainy-purple canvas (#1f1633, deepest #150f23) with white text and secondary rgba(255,255,255,.7). Hero headlines are set in Sentry's hand-drawn display face (Dammit Sans) at ~88px/700, broken by a hot-pink (#fd44b0) emphasis word; everything else — body, UI, buttons, nav — is Rubik, with uppercase nav labels at 700 and +0.2px tracking. The primary button is a white pill (#ffffff bg, #1f1633 text, radius 8px, 14/700); the demo button is a pink/red outline. Product is shown in dark cards (#2d2340, radius 10–12px) using GitHub-dark code syntax colors (#f97583 red, #9ecbff blue, #b392f0 purple, #85e89d green, #6a737d comment); lime #c2ef4e is reserved for AI (Seer) features and chart lines; violet #7553ff is the brand accent. The signature hero effect is a red&rarr;magenta&rarr;violet linear-gradient(120deg,#c83852,#b44092,#6a5fc1) over a noise-textured purple field with cartoon mascots. Elevation is soft glows and layered cards, not hard shadows. Feels: dark, playful, technical, irreverent. Avoid: a flat-black or gray canvas, using Dammit Sans for body/UI, colorizing the primary button, or spreading pink/lime across the chrome.
</sentry_design_language>