# Sentry design system: colors, fonts and tokens

> Sentry's website (sentry.io) uses a dark interface with #150f23 as its primary color and Rubik as the main typeface, with Monaco alongside it. designlang measured 11 font sizes from 10px to 88px, 13 spacing values, 6 corner radii.

Source: https://sentry.io, captured 25 June 2026. Page: https://designlang.app/design-system/sentry

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#150f23` | 164 |
| Secondary | `#9ecbff` | 220 |
| Accent | `#2d2340` | 2 |

Neutrals: `#ffffff`, `#d4d4d4`, `#e1e4e8`, `#6a737d`, `#000000`, `#1a1a1a`, `#efefef`, `#584674`, `#c1c1c1`

Backgrounds: `#1f1633`, `#150f23`, `#422082`

## Fonts

- Rubik (sans), 2000 elements
- Monaco (mono), 1165 elements
- IBM Plex Mono (mono), 57 elements
- Dammit Sans (sans), 17 elements

## Type scale

| Size | Weight | Line height | Tracking | Used on |
|---|---|---|---|---|
| 88px | 700 | 105.6px | normal | h1, span |
| 60px | 500 | 66px | normal | h2, span |
| 30px | 400 | 36px | normal | p |
| 27px | 500 | 33.75px | normal | div, p, a, em |
| 24px | 500 | 30px | normal | h3, span |
| 20px | 600 | 25px | normal | h3, div |
| 16px | 400 | 24px | normal | html, head, meta, script |
| 15px | 500 | 21px | normal | label, span |
| 14px | 500 | 18px | 0.2px | button, span, div, svg |
| 12px | 400 | 24px | normal | div, span, svg, path |
| 10px | 600 | 18px | 0.25px | span |

## Spacing

2px, 16px, 20px, 24px, 32px, 35px, 40px, 44px, 56px, 64px, 72px, 83px, 160px

## Radii

2px, 6px, 10px, 13px, 16px, 50px

## Motion

Feel: mixed. Durations: 150ms, 200ms, 300ms, 600ms, 800ms.

## Audit

Overall 81/100 (grade B).

- Color Discipline: 80/100
- Typography Consistency: 50/100
- Spacing System: 100/100
- Shadow Consistency: 90/100
- Border Radius Consistency: 90/100
- Accessibility: 100/100
- CSS Tokenization: 100/100

## CSS variables

```css
:root {
  --color-primary: #150f23;
  --color-secondary: #9ecbff;
  --color-accent: #2d2340;
  --color-background: #1f1633;
  --color-text: #000000;
  --color-neutral-1: #ffffff;
  --color-neutral-2: #d4d4d4;
  --color-neutral-3: #e1e4e8;
  --color-neutral-4: #6a737d;
  --font-primary: "Rubik", sans-serif;
  --font-secondary: "Monaco", monospace;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 10px;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/sentry-io/sentry-io-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/sentry-io/sentry-io-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/sentry-io/sentry-io-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/sentry-io/sentry-io-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/sentry-io/sentry-io-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/sentry-io/sentry-io-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/sentry-io/sentry-io-DESIGN.md)

Regenerate: `npx designlang sentry.io`