---
source: gallery_sentry
---

# sentry.io — Atmosphere

> Developer-focused APM brand built on deep near-black violet backgrounds with a single vivid purple accent, confident and direct copy.

> Extracted by [Coherent](https://getcoherent.design) from `https://sentry.io` on 2026-07-24 03:51:28 UTC.
> Mode: `dark` · captured in 3256ms · density: `comfortable`

<!-- coherent-extract: v1 -->

## Hero

**Detected via:** `largest-visible-text` (60px)

> Fix It

## Color

| Token | Hex | Role | Usage |
|-------|-----|------|-------|
| `#ffffff` | ![#ffffff](https://placehold.co/16x16/ffffff/ffffff.png) | background | body text |
| `#1f1633` | ![#1f1633](https://placehold.co/16x16/1f1633/1f1633.png) | background | input text |
| `#000000` | ![#000000](https://placehold.co/16x16/000000/000000.png) | text | page text |
| `#ffffff` | ![#ffffff](https://placehold.co/16x16/ffffff/ffffff.png) | background | input background |
| `#1f1633` | ![#1f1633](https://placehold.co/16x16/1f1633/1f1633.png) | background | body background |
| `#422082` | ![#422082](https://placehold.co/16x16/422082/422082.png) | brand | select background |
| `#ffffff` | ![#ffffff](https://placehold.co/16x16/ffffff/ffffff.png) | background | button-primary text |
| `#1f1633` | ![#1f1633](https://placehold.co/16x16/1f1633/1f1633.png) | background | a text |

### Backgrounds

- **page** — `#1f1633`

## Typography

**Font families**

- Rubik
- -apple-system
- system-ui
- Segoe UI
- Helvetica
- Arial

**Scale**

| Role | Size | Weight | Line height | Family |
|------|------|--------|-------------|--------|
| display | `88px` | 700 | `105.6px` | Dammit Sans |
| h1 | `60px` | 500 | `66px` | Dammit Sans |
| h2 | `27px` | 500 | `33.75px` | Rubik |
| h3 | `24px` | 500 | `30px` | Rubik |
| h4 | `20px` | 400 | `25px` | Rubik |
| body | `16px` | 400 | `32px` | Rubik |
| small | `14px` | 500 | `14px` | Rubik |

## Spacing

Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `35px` · `64px`

## Radius

Scale: `0px` · `6px` · `8px` · `10px` · `11px` · `12px` · `13px` · `18px`

## Shadows

- `rgba(0, 0, 0, 0.15) 0px 2px 10px 0px inset`
- `rgba(0, 0, 0, 0.08) 0px 2px 8px 0px`
- `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px inset`
- `rgba(0, 0, 0, 0.2) 0px 1px 3px 0px`

## Motion

| Duration | Easing | Property |
|----------|--------|----------|
| `200ms` | `cubic-bezier(0.4, 0, 0.2, 1)` | color |
| `300ms` | `cubic-bezier(0.4, 0, 0.2, 1)` | all |
| `200ms` | `ease` | background-position |
| `200ms` | `ease` | outline-width |
| `200ms` | `ease` | all |
| `200ms` | `cubic-bezier(0.4, 0, 0.2, 1)` | all |
| `200ms` | `ease` | box-shadow |
| `200ms` | `ease` | background |
| `300ms` | `ease` | background-color |
| `200ms` | `ease-in-out` | left |
| `300ms` | `cubic-bezier(0.4, 0, 0.2, 1)` | opacity |

## Gradients

- **linear** — `linear-gradient(120deg, rgb(250, 127, 170), rgb(255, 150, 145), rgb(255, 178, 135) 50%, rgb(255, 255, 255) 55%, rgb(255, 255, 255) 100%)`
- **linear** — `linear-gradient(120deg, rgb(200, 56, 82) 0%, rgb(180, 64, 146) 25%, rgb(106, 95, 193) 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%)`
- **linear** — `linear-gradient(rgb(31, 22, 51) 0%, rgb(48, 20, 95) 52.4%, rgb(48, 20, 95) 75%, rgb(48, 20, 95) 100%)`
- **linear** — `linear-gradient(to right in oklab, rgb(253, 68, 176) 0%, rgb(194, 239, 78) 100%)`
- **linear** — `linear-gradient(in oklab, rgb(253, 68, 176) 0%, rgb(194, 239, 78) 100%)`
- **radial** — `radial-gradient(50% 50%, rgba(173, 108, 170, 0.15) 0%, rgb(31, 22, 51) 65%)`

## Patterns

- **unknown** — `https://sentry.io/_astro/welcome-bg.BcYKCM6C.webp`
- **unknown** — `https://sentry.io/_astro/middle-bg-texture.Bj4JNsdD.webp`

## Breakpoints

Strategy: `desktop-first`

| Name | Min/Max width |
|------|---------------|
| md | `576px` |
| lg | `991px` |
| xl | `1151px` |

## Borders

- `2px solid rgba(0, 0, 0, 0)`
- `1px solid #cfcfdb`
- `1px solid #584674`

## Z-index scale

- **z-0** — `0`
- **z-1** — `1`
- **z-2** — `2`
- **z-5** — `5`
- **footer** — `10`
- **z-50** — `50`
- **z-1000** — `1000`

## Glassmorphism

`backdrop-filter: blur(18px) saturate(1.8)`

## Voice

Tone: `confident` · `technical` · `direct` · `developer-centric`

- *(hero)* "Fix It"
- *(body)* "Code breaks, fix it faster"
- *(body)* "Developer first. Always."
- *(meta-description)* "Application performance monitoring for developers & software teams to see errors clearer, solve issues faster & continue learning continuously. Get started at sentry.io."


---
Captured deterministically from computed CSS. Numerical fields (color, motion, spacing) reflect the live site at extraction time.