Typography
scale ratio 1.357- Helvetica Now Textbody400 500 70075%
- Helvetica Now Displaydisplay500 70025%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Helvetica Now Display | 53px | 500 | 1.1 | 0em |
| headline | Helvetica Now Display | 40px | 700 | 1.08 | -0.01em |
| title | Helvetica Now Display | 16px | 500 | 1.5 | 0em |
| body | Helvetica Now Text | 16px | 400 | 1.45 | -0.01em |
| body-sm | Helvetica Now Text | 13px | 400 | 1 | 0em |
| label | Helvetica Now Text | 14px | 400 | 1.55 | 0em |
Type scale
Aa10Aa12Aa13Aa14Aa16Aa20Aa36Aa40
- Body size
- 16px / 1.5
- Display size
- 53px
- Display tracking
- 0em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 19.50:1
- Muted on bg
- 7.20:1
- Accent on bg
- 3.87:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 4
- 8
- 12
- 16
- 20
- 24
- 32
- 36
- 40
- 44
- 157
- 172.5
- 192
Corner radii
16pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- 52px
Components
exact computed valuesbutton-primary
Start for free
- backgroundColor
- #5B63D3
- textColor
- #FFFFFF
- rounded
- 10px
- padding
- 0px 24px
- height
- 50px
- fontFamily
- Helvetica Now Text
- fontSize
- 16px
- fontWeight
- 500
- border
- 1px solid #FFFFFF24
- shadow
- rgba(255, 255, 255, 0.25) 0px 1px 3px 0px inset
button-secondary
Explore pricing
- textColor
- #C9D3EE
- rounded
- 9999px
- padding
- 0px 12px
- height
- 37px
- fontFamily
- Helvetica Now Text
- fontSize
- 13px
- fontWeight
- 400
- border
- 1px solid #939DB833
card
- rounded
- 16px
- padding
- 0px
- backgroundColor
- #0F101A
- border
- 1px solid #939DB81A
input
- rounded
- 12px
- height
- 52px
- padding
- 0px 20px
- backgroundColor
- #727DA11A
- border
- 1px solid #727DA133
Layout & motion
- Container
- 1126px
- Grid columns
- n/a
- Hero
- left-aligned
- Navigation
- top-fixed
- Page height
- 11,700px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 400ms 500ms 1000ms
- Transitions
- 124
- Keyframes
- 1
- Stack
- tailwind, hotwire, google-tag-manager, cloudflare
Page sections (15)
section labels are heuristic
01nav
02heroThe AI SRE observability stack
03logos?
04features?AI SRE
05features?Tracing
06features?Incident management
07features?Uptime monitoring
08features?Log management
09features?Infrastructure monitoring
10features?Error tracking
11features?Real user monitoring
12features?Status page
13feature detail?Happy customers, growing market presence
14logos
15footer
How Better Stack compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 53px: smaller than 63% of indexed sites (median 60px).
- Type scale
- 1.36×: steeper than 72% of indexed sites (median 1.28×).
- Container
- 1126px: narrower than 72% of indexed sites (median 1242px).
- Text contrast
- 19.5:1: higher than 70% of indexed sites (median 17.6:1).
- Page length
- 11,700px: longer than 80% of indexed sites (median 8,217px).
- Corner radius
- Mostly 16px, shared by 11 of 274 indexed sites (4%).
- Helvetica Now Text
- The only site in the index that loads Helvetica Now Text.
- Helvetica Now Display
- One of 3 indexed sites that load Helvetica Now Display (1%).
- 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 Better Stack use?
Better Stack uses Helvetica Now Text for body text. Helvetica Now Display is used for headings.
What are Better Stack's brand colors?
Better Stack's website uses a dark scheme: background #0B0C14, surface #171824CC, text #FFFFFF, muted text #939DB8 and borders #939DB81A.
How is Better Stack's website laid out?
The most common corner radius is 16px, body text is 16px with 1.5 line height, and the page container is 1126px wide.
