Typography
scale ratio 1.392- SN Prodisplay + body400 700 900100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | SN Pro | 60px | 900 | 1 | 0em |
| headline | SN Pro | 40px | 900 | 1.25 | 0em |
| title | SN Pro | 24px | 700 | 1.167 | 0em |
| body | SN Pro | 16px | 400 | 1.5 | 0em |
| body-sm | SN Pro | 14px | 900 | 1.429 | 0.025em |
| label | SN Pro | 18px | 400 | 1.556 | 0em |
Type scale
Aa12Aa14Aa16Aa18Aa24Aa40Aa60
- Body size
- 16px / 1.5
- Display size
- 60px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 17.00:1
- Muted on bg
- undefined:1
- Accent on bg
- 12.50:1
- Dark mode
- none
Declared accent tokens
- --twitter_accent#1DA1F2not on page
- --chakra-colors-primary#6868F7painted
- --chakra-colors-templateColors-red-primary#D63A35not on page
- --chakra-colors-templateColors-pink-primary#E25993not on page
Space, shape & depth
Spacing scale (base 8px)
- 8
- 12
- 13
- 16
- 24
- 32
- 40
- 48
- 64
- 68
- 80
- 127
- 160
Corner radii
1220
Shadows (2)
- Borders
- hairline, 1px
- Section padding
- 240px
Components
exact computed valuescard
- rounded
- 12px
- padding
- 0px
- backgroundColor
- #FFFFFF
- shadow
- rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(13, 19, 27, 0.1) 0px 2px 10px 0px, rgba(13, 19,
Layout & motion
- Container
- 640px
- Grid columns
- n/a
- Hero
- centered
- Navigation
- none-detected
- Page height
- 4,132px
- Easing
- n/a
- Durations
- n/a
- Transitions
- 0
- Keyframes
- 0
- Stack
- next.js, google-tag-manager, github-pages, fastly
Page sections (3)
01heroA new chapter for June
02logosJune is joining Amplitude
03footer
How June compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 60px: larger than 48% of indexed sites (median 60px).
- Type scale
- 1.39×: steeper than 78% of indexed sites (median 1.28×).
- Container
- 640px: narrower than 97% of indexed sites (median 1242px).
- Text contrast
- 17.0:1: lower than 58% of indexed sites (median 17.6:1).
- Page length
- 4,132px: shorter than 82% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- SN Pro
- The only site in the index that loads SN Pro.
- Color scheme
- Light by default, like 75% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does June use?
June uses SN Pro for headings and body text.
What are June's brand colors?
June's website uses a light scheme: background #FAFAFA, surface #F0F0FE, text #151531 and borders #E9ECEF.
How is June'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 640px wide.
