Typography
scale ratio 1.320- Figtreedisplay600 700 80054%
- Instrument Sansbody400 500 600 70034%
- Martian Monomono400 70013%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Figtree | 64px | 800 | 1.1 | 0em |
| title | Figtree | 32px | 800 | 1.1 | 0em |
| body | Instrument Sans | 16px | 400 | 1.5 | 0em |
| body-sm | Martian Mono | 14px | 400 | 1.1 | 0em |
| label | Figtree | 16px | 700 | 1 | 0em |
| mono | Martian Mono | 16px | 400 | 1.5 | 0em |
Type scale
Aa12Aa14Aa16Aa18Aa24Aa32Aa48Aa64
- Body size
- 16px / 1.5
- Display size
- 64px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 17.85:1
- Muted on bg
- 11.50:1
- Accent on bg
- 1.55:1
- Dark mode
- follows system
Declared accent tokens
- --blockquote-accent-color#2E51EDpainted
- --ntl-blockquote-accent-color#2E51EDpainted
- --color-brand-primary#2E51EDpainted
- --color-brand-secondary#14D8D4painted
Space, shape & depth
Spacing scale (base 4px)
- 4
- 8
- 10
- 12
- 16
- 17
- 24
- 32
- 48
- 64
- 96
Corner radii
24630pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- 118px
Components
exact computed valuesbutton-primary
Start building
- backgroundColor
- #32E6E2
- textColor
- #12181F
- rounded
- 9999px
- padding
- 10px 17px
- height
- 40px
- fontFamily
- Figtree
- fontSize
- 16px
- fontWeight
- 700
- border
- 2px solid #32E6E2
card
- rounded
- 6px
- padding
- 24px
- backgroundColor
- #FFFFFF
- border
- 1px solid #E9EBED
Layout & motion
- Container
- 1280px
- Grid columns
- 15
- Hero
- split
- Navigation
- top-sticky+transparent
- Page height
- 6,690px
- Easing
- ease
- Durations
- 100ms 150ms 200ms 250ms
- Transitions
- 34
- Keyframes
- 3
- Stack
- astro, hubspot, google-tag-manager, netlify
Page sections (7)
section labels are heuristic
01nav
02heroPush your ideas to the web
03logos
04features?Build your way. Ship on one platform.
05feature detail?Start your way.
06testimonials
07code sample?For every kind of web app.
How Netlify compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 64px: larger than 56% of indexed sites (median 60px).
- Type scale
- 1.32×: steeper than 59% of indexed sites (median 1.28×).
- Container
- 1280px: wider than 55% of indexed sites (median 1242px).
- Text contrast
- 17.9:1: higher than 53% of indexed sites (median 17.6:1).
- Page length
- 6,690px: shorter than 64% of indexed sites (median 8,217px).
- Corner radius
- Mostly 4px, shared by 24 of 274 indexed sites (9%).
- Figtree
- One of 2 indexed sites that load Figtree (1%).
- Instrument Sans
- One of 4 indexed sites that load Instrument Sans (1%).
- 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 Netlify use?
Netlify uses Figtree for headings. Instrument Sans is used for body text. Martian Mono is used for code.
What are Netlify's brand colors?
Netlify's website uses a light scheme: background #FFFFFF, surface #E9EBED1A, text #181A1C, muted text #353A3E and borders #FFFFFF33.
How is Netlify's website laid out?
The most common corner radius is 4px, body text is 16px with 1.5 line height, and the page container is 1280px wide.
