Typography
scale ratio 1.288| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Manrope | 94px | 600 | 1 | -0.021em |
| title | Manrope | 40px | 400 | 1.2 | -0.012em |
| body | Inter | 16px | 400 | 2 | 0em |
| body-sm | Inter | 13px | 600 | 1.8 | 0em |
| label | Inter | 13px | 500 | 1.385 | 0em |
| mono | PT Mono | 94px | 400 | 1 | -0.043em |
Type scale
Aa9Aa11Aa13Aa14Aa15Aa16Aa18Aa24Aa30Aa32Aa40Aa72Aa94
- Body size
- 16px / 2
- Display size
- 94px
- Display tracking
- -0.021em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 16.29:1
- Muted on bg
- 10.94:1
- Accent on bg
- 3.75:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 2
- 8
- 16
- 18
- 20
- 24
- 26
- 28
- 32
- 36
- 52
- 64
- 72
- 80
Corner radii
68101620pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- 80px
Components
exact computed valuesbutton-primary
Try Bolt.new
- backgroundColor
- #1574EF
- textColor
- #FFFFFF
- rounded
- 10px
- padding
- 0px 32px
- height
- 52px
- fontFamily
- Inter
- fontSize
- 16px
- fontWeight
- 500
- shadow
- rgba(255, 255, 255, 0.14) 0px 0px 0px 1px inset
button-secondary
- backgroundColor
- #FFFFFF
- textColor
- #FFFFFF
- rounded
- 0px
- padding
- 6px 8px
- height
- 44px
- fontFamily
- Inter
- fontSize
- 16px
- fontWeight
- 400
Layout & motion
- Container
- 1336px
- Grid columns
- 4
- Hero
- left-aligned
- Navigation
- top-sticky+transparent
- Page height
- 4,414px
- Easing
- ease
- Durations
- 100ms 160ms 300ms 1200ms
- Transitions
- 33
- Keyframes
- 0
- Stack
- astro, google-tag-manager, cloudflare, cloudfront
Page sections (4)
01nav
02heroHow & work together with AI
03featuresand than local.
04footer
How StackBlitz compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 94px: larger than 88% of indexed sites (median 60px).
- Type scale
- 1.29×: steeper than 51% of indexed sites (median 1.28×).
- Container
- 1336px: wider than 82% of indexed sites (median 1242px).
- Text contrast
- 16.3:1: lower than 66% of indexed sites (median 17.6:1).
- Page length
- 4,414px: shorter than 81% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Manrope
- One of 3 indexed sites that load Manrope (1%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- 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 StackBlitz use?
StackBlitz uses Manrope for headings. Inter is used for body text.
What are StackBlitz's brand colors?
StackBlitz's website uses a dark scheme: background #1C1F25, surface #151619F5, text #FFFFFF, muted text #FFFFFFCC and borders #FFFFFF1F.
How is StackBlitz's website laid out?
The most common corner radius is 0px, body text is 16px with 2 line height, and the page container is 1336px wide.
