Typography
scale ratio 1.500- Interdisplay + body400 500 600 900100%
- system-uimono5000%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Inter | 76px | 900 | 1.25 | -0.02em |
| headline | Inter | 20px | 600 | 1.2 | -0.02em |
| body | Inter | 15px | 400 | 1.6 | 0.013em |
| body-sm | Inter | 12px | 500 | 1.667 | 0.017em |
| label | Inter | 14.4px | 400 | 1.667 | 0.014em |
| mono | system-ui | 12px | 500 | 1.833 | 0em |
Type scale
Aa11Aa12Aa13Aa14.5Aa15Aa16Aa20Aa22Aa76
- Body size
- 15px / 1.6
- Display size
- 76px
- Display tracking
- -0.02em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 12.61:1
- Muted on bg
- 4.51:1
- Accent on bg
- 2.50:1
- Dark mode
- follows system
Declared accent tokens
- --vt-c-brand#42B883painted
- --docsearch-primary-color#5468FFnot on page
Space, shape & depth
Spacing scale
- 2
- 4
- 8
- 12
- 15
- 18
- 24
- 28
- 32
- 36
- 42
- 48
- 208
Corner radii
28pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- 96px
Components
exact computed valuesbutton-primary
Why Vue
- backgroundColor
- #42B883
- textColor
- #FFFFFF
- rounded
- 8px
- padding
- 8px 16px
- height
- 40px
- fontFamily
- Inter
- fontSize
- 16px
- fontWeight
- 600
card
- rounded
- 2px
- padding
- 0px
- backgroundColor
- #F9F9F9
Layout & motion
- Container
- 960px
- Grid columns
- 4
- Hero
- centered
- Navigation
- top-fixed+transparent
- Page height
- 3,055px
- Easing
- ease
- Durations
- 200ms 250ms 500ms
- Transitions
- 136
- Keyframes
- 0
- Stack
- vue, storyblok, netlify
Page sections (5)
section labels are heuristic
01nav
02heroThe JavaScript Framework
03content?
04features?Efficient
05footer
How Vue.js compares
- Body text
- 15px: smaller than 76% of indexed sites (median 16px).
- Largest heading
- 76px: larger than 78% of indexed sites (median 60px).
- Type scale
- 1.50×: steeper than 89% of indexed sites (median 1.28×).
- Container
- 960px: narrower than 85% of indexed sites (median 1242px).
- Text contrast
- 12.6:1: lower than 87% of indexed sites (median 17.6:1).
- Page length
- 3,055px: shorter than 87% of indexed sites (median 8,217px).
- Corner radius
- Mostly 2px, shared by 10 of 274 indexed sites (4%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- Color scheme
- Light by default, like 75% of indexed sites. It is one of 49 sites (18%) that switch with the system dark mode setting.
In short
What font does Vue.js use?
Vue.js uses Inter for headings and body text.
What are Vue.js's brand colors?
Vue.js's website uses a light scheme: background #FFFFFF, text #213547, muted text #3C3C3CB3 and borders #3C3C3C1F.
How is Vue.js's website laid out?
The most common corner radius is 2px, body text is 15px with 1.6 line height, and the page container is 960px wide.
