Sentry design system
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.
Sentry colors
The brand roles and neutrals sentry.io renders, with how many elements use each one.
Brand colors
- Primary
#150f23164 uses - Secondary
#9ecbff220 uses - Accent
#2d23402 uses
Neutrals
#ffffff3,650 uses#d4d4d4675 uses#e1e4e8622 uses#6a737d144 uses#000000120 uses#1a1a1a9 uses#efefef6 uses#5846741 uses#c1c1c11 uses
Backgrounds
#1f1633#150f23#422082
Text colors
#0000001.22:1 on #1f1633#ffffff17.2:1 on #1f1633#1a1a1a1.01:1 on #1f1633#6a5fc13.29:1 on #1f1633#1f16331:1 on #1f1633#03060a1.18:1 on #1f1633#4e2a9a1.74:1 on #1f1633#0102051.21:1 on #1f1633
Sentry fonts and type scale
Every font family and size in use, read from computed styles rather than the CSS source.
Font families
- Rubik: sans, most text (2,000 elements)
- Monaco: mono, body (1,165 elements)
- IBM Plex Mono: mono, body (57 elements)
- Dammit Sans: sans, most text (17 elements)
Body text: 16px at weight 400, line height 24px.
Weights in use: 400, 500, 700, 600.
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 and radii
Spacing scale
Corner radii
- 2px
- 6px
- 10px
- 13px
- 16px
- 50px
Medium radii lead, with a few larger ones. 7 distinct box shadows.
Motion
The motion reads as mixed.
Durations
xs: 150mssm: 200msmd: 300mslg: 600msxl: 800ms
Easing
- custom (193 uses):
cubic-bezier(0.4, 0, 0.2, 1) - ease-in-out (61 uses):
ease - ease-out (1 uses):
cubic-bezier(0, 0, 0.2, 1)
Design system audit
designlang scores how consistently a site uses its own values. How the audit works.
Overall
Components found: buttons (88), cards (6), inputs (7), links (210), navigation (32), footer (1).
By category
| 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 |
- 4 font families — consider limiting to 2 (heading + body)
- 141 !important rules — prefer specificity over overrides
- 51% of CSS is unused — consider purging
- 3354 duplicate CSS declarations
Download the tokens
The files designlang wrote for sentry.io. Run it yourself for a fresh read: npx designlang sentry.io.
The core values as CSS variables
: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;
}Read sentry.io yourself
Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.
Quick answers
What font does Sentry use?
What are Sentry's brand colors?
How do I use the Sentry design system in my own app?
Is this the official design system?
Measured from the public pages of sentry.io on 25 June 2026. Sentry is a trademark of its owner; designlang is not affiliated with it. More: the full Sentry brand kit, the token extraction guide and the markdown version of this page.