Typography
scale ratio 1.641- Instrument Sanscss: Instrument-Sansbody40057%
- Instrument Serifcss: Instrument-Serifdisplay40043%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Instrument Serif | 64px | 400 | 1.125 | -0.02em |
| headline | Instrument Sans | 12px | 400 | 1.333 | 0.11em |
| title | Instrument Sans | 28px | 400 | 1.143 | -0.01em |
| body | Instrument Sans | 18px | 400 | 1.556 | 0.02em |
| body-sm | Instrument Sans | 15px | 400 | 1.6 | 0.03em |
Type scale
Aa11Aa12Aa14Aa15Aa18Aa19Aa23Aa28Aa36Aa64Aa352
- Body size
- 18px / 1.556
- Display size
- 64px
- Display tracking
- -0.02em
- Case
- upper
Color
dark schemePalette by painted area
- Text on bg
- 16.44:1
- Muted on bg
- 5.10:1
- Accent on bg
- 16.44:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 3
- 4
- 5
- 6
- 8
- 10
- 12
- 16
- 20
- 24
- 32
- 48
- 96
- 217.5
Corner radii
pill
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 109px
Components
exact computed valuesbutton-primary
- backgroundColor
- #E8E8E9
- textColor
- #E8E8E9
- rounded
- 0px
- padding
- 0px 0px
- height
- 48px
- fontFamily
- Instrument-Sans
- fontSize
- 18px
- fontWeight
- 400
Layout & motion
- Container
- 1344px
- Grid columns
- 12
- Hero
- centered
- Navigation
- top-sticky+transparent
- Page height
- 6,710px
- Easing
- ease-in-out
- Durations
- 150ms 250ms 300ms 350ms
- Transitions
- 95
- Keyframes
- 1
- Stack
- nuxt, storyblok, hubspot, netlify
Page sections (8)
section labels are heuristic
01nav
02hero
03features?Recent work
04logos?
05logos?
06content?
07content?
08footerFollow along
How Instrument compares
- Body text
- 18px: larger than 71% of indexed sites (median 16px).
- Largest heading
- 64px: larger than 56% of indexed sites (median 60px).
- Type scale
- 1.64×: steeper than 94% of indexed sites (median 1.28×).
- Container
- 1344px: wider than 83% of indexed sites (median 1242px).
- Text contrast
- 16.4:1: lower than 64% of indexed sites (median 17.6:1).
- Page length
- 6,710px: shorter than 63% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Instrument Sans
- One of 4 indexed sites that load Instrument Sans (1%).
- Instrument Serif
- The only site in the index that loads Instrument Serif.
- 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 Instrument use?
Instrument uses Instrument Sans (loaded as "Instrument-Sans") for body text. Instrument Serif (loaded as "Instrument-Serif") is used for headings.
What are Instrument's brand colors?
Instrument's website uses a dark scheme: background #070708, text #E8E8E9, muted text #808080 and borders #E8E8E91F.
How is Instrument's website laid out?
The most common corner radius is fully rounded (pill), body text is 18px with 1.556 line height, and the page container is 1344px wide.
