Typography
scale ratio 1.329- Monacomono40052%
- Rubikbody400 500 70028%
- Dammit Sansdisplay500 70018%
- Menloother4001%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Dammit Sans | 88px | 700 | 1.2 | 0em |
| headline | Dammit Sans | 60px | 500 | 1.1 | 0em |
| title | Rubik | 24px | 500 | 1.25 | 0em |
| body | Monaco | 16px | 400 | 1.5 | 0em |
| body-sm | Rubik | 14px | 400 | 1.714 | 0em |
| label | Rubik | 14px | 500 | 1.286 | 0em |
Type scale
Aa12Aa14Aa15Aa16Aa20Aa24Aa27Aa30Aa60Aa88
- Body size
- 16px / 1.5
- Display size
- 88px
- Display tracking
- 0em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 18.68:1
- Muted on bg
- 3.88:1
- Accent on bg
- 7.72:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 6
- 8
- 12
- 16
- 20.5
- 24
- 32
- 64
- 144
Corner radii
81010.5pill
Shadows (4)
- Borders
- hairline, 1px
- Section padding
- 25px
Components
exact computed valuesbutton-primary
Get Started
- backgroundColor
- #FA7FAA
- textColor
- #1F1633
- rounded
- 8px
- padding
- 12px 16px
- height
- 40px
- fontFamily
- Rubik
- fontSize
- 14px
- fontWeight
- 700
button-secondary
Get Demo
- backgroundColor
- #C83852
- textColor
- #FFFFFF
- rounded
- 8px
- padding
- 12px 16px
- height
- 40px
- fontFamily
- Rubik
- fontSize
- 14px
- fontWeight
- 700
card
- rounded
- 10.6px
- padding
- 0px
- backgroundColor
- #1F1633
input
- rounded
- 6px
- height
- 42px
- padding
- 8px 12px
- backgroundColor
- #FFFFFF
- border
- 1px solid #CFCFDB
Layout & motion
- Container
- 1152px
- Grid columns
- 2
- Hero
- centered+media-below
- Navigation
- none-detected
- Page height
- 8,809px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 200ms 300ms 800ms
- Transitions
- 85
- Keyframes
- 3
- Stack
- astro, tailwind, vercel
Page sections (8)
section labels are heuristic
01hero
03feature detail?Loved by developers
04code sample?Get started
05feature detail?Built to be secure,
06newsletterGet monthly product updates
07cta?Fix It
08footerGet Help
How Sentry compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 88px: larger than 86% of indexed sites (median 60px).
- Type scale
- 1.33×: steeper than 64% of indexed sites (median 1.28×).
- Container
- 1152px: narrower than 69% of indexed sites (median 1242px).
- Text contrast
- 18.7:1: higher than 62% of indexed sites (median 17.6:1).
- Page length
- 8,809px: longer than 57% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Rubik
- The only site in the index that loads Rubik.
- Dammit Sans
- The only site in the index that loads Dammit Sans.
- Color scheme
- Dark by default, like 25% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Sentry use?
Sentry uses Monaco for code. Rubik is used for body text. Dammit Sans is used for headings.
What are Sentry's brand colors?
Sentry's website uses a dark scheme: background #150F23, text #FFFFFF, muted text #6A737D and borders #FFFFFF1A.
How is Sentry's website laid out?
The most common corner radius is 0px, body text is 16px with 1.5 line height, and the page container is 1152px wide.
