---
site: "Application Performance Monitoring & Error Tracking Software | Sentry"
url: "https://sentry.io"
generated_at: "2026-06-25T08:30:25.844Z"
generator: "designlang@13.0.0"
intent: landing
material: flat
library: tailwindcss
tokens:
  colors:
    primary: "#150f23"
    secondary: "#9ecbff"
    accent: "#2d2340"
    background: "#1f1633"
    foreground: "#000000"
  typography:
    sans: Rubik
    mono: IBM Plex Mono
    base: 16
  spacing:
    base: 2
    scale: "[2, 16, 20, 24, 32, 35, 40, 44, 56, 64]"
  radii:
    xs: 2
    md: 10
    lg: 16
    full: 50
  shadows:
    sm: "rgb(128, 128, 128) 0px 0px 5px 0px"
---

# Overview

A **landing** page (heuristic confidence 0.27), dressed in **flat** material.

Component library appears to be **tailwindcss** (0.784).

> " Solutions "

The author writes in a **neutral** voice; headings tend to be **Sentence case** case and **tight**.

Reading order detected on the source: `cta → nav → testimonial → testimonials → content → testimonials → testimonial → testimonial → feature-grid → feature-grid → testimonial → testimonial → content → cta → pricing → footer → content → nav → nav → nav`.

Source: <https://sentry.io>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#150f23` | 164 |
| secondary | `#9ecbff` | 220 |
| accent | `#2d2340` | 2 |
| background | `#1f1633` | — |
| foreground | `#000000` | — |

**Neutrals:** `#ffffff` · `#d4d4d4` · `#e1e4e8` · `#6a737d` · `#000000`

**Total unique colors detected:** 29.

# Typography

**Families**
- `Rubik` · 2000 uses
- `Monaco` · 1165 uses
- `IBM Plex Mono` · 57 uses
- `Dammit Sans` · 17 uses

**Body size:** `16px` / line-height `24px`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `88px` | `700` | `105.6px` |
| h2 | `60px` | `500` | `66px` |
| h3 | `27px` | `500` | `33.75px` |
| h4 | `24px` | `500` | `30px` |

# Layout

**Spacing base:** `2px` increments.
**Scale:** `2px` · `16px` · `20px` · `24px` · `32px` · `35px` · `40px` · `44px` · `56px` · `64px`

**Layout primitives:** 29 grid containers · 457 flex containers.

**Breakpoints:** `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px`

# Elevation and Depth

**Shadow scale**
- `sm` — `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`
- `sm` — `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px inset`
- `sm` — `rgba(0, 0, 0, 0.2) 0px 1px 3px 0px`
- `sm` — `rgb(128, 128, 128) 0px 0px 5px 0px`
- `sm` — `rgb(21, 15, 35) 0px 0px 8px 6px`
- `md` — `rgba(0, 0, 0, 0.08) 0px 2px 8px 0px`

**Z-index layers:** 8

# Shapes

**Radius scale**
- `xs` — `2px`
- `md` — `6px`
- `md` — `10px`
- `lg` — `13px`
- `lg` — `16px`
- `full` — `50px`

# Components

**Detected patterns:** `buttons` · `cards` · `inputs` · `links` · `navigation` · `footer` · `dropdowns` · `badges` · `tabs` · `accordions` · `switches`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| button | primary | xl | 51 |

# Do's and Don'ts

**Do's**
- Use `ship`, `platform`, `solutions` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Sentence case** case, **tight** length.
- Address the reader with the pronoun posture **you-only**.
- Stay inside the **flat** material — match shadow and radius habits.

**Don'ts**
- Don't 4 font families — consider limiting to 2 (heading + body).
- Don't 141 !important rules — prefer specificity over overrides.
- Don't 51% of css is unused — consider purging.
- Don't 3354 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v13.0.0 from <https://sentry.io>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._