Typography
scale ratio 1.414- Intercss: interdisplay + body400 500 60099%
- Mdiocss: mdioother5001%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Inter | 64px | 500 | 1.1 | -0.01em |
| title | Inter | 20px | 500 | 1.2 | -0.01em |
| body | Inter | 16px | 400 | 1.5 | -0.01em |
| body-sm | Inter | 14px | 400 | 1.5 | -0.01em |
| label | Inter | 14px | 500 | 1.5 | -0.01em |
Type scale
Aa12Aa14Aa16Aa20Aa32Aa48Aa64
- Body size
- 16px / 1.5
- Display size
- 64px
- Display tracking
- -0.01em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 12.86:1
- Muted on bg
- 6.91:1
- Accent on bg
- 15.57:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 4
- 8
- 10
- 12
- 14
- 20
- 24
- 32
- 64
Corner radii
816pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- 97px
Components
exact computed valuesbutton-primary
Get started - it’s free!
- backgroundColor
- #1F1E1E
- textColor
- #FFFFFF
- rounded
- 8px
- padding
- 8px 12px
- height
- 36px
- fontFamily
- Inter
- fontSize
- 16px
- fontWeight
- 500
button-secondary
Engineering
- textColor
- #1F1E1E
- rounded
- 9999px
- padding
- 8px 12px
- height
- 36px
- fontFamily
- Inter
- fontSize
- 14px
- fontWeight
- 500
- border
- 1px solid #1F1E1E1A
card
- rounded
- 16px
- padding
- 32px
- backgroundColor
- #FFFFFF
- border
- 1px solid #EEEBEA
- shadow
- rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0
Layout & motion
- Container
- 1312px
- Grid columns
- 12
- Hero
- centered+media-below
- Navigation
- top-sticky
- Page height
- 5,766px
- Easing
- ease
- Durations
- 150ms 200ms 300ms
- Transitions
- 167
- Keyframes
- 1
- Stack
- next.js, tailwind, sanity, google-tag-manager, vercel
Page sections (8)
01logos
02heroThe best secure connectivity platform for the AI era
03logoschoose Tailscale 50,000 businesses
04featuresEasy, secure, identity-based access to anything
05feature detailBut don’t just take our word for it. Developer approved,
06logosCross-platform. Infrastructure agnostic. Over 100 integrations.
07ctaSecure your networking using identity with Tailscale
08footerSocial
How Tailscale 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.41×: steeper than 81% of indexed sites (median 1.28×).
- Container
- 1312px: wider than 73% of indexed sites (median 1242px).
- Text contrast
- 12.9:1: lower than 85% of indexed sites (median 17.6:1).
- Page length
- 5,766px: shorter than 75% of indexed sites (median 8,217px).
- Corner radius
- Mostly 16px, shared by 11 of 274 indexed sites (4%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- Mdio
- The only site in the index that loads Mdio.
- 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 Tailscale use?
Tailscale uses Inter (loaded as "inter") for headings and body text. Mdio (loaded as "mdio") is used for other.
What are Tailscale's brand colors?
Tailscale's website uses a light scheme: background #F9F7F6, surface #FFFFFF, text #2E2D2D, muted text #2E2D2DCC and borders #EEEBEA.
How is Tailscale's website laid out?
The most common corner radius is 16px, body text is 16px with 1.5 line height, and the page container is 1312px wide.
